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

<template>
	<view class="pm">
		<view class="pm-stamp">PLANET PASS</view>
		<view class="pm-main">
			<view class="pm-left">
				<image class="pm-avatar" :src="data.avatar || defaultAvatar" mode="aspectFill"></image>
				<view class="pm-info">
					<view class="pm-name">{{data.nickname || '星球居民'}}</view>
					<view class="pm-sub">
						<text>{{data.level || 'C'}} 级白嫖员</text>
						<text>连签 {{data.consecutiveSignDays || 0}} 天</text>
					</view>
				</view>
			</view>
			<view class="pm-ticket">
				<text class="pm-ticket-num">{{data.myTicketCount || 0}}</text>
				<text class="pm-ticket-label">星球券</text>
			</view>
		</view>
		<view class="pm-sign" :class="{signed: data.signedToday}" @tap="onSign">
			{{data.signedToday ? '今日已盖章' : '今日签到盖章'}}
		</view>

		<view class="pm-buffs" v-if="data.myBuffs && data.myBuffs.length">
			<text class="pm-buffs-label">正在生效</text>
			<view class="pm-buff" v-for="(b, i) in data.myBuffs" :key="i">
				<text class="pm-buff-emoji">{{buffEmoji(b.type)}}</text>
			</view>
		</view>
		<view class="pm-buffs pm-buffs-empty" v-else>
			<text class="pm-buffs-label">暂无增益，去能量站补给</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				defaultAvatar: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png'
			}
		},
		methods: {
			buffEmoji(type) {
				const map = {
					double: '2X',
					shield: '盾',
					lucky: 'LU',
					hunt: '追',
					stealth: '隐'
				}
				return map[type] || 'UP'
			},
			onSign() {
				if (this.data.signedToday) return
				this.$emit('sign')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pm {
		position: relative;
		margin-top: 12rpx;
		padding: 30rpx 28rpx 28rpx;
		border-radius: 38rpx;
		background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(245,255,250,0.64));
		border: 2rpx solid rgba(255,255,255,0.9);
		box-shadow: 0 22rpx 60rpx rgba(53,214,166,0.14);
		backdrop-filter: blur(10px);
		overflow: hidden;
		/* transform: rotate(-1.2deg); */
	}

	.pm:before {
		content: '';
		position: absolute;
		right: -50rpx;
		top: -80rpx;
		width: 220rpx;
		height: 220rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(79,183,255,0.28), transparent 66%);
	}

	.pm-stamp {
		position: absolute;
		right: 26rpx;
		top: 22rpx;
		color: rgba(53,214,166,0.22);
		font-size: 24rpx;
		font-weight: 900;
		letter-spacing: 3rpx;
	}

	.pm-main {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pm-left {
		display: flex;
		align-items: center;
		min-width: 0;
		flex: 1;
	}

	.pm-avatar {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		border: 5rpx solid rgba(255,255,255,0.9);
		box-shadow: 0 14rpx 28rpx rgba(53,214,166,0.18);
		flex-shrink: 0;
	}

	.pm-info {
		flex: 1;
		margin-left: 18rpx;
		min-width: 0;
	}

	.pm-name {
		color: #12342F;
		font-size: 32rpx;
		font-weight: 800;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pm-sub {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.pm-sub text {
		color: #42635E;
		font-size: 22rpx;
		margin-right: 14rpx;
	}

	.pm-ticket {
		position: relative;
		min-width: 132rpx;
		height: 96rpx;
		padding: 0 16rpx;
		border-radius: 28rpx;
		background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(221,248,255,0.88));
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 2rpx solid rgba(255,255,255,0.96);
		box-shadow: 0 16rpx 34rpx rgba(79,183,255,0.12);
	}

	.pm-ticket-num {
		color: #22B889;
		font-size: 36rpx;
		font-weight: 900;
		font-family: DIN, Arial, sans-serif;
		line-height: 38rpx;
	}

	.pm-ticket-label {
		margin-top: 4rpx;
		color: #7E9691;
		font-size: 20rpx;
		font-weight: 700;
	}

	.pm-sign {
		position: relative;
		margin-top: 24rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		border-radius: 999rpx;
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 26rpx;
		font-weight: 800;
		box-shadow: 0 16rpx 34rpx rgba(53,214,166,0.24);
	}

	.pm-sign.signed {
		background: rgba(18,52,47,0.08);
		color: #7E9691;
		box-shadow: none;
	}

	.pm-buffs {
		position: relative;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.pm-buffs-label {
		color: #7E9691;
		font-size: 22rpx;
		margin-right: 14rpx;
		font-weight: 600;
	}

	.pm-buff {
		width: 52rpx;
		height: 52rpx;
		border-radius: 18rpx;
		background: rgba(255,255,255,0.72);
		border: 1rpx solid rgba(53,214,166,0.26);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
	}

	.pm-buff-emoji {
		font-size: 19rpx;
		font-weight: 900;
		color: #22B889;
		font-family: DIN, Arial, sans-serif;
	}
</style>