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>
    <el-row class="order_list">
      <el-col :span="18">
        <div class="order_item" v-for="(item,i) in 5" :key="i">
          <div class="order_item_header">
            <div class="Serial_number">#005</div>
            <img src="" class="logo">
            <span class="name">礼颂至品（娄葑店）</span>
            <div class="sign_time">17:30前送达</div>
            <div class="sign_txt">立即送达</div>
            <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
          </div>
          <div class="order_item_cont">
            <div class="itme_l">
              <div class="content">王女士<span>18015468888-1157</span></div> 
              <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i  class="el-icon-location"></i>1.3km</span></div>
            </div>
            <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="order_detail">
          <div class="detail_title">订单详情</div>
          <order-detail></order-detail>
          
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
  import orderDetail from './orderComponents/orderDetail'
import OrderDetail from './orderComponents/orderDetail.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,
        OrderDetail
    },
    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;
        }
      }
    }
   }
   .order_list{
     width: 100%;
     margin-top: 10px;
     .order_item{
        width: 100%;
        height: 140px;
        background: #fff;
        margin-bottom: 10px;
        .order_item_header{
          width: 100%;
          height: 49px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #F0F0F0;
          position: relative;
          .Serial_number{
            width: 60px;
            height: 26px;
            background: #FC7200;
            border-radius: 0 30px 30px 0;
            font-size: 10px;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            line-height: 26px;
          }
          .logo{
            width: 21px;
            height: 21px;
            border-radius: 50%;
            background: crimson;
            margin-left: 23px;
          }
          .name{
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            margin-left: 5px;
          }
          .sign_time{
            width: 84px;
            height: 20px;
            border: 1px solid #009CFF;
            background: #F2FAFF;
            border-radius: 2px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #009CFF;
            margin-left: 15px;
          }
          .sign_txt{
            width: 64px; 
            height: 20px;
            border: 1px solid #009CFF;
            background: #F2FAFF;
            border-radius: 2px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #009CFF;
            margin-left: 10px;
          }
          .btn{
             background: #FC7200;
             border-color: #FC7200;
             color: #FFF;
             position: absolute;
             right: 10px;
          }
        }
        .order_item_cont{
          width: 100%;
          height: 90px;
          padding: 0 11px 0 19px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .itme_l{
            font-size: 14px;
            font-weight: 600;
            color: #333333;
            line-height: 26px;
            .content span{
              margin-left: 15px;
            }
            .address span{
              font-size: 12px;
              color: #B1B1B1;
              margin-left: 15px;
            }
          }
          .itme_r{
            font-size: 14px;
            font-weight: 400;
            color: #B1B1B1;
          }
        }
     }
     .order_detail{
      width: 100%;
      border-left: 10px solid #F1F2F5;
      background: #fff;
      box-sizing: border-box;
      .detail_title{
        width: 100%;
        height: 44px;
        background: #FAFAFA;
        padding-left: 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        color: #B1B1B1;
      }
      
      
     }
   }
  }
</style>