也买你系应该

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)
-    // if (e.columnIndex == 1) {
-    //     console.log(e)
 
-    // }
+    // console.log(i)
+
+    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(
                     [
@@ -85,6 +105,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)",
     oddRowBGC: '',
@@ -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,15 +154,63 @@ 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({
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
@@ -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

@@ -37,11 +37,17 @@ const optins={
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
-            }
+      },
     },
     // color: transparent;
 
-        legend: {},
+    legend: {
+      textStyle: {
+        color: "white"
+      }
+
+
+    },
     grid: {
       left: '3%',
       right: '4%',
@@ -233,7 +239,10 @@ const optins={
       }
     },
     legend: {
-          data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
+      data: ['访客人数', '下单人数', '支付人数'],
+      textStyle: {
+        color: "white"
+      }
       //   data: ['访客人数','下单人数','支付人数']
 
     },
@@ -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;
+}