feat(推荐): 新增推荐图书专题页面及组件

- 添加推荐图书专题页面和推荐项组件
- 更新导航栏组件样式和功能
- 修改热销商品页面布局和样式
- 添加静态资源文件
- 更新页面路由配置

components/navbar/navbar.vue

@@ -5,9 +5,11 @@
 		:custom-back="backFunction"
 		:back-icon-color="$appTheme.appThemeTextBlackColor"
 		:title-color="$appTheme.appThemeTextBlackColor"
+		:title-size="32"
 		:is-back="isback"
-		:back-icon-size="32"
+		:back-icon-size="36"
 		:border-bottom="false"
+		:background="{background: background}"
 	></u-navbar>
 </template>
 
@@ -18,7 +20,7 @@ export default {
 		// 返回图标名称
 		backIconName: {
 			type: String,
-			default: 'arrow-leftward'
+			default: 'arrow-left'
 		},
 		// 标题
 		title: {
@@ -34,6 +36,10 @@ export default {
 			type: Boolean,
 			default: true
 		},
+		background: {
+			type: String,
+			default: 'transparent'
+		}
 	}
 };
 </script>

pages-sell/components/hot-sell-item/index.vue

@@ -53,7 +53,7 @@ export default {
 	display: flex;
 	align-items: center;
 	padding: 30rpx 0;
-	border-bottom: 1rpx solid #F0F0F0;
+	border-bottom: 1rpx solid #f6f7f8;
 
 	.rank-col {
 		width: 80rpx;
@@ -124,9 +124,10 @@ export default {
 					align-items: baseline;
 
 					.currency {
-						font-size: 24rpx;
+						font-size: 36rpx;
 						color: #D81A00;
 						font-weight: bold;
+						margin-right: 6rpx;
 					}
 
 					.price {

pages-sell/components/recommend-item/index.vue

@@ -0,0 +1,181 @@
+<template>
+	<view class="recommend-item">
+		<!-- Main Info Row -->
+		<view class="main-info">
+			<image :src="item.cover" class="book-cover" mode="aspectFill"></image>
+
+			<view class="info-right">
+				<view class="title-author">
+					<view class="title-row">
+						<text class="title">{{ item.title }}</text>
+						<!-- Assuming share icon is only at page top, based on typical designs, 
+						     but if it's per item, I'd add it here. 
+						     The prompt image 1 shows a share icon at the top right of the page header. 
+						     I'll leave it out of the item for now unless I see otherwise. -->
+					</view>
+					<text class="author">{{ item.author }}</text>
+				</view>
+
+				<view class="price-action">
+					<view class="price-box">
+						<text class="currency">¥</text>
+						<text class="price">{{ item.price }}</text>
+						<text class="original">¥{{ item.originalPrice }}</text>
+					</view>
+
+					<view class="cart-btn" @click.stop="handleAddToCart">
+						<text>加入购物车</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- Description Row -->
+		<view class="desc-section">
+			<view class="desc-header">
+				<text class="label">简介</text>
+				<view class="indicator"></view>
+			</view>
+			<text class="desc-content">{{ item.desc || '暂无简介' }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'RecommendItem',
+	props: {
+		item: {
+			type: Object,
+			required: true
+		}
+	},
+	methods: {
+		handleAddToCart() {
+			this.$emit('add-cart', this.item);
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.recommend-item {
+	padding: 30rpx 0;
+	border-bottom: 1rpx dashed #EEEEEE;
+
+	.main-info {
+		display: flex;
+		margin-bottom: 30rpx;
+
+		.book-cover {
+			width: 172rpx;
+			height: 220rpx;
+			border-radius: 8rpx;
+			background-color: #f5f5f5;
+			margin-right: 24rpx;
+			flex-shrink: 0;
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+		}
+
+		.info-right {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 4rpx 0;
+
+			.title-author {
+				.title {
+					font-size: 32rpx;
+					font-weight: bold;
+					color: #333;
+					margin-bottom: 12rpx;
+					display: block;
+					line-height: 1.4;
+				}
+
+				.author {
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+
+			.price-action {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+
+				.price-box {
+					.currency {
+						font-size: 24rpx;
+						color: #FF4B4B;
+						font-weight: bold;
+					}
+
+					.price {
+						font-size: 36rpx;
+						color: #FF4B4B;
+						font-weight: bold;
+						margin-right: 12rpx;
+					}
+
+					.original {
+						font-size: 24rpx;
+						color: #999;
+						text-decoration: line-through;
+					}
+				}
+
+				.cart-btn {
+					background: #38C248;
+					border-radius: 30rpx;
+					height: 60rpx;
+					line-height: 60rpx;
+					padding: 0 24rpx;
+
+					text {
+						font-size: 26rpx;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+
+	.desc-section {
+		.desc-header {
+			position: relative;
+			display: inline-block;
+			margin-bottom: 16rpx;
+
+			.label {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #333;
+				position: relative;
+				z-index: 1;
+			}
+
+			.indicator {
+				position: absolute;
+				bottom: 4rpx;
+				right: 4rpx;
+				width: 30rpx;
+				height: 8rpx;
+				background: #4ED964;
+				border-radius: 4rpx;
+				z-index: 0;
+			}
+		}
+
+		.desc-content {
+			font-family: Source Han Sans SC;
+			font-size: 26rpx;
+			color: #8D8D8D;
+			line-height: 1.6;
+			display: block;
+			text-align: justify;
+		}
+	}
+}
+</style>

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

@@ -63,7 +63,7 @@
 
 				<!-- 右侧：热销商品 -->
 				<view class="card-right">
-					<view class="right-header" @click="goHotSell">
+					<view class="right-header" @click="navigateTo('/pages-sell/pages/hot-sell')">
 						<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>
@@ -109,7 +109,7 @@
 			</view>
 
 			<!-- 书嗨推荐 -->
-			<view class="recommend-section">
+			<view class="recommend-section" @click="navigateTo('/pages-sell/pages/recommend')">
 				<view class="section-header">
 					<text class="section-title">书嗨推荐</text>
 					<view class="view-more">
@@ -200,6 +200,18 @@ export default {
 			this.currentHotTag = index;
 			console.log('切换标签:', index);
 		},
+		//跳转 URL
+		navigateTo(url) {
+			uni.navigateTo({
+				url: url
+			});
+		},
+
+		goRecommend() {
+			uni.navigateTo({
+				url: '/pages-sell/pages/recommend'
+			});
+		},
 		goHotSell() {
 			uni.navigateTo({
 				url: '/pages-sell/pages/hot-sell'

pages-sell/pages/hot-sell.vue

@@ -4,14 +4,10 @@
 		<image class="header-bg" src="/pages-sell/static/hot/top-bg.png" mode="widthFix"></image>
 		
 		<!-- Custom Navbar -->
-		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-			<view class="navbar-content">
-				<image src="/pages-sell/static/hot/icon-back.png" class="back-icon" @click="goBack"></image>
-			</view>
-		</view>
+		<Navbar></Navbar>
 
 		<!-- Header Content -->
-		<view class="header-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
+		<view class="header-content">
 			<view class="title-area">
 				<text class="main-title">热销榜单</text>
 				<text class="sub-title">Best Sellers</text>
@@ -32,10 +28,12 @@
 
 <script>
 import HotSellItem from '../components/hot-sell-item/index.vue'
+import Navbar from '@/components/navbar/navbar.vue'
 
 export default {
 	components: {
-		HotSellItem
+		HotSellItem,
+		Navbar
 	},
 	data() {
 		return {
@@ -117,6 +115,7 @@ export default {
 	top: 0;
 	left: 0;
 	width: 100%;
+	height: 458rpx;
 	z-index: 0;
 }
 
@@ -148,6 +147,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	margin-top: -20rpx;
 
 	.title-area {
 		.main-title {
@@ -169,7 +169,7 @@ export default {
 	z-index: 1;
 	background-color: #fff;
 	border-radius: 40rpx 40rpx 0 0; /* Rounded top corners for list area */
-	margin-top: 0rpx;
+	margin-top: -16rpx;
 	padding: 30rpx 40rpx;
 	min-height: 500rpx;
 }

pages-sell/pages/recommend.vue

@@ -0,0 +1,159 @@
+<template>
+    <view class="recommend-page">
+        <!-- Header Background Image -->
+        <!-- User specified 363rpx x 251rpx. Assuming top-right positioning or similar based on typical designs -->
+        <image class="header-bg" src="/pages-sell/static/recommend/top-bg.png" mode="aspectFit"></image>
+
+        <!-- Custom Navbar -->
+        <Navbar title="推荐图书专题"></Navbar>
+
+        <!-- Header Content -->
+        <view class="header-content">
+            <image class="header-image" :src="imageUrl" mode="aspectFill"></image>
+            <view class="header-desc">
+                <view class="title-row">
+                    <text class="title-text">山河岁月</text>
+                    <image class="share-icon" src="/pages-sell/static/recommend/icon-share.png" mode="aspectFit"></image>
+                </view>
+                <text class="desc-text">《命若等弦》是一部微文集，作者是史铁生.作者史铁生曾发去文学作品《我的还远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体。</text>
+            </view>
+        </view>
+
+        <!-- List Content -->
+        <view class="list-container">
+            <recommend-item v-for="(item, index) in bookList" :key="index" :item="item"></recommend-item>
+        </view>
+    </view>
+</template>
+
+<script>
+import RecommendItem from '../components/recommend-item/index.vue'
+import Navbar from '@/components/navbar/navbar.vue';
+
+export default {
+    components: {
+        RecommendItem,
+        Navbar
+    },
+    data() {
+        return {
+            imageUrl: "https://img.yzcdn.cn/vant/cat.jpeg",
+            bookList: [
+                {
+                    title: '山河岁月',
+                    author: '本书编写组',
+                    price: '6.80',
+                    originalPrice: '36.80',
+                    cover: 'https://img.yzcdn.cn/vant/cat.jpeg', // Placeholder or use local if available
+                    desc: '《命若琴弦》是一部微文集，作者是史铁生。作者史铁生曾发表文学作品《我的遥远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，去达出的却是存在的明朗和欢乐。他喜智的言辞，照亮的反而是我们日益围暗的内心。'
+                },
+                {
+                    title: '山河岁月',
+                    author: '本书编写组',
+                    price: '6.80',
+                    originalPrice: '36.80',
+                    cover: 'https://img.yzcdn.cn/vant/cat.jpeg',
+                    desc: '《命若琴弦》是一部微文集，作者是史铁生。作者史铁生曾发表文学作品《我的遥远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，去达出的却是存在的明朗和欢乐。他喜智的言辞，照亮的反而是我们日益围暗的内心。'
+                },
+                {
+                    title: '山河岁月',
+                    author: '本书编写组',
+                    price: '6.80',
+                    originalPrice: '36.80',
+                    cover: 'https://img.yzcdn.cn/vant/cat.jpeg',
+                    desc: '《命若琴弦》是一部微文集，作者是史铁生。作者史铁生曾发表文学作品《我的遥远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，去达出的却是存在的明朗和欢乐。他喜智的言辞，照亮的反而是我们日益围暗的内心。'
+                }
+            ]
+        }
+    },
+    methods: {
+        goBack() {
+            uni.navigateBack();
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.recommend-page {
+    min-height: 100vh;
+    background: linear-gradient(180deg, #EBF9F1 0%, #FFFFFF 400rpx);
+    /* Light green gradient to match theme */
+    position: relative;
+}
+
+.header-bg {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 624rpx;
+    z-index: 0;
+}
+
+.header-content {
+    position: relative;
+    z-index: 1;
+    padding: 30rpx 40rpx;
+    display: flex;
+    align-items: flex-start;
+    font-family: Source Han Sans SC;
+
+    .header-image {
+        width: 226rpx;
+        height: 300rpx;
+        border-radius: 4rpx;
+        box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.1);
+        flex-shrink: 0;
+    }
+
+    .header-desc {
+        flex: 1;
+        margin-left: 30rpx;
+        display: flex;
+        flex-direction: column;
+
+        .title-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 20rpx;
+
+            .title-text {
+                font-size: 40rpx;
+                font-weight: bold;
+                color: #333;
+                line-height: 1.2;
+            }
+
+            .share-icon {
+                width: 34rpx;
+                height: 34rpx;
+                flex-shrink: 0;
+                margin-left: 20rpx;
+                margin-top: 10rpx;
+            }
+        }
+
+        .desc-text {
+            font-size: 26rpx;
+            color: #666;
+            line-height: 1.6;
+            text-align: justify;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 6;
+            overflow: hidden;
+        }
+    }
+}
+
+.list-container {
+    position: relative;
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 40rpx 40rpx 0 0;
+    padding: 10rpx 40rpx;
+    min-height: calc(100vh - 200rpx);
+}
+</style>

pages.json

@@ -291,6 +291,13 @@
                         "navigationStyle": "custom",
                         "navigationBarTitleText": ""
                     }
+                },
+                {
+                    "path": "pages/recommend",
+                    "style": {
+                        "navigationStyle": "custom",
+                        "navigationBarTitleText": ""
+                    }
                 }
             ]
         }