調整頁面佈局和部分樣式

src/components/index/index.vue

@@ -10,30 +10,21 @@
           </div>
 
           <!-- 功能区 -->
-          <div class="sel_zone">
-
-          </div>
-
           <div class="selectItem">
-            <div @click="clickItme(1)" class="tiyuchang guan" :class="selectVal == 1 ? 'tiyuchangBackS' : 'tiyuguanBackD'">
+            <div @click="clickItme(1)" class="ty guan" :class="selectVal == 1 ? 'ty_active' : 'ty'">
               <div class="txt">体育</div>
             </div>
-            <div @click="clickItme(2)" class="tiyuguan guan" :class="selectVal == 2 ? 'tiyuguanBackS' : 'tiyuguanBackD'">
-              <div class="txt">体育馆</div>
-            </div>
-            <div @click="clickItme(3)" class="zonglan guan" :class="selectVal == 3 ? 'zonglanBackS' : 'zonglanBackD'">
+            <div @click="clickItme(2)" class="zl guan" :class="selectVal == 2 ? 'zl_active' : 'zl'">
               <div class="txt">总览</div>
             </div>
-            <div @click="clickItme(4)" class="youyong guan" :class="selectVal == 4 ? 'youyongBackS' : 'youyongBackD'">
+            <div @click="clickItme(3)" class="youyong guan" :class="selectVal == 3 ? 'youyongBackS' : 'youyongBackD'">
               <div class="txt">文化</div>
             </div>
-            <div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'">
-              <div class="txt">图书馆</div>
-            </div>
+
           </div>
         </div>
         
-         
+         <!-- 中间视图 -->
         <router-view></router-view>
         
         <!-- 底部 -->
@@ -67,23 +58,20 @@
       this.$router.push({ path: '/zongLan/zongLan' })
     },
     methods: {
+      // 1:体育 2 总览 3 文化
       clickItme(val){
         this.selectVal = val
         if(val == 1){
           this.$router.push({ path: '/tiyuchang/tiyuchang' })
           this.backVal = 1
-        }else if(val == 3){
+        }else if(val == 2){
           this.$router.push({ path: '/zongLan/zongLan' })
           this.backVal = 3
         }
-        else if(val == 2){
+        else if(val == 3){
           this.$router.push({ path: '/stadium/stadium' })
           this.backVal = 2
         }
-        else if(val == 5){
-          this.$router.push({ path: '/library/library' })
-          this.backVal = 5
-        }
       },
       clickQushi(val){
         this.selectVal1 = val
@@ -108,7 +96,7 @@
       .topCard{
         width: 100%;
         height: 20%;
-        background-image: url('../../assets/index/顶部.png');
+        background-image: url('../../assets/index/topnav.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
         
@@ -138,7 +126,7 @@
           display: flex;
           justify-content: space-between;
           .guan{
-            width: 20%;
+            width: 33.33%;
             height: 84%;
             background-size: 100% 100%;
             background-repeat: no-repeat;
@@ -151,26 +139,19 @@
             justify-content: center;
             cursor:pointer
           }
-          .tiyuchangBackD{
-            background-image: url('../../assets/index/体育场1.png');
-          }
-          .tiyuchangBackS{
-            color: white;
-            background-image: url('../../assets/index/体育场.png');
-          }
-          .tiyuguanBackD{
-            background-image: url('../../assets/index/体育馆1.png');
+          .ty{
+            background-image: url('../../assets/index/ty.png');
           }
-          .tiyuguanBackS{
+          .ty_active{
             color: white;
-            background-image: url('../../assets/index/体育馆.png');
+            background-image: url('../../assets/index/ty_active.png');
           }
-          .zonglanBackD{
-            background-image: url('../../assets/index/总览1.png');
+          .zl{
+            background-image: url('../../assets/index/zl.png');
           }
-          .zonglanBackS{
+          .zl_active{
             color: white;
-            background-image: url('../../assets/index/总览.png');
+            background-image: url('../../assets/index/zl_active.png');
           }
           .youyongBackD{
             background-image: url('../../assets/index/游泳场馆1.png');