图片修改

assets/a.scss

@@ -1,48 +1,81 @@
 @charset "utf-8";
 //font 
-$table:90px;
+$table:120px*0.5;
+$a    :0.5;
 
 body {
-    background    : #f8f9fa;
-    padding-bottom: $table;
+    // background    : yellow;
+    padding-bottom   : $table;
+    padding          : 0 $a*20px;
 
     .table {
-        position: fixed;
-        bottom  : 0;
-        left    : 0;
-        width   : 100%;
-        height  : $table;
-        margin: 0;
+        position        : fixed;
+        bottom          : 0;
+        left            : 0;
+        width           : 100%;
+        height          : $table;
+        margin          : 0;
         background-color: #fff;
+
         ul {
-            width: 100%;
-            height : 100%;
-            li {
-                width  : 24%;
-                height : 100%;
-                display: inline-block;
-                text-align: center;
-                span{
-                    margin-top: 60px;
-                    display: inline-block;
-                }
+            width : 100%;
+            height: 100%;
+            li:nth-child(1) {
+                background-image: url(../static/img/ztb.png)  ;
             }
-            li:nth-child(1){
-                background: url(../static/img/ztb.png) no-repeat center 16px;
+
+            li:nth-child(2) {
+                background-image: url(../static/img/gc.png);
             }
-            li:nth-child(2){
-                background: url(../static/img/gc.png) no-repeat center 16px;
+
+            li:nth-child(3) {
+                background-image: url(../static/img/xm.png);
             }
-            li:nth-child(3){
-                background: url(../static/img/xm.png) no-repeat center 16px;
+
+            li:nth-child(4) {
+                background-image: url(../static/img/me.png);
             }
-            li:nth-child(4){
-                background: url(../static/img/me.png) no-repeat center 16px;
+
+            li {
+                width     : 24%;
+                height    : 100%;
+                display   : inline-block;
+                text-align: center;
+                background-size:30px !important;
+                background:no-repeat center top;
+                span {
+                    margin-top: 33px;
+                    display   : inline-block;
+                }
             }
+
+            
         }
 
     }
 
+    .search {
+        width  : 100%;
+        height : 44px;
+        padding: 7px;
+
+        input {
+            width        : 75%;
+            height       : $a*60px;
+            background   : rgba(240, 243, 245, 1);
+            border-radius: $a*30px;
+            border       : none;
+        }
+
+        span {
+            font-size  : 1.5rem;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color      : rgba(255, 92, 92, 1);
+            margin-left: 13px;
+        }
+
+    }
     * {
         margin : 0;
         padding: 0;
@@ -52,7 +85,7 @@ body {
 * {
     text-decoration: none;
     list-style     : none;
-    box-sizing: border-box;
+    box-sizing     : border-box;
 }
 
 $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722

assets/select.scss

@@ -0,0 +1,9 @@
+.select{
+    height : 44px;
+    .region{
+        height: 100%;
+        width: 49%;
+        display:inline-block;
+        text-align: center;
+    }
+}

components/bidding.vue

@@ -1,5 +0,0 @@
-<template>
- <div>
-     4245454554545
- </div>
-</template>

components/select.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="select">
+    <div class="region">
+      地区
+      <img src="../static/img/ztb.png" alt>
+    </div>
+    <div class="region">
+      类别
+      <img src="../static/img/ztb.png" alt>
+    </div>
+  </div>
+</template>
+<script>
+import '~/assets/select.scss'
+export default {
+  data() {
+    return {
+      author: '微信公众号 jinkey-love'
+    }
+  },
+  created: function() {},
+  methods: {
+    addTodo(e) {
+      this.$store.commit('todos/add', e.target.value)
+      e.target.value = ''
+    }
+  }
+}
+</script>

pages/index.vue

@@ -4,12 +4,16 @@
      <input type="text" >
       <span>我的订阅</span>
     </div>
+    <sel />
   </section>
 </template>
 
 <script>
+import sel from '~/components/select.vue'
 export default {
- 
+  components: {
+    sel
+  },
 }
 </script>