school_uni/package1/components/planet/planet-box.vue

<template>
	<view class="pb" @tap="onOpen">
		<view class="pb-tag">{{available ? 'TODAY DROP' : 'TOMORROW DROP'}}</view>
		<view class="pb-visual">
			<view class="pb-glow" v-if="available"></view>
			<view class="pb-box" :class="{shaking: opening, dim: !available}">
				<view class="pb-box-lid"></view>
				<view class="pb-box-face">?</view>
			</view>
		</view>
		<view class="pb-mid">
			<view class="pb-title">幸运盲盒舱</view>
			<view class="pb-desc">{{available ? '今日补给已抵达，拆开看看有什么' : '今日已拆盒，明天再来补给'}}</view>
		</view>
		<view class="pb-btn" :class="{disabled: !available}">
			{{opening ? '拆盒中' : (available ? '拆盲盒' : '已拆')}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			available: {
				type: Boolean,
				default: false
			},
			opening: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			onOpen() {
				if (!this.available || this.opening) return
				this.$emit('open')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pb {
		margin-top: 28rpx;
		padding: 34rpx 28rpx;
		border-radius: 46rpx 30rpx 46rpx 30rpx;
		background:
			radial-gradient(circle at 16% 18%, rgba(255,255,255,0.86), transparent 22%),
			linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,246,219,0.78) 52%, rgba(232,223,255,0.72));
		border: 2rpx solid rgba(255,255,255,0.9);
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 22rpx 54rpx rgba(255,184,77,0.15);
	}

	.pb-tag {
		position: absolute;
		right: 24rpx;
		top: 18rpx;
		color: rgba(255,122,89,0.52);
		font-size: 18rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
	}

	.pb-visual {
		position: relative;
		width: 126rpx;
		height: 126rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.pb-glow {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255,184,77,0.38), transparent 66%);
		animation: spark 2s ease-in-out infinite;
	}

	.pb-box {
		position: relative;
		width: 90rpx;
		height: 92rpx;
		border-radius: 22rpx;
		background: linear-gradient(145deg, #FF8B6A, #FFCF7A);
		box-shadow: inset -10rpx -12rpx 22rpx rgba(146,75,26,0.18), 0 16rpx 34rpx rgba(255,122,89,0.26);
	}

	.pb-box.shaking {
		animation: shake 0.3s ease-in-out infinite;
	}

	.pb-box.dim {
		filter: grayscale(0.8);
		opacity: 0.58;
	}

	.pb-box-lid {
		position: absolute;
		left: -8rpx;
		top: -18rpx;
		width: 106rpx;
		height: 34rpx;
		border-radius: 18rpx;
		background: linear-gradient(135deg, #FFFFFF, #FFD38C);
		transform: rotate(-5deg);
	}

	.pb-box-face {
		position: absolute;
		left: 50%;
		top: 54%;
		transform: translate(-50%, -50%);
		width: 42rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		border-radius: 50%;
		background: rgba(255,255,255,0.86);
		color: #FF7A59;
		font-size: 28rpx;
		font-weight: 900;
	}

	@keyframes shake {
		0%, 100% { transform: rotate(-6deg) scale(1); }
		50% { transform: rotate(7deg) scale(1.04); }
	}

	@keyframes spark {
		0%, 100% { opacity: 0.42; transform: scale(0.86); }
		50% { opacity: 0.95; transform: scale(1.1); }
	}

	.pb-mid {
		flex: 1;
		margin-left: 18rpx;
		min-width: 0;
	}

	.pb-title {
		color: #12342F;
		font-size: 32rpx;
		font-weight: 900;
	}

	.pb-desc {
		color: #42635E;
		font-size: 23rpx;
		margin-top: 8rpx;
		line-height: 34rpx;
	}

	.pb-btn {
		padding: 0 24rpx;
		height: 62rpx;
		line-height: 62rpx;
		border-radius: 999rpx;
		background: linear-gradient(135deg, #FFB84D, #FF7A59);
		color: #FFFFFF;
		font-size: 25rpx;
		font-weight: 800;
		box-shadow: 0 14rpx 28rpx rgba(255,122,89,0.24);
		flex-shrink: 0;
	}

	.pb-btn.disabled {
		background: rgba(18,52,47,0.08);
		color: #7E9691;
		box-shadow: none;
	}
</style>