liebao-web/src/components/Home.vue

<template>
  <div class="mainContent">
    <el-row class="order_tab">
        <el-col :span="15">
          <div class="tab_list">
            <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">
          <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>
    <!-- 发起配送 -->
    <send-order-popup ref="sendOrderPopup"></send-order-popup>
</div>
</template>

<script>
  import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
  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:''
      }
    },
    components: {
      sendOrderPopup
    },
    methods: {
      deleteItem(index) {
        this.$refs.sendOrderPopup.init();
      },
      saveRule(t, i) {
        let obj = {
          id: i + 2,
          rule: t,
          content: ''
        }
        this.ruleList.push( obj )
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  /deep/ .el-input__inner{
    padding-right: 50px;
    height: 44px;
  }
  .mainContent{
    width: 100%;
   .order_tab{
    width: 100%;
    height: 74px;
    background: #FFF;
    .tab_list{
      width: 100%;
      height: 74px;
      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: #B1B1B1;
        position: relative;
        text-align: center;
        cursor: pointer;
        .tab_line{
          width: 58px;
          height: 6px;
          background: #FFF;
          border-radius: 3px;
          margin-top: 15px;
        }
        
        .point{
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #F74141;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          position: absolute;
          top: -5px;
          right: -10px;
          text-align: center;
          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;
        }
      }
    }
   }
  }
</style>