sd

src/components/header.vue

@@ -3,21 +3,38 @@
         <div class="logo">
         </div>
         <div class="tab">
-            <img v-if="show[0]" @click="showFn(0, '/')" class="tab-li" :src="u('SY')" alt="">
+            <div class="tab-li">
-            <img v-else class="tab-li" @click="showFn(0, '/')" :src="u('SYXZ')" alt="">
+                <img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
+                    alt="">
+                <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" :src="u('SYXZ')"
+                    alt="">
+            </div>
+            <div class="tab-li">
+                <img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
+                    :src="u('SP')" alt="">
+                <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
+                    alt="">
+            </div>
+            <div class="tab-li">
+                <img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
+                    :src="u('SH')" alt="">
+                <img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;"
+                    :src="u('SHXZ')" alt="">
+            </div>
+            <div class="tab-li">
+                <img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;"
+                    :src="u('DD')" alt="">
+                <img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('DDXZ')"
+                    alt="">
 
-            <img v-if="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SP.png" alt="">
+            </div>
-            <img v-else="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SPXZ.png" alt="">
+            <div class="tab-li">
+                <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
+                    :src="u('CW')" alt="">
+                <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('CWXZ')"
+                    alt="">
 
-            <img v-if="show[2]" @click="showFn(2)" class="tab-li" src="/static/index/SH.png" alt="">
+            </div>
-            <img v-else class="tab-li" @click="showFn(2)" src="/static/index/SHXZ.png" alt="">
-
-            <img class="tab-li" @click="showFn(3)" v-if="show[3]" src="/static/index/DD.png" alt="">
-            <img class="tab-li" @click="showFn(3)" v-else src="/static/index/DDxz.png" alt="">
-
-
-            <img class="tab-li" @click="showFn(4)" v-if="show[4]" src="/static/index/CW.png" alt="">
-            <img class="tab-li" @click="showFn(4)" v-else src="/static/index/CWXZ.png" alt="">
         </div>
         <div class="right">
             <div class="rigth-li" @click="choseTown = true">泸县</div>
@@ -93,7 +110,7 @@ const choseTownFn = (id) => {
     height: 6vh;
     align-items: center;
     justify-content: space-between;
-    background-image: url('/static/index/TIT.png');
+    background-image: url('/static/index/LOGO.png');
     background-color: #000C14;
 
     background-size: cover;
@@ -110,11 +127,25 @@ const choseTownFn = (id) => {
         align-items: center;
         margin-left: 120px;
         width: 50vw;
+        height: 100%;
+        // background-color: white;
 
         .tab-li {
-            width: 13%;
+            width: 8vw;
-            margin-right: 10px;
+            border-left: 1px solid #4AB9D0;
+            text-align: center;
             cursor: pointer;
+            height: 1.5vh;
+            position: relative;
+            // background-color: red;
+
+            .tab-img {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: (translate(-50%, -50%));
+
+            }
         }
     }
 

src/router/index.js

@@ -16,6 +16,27 @@ const routes= [
         name: 'commodity',
         component:()=>import('@/view/commodity.vue'),
     },
+    {
+        path: '/Businesses',
+        name: 'commBusinessesodity',
+        component:()=>import('@/view/Businesses.vue'),
+    },
+    {
+        path: '/storeLogin',
+        name: 'storeLogin',
+        component:()=>import('@/view/storeLogin.vue'),
+    },
+    {
+        path: '/order',
+        name: 'order',
+        component:()=>import('@/view/order.vue'),
+    },
+    {
+        path: '/finance',
+        name: 'finance',
+        component:()=>import('@/view/finance.vue'),
+    },
+    
     
 ]
  

