update

src/packages/quote/views/quote/index.less

@@ -1,5 +1,5 @@
 .quote {
-    height: 100%;
+    height: 100vh;
     color: #fff;
     background-color: #222;
     overflow: hidden;
@@ -48,7 +48,6 @@
             }
 
             td {
-                height: 100px;
                 font-size: 36px;
                 padding: 20px;
 

src/packages/quote/views/quote/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="quote">
+    <div ref="quoteRef" class="quote">
         <div class="quote-header">
             <div class="quote-header__logo">
                 <img :src="'./logo/logo-horizontal.png'" />
@@ -67,8 +67,9 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, computed, onActivated, onDeactivated, ref, onMounted, onUnmounted } from 'vue'
+import { shallowRef, computed, onActivated, onDeactivated, ref, onMounted, onUnmounted, nextTick } from 'vue'
 import moment, { Moment } from 'moment'
+import { timerInterceptor } from '@/utils/timer'
 import { getServerTime } from '@/services/api/common'
 import { handleNumberValue, formatDecimal } from '@/filters'
 import { queryTouristGoods, queryTouristQuoteDay } from '@/services/api/goods'
@@ -83,6 +84,8 @@ import service from '@/services'
 const enumStore = useEnumStore()
 const futuresStore = useFuturesStore()
 const subscribe = quoteSocket.createSubscribe()
+const quoteRef = shallowRef<HTMLDivElement>()
+const maxQty = 8 // 显示最多商品数量
 
 // 订阅的商品代码
 const subscribeData = shallowRef<string[]>([])
@@ -91,7 +94,7 @@ const serverTime = ref<Moment>()
 
 service.onReady().then(() => {
     enumStore.getAllEnumList()
-    
+
     // 获取游客商品列表
     queryTouristGoods().then((res) => {
         futuresStore.goodsList = res.data
@@ -116,6 +119,8 @@ service.onReady().then(() => {
                     marketID: firstMarket.marketid
                 })
             }
+
+            nextTick(() => autoHeight())
         })
     })
 
@@ -133,7 +138,6 @@ service.onReady().then(() => {
     checkServerTime()
 })
 
-
 const { data: market, run: marketRun } = useRequest(queryMarketRun, {
     manual: true,
     onSuccess: (res) => {
@@ -156,11 +160,36 @@ const touristRefGoodsList = computed(() => {
     return list.sort((a, b) => a.goodsorder.localeCompare(b.goodsorder))
 })
 
+// 自适应高度
+const autoHeight = () => {
+    const el = quoteRef.value
+    const header = el?.querySelector('.quote-header')
+    const table = el?.querySelector('.quote-table')
+
+    if (header && table) {
+        let height = document.body.clientHeight - header.clientHeight
+
+        table.querySelectorAll('thead').forEach((e) => {
+            height -= e.clientHeight
+        })
+
+        const tableRows = table.querySelectorAll('tbody tr') // 获取行数
+
+        table.querySelectorAll('td').forEach((e) => {
+            const n = tableRows.length < maxQty ? tableRows.length : maxQty
+            e.style.setProperty('height', (height / n) + 'px')
+        })
+    }
+}
+
 onMounted(() => {
     serverTime.value = moment(new Date())
     timerTask.setInterval(() => {
         serverTime.value = moment(serverTime.value).add(1000, 'ms')
     }, 1000, 'refreshTime')
+
+    // 监听窗口大小变化
+    window.addEventListener('resize', timerInterceptor.setDebounce(() => autoHeight()))
 })
 
 onActivated(() => subscribeData.value.length && subscribe.start(...subscribeData.value))