|
|
|
|
<template>
|
|
|
|
|
<view class="pa" @tap="$emit('start')">
|
|
|
|
|
<view class="pa-left">
|
|
|
|
|
<view class="pa-kicker">COLLEGE ROCKET</view>
|
|
|
|
|
<view class="pa-title">学院助推赛</view>
|
|
|
|
|
<view class="pa-sub">校园版羊了个羊 · 每天2分钟 · 为学院争地标</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="pa-ship">
|
|
|
|
|
<view class="pa-squirrel">🚀</view>
|
|
|
|
|
<view class="pa-flame"></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.pa { margin-top: 22rpx; min-height: 180rpx; padding: 28rpx; border-radius: 42rpx; background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(232,246,255,0.78)); border: 2rpx solid rgba(255,255,255,0.92); box-shadow: 0 22rpx 50rpx rgba(79,183,255,0.14); display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; }
|
|
|
|
|
.pa:before { content: ''; position: absolute; right: -60rpx; top: -80rpx; width: 260rpx; height: 260rpx; border-radius: 50%; background: radial-gradient(circle, rgba(255,184,77,0.32), transparent 66%); }
|
|
|
|
|
.pa-kicker { color: #FF9C42; font-size: 20rpx; font-weight: 900; letter-spacing: 2rpx; }
|
|
|
|
|
.pa-title { margin-top: 8rpx; color: #12342F; font-size: 38rpx; font-weight: 900; }
|
|
|
|
|
.pa-sub { margin-top: 10rpx; color: #6B817D; font-size: 24rpx; }
|
|
|
|
|
.pa-ship { position: relative; width: 150rpx; height: 110rpx; border-radius: 56rpx 56rpx 40rpx 40rpx; 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); animation: fly 2s ease-in-out infinite; }
|
|
|
|
|
.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-flame { position: absolute; right: -18rpx; top: 38rpx; width: 40rpx; height: 26rpx; border-radius: 50%; background: linear-gradient(90deg, #FFB84D, rgba(255,184,77,0)); animation: flame .4s ease-in-out infinite; }
|
|
|
|
|
@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>
|