src/view/Businesses.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="box">
+        <div class="img-cls">
+            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <div class="content">
+                <div class="btns">
+                    <div class="btn" @click="test">正常开启的商户</div>
+                    <div class="btn" @click="test">已关闭的商户</div>
+                </div>
+
+
+                <div class="table">
+                    <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+const route = useRouter()
+
+const ShwostoreType = ref(false)
+const test = () => {
+    console.log(6)
+}
+
+const hdClick = (e) => {
+    // console.log(e)
+    if (e.columnIndex == 10) {
+        // alert(45)
+        route.push('/storeLogin')
+    }
+
+
+}
+// const hdClick = (b) => {
+//     ShwostoreType.value = b
+//     alert(565)
+// }
+
+const a = (aaa) => {
+    for (let i = 0; i < 100; i++) {
+        if (i % 2 == 0) {
+            aaa.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5';cursor: pointer;>登录</div>`,
+                ]
+            )
+        } else {
+            aaa.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
+                ]
+
+
+            )
+        }
+
+
+    }
+}
+const configs = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户姓名</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户属地</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>备注</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>推荐</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>押金</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>开启/关闭</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>操作</div>`,
+    ],
+    data: [
+    ]
+})
+onMounted(() => {
+    a(configs)
+})
+</script>
+
+
+<style lang="scss" scoped>
+.box {
+    margin-top: 3vh;
+    width: 100vw;
+    height: 90vh;
+    position: relative;
+
+    .img-cls {
+
+        width: 99%;
+        height: 90vh;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // background-color: #fff;
+        box-sizing: border-box;
+
+        .content {
+            width: 100%;
+            height: 100%;
+            padding: 2vw;
+        }
+
+    }
+
+    .btns {
+        display: flex;
+
+        .btn {
+            color: white;
+            border: 1px solid #BF6D5D;
+            padding: 3px 10px;
+            border-radius: 20px;
+            margin-right: 10px;
+        }
+    }
+
+    .table {
+        width: 100%;
+        height: 78vh;
+        margin-top: 2vh;
+    }
+}
+
+.manageBtn {
+    padding: 2px 10px;
+    border: 1px solid #6377C8;
+    border-radius: 20px;
+    margin-right: 10px;
+}
+
+:deep(.ceil) {
+    padding: 0 !important;
+    margin-bottom: 5px;
+    margin-right: 2px;
+}
+
+:deep(.header-item) {
+    padding: 0 !important;
+}
+
+
+
+
+.row {}
+</style>

src/view/commodity.vue

@@ -1,14 +1,25 @@
 <template>
     <div class="box">
         <div class="img-cls">
-            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+
+
+            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
             <div class="content">
-                <div class="btns">
+                <div class="btns" style="position: absolute;">
-                    <div class="btn">商品分类</div>
+                    <div class="btn" @click="test">商品分类</div>
-                    <div class="btn">商品管理</div>
+                    <div class="btn" @click="hdClick(false)">商品管理</div>
                 </div>
-                <div class="table">
+                <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;">
-                    <dv-scroll-board :config="configs" @click='test' style="width:95vw;height:100%" />
+                    <div class="manageBtn">出售中商品</div>
+                    <div class="manageBtn">仓库中商品</div>
+                    <div class="manageBtn">待审核商品</div>
+                    <div class="manageBtn">审核未通过商品</div>
+                </div>
+                <div class="table" v-if="ShwostoreType">
+                    <dv-scroll-board :config="configs" style="width:95vw;height:100%" />
+                </div>
+                <div class="table" v-else>
+                    <dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
                 </div>
             </div>
         </div>
@@ -19,10 +30,24 @@
 <script setup>
 // 102B3
 import { ref, reactive, onMounted } from "vue"
-onMounted(() => {
+
+const ShwostoreType = ref(true)
+const test = (e) => {
+    alert(4145)
+    // if (e.columnIndex == 1) {
+    //     console.log(e)
+
+    // }
+}
+const hdClick = (b) => {
+    ShwostoreType.value = b
+    alert(565)
+}
+
+const a = (aaa) => {
     for (let i = 0; i < 100; i++) {
         if (i % 2 == 0) {
-            configs.data.push(
+            aaa.data.push(
                 [
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
@@ -30,10 +55,15 @@ onMounted(() => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                 ]
             )
         } else {
-            configs.data.push(
+            aaa.data.push(
                 [
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
@@ -41,6 +71,11 @@ onMounted(() => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                 ]
 
 
@@ -49,13 +84,6 @@ onMounted(() => {
 
 
     }
-})
-const test = (e) => {
-    if (e.columnIndex == 1) {
-        console.log(e)
-
-    }
-    // alert(e)
 }
 const configs = reactive({
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
@@ -69,15 +97,36 @@ const configs = reactive({
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否显示</div>`,
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否推荐</div>`,
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
-
     ],
     data: [
-
-
     ]
 })
-
+// 商品管理
-
+const configs2 = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品图</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品名称</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品售价</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>平台分类</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>销量</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>库存</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>推荐级别</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>更新时间</div>`,
+    ],
+    data: [
+    ]
+})
+onMounted(() => {
+    a(configs2)
+    console.log(5656)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -108,6 +157,7 @@ const configs = reactive({
 
     .btns {
         display: flex;
+        cursor: pointer;
 
         .btn {
             color: white;
@@ -115,17 +165,23 @@ const configs = reactive({
             padding: 3px 10px;
             border-radius: 20px;
             margin-right: 10px;
-            cursor: pointer;
         }
     }
 
     .table {
         width: 100%;
-        height: 78vh;
+        height: 75vh;
         margin-top: 2vh;
     }
 }
 
+.manageBtn {
+    padding: 2px 10px;
+    border: 1px solid #6377C8;
+    border-radius: 20px;
+    margin-right: 10px;
+}
+
 :deep(.ceil) {
     padding: 0 !important;
     margin-bottom: 5px;

src/view/finance.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="box">
+        <div class="img-cls">
+            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <div class="content">
+                <div class="btns">
+                    <div class="btn" @click="test">提现记录</div>
+                    <div class="btn" @click="test">资金记录</div>
+                    <div class="btn" @click="test">账单管理</div>
+                </div>
+
+
+                <div class="table">
+                    <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+const route = useRouter()
+
+const ShwostoreType = ref(false)
+const test = () => {
+    console.log(6)
+}
+
+const hdClick = (e) => {
+    if (e.columnIndex == 10) {
+        // route.push('/storeLogin')
+    }
+
+
+}
+
+const a = (aaa) => {
+    for (let i = 0; i < 100; i++) {
+        if (i % 2 == 0) {
+            aaa.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                ]
+            )
+        } else {
+            aaa.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                ]
+
+
+            )
+        }
+
+
+    }
+}
+const configs = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>序号</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>二维码</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户UID</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>户名</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现金额</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现方式</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>银行名称</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>账号</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>审核状态</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>拒绝原因</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>添加时间</div>`,
+    ],
+    data: [
+    ]
+})
+onMounted(() => {
+    a(configs)
+})
+</script>
+
+
+<style lang="scss" scoped>
+.box {
+    margin-top: 3vh;
+    width: 100vw;
+    height: 90vh;
+    position: relative;
+
+    .img-cls {
+
+        width: 99%;
+        height: 90vh;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // background-color: #fff;
+        box-sizing: border-box;
+
+        .content {
+            width: 100%;
+            height: 100%;
+            padding: 2vw;
+        }
+
+    }
+
+    .btns {
+        display: flex;
+
+        .btn {
+            color: white;
+            border: 1px solid #BF6D5D;
+            padding: 3px 10px;
+            border-radius: 20px;
+            margin-right: 10px;
+        }
+    }
+
+    .table {
+        width: 100%;
+        height: 79vh;
+        margin-top: 2vh;
+    }
+}
+
+.manageBtn {
+    padding: 2px 10px;
+    border: 1px solid #6377C8;
+    border-radius: 20px;
+    margin-right: 10px;
+}
+
+:deep(.ceil) {
+    padding: 0 !important;
+    margin-bottom: 5px;
+    margin-right: 2px;
+}
+
+:deep(.header-item) {
+    padding: 0 !important;
+}
+
+
+
+
+.row {}
+</style>

src/view/index.vue

@@ -1,7 +1,11 @@
 <template>
-    <div class="box">
+    <div v-show="loading" style="position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);">
+        <dv-loading style="color: white;">Loading...</dv-loading>
+    </div>
+    <div class="box" :style="{ opacity: loading ? 0 : 1 }">
         <div class="body">
             <div class="l">
+                <img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
                 <div class="user" id="user"></div>
                 <div class="storeNum">
                     <div class="tit"></div>
@@ -31,7 +35,6 @@
                         <img src="/static/index/SPTB.png" class="product-icon" alt="">
                     </div>
                 </div>
-
                 <div class="Views">
                     <img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
                     <div class="view-content">
@@ -42,22 +45,18 @@
                         <div>周环比：32%</div>
                     </div>
                 </div>
-
-
-
             </div>
 
 
             <div class="r">
-                <!-- <div>
+                <img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
-                    店铺销量排行
+
-                </div> -->
+                <div class="user" style="width: 98%; ">
-                <div class="user">
                     <div class="btns">
                         <span class="btn">店铺销量排行</span>
                         <span class="btn">店铺销量排行</span>
                     </div>
-                    <dv-scroll-board :config="config3" style="width:95%;height:20vh" />
+                    <dv-scroll-board :config="config3" style="height: 17vh;margin-left: 1%;" />
                 </div>
                 <div class="storeNum">
                     <div class="tit">
@@ -78,12 +77,17 @@
 
 
             <div class="foot-l">
+                <img src="/static/index/DDSJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
+
                 <div style="height: 5vh;"></div>
                 <div>
-                    <dv-scroll-board :config="configs" style="width:25vw;height:40vh" />
+                    <dv-scroll-board :config="configs" style="width:96%;height:40vh;margin-left: 2%;" />
                 </div>
             </div>
             <div class="c">
+
+                <img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
+
                 <div style="height:5vh;"></div>
                 <div class="towns">
                     <div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
@@ -91,10 +95,11 @@
                 </div>
             </div>
             <div class="r">
+                <img src="/static/index/DRDD.png" style="position: absolute;width: 100%;height: 100%; " alt="">
 
                 <div style="height: 5vh;"></div>
                 <div>
-                    <dv-scroll-board :config="configs2" style="width:25vw;height:40vh" />
+                    <dv-scroll-board :config="configs2" style="width:96%;height:40vh;margin-left: 2%;" />
                 </div>
 
             </div>
@@ -108,7 +113,7 @@ import * as echarts from 'echarts';
 import option from "./option"
 import Remake from "@/components/Remake.vue"
 import { ref, reactive } from "vue"
-
+const loading = ref(true)
 
 const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
 
@@ -117,6 +122,7 @@ const configs = reactive(
     {
         header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
         headerBGC: '#223B7E',
+        rowNum: 10,
         data: [
             ['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
             ['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
@@ -127,7 +133,11 @@ const configs = reactive(
             ['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
             ['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
             ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
-            ['行10列1', '行10列2', '行10列3']
+            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
+            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
+            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
+            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
+            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
         ]
     }
 
@@ -137,6 +147,7 @@ const configs2 = reactive(
         header: ['所属片区', '当日订单金额', '昨日订单金额'],
         headerBGC: '#223B7E',
         align: ['center'],
+        rowNum: 10,
         data: [
             ['行1列1', '行1列2', '行1列3'],
             ['行2列1', '行2列2', '行2列3'],
@@ -147,6 +158,10 @@ const configs2 = reactive(
             ['行7列1', '行7列2', '行7列3'],
             ['行8列1', '行8列2', '行8列3'],
             ['行9列1', '行9列2', '行9列3'],
+            ['行9列1', '行9列2', '行9列3'],
+            ['行9列1', '行9列2', '行9列3'],
+            ['行9列1', '行9列2', '行9列3'],
+            ['行9列1', '行9列2', '行9列3'],
             ['行10列1', '行10列2', '行10列3']
         ]
     }
@@ -156,11 +171,9 @@ const config3 = reactive({
     oddRowBGC: "#001C2E",
     evenRowBGC: "#001C2E",
     columnWidth: [
-        50, 60, 70, 220, 100
+        3, 3, 4, 10, 4
     ],
     data: [
-
-
         [
             `<div style="  text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
             `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
@@ -229,7 +242,9 @@ onMounted(() => {
     }
     initCharts('transactionUsers', option.transactionUsers)
 
-
+    setTimeout(() => {
+        loading.value = false
+    }, 1000)
     // initCharts('user', option.userChartOption)
 })
 </script>
@@ -249,21 +264,23 @@ onMounted(() => {
 }
 
 .body {
-    height: 50vh;
+    height: 45vh;
     display: flex;
+    margin-top: 1vh;
+    justify-content: space-between;
 
     .l {
-        flex: 1;
+
+        width: 25vw;
         height: 100%;
-        background: url('/static/index/PTYHL.png');
+        position: relative;
-        // background-size: cover;
-        background-size: 25vw 50vh;
 
         .user {
             box-sizing: border-box;
             padding-top: 5vh;
             width: 100%;
-            height: 57%;
+            height: 58%;
+            // background-color: #fff;
 
             .btn {
                 color: white;
@@ -272,7 +289,8 @@ onMounted(() => {
 
         .storeNum {
             width: 100%;
-            height: 43%;
+            height: 42%;
+            // background-color: red;
 
             .tit {
                 height: 15%;
@@ -321,14 +339,14 @@ onMounted(() => {
 
     .c {
         box-sizing: border-box;
-        padding: 15px;
+        width: 48vw;
-        flex: 2;
         height: 100%;
-        // background-color: pink;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
 
         .product-list {
-            height: 75%;
+            height: 70%;
-            // background-color: red;
             display: flex;
             justify-content: space-between;
             position: relative;
@@ -349,10 +367,10 @@ onMounted(() => {
         }
 
         .Views {
+            margin-top: 2%;
             height: 25%;
             width: 100%;
             box-sizing: border-box;
-            padding: 0 15px;
             position: relative;
             color: white;
             font-size: 12px;
@@ -362,20 +380,16 @@ onMounted(() => {
                 height: 100%;
                 width: 100%;
                 align-items: center;
-                justify-content: space-between;
+                justify-content: space-around;
-                padding: 0 20px;
             }
         }
 
     }
 
     .r {
-        flex: 1;
+        width: 25vw;
         height: 100%;
-        background: url('/static/index/PTSP.png');
+        position: relative;
-        // background-size: cover;
-        background-size: 25vw 49vh;
-        background-repeat: no-repeat;
 
         .user {
             box-sizing: border-box;
@@ -412,7 +426,7 @@ onMounted(() => {
                 display: flex;
                 flex-wrap: wrap;
                 box-sizing: border-box;
-                padding: 10px;
+                // padding: 10px;
 
 
                 .storebox {
@@ -449,27 +463,28 @@ onMounted(() => {
 }
 
 .foot {
-    // margin-top: 30px;
+    margin-top: 1vh;
-    height: 45vh;
+    height: 46vh;
     display: flex;
+    justify-content: space-between;
+
 
     .foot-l {
-        flex: 1;
+        width: 25vw;
         height: 100%;
-        background: url('/static/index/DDSJ.png');
+        position: relative;
-        background-size: 25vw 45vh;
-        background-repeat: no-repeat;
 
 
 
     }
 
     .c {
-        flex: 2;
+        width: 48vw;
+        position: relative;
         height: 100%;
-        background: url('/static/index/CJYHTJ.png');
+        box-sizing: border-box;
-        background-size: 50vw 45vh;
+        // background: url('');
-        background-repeat: no-repeat;
+
 
         .towns {
             width: 50vw;
@@ -495,46 +510,16 @@ onMounted(() => {
     }
 
     .r {
-        flex: 1;
+        width: 25vw;
         height: 100%;
-        background: url('/static/index/DRDD.png');
-        background-size: 25vw 45vh;
-        background-repeat: no-repeat;
-    }
-}
-
-
-
-.producta {
-    width: 200px;
-    height: 200px;
-    background-color: black;
-    border-radius: 10px;
         position: relative;
-    overflow: hidden;
+        // background: url('');
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
 }
 
-.producta::before {
-    content: "";
-    position: absolute;
-    top: -100%;
-    left: -100%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, #ffffff 20%, rgba(255, 255, 255, 0) 70%);
-    animation: shine 2s infinite;
-}
 
-@keyframes shine {
-    0% {
-        transform: rotate(45deg) translate(-150%, -150%);
-    }
 
-    100% {
+
-        transform: rotate(45deg) translate(150%, 150%);
-    }
-}
 
 .progress-bar {
     transform: translateY(12px);

src/view/option.js

@@ -237,11 +237,11 @@ const optins={
         //   data: ['访客人数','下单人数','支付人数']
 
         },
-        toolbox: {
+        // toolbox: {
-          feature: {
+        //   feature: {
-            saveAsImage: {}
+        //     saveAsImage: {}
-          }
+        //   }
-        },
+        // },
         grid: {
           left: '3%',
           right: '4%',
@@ -457,11 +457,11 @@ const optins={
       //   data: ['访客人数','下单人数','支付人数']
 
       },
-      toolbox: {
+      // toolbox: {
-        feature: {
+      //   feature: {
-          saveAsImage: {}
+      //     saveAsImage: {}
-        }
+      //   }
-      },
+      // },
       grid: {
         left: '3%',
         right: '4%',

src/view/order.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="box">
+        <div class="img-cls">
+            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <div class="content">
+                <div class="btns">
+                    <div class="btn" @click="test">订单列表</div>
+                    <div class="btn" @click="test">退款单</div>
+                    <div class="btn" @click="test">核销订单</div>
+                </div>
+                <div class="btns">
+                    <div class="btn" @click="test">订单列表</div>
+                    <div class="btn" @click="test">退款单</div>
+                    <div class="btn" @click="test">核销订单</div>
+                </div>
+
+                <div class="table">
+                    <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+const route = useRouter()
+
+const ShwostoreType = ref(false)
+const test = () => {
+    console.log(6)
+}
+
+const hdClick = (e) => {
+    if (e.columnIndex == 10) {
+        // route.push('/storeLogin')
+    }
+
+
+}
+
+const a = (aaa) => {
+    for (let i = 0; i < 100; i++) {
+        if (i % 2 == 0) {
+            aaa.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                ]
+            )
+        } else {
+            aaa.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                ]
+
+
+            )
+        }
+
+
+    }
+}
+const configs = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>收货人/订购人</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单数属地</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`,
+    ],
+    data: [
+    ]
+})
+onMounted(() => {
+    a(configs)
+})
+</script>
+
+
+<style lang="scss" scoped>
+.box {
+    margin-top: 3vh;
+    width: 100vw;
+    height: 90vh;
+    position: relative;
+
+    .img-cls {
+
+        width: 99%;
+        height: 90vh;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // background-color: #fff;
+        box-sizing: border-box;
+
+        .content {
+            width: 100%;
+            height: 100%;
+            padding: 2vw;
+        }
+
+    }
+
+    .btns {
+        display: flex;
+
+        .btn {
+            color: white;
+            border: 1px solid #BF6D5D;
+            padding: 3px 10px;
+            border-radius: 20px;
+            margin-right: 10px;
+        }
+    }
+
+    .table {
+        width: 100%;
+        height: 75vh;
+        margin-top: 2vh;
+    }
+}
+
+.manageBtn {
+    padding: 2px 10px;
+    border: 1px solid #6377C8;
+    border-radius: 20px;
+    margin-right: 10px;
+}
+
+:deep(.ceil) {
+    padding: 0 !important;
+    margin-bottom: 5px;
+    margin-right: 2px;
+}
+
+:deep(.header-item) {
+    padding: 0 !important;
+}
+
+
+
+
+.row {}
+</style>

