up

web/src/views/Home.vue

@@ -58,7 +58,7 @@
             <div class="detailsNum">
               <div
                 class="row"
-                :title="item.name + ' ' + item.visit"
+                @click.stop="toCun(item.id)"
                 v-for="item in numData"
                 :key="item.id"
               >
@@ -128,32 +128,54 @@ export default {
       mapData: [
         {
           id: 1000,
-          name: "蓬江区",
+          name: "江海区",
+          son: [{ id: 1, name: "东宁村" }],
+        },
+        {
+          id: 2000,
+          name: "新会区",
           son: [
-            { id: 1, name: "东宁村" },
             { id: 2, name: "良溪村" },
-            { id: 3, name: "卢边村" },
-            { id: 4, name: "田心村" },
             { id: 5, name: "仓前村" },
           ],
         },
         {
-          id: 2000,
-          name: "江海区",
+          id: 3000,
+          name: "潮连区",
+          son: [{ id: 3, name: "卢边村" }],
+        },
+        {
+          id: 4000,
+          name: "蓬江区",
+          son: [
+            { id: 4, name: "田心村" },
+            { id: 12, name: "横江村" },
+          ],
+        },
+        {
+          id: 5000,
+          name: "鹤山区",
+          son: [{ id: 6, name: "霄南村" }],
+        },
+        {
+          id: 6000,
+          name: "恩平区",
+          son: [{ id: 7, name: "歇马村" }],
+        },
+        {
+          id: 7000,
+          name: "开平区",
           son: [
-            { id: 6, name: "霄南村" },
-            { id: 7, name: "歇马村" },
             { id: 8, name: "自力村" },
             { id: 9, name: "马降龙村" },
           ],
         },
         {
-          id: 3000,
-          name: "新会区",
+          id: 8000,
+          name: "台山区",
           son: [
             { id: 10, name: "浮石村" },
             { id: 11, name: "浮月村" },
-            { id: 12, name: "横江村" },
           ],
         },
       ],
@@ -385,6 +407,7 @@ export default {
             height: 490px;
             padding-top: 15px;
             .row {
+              transition: all .3s;
               cursor: pointer;
               height: 40px;
               display: flex;
@@ -405,6 +428,7 @@ export default {
                   height: 14px;
                   background-color: rgba(232, 224, 209, 0.8);
                   & > div {
+                    transition: all .5s;
                     position: absolute;
                     left: 0;
                     top: 0;
@@ -422,6 +446,16 @@ export default {
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover{
+                color: #412c0c;
+                .rowRight{
+                  .plan{
+                    &>div{
+                      background-color: #412c0c;
+                    }
+                  }
+                }
+              }
             }
           }
         }
@@ -462,6 +496,9 @@ export default {
               cursor: pointer;
               margin-top: 0px;
               transition: all 0.3s;
+              &:hover{
+                color: #412c0c;
+              }
             }
             .active {
               height: auto;

web/src/views/stair/component/card.vue

@@ -56,6 +56,7 @@ export default {
   left: 0;
   width: 100vw;
   height: 100vh;
+  backdrop-filter: blur(4px);
   .main {
     position: absolute;
     top: 50%;
@@ -71,7 +72,6 @@ export default {
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(4px);
       z-index: -2;
     }
     .close {

web/src/views/stair/component/intro.vue

@@ -49,6 +49,7 @@ export default {
   left: 0;
   width: 100vw;
   height: 100vh;
+  backdrop-filter: blur(4px);
   .main {
     position: absolute;
     top: 50%;
@@ -64,7 +65,6 @@ export default {
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(4px);
       z-index: -2;
     }
     .close {

web/src/views/stair/component/share.vue

@@ -83,6 +83,7 @@ export default {
   left: 0;
   width: 100vw;
   height: 100vh;
+  backdrop-filter: blur(4px);
   .main {
     position: absolute;
     top: 50%;
@@ -98,7 +99,6 @@ export default {
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(4px);
       z-index: -2;
     }
     .close {

webM/src/views/Home.vue

@@ -25,16 +25,21 @@
         <div class="browseNum">
           <div>
             <p>累计浏览量</p>
-            <span>{{numAll}}</span>
+            <span>{{ numAll }}</span>
           </div>
           <div>
             <p>今日浏览量</p>
-            <span>{{numDay}}</span>
+            <span>{{ numDay }}</span>
           </div>
         </div>
         <div class="browse browse2">详情统计</div>
         <div class="detailsNum">
-          <div class="row" v-for="item in numData" :key="item.id">
+          <div
+            class="row"
+            v-for="item in numData"
+            :key="item.id"
+            @click="toCun(item.id)"
+          >
             <div class="rowLeft">{{ item.name }}</div>
             <div class="rowRight">
               <div class="plan">
@@ -47,12 +52,12 @@
       </div>
     </div>
     <!-- 点击搜索出来的页面 -->
-    <Search v-if="searchShow" @close="searchShow = false"/>
+    <Search v-if="searchShow" @close="searchShow = false" />
   </div>
 </template>
 
 <script>
-import { getStatistics } from "../utils/api";
+import { getStatistics, lookSaveApi } from "../utils/api";
 import Search from "./Search.vue";
 export default {
   components: { Search },
@@ -63,9 +68,9 @@ export default {
       numData: [],
       searchShow: false,
       // 累计浏览量
-      numAll:0,
+      numAll: 0,
       // 今日浏览量
-      numDay:0
+      numDay: 0,
     };
   },
   //监听属性 类似于data概念
@@ -73,13 +78,18 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    async toCun(id) {
+      await lookSaveApi(id);
+      this.$router.push(`/stair/${id}`);
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
     let res = await getStatistics();
-    this.numAll=res.data.visitCount
-    this.numDay=res.data.visitToday
-    this.numData=res.data.village
+    this.numAll = res.data.visitCount;
+    this.numDay = res.data.visitToday;
+    this.numData = res.data.village;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},