diff --git a/src/App.vue b/src/App.vue
index fe66fc2..b27ebb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
+// @ts-ignore
+import Header from "@/components/Header.vue"
+
+
+
 </script>
 <template>
-  <router-view></router-view>
+  <!-- <div>sadas</div> -->
+  <div class="main-box">
+    <Header></Header>
+    <router-view></router-view>
+  </div>
 </template>
  
 <style lang="scss">
@@ -9,4 +18,11 @@
   margin: 0;
   padding: 0;
 }
+
+.main-box {
+  width: 100vw;
+  height: 100vh;
+  background-color: #000C14;
+  overflow: hidden;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Remake.vue b/src/components/Remake.vue
new file mode 100644
index 0000000..a46d7bb
--- /dev/null
+++ b/src/components/Remake.vue
@@ -0,0 +1,141 @@
+<template>
+    <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>
+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>
+
diff --git a/src/components/header.vue b/src/components/header.vue
index 39184fe..9c7e1ea 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,140 +1,195 @@
 <template>
-    <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 class="headers">
+        <div class="logo">
+        </div>
+        <div class="tab">
+            <img v-if="show[0]" @click="showFn(0, '/')" class="tab-li" :src="u('SY')" alt="">
+            <img v-else class="tab-li" @click="showFn(0, '/')" :src="u('SYXZ')" alt="">
+
+            <img v-if="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SP.png" alt="">
+            <img v-else="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SPXZ.png" alt="">
+
+            <img v-if="show[2]" @click="showFn(2)" class="tab-li" src="/static/index/SH.png" alt="">
+            <img v-else class="tab-li" @click="showFn(2)" src="/static/index/SHXZ.png" alt="">
+
+            <img class="tab-li" @click="showFn(3)" v-if="show[3]" src="/static/index/DD.png" alt="">
+            <img class="tab-li" @click="showFn(3)" v-else src="/static/index/DDxz.png" alt="">
+
+
+            <img class="tab-li" @click="showFn(4)" v-if="show[4]" src="/static/index/CW.png" alt="">
+            <img class="tab-li" @click="showFn(4)" v-else src="/static/index/CWXZ.png" alt="">
+        </div>
+        <div class="right">
+            <div class="rigth-li" @click="choseTown = true">泸县</div>
+            <Transition>
+                <div class="address" v-if="choseTown">
+                    <div class="address-li" @click="choseTownFn(1)"
+                        v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
+
+                </div>
+            </Transition>
+            <div class="right-line">
+                <span></span>
+                <span></span>
+
+            </div>
+
+            <div class="rigth-li">15:39:25</div>
+            <div class="right-line"> <span></span>
+                <span></span>
+            </div>
+
+            <div class="rigth-li">2023.01.20</div>
+            <div class="right-line">
+                <span></span>
+                <span></span>
+            </div>
+
+            <div class="rigth-li" @click="route.push('/')">关机</div>
+            <div class="right-line">
+                <span></span>
+                <span></span>
+            </div>
+
         </div>
     </div>
 </template>
-<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 lang="ts" setup>
+import { ref, reactive } from "vue"
+import { useRouter } from 'vue-router'
+const u = (name) => {
+    return `/static/index/${name}.png`
 }
+const route = useRouter()
+// 标题
+const show = reactive([false, true, true, true, true])
+
+const showFn = (index, src) => {
+    show.forEach((item, i) => {
+        show[i] = true
+    })
+    show[index] = !show[index]
+    route.push(src)
+}
+
+// 选额镇
+const choseTown = ref(false)
+
+const choseTownFn = (id) => {
+    choseTown.value = false
+    route.push('/townDetail?id=' + id)
+    console.log(route)
+}
+
+
+
+
+
 </script>
-<style scoped lang='scss'>
-/*订单总量滚动数字设置*/
-.box-item {
-    position: relative;
-    height: 80px;
+<style lang="scss" scoped>
+.headers {
+    display: flex;
+    color: #B0C7D1;
+    height: 6vh;
+    align-items: center;
+    justify-content: space-between;
+    background-image: url('/static/index/TIT.png');
+    background-color: #000C14;
 
-    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; */
-}
+    background-size: cover;
 
-/* 默认逗号设置 */
-.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;
+    .logo {
+        width: 20vw;
+        // margin-right: 30px;
+        height: 40px;
+        align-items: center;
     }
-}
 
-/*滚动数字设置*/
-.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;
+    .tab {
+        display: flex;
+        align-items: center;
+        margin-left: 120px;
+        width: 50vw;
 
-    &>span {
+        .tab-li {
+            width: 13%;
+            margin-right: 10px;
+            cursor: pointer;
+        }
+    }
+
+    .right {
+        display: flex;
+        font-size: 15px;
+        margin-right: 30px;
         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;
+        .address {
+            left: 1vw;
+            top: 18px;
             position: absolute;
-            top: 11px;
-            left: 50%;
-            transform: translate(-50%, 0);
-            transition: transform 1s ease-in-out;
-            letter-spacing: 10px;
+            width: 8vw;
+            height: 18vh;
+            background-color: #001E32;
+            color: #C7DBE3;
+            z-index: 9999;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding: 5px;
+
+            .address-li {
+                padding: 2px 5px;
+                cursor: pointer;
+
+                border-bottom: 0.1px solid #0E293C;
+            }
+        }
+
+        .address::-webkit-scrollbar {
+            width: 10px;
+            background-color: #153041;
+        }
+
+        .address::-webkit-scrollbar-track {
+            background-color: #153041;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: #4AB9D0;
+            border-radius: 5px;
+        }
+
+        .rigth-li {
+            height: 15px;
+            line-height: 15px;
+            padding: 0 10px;
+            cursor: pointer;
+        }
+
+        .right-line {
+            width: 1px;
+            height: 15px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            span {
+                width: 1px;
+                height: 7px;
+                background-color: #4BB9D0;
+
+            }
         }
     }
 }
 
-.number-item:last-child {
-    margin-right: 0;
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.5s ease;
 }
-</style>
 
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 7705810..c6083d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,18 @@ const routes= [
         path: '/',
         name: 'index',
         component:()=>import('@/view/index.vue'),
-    }
+    },
+    {
+        path: '/townDetail',
+        name: 'townDetail',
+        component:()=>import('@/view/townDetail.vue'),
+    },
+    {
+        path: '/commodity',
+        name: 'commodity',
+        component:()=>import('@/view/commodity.vue'),
+    },
+   
 ]
  
 const router = createRouter({
diff --git a/src/view/commodity.vue b/src/view/commodity.vue
new file mode 100644
index 0000000..a5c9024
--- /dev/null
+++ b/src/view/commodity.vue
@@ -0,0 +1,143 @@
+<template>
+    <div class="box">
+        <div class="img-cls">
+            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+            <div class="content">
+                <div class="btns">
+                    <div class="btn">商品分类</div>
+                    <div class="btn">商品管理</div>
+                </div>
+                <div class="table">
+                    <dv-scroll-board :config="configs" @click='test' style="width:95vw;height:100%" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+onMounted(() => {
+    for (let i = 0; i < 100; i++) {
+        if (i % 2 == 0) {
+            configs.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                ]
+            )
+        } else {
+            configs.data.push(
+                [
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                ]
+
+
+            )
+        }
+
+
+    }
+})
+const test = (e) => {
+    if (e.columnIndex == 1) {
+        console.log(e)
+
+    }
+    // alert(e)
+}
+const configs = reactive({
+    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+    oddRowBGC: '',
+    evenRowBGC: "",
+    rowNum: 20,
+    header: [
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>排序</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>分类名称</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>分类图标</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否显示</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否推荐</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
+
+    ],
+    data: [
+
+
+    ]
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.box {
+    margin-top: 3vh;
+    width: 100vw;
+    height: 90vh;
+    position: relative;
+
+    .img-cls {
+
+        width: 99%;
+        height: 90vh;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // background-color: #fff;
+        box-sizing: border-box;
+
+        .content {
+            width: 100%;
+            height: 100%;
+            padding: 2vw;
+        }
+
+    }
+
+    .btns {
+        display: flex;
+
+        .btn {
+            color: white;
+            border: 1px solid #BF6D5D;
+            padding: 3px 10px;
+            border-radius: 20px;
+            margin-right: 10px;
+            cursor: pointer;
+        }
+    }
+
+    .table {
+        width: 100%;
+        height: 78vh;
+        margin-top: 2vh;
+    }
+}
+
+:deep(.ceil) {
+    padding: 0 !important;
+    margin-bottom: 5px;
+    margin-right: 2px;
+}
+
+:deep(.header-item) {
+    padding: 0 !important;
+}
+
+
+
+
+.row {}
+</style>
\ No newline at end of file
diff --git a/src/view/index.vue b/src/view/index.vue
index 1889100..ef7832e 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -1,35 +1,6 @@
 <template>
     <div class="box">
-        <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>
-                <div class="rigth-li">2023.01.20</div>
-                <div class="rigth-li">关机</div>
-            </div>
-        </div>
         <div class="body">
-
             <div class="l">
                 <div class="user" id="user"></div>
                 <div class="storeNum">
@@ -45,10 +16,7 @@
                     </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="">
@@ -68,11 +36,15 @@
                     <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 style="display: flex;align-items: center;">当前浏览量：
+                            <Remake /> 人正在浏览
                         </div>
                         <div>周环比：32%</div>
                     </div>
                 </div>
+
+
+
             </div>
 
 
@@ -82,10 +54,8 @@
                 </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>
@@ -136,10 +106,13 @@
 import { onMounted } from 'vue';
 import * as echarts from 'echarts';
 import option from "./option"
-import Header from "@/components/header.vue"
+import Remake from "@/components/Remake.vue"
 import { ref, reactive } from "vue"
 
+
 const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
+
+
 const configs = reactive(
     {
         header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
@@ -239,12 +212,6 @@ const config3 = reactive({
 )
 
 
-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);
@@ -281,66 +248,7 @@ onMounted(() => {
     }
 }
 
-.box {
-    width: 100vw;
-    height: 100vh;
-    background-color: #000C14;
-
-    .headers {
-        display: flex;
-        color: #B0C7D1;
-        height: 6vh;
-        align-items: center;
-        justify-content: space-between;
-        background-image: url('/static/index/TIT.png');
-
-        background-size: cover;
-
-        .logo {
-            width: 20vw;
-            margin-right: 30px;
-            height: 40px;
-            align-items: center;
-        }
-
-        .tab {
-            display: flex;
-            align-items: center;
-            margin-left: 120px;
-            // background-color: #fff;
-
-            .tab-li {
-                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 {
-            display: flex;
-            font-size: 15px;
-            margin-right: 30px;
-            align-items: center;
-
-            .rigth-li {
-                margin-right: 30px;
-            }
-        }
-    }
-}
-
 .body {
-    // margin-top: 30px;
     height: 50vh;
     display: flex;
 
diff --git a/src/view/option.js b/src/view/option.js
index 4a0e6db..9f2be06 100644
--- a/src/view/option.js
+++ b/src/view/option.js
@@ -16,6 +16,8 @@ let angle = 0;//角度，用来做简单的动画效果的
 ]
 
 const optins={
+
+    /******首页***********/
     // 用户图表
     userChartOption : {
         color:[
@@ -352,7 +354,225 @@ const optins={
         ]
       },
 
+    /*******townDetail**********/
+    // 订单金额
+    orderAmount:{
+      color:[
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          { offset: 1, color: '#57D3ED' },
+          { offset: 0, color: 'transparent' }, 
+        ]) 
+        , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          { offset: 1, color: '#4156C2' },
+          { offset: 0, color: 'transparent' },
+        ]) 
+      ],
+      tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+              type: 'shadow'
+          }
+      },
+      // color: transparent;
 
+      legend: {},
+      grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+      },
+      xAxis: [
+          {
+              type: 'category',
+              data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时','20-0时']
+          }
+      ],
+      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, 322,222],
+              // itemStyle: {
+              //     borderWidth: 1,
+              //     borderColor: "#384FB4",
+              // },
+   
+              backgroundStyle: {
+                  color: ['red']
+                }
+          },
+          {
+              name: '今日订单额',
+              type: 'bar',
+              emphasis: {
+                  focus: 'series'
+              },
+              data: [120, 132, 101, 134, 90, 230, 210,366],
+              
+          },
+        
+        
+      ]
+  
+  
+  
+  
+  
+    },
+    // 成交用户数据
+    transactionUsersTown : {
+      color: ['#015989', '#583936', '#416979'],
+      title: {
+        text: ''
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: ['访客人数', '下单人数', '支付人数', ]
+      //   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: '#2752A6'
+              },
+              {
+                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: '#005685'
+              },
+              {
+                offset: 1,
+                color: '#355969'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: [320, 132, 201, 334, 190, 130, 220]
+        },
+        
+       
+      ]
+    },
 
 
 