src/view/storeLogin.vue

@@ -0,0 +1,220 @@
+<template>
+    <div class="top">
+        <div class="top-li">
+            <img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <img src="/static/index/SPTB.png" class="product-icon" alt="">
+
+        </div>
+        <div class="top-li">
+            <img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <img src="/static/index/SPTB.png" class="product-icon" alt="">
+
+        </div>
+        <div class="top-li">
+            <img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <img src="/static/index/SPTB.png" class="product-icon" alt="">
+
+        </div>
+        <div class="top-li">
+            <img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <img src="/static/index/SPTB.png" class="product-icon" alt="">
+
+        </div>
+        <div class="top-li">
+            <img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <img src="/static/index/SPTB.png" class="product-icon" alt="">
+
+        </div>
+
+    </div>
+    <div class="bottom">
+
+        <div class="ranking">
+            <img src="/static/storeLogin/SPXSPH.png" class="img-cls" alt="">
+            <dv-scroll-board :config="config1" class="list" />
+
+        </div>
+        <div class="ranking">
+            <img src="/static/storeLogin/SPFKPH.png" class="img-cls" alt="">
+            <dv-scroll-board :config="config2" class="list" />
+
+        </div>
+        <div class="ranking">
+            <img src="/static/storeLogin/SPJGPH.png" class="img-cls" alt="">
+            <dv-scroll-board :config="config3" class="list" />
+
+        </div>
+    </div>
+</template>
+
+
+<script setup>
+import { ref, reactive, onMounted } from "vue"
+
+const config1 = reactive({
+    oddRowBGC: "#001C2E",
+    evenRowBGC: "#001C2E",
+    rowNum: 9,
+
+    columnWidth: [
+        3, 3, 5, 20, 5
+    ],
+    data: []
+}
+)
+const config2 = reactive({
+    oddRowBGC: "#001C2E",
+    evenRowBGC: "#001C2E",
+    rowNum: 9,
+
+    columnWidth: [
+        3, 3, 5, 20, 5
+    ],
+    data: []
+}
+)
+const config3 = reactive({
+    oddRowBGC: "#001C2E",
+    evenRowBGC: "#001C2E",
+    rowNum: 9,
+
+    columnWidth: [
+        3, 3, 5, 20, 5
+    ],
+    data: []
+}
+
+)
+
+
+
+
+
+onMounted(() => {
+
+
+    for (let i = 0; i < 20; i++) {
+        config3.data.push(
+            [
+                `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
+                `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+                `<div style='height:40px;line-height:40px'>商品名称</div>`,
+                `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
+                `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+            ],
+
+
+        )
+    }
+    for (let i = 0; i < 20; i++) {
+        config1.data.push(
+            [
+                `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
+                `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+                `<div style='height:40px;line-height:40px'>商品名称</div>`,
+                `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
+                `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+            ],
+
+
+        )
+    } for (let i = 0; i < 20; i++) {
+        config2.data.push(
+            [
+                `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
+                `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+                `<div style='height:40px;line-height:40px'>商品名称</div>`,
+                `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
+                `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+            ],
+
+
+        )
+    }
+
+
+
+})
+
+</script>
+
+
+
+<style lang="scss" scoped>
+@keyframes jump {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.top {
+    height: 42vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .top-li {
+        width: 19%;
+        height: 40vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+
+        .product-icon {
+            width: 2vw;
+            height: 2vw;
+            position: absolute;
+            animation: jump 1s infinite;
+            top: 6vh;
+        }
+    }
+
+
+    // background-color: #fff;
+}
+
+.bottom {
+    height: 52vh;
+    display: flex;
+    justify-content: space-between;
+
+    .ranking {
+        width: 32%;
+        height: 52vh;
+        position: relative;
+
+        // background-color: #fff;
+        .list {
+
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 5vh;
+            height: 90%;
+
+        }
+
+        .img-cls {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            position: absolute;
+        }
+
+    }
+}
+</style>

src/view/townDetail.vue

@@ -79,7 +79,7 @@ const config3 = reactive({
     oddRowBGC: "#001C2E",
     evenRowBGC: "#001C2E",
     columnWidth: [
-        40, 60, 70, 200, 60
+        2, 3, 4, 10, 3
     ],
     data: [
         [
@@ -426,5 +426,4 @@ onMounted(() => {
     background: linear-gradient(to right, #455CCC, #51C2E0);
     transition: width 0.5s ease-in-out;
 }
-
 </style>