feat:提交代码

src/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 style="height: 800px;">我是首页</h3>
+    <h3>我是首页</h3>
     <div>
       <div>
         <button type="button" @click.stop="$router.push('helloWorld')">添加规则</button>
@@ -17,10 +17,13 @@
         </div>
       </div>
     </div>
+    <!-- 发起配送 -->
+    <send-order-popup ref="sendOrderPopup"></send-order-popup>
   </div>
 </template>
 
 <script>
+  import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
   export default {
     data() {
       return {
@@ -29,9 +32,12 @@
         ]
       }
     },
+    components: {
+      sendOrderPopup
+    },
     methods: {
       deleteItem(index) {
-        this.ruleList.splice(1, index)
+        this.$refs.sendOrderPopup.init();
       },
       saveRule(t, i) {
         let obj = {

src/components/orderComponents/sendOrderPopup.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-dialog width="700px" :show-close="false" destroy-on-close :visible.sync="dialogTableVisible">
+    <div class="send-content">
+      <div class="top-juhe">
+        <div class="left-content">
+          <div class="juhe-icon">
+            <img src="../../../static/image/juhe-icon.png" />
+          </div>
+          <div>
+            <div class="juhe-title">聚合配送</div>
+            <div class="quan-wang">
+              <span>全网运力推单</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-content">
+          <div class="right-title">
+            预估<span>7.8~10.8</span>元
+          </div>
+          <div>优惠合计2元</div>
+        </div>
+        <img src="../../../static/image/choose-icon.png" class="choose-icon" />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogTableVisible: true,
+      }
+    },
+    methods: {
+      init() {
+        this.dialogTableVisible = true;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .el-dialog__header {
+    padding: 0;
+  }
+  /deep/ .el-dialog__body {
+    padding: 22px !important;
+  }
+  .send-content {
+    border-radius: 10px;
+  }
+  .top-juhe {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    position: relative;
+    border: 1px solid #999;
+    border-radius: 8px;
+    overflow: hidden;
+    .left-content {
+      display: flex;
+      .juhe-icon {
+        align-self: center;
+        font-size: 0;
+        width: 41px;
+        height: 40px;
+        margin-right: 12px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .juhe-title {
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0D1E40;
+      }
+      .quan-wang {
+        margin-top: 8px;
+        span {
+          display: inline-block;
+          padding: 0px 4px;
+          border: 1px solid #FC7200;
+          border-radius: 2px;
+          color: #FC7200;
+          font-size: 14px;
+        }
+      }
+    }
+    .right-content {
+      .right-title {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0D1E40;
+        span {
+          font-size: 16px;
+          color: #FC7200;
+        }
+      }
+    }
+    .choose-icon {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+</style>