zhywpt-h5/components/Agreement.vue

<template>
	<div class="custom-popup" v-show="start">
		<div class="custom-popup-content">
			<div class="as-gravity-center as-bold" style="margin-top: 10px;">温馨提示</div>
			<div class="as-weight as-gravity-center as-layout-vertical" style="padding:20px;">
				<slot></slot>
			</div>
			<view class="as-line-h"></view>
			<div style="display: flex;flex-direction: row;height: 40px;">
				<text class="as-weight as-gravity-center as-bold" @click="disagree">不同意</text>
				<view class="as-line-w"></view>
				<text class="as-weight as-gravity-center as-bold" style="color: rgba(90, 110, 151);" @click="consent">同意</text>
			</div>
		</div>
	</div>
</template>
<script setup lang='ts'>
	defineProps({
		start: {
			type: Boolean,
			default: false
		}
	})
	
	const emit = defineEmits([
		"disagree",
		"consent"
	])
	
	//取消
	function disagree(){
		emit('disagree')
	}
	
	//确认
	function consent(){
		emit('consent')
	}
</script>
<style lang='scss' scoped>
	.custom-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	.custom-popup-content {
		display: flex;
		flex-direction: column;
		width: 280px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}
</style>