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.
61 lines
5.1 KiB
61 lines
5.1 KiB
<template>
|
|
<view>
|
|
<view class="pa" @tap="$emit('start')">
|
|
<view class="pa-badge">开始助推</view>
|
|
<view class="pa-left">
|
|
<view class="pa-kicker">COLLEGE ROCKET</view>
|
|
<view class="pa-title">学院助推赛</view>
|
|
<view class="pa-sub">玩一局有机会获得更多星球券，为学院争地标</view>
|
|
<!-- <view class="pa-cta">开始助推</view> -->
|
|
</view>
|
|
<view class="pa-ship">
|
|
<view class="pa-squirrel">🚀</view>
|
|
<view class="pa-flame"></view>
|
|
</view>
|
|
</view>
|
|
<view class="pa pa-pk" @tap.stop="$emit('arena')">
|
|
<view class="pa-badge">开始PK</view>
|
|
<view class="pa-left">
|
|
<view class="pa-kicker">COLLEGE ROCKET</view>
|
|
<view class="pa-title">星球擂台赛</view>
|
|
<view class="pa-sub">看看谁才是PK王</view>
|
|
<!-- <view class="pa-cta">开始PK</view> -->
|
|
</view>
|
|
<view class="pa-ship">
|
|
<view class="pa-squirrel">🚀</view>
|
|
<view class="pa-flame"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pa { margin-top: 22rpx; min-height: 210rpx; padding: 30rpx; border-radius: 42rpx; background: radial-gradient(circle at 92% 20%, rgba(255,184,77,0.36), transparent 32%), linear-gradient(135deg, rgba(255,255,255,0.96), rgba(232,246,255,0.78)); border: 4rpx solid rgba(255,184,77,0.58); box-shadow: 0 24rpx 56rpx rgba(255,156,66,0.18), inset 0 0 0 2rpx rgba(255,255,255,0.72); display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; }
|
|
.pa:before { content: ''; position: absolute; right: -60rpx; top: -80rpx; width: 300rpx; height: 300rpx; border-radius: 50%; background: radial-gradient(circle, rgba(255,184,77,0.38), transparent 66%); }
|
|
.pa:after { content: ''; position: absolute; left: 24rpx; right: 24rpx; bottom: 12rpx; height: 10rpx; border-radius: 999rpx; background: linear-gradient(90deg, rgba(255,156,66,0.24), rgba(79,183,255,0.18)); }
|
|
.pa-pk { background: radial-gradient(circle at 90% 18%, rgba(124,58,237,0.25), transparent 34%), radial-gradient(circle at 15% 100%, rgba(56,189,248,0.20), transparent 42%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,239,255,0.86) 48%, rgba(232,247,255,0.76)); border-color: rgba(124,58,237,0.38); box-shadow: 0 24rpx 56rpx rgba(124,58,237,0.14), inset 0 0 0 2rpx rgba(255,255,255,0.76); }
|
|
.pa-pk:before { background: radial-gradient(circle, rgba(124,58,237,0.30), transparent 66%); }
|
|
.pa-pk:after { background: linear-gradient(90deg, rgba(124,58,237,0.22), rgba(56,189,248,0.20)); }
|
|
.pa-left { position: relative; z-index: 1; padding-right: 18rpx; }
|
|
.pa-badge { position: absolute; right: 28rpx; top: 22rpx; z-index: 2; height: 44rpx; line-height: 44rpx; padding: 0 18rpx; border-radius: 999rpx; background: linear-gradient(135deg, #FF7A59, #FFB84D); color: #FFFFFF; font-size: 20rpx; font-weight: 900; box-shadow: 0 12rpx 24rpx rgba(255,122,89,0.2); }
|
|
.pa-pk .pa-badge { background: linear-gradient(135deg, #7C3AED, #38BDF8); box-shadow: 0 12rpx 26rpx rgba(124,58,237,0.20); }
|
|
.pa-arena { position: absolute; right: 28rpx; top: 76rpx; z-index: 2; height: 48rpx; line-height: 48rpx; padding: 0 20rpx; border-radius: 999rpx; background: linear-gradient(135deg, #7C3AED, #38BDF8); color: #FFFFFF; font-size: 21rpx; font-weight: 900; box-shadow: 0 12rpx 28rpx rgba(124,58,237,0.22); }
|
|
.pa-kicker { color: #FF9C42; font-size: 20rpx; font-weight: 900; letter-spacing: 2rpx; }
|
|
.pa-pk .pa-kicker { color: #7C3AED; }
|
|
.pa-title { margin-top: 8rpx; color: #12342F; font-size: 44rpx; font-weight: 900; }
|
|
.pa-sub { margin-top: 10rpx; color: #6B817D; font-size: 24rpx; line-height: 1.38; max-width: 430rpx; }
|
|
.pa-cta { margin-top: 18rpx; display: inline-flex; align-items: center; justify-content: center; height: 54rpx; padding: 0 26rpx; border-radius: 999rpx; background: linear-gradient(135deg, #35D6A6, #4FB7FF); color: #FFFFFF; font-size: 23rpx; font-weight: 900; box-shadow: 0 12rpx 24rpx rgba(53,214,166,0.18); }
|
|
.pa-ship { position: relative; z-index: 1; width: 156rpx; height: 118rpx; margin-top: 40rpx; border-radius: 58rpx 58rpx 42rpx 42rpx; background: linear-gradient(145deg, #FFFFFF, #DDF8FF 50%, #FFE5AE); box-shadow: inset -12rpx -16rpx 28rpx rgba(79,183,255,0.14), 0 18rpx 42rpx rgba(255,156,66,0.18); flex-shrink: 0; }
|
|
.pa-pk .pa-ship { background: linear-gradient(145deg, #FFFFFF, #EEE7FF 48%, #DDF8FF); box-shadow: inset -12rpx -16rpx 28rpx rgba(124,58,237,0.12), 0 18rpx 42rpx rgba(56,189,248,0.18); }
|
|
.pa-squirrel { position: absolute; left: 38rpx; top: 28rpx; width: 70rpx; height: 48rpx; line-height: 48rpx; border-radius: 999rpx; background: #8B5A2B; color: #fff; font-size: 20rpx; font-weight: 900; text-align: center; }
|
|
.pa-pk .pa-squirrel { background: #5B21B6; }
|
|
.pa-flame { position: absolute; right: -18rpx; top: 38rpx; width: 40rpx; height: 26rpx; border-radius: 50%; background: linear-gradient(90deg, #FFB84D, rgba(255,184,77,0)); }
|
|
.pa-pk .pa-flame { background: linear-gradient(90deg, #38BDF8, rgba(56,189,248,0)); }
|
|
@keyframes fly { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10rpx); } }
|
|
@keyframes flame { 0%,100%{ transform: scaleX(.8); opacity: .7; } 50%{ transform: scaleX(1.2); opacity: 1; } }
|
|
</style>
|
|
|