school_uni/package2/myCenter/myFriend.vue

<template>
	<view class="lottery-page">
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="nav-back" @tap="back">‹</view>
			<view class="nav-tabs">
				<text class="nav-tab active">抽奖</text>
				<text class="nav-tab">开奖记录</text>
				<text class="nav-tab">分享</text>
			</view>
		</view>

		<view class="machine-wrap">
			<view class="time-tag">本期开奖时间 2026.03.18 20:00</view>
			<view class="machine-light left-light"></view>
			<view class="machine-light right-light"></view>

			<view class="machine">
				<view class="machine-ear left"></view>
				<view class="machine-ear right"></view>
				<view class="screen">
					<view class="prize-grid">
						<view class="prize-cell" v-for="item in prizeBoxes" :key="item">
							<view class="box-icon">
								<view class="box-top"></view>
								<view class="box-body">{{ item }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="draw-button" @tap="draw">我要抽奖</view>
				<view class="machine-base">
					<view class="countdown-card">
						<view class="card-title">保护中 23:12:06</view>
						<view class="card-sub">80户儿保站大奖池</view>
						<view class="cash-row">
							<view class="coin">奖</view>
							<view>
								<view class="small-text">我的奖金</view>
								<view class="cash">¥30</view>
							</view>
						</view>
					</view>
					<view class="ticket-card">
						<view class="join-text">投入 <text>3</text> 张券参与中</view>
						<view class="ticket">我的抽奖券 <text>12</text></view>
					</view>
				</view>
				<view class="lever">
					<view class="lever-stick"></view>
					<view class="lever-ball"></view>
				</view>
			</view>
		</view>

		<view class="quick-area">
			<view class="benefit">
				<view class="benefit-bubble">优秀商品</view>
			</view>
			<view class="quick-item" v-for="item in quickEntries" :key="item.name" @tap="noop">
				<view class="quick-icon">
					<text>{{ item.icon }}</text>
				</view>
				<view class="quick-name">{{ item.name }}</view>
			</view>
		</view>

		<view class="amount-card">
			<view class="amount-title">奖池金额</view>
			<view class="amount-panel">¥ 737489</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				prizeBoxes: ['01', '02', '03', '04', '05', '06', '07', '08', '09'],
				quickEntries: [{
					name: '拿来主义',
					icon: '拿'
				}, {
					name: '排行榜',
					icon: '榜'
				}, {
					name: '道具',
					icon: '具'
				}]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			draw() {
				uni.showToast({
					title: '抽奖券准备中',
					icon: 'none'
				})
			},
			noop() {}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff4d8;
	}

	.lottery-page {
		min-height: 100vh;
		padding: 0 28rpx 48rpx;
		box-sizing: border-box;
		color: #fff;
		background:
			radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.72) 0, rgba(255, 255, 255, 0) 210rpx),
			radial-gradient(circle at 86% 26%, rgba(255, 116, 135, 0.24) 0, rgba(255, 116, 135, 0) 260rpx),
			linear-gradient(180deg, #ffbf5f 0%, #ff7c6e 46%, #8f63ff 100%);
		overflow: hidden;
		position: relative;
	}

	.lottery-page::before {
		content: '';
		width: 520rpx;
		height: 520rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.14);
		position: absolute;
		right: -260rpx;
		top: 160rpx;
	}

	.lottery-page::after {
		content: '';
		width: 360rpx;
		height: 360rpx;
		border-radius: 50%;
		background: rgba(255, 231, 93, 0.22);
		position: absolute;
		left: -190rpx;
		bottom: 120rpx;
	}

	.nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 5;
	}

	.nav-back {
		width: 54rpx;
		height: 54rpx;
		line-height: 48rpx;
		font-size: 56rpx;
		font-weight: 300;
		color: #fff;
		text-shadow: 0 4rpx 10rpx rgba(136, 55, 36, 0.24);
	}

	.nav-tabs {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 44rpx;
		font-size: 26rpx;
		font-weight: 700;
	}

	.nav-tab {
		opacity: 0.92;
		color: #fff;
		text-shadow: 0 4rpx 10rpx rgba(136, 55, 36, 0.22);
	}

	.nav-tab.active {
		font-size: 30rpx;
		opacity: 1;
		position: relative;
	}

	.nav-tab.active::after {
		content: '';
		width: 44rpx;
		height: 8rpx;
		border-radius: 999rpx;
		background: #fff15f;
		position: absolute;
		left: 50%;
		bottom: -16rpx;
		transform: translateX(-50%);
	}

	.machine-wrap {
		margin-top: 18rpx;
		position: relative;
	}

	.time-tag {
		width: fit-content;
		margin: 0 auto -8rpx;
		padding: 8rpx 18rpx;
		border-radius: 8rpx;
		background: linear-gradient(135deg, #7a3cff 0%, #ff5c88 100%);
		border: 2rpx solid rgba(255, 255, 255, 0.74);
		font-size: 18rpx;
		font-weight: 800;
		position: relative;
		z-index: 3;
	}

	.machine-light {
		width: 70rpx;
		height: 34rpx;
		border-radius: 50%;
		background: linear-gradient(90deg, rgba(255, 241, 95, 0.12), rgba(255, 255, 255, 0.88));
		position: absolute;
		top: 6rpx;
		filter: blur(1rpx);
		animation: lightWiggle 2.4s ease-in-out infinite;
	}

	.left-light {
		left: 104rpx;
		transform: rotate(42deg);
	}

	.right-light {
		right: 98rpx;
		transform: rotate(-36deg);
		animation-delay: 0.45s;
	}

	.machine {
		width: 560rpx;
		margin: 0 auto;
		padding-top: 20rpx;
		position: relative;
	}

	.machine-ear {
		width: 46rpx;
		height: 220rpx;
		border-radius: 36rpx;
		background: linear-gradient(180deg, #ffd56a, #ff7d47);
		position: absolute;
		top: 118rpx;
		z-index: 0;
	}

	.machine-ear.left {
		left: -18rpx;
	}

	.machine-ear.right {
		right: -18rpx;
	}

	.screen {
		width: 448rpx;
		height: 350rpx;
		margin: 0 auto;
		padding: 38rpx 32rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		background: linear-gradient(180deg, #fff5c8 0%, #ffcf67 100%);
		border: 8rpx solid #fff0a6;
		box-shadow:
			inset 0 0 0 6rpx rgba(255, 120, 79, 0.34),
			0 24rpx 36rpx rgba(136, 55, 36, 0.25);
		position: relative;
		z-index: 1;
	}

	.screen::before {
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background:
			linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%),
			radial-gradient(circle at 30% 10%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
		animation: screenShine 3.6s ease-in-out infinite;
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
	}

	.prize-grid {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		z-index: 2;
	}

	.prize-cell {
		width: 33.33%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 8rpx solid rgba(255, 255, 255, 0.48);
		box-sizing: border-box;
	}

	.box-icon {
		width: 62rpx;
		height: 64rpx;
		position: relative;
		animation: boxFloat 2.5s ease-in-out infinite;
	}

	.prize-cell:nth-child(2n) .box-icon {
		animation-delay: 0.35s;
	}

	.box-top {
		width: 56rpx;
		height: 18rpx;
		border-radius: 6rpx;
		background: linear-gradient(135deg, #fff8db, #ff9d5d);
		transform: skewX(-18deg);
		position: absolute;
		top: 0;
		left: 4rpx;
	}

	.box-body {
		width: 58rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 8rpx;
		background: linear-gradient(135deg, #fff7d8 0%, #ff6d8a 100%);
		color: #fff;
		font-size: 20rpx;
		font-weight: 900;
		position: absolute;
		left: 2rpx;
		bottom: 0;
		box-shadow: inset -6rpx -6rpx 12rpx rgba(129, 36, 54, 0.12), 0 8rpx 14rpx rgba(129, 36, 54, 0.14);
	}

	.draw-button {
		width: 440rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		margin: -10rpx auto 0;
		border-radius: 18rpx 18rpx 0 0;
		background: linear-gradient(180deg, #ff6f5f 0%, #e73563 100%);
		font-size: 34rpx;
		font-weight: 900;
		letter-spacing: 4rpx;
		position: relative;
		z-index: 2;
		box-shadow: 0 16rpx 28rpx rgba(181, 39, 78, 0.34), inset 0 6rpx 0 rgba(255, 255, 255, 0.2);
		animation: drawPulse 1.8s ease-in-out infinite;
	}

	.machine-base {
		width: 560rpx;
		height: 180rpx;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: linear-gradient(180deg, #ffbc57 0%, #ff7b52 100%);
		border-bottom: 10rpx solid #d74c3b;
		display: flex;
		gap: 20rpx;
		position: relative;
		z-index: 1;
	}

	.machine-base::before {
		content: '';
		width: 100%;
		height: 16rpx;
		background: repeating-radial-gradient(circle, #fff7b3 0 4rpx, transparent 5rpx 18rpx);
		position: absolute;
		left: 0;
		top: 12rpx;
		opacity: 0.9;
	}

	.countdown-card,
	.ticket-card {
		flex: 1;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 0.88);
		color: #7a3a17;
		box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.7), 0 8rpx 18rpx rgba(148, 55, 33, 0.12);
		position: relative;
		z-index: 2;
	}

	.countdown-card {
		padding: 8rpx 10rpx;
		box-sizing: border-box;
	}

	.card-title {
		font-size: 22rpx;
		font-weight: 900;
	}

	.card-sub,
	.small-text,
	.join-text {
		font-size: 16rpx;
		color: rgba(122, 58, 23, 0.68);
	}

	.cash-row {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
	}

	.coin {
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		margin-right: 10rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #fff4a8, #ff8a5d);
		color: #fff;
		font-weight: 900;
	}

	.cash {
		font-size: 28rpx;
		font-weight: 900;
	}

	.ticket-card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.join-text text,
	.ticket text {
		font-weight: 900;
		color: #e73563;
	}

	.ticket {
		margin-top: 18rpx;
		padding: 12rpx 18rpx;
		border-radius: 8rpx;
		background: linear-gradient(135deg, #fff7d8, #fff);
		color: #7a3a17;
		font-size: 22rpx;
		font-weight: 900;
	}

	.lever {
		width: 110rpx;
		height: 150rpx;
		position: absolute;
		right: -28rpx;
		bottom: 68rpx;
		z-index: 3;
	}

	.lever-stick {
		width: 14rpx;
		height: 96rpx;
		border-radius: 999rpx;
		background: linear-gradient(180deg, #7a3cff, #3b1a9f);
		transform: rotate(-28deg);
		position: absolute;
		left: 38rpx;
		bottom: 16rpx;
	}

	.lever-ball {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #fff176, #ff6d8a);
		position: absolute;
		top: 0;
		right: 24rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.22);
	}

	.quick-area {
		width: 100%;
		margin: 26rpx auto 0;
		display: flex;
		justify-content: space-around;
		position: relative;
	}

	.benefit {
		position: absolute;
		right: 2rpx;
		top: -38rpx;
	}

	.benefit-bubble {
		padding: 12rpx 14rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.86);
		color: #e73563;
		font-size: 20rpx;
		font-weight: 900;
	}

	.quick-item {
		width: 30%;
		text-align: center;
	}

	.quick-icon {
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto 14rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #fff 0%, #fff6d8 100%);
		box-shadow: 0 14rpx 24rpx rgba(122, 58, 23, 0.18);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #e73563;
		font-size: 34rpx;
		font-weight: 900;
	}

	.quick-name {
		font-size: 28rpx;
		font-weight: 900;
		color: #fff;
		text-shadow: 0 4rpx 10rpx rgba(122, 58, 23, 0.24);
	}

	.amount-card {
		margin-top: 42rpx;
		padding: 16rpx 18rpx 22rpx;
		border-radius: 28rpx;
		background: linear-gradient(180deg, #fff 0%, #fff3cf 100%);
		box-shadow: 0 14rpx 0 rgba(191, 75, 49, 0.22), inset 0 0 0 6rpx rgba(255, 177, 87, 0.28);
		color: #7a3a17;
		position: relative;
	}

	.amount-card::before {
		content: 'CENTRE  POO';
		width: 100%;
		text-align: center;
		position: absolute;
		left: 0;
		top: -6rpx;
		color: rgba(255, 122, 82, 0.1);
		font-size: 52rpx;
		font-weight: 900;
		letter-spacing: 8rpx;
	}

	.amount-title {
		text-align: center;
		font-size: 24rpx;
		font-weight: 900;
		position: relative;
		z-index: 1;
	}

	.amount-panel {
		height: 96rpx;
		line-height: 96rpx;
		margin-top: 10rpx;
		border-radius: 10rpx;
		border: 4rpx solid #ffd171;
		background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
		text-align: center;
		font-size: 48rpx;
		font-weight: 900;
		position: relative;
		z-index: 1;
	}

	@keyframes lightWiggle {
		0%,
		100% {
			opacity: 0.55;
		}

		50% {
			opacity: 1;
		}
	}

	@keyframes screenShine {
		0%,
		100% {
			opacity: 0.55;
			transform: translateX(-24rpx);
		}

		50% {
			opacity: 1;
			transform: translateX(24rpx);
		}
	}

	@keyframes boxFloat {
		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-8rpx);
		}
	}

	@keyframes drawPulse {
		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.03);
		}
	}
</style>