导航功能实现

assets/a.scss

@@ -28,7 +28,7 @@ body {
             height: 100%;
 
             a:nth-child(1) li {
-                background-image: url(../static/img/ztb1.png);
+                background-image: url(../static/img/ztb.png);
             }
 
             a:nth-child(2) li {
@@ -43,6 +43,22 @@ body {
                 background-image: url(../static/img/me.png);
             }
 
+            a:nth-child(1) li.selected {
+                background-image: url(../static/img/ztb1.png);
+            }
+
+            a:nth-child(2) li.selected {
+                background-image: url(../static/img/gc1.png);
+            }
+
+            a:nth-child(3) li.selected {
+                background-image: url(../static/img/xm1.png);
+            }
+
+            a:nth-child(4) li.selected {
+                background-image: url(../static/img/me1.png);
+            }
+
             li {
                 width          : 24%;
                 height         : 100%;
@@ -56,12 +72,16 @@ body {
                     display   : inline-block;
                     color     : rgba(175, 175, 175, 1);
                 }
-                .selected {
-                    color      : #ff5c5c;
+
+            }
+
+            li.selected {
+                span {
+                    color: #ff5c5c;
                 }
             }
 
-           
+
 
 
         }

components/table.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="table">
-    <ul>
-      <nuxt-link to="/bidding">
-        <li>
-          <span class="selected">招投标</span>
+    <ul @click="addTodo">
+      <nuxt-link to="/">
+        <li :class="selected[0]">
+          <span>招投标</span>
         </li>
       </nuxt-link>
       <nuxt-link to="/project">
-        <li>
+        <li :class="selected[1]">
           <span>工程项目</span>
         </li>
       </nuxt-link>
       <nuxt-link to="/map">
-        <li>
+        <li :class="selected[2]">
           <span>项目跟踪</span>
         </li>
       </nuxt-link>
       <nuxt-link to="/me">
-        <li>
+        <li :class="selected[3]">
           <span>我的</span>
         </li>
       </nuxt-link>
@@ -29,14 +29,25 @@ import '~/assets/a.scss'
 export default {
   data() {
     return {
-      author: '微信公众号 jinkey-love'
+      selected: ['selected']
     }
   },
-  created: function() {},
+  created: function() {
+    this.addTodo()
+  },
   methods: {
     addTodo(e) {
-      this.$store.commit('todos/add', e.target.value)
-      e.target.value = ''
+      const selected = []
+      if (this.$route.path == '/') {
+        selected[0] = 'selected'
+      } else if (this.$route.path == '/project') {
+        selected[1] = 'selected'
+      } else if (this.$route.path == '/map') {
+        selected[2] = 'selected'
+      } else if (this.$route.path == '/me') {
+        selected[3] = 'selected'
+      }
+      this.selected = selected
     }
   }
 }

pages/index.vue

@@ -100,9 +100,8 @@ body div {
 .p1 {
   display: -webkit-box;
   /* -webkit-box-orient: vertical; */
-  /*! autoprefixer: off */
-  -webkit-box-orient: vertical;
-  /* autoprefixer: on */
+ /*! autoprefixer: ignore next */
+-webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
 }