web-app-v1/components/show-modal.vue

<template>
	<view class="pop flexCC" v-if="showPop">
		<view class="pop_con">
			<image src="../static/icon/hint_icon.png" class="hint_icon"></image>
			<view class="title">温馨提醒</view>
			<view class="con">
				{{content}}
			</view>
			<view class="btn_box flexB">
				<view @click.stop="cancel" class="flexC">{{cancelText}}</view>
				<view @click.stop="confirm" class="flexC">{{confirmText}}</view>
			</view>
		</view>
		<!-- <text class="iconfont iconguanbi" @click.stop="close"></text> -->
	</view>
</template>

<script>
	export default {
		name: "hint-pop",
		props: {
			showPop: {
				type: Boolean,
				default: false
			},
			content: {
				type: String,
				default: '该收货人有多个未发货订单，是否一起发货？'
			},
			cancelText: {
				type: String,
				default: '不一起发货'
			},
			confirmText: {
				type: String,
				default: '一起发货'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			cancel() {
				this.$emit('cancel');
			},
			confirm() {
				this.$emit('confirm');
			},

		}
	}
</script>

<style lang="scss">
	.pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999999;

		.hint_icon {
			width: 183rpx;
			height: 135rpx;
			position: relative;
			margin-top: -85rpx;
		}

		.pop_con {
			width: 648rpx;
			height: 442rpx;
			background: #fff;
			border-radius: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 22rpx;
			}

			.con {
				min-height: 150rpx;
				margin: 20rpx 0 20rpx;
				font-size: 34rpx;
			}

			.btn_box {
				width: 100%;
				view {
					width: 270rpx;
					height: 88rpx;
					background: #FFF4F3;
					border: 2rpx solid #FB231F;
					border-radius: 44rpx;
					color:$base-color;
					font-size:32rpx;
				}

				view:last-child {
					background: $base-line-bg;
					color: #fff;
				}

			}

		}

		.iconfont {
			color: #fff;
			font-size: 60rpx;
			margin-top: 30rpx;
		}
	}
</style>