no message

src/components/Home.vue

@@ -20,9 +20,101 @@
           </div>
         </el-col>
     </el-row>
-    <!-- 发起配送 -->
+      <!-- 发起配送 -->
     <send-order-popup ref="sendOrderPopup"></send-order-popup>
-</div>
+    <el-row :gutter="10" 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">默认按钮</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>
+          <div class="detail_cont">
+            <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>
+  </div>
 </template>
 
 <script>
@@ -159,5 +251,204 @@
       }
     }
    }
+   .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%;
+      
+      background: #fff;
+      .detail_title{
+        width: 346px;
+        height: 44px;
+        background: #FAFAFA;
+        padding-left: 16px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 600;
+        color: #B1B1B1;
+      }
+      .detail_cont{
+        width: 100%;
+        padding: 16px;
+        box-sizing: border-box;
+        .detail_title2{
+          width: 100%;
+          font-size: 12px;
+          font-weight: 600;
+          color: #777777;
+          margin-bottom: 15px;
+        }
+        .shop_detail{
+          width: 100%;
+          display: flex;
+          margin-bottom: 10px;
+          img{
+            width: 47px;
+            height: 47px;
+            border-radius: 4px 4px 4px 4px;
+            margin-right: 12px;
+          }
+          .info{
+            flex-grow: 1;
+            display: flex;
+            justify-content: space-between;
+            .shop_title{
+              width: 70%;
+              font-size: 14px;
+              font-weight: 500;
+              color: #333333;
+              line-height: 18px;
+            }
+            .shop_num{
+              color: #B1B1B1;
+            }
+          }
+        }
+        .detail_ine{
+          width: 100%;
+          height: 1px;
+          border-top: 2px dotted #F0F0F0;
+          margin: 16px 0;
+        }
+        .info2{
+          width: 100%;
+          display: flex;
+          .title{
+            font-size: 14px;
+            font-weight: 400;
+            width: 80px;
+            color: #B1B1B1;
+          }
+          .cont{
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+          }
+          .cont2{
+            color: #FC7200;
+          }
+        }
+        .info3{
+          margin-top: 10px;
+        }
+        .info4{
+          display: flex;
+          justify-content: space-between;
+        }
+        .btns{
+          margin-top: 30px;
+          .btn{
+            background: #FC7200;
+            border-color: #FC7200;
+            color: #FFF;
+          }
+        }
+      }
+      
+     }
+   }
   }
 </style>