book-hi/pages-sell/components/sell-container/index.vue

<template>
	<view class="sell-container">
		<!-- 顶部背景图 -->
		<image class="top-bg-image" src="/pages-sell/static/top-bg.png" mode="widthFix"></image>

		<!-- 导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<text class="navbar-title">书嗨</text>
				<!-- 右侧胶囊占位，保持布局平衡 -->
				<view class="nav-right-placeholder"></view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
			<!-- 搜索框 -->
			<view class="search-wrapper">
				<view class="search-box-uview">
					<u-search placeholder="搜索关键字" :show-action="false" bg-color="transparent" height="40"
						:clearabled="true" v-model="keyword"
						search-icon="/pages-sell/static/search-icon.png"></u-search>
					<view class="search-btn-overlay">
						<text>搜索</text>
					</view>
				</view>
			</view>

			<!-- tab标签 -->
			<view class="tabs-wrapper">
				<u-tabs :list="hotTagList" :current="currentHotTag" @change="changeHotTag" bgColor="transparent"
					lineColor="transparent" :active-item-style="{ fontWeight: 'bold', color: '#333' }"
					inactive-color="#3C4F3E" :barStyle="barStyle" :bar-height="27" :bar-width="52"></u-tabs>
			</view>

			<!-- 顶部横幅 Banner -->
			<view class="top-banner-wrapper">
				<image src="/pages-sell/static/top-banner.png" class="top-banner-img" mode="widthFix"></image>
			</view>

			<!-- 金刚区分类图标 (2行5列) -->
			<view class="category-grid">
				<view class="grid-item" v-for="(item, index) in categoryList" :key="index"
					@click="handleCategory(item)">
					<view class="icon-circle">
						<image :src="item.icon" class="cat-icon" mode="aspectFit"></image>
					</view>
					<text class="cat-name">{{ item.name }}</text>
				</view>
			</view>

			<!-- 推广与热销双卡片 -->
			<view class="promo-dual-card">
				<!-- 左侧：推广卖书 -->
				<view class="card-left">
					<view class="card-content">
						<text class="card-title-lg">推广卖书买书都有提成啦</text>
						<text class="card-subtitle-lg">10% 收益等你拿</text>
						<!-- 装饰图 -->
						<image src="/pages-sell/static/tgtc.png" class="promo-decoration" mode="widthFix"></image>
					</view>
				</view>

				<!-- 右侧：热销商品 -->
				<view class="card-right">
					<view class="right-header">
						<image src="/pages-sell/static/icon-fire.png" class="fire-icon" mode="widthFix"></image>
						<text class="right-title">热销商品</text>
						<image src="/pages-sell/static/icon-fire.png" class="fire-icon flip" mode="widthFix"></image>
					</view>
					<view class="products-container">
						<!-- 使用网络图片作为书的封面占位 -->
						<image :src="bookCoverUrl" class="product-cover" mode="aspectFill"></image>
						<image :src="bookCoverUrl" class="product-cover" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<!-- 健康与成长双卡片 -->
			<view class="info-dual-card">
				<view class="info-card bg-orange">
					<view class="info-text-group">
						<text class="info-title text-orange">健康与身材</text>
						<text class="info-desc text-orange-light">和身体和解科学管理状态</text>
					</view>
					<image src="/pages-sell/static/shape-19.png" class="info-icon" mode="aspectFit"
						style="width: 125rpx;height: 111rpx;"></image>
				</view>
				<view class="info-card bg-green">
					<view class="info-text-group">
						<text class="info-title text-green">成长与心态</text>
						<text class="info-desc text-green-light">拥有持续进步的动力和抗挫力</text>
					</view>
					<image src="/pages-sell/static/shape-20.png" class="info-icon" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 公众号横幅 -->
			<view class="gzh-section">
				<view class="gzh-bg-wrapper">
					<image src="/pages-sell/static/gzh-banner.png" class="gzh-img-bg" mode="aspectFill"></image>
					<view class="gzh-content-overlay">
						<text class="gzh-title">关注公众号 ，定期领红包</text>
						<view class="gzh-subtitle-pill">
							<text class="gzh-subtitle">别让好书蒙尘 ，书嗨陪你逐页品读</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 书嗨推荐 -->
			<view class="recommend-section">
				<view class="section-header">
					<text class="section-title">书嗨推荐</text>
					<view class="view-more">
						<text>查看全部</text>
						<image src="/pages-sell/static/right-arrow.png" class="arrow-icon" mode="widthFix"></image>
					</view>
				</view>

				<scroll-view scroll-x class="book-scroll" :show-scrollbar="false">
					<view class="book-list">
						<view class="book-item" v-for="(book, index) in recommendBooks" :key="index">
							<image :src="book.cover" class="book-image" mode="aspectFill"></image>
							<text class="book-name">{{ book.title }}</text>
							<view class="price-row">
								<text class="currency">¥</text>
								<text class="price-val">{{ book.price }}</text>
								<text class="price-old">¥{{ book.original }}</text>
							</view>
							<view class="add-btn">
								<text>加入购物车</text>
								<image src="/pages-sell/static/shape-10.png" class="cart-symbol"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 底部留白，防止遮挡 -->
			<view class="bottom-safe-area"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'SellContainer',
	data() {
		return {
			barStyle: {
				backgroundColor: 'transparent',
				background: "url('/pages-sell/static/tab-selected.png') no-repeat center",
				backgroundSize: '100% 100%',
				position: 'relative',
				top: '-6rpx',
			},
			statusBarHeight: 20,
			keyword: '',
			// u-tabs 需要对象数组 [{name: 'xxx'}]
			hotTagList: [
				{ name: '热搜' },
				{ name: '励志' },
				{ name: '绘本' },
				{ name: '诺贝尔文学奖' },
				{ name: '茅盾奖' },
				{ name: '童书' }
			],
			currentHotTag: 0,
			// 临时的网络书封面图片
			bookCoverUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
			categoryList: [
				{ name: '热销榜单', icon: '/pages-sell/static/icon-hot-sales.png' },
				{ name: '心灵 / 成长', icon: '/pages-sell/static/icon-heart-growth.png' },
				{ name: '诺贝尔文学奖', icon: '/pages-sell/static/icon-nobel.png' },
				{ name: '茅盾文学奖', icon: '/pages-sell/static/icon-maodun.png' },
				{ name: '樊登书单', icon: '/pages-sell/static/icon-fandeng.png' },
				{ name: '东野圭吾', icon: '/pages-sell/static/icon-dongye.png' },
				{ name: '余华', icon: '/pages-sell/static/icon-yuhua.png' },
				{ name: '村上春树', icon: '/pages-sell/static/icon-haruki.png' },
				{ name: '童书', icon: '/pages-sell/static/icon-children.png' },
				{ name: '书嗨推荐', icon: '/pages-sell/static/icon-recommend.png' }
			],
			recommendBooks: [
				{ title: '山河岁月', price: '6.80', original: '36.80', cover: 'https://img.yzcdn.cn/vant/cat.jpeg' },
				{ title: '山河岁月', price: '6.80', original: '36.80', cover: 'https://img.yzcdn.cn/vant/cat.jpeg' },
				{ title: '山河岁月', price: '6.80', original: '36.80', cover: 'https://img.yzcdn.cn/vant/cat.jpeg' }
			]
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 20;
	},
	methods: {
		handleCategory(item) {
			console.log('点击分类:', item.name);
		},
		changeHotTag(index) {
			this.currentHotTag = index;
			console.log('切换标签:', index);
		}
	}
}
</script>

