topfans/frontend/pages/components/TongkuanContent.vue

<template>
	<scroll-view class="tongkuan-scroll" scroll-y>
		<view class="tongkuan-container">
			<!-- 第一张卡片（含抽屉） -->
			<view class="tk-card-wrapper">
				<view class="tk-card" @click="toggleDrawer">
					<image class="tk-card-img" :src="cards[0].image" mode="aspectFill"></image>
					<view class="tk-card-overlay">
						<text class="tk-card-label">{{ cards[0].label }}</text>
					</view>
					<image class="tk-new-badge" src="/static/icon/new-badge.png" mode="aspectFit"></image>
				</view>

			<!-- 抽屉占位（撑开高度，避免与下方卡片重叠） -->
			<view class="tk-drawer-spacer" :class="{ 'tk-drawer-spacer--open': drawerOpen }"></view>

			<!-- 抽屉（绝对定位，顶部被卡片压住） -->
			<view class="tk-drawer" :class="{ 'tk-drawer--open': drawerOpen }">
				<view class="tk-drawer-inner">
					<text class="tk-drawer-link">https://www.wedgwood.cn/news/</text>
					<view class="tk-product-grid">
						<view
							v-for="(item, idx) in drawerProducts"
							:key="idx"
							class="tk-product-item"
						>
							<view class="tk-product-img-wrap">
								<image class="tk-product-img" :src="item.image" mode="aspectFill"></image>
							</view>
							<text class="tk-product-name">{{ item.name }}</text>
							<text class="tk-product-price">{{ item.price }} ¥</text>
						</view>
					</view>
				</view>
			</view>
			</view>

			<!-- 第二、三张卡片 -->
			<view
				v-for="(card, index) in cards.slice(1)"
				:key="index + 1"
				class="tk-card"
			>
				<image class="tk-card-img" :src="card.image" mode="aspectFill"></image>
				<view class="tk-card-overlay">
					<text v-if="card.label" class="tk-card-label">{{ card.label }}</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { ref } from 'vue';

const drawerOpen = ref(false);

const toggleDrawer = () => {
	drawerOpen.value = !drawerOpen.value;
};

const cards = [
	{
		label: '限时上新',
		image: '/static/starcity/tongkuan/29dcf35c07c836ad83d92bee0cc4a0af.png',
		isNew: true
	},
	{
		label: '限时上新',
		image: '/static/starcity/tongkuan/38202ae3fe02ac1bee1078a6049d0829.png',
		isNew: false
	},
	{
		label: '',
		image: '/static/starcity/tongkuan/fab18adf0ff1b88af4a45ffe8f657d36.png',
		isNew: false
	}
];

const drawerProducts = [
	{
		image: '/static/starcity/tongkuan/7ad6411446cf364c84ebc2e5ffb8c300.png',
		name: '红韵缤纷系列马克杯270ml-B\nRED SPLENDOUR',
		price: '500'
	},
	{
		image: '/static/starcity/tongkuan/df196fa2b944b4e111db43bbe03198d1.png',
		name: '银彩缤纷系列马克杯270ml-B\nRED SPLENDOUR',
		price: '500'
	}
];
</script>

<style scoped>
.tongkuan-scroll {
	width: 100%;
	height: 100%;
	background: transparent;
}

.tongkuan-container {
	padding: 24rpx 24rpx 200rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

/* 第一张卡片容器（包裹卡片+抽屉） */
.tk-card-wrapper {
	position: relative;
	width: 100%;
}

.tk-card {
	position: relative;
	width: 100%;
	border-radius: 24rpx;
	overflow: visible;
	z-index: 2;
}

/* 抽屉撑开占位（与抽屉高度同步，维持正常文档流间距） */
.tk-drawer-spacer {
	height: 0;
	transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-drawer-spacer--open {
	height: 580rpx;
}

.tk-card-img {
	display: block;
	width: 100%;
	height: 460rpx;
	border-radius: 24rpx;
}

.tk-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24rpx;
	box-sizing: border-box;
	pointer-events: none;
}

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

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

/* 抽屉（绝对定位，顶部 48rpx 被卡片压住） */
.tk-drawer {
	position: absolute;
	top: calc(460rpx - 48rpx);
	left: 0;
	right: 0;
	overflow: hidden;
	max-height: 0;
	z-index: 1;
	border-radius: 0 0 24rpx 24rpx;
	transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-drawer--open {
	max-height: 700rpx;
}

.tk-drawer-inner {
	background: rgba(0, 0, 0, 0.75);
	border-radius: 0 0 24rpx 24rpx;
	padding: 64rpx 24rpx 32rpx;
	box-sizing: border-box;
}

.tk-drawer-link {
	display: block;
	font-size: 22rpx;
	color: #5b8dd9;
	text-decoration: underline;
	margin-bottom: 28rpx;
	word-break: break-all;
}

.tk-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.tk-product-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tk-product-img-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16rpx;
	overflow: hidden;
	background: #f5f5f5;
	margin-bottom: 12rpx;
}

.tk-product-img {
	width: 100%;
	height: 100%;
}

.tk-product-name {
	font-size: 20rpx;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
	white-space: pre-line;
	margin-bottom: 8rpx;
}

.tk-product-price {
	font-size: 28rpx;
	font-weight: bold;
	color: #FFD700;
}
</style>