也买你系应该

src/App.vue

@@ -14,6 +14,8 @@ import Header from "@/components/Header.vue"
 </template>
  
 <style lang="scss">
+@import '/static/font/font.css';
+
 * {
   margin: 0;
   padding: 0;

src/components/header.vue

@@ -37,7 +37,9 @@
             </div>
         </div>
         <div class="right">
-            <div class="rigth-li" @click="choseTown = true">泸县</div>
+            <div class="rigth-li" @click="choseTown = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
+                    :src="u('DW')" alt=""> 泸县
+            </div>
             <Transition>
                 <div class="address" v-if="choseTown">
                     <div class="address-li" @click="choseTownFn(1)"
@@ -62,7 +64,8 @@
                 <span></span>
             </div>
 
-            <div class="rigth-li" @click="route.push('/')">关机</div>
+            <div class="rigth-li" @click="route.push('/')"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
+                    :src="u('GJ')" alt=""></div>
             <div class="right-line">
                 <span></span>
                 <span></span>
@@ -195,6 +198,8 @@ const choseTownFn = (id) => {
             line-height: 15px;
             padding: 0 10px;
             cursor: pointer;
+            display: flex;
+            align-items: center;
         }
 
         .right-line {

src/view/commodity.vue

@@ -1,22 +1,23 @@
 <template>
     <div class="box">
         <div class="img-cls">
-
-
             <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
             <div class="content">
                 <div class="btns" style="position: absolute;">
-                    <div class="btn" @click="test">商品分类</div>
+                    <div class="btn" @click="ShwostoreType = true">商品分类</div>
-                    <div class="btn" @click="hdClick(false)">商品管理</div>
+                    <div class="btn" @click="ShwostoreType = false">商品管理
+                        <!-- <div style="width: 100%;height: 10px;background-color: #fff;position: absolute;"></div> -->
                     </div>
-                <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;">
+                </div>
+                <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
+                    v-if="!ShwostoreType">
                     <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%" />
+                    <dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
                 </div>
                 <div class="table" v-else>
                     <dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
@@ -31,21 +32,40 @@
 // 102B3
 import { ref, reactive, onMounted } from "vue"
 
-const ShwostoreType = ref(true)
+const tableClick = (e) => {
-const test = (e) => {
+
-    alert(4145)
+    // console.log(i)
-    // if (e.columnIndex == 1) {
+
-    //     console.log(e)
+    if (e.ceil) {
+        if (e.columnIndex == 1) {
+
+            let tag = document.getElementById(`zmj${e.rowIndex}`)
+            let tag2 = document.getElementById(`lj${e.rowIndex}`)
+            tag.style.display = 'none'
+            tag2.style.display = 'block'
+        }
+        else {
+            let tag = document.getElementsByClassName(`zmj`)
+            let tag2 = document.getElementsByClassName(`lj`)
+            for (let i = 0; i < tag.length; i++) {
+                tag[i].style.display = 'block'
+                tag2[i].style.display = 'none'
+            }
+        }
+
+    }
 
-    // }
 }
+
+const ShwostoreType = ref(true)
+
 const hdClick = (b) => {
-    ShwostoreType.value = b
+    console.log(b)
-    alert(565)
 }
 
 const a = (aaa) => {
-    for (let i = 0; i < 100; i++) {
+    if (aaa == configs2) {
+        for (let i = 0; i < 10; i++) {
             if (i % 2 == 0) {
                 aaa.data.push(
                     [
@@ -84,6 +104,44 @@ const a = (aaa) => {
 
 
         }
+    }
+
+    else {
+        for (let i = 0; i < 10; 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;' > <div id='zmj${i}' class='zmj'> 排序${i}</div>  <div id='lj${i}' class='lj' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </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;' > <div id='zmj${i}' class='zmj'> 排序${i}</div>  <div class='lj' id='lj${i}' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </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)",
@@ -125,7 +183,7 @@ const configs2 = reactive({
 })
 onMounted(() => {
     a(configs2)
-    console.log(5656)
+    a(configs)
 })
 </script>
 
@@ -165,13 +223,14 @@ onMounted(() => {
             padding: 3px 10px;
             border-radius: 20px;
             margin-right: 10px;
+            position: relative;
         }
     }
 
     .table {
         width: 100%;
         height: 75vh;
-        margin-top: 2vh;
+        margin-top: 3.5vh;
     }
 }
 
@@ -193,7 +252,7 @@ onMounted(() => {
 }
 
 
-
+.sjx {}
 
 .row {}
 </style>

src/view/finance.vue

@@ -4,16 +4,113 @@
             <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="changeTable(0)">提现记录</div>
-                    <div class="btn" @click="test">资金记录</div>
+                    <div class="btn" @click="changeTable(1)">资金记录</div>
-                    <div class="btn" @click="test">账单管理</div>
+                    <div class="btn" @click="changeTable(2)">账单管理</div>
                 </div>
 
 
-                <div class="table">
+                <div class="table" v-if="true">
-                    <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
+                    <dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
+                        style="width:95vw;height:100%" />
+                    <dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" />
+                    <dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3'
+                        style="width:95vw;height:100%" />
                 </div>
 
+                <Transition>
+
+                    <div class="pop" v-if="showPop">
+                        <img src="/static/finance/TC.png" alt=""
+                            style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
+
+                        <div class="pop-content">
+                            <div class="pop-content-head">
+                                <span class="gradient-text">日账单
+                                    <span style="font-size: 10px;">2011.11-06</span>
+                                </span>
+                                <span class="off" @click="showPop = false"> 关闭</span>
+                            </div>
+
+                            <div class="pop-li">
+                                订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">16.6</span>元</span>
+                                <span>2笔</span>
+                            </div>
+                            <div style="display: flex;justify-content: space-between;" class="pop-li">
+
+                                <div>
+                                    订单支付： <span style="margin: 0 .5vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                                <div>
+                                    返回优惠券补贴： <span style="margin: 0 .5vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                                <div>
+                                    返回会员优惠券补贴： <span><span class="price" style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                            </div>
+                            <div class="pop-li" style="margin-top: 3vh;">
+                                充值金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
+                            </div>
+                            <div class="pop-li" style="margin-top: 3vh;">
+                                支出总金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
+                            </div>
+
+
+
+                            <div style="display: flex;justify-content: space-between;" class="pop-li">
+
+                                <div>
+                                    应付商户金额 <span style="margin: 0 .5vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                                <div>
+                                    佣金 <span style="margin: 0 .5vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                                <div>
+                                    返回手续费 <span style="margin: 0 1vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                            </div>
+
+
+
+
+                            <div style="display: flex;justify-content: space-between;" class="pop-li">
+
+                                <div>
+                                    优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                                <div>
+                                    会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                                <div style="opacity: 0;">
+                                    返回手续费 <span style="margin: 0 1vw;"><span class="price"
+                                            style="color: white;">16.6</span>元</span>
+                                    <span>2笔</span>
+                                </div>
+                            </div>
+                            <div class="pop-li" style="margin-top: 3vh;">
+                                平台手续费收入总金额: <span class="price">16.6 </span> 元
+                            </div>
+                        </div>
+                    </div>
+
+                </Transition>
+
+
             </div>
         </div>
     </div>
@@ -25,26 +122,16 @@
 import { ref, reactive, onMounted } from "vue"
 import { useRouter } from 'vue-router'
 const route = useRouter()
-
 const ShwostoreType = ref(false)
-const test = () => {
+const changeTable = (type) => {
-    console.log(6)
+    headerIndex.value = type
+    addConfigHead()
+    a(configList[headerIndex.value], congigData[headerIndex.value])
 }
-
+const congigData = reactive(
-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>`,
+        {
+            d: [`<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>`,
@@ -55,13 +142,8 @@ const a = (aaa) => {
                 `<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>`,],
-                ]
+            q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</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>`,
@@ -72,14 +154,62 @@ const a = (aaa) => {
                 `<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>`,]
+        },
+        {
+            d: [`<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>`,
+            ],
+            q: [`<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>`,
+            ]
+        },
+        {
+            d: [`<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;color:#59D7F3;cursor: pointer;'>详情</div>`,
+            ],
+            q: [`<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;color:#59D7F3;cursor: pointer;'>详情</div>`,
+            ]
+        }
+
     ]
 
 
-            )
+)
+const hdClick = (e) => {
+    if (e.columnIndex == 10) {
+        // route.push('/storeLogin')
     }
 
 
+}
+
+
+
+const a = (aaa, data) => {
+    for (let i = 0; i < 100; i++) {
+        if (i % 2 == 0) {
+            aaa.data.push(data.d)
+        } else {
+            aaa.data.push(data.q)
+        }
     }
 }
 const configs = reactive({
@@ -88,24 +218,68 @@ const configs = reactive({
     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: [
     ]
 })
+const configs1 = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+
+    ],
+    data: [
+    ]
+})
+const configs2 = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+
+    ],
+    data: [
+    ]
+})
+
+const headerIndex = ref(0)
+const configList = reactive([configs, configs1, configs2])
+const headerList = [
+    ['序号', '二维码', '用户信息', '用户UID', '户名', '提现金额', '提现方式', '银行名称', '账号', '审核状态', '拒绝原因', '添加时间'],
+    ['会员ID', '昵称', '金额', '明细类型', '备注', '创建时间'],
+    ['序号', '日期', '账期内收入', '账期内支出', '平台入账金额', '操作'],
+
+]
+const addConfigHead = () => {
+    configList[headerIndex.value].header.splice(0, 9999)
+    headerList[headerIndex.value].forEach(item => {
+        configList[headerIndex.value].header.push(
+            `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>${item}</div>`
+        )
+    })
+
+
+
+}
+
+
+// 详情弹窗
+const showPop = ref(false)
+const hdClick3 = (e) => {
+    if (e.columnIndex == 5) {
+        showPop.value = true
+    }
+
+}
+
+
+
 onMounted(() => {
-    a(configs)
+    a(configs, congigData[headerIndex.value])
+    addConfigHead()
 })
 </script>
 
@@ -127,6 +301,7 @@ onMounted(() => {
         transform: translate(-50%, -50%);
         // background-color: #fff;
         box-sizing: border-box;
+        // cursor: pointer;
 
         .content {
             width: 100%;
@@ -138,6 +313,9 @@ onMounted(() => {
 
     .btns {
         display: flex;
+        z-index: 999999;
+        position: relative;
+        cursor: pointer;
 
         .btn {
             color: white;
@@ -172,8 +350,78 @@ onMounted(() => {
     padding: 0 !important;
 }
 
+.pop {
+    position: absolute;
+    z-index: 99999999999999;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 35vw;
+    height: 40vh;
+
+    .pop-content {
+        // background-color: #fff;
+        width: 85%;
+        height: 85%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 12px;
+
+        .pop-content-head {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2vh;
+
+        }
+
+        .off {
+            padding: 0 1vw;
+            border: 1px solid white;
+            border-radius: 1vw;
+            color: white;
+            cursor: pointer;
+            font-size: 14px;
+        }
 
 
+        .pop-li {
+            margin-top: 1vh;
+            color: white;
+            border-bottom: 1px solid #43BEE2;
+            padding-bottom: .5vh;
 
-.row {}
+            .price {
+                color: #8F4C46;
+                font-size: 16px;
+            }
+        }
+
+    }
+}
+
+.gradient-text {
+    font-family: 'FZCYJ';
+
+    // background: linear-gradient(to bottom, #C6F2FB);
+    color: #C6F2FB;
+    font-size: 16px;
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
+    // font-size: 48px;
+    // font-weight: bold;
+}
+
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+
+}
 </style>

src/view/index.vue

@@ -25,14 +25,24 @@
                     <div class="product" style="display: flex;justify-content: space-around;">
                         <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
                         <img src="/static/index/SPTB.png" class="product-icon" alt="">
+                        <div class="bubble"></div>
+                        <div class="bubble1"></div>
+                        <div class="bubble2"></div>
                     </div>
-                    <div class="product" style="display: flex;justify-content: space-around;">
+                    <div class="product" style="display: flex;justify-content: space-around;position: relative;">
-                        <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
+                        <img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
-                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
+                        <img src="/static/index/SDTB.png" class="product-icon" alt="">
+                        <div class="bubble"></div>
+                        <div class="bubble1"></div>
+                        <div class="bubble2"></div>
+
                     </div>
-                    <div class="product" style="display: flex;justify-content: space-around;">
+                    <div class="product" style="display: flex;justify-content: space-around;position: relative;">
-                        <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
+                        <img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
-                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
+                        <img src="/static/index/SDTB.png" class="product-icon" alt="">
+                        <div class="bubble"></div>
+                        <div class="bubble1"></div>
+                        <div class="bubble2"></div>
                     </div>
                 </div>
                 <div class="Views">
@@ -536,4 +546,151 @@ onMounted(() => {
     background: linear-gradient(to right, #455CCC, #51C2E0);
     transition: width 0.5s ease-in-out;
 }
+
+.bubble {
+    width: 5px;
+    height: 5px;
+    background-color: white;
+    position: absolute;
+    border-radius: 50%;
+    top: 7vh;
+    animation-name: bubbleAnimation;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+}
+
+.bubble1 {
+    width: 5px;
+    height: 5px;
+    background-color: white;
+    position: absolute;
+    border-radius: 50%;
+    top: 7vh;
+    left: 6.5vw;
+    animation-name: bubbleAnimation;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+}
+
+.bubble2 {
+    width: 5px;
+    height: 5px;
+    background-color: white;
+    position: absolute;
+    border-radius: 50%;
+    top: 7vh;
+    left: 8.5vw;
+    animation-name: bubbleAnimation;
+    animation-duration: 1.25s;
+    animation-iteration-count: infinite;
+}
+
+
+@keyframes bubbleAnimation {
+    0% {
+        top: 7vh;
+        // opacity: 0;
+        transform: scale(0);
+    }
+
+    25% {
+        top: 6.5vh;
+        opacity: 1;
+        transform: scale(0.55);
+
+
+    }
+
+    50% {
+        top: 6vh;
+        opacity: 1;
+        transform: scale(0.5);
+
+        // left: 5vw;
+    }
+
+    75% {
+        transform: scale(1);
+        top: 5vh;
+        opacity: 1;
+    }
+
+    100% {
+
+        top: 4vh;
+        opacity: 0;
+    }
+}
+
+@keyframes bubbleAnimation1 {
+    0% {
+        top: 7vh;
+        // opacity: 0;
+        transform: scale(0);
+    }
+
+    25% {
+        top: 6.5vh;
+        opacity: 1;
+        transform: scale(0.55);
+
+
+    }
+
+    50% {
+        top: 6vh;
+        opacity: 1;
+        transform: scale(0.5);
+
+        // left: 5vw;
+    }
+
+    75% {
+        transform: scale(1);
+        top: 5vh;
+        opacity: 1;
+    }
+
+    100% {
+
+        top: 4vh;
+        opacity: 0;
+    }
+}
+
+@keyframes bubbleAnimation2 {
+    0% {
+        top: 7vh;
+        // opacity: 0;
+        transform: scale(0);
+    }
+
+    25% {
+        top: 6.5vh;
+        opacity: 1;
+        transform: scale(0.55);
+
+
+    }
+
+    50% {
+        top: 6vh;
+        opacity: 1;
+        transform: scale(0.5);
+
+        // left: 5vw;
+    }
+
+    75% {
+        transform: scale(1);
+        top: 5vh;
+        opacity: 1;
+    }
+
+    100% {
+
+        top: 4vh;
+        opacity: 0;
+    }
+}
 </style>

src/view/option.js

@@ -1,11 +1,11 @@
 import * as echarts from 'echarts';
 
 let angle = 0;//角度，用来做简单的动画效果的
- let value = 78; //图上角度数据
+let value = 78; //图上角度数据
- let result = [
+let result = [
-	{ name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}},
+  { name: '制造业', value: 5713, itemStyle: { color: '#FF7734' } },
-    { name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}},
+  { name: '信息传输、软件和信息技术服务业', value: 3022, itemStyle: { color: '#FFC700' } },
-    { name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}},
+  { name: '科学研究和技术服务业', value: 2647, itemStyle: { color: '#34FFE7' } },
   { name: '金融业', value: 2291 },
   { name: '批发和零售业', value: 1946 },
   { name: '交通运输、仓储和邮政业', value: 1812 },
@@ -15,12 +15,12 @@ let angle = 0;//角度，用来做简单的动画效果的
   { name: '水利、环境和公共设施管理业', value: 1621 }
 ]
 
-const optins={
+const optins = {
 
   /******首页***********/
   // 用户图表
-    userChartOption : {
+  userChartOption: {
-        color:[
+    color: [
       new echarts.graphic.LinearGradient(0, 1, 0, 0, [
         { offset: 1, color: 'transparent' },
         { offset: 0, color: '#0081C3' },
@@ -28,20 +28,26 @@ const optins={
       , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
         { offset: 1, color: 'transparent' },
         { offset: 0, color: '#3E54BF' },
-          ]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      ]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
         { offset: 1, color: 'transparent' },
         { offset: 0, color: '#4DBFD9' },
-          ]) ,
+      ]),
     ],
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
-            }
+      },
     },
     // color: transparent;
 
-        legend: {},
+    legend: {
+      textStyle: {
+        color: "white"
+      }
+
+
+    },
     grid: {
       left: '3%',
       right: '4%',
@@ -57,11 +63,11 @@ const optins={
     yAxis: [
       {
         type: 'value',
-                splitLine:{
+        splitLine: {
-                    show:true,
+          show: true,
-                    lineStyle:{
+          lineStyle: {
-                      type:'dashed',//背景色为虚线,
+            type: 'dashed',//背景色为虚线,
-                      color:'#256980'
+            color: '#256980'
           }
         }
 
@@ -113,14 +119,14 @@ const optins={
     ]
   },
   // 地方店铺数量统计
-    storeNum:{
+  storeNum: {
-        backgroundColor:"#061740",
+    backgroundColor: "#061740",
     title: {
-            text: '{a|'+ 70 +'}{c|%}',
+      text: '{a|' + 70 + '}{c|%}',
       x: 'center',
       y: 'center',
       textStyle: {
-                rich:{
+        rich: {
           a: {
             fontSize: 10,
             color: '#ffffff',
@@ -140,15 +146,15 @@ const optins={
         name: "",
         type: 'custom',
         coordinateSystem: "none",
-                renderItem: function(params, api) {
+        renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 2,
               cy: api.getHeight() / 2,
               r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
-                            startAngle: (0+-angle) * Math.PI / 180,
+              startAngle: (0 + -angle) * Math.PI / 180,
-                            endAngle: (360+-angle) * Math.PI / 180
+              endAngle: (360 + -angle) * Math.PI / 180
             },
             style: {
               stroke: "#0CD3DB",
@@ -199,7 +205,7 @@ const optins={
             }
           },
           {
-                        value: 100-70,
+            value: 100 - 70,
             name: "",
             label: {
               normal: {
@@ -218,7 +224,7 @@ const optins={
   },
   // 成交用户统计信息表
 
-    transactionUsers : {
+  transactionUsers: {
     color: ['#015989', '#583936', '#416979'],
     title: {
       text: ''
@@ -233,7 +239,10 @@ const optins={
       }
     },
     legend: {
-          data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
+      data: ['访客人数', '下单人数', '支付人数'],
+      textStyle: {
+        color: "white"
+      }
       //   data: ['访客人数','下单人数','支付人数']
 
     },
@@ -258,11 +267,11 @@ const optins={
     yAxis: [
       {
         type: 'value',
-            splitLine:{
+        splitLine: {
-                show:true,
+          show: true,
-                lineStyle:{
+          lineStyle: {
-                  type:'dashed',//背景色为虚线,
+            type: 'dashed',//背景色为虚线,
-                  color:'#256980'
+            color: '#256980'
           }
         }
       }
@@ -356,8 +365,8 @@ const optins={
 
   /*******townDetail**********/
   // 订单金额
-    orderAmount:{
+  orderAmount: {
-      color:[
+    color: [
       new echarts.graphic.LinearGradient(0, 1, 0, 0, [
         { offset: 1, color: '#57D3ED' },
         { offset: 0, color: 'transparent' },
@@ -385,17 +394,17 @@ const optins={
     xAxis: [
       {
         type: 'category',
-              data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时','20-0时']
+        data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
       }
     ],
     yAxis: [
       {
         type: 'value',
-              splitLine:{
+        splitLine: {
-                  show:true,
+          show: true,
-                  lineStyle:{
+          lineStyle: {
-                    type:'dashed',//背景色为虚线,
+            type: 'dashed',//背景色为虚线,
-                    color:'#256980'
+            color: '#256980'
           }
         }
 
@@ -409,7 +418,7 @@ const optins={
         emphasis: {
           focus: 'series'
         },
-              data: [320, 332, 301, 334, 390, 330, 322,222],
+        data: [320, 332, 301, 334, 390, 330, 322, 222],
         // itemStyle: {
         //     borderWidth: 1,
         //     borderColor: "#384FB4",
@@ -425,7 +434,7 @@ const optins={
         emphasis: {
           focus: 'series'
         },
-              data: [120, 132, 101, 134, 90, 230, 210,366],
+        data: [120, 132, 101, 134, 90, 230, 210, 366],
 
       },
 
@@ -438,7 +447,7 @@ const optins={
 
   },
   // 成交用户数据
-    transactionUsersTown : {
+  transactionUsersTown: {
     color: ['#015989', '#583936', '#416979'],
     title: {
       text: ''
@@ -453,7 +462,7 @@ const optins={
       }
     },
     legend: {
-        data: ['访客人数', '下单人数', '支付人数', ]
+      data: ['访客人数', '下单人数', '支付人数',]
       //   data: ['访客人数','下单人数','支付人数']
 
     },
@@ -478,11 +487,11 @@ const optins={
     yAxis: [
       {
         type: 'value',
-          splitLine:{
+        splitLine: {
-              show:true,
+          show: true,
-              lineStyle:{
+          lineStyle: {
-                type:'dashed',//背景色为虚线,
+            type: 'dashed',//背景色为虚线,
-                color:'#256980'
+            color: '#256980'
           }
         }
       }
@@ -573,6 +582,67 @@ const optins={
 
     ]
   },
+  // 订单数据
+  orderData: {
+
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      boundaryGap: [0, 0.01],
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',//背景色为虚线,
+          color: '#256980'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: ['当日订单数', '当月订单数'],
+
+    },
+    series: [
+      {
+        barWidth: 15,
+        barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
+        barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
+        data: [120, 200],
+        type: 'bar',
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 1, color: '#0298E5' },
+                { offset: 0, color: 'transparent' },
+              ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 1, color: '#4358C8' },
+                { offset: 0, color: 'transparent' },
+              ])];
+              return colorList[params.dataIndex]
+            },
+            borderColor: ['blue']
+
+          },
+          borderWidth: 2,
+          borderColor: "red",
+        },
+
+      }
+    ]
+  }
 
 
 

src/view/order.vue

@@ -7,6 +7,8 @@
                     <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>
@@ -15,7 +17,7 @@
                 </div>
 
                 <div class="table">
-                    <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
+                    <dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" />
                 </div>
 
             </div>
@@ -35,20 +37,100 @@ const test = () => {
     console.log(6)
 }
 
-const hdClick = (e) => {
+const tableHdClick = (e) => {
-    if (e.columnIndex == 10) {
+
-        // route.push('/storeLogin')
+
+    if (e.ceil) {
+        if (e.columnIndex == 0) {
+            // console.log(e.rowIndex)
+            let tag = document.getElementById(`order${e.rowIndex}`)
+            let tag2 = document.getElementById(`card${e.rowIndex}`)
+            tag.style.display = 'none'
+            tag2.style.display = 'block'
+            console.log(tag.style.display)
+            console.log(tag2.style.display)
+
+        } else {
+            let tag = document.getElementsByClassName(`order`)
+            let tag2 = document.getElementsByClassName(`card`)
+            for (let i = 0; i < tag.length; i++) {
+                tag[i].style.display = 'block'
+                tag2[i].style.display = 'none'
             }
 
+            console.log(tag[0].style.display)
+            console.log(tag2[0].style.display)
+        }
+
+
+    }
+
+
 
 }
 
 const a = (aaa) => {
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 50; 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;cursor: pointer;'>         
+                            <div class='order' id='order${i}'  style='position:relative'> 
+                            <div style=' width: 0;
+                            height: 0;
+                            border-left: 0.5vh solid transparent;
+                            border-right: 0.5vh solid transparent;
+                            border-top: 0.5vh solid #C25941;
+                            position: absolute;
+                            top:50%;
+                           left:0    
+                            '> 
+                            </div>      4554545</div>
+                        
+                        <div class='card' id='card${i}'
+                        style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
+
+                        <div
+                            style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
+                            <span>总单号：</span>
+                            <span>35356565656565</span>
+                        </div>
+                        <div
+                            style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                            <span>下单时间</span>
+                            <span>2023.11.214</span>
+                        </div>
+
+                        <div
+                            style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                            <span>商品总价</span>
+                            <span>2023.11.214</span>
+                        </div>
+                        <div
+                            style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                            <span>订单类型</span>
+                            <span>2023.11.214</span>
+                        </div>
+                        <div
+                            style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                            <span>用户备注</span>
+                            <span>2023.11.214</span>
+                        </div>
+
+                        <div
+                            style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                            <span>商家备注</span>
+                            <span>2023.11.214</span>
+                        </div>
+
+
+                    </div>
+
+                        
+                        
+                        
+                        
+                        </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>`,
@@ -63,7 +145,63 @@ const a = (aaa) => {
         } 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;cursor: pointer;'>         
+                        <div class='order' id='order${i}'  style='position:relative'> 
+                        <div style=' width: 0;
+                        height: 0;
+                        border-left: 0.5vh solid transparent;
+                        border-right: 0.5vh solid transparent;
+                        border-top: 0.5vh solid #C25941;
+                        position: absolute;
+                        top:50%;
+                       left:0    
+                        '> 
+                        </div>      1111</div>
+                    
+                    <div class='card' id='card${i}'
+                    style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
+
+                    <div
+                        style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
+                        <span>总单号：</span>
+                        <span>35356565656565</span>
+                    </div>
+                    <div
+                        style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                        <span>下单时间</span>
+                        <span>2023.11.214</span>
+                    </div>
+
+                    <div
+                        style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                        <span>商品总价</span>
+                        <span>2023.11.214</span>
+                    </div>
+                    <div
+                        style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                        <span>订单类型</span>
+                        <span>2023.11.214</span>
+                    </div>
+                    <div
+                        style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                        <span>用户备注</span>
+                        <span>2023.11.214</span>
+                    </div>
+
+                    <div
+                        style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
+                        <span>商家备注</span>
+                        <span>2023.11.214</span>
+                    </div>
+
+
+                </div>
+
+                    
+                    
+                    
+                    
+                    </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>`,
@@ -125,6 +263,7 @@ onMounted(() => {
         transform: translate(-50%, -50%);
         // background-color: #fff;
         box-sizing: border-box;
+        // cursor: pointer;
 
         .content {
             width: 100%;

src/view/townDetail.vue

@@ -37,7 +37,24 @@
         <div class="r">
 
             <img class="img-cls" src="/static/town/DDSJ.png" alt="">
+            <div class="order-data">
+                <div class="tit">
+                    <div style="display: flex;align-items: center;">
+                        <div class="gradient-circle">
+                        </div>
+                        日订单数据
+                    </div>
+                    <div style="display: flex;align-items: center;">
+                        <div class="gradient-circle">
+                        </div>
+                        日订单数据
+                    </div>
 
+                </div>
+                <div style="width: 100%;height:50%;" id="orderData"></div>
+                <div style="width: 100%;height: 50%;" id="orderData2"></div>
+
+            </div>
 
         </div>
 
@@ -144,42 +161,6 @@ const config3 = reactive({
             `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
 
         ],
-        // [` <div style="  text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
-        //     `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
-        //     `<div>商品名称</div>`,
-        //     `<div class="progress-bar"> <div class="progress"></div> </div>`,
-        //     `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
-
-
-        // ],
-        // [`  <div style="  text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
-        //     `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
-        //     `<div>商品名称</div>`,
-        //     `<div class="progress-bar"> <div class="progress"></div> </div>`,
-        //     `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
-
-        // ],
-        // [`  <div style="  text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
-        //     `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
-        //     `<div>商品名称</div>`,
-        //     `<div class="progress-bar"> <div class="progress"></div> </div>`,
-        //     `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
-
-        // ],
-        // [`  <div style="  text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
-        //     `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
-        //     `<div>商品名称</div>`,
-        //     `<div class="progress-bar"> <div class="progress"></div> </div>`,
-        //     `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
-
-        // ],
-        // [`  <div style="  text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
-        //     `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
-        //     `<div>商品名称</div>`,
-        //     `<div class="progress-bar"> <div class="progress"></div> </div>`,
-        //     `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
-
-        // ],
 
     ]
 }
@@ -194,9 +175,16 @@ const initCharts = (tag, option) => {
 }
 
 onMounted(() => {
+    document.getElementById("orderData").removeAttribute('_echarts_instance_');
+    document.getElementById("orderData2").removeAttribute('_echarts_instance_');
+    document.getElementById("user").removeAttribute('_echarts_instance_');
+    document.getElementById("orderAmount").removeAttribute('_echarts_instance_');
+    document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
     initCharts('user', option.userChartOption)
     initCharts('orderAmount', option.orderAmount)
     initCharts('transactionUsers', option.transactionUsersTown)
+    initCharts('orderData', option.orderData)
+    initCharts('orderData2', option.orderData)
 
 })
 
@@ -315,6 +303,32 @@ onMounted(() => {
         height: 46vh;
         position: relative;
 
+        .order-data {
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            padding-right: 1vw;
+            position: relative;
+
+            .tit {
+                position: absolute;
+                color: white;
+                // background-color: #fff;
+                top: 5vh;
+                width: 100%;
+                font-size: 10px;
+                display: flex;
+                justify-content: space-around;
+
+                .gradient-circle {
+                    width: 10px;
+                    height: 10px;
+                    background: radial-gradient(at top left, transparent, #029BE9);
+                    border-radius: 50%;
+                }
+            }
+        }
+
     }
 }
 

static/font/font.css

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'FZCYJ';
+    src: url('ifonts.ttf');
+    font-weight: normal;
+    font-style: normal;
+}