更新

package-lock.json

@@ -12,6 +12,7 @@
         "@jiaminghi/data-view": "^2.10.0",
         "echarts": "^5.4.3",
         "mitt": "^3.0.1",
+        "pinia": "^2.1.7",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
       },
@@ -981,6 +982,50 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -13,6 +13,7 @@
     "@jiaminghi/data-view": "^2.10.0",
     "echarts": "^5.4.3",
     "mitt": "^3.0.1",
+    "pinia": "^2.1.7",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },

src/components/areaList.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { defineProps, defineEmits, ref, nextTick, } from "vue"
+import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const emit = defineEmits(['offAreaList']);
 const choseArea = ref(false);
+import { useAppStore } from "@/store/app.js";
 
 const list = ref([
   {
@@ -36,9 +37,12 @@ const list = ref([
   },
 ])
 
+const appStore = useAppStore();
+
 // 选镇
 const choseTownFn = (item) => {
   emit('offAreaList', item);
+  appStore.setMapInfo(item.pinyin);
 }
 
 const open = () => {
@@ -57,6 +61,14 @@ defineExpose({
   open, close, show
 })
 
+onMounted(() => {
+  list.value.forEach(item => {
+    if (item.pinyin == appStore.map_info) {
+      choseTownFn(item)
+    }
+  })
+})
+
 </script>
 
 <template>

src/components/border.vue

@@ -4,9 +4,9 @@
 <template>
   <div class="border-box">
     <div class="border-top"></div>
-    <div class="center">
+    <div class="border-center">
       <div class="border-left"></div>
-      <div class="box"><slot></slot></div>
+      <div class="border-slot"><slot></slot></div>
       <div class="border-left"></div>
     </div>
     <div class="border-bottom"></div>
@@ -43,7 +43,7 @@
       #5bdbf6 calc(100% - 12px)
     );
   }
-  .center {
+  .border-center {
     flex: 1;
     display: flex;
     justify-content: space-between;
@@ -58,7 +58,7 @@
       );
     }
   }
-  .box {
+  .border-slot {
     flex: 1;
   }
 }

src/components/headView.vue

@@ -35,8 +35,30 @@ const navToDelivery = () => {
   else router.back();
 }
 
+let nowTime = ref([]);
+
+const updateClock = () => {
+  let now = new Date();
+  let hours = now.getHours();
+  let minutes = now.getMinutes();
+  let seconds = now.getSeconds();
+  let y = now.getFullYear();
+  let m = now.getMonth() + 1;
+  let d = now.getDate();
+
+  nowTime.value[0] = y + '.' + m.toString().padStart(2, '0') + '.' + d.toString().padStart(2, '0');
+
+  nowTime.value[1] = hours.toString().padStart(2, '0') + ':' +
+    minutes.toString().padStart(2, '0') + ':' +
+    seconds.toString().padStart(2, '0');
+}
+
 onMounted(() => {
+
   mitt.emit('map_info', info);
+
+  // 每秒钟更新一次时间
+  setInterval(updateClock, 1000);
 })
 </script>
 
@@ -48,9 +70,9 @@ onMounted(() => {
         src="/src/assets/head_img/logo.png"
         @click="navToDelivery"
       />
-      <div class="item">2023.11.17</div>
+      <div class="item">{{ nowTime[0] }}</div>
       <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
-      <div class="item">11:30:20</div>
+      <div class="item">{{ nowTime[1] }}</div>
     </div>
     <div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
     <div class="right">

src/main.js

@@ -4,8 +4,12 @@ import App from './App.vue'
 import dataV from '@jiaminghi/data-view'
 import './assets/font/fonts.css';
 import router from "./router";
+import { createPinia } from 'pinia'
+
+const pinia = createPinia();
 
 const app = createApp(App)
 app.use(dataV)
+app.use(pinia)
 app.use(router)
 app.mount('#app')

src/store/app.js

@@ -0,0 +1,16 @@
+import { defineStore } from "pinia"
+import { ref } from "vue"
+
+export const useAppStore = defineStore('app', () => {
+    const map_info = ref(localStorage.getItem('map_info') || 'luxian');
+
+    const setMapInfo = (e) => {
+        map_info.value = e;
+        localStorage.setItem('map_info', e);
+    }
+
+    return {
+        map_info,
+        setMapInfo
+    }
+})

src/view/delivery/components/bottom.vue

@@ -4,28 +4,55 @@ import border from "@/components/border.vue";
 import * as echarts from 'echarts';
 import mitt from "@/utils/mitt"
 
+const initData = (aaa) => {
+  for (let i = 0; i < 20; i++) {
+    if (i % 2 == 0) {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        ]
+      )
+    } else {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+        ]
+      )
+    }
+
+  }
+}
+
 const list = reactive({
-  header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
+  header: [
-  data: [
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
   ],
+  data: [],
   //   index: true,
-  headerBGC: 'rgba(0, 168, 255, 0.56)',
+  // headerBGC: 'rgba(0, 168, 255, 0.76)',
-  oddRowBGC: 'rgba(91, 219, 246, 0.20)',
+  // oddRowBGC: 'rgba(91, 219, 246, 0.20)',
-  evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  // evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  oddRowBGC: '',
+  evenRowBGC: "",
   //   columnWidth: [50],
   align: ['center'],
   rowNum: 7
 })
 
+initData(list);
+
 const orderList = reactive([
   {
     name: '今日订单',
@@ -373,7 +400,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .box {
-  height: 92%;
+  height: 100%;
   width: 100%;
   padding: 20px 20px;
   font-size: 0.8rem;
@@ -381,9 +408,7 @@ onMounted(() => {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  & > div {
+  box-sizing: border-box;
-    width: calc(100% - 40px);
-  }
   .title {
     width: 100%;
     background-image: url(../../../assets/img/title3.png);
@@ -467,8 +492,14 @@ onMounted(() => {
           }
         }
       }
-      ::v-deep .dv-scroll-board .rows .row-item {
+
-        margin-bottom: 0.6rem;
+      :deep(.ceil) {
+        padding: 0 !important;
+        margin-bottom: 5px;
+      }
+
+      :deep(.header-item) {
+        padding: 0 !important;
       }
     }
   }

src/view/delivery/components/left.vue

@@ -168,7 +168,7 @@ onMounted(() => {
             </div>
           </div>
           <div>
-            <img class="img" src="/src/assets/delivery_img/icon1.png" />
+            <img class="img" src="/src/assets/delivery_img/icon2.png" />
           </div>
         </div>
       </div>
@@ -176,52 +176,52 @@ onMounted(() => {
       <div class="order">
         <div class="bottom">
           <div>
-            <img class="img" src="/src/assets/delivery_img/icon1.png" />
+            <img class="img" src="/src/assets/delivery_img/icon4.png" />
           </div>
           <div class="name">
             <div class="name1 b-box">
-              <div>商户名称</div>
+              <div>收件人</div>
             </div>
             <div class="name2">
-              <div>天天超市</div>
+              <div>王**</div>
             </div>
           </div>
           <div class="name">
             <div class="name1 b-box">
-              <div>商品名称</div>
+              <div>收件人电话</div>
             </div>
             <div class="name2">
-              <div>山花纯牛奶100ml</div>
+              <div>159****3366</div>
             </div>
           </div>
           <div>
-            <img class="img" src="/src/assets/delivery_img/icon1.png" />
+            <img class="img" src="/src/assets/delivery_img/icon8.png" />
           </div>
         </div>
       </div>
       <div class="order">
         <div class="bottom">
           <div>
-            <img class="img" src="/src/assets/delivery_img/icon1.png" />
+            <img class="img" src="/src/assets/delivery_img/icon6.png" />
           </div>
           <div class="name">
             <div class="name1 b-box">
-              <div>商户名称</div>
+              <div>收件地址</div>
             </div>
             <div class="name2">
-              <div>天天超市山花纯牛奶</div>
+              <div>泸县草芥幸福小区一号楼10-22</div>
             </div>
           </div>
           <div class="name">
             <div class="name1 b-box">
-              <div>商品名称</div>
+              <div>当前状态</div>
             </div>
             <div class="name2">
-              <div>山花纯牛奶100ml</div>
+              <div>订单已完成</div>
             </div>
           </div>
           <div>
-            <img class="img" src="/src/assets/delivery_img/icon1.png" />
+            <img class="img" src="/src/assets/delivery_img/icon5.png" />
           </div>
         </div>
       </div>
@@ -233,11 +233,11 @@ onMounted(() => {
       <div class="delivery">
         <div class="left">
           <div class="left-item">
-            <img class="img" src="/src/assets/delivery_img/icon2.png" />
+            <img class="img" src="/src/assets/delivery_img/icon7.png" />
             <div>配送人员<span>里斯</span></div>
           </div>
           <div class="left-item">
-            <img class="img" src="/src/assets/delivery_img/icon2.png" />
+            <img class="img" src="/src/assets/delivery_img/icon3.png" />
             <div>配送车辆<span>川E G856Z</span></div>
           </div>
         </div>
@@ -249,7 +249,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .box {
-  height: 97%;
+  height: 100%;
   width: 100%;
   padding: 20px 20px;
   font-size: 0.8rem;
@@ -257,9 +257,7 @@ onMounted(() => {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  & > div {
+  box-sizing: border-box;
-    width: calc(100% - 40px);
-  }
   .title {
     width: 100%;
     background-image: url(../../../assets/img/title.png);

src/view/delivery/components/right.vue

@@ -19,6 +19,12 @@ const items = reactive([
   { id: 3, text: '莲花池 8' },
   { id: 3, text: '莲花池 8' },
   { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
 ])
 const scrollContainerRef = ref(null);
 let timer = null;
@@ -50,8 +56,14 @@ onUnmounted(() => {
   <border>
     <div class="box">
       <div class="title">订单排行榜</div>
-      <div class="list">
+      <div
-        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
+        style="
+          height: calc(100% - 60px);
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+        "
+      >
         <div class="scroll-container" ref="scrollContainerRef">
           <div
             v-for="(item, index) in items"
@@ -85,7 +97,9 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  width: calc(100% - 40px);
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
   overflow: hidden;
   .title {
     width: 100%;
@@ -98,16 +112,12 @@ onUnmounted(() => {
     font-family: "ifonts";
     font-size: 1.2rem;
   }
-  .list {
-    margin-top: 20px;
-    width: 100%;
-    height: 80%;
-    .list-span1 {
-      background-color: red;
-    }
-  }
   .scroll-container {
-    height: 34rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     overflow-y: auto;
     /* 隐藏滚动条 */
     scrollbar-width: none;

src/view/index/components/centerMap.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, reactive, ref, inject } from "vue";
+import { onMounted, reactive, ref, inject, nextTick } from "vue";
 import * as echarts from 'echarts';
 import mitt from "@/utils/mitt";
 import luxian from "@/assets/json/luxian.json";
@@ -9,13 +9,16 @@ import gulin from "@/assets/json/gulin.json";
 import jiangyang from "@/assets/json/jiangyang.json";
 import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
+import { useAppStore } from "@/store/app.js";
+
+
+const appStore = useAppStore();
 
 const mapType = reactive({
   name: '',
   json: ''
 })
 
-
 const changeType = (name = 'luxian') => {
   mapType.name = name;
   if (name == 'luxian') mapType.json = luxian;
@@ -26,7 +29,6 @@ const changeType = (name = 'luxian') => {
   if (name == 'longma') mapType.json = longma;
   if (name == 'naxi') mapType.json = naxi;
 }
-changeType()
 
 let dataValue = [
   {
@@ -86,6 +88,7 @@ const initDateValue = () => {
 
 const echartsRef = ref(null);
 let chart = null;
+
 const initMap = () => {
   // 基于DOM元素初始化echarts实例
   if (chart == null) {
@@ -251,12 +254,20 @@ const initMap = () => {
   // 使用配置项显示图表
   chart.setOption(option);
 }
-mitt.on('map_info', e => {
+
-  console.log(e);
+onMounted(() => {
-  changeType(e.pinyin);
+  changeType(appStore.map_info);
-  initDateValue()
+  initDateValue();
   initMap();
+  nextTick(() => {
+    mitt.on('map_info', e => {
+      changeType(e.pinyin);
+      initDateValue();
+      initMap();
+    })
+  })
 })
+
 </script>
 
 <template>

src/view/index/components/leftItme1.vue

@@ -94,7 +94,7 @@ onMounted(() => {
             <div>{{ "〉" }}</div>
           </div>
         </div>
-        <dv-scroll-board :config="list" style="width: 100%; height: 18rem" />
+        <dv-scroll-board :config="list" style="width: 100%; height: 90%" />
       </div>
 
       <div class="cylinder">
@@ -135,17 +135,15 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .box {
-  height: calc(100% - 40px);
+  height: 100%;
   width: 100%;
+  box-sizing: border-box;
   padding: 20px 20px;
   font-size: 0.8rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  & > div {
-    width: calc(100% - 40px);
-  }
   .title {
     width: 100%;
     background-image: url(../../../assets/img/title.png);
@@ -217,7 +215,6 @@ onMounted(() => {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    margin-top: 20px;
     height: 20%;
     .cy {
       width: 30%;

src/view/index/components/leftItme2.vue

@@ -29,6 +29,11 @@ const items = reactive([
   { id: 3, text: '莲花池 6' },
   { id: 3, text: '莲花池 7' },
   { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
 ])
 const scrollContainerRef = ref(null);
 let timer = null;
@@ -60,8 +65,20 @@ onUnmounted(() => {
   <border>
     <div class="box">
       <div class="title">订单排行榜</div>
+      <div
+        style="
+          height: calc(100% - 60px);
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+        "
+      >
         <div class="scroll-container" ref="scrollContainerRef">
-        <div v-for="(item, index) in items" :key="item.id" class="b-list-item">
+          <div
+            v-for="(item, index) in items"
+            :key="item.id"
+            class="b-list-item"
+          >
             <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
               {{ index + 1 }}
             </div>
@@ -77,18 +94,21 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
+    </div>
   </border>
 </template>
 
 <style scoped lang="scss">
 .box {
   height: 100%;
+  width: 100%;
   font-size: 0.8rem;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
-  padding: 0 20px;
+  padding: 20px;
+  box-sizing: border-box;
 
   .title {
     width: 100%;
@@ -102,8 +122,11 @@ onUnmounted(() => {
     font-size: 1.2rem;
   }
   .scroll-container {
-    height: 80%;
+    position: absolute;
-    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     overflow-y: auto;
     /* 隐藏滚动条 */
     scrollbar-width: none;

src/view/index/components/rightItem1.vue

@@ -55,7 +55,9 @@ import border from "../../../components/border.vue"
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  width: calc(100% - 40px);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   .title {
     width: 100%;
@@ -70,6 +72,7 @@ import border from "../../../components/border.vue"
     margin-bottom: 1rem;
   }
   .car-box {
+    flex: 1;
     width: 100%;
     display: flex;
     .car {
@@ -90,11 +93,11 @@ import border from "../../../components/border.vue"
     }
     .list {
       flex: 2;
-      margin-top: 10px;
+      height: 100%;
       .head {
+        height: 33%;
         display: flex;
         align-items: center;
-        padding-bottom: 0.5rem;
         padding-left: 0.5rem;
         .img {
           height: 1rem;
@@ -103,13 +106,14 @@ import border from "../../../components/border.vue"
         }
       }
       .car-list {
+        height: 66%;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
         .car-item {
+          height: 50%;
           width: 50%;
-          height: 3rem;
           background-image: url(../../../assets/img/car-item.png);
           background-size: 100% 100%;
           display: flex;
@@ -119,13 +123,14 @@ import border from "../../../components/border.vue"
       }
     }
     .car-list2 {
+      height: 100%;
       display: flex;
       width: 100%;
       flex-wrap: wrap;
       justify-content: space-evenly;
       .car-item {
+        height: 33%;
         width: 33.33%;
-        height: 3rem;
         background-image: url(../../../assets/img/car-item.png);
         background-size: 100% 100%;
         display: flex;

src/view/index/components/rightItem2.vue

@@ -19,6 +19,9 @@ const items = reactive([
   { id: 3, text: '莲花池 8' },
   { id: 3, text: '莲花池 8' },
   { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
 ])
 const scrollContainerRef = ref(null);
 let timer = null;
@@ -50,8 +53,14 @@ onUnmounted(() => {
   <border>
     <div class="box">
       <div class="title">配送商品排行榜</div>
-      <div class="list">
+      <div
-        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
+        style="
+          height: calc(100% - 60px);
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+        "
+      >
         <div class="scroll-container" ref="scrollContainerRef">
           <div
             v-for="(item, index) in items"
@@ -79,14 +88,16 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .box {
-  padding: 20px;
+  height: 100%;
+  width: 100%;
   font-size: 0.8rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  width: calc(100% - 40px);
+  padding: 20px;
-  overflow: hidden;
+  box-sizing: border-box !important;
+
   .title {
     width: 100%;
     background-image: url(../../../assets/img/title.png);
@@ -98,16 +109,12 @@ onUnmounted(() => {
     font-family: "ifonts";
     font-size: 1.2rem;
   }
-  .list {
-    margin-top: 20px;
-    width: 100%;
-    height: 80%;
-    .list-span1 {
-      background-color: red;
-    }
-  }
   .scroll-container {
-    height: 36rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     overflow-y: auto;
     /* 隐藏滚动条 */
     scrollbar-width: none;