<style lang="scss" scoped>
.sell-container {
	position: relative;
	min-height: 100vh;
	background-color: #F6F6F6;
	overflow-x: hidden;
}

/* 顶部大背景图 */
.top-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
	display: block;
}

/* 导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;

	.navbar-content {
		height: 44px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.navbar-title {
			color: #fff;
			font-size: 36rpx;
			font-weight: 600;
		}
	}
}

.main-content {
	position: relative;
	z-index: 1;
	padding: 0 24rpx;
}

/* 搜索框 */
.search-wrapper {
	margin-top: 10rpx;
	margin-bottom: 20rpx;

	.search-box-uview {
		height: 80rpx;
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 16rpx;
		position: relative;

		/* 覆盖 u-search 的 padding 以适配 */
		::v-deep .u-search {
			flex: 1;
			/* 让输入框不遮挡右侧按钮 */
			padding-right: 140rpx !important;
		}

		.search-btn-overlay {
			position: absolute;
			right: 8rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 140rpx;
			height: 64rpx;
			background: linear-gradient(0deg, #37C148 0%, #6ADD83 100%);
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;

			text {
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}
}

/* 顶部横幅 */
.top-banner-wrapper {
	width: 100%;
	margin-bottom: 30rpx;
	position: relative;

	.top-banner-img {
		width: 100%;
		border-radius: 40rpx;
		display: block;
	}
}

/* 分类图标 */
.category-grid {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10rpx;

	.grid-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;

		.icon-circle {
			width: 96rpx;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12rpx;

			.cat-icon {
				width: 100%;
				height: 100%;
			}
		}

		.cat-name {
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

/* 推广双卡片 */
.promo-dual-card {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;

	.card-left {
		width: 48%;
		height: 252rpx;
		background: linear-gradient(135deg, #FFECC8, #FFE0B2);
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;

		.card-content {
			padding: 30rpx 24rpx;
			/* Increased top/bottom padding as requested */

			.card-title-lg {
				font-size: 26rpx;
				color: #E68A00;
				font-weight: bold;
				display: block;
				margin-bottom: 8rpx;
			}

			.card-subtitle-lg {
				font-size: 24rpx;
				color: #FFA000;
				font-weight: 500;
			}

			.promo-decoration {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: block;
			}
		}
	}

	.card-right {
		width: 48%;
		height: 252rpx;
		/* Updated background per request */
		background: linear-gradient(to bottom, #FFD7C3 0%, #FFFFFF 32%);
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.right-header {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.right-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin: 0 10rpx;
			}

			.fire-icon {
				width: 30rpx;
				height: 30rpx;
			}

			.flip {
				transform: scaleX(-1);
			}
		}

		.products-container {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			.product-cover {
				flex: 1;
				height: 160rpx;
				border-radius: 12rpx;
				background-color: #f0f0f0;
			}
		}
	}
}

/* 信息双卡片 */
.info-dual-card {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;

	.info-card {
		width: 48%;
		padding: 24rpx;
		border-radius: 12px;
		/* Updated radius */
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 140rpx;
		box-sizing: border-box;
		position: relative;
		/* For absolute icon */
		overflow: hidden;

		&.bg-orange {
			background: #FFF3E0;
			border: 1px solid #FFB72A;
		}

		&.bg-green {
			background: #D4F1D8;
			border: 1px solid #54A94E;
		}

		.info-text-group {
			flex: 1;
			z-index: 1;
			/* Ensure text is above */

			.info-title {
				font-size: 28rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 6rpx;
			}

			.info-desc {
				font-size: 22rpx;
				line-height: 1.2;
			}

			.text-orange {
				color: #DB832D;
			}

			.text-orange-light {
				color: #DB832D;
			}

			.text-green {
				color: #1F8049;
			}

			.text-green-light {
				color: #1F8049;
			}
		}

		.info-icon {
			width: 100rpx;
			/* Slightly larger maybe */
			height: 100rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 0;
			opacity: 0.8;
		}
	}
}

/* 公众号 */
.gzh-section {
	margin-bottom: 30rpx;
	height: 180rpx;
	/* Fixed height for consistency */
	border-radius: 20rpx;
	overflow: hidden;

	.gzh-bg-wrapper {
		width: 100%;
		height: 100%;
		position: relative;

		.gzh-img-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.gzh-content-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 60%;
			/* Only cover left side */
			height: 100%;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.gzh-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #134E13;
				/* Dark green */
				margin-bottom: 16rpx;
			}

			.gzh-subtitle-pill {
				background: #FFF;
				border-radius: 24rpx;
				padding: 0 14rpx;
				line-height: 1.4;
				align-self: flex-start;

				.gzh-subtitle {
					font-size: 22rpx;
					color: #134E13;
					font-weight: 500;
				}
			}
		}
	}
}

/* 书嗨推荐 */
.recommend-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.view-more {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #8D8D8D;

			.arrow-icon {
				width: 12rpx;
				margin-left: 6rpx;
			}
		}
	}

	.book-scroll {
		width: 100%;
		white-space: nowrap;

		.book-list {
			display: flex;
			padding-bottom: 10rpx;
		}

		.book-item {
			width: 200rpx;
			margin-right: 24rpx;
			display: flex;
			flex-direction: column;

			.book-image {
				width: 200rpx;
				height: 255rpx;
				border-radius: 2rpx;
				margin-bottom: 16rpx;
				background-color: #f9f9f9;
			}

			.book-name {
				font-family: 'Source Han Sans SC';
				font-weight: bold;
				font-size: 28rpx;
				color: #303030;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price-row {
				display: flex;
				align-items: baseline;
				margin-bottom: 12rpx;

				.currency {
					font-family: 'Source Han Sans SC';
					font-weight: 500;
					font-size: 22rpx;
					color: #D81A00;
				}

				.price-val {
					font-family: 'Source Han Sans SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #D81A00;
					margin-right: 12rpx;
				}

				.price-old {
					font-family: 'Source Han Sans SC';
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
					text-decoration: line-through;
				}
			}

			.add-btn {
				width: fit-content;
				height: 36rpx;
				line-height: 36rpx;
				background: linear-gradient(0deg, #4ED964 0%, #4ED964 100%);
				border-radius: 18rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 22rpx;
					color: #fff;
				}

				.cart-symbol {
					width: 24rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}
		}
	}
}

.bottom-safe-area {
	height: 30rpx
}
</style>