no message

src/components/Home.vue

@@ -24,94 +24,12 @@
     <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>
-            <el-button size='small' class="btn" @click.stop="sendOrder">默认按钮</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>
+        <order-list></order-list>
       </el-col>
       <el-col :span="6">
         <div class="order_detail">
           <div class="detail_title">订单详情</div>
           <order-detail :tabNum='tab_ac'></order-detail>
-          <div class="detail_cont" v-if="false">
-            <div class="detail_title2">商品详情</div>
-            <div class="shop_detail" v-for="(item,i) in 2" :key="i">
-              <img src="" alt="" srcset="">
-              <div class="info">
-                <div class="shop_title">6英寸可可奥利奥、抹茶奶油蛋糕2选1</div>
-                <div class="shop_num">x1</div>
-              </div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="info2">
-              <div class="title">用户备注：</div>
-              <div class="cont">蜡烛需要20岁，要个王冠的帽子，顾客需要餐具。</div>
-            </div>
-             <div class="info2 info3">
-              <div class="title">发单备注：</div>
-              <div class="cont">切勿挤压堆放，一定要联系上收件人取货！</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">发票信息</div>
-            <div class="info2 info4">
-              <div class="title">发票抬头：</div>
-              <div class="cont">苏州盈点点信息科技有限公司</div>
-            </div>
-             <div class="info2 info4">
-              <div class="title">税号：</div>
-              <div class="cont">91320452MA1M15M85F</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">顾客信息</div>
-            <div class="info2 info4">
-              <div class="title">姓名：</div>
-              <div class="cont">苏州盈点点信息科技有限公司</div>
-            </div>
-             <div class="info2 info4">
-              <div class="title">隐私号：</div>
-              <div class="cont">91320452MA1M15M85F</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">订单金额</div>
-            <div class="info2 info4">
-              <div class="title">商品金额：</div>
-              <div class="cont">¥310.00</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">订单信息</div>
-            <div class="info2 info4">
-              <div class="title">送达时间：</div>
-              <div class="cont cont2">立即送达</div>
-            </div>
-            <div class="info2 info4">
-              <div class="title">创建时间：</div>
-              <div class="cont">2021/09/01  15:16:08</div>
-            </div>
-            <div class="info2 info4">
-              <div class="title">订单编号：</div>
-              <div class="cont">210812134713235749</div>
-            </div>
-            <div class="btns">
-              <el-button size='small'>修改订单</el-button>
-              <el-button size='small'>忽略订单</el-button>
-              <el-button size='small'>补打发票</el-button>
-              <el-button size='small' class="btn">发起配送</el-button>
-            </div>
-          </div>
         </div>
       </el-col>
     </el-row>
@@ -120,8 +38,9 @@
 
 <script>
   import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
-  import orderDetail from './orderComponents/orderDetail'
-import OrderDetail from './orderComponents/orderDetail.vue';
+  import OrderDetail from './orderComponents/orderDetail.vue';
+  import orderList from './orderComponents/orderList'
+import OrderList from './orderComponents/orderList.vue';
   export default {
     data() {
       return {
@@ -140,7 +59,8 @@ import OrderDetail from './orderComponents/orderDetail.vue';
     },
     components: {
       sendOrderPopup,
-        OrderDetail
+        OrderDetail,
+        OrderList
     },
     methods: {
       sendOrder() {
@@ -261,112 +181,9 @@ import OrderDetail from './orderComponents/orderDetail.vue';
    .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%;
-<<<<<<< HEAD
-      border-left: 10px solid #F1F2F5;
-=======
-
->>>>>>> dev_zlx
       background: #fff;
       box-sizing: border-box;
       .detail_title{
@@ -381,10 +198,6 @@ import OrderDetail from './orderComponents/orderDetail.vue';
         font-weight: 600;
         color: #B1B1B1;
       }
-<<<<<<< HEAD
-      
-      
-=======
       .detail_cont{
         width: 100%;
         padding: 16px;
@@ -464,7 +277,6 @@ import OrderDetail from './orderComponents/orderDetail.vue';
         }
       }
 
->>>>>>> dev_zlx
      }
    }
   }

src/components/orderComponents/orderList.vue

@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <div class="order_item" v-for="(item,i) in 5" :key="i">
+          <div class="order_item_header">
+           <div class="order_item_header_l">
+              <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>
+              <div class="sign_d">预约 09/10 17:30自动发起配送</div>
+           </div>
+           <div class="order_item_header_r">
+             <span class="header_r">已发单1分钟</span>
+             <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
+           </div>
+            
+          </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>
+    </div>
+    
+</template>
+    
+<script>
+export default {
+  name: 'OrderList',
+  data () {
+    return {
+      
+    }
+  },
+  props:{
+    tabNum: Number,
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped="scoped">
+.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;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-right: 10px;
+          box-sizing: border-box;
+          .order_item_header_l,.order_item_header_r{
+            display: flex;
+            align-items: center;
+          }
+          .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;
+          }
+          .sign_d{
+            height: 20px;
+            border: 1px solid #F74141;
+            background: #FFF5F5;
+            border-radius: 2px;
+            text-align: center;
+            line-height: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #F74141;
+            margin-left: 10px;
+            padding: 0 7px;
+          }
+          .header_r{
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            margin-right: 22px;
+          }
+          .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;
+          }
+        }
+     }
+</style>