feat 新增卖书功能页面及相关配置

- 新增卖书页面路由配置，支持自定义导航栏
- 添加 pages-sell 分包及占位页面
- 在 tabbar 中新增"卖书"入口
- 修复 mp-alipay 配置格式问题

pages-sell/components/banner-card.vue

@@ -0,0 +1,78 @@
+<template>
+	<view class="banner-card" :style="{ background: bgColor }" @click="handleClick">
+		<view class="card-content">
+			<view class="text-content">
+				<text class="title">{{ title }}</text>
+				<text class="subtitle">{{ subtitle }}</text>
+			</view>
+			<image v-if="image" :src="image" mode="aspectFit" class="card-image"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'BannerCard',
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		subtitle: {
+			type: String,
+			default: ''
+		},
+		image: {
+			type: String,
+			default: ''
+		},
+		bgColor: {
+			type: String,
+			default: '#FFE8CC'
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.banner-card {
+	border-radius: 16rpx;
+	padding: 24rpx;
+	margin-bottom: 20rpx;
+	
+	.card-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		
+		.text-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			
+			.title {
+				font-size: 28rpx;
+				color: #333333;
+				font-weight: 500;
+				margin-bottom: 8rpx;
+			}
+			
+			.subtitle {
+				font-size: 24rpx;
+				color: #666666;
+			}
+		}
+		
+		.card-image {
+			width: 120rpx;
+			height: 120rpx;
+			margin-left: 20rpx;
+		}
+	}
+}
+</style>

pages-sell/components/book-card.vue

@@ -0,0 +1,114 @@
+<template>
+	<view class="book-card" @click="handleClick">
+		<view class="book-cover">
+			<image :src="cover" mode="aspectFill" class="cover-image"></image>
+		</view>
+		<view class="book-info">
+			<text class="book-title">{{ title }}</text>
+			<view class="price-row">
+				<text class="current-price">¥{{ currentPrice }}</text>
+				<text class="original-price">¥{{ originalPrice }}</text>
+			</view>
+			<view class="buy-button">
+				<text class="button-text">加入购物车</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'BookCard',
+	props: {
+		cover: {
+			type: String,
+			required: true
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		currentPrice: {
+			type: [String, Number],
+			required: true
+		},
+		originalPrice: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.book-card {
+	display: flex;
+	flex-direction: column;
+	width: 220rpx;
+	
+	.book-cover {
+		width: 220rpx;
+		height: 300rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+		margin-bottom: 16rpx;
+		
+		.cover-image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	
+	.book-info {
+		.book-title {
+			font-size: 28rpx;
+			color: #333333;
+			font-weight: 500;
+			margin-bottom: 12rpx;
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		
+		.price-row {
+			display: flex;
+			align-items: center;
+			margin-bottom: 16rpx;
+			
+			.current-price {
+				font-size: 32rpx;
+				color: #FF3B30;
+				font-weight: bold;
+				margin-right: 12rpx;
+			}
+			
+			.original-price {
+				font-size: 24rpx;
+				color: #999999;
+				text-decoration: line-through;
+			}
+		}
+		
+		.buy-button {
+			width: 100%;
+			height: 56rpx;
+			background: linear-gradient(90deg, #5DD466 0%, #38C148 100%);
+			border-radius: 28rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			
+			.button-text {
+				font-size: 24rpx;
+				color: #FFFFFF;
+			}
+		}
+	}
+}
+</style>

pages-sell/components/category-icon.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="category-icon" @click="handleClick">
+		<view class="icon-wrapper" :style="{ backgroundColor: bgColor }">
+			<image :src="icon" mode="aspectFit" class="icon-image"></image>
+		</view>
+		<text class="icon-text">{{ text }}</text>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'CategoryIcon',
+	props: {
+		icon: {
+			type: String,
+			required: true
+		},
+		text: {
+			type: String,
+			required: true
+		},
+		bgColor: {
+			type: String,
+			default: '#FF9500'
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.category-icon {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	
+	.icon-wrapper {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 12rpx;
+		
+		.icon-image {
+			width: 56rpx;
+			height: 56rpx;
+		}
+	}
+	
+	.icon-text {
+		font-size: 24rpx;
+		color: #333333;
+		text-align: center;
+		line-height: 1.2;
+	}
+}
+</style>

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

@@ -0,0 +1,697 @@
+<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>

pages-sell/pages/placeholder.vue

@@ -0,0 +1,25 @@
+<template>
+	<view>
+		<!-- 强行引用组件，确保编译器将其打包到分包中 -->
+		<sell-container v-if="false"></sell-container>
+	</view>
+</template>
+
+<script>
+import SellContainer from '../components/sell-container/index.vue';
+
+export default {
+	components: {
+		SellContainer
+	},
+	data() {
+		return {
+			
+		}
+	}
+}
+</script>
+
+<style>
+
+</style>

pages.json

@@ -40,6 +40,20 @@
             "style": {
                 "navigationBarTitleText": "活动"
             }
+        },
+        {
+            "path": "pages/sell/index",
+            "style": {
+                "navigationBarTitleText": "书嗨",
+                "navigationBarTextStyle": "white",
+                "navigationStyle": "custom",
+                "usingComponents": {
+                    "sell-container": "/pages-sell/components/sell-container/index"
+                },
+                "componentPlaceholder": {
+                    "sell-container": "view"
+                }
+            }
         }
     ],
     "subPackages": [
@@ -122,7 +136,7 @@
                     "path": "pages/wallet",
                     "style": {
                         "navigationBarTitleText": "我的钱包",
-                        "mp-alipay":{
+                        "mp-alipay": {
                             "pullRefresh": true
                         }
                     }
@@ -131,7 +145,7 @@
                     "path": "pages/withdraw-detail",
                     "style": {
                         "navigationBarTitleText": "提现明细",
-                        "mp-alipay":{
+                        "mp-alipay": {
                             "pullRefresh": true
                         }
                     }
@@ -187,7 +201,7 @@
                     "path": "pages/partner/income-detail",
                     "style": {
                         "navigationBarTitleText": "收入明细",
-                        "mp-alipay":{
+                        "mp-alipay": {
                             "pullRefresh": true
                         }
                     }
@@ -196,7 +210,7 @@
                     "path": "pages/partner/order-detail",
                     "style": {
                         "navigationBarTitleText": "订单明细",
-                        "mp-alipay":{
+                        "mp-alipay": {
                             "pullRefresh": true
                         }
                     }
@@ -261,6 +275,17 @@
                     }
                 }
             ]
+        },
+        {
+            "root": "pages-sell",
+            "pages": [
+                {
+                    "path": "pages/placeholder",
+                    "style": {
+                        "navigationBarTitleText": "Placeholder"
+                    }
+                }
+            ]
         }
     ],
     "preloadRule": {},
@@ -280,6 +305,12 @@
                 "iconPath": "/static/tabbar/home.png",
                 "selectedIconPath": "/static/tabbar/home2.png"
             },
+            {
+                "text": "卖书",
+                "pagePath": "pages/sell/index",
+                "iconPath": "/static/tabbar/home.png",
+                "selectedIconPath": "/static/tabbar/home2.png"
+            },
             {
                 "text": "我的",
                 "pagePath": "pages/mine/index",

pages/sell/index.vue

@@ -0,0 +1,25 @@
+<template>
+	<view>
+		<sell-container></sell-container>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	onLoad() {
+		
+	},
+	methods: {
+		
+	}
+}
+</script>
+
+<style>
+/* Empty style as content is in the component */
+</style>