ec.uniapp-master/pages/index/activity/detail.vue

<template>
	<view>
		<lf-nav title="活动详情" :showIcon="true"></lf-nav>
		<view class="content">
			<view class="title">海蓝之谜美颜会 9月15日场10:30场</view>
			<view class="level2-title">会员尊享美颜会</view>
			<view class="level3-title">
				<text>活动时间：</text>
				<text class="color1">2021年9月15日 10:30-12:00场</text>
			</view>
			<view class="level3-title">
				<text>报名时间：</text>
				<text class="color2">即日起-9月12日24:00</text>
			</view>
			<view class="level3-title">
				<text>活动内容：</text>
				<text class="color2">美白课堂+现场DIY甜橙茶</text>
			</view>
			<view class="level3-title">
				<text>活动人数：</text>
				<text class="color2">5人</text>
			</view>
			<view class="level3-title">
				<text>活动报名：</text>
				<text class="color1">免费</text>
			</view>
			<view class="level3-title">
				<view>活动规则：</view>
				<view class="color2">
					<view>1、金卡及以上会员可免费报名参加，每个ID仅可报名一场活动（以每个第一次报名场次为准，超出报名次数不予审核通过）；</view>
					<view>2、报名成功后，店铺会在活动前一天联系您报名的手机号；</view>
					<view>3、如有疑问，请致电海蓝之谜店铺联系电话：0315-743843474</view>
				</view>
			</view>
			<button class="btn" 
				hover-class="lf-opacity" 
				:disabled="is_end" 
				:class="{'lf-opacity': is_end}"
				@click="submit">{{ is_end ? '名额已满' : '立即报名' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				is_end: false // 是否可报名，false为活动为结束可报名，否则不可报名
			}
		},
		onLoad(){
			
		},
		methods: {
			submit(){
				if(this.is_end) return;
				this.$url('/pages/index/activity/confirm');
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		width: 750rpx;
		height: max-content;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		.title{
			font-size: 36rpx;
			color: #222222;
			font-weight: bold;
			min-height: 100rpx;
		}
		.level2-title{
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
			margin-top: 20rpx;
		}
		.level3-title{
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #777777;
		}
		.btn{
			width: 550rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #15716E;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			margin-top: 60rpx;
		}
	}
	.color1{
		color: #F63434;
	}
	.color2{
		color: #222222;
	}
</style>