assess_xg_total_process_master_h5/pages/test/luckyDraw/LuckyDrawEventsDetail.vue

<template>
	<view>
		<view class="">
			<cu-custom :isBack="true" bgColor="bg-gradual-blue">
				<block slot="backText">返回</block>
				<block slot="content">活动详情</block>
				<block slot="right" >
					<view  @click="bm()">
						报名
					</view>
				</block>
			</cu-custom>
		</view>
		<view class="cu-card article">
			<view class="cu-item shadow">
				<view class="title">
					<view class="text-center"> 活动名称三 </view>
				</view>

				<view class="content">

					<view class="desc">
						<view class="text-content"> 活动详情活动详情活动详情活动详情活动详情活动详情活动详 </view>
						<!-- <view>
							<view class="cu-tag bg-grey light sm ">未开始</view>
						</view> -->
					</view>

				</view>
				<view class="content">
					<image style="width: 100%;" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg"
						mode="widthFix"></image>
				</view>
				
				<view class=" padding-lr" :key="'00'" :id="'00'">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-present text-red"></text>
							<text class="text-red" style="margin-left: 2upx;" @click="toLottery()">
								点击查看中奖信息
							</text>
						</view>
					</view>
				</view>
				<view class="padding-top padding-lr" v-for="(item,index) in awards" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-present text-green"></text>
							<text class="text-green" style="margin-left: 2upx;">
								{{item.name}}
							</text>
							<text class="text-blue" style="margin-left: 20upx;">
								{{item.prizeName}}
							</text>
							<view class="action" style="margin-left: 20upx;">
								<view class="cu-tag round bg-green sm">{{item.number}}件</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				awards: [{
						name: '奖项一',
						number: 15,
						prizeName: 'iphone14 pro'
					},
					{
						name: '奖项二',
						number: 20,
						prizeName: '金士顿电饭锅'
					},
					{
						name: '奖项三',
						number: 25,
						prizeName: '海盗船电动牙刷'
					}
				]
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let list = [{}];
			for (let i = 0; i < 3; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
				list[i].id = i;
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			bm() {
				uni.navigateTo({
				  url: '/pages/test/luckyDraw/LuckyDrawRegister'
				})
			},
			toLottery() {
				uni.navigateTo({
				  url: '/pages/test/luckyDraw/LuckyDrawLottery'
				})
			}
		},
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>