默认提交

+
+export default {
+	props: {
+		// 是否显示组件
+		visible: {
+			type: Boolean,
+			default: true,
+		},
+		// 标题名称 需要再 assets/images/common/ 目录下添加图标
+		icon: {
+			type: String,
+			default: "succ",
+		},
+		// 文案
+		content: {
+			type: String,
+			default: "",
+		},
+		// 取消按钮回调方法
+		close: {
+			type: Function,
+			default: null
+		},
+		// 点击蒙层回调方法
+		overlay: {
+			type: Function,
+			default: null
+		}
+	},
+	data() {
+		return {
+			key: 'value'
+		}
+	},
+	components: {},
+	computed: {
+		locale() {
+			return this.$i18n.locale || 'tc';
+		},
+	},
+	methods: {
+		// 点击关闭
+		onCloseHandler() {
+			if (this.close) {
+				this.close();
+			}
+		},
+		// 点击蒙层
+		onOverLayHandler() {
+			if (this.overlay) {
+				this.overlay();
+			}
+		},
+		initData() {}
+	},
+	mounted() {},
+	created() {}
+}

+@import '@/styles/_support';
+
+
+.comp {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5000;
+  width: 100%;
+  height: 100%;
+  @extend .fcc;
+  text-align: center;
+  font-size: 28px;
+}
+
+.hide {
+  display: none;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #000000, $alpha: 0.7);
+}
+
+.border {
+  position: relative;
+  @extend .bb;
+  @extend .fcc;
+  padding: 2px;
+  background-image: linear-gradient(to right, #ffb31d, #f15907);
+  border-radius: 20px;
+}
+
+.modal {
+  position: relative;
+  @extend .bb;
+  width: 1000px;
+  border-radius: 20px;
+  background-color: #ffffff;
+
+  .content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 162px 100px;
+    max-height: 534px;
+
+    .info-icon {
+      width: 210px;
+      min-width: 210px;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .message {
+      margin-left: 48px;
+      font-weight: bold;
+      color: $cOrange2;
+      display: inline-block;
+      height: 100%;
+      min-width: 100px;
+      text-align: justify;
+      text-align-last: left;
+
+      span {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+
+    .lsp {
+      line-height: 1.4;
+      letter-spacing: 0.7px;
+    }
+  }
+
+
+}
+
+.close {
+  position: absolute;
+  right: -55px;
+  top: -15px;
+  cursor: pointer;
+
+  img {
+    position: relative;
+    width: 30px;
+    height: 30px;
+  }
+}
+
+@media (max-width: 1150px) {
+  .close {
+    right: -15px;
+    top: -55px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .border {
+    width: 90%;
+  }
+}
+
+@media (max-width: 768px) {
+  .border {
+    width: 80%;
+
+    .modal {
+      .content {
+        flex-wrap: wrap;
+        padding: 32px 16px;
+
+        .info-icon {
+          margin: 0 auto;
+          width: 32%;
+          min-width: auto;
+        }
+
+        .message {
+          margin: 16px auto 0;
+          font-size: 20px;
+        }
+      }
+    }
+
+  }
+}

+
+<template>
+	<div class="comp" :class="{'hide' : !visible }">
+		<div @click="onOverLayHandler()" class="overlay"></div>
+		<div class="border">
+			<div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div>
+			<div class="modal">
+				<div class="content">
+					<div class="info-icon">
+						<img src="@/assets/images/clarms/info.png">
+					</div>
+					<div class="message" :class="{'lsp':locale != 'en'}">
+						{{content}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script src="./modal2-comp.js"></script>
+<style lang="scss" scoped>
+@import "./modal2-comp.scss";
+</style>

@@ -14,6 +14,9 @@ import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue';
 import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue';
 import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue';
 import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue';
+import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue';
+import ModalComp from '@/components/modal-comp/modal-comp.vue';
+
 
 // 用户没有登录
 // 		校验成功
@@ -35,14 +38,17 @@ export default {
 			cid: "",
 			// 可以理赔的客户信息
 			customerList: [],
-			modelType: "1"
+			modelType: "1",
+			modalVisiable: true
 		}
 	},
 	components: {
 		ClarmsVerifyForm,
 		ClarmsMaterial,
 		ClarmsModalOne,
-		ClarmsModalTwo
+		ClarmsModalTwo,
+		ModalComp,
+		Modal2Comp
 	},
 	computed: {
 		...mapState({
@@ -167,5 +173,5 @@ export default {
 		this.initData();
 
 	},
-	created() { }
+	created() {}
 }

@@ -33,6 +33,8 @@
 			</div>
 
 		</div>
+		<!-- 理赔/产品页模态窗 样式 -->
+		<modal2-comp :visible="modalVisiable" :close="()=>{modalVisiable = false}" :content="''"></modal2-comp>
 	</div>
 
 </template>