fix:订单详情组件

src/components/Home.vue

@@ -22,7 +22,7 @@
     </el-row>
       <!-- 发起配送 -->
     <send-order-popup ref="sendOrderPopup"></send-order-popup>
-    <el-row :gutter="10" class="order_list">
+    <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">
@@ -31,7 +31,7 @@
             <span class="name">礼颂至品（娄葑店）</span>
             <div class="sign_time">17:30前送达</div>
             <div class="sign_txt">立即送达</div>
-            <el-button size='small' class="btn">默认按钮</el-button>
+            <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
           </div>
           <div class="order_item_cont">
             <div class="itme_l">
@@ -45,71 +45,7 @@
       <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>
+          <order-detail></order-detail>
           
         </div>
       </el-col>
@@ -119,6 +55,8 @@
 
 <script>
   import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
+  import orderDetail from './orderComponents/orderDetail'
+import OrderDetail from './orderComponents/orderDetail.vue';
   export default {
     data() {
       return {
@@ -136,7 +74,8 @@
       }
     },
     components: {
-      sendOrderPopup
+      sendOrderPopup,
+        OrderDetail
     },
     methods: {
       deleteItem(index) {
@@ -355,10 +294,11 @@
      }
      .order_detail{
       width: 100%;
-      
+      border-left: 10px solid #F1F2F5;
       background: #fff;
+      box-sizing: border-box;
       .detail_title{
-        width: 346px;
+        width: 100%;
         height: 44px;
         background: #FAFAFA;
         padding-left: 16px;
@@ -369,84 +309,7 @@
         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;
-          }
-        }
-      }
+      
       
      }
    }

src/components/orderComponents/orderDetail.vue

@@ -0,0 +1,258 @@
+<template>
+    <div>
+        <!-- 新订单 -->
+        <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 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="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">18015468888</div>
+            </div>
+            <div class="info2 info4">
+                <div class="title">隐私号：</div>
+                <div class="cont">13000957421转1157</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="info2 info4">
+                <div class="title">顾客实付：</div>
+                <div class="cont">¥310.00</div>
+            </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">2021/09/09  20:00</div>
+            </div>
+            <div class="info2 info4">
+                <div class="title">送达时间：</div>
+                <div class="cont">2021/09/10  20:00</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">32866082128077024</div>
+            </div>
+            <div class="info2 info4">
+                <div class="title">订单编号：</div>
+                <div class="cont">210812134713235749</div>
+            </div>
+            <div class="btns">
+                <div class="btn_bot">
+                    <!-- <el-dropdown trigger="click"> -->
+                    <el-dropdown>
+                        <span class="el-dropdown-link">更多</span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item><span style="color:#FC7200;">补打发票</span></el-dropdown-item>
+                            <el-dropdown-item>忽略订单</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
+                <el-button size='small'>忽略订单</el-button>
+                <el-button size='small'>补打发票</el-button>
+                <el-button size='small' class="btn">发起配送</el-button>
+            </div>
+        </div>
+    </div>
+    
+</template>
+    
+<script>
+export default {
+  name: 'OrderDetail',
+  data () {
+    return {
+      
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped="scoped">
+.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;
+        margin-bottom: 5px;
+        .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;
+        display: flex;
+        justify-content: space-between;
+        .btn{
+        background: #FC7200;
+        border-color: #FC7200;
+        color: #FFF;
+        }
+        .btn_bot{
+           width: 80px;
+           display: flex;
+           align-items: center;
+           justify-content: center;
+           color: #888888;
+          
+           
+        }
+    }
+}
+</style>

src/views/home.vue

@@ -73,6 +73,7 @@
     overflow-y: auto;
     background-color: #F1F2F5;
     padding: 10px;
+    min-width: 1550px;
   }
 
   .header-button {