topfans/frontend/pages/components/DressupContent.vue

<template>
	<scroll-view class="zhuangban-scroll" scroll-y>
		<view class="zhuangban-container">
			<!-- 大卡片 -->
			<view class="big-card">
				<view class="big-card-surface">
					<image class="card-bg" src="/static/starcity/zhuangban/boost-card-poster.png" mode="scaleToFill"></image>
					<view class="big-card-content">
						<text class="big-card-title">TOPFANS加速卡</text>
						<text class="card-status-label">限时优惠</text>
					</view>
				</view>
			</view>

			<!-- 小卡片网格 -->
			<view class="small-cards-grid">
				<view
					v-for="(card, index) in smallCards"
					:key="'small-' + index"
					class="small-card"
				>
					<view class="small-card-surface">
						<view class="small-card-content">
							<view class="small-card-cover-wrap">
								<image class="small-card-cover" :src="card.image" mode="aspectFit"></image>
							</view>
							<text class="small-card-name">{{ card.name }}</text>
							<view class="card-price-row small-card-price-row">
								<image
									v-if="card.priceIcon"
									class="price-icon-small"
									src="/static/icon/crystal.png"
									mode="aspectFit"
								></image>
								<text :class="card.priceIcon ? 'price-text-small' : 'price-text-rmb'">
									{{ card.price }}
								</text>
							</view>
						</view>
					</view>

					<image v-if="card.isNew" class="new-badge-small" src="/static/icon/new-badge.png" mode="aspectFit"></image>
					<view v-if="card.quantity" class="quantity-badge">
						<text class="quantity-text">{{ card.quantity }}</text>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
const smallCards = [
	{
		name: 'TOPFANS加速卡 4小时',
		image: '/static/starcity/zhuangban/boost-card.png',
		price: '6 RMB',
		priceIcon: false,
		isNew: true,
		quantity: null
	},
	{
		name: 'TOPFANS加速卡 4小时*6',
		image: '/static/starcity/zhuangban/boost-card.png',
		price: '32 RMB',
		priceIcon: false,
		isNew: true,
		quantity: '×6'
	},
	{
		name: '超强强强强聚光灯',
		image: '/static/starcity/zhuangban/spotlight.png',
		price: 299,
		priceIcon: true,
		isNew: false,
		quantity: null
	},
	{
		name: '水晶聚光灯',
		image: '/static/starcity/zhuangban/spotlight2.png',
		price: 79,
		priceIcon: true,
		isNew: false,
		quantity: null
	}
];
</script>

<style scoped>
.zhuangban-scroll {
	width: 100%;
	height: 100%;
	position: relative;
	background: transparent;
	z-index: 0;
}

.zhuangban-container {
	padding: 40rpx 40rpx 200rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

/* ===== 大卡片 ===== */
.big-card {
	position: relative;
	width: 100%;
	min-height: 420rpx;
	overflow: visible;
	margin-bottom: 24rpx;
}

.big-card-surface {
	position: relative;
	min-height: 420rpx;
	border-radius: 24rpx;
	overflow: hidden;
}

.card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.big-card-content {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 24rpx 24rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 420rpx;
}

.big-card-title {
	font-size: 44rpx;
	color: #fff;
	font-weight: 900;
	line-height: 1.25;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
	white-space: pre-line;
}

.card-status-label {
	font-size: 36rpx;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
	line-height: 1.2;
	margin-top: 4rpx;
}

/* ===== 小卡片网格 ===== */
.small-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.small-card {
	position: relative;
	overflow: visible;
	min-height: 400rpx;
}

.small-card-surface {
	position: relative;
	min-height: 400rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(91, 61, 147, 0.78) 0%, rgba(64, 43, 107, 0.92) 100%);
	border: 2rpx solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8rpx 24rpx rgba(16, 8, 36, 0.35);
}

.new-badge-small {
	position: absolute;
	top: -18rpx;
	right: -18rpx;
	width: 34%;
	height: 34%;
	z-index: 20;
}

.small-card-content {
	position: relative;
	z-index: 1;
	padding: 14rpx 14rpx 62rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 400rpx;
}

.small-card-cover-wrap {
	flex: 0 0 250rpx;
	width: 100%;
	border-radius: 12rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
}

.small-card-cover {
	width: 100%;
	height: 100%;
}

.small-card-name {
	display: block;
	font-size: 24rpx;
	color: #fff;
	line-height: 1.35;
	margin-top: 8rpx;
	padding-bottom: 4rpx;
	min-height: 34rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.4);
}

.card-price-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.small-card-price-row {
	position: absolute;
	left: 14rpx;
	bottom: 16rpx;
	margin-top: 0;
	z-index: 2;
}

.price-icon-small {
	width: 36rpx;
	height: 36rpx;
}

.price-text-small {
	margin-left: 6rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #FF8C00;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
}

.price-text-rmb {
	font-size: 28rpx;
	font-weight: bold;
	color: #FF8C00;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* ×6 数量角标 */
.quantity-badge {
	position: absolute;
	right: 14rpx;
	bottom: 16rpx;
	background: rgba(120, 60, 180, 0.85);
	border-radius: 10rpx;
	padding: 4rpx 12rpx;
	z-index: 20;
}

.quantity-text {
	font-size: 26rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.4);
}
</style>