订单头部

src/components/Home.vue

@@ -3,14 +3,22 @@
     <el-row class="order_tab">
         <el-col :span="15">
           <div class="tab_list">
-            <div class="tab_item">
-              <div class="point">6</div>
-              <span>新订单</span>
+            <div class="tab_item" @click="tab_ac=i" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
+              <div class="point" v-show="item.num">{{item.num}}</div>
+              <span>{{item.name}}</span>
               <div class="tab_line"></div>
             </div>
           </div>
         </el-col>
-        <el-col :span="9"></el-col>
+        <el-col :span="9">
+          <div class="header_serch">
+            <div class="search_inp">
+              <el-input class="inp" v-model="input" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
+              <div class="btn"><i class="el-icon-search"></i></div>
+            </div>
+            <div class="Manual">手动发单</div>
+          </div>
+        </el-col>
     </el-row>
   </div>
 </template>
@@ -19,7 +27,17 @@
   export default {
     data() {
       return {
-        
+        tab_list:[
+          {name:'新订单',num:6},
+          {name:'预约单',num:0},
+          {name:'待接单',num:0},
+          {name:'取货中',num:0},
+          {name:'配送中',num:0},
+          {name:'异常单',num:0},
+          {name:'已取消',num:0}
+        ],
+        tab_ac:0,
+        input:''
       }
     },
     methods: {
@@ -29,6 +47,10 @@
 </script>
 
 <style lang="scss" scoped="scoped">
+  /deep/ .el-input__inner{
+    padding-right: 50px;
+    height: 44px;
+  }
   .mainContent{
     width: 100%;
    .order_tab{
@@ -41,21 +63,24 @@
       padding-top: 20px;
       padding-left: 36px;
       box-sizing: border-box;
+      display: flex;
       .tab_item{
         width: 58px;
         margin-right: 56px;
         font-size: 16px;
         font-weight: 500;
-        color: #FC7200;
+        color: #B1B1B1;
         position: relative;
         text-align: center;
+        cursor: pointer;
         .tab_line{
           width: 58px;
           height: 6px;
-          background: #FC7200;
+          background: #FFF;
           border-radius: 3px;
           margin-top: 15px;
         }
+        
         .point{
           width: 16px;
           height: 16px;
@@ -71,6 +96,51 @@
           line-height: 16px;
         }
       }
+      .tab_item_ac{
+        color: #FC7200;
+        .tab_line{
+          background: #FC7200;
+        }
+      }
+    }
+    .header_serch{
+      width: 100%;
+      height: 74px;
+      padding-right: 25px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .Manual{
+        width: 118px;
+        height: 44px;
+        background: #FC7200;
+        border-radius: 6px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 44px;
+        margin-left: 18px;
+      }
+      .search_inp{
+        width: 380px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .inp{
+          width: 380px;
+          height: 44px;
+          border: none;
+        }
+        .btn{
+          margin-left: 15px;
+          font-size: 22px;
+          position: absolute;
+          right: 15px;
+        }
+      }
     }
    }
   }

src/views/home.vue

@@ -72,7 +72,7 @@
     bottom: 0;
     overflow-y: auto;
     background-color: #F1F2F5;
-
+    padding: 10px;
   }
 
   .header-button {