JiangxiMiniProgram/components/cancelReservation/cancelReservation.vue

<template>
	<view class="popupCon">
		<view class="h2">确定取消预约？</view>
		<!-- <view class="txt">某个训练预约取消规则</view> -->
		<view class="btnBox">
			<view class="btn" @click="$emit('popupBtnClick',0)">取消</view>
			<view class="btn right" @click="$emit('popupBtnClick',1)">确定</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.popupCon {
		width: 558rpx;
		background: linear-gradient(180deg, #C1DFFE 0%, #FFFFFF 20%);
		border-radius: 16rpx;

		.h2 {
			font-size: 36rpx;
			color: #333;
			font-weight: 600;
			text-align: center;
			padding: 60rpx 0 50rpx 0;
		}

		.txt {
			text-align: center;
			padding: 28rpx;
			color: #686B73;
		}

		.btnBox {
			width: 100%;
			height: 110rpx;
			border-top: 1rpx solid #E8E9EC;
			display: flex;
			padding: 30rpx 0;

			.btn {
				flex: 1;
				text-align: center;
				color: #ADADAD;
				font-size: 36rpx;
			}

			.btn.right {
				color: $themC;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 2rpx;
					height: 48rpx;
					background: #E8E9EC;
				}
			}
		}
	}
</style>