<template>
	<scroll-view class="zhoubian-scroll" scroll-y>
		<view class="zhoubian-container">
			<!-- 大卡片列表 -->
			<view
				v-for="(card, index) in bigCards"
				:key="'big-' + index"
				class="big-card"
			>
				<view class="big-card-surface">
					<!-- 背景图 -->
					<image class="card-bg" src="/static/starcity/zhoubian/xiaoka-exchange-bg.png" mode="scaleToFill"></image>

					<!-- 内容层 -->
					<view class="big-card-content">
						<!-- 左上角状态标签 -->
						<text class="card-status-label">{{ card.label }}</text>

						<!-- 中间：左文字 + 右图片 -->
						<view class="big-card-body">
							<view class="big-card-text-area">
								<text class="big-card-title">{{ card.name }}</text>
							</view>
						<view class="big-card-image-area">
							<image class="big-card-back-img" :src="card.backImage" mode="aspectFill"></image>
							<image class="big-card-product-img" :src="card.image" mode="aspectFit"></image>
						</view>
						</view>

						<!-- 左下角价格 -->
						<view class="card-price-row">
							<image class="price-icon" src="/static/starcity/xiaoka.png" mode="aspectFit"></image>
							<text class="price-text">{{ card.price }}</text>
						</view>
					</view>
				</view>

				<!-- NEW 图标（右上角溢出） -->
				<image class="new-badge" src="/static/icon/new-badge.png" mode="aspectFit"></image>
			</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 class="price-icon-small" src="/static/icon/crystal.png" mode="aspectFit"></image>
								<text class="price-text-small">{{ card.price }}</text>
							</view>
						</view>
					</view>

					<!-- NEW 图标（部分小卡片显示） -->
					<image v-if="card.isNew" class="new-badge-small" src="/static/icon/new-badge.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
const bigCards = [
	{
		label: '限时上架',
		name: '肖战TOPFANS\n2026联名款',
		image: '/static/starcity/zhoubian/xiaoka-card.png',
		backImage: '/static/starcity/zhoubian/xiaoka-card-back2.png',
		price: 288
	},
	{
		label: '限时上架',
		name: '肖战2025巡回\n演唱会现场版',
		image: '/static/starcity/zhoubian/xiaoka-card2.png',
		backImage: '/static/starcity/zhoubian/xiaoka-card-back.png',
		price: 188
	}
];

const smallCards = [
	{ name: '肖战jun', image: '/static/starcity/zhoubian/merchandise1.png', price: 299, isNew: true },
	{ name: '签名项链', image: '/static/starcity/zhoubian/merchandise2.png', price: 179, isNew: false },
	{ name: '肖战漂流2022黑胶', image: '/static/starcity/zhoubian/merchandise3.png', price: 399, isNew: false },
	{ name: '手串', image: '/static/starcity/zhoubian/merchandise4.png', price: 259, isNew: false }
];
</script>

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

.zhoubian-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;
}

.new-badge {
	position: absolute;
	top: -40rpx;
	right: -24rpx;
	width: 29%;
	height: 29%;
	z-index: 20;
}

.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;
	min-height: 420rpx;
}

.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;
}

.big-card-body {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	margin-top: 16rpx;
	position: relative;
}

.big-card-text-area {
	flex: 1;
	padding-right: 20rpx;
}

.big-card-title {
	font-size: 28rpx;
	color: #fff;
	font-weight: 600;
	line-height: 1.5;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.4);
	white-space: pre-line;
}

.big-card-image-area {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 58%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 340rpx;
}

.big-card-back-img {
	position: absolute;
	right: -10rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 68%;
	height: 85%;
	border-radius: 12rpx;
	z-index: 1;
}

.big-card-product-img {
	position: relative;
	width: 90%;
	height: 340rpx;
	z-index: 2;
	flex-shrink: 0;
}

.card-price-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 16rpx;
}

.price-icon {
	width: 48rpx;
	height: 48rpx;
}

.price-text {
	margin-left: 8rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: #FFD700;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* ===== 小卡片网格 ===== */
.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);
}

.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: #FFD700;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
}
</style>
