zhywpt-sp/pages/order/components/popup-active-order.vue

<template>
	<view class="main">
		<view class="hint">{{content}}</view>
		<view class="btns as-layout-horizontal">
			<view class="btn-grey" @click="emit('cancel')">取消</view>
			<view class="btn-green" @click="emit('confirm')">确定</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const emit = defineEmits(["cancel","confirm"])
	
	defineProps({
		content:{
			type:String,
			default:''
		}
	})
</script>

<style lang="scss" scoped>
	.main{
		width: 530rpx;
		background-color: white;
		padding: 56rpx 45rpx 40rpx;
		border-radius: 20rpx;
		
		.hint{
			font-size: 32rpx;
			color: #333333;
			line-height: 50rpx;
			letter-spacing: 2rpx;
			text-align: center;
		}
		.btns{
			margin: 40rpx 20rpx 0rpx;
			justify-content: space-between;
			
			.btn-grey{
				border-radius: 40rpx;
				width: 188rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #F7F7F7;
				border: 1rpx solid #DCDCDC;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
			}
			.btn-green{
				border-radius: 40rpx;
				width: 188rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #00B38B;
				font-size: 32rpx;
				color: #ffffff;
				text-align: center;
			}
		}
	}
</style>