diff --git a/src/view/townDetail.vue b/src/view/townDetail.vue
new file mode 100644
index 0000000..01e794f
--- /dev/null
+++ b/src/view/townDetail.vue
@@ -0,0 +1,430 @@
+<template>
+    <div class="top box">
+
+        <div class="l">
+            <img class="img-cls" src="/static/town/YHSJ.png" alt="">
+            <div class="user center" id="user"></div>
+        </div>
+        <div class="c">
+            <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" class="c-b-img" alt="">
+                <div class="view-content">
+                    <div>昨日数据：3333</div>
+                    <div style="display: flex;align-items: center;">当前浏览量：
+                        <Remake /> 人正在浏览
+                    </div>
+                    <div>周环比：32%</div>
+                </div>
+            </div>
+
+
+        </div>
+        <div class="r">
+
+            <img class="img-cls" src="/static/town/DDSJ.png" alt="">
+
+
+        </div>
+
+
+    </div>
+    <div class="bottom box">
+        <div class="l">
+            <div class="user center" id="orderAmount"></div>
+            <img class="img-cls" src="/static/town/DRDDJE.png" alt="">
+        </div>
+        <div class="c">
+            <img class="img-cls" src="/static/town/CJYH.png" alt="">
+            <div id="transactionUsers" class="transactionUsers"></div>
+        </div>
+        <div class="r">
+
+            <img class="img-cls" src="/static/town/PHBSJ.png" alt="">
+            <div class="user">
+                <div class="btns">
+                    <span class="btn">店铺销量排行</span>
+                    <span class="btn">店铺销量排行</span>
+
+                </div>
+
+                <dv-scroll-board :config="config3" class="list" />
+            </div>
+
+
+        </div>
+    </div>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import * as echarts from 'echarts';
+import option from "./option"
+import { ref, reactive } from "vue"
+import Remake from "@/components/Remake.vue"
+const config3 = reactive({
+    oddRowBGC: "#001C2E",
+    evenRowBGC: "#001C2E",
+    columnWidth: [
+        40, 60, 70, 200, 60
+    ],
+    data: [
+        [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;" >1</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ],
+        [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;" >2</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ],
+        [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;" >3</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ],
+        [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >4</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ],
+        [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >5</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ],
+        [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >6</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ], [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >7</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<div  style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
+
+        ], [
+            `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >8</div> `,
+            `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
+            `<div style='height:40px;line-height:40px'>商品名称</div>`,
+            `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
+            `<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>`,
+
+        // ],
+
+    ]
+}
+
+)
+
+// 图表
+const initCharts = (tag, option) => {
+    var chartDom = document.getElementById(tag);
+    var myChart = echarts.init(chartDom);
+    myChart.setOption(option);
+}
+
+onMounted(() => {
+    initCharts('user', option.userChartOption)
+    initCharts('orderAmount', option.orderAmount)
+    initCharts('transactionUsers', option.transactionUsersTown)
+
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+@keyframes jump {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.box {
+    width: 100vw;
+    height: 47vh;
+    box-sizing: border-box;
+
+}
+
+.top {
+    display: flex;
+    padding-top: 1vh;
+    // color: transparent;
+
+    .l {
+        flex: 1;
+        height: 46vh;
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative;
+
+        .user {
+            position: absolute;
+            width: 98%;
+            height: 35vh;
+
+        }
+
+    }
+
+    .c {
+        flex: 2;
+        height: 46vh;
+        position: relative;
+
+        .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;
+            color: white;
+            font-size: 12px;
+            overflow: hidden;
+            position: relative;
+
+            .c-b-img {
+                position: absolute;
+                width: 99%;
+                top: 0;
+                height: 99%;
+                left: 0;
+                // background-color: #fff;
+
+            }
+
+            .view-content {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                height: 100%;
+                // color: ;
+                // display: flex;
+                // height: 100%;
+                // width: 100%;
+                // align-items: center;
+                // justify-content: space-between;
+                // padding: 0 20px;
+            }
+        }
+
+    }
+
+    .r {
+        flex: 1;
+        height: 46vh;
+        position: relative;
+
+    }
+}
+
+.bottom {
+    // background-color: green;
+    display: flex;
+    padding-top: 1vh;
+
+    .l {
+        flex: 1;
+        height: 46vh;
+        position: relative;
+
+        .user {
+            margin-top: 4.5vh;
+            position: absolute;
+            width: 98%;
+            height: 35vh;
+            box-sizing: border-box;
+            overflow: hidden;
+
+        }
+
+    }
+
+    .c {
+        flex: 2;
+        height: 46vh;
+        position: relative;
+
+        .transactionUsers {
+            position: absolute;
+            width: 100%;
+            height: 40vh;
+            top: 5vh;
+        }
+
+
+    }
+
+    .r {
+        flex: 1;
+        height: 46vh;
+        position: relative;
+
+        .user {
+            box-sizing: border-box;
+            // padding-top: 5vh;
+            width: 100%;
+            // height: 46vh;
+            margin-top: 7vh;
+            height: 38vh;
+
+            .btns {
+                color: white;
+                display: flex;
+                justify-content: flex-end;
+                margin-bottom: 2vh;
+
+                .btn {
+                    margin-right: 1vw;
+                    font-size: 12px;
+                    padding: 3px 10px;
+                    border: 1px solid #2A538D;
+                    border-radius: 20px;
+                }
+            }
+
+            .list {
+
+                // background-color: #fff;
+                box-sizing: border-box;
+                padding: 0 1vw 50px 1vw;
+                height: 34vh;
+            }
+        }
+
+    }
+}
+
+.img-cls {
+    width: 98%;
+    height: 45vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.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>
\ No newline at end of file
diff --git a/static/town/CJYH.png b/static/town/CJYH.png
new file mode 100644
index 0000000..c54c53b
Binary files /dev/null and b/static/town/CJYH.png differ
diff --git a/static/town/DDSJ.png b/static/town/DDSJ.png
new file mode 100644
index 0000000..ab871ae
Binary files /dev/null and b/static/town/DDSJ.png differ
diff --git a/static/town/DRDDJE.png b/static/town/DRDDJE.png
new file mode 100644
index 0000000..6a99745
Binary files /dev/null and b/static/town/DRDDJE.png differ
diff --git a/static/town/PHBSJ.png b/static/town/PHBSJ.png
new file mode 100644
index 0000000..dfcff53
Binary files /dev/null and b/static/town/PHBSJ.png differ
diff --git a/static/town/TABBG.png b/static/town/TABBG.png
new file mode 100644
index 0000000..2d1fc6d
Binary files /dev/null and b/static/town/TABBG.png differ
diff --git a/static/town/TABBG_slices/mipmap-hdpi/TABBG.png b/static/town/TABBG_slices/mipmap-hdpi/TABBG.png
new file mode 100644
index 0000000..7e78582
Binary files /dev/null and b/static/town/TABBG_slices/mipmap-hdpi/TABBG.png differ
diff --git a/static/town/TABBG_slices/mipmap-mdpi/TABBG.png b/static/town/TABBG_slices/mipmap-mdpi/TABBG.png
new file mode 100644
index 0000000..2650d1e
Binary files /dev/null and b/static/town/TABBG_slices/mipmap-mdpi/TABBG.png differ
diff --git a/static/town/TABBG_slices/mipmap-xhdpi/TABBG.png b/static/town/TABBG_slices/mipmap-xhdpi/TABBG.png
new file mode 100644
index 0000000..007a9ec
Binary files /dev/null and b/static/town/TABBG_slices/mipmap-xhdpi/TABBG.png differ
diff --git a/static/town/TABBG_slices/mipmap-xxhdpi/TABBG.png b/static/town/TABBG_slices/mipmap-xxhdpi/TABBG.png
new file mode 100644
index 0000000..f5aa3ba
Binary files /dev/null and b/static/town/TABBG_slices/mipmap-xxhdpi/TABBG.png differ
diff --git a/static/town/YGB.png b/static/town/YGB.png
new file mode 100644
index 0000000..3556ef5
Binary files /dev/null and b/static/town/YGB.png differ
diff --git a/static/town/YHSJ.png b/static/town/YHSJ.png
new file mode 100644
index 0000000..ea23e18
Binary files /dev/null and b/static/town/YHSJ.png differ
diff --git a/static/town/ZCGB.png b/static/town/ZCGB.png
new file mode 100644
index 0000000..57108df
Binary files /dev/null and b/static/town/ZCGB.png differ