更新

2023-11-30 11:24:07 +08:00 · 2023-11-30 11:24:07 +08:00 · 531e30f6be
parent 45513d94d2
commit 531e30f6be
18 changed files with 289 additions and 107 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  },
--- a/src/assets/delivery_img/icon6.png
+++ b/src/assets/delivery_img/icon6.png
--- a/src/assets/delivery_img/icon7.png
+++ b/src/assets/delivery_img/icon7.png
--- a/src/assets/delivery_img/icon8.png
+++ b/src/assets/delivery_img/icon8.png
--- a/src/components/areaList.vue
+++ b/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>
--- a/src/components/border.vue
+++ b/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;
  }
 }
--- a/src/components/headView.vue
+++ b/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">
--- a/src/main.js
+++ b/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')
--- a/src/store/app.js
+++ b/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
+    }
+})
--- a/src/view/delivery/components/bottom.vue
+++ b/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', '收件人', '收件人电话', '商品信息', '收货地址'],
-  data: [
-    ['<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>'],
-    ['<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>'],
+  header: [
+    `<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>`,
+    `<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>`,
+    `<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>`,
+    `<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>`,
+    `<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>`,
  ],
+  data: [],
  //   index: true,
-  headerBGC: 'rgba(0, 168, 255, 0.56)',
-  oddRowBGC: 'rgba(91, 219, 246, 0.20)',
-  evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  // headerBGC: 'rgba(0, 168, 255, 0.76)',
+  // oddRowBGC: 'rgba(91, 219, 246, 0.20)',
+  // 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 {
-    width: calc(100% - 40px);
-  }
+  box-sizing: border-box;
  .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;
      }
    }
  }
--- a/src/view/delivery/components/left.vue
+++ b/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 {
-    width: calc(100% - 40px);
-  }
+  box-sizing: border-box;
  .title {
    width: 100%;
    background-image: url(../../../assets/img/title.png);
--- a/src/view/delivery/components/right.vue
+++ b/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">
-        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
+      <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"
@ -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;
--- a/src/view/index/components/centerMap.vue
+++ b/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);
 }
+
+onMounted(() => {
+  changeType(appStore.map_info);
+  initDateValue();
+  initMap();
+  nextTick(() => {
    mitt.on('map_info', e => {
-  console.log(e);
      changeType(e.pinyin);
-  initDateValue()
+      initDateValue();
      initMap();
    })
+  })
+})
+
 </script>

 <template>
--- a/src/view/index/components/leftItme1.vue
+++ b/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%;
--- a/src/view/index/components/leftItme2.vue
+++ b/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%;
-    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
--- a/src/view/index/components/rightItem1.vue
+++ b/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;
--- a/src/view/index/components/rightItem2.vue
+++ b/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">
-        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
+      <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"
@ -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);
-  overflow: hidden;
+  padding: 20px;
+  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;