页面修改

2023-11-23 19:39:47 +08:00 · 2023-11-23 19:39:47 +08:00 · 41b0e33e7c
parent 5e530a1a90
commit 41b0e33e7c
35 changed files with 1201 additions and 36 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
+        "@jiaminghi/data-view": "^2.10.0",
        "echarts": "^5.4.3",
        "vue": "^3.3.8",
        "vue-router": "^4.2.5"
@ -407,6 +408,34 @@
        "node": ">=12"
      }
    },
+    "node_modules/@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "node_modules/@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
    "node_modules/@jiaminghi/color": {
      "version": "0.1.1",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
@ -415,6 +444,23 @@
        "@babel/runtime": "^7.5.5"
      }
    },
+    "node_modules/@jiaminghi/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
+    "node_modules/@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.3",
      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@ -2188,6 +2234,34 @@
      "dev": true,
      "optional": true
    },
+    "@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
    "@jiaminghi/color": {
      "version": "0.1.1",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
@ -2196,6 +2270,23 @@
        "@babel/runtime": "^7.5.5"
      }
    },
+    "@jiaminghi/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
+    "@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
    "@jridgewell/gen-mapping": {
      "version": "0.3.3",
      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
+    "@jiaminghi/data-view": "^2.10.0",
    "echarts": "^5.4.3",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
--- a/src/components/header.vue
+++ b/src/components/header.vue
@ -1,7 +1,140 @@
 <template>
-    <div style="background-color: red; height: 100px; width: 750px;">
-        sadsasdfsdf
+    <div class="chartNum" style="margin: 0 20px;">
+        <div class="box-item">
+            <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
+                :key="index">
+                <span v-if="!isNaN(item)">
+                    <i ref="numberItem">0123456789</i>
+                </span>
+                <span class="comma" v-else>{{ item }}</span>
+            </li>
+        </div>
    </div>
 </template>
-<script setup>
-</script>
+<script>
+export default {
+    data() {
+        return {
+            orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
+        }
+    },
+    mounted() {
+        setTimeout(() => {
+            this.toOrderNum(656656) // 这里输入数字即可调用
+        }, 500);
+
+    },
+    methods: {
+        // 设置文字滚动
+        setNumberTransform() {
+            const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
+            const numberArr = this.orderNum.filter(item => !isNaN(item))
+            // 结合CSS 对数字字符进行滚动,显示订单数量
+            for (let index = 0; index < numberItems.length; index++) {
+                const elem = numberItems[index]
+                elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
+            }
+        },
+        // 处理总订单数字
+        toOrderNum(num) {
+            num = num.toString()
+            // 把订单数变成字符串
+            if (num.length < 8) {
+                num = '0' + num // 如未满八位数，添加"0"补位
+                this.toOrderNum(num) // 递归添加"0"补位
+            } else if (num.length === 8) {
+                // 订单数中加入逗号
+                // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
+                this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
+            } else {
+                // 订单总量数字超过八位显示异常
+                this.$message.warning('总量数字过大')
+            }
+            this.setNumberTransform()
+        },
+    }
+}
+</script>
+<style scoped lang='scss'>
+/*订单总量滚动数字设置*/
+.box-item {
+    position: relative;
+    height: 80px;
+
+    font-size: 54px;
+    line-height: 41px;
+    text-align: center;
+    list-style: none;
+    color: white;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+}
+
+/* 默认逗号设置 */
+.mark-item {
+    width: 10px;
+    height: 100px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 48px;
+    position: relative;
+
+    &>span {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+    }
+}
+
+/*滚动数字设置*/
+.number-item {
+    width: 41px;
+    height: 75px;
+    /* 背景图片 */
+    background: url('/static/index/SZBG.png') no-repeat center center;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius: 4px;
+
+    &>span {
+        position: relative;
+        display: inline-block;
+        margin-right: 10px;
+        width: 100%;
+        height: 100%;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        overflow: hidden;
+
+        &>i {
+            font-style: normal;
+            position: absolute;
+            top: 11px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            transition: transform 1s ease-in-out;
+            letter-spacing: 10px;
+        }
+    }
+}
+
+.number-item:last-child {
+    margin-right: 0;
+}
+</style>
+
--- a/src/main.js
+++ b/src/main.js
@ -1,10 +1,12 @@
 import { createApp } from 'vue'
 // import './style.css'
 import App from './App.vue'
+import dataV from '@jiaminghi/data-view'

 // import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
 import router from "./router";

 const app=createApp(App)
 app.use(router)
+app.use(dataV)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -5,12 +5,7 @@ const routes= [
        path: '/',
        name: 'index',
        component:()=>import('@/view/index.vue'),
-    },
-    // {
-    //     path: '/a',
-    //     name: 'indesx',
-    //     component:()=>import('@/components/header.vue'),
-    // },
+    }
 ]
 
 const router = createRouter({
--- a/src/view/index.vue
+++ b/src/view/index.vue
@ -1,16 +1,26 @@
 <template>
    <div class="box">
-        <div class="header">
-            <div class="logo"></div>
-            <div class="tab">
-                <div class="tab-li">首 页</div>
-                <div class="tab-li">商 品</div>
-                <div class="tab-li">商 户</div>
-                <div class="tab-li">订 单</div>
-                <div class="tab-li">财 务</div>
+        <div class="headers">
+            <div class="logo">
            </div>
+            <div class="tab">
+                <img v-if="show[0]" @click="show[0] = false" class="tab-li" :src="u('SYXZ')" alt="">
+                <img v-else class="tab-li" @click="show[0] = true" :src="u('SY')" alt="">
+
+                <img v-if="show[1]" @click="show[1] = false" class="tab-li" src="/static/index/SP.png" alt="">
+                <img v-else="show[1]" @click="show[1] = true" class="tab-li" src="/static/index/SPXZ.png" alt="">
+
+                <img v-if="show[2]" @click="show[2] = false" class="tab-li" src="/static/index/SH.png" alt="">
+                <img v-else class="tab-li" @click="show[2] = true" src="/static/index/SHXZ.png" alt="">
+
+                <img class="tab-li" @click="show[3] = false" v-if="show[3]" src="/static/index/DD.png" alt="">
+                <img class="tab-li" @click="show[3] = true" v-else src="/static/index/DDxz.png" alt="">


+                <img class="tab-li" @click="show[4] = false" v-if="show[4]" src="/static/index/CW.png" alt="">
+                <img class="tab-li" @click="show[4] = true" v-else src="/static/index/CWXZ.png" alt="">
+
+            </div>
            <div class="right">
                <div class="rigth-li">泸县</div>
                <div class="rigth-li">15:39:25</div>
@ -18,57 +28,302 @@
                <div class="rigth-li">关机</div>
            </div>
        </div>
+        <div class="body">
+
+            <div class="l">
+                <div class="user" id="user"></div>
+                <div class="storeNum">
+                    <div class="tit"></div>
+                    <div class="townList">
+                        <div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
+                            <div class="store" :id="'store' + index"></div>
+                            <div class="toenName">
+                                <div>同谈镇</div>
+                                <div>123个</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="c" id="">
+
+
+                <div class="product-list">
+                    <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>
+                    <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>
+                    <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>
+                </div>
+
+                <div class="Views">
+                    <img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+                    <div class="view-content">
+                        <div>昨日数据：3333</div>
+                        <div style="display: flex;align-items: center;">当前浏览量： <Header></Header> 人正在浏览
+                        </div>
+                        <div>周环比：32%</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="r">
+                <!-- <div>
+                    店铺销量排行
+                </div> -->
+                <div class="user">
+                    <div class="btns">
+
+                        <span class="btn">店铺销量排行</span>
+                        <span class="btn">店铺销量排行</span>
+
+                    </div>
+                    <dv-scroll-board :config="config3" style="width:95%;height:20vh" />
+                </div>
+                <div class="storeNum">
+                    <div class="tit">
+                    </div>
+                    <div class="townList">
+                        <div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
+                            <div class="store" :id="'store' + (index + 8)"></div>
+                            <div class="toenName">
+                                <div>同谈镇</div>
+                                <div>123个</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="foot">
+
+
+            <div class="foot-l">
+                <div style="height: 5vh;"></div>
+                <div>
+                    <dv-scroll-board :config="configs" style="width:25vw;height:40vh" />
+                </div>
+            </div>
+            <div class="c">
+                <div style="height:5vh;"></div>
+                <div class="towns">
+                    <div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
+                    <div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
+                </div>
+            </div>
+            <div class="r">
+
+                <div style="height: 5vh;"></div>
+                <div>
+                    <dv-scroll-board :config="configs2" style="width:25vw;height:40vh" />
+                </div>
+
+            </div>
+        </div>
    </div>
 </template> 
 <script setup>

 import { onMounted } from 'vue';
-import { BorderBox1 } from '@dataview/datav-vue3';
 import * as echarts from 'echarts';
-import header from "@/components/header.vue"
-// alert(5454)
-console.log(header)
-onMounted(() => {
+import option from "./option"
+import Header from "@/components/header.vue"
+import { ref, reactive } from "vue"

+const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
+const configs = reactive(
+    {
+        header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
+        headerBGC: '#223B7E',
+        data: [
+            ['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
+            ['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
+            ['行3列1', '行3列2', '行3列3', 'sad', 'asdsa'],
+            ['行4列1', '行4列2', '行4列3', 'sad', 'asdsa'],
+            ['行5列1', '行5列2', '行5列3', 'sad', 'asdsa'],
+            ['行6列1', '行6列2', '行6列3', 'sad', 'asdsa'],
+            ['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
+            ['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
+            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
+            ['行10列1', '行10列2', '行10列3']
+        ]
+    }
+
+)
+const configs2 = reactive(
+    {
+        header: ['所属片区', '当日订单金额', '昨日订单金额'],
+        headerBGC: '#223B7E',
+        align: ['center'],
+        data: [
+            ['行1列1', '行1列2', '行1列3'],
+            ['行2列1', '行2列2', '行2列3'],
+            ['行3列1', '行3列2', '行3列3'],
+            ['行4列1', '行4列2', '行4列3'],
+            ['行5列1', '行5列2', '行5列3'],
+            ['行6列1', '行6列2', '行6列3'],
+            ['行7列1', '行7列2', '行7列3'],
+            ['行8列1', '行8列2', '行8列3'],
+            ['行9列1', '行9列2', '行9列3'],
+            ['行10列1', '行10列2', '行10列3']
+        ]
+    }
+
+)
+const config3 = reactive({
+    oddRowBGC: "#001C2E",
+    evenRowBGC: "#001C2E",
+    columnWidth: [
+        50, 60, 70, 220, 100
+    ],
+    data: [
+
+
+        [
+            `<div style="  text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
+            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
+            `<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/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>`,
+
+        ],
+
+    ]
+}
+
+)
+
+
+const show = reactive([true, true, true, true, true])
+
+const u = (name) => {
+    return `/static/index/${name}.png`
+}
+
+// 图表
+const initCharts = (tag, option) => {
+    var chartDom = document.getElementById(tag);
+    var myChart = echarts.init(chartDom);
+    myChart.setOption(option);
+}
+
+
+onMounted(() => {
+    initCharts('user', option.userChartOption)
+
+    for (let i = 0; i < 16; i++) {
+        initCharts('store' + i, option.storeNum)
+
+    }
+    initCharts('transactionUsers', option.transactionUsers)
+
+
+    // initCharts('user', option.userChartOption)
 })
 </script>
 <style lang="scss">
+@keyframes jump {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
 .box {
    width: 100vw;
    height: 100vh;
    background-color: #000C14;

-    .header {
+    .headers {
        display: flex;
        color: #B0C7D1;
-        height: 40px;
+        height: 6vh;
        align-items: center;
        justify-content: space-between;
+        background-image: url('/static/index/TIT.png');
+
+        background-size: cover;

        .logo {
            width: 20vw;
-            background-color: red;
            margin-right: 30px;
            height: 40px;
            align-items: center;
-
-
        }

        .tab {
            display: flex;
            align-items: center;
+            margin-left: 120px;
+            // background-color: #fff;

            .tab-li {
-                width: 120px;
-                background-color: #002641;
-                text-align: center;
-                height: 25px;
-                line-height: 25px;
-                margin: 0 10px;
-                color: white;
-                text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
+                width: 13%;
+                margin-right: 10px;
            }
+
+            // .tab-li {
+            //     width: 120px;
+            //     background-color: #002641;
+            //     text-align: center;
+            //     height: 25px;
+            //     line-height: 25px;
+            //     margin: 0 10px;
+            //     color: white;
+            //     text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
+            // }
        }

        .right {
@ -83,4 +338,309 @@ onMounted(() => {
        }
    }
 }
+
+.body {
+    // margin-top: 30px;
+    height: 50vh;
+    display: flex;
+
+    .l {
+        flex: 1;
+        height: 100%;
+        background: url('/static/index/PTYHL.png');
+        // background-size: cover;
+        background-size: 25vw 50vh;
+
+        .user {
+            box-sizing: border-box;
+            padding-top: 5vh;
+            width: 100%;
+            height: 57%;
+
+            .btn {
+                color: white;
+            }
+        }
+
+        .storeNum {
+            width: 100%;
+            height: 43%;
+
+            .tit {
+                height: 15%;
+                // background-color: red;
+            }
+
+            .townList {
+                height: 75%;
+                display: flex;
+                flex-wrap: wrap;
+                box-sizing: border-box;
+                padding: 10px;
+
+
+                .storebox {
+                    width: 22%;
+                    height: 40%;
+                    position: relative;
+                    display: flex;
+                    margin-left: 10px;
+
+                    .store {
+                        flex: 1;
+                        height: 100%;
+
+                    }
+
+                    .toenName {
+                        flex: 1;
+                        height: 100%;
+                        background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
+                        border-radius: 0 15px 15px 0;
+                        font-size: 12px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        color: white;
+                        box-sizing: border-box;
+                        padding: 7px 2px;
+
+                    }
+                }
+            }
+        }
+    }
+
+    .c {
+        box-sizing: border-box;
+        padding: 15px;
+        flex: 2;
+        height: 100%;
+        // background-color: pink;
+
+        .product-list {
+            height: 75%;
+            // background-color: red;
+            display: flex;
+            justify-content: space-between;
+            position: relative;
+
+            .product {
+                height: 100%;
+                width: 32%;
+                // background-color: #fff;
+            }
+
+            .product-icon {
+                width: 2vw;
+                height: 2vw;
+                position: absolute;
+                animation: jump 1s infinite;
+                top: 2vh;
+            }
+        }
+
+        .Views {
+            height: 25%;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0 15px;
+            position: relative;
+            color: white;
+            font-size: 12px;
+
+            .view-content {
+                display: flex;
+                height: 100%;
+                width: 100%;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 20px;
+            }
+        }
+
+    }
+
+    .r {
+        flex: 1;
+        height: 100%;
+        background: url('/static/index/PTSP.png');
+        // background-size: cover;
+        background-size: 25vw 49vh;
+        background-repeat: no-repeat;
+
+        .user {
+            box-sizing: border-box;
+            padding-top: 5vh;
+            width: 100%;
+            height: 57%;
+
+            .btns {
+                color: white;
+                display: flex;
+                justify-content: flex-end;
+
+                .btn {
+                    margin-right: 1vw;
+                    font-size: 12px;
+                    padding: 3px 10px;
+                    border: 1px solid #2A538D;
+                    border-radius: 20px;
+                }
+            }
+        }
+
+        .storeNum {
+            width: 100%;
+            height: 43%;
+
+            .tit {
+                height: 15%;
+                // background-color: red;
+            }
+
+            .townList {
+                height: 75%;
+                display: flex;
+                flex-wrap: wrap;
+                box-sizing: border-box;
+                padding: 10px;
+
+
+                .storebox {
+                    width: 22%;
+                    height: 40%;
+                    position: relative;
+                    display: flex;
+                    margin-left: 10px;
+
+                    .store {
+                        flex: 1;
+                        height: 100%;
+
+                    }
+
+                    .toenName {
+                        flex: 1;
+                        height: 100%;
+                        background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
+                        border-radius: 0 15px 15px 0;
+                        font-size: 12px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        color: white;
+                        box-sizing: border-box;
+                        padding: 7px 2px;
+
+                    }
+                }
+            }
+        }
+    }
+}
+
+.foot {
+    // margin-top: 30px;
+    height: 45vh;
+    display: flex;
+
+    .foot-l {
+        flex: 1;
+        height: 100%;
+        background: url('/static/index/DDSJ.png');
+        background-size: 25vw 45vh;
+        background-repeat: no-repeat;
+
+
+
+    }
+
+    .c {
+        flex: 2;
+        height: 100%;
+        background: url('/static/index/CJYHTJ.png');
+        background-size: 50vw 45vh;
+        background-repeat: no-repeat;
+
+        .towns {
+            width: 50vw;
+            display: flex;
+            box-sizing: border-box;
+            padding: 1vh 1vw;
+            flex-wrap: wrap;
+
+            .town-li {
+                margin-top: 10px;
+                color: #A0C7D5;
+                padding: 5px 10px;
+                border-radius: 7px 10px;
+                font-size: 12px;
+                border: 1px solid #3A91A5;
+                background-color: #072C3E;
+                // margin-left: 2vw;
+                justify-content: fl;
+                margin-left: 2vw;
+            }
+        }
+
+    }
+
+    .r {
+        flex: 1;
+        height: 100%;
+        background: url('/static/index/DRDD.png');
+        background-size: 25vw 45vh;
+        background-repeat: no-repeat;
+    }
+}
+
+
+
+.producta {
+    width: 200px;
+    height: 200px;
+    background-color: black;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.producta::before {
+    content: "";
+    position: absolute;
+    top: -100%;
+    left: -100%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, #ffffff 20%, rgba(255, 255, 255, 0) 70%);
+    animation: shine 2s infinite;
+}
+
+@keyframes shine {
+    0% {
+        transform: rotate(45deg) translate(-150%, -150%);
+    }
+
+    100% {
+        transform: rotate(45deg) translate(150%, 150%);
+    }
+}
+
+.progress-bar {
+    transform: translateY(12px);
+    width: 100%;
+    height: 10px;
+    background-color: #122E3F;
+    // border-radius: 10px;
+    overflow: hidden;
+}
+
+.progress {
+    width: 70%;
+    height: 100%;
+    background: linear-gradient(to right, #455CCC, #51C2E0);
+    transition: width 0.5s ease-in-out;
+}
 </style>
--- a/src/view/option.js
+++ b/src/view/option.js
@ -0,0 +1,362 @@
+import * as echarts from 'echarts';
+
+let angle = 0;//角度，用来做简单的动画效果的
+ let value = 78; //图上角度数据
+ let result = [
+	{ name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}},
+    { name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}},
+    { name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}},
+    { name: '金融业', value: 2291 },
+    { name: '批发和零售业', value: 1946 },
+    { name: '交通运输、仓储和邮政业', value: 1812 },
+    { name: '教育', value: 1756 },
+    { name: '建筑业', value: 1712 },
+    { name: '房地产业', value: 1666 },
+    { name: '水利、环境和公共设施管理业', value: 1621 }
+]
+
+const optins={
+    // 用户图表
+    userChartOption : {
+        color:[
+            new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: 'transparent' },
+            { offset: 0, color: '#0081C3' },
+          ]) 
+          , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: 'transparent' },
+            { offset: 0, color: '#3E54BF' },
+          ]) , 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: {},
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                splitLine:{
+                    show:true,
+                    lineStyle:{
+                      type:'dashed',//背景色为虚线,
+                      color:'#256980'
+                    }
+                  }
+        
+            },
+          
+        ],
+        series: [
+            {
+                name: '新增用户数量',
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 330, 320],
+                itemStyle: {
+                    borderWidth: 1,
+                    borderColor: "#384FB4",
+                },
+     
+                backgroundStyle: {
+                    color: ['red']
+                  }
+            },
+            {
+                name: '访问用户数量',
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [120, 132, 101, 134, 90, 230, 210],
+                itemStyle: {
+                    borderWidth: 1,
+                    borderColor: "#3E54BF",
+                },
+            },
+            {
+                name: '累计用户数量',
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 330, 310],
+                itemStyle: {
+                    borderWidth: 1,
+                    borderColor: "#4EC1DB",
+                },
+            },
+          
+        ]
+    },
+    // 地方店铺数量统计
+    storeNum:{
+        backgroundColor:"#061740",
+        title: {
+            text: '{a|'+ 70 +'}{c|%}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+                rich:{
+                    a: {
+                        fontSize: 10,
+                        color: '#ffffff',
+                        fontWeight: 'bold'
+                    },
+                    c: {
+                        fontSize: 10,
+                        color: '#ffffff',
+                        fontWeight: 'normal'
+                    }
+                }
+            }
+        },
+        series: [
+            //内环
+            {
+                name: "",
+                type: 'custom',
+                coordinateSystem: "none",
+                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,
+                            endAngle: (360+-angle) * Math.PI / 180
+                        },
+                        style: {
+                            stroke: "#0CD3DB",
+                            fill: "transparent",
+                            lineWidth: 0.5
+                        },
+                        silent: true
+                    };
+                },
+                data: [0]
+            },
+            //外环
+            {
+                name: '',
+                type: 'pie',
+                radius: ['85%', '70%'],
+                silent: true,
+                clockwise: true,
+                startAngle: 90,
+                z: 0,
+                zlevel: 0,
+                label: {
+                    normal: {
+                        position: "center",
+                    }
+                },
+                data: [
+                    {
+                        value: 60,
+                        name: "",
+                        itemStyle: {
+                            normal: {
+                                //外环发光
+                                borderWidth: 0.5,
+                                shadowBlur: 20,
+                                borderColor: '#4bf3f9',
+                                shadowColor: '#9bfeff',
+                                color: { // 圆环的颜色
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#4bf3f9', // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: '#4bf3f9', // 100% 处的颜色
+                                    }]
+                                },
+                            }
+                        }
+                    },
+                    {
+                        value: 100-70,
+                        name: "",
+                        label: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: "#173164"
+                            }
+                        }
+                    }
+                ]
+            },
+        ]
+    },
+    // 成交用户统计信息表
+
+    transactionUsers : {
+        color: ['#015989', '#583936', '#416979'],
+        title: {
+          text: ''
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
+        //   data: ['访客人数','下单人数','支付人数']
+
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitLine:{
+                show:true,
+                lineStyle:{
+                  type:'dashed',//背景色为虚线,
+                  color:'#256980'
+                }
+              }
+          }
+        ],
+        series: [
+          {
+            name: '访客人数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#18394A'
+                },
+                {
+                  offset: 1,
+                  color: '#2885A4'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250]
+          },
+          {
+            name: '下单人数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#004367'
+                },
+                {
+                  offset: 1,
+                  color: '#005886'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 282, 111, 234, 220, 340, 310]
+          },
+          {
+            name: '支付人数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5A3A37'
+                },
+                {
+                  offset: 1,
+                  color: '#355969'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 220]
+          },
+          
+         
+        ]
+      },
+
+
+
+
+
+    
+}
+
+export default optins
--- a/static/index/CJYHTJ.png
+++ b/static/index/CJYHTJ.png
--- a/static/index/CW.png
+++ b/static/index/CW.png
--- a/static/index/CWXZ.png
+++ b/static/index/CWXZ.png
--- a/static/index/DD.png
+++ b/static/index/DD.png
--- a/static/index/DDSJ.png
+++ b/static/index/DDSJ.png
--- a/static/index/DDXZ.png
+++ b/static/index/DDXZ.png
--- a/static/index/DRDD.png
+++ b/static/index/DRDD.png
--- a/static/index/PM1.png
+++ b/static/index/PM1.png
--- a/static/index/PM2.png
+++ b/static/index/PM2.png
--- a/static/index/PM3.png
+++ b/static/index/PM3.png
--- a/static/index/PM4.png
+++ b/static/index/PM4.png
--- a/static/index/PTSP.png
+++ b/static/index/PTSP.png
--- a/static/index/PTYHL.png
+++ b/static/index/PTYHL.png
--- a/static/index/SH.png
+++ b/static/index/SH.png
--- a/static/index/SHXZ.png
+++ b/static/index/SHXZ.png
--- a/static/index/SP.png
+++ b/static/index/SP.png
--- a/static/index/SPBG.png
+++ b/static/index/SPBG.png
--- a/static/index/SPTB.png
+++ b/static/index/SPTB.png
--- a/static/index/SPXZ.png
+++ b/static/index/SPXZ.png
--- a/static/index/SSLLL.png
+++ b/static/index/SSLLL.png
--- a/static/index/SY.png
+++ b/static/index/SY.png
--- a/static/index/SYXZ.png
+++ b/static/index/SYXZ.png
--- a/static/index/SZBG.png
+++ b/static/index/SZBG.png
--- a/static/index/TIT.png
+++ b/static/index/TIT.png
--- a/static/index/中间图标2_3.png
+++ b/static/index/中间图标2_3.png
--- a/static/index/中间展示框背景2.png
+++ b/static/index/中间展示框背景2.png
--- a/static/index/中间展示框背景3.png
+++ b/static/index/中间展示框背景3.png
--- a/vite.config.js
+++ b/vite.config.js
@ -13,6 +13,27 @@ export default defineConfig({
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
+  },
+  optimizeDeps: {
+    // 开发时 解决这些commonjs包转成esm包
+    include: [
+      "@jiaminghi/c-render",
+      "@jiaminghi/c-render/lib/plugin/util",
+      "@jiaminghi/charts/lib/util/index",
+      "@jiaminghi/charts/lib/util",
+      "@jiaminghi/charts/lib/extend/index",
+      "@jiaminghi/charts",
+      "@jiaminghi/color",
+    ],
+  },
+  build: {
+    // 打包时需要另外处理的commonjs规范的包
+    commonjsOptions: {
+      include: [
+        /node_modules/, // 必须包含
+      ],
+    },
  }

+
 })