添加弹框

src/components/popUp/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="popUp_box" v-if="popUpShow">
+    <div class="popUp">
+      <div class="icon" @click="closePopUp">
+        <!-- <i class="el-icon-close"></i> -->
+         <img src="@/assets/img/close1.png" alt="" class="icon_close">
+      </div>
+      <img src="@/assets/img/ok.png" alt="" class="img_ok">
+      <div class="title">Information submitted successfully.</div>
+      <div class="text">
+        We will reply within ONE working day <br/>
+        or you can contact us by order@sanyoubio.com.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "popUp",
+  components: {
+  },
+  props: {
+    popUpShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    // 关闭弹窗
+    closePopUp() {
+      this.$emit("closePopUp")
+    }
+  },
+  created() {},
+  mounted() {}
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+  .popUp_box{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0,0,0,.5);
+    z-index: 99999;
+    .popUp{
+      width: 40%;
+      min-width: 670px;
+      position: relative;
+      background-color: #fff;
+      padding: 20px 20px 90px 20px;
+      border-radius: 10px;
+      .icon{
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        .icon_close{
+          width: 100%;
+        }
+      }
+      .img_ok{
+        display: block;
+        width: 88px;
+        margin:68px auto 0;
+      }
+      .title{
+        margin-top: 26px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 24px;
+        color: #000000;
+        line-height: 21px;
+        text-align: center;
+      }
+      .text{
+        margin-top: 40px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 18px;
+        color: #000000;
+        line-height: 30px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 751px) and (max-width: 1200px) {
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+}
+</style>

src/view/promotion/double.vue

@@ -2,7 +2,7 @@
   <div class="box">
     <div class="header-image">
       <img
-        src="@/assets/img/promotion/cn/banner2.png"
+        src="@/assets/img/promotion/en/holophyly.png"
         alt=""
         class="image"
       />
@@ -161,18 +161,22 @@
         </div>
       </div>
     </div>
+    <!-- 弹框 -->
+     <popUp :popUpShow="popUpShow" @closePopUp="closePopUp"></popUp>
   </div>
 </template>
 <script>
 import ApplySampleTable from "./Components/ApplySampleTable.vue";
-
+import popUp from "@/components/popUp/index.vue";
 export default {
   components: {
-    ApplySampleTable
+    ApplySampleTable,
+    popUp
   },
   name: "ApplySample",
   data() {
     return {
+      popUpShow: false, // 弹框
       from: {
         company: "",
         shippingAddress: "",
@@ -196,6 +200,10 @@ export default {
     };
   },
   methods: {
+    // 弹框
+    closePopUp() {
+      this.popUpShow = false;
+    },
     // 清空
     inputClear() {
       this.pageable.page = 0;
@@ -296,16 +304,17 @@ export default {
         };
         this.$api.post("inquiry/submitForm", params).then(res => {
           if (res.code === 0) {
-            this.$message({
-              message: this.$t("message.YourInformation"),
-              type: "success",
-              center: true,
-              duration: 6000,
-              customClass: "submit-success"
-            });
+            // this.$message({
+            //   message: this.$t("message.YourInformation"),
+            //   type: "success",
+            //   center: true,
+            //   duration: 6000,
+            //   customClass: "submit-success"
+            // });
             // this.from = {'company': '', 'address': '', 'name': '', 'phone': '', 'region': ''}
             // this.checkList = []
             // this.catalog = ''
+            this.popUpShow = true
           } else {
             this.$message.error(res.msg);
           }