添加切换导航

assets/a.scss

@@ -27,19 +27,19 @@ body {
             width : 100%;
             height: 100%;
 
-            li:nth-child(1) {
-                background-image: url(../static/img/ztb.png);
+            a:nth-child(1) li {
+                background-image: url(../static/img/ztb1.png);
             }
 
-            li:nth-child(2) {
+            a:nth-child(2) li {
                 background-image: url(../static/img/gc.png);
             }
 
-            li:nth-child(3) {
+            a:nth-child(3) li {
                 background-image: url(../static/img/xm.png);
             }
 
-            li:nth-child(4) {
+            a:nth-child(4) li {
                 background-image: url(../static/img/me.png);
             }
 
@@ -54,9 +54,15 @@ body {
                 span {
                     margin-top: 33px;
                     display   : inline-block;
+                    color     : rgba(175, 175, 175, 1);
+                }
+                .selected {
+                    color      : #ff5c5c;
                 }
             }
 
+           
+
 
         }
 
@@ -65,16 +71,23 @@ body {
 
 
     .search {
-        width  : 100%;
-        height : 44px;
-        padding: 7px 17px;
+        width     : 100%;
+        height    : 44px;
+        padding   : 7px 17px;
+        background: #fff;
 
         input {
-            width        : 75%;
-            height       : $a*60px;
-            background   : rgba(240, 243, 245, 1);
-            border-radius: $a*30px;
-            border       : none;
+            width              : 75%;
+            height             : $a*60px;
+            background-color   : rgba(240, 243, 245, 1);
+            border-radius      : $a*30px;
+            border             : none;
+            background-image   : url(../static/img/search.png);
+            background-repeat  : no-repeat;
+            background-position: 15px center;
+            background-size    : 20px;
+            padding-left       : 40px;
+            color              : rgba(153, 153, 153, 1);
         }
 
         span {
@@ -92,6 +105,7 @@ body {
         padding-bottom  : 75px;
         background-color: #f8f9fa;
         height          : 90%;
+        background      : #fff;
 
         li {
             height          : 302px*$a;
@@ -109,11 +123,11 @@ body {
             }
 
             .p1 {
-                margin               : 20px*$a 0;
-                font-size            : 26px*$a;
-                font-family          : PingFang-SC-Medium;
-                font-weight          : 500;
-                color                : rgba(122, 122, 122, 1);
+                margin     : 20px*$a 0;
+                font-size  : 26px*$a;
+                font-family: PingFang-SC-Medium;
+                font-weight: 500;
+                color      : rgba(122, 122, 122, 1);
             }
         }
 

components/table.vue

@@ -3,18 +3,24 @@
     <ul>
       <nuxt-link to="/bidding">
         <li>
-          <span>招投标</span>
+          <span class="selected">招投标</span>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/project">
+        <li>
+          <span>工程项目</span>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/map">
+        <li>
+          <span>项目跟踪</span>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/me">
+        <li>
+          <span>我的</span>
         </li>
       </nuxt-link>
-      <li>
-        <span>工程项目</span>
-      </li>
-      <li>
-        <span>项目跟踪</span>
-      </li>
-      <li>
-        <span>我的</span>
-      </li>
     </ul>
   </div>
 </template>
@@ -26,9 +32,7 @@ export default {
       author: '微信公众号 jinkey-love'
     }
   },
-  created: function() {
-    
-  },
+  created: function() {},
   methods: {
     addTodo(e) {
       this.$store.commit('todos/add', e.target.value)

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="bid">
     <div class="search">
-      <input type="text">
+      <input type="text" placeholder="请输入搜索内容">
       <span>我的订阅</span>
     </div>
     <sel/>