You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
645 lines
12 KiB
645 lines
12 KiB
<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>
|