zhywpt-sp/components/tips/tips.vue

<template>
	<view class="bg-tips" v-if="props.showTips">
		<view class="tips">
			<view class="top-content">
				<image class="tips-image" :src="`${$imgUrl}common/tips.png`" mode=""></image>
				<text class="tishi">提示</text>
			</view>
			<view class="title">服务开通中，敬请期待！</view>
			<view>
				<text class="cancle" @click="emits('cancle', false)">取消</text>
				<text class="sure" @click="emits('cancle', false)">确定</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const emits = defineEmits(["cancle"]);
	const props = defineProps({
		showTips: {
			type: Boolean,
			default: false
		}
	})
</script>

<style scoped lang="scss">
	.bg-tips{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		top:0;
		z-index: 99999;
		.tips{
			width: 60%;
			height: 360rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			padding: 70rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.top-content{
				display: flex;
				align-items: center;
			}
			.tips-image{
				width: 40rpx;
				height: 40rpx;
			}
			.tishi{
				font-weight: 500;
				font-size: 36rpx;
				color: #01243A;
				margin-left: 10rpx;
			}
			.title{
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
			}
			.cancle{
				width: 200rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				color: black;
				display: inline-block;
				border: 1rpx solid #004576;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			.sure{
				width: 200rpx;
				height: 80rpx;
				background: linear-gradient( to right, #01243A, #004576);
				border-radius: 40rpx;
				display: inline-block;
				color: white;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}
	}
	
</style>