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.
109 lines
5.1 KiB
109 lines
5.1 KiB
5 days ago
|
<template>
|
||
|
|
<view class="dl">
|
||
|
|
<view class="dl-top">
|
||
|
|
<view>
|
||
|
|
<view class="dl-kicker">2 MIN DAILY</view>
|
||
|
|
<view class="dl-title">今天就做这几步</view>
|
||
|
|
<view class="dl-sub">收券、看事件、反搜、投奖池，90秒走人</view>
|
||
|
|
</view>
|
||
|
|
<view class="dl-clock">{{data.minutesToDraw || 0}}min</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="dl-pool">
|
||
|
|
<view class="dl-pool-main">
|
||
|
|
<text class="dl-pool-label">今晚现金奖池</text>
|
||
|
|
<text class="dl-pool-money">￥{{poolAmount}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="dl-prob">
|
||
|
|
<text>{{data.myProbability || 0}}%</text>
|
||
|
|
<text>我的概率</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="dl-stat">
|
||
|
|
<view>
|
||
|
|
<text>{{data.todayCollectedTickets || 0}}</text>
|
||
|
|
<text>今日收券</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>{{data.myPoolTickets || 0}}</text>
|
||
|
|
<text>已投奖池</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>{{data.poolJoinCount || 0}}</text>
|
||
|
|
<text>参与同学</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="dl-events">
|
||
|
|
<view class="dl-event" v-for="(e,i) in events" :key="i">{{e}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="dl-actions">
|
||
|
|
<view class="dl-action collect" @tap="$emit('collect')">
|
||
|
|
<text>1</text>
|
||
|
|
<text>{{collectText}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="dl-action revenge" @tap="$emit('revenge')">
|
||
|
|
<text>2</text>
|
||
|
|
<text>{{data.hasRevengeTarget ? '反搜一下' : '随机搜查'}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="dl-action join" @tap="$emit('join')">
|
||
|
|
<text>3</text>
|
||
|
|
<text>{{joinText}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
data: { type: Object, default: () => ({}) },
|
||
|
|
poolAmount: { type: [String, Number], default: 0 }
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
events() {
|
||
|
|
return this.data.events || []
|
||
|
|
},
|
||
|
|
collectText() {
|
||
|
|
if (!this.data.signedToday) return '签到收券'
|
||
|
|
if (this.data.boxAvailable) return '开补给箱'
|
||
|
|
return '已收完'
|
||
|
|
},
|
||
|
|
joinText() {
|
||
|
|
const n = this.data.suggestedAddTickets || 1
|
||
|
|
return '投' + n + '券冲奖池'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.dl { margin-top: 24rpx; padding: 28rpx; border-radius: 44rpx; background: linear-gradient(155deg, rgba(255,255,255,0.92), rgba(239,255,249,0.78)); border: 2rpx solid rgba(255,255,255,0.92); box-shadow: 0 26rpx 60rpx rgba(53,214,166,0.14); overflow: hidden; position: relative; }
|
||
|
|
.dl:before { content: ''; position: absolute; right: -90rpx; top: -120rpx; width: 320rpx; height: 320rpx; border-radius: 50%; background: radial-gradient(circle, rgba(79,183,255,0.26), transparent 68%); }
|
||
|
|
.dl-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
|
||
|
|
.dl-kicker { color: #59CBB5; font-size: 20rpx; font-weight: 900; letter-spacing: 2rpx; }
|
||
|
|
.dl-title { margin-top: 6rpx; color: #12342F; font-size: 42rpx; font-weight: 900; }
|
||
|
|
.dl-sub { margin-top: 8rpx; color: #6B817D; font-size: 24rpx; }
|
||
|
|
.dl-clock { padding: 14rpx 18rpx; border-radius: 999rpx; background: rgba(255,255,255,0.82); color: #22B889; font-size: 24rpx; font-weight: 900; }
|
||
|
|
.dl-pool { position: relative; z-index: 1; margin-top: 28rpx; display: flex; justify-content: space-between; align-items: center; padding: 26rpx; border-radius: 34rpx; background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(232,246,255,0.72)); }
|
||
|
|
.dl-pool-main { display: flex; flex-direction: column; }
|
||
|
|
.dl-pool-label { color: #6B817D; font-size: 24rpx; }
|
||
|
|
.dl-pool-money { margin-top: 8rpx; color: #12342F; font-size: 50rpx; font-weight: 900; }
|
||
|
|
.dl-prob { width: 132rpx; height: 132rpx; border-radius: 46rpx; background: linear-gradient(145deg, #35D6A6, #4FB7FF); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 18rpx 40rpx rgba(53,214,166,0.24); }
|
||
|
|
.dl-prob text:first-child { font-size: 34rpx; font-weight: 900; }
|
||
|
|
.dl-prob text:last-child { font-size: 20rpx; margin-top: 4rpx; }
|
||
|
|
.dl-stat { margin-top: 18rpx; display: flex; gap: 14rpx; }
|
||
|
|
.dl-stat view { flex: 1; padding: 18rpx 10rpx; border-radius: 26rpx; background: rgba(255,255,255,0.66); display: flex; flex-direction: column; align-items: center; }
|
||
|
|
.dl-stat text:first-child { color: #12342F; font-size: 30rpx; font-weight: 900; }
|
||
|
|
.dl-stat text:last-child { color: #6B817D; font-size: 20rpx; margin-top: 4rpx; }
|
||
|
|
.dl-events { margin-top: 18rpx; }
|
||
|
|
.dl-event { margin-top: 10rpx; padding: 14rpx 18rpx; border-radius: 24rpx; background: rgba(255,255,255,0.62); color: #42635E; font-size: 24rpx; }
|
||
|
|
.dl-actions { margin-top: 22rpx; display: flex; gap: 14rpx; }
|
||
|
|
.dl-action { flex: 1; min-height: 94rpx; border-radius: 30rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #12342F; font-size: 23rpx; font-weight: 900; background: rgba(255,255,255,0.78); }
|
||
|
|
.dl-action text:first-child { width: 34rpx; height: 34rpx; line-height: 34rpx; text-align: center; border-radius: 50%; background: #22B889; color: #fff; font-size: 20rpx; margin-bottom: 8rpx; }
|
||
|
|
.dl-action.join { background: linear-gradient(135deg, #35D6A6, #4FB7FF); color: #fff; box-shadow: 0 18rpx 36rpx rgba(53,214,166,0.22); }
|
||
|
|
.dl-action.join text:first-child { background: rgba(255,255,255,0.28); }
|
||
|
|
</style>
|