baiyuApp/pages_enter/novel.vue

<template>
	<view class="novel-page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-back" @click="handleBack">
				<image class="w64 h64" src="@/static/images/enter/back_white_icon24.png"></image>
			</view>
			<view class="nav-title">小说</view>
			<view class="nav-actions">
				<view class="nav-icon-btn" @click="handleRefresh">
					<image class="w48 h48" src="@/static/images/enter/share_icom24.png"></image>
				</view>
				<view class="nav-icon-btn" @click="handleBookshelf">
					<image class="w32 h32" src="@/static/images/enter/shujia_icon16.png"></image>
					<text class="nav-icon-text">书架</text>
				</view>
			</view>
		</view>
		
		<!-- 页面内容 -->
		<scroll-view class="page-content" scroll-y>
			<!-- 分类标签栏 -->
			<view class="category-tabs">
				<scroll-view class="tabs-scroll" scroll-x>
					<view class="tabs-wrapper">
						<view 
							class="tab-item" 
							v-for="(tab, index) in categoryTabs" 
							:key="index"
							:class="{ active: currentTabIndex === index, 'tab-recommend': index === 0 }"
							@click="handleTabClick(index)"
						>
							<text class="flame-icon" v-if="index === 0">🔥</text>
							<text class="tab-text">{{ tab.name }}</text>
							<text class="flame-icon" v-if="index === 0">🔥</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 推荐榜 -->
			<view class="recommend-section">
				<view class="section-header">
					<text class="flame-icon">🔥</text>
					<text class="section-title">推荐榜</text>
					<text class="flame-icon">🔥</text>
				</view>
				<view class="recommend-list">
					<view 
						class="recommend-item" 
						v-for="(book, index) in recommendList" 
						:key="index"
						@click="handleBookClick(book)"
					>
						<view class="item-number">{{ index + 1 }}</view>
						<view class="item-cover-wrapper">
							<image class="item-cover" :src="book.cover" mode="aspectFill"></image>
							<view class="cover-tag" v-if="book.tag">{{ book.tag }}</view>
						</view>
						<view class="item-info">
							<view class="item-title">{{ book.title }}</view>
							<view class="item-desc">{{ book.desc }}</view>
							<view class="item-category">{{ book.category }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 故事精选 -->
			<view class="featured-section">
				<view class="section-header">
					<text class="section-title">故事精选</text>
				</view>
				<view class="featured-list">
					<view 
						class="featured-item" 
						v-for="(story, index) in featuredList" 
						:key="index"
						@click="handleStoryClick(story)"
					>
						<view class="story-cover-wrapper">
							<image class="story-cover" :src="story.cover" mode="aspectFill"></image>
							<view class="story-tag" v-if="story.tag">{{ story.tag }}</view>
						</view>
						<view class="story-info">
							<view class="story-title">{{ story.title }}</view>
							<view class="story-desc">{{ story.desc }}</view>
							<view class="story-category">{{ story.category }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部安全区域 -->
			<view class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			safeAreaBottom: 0,
			currentTabIndex: 1, // 默认选中"全部"
			categoryTabs: [
				{ name: '推荐榜' },
				{ name: '全部' },
				{ name: '悬疑' },
				{ name: '古代言情' },
				{ name: '现代言情' },
				{ name: '都市' },
				{ name: '玄幻' },
				{ name: '科幻' }
			],
			recommendList: [
				{
					id: 1,
					title: '刚穿越成超被...',
					desc: 'best of times, worst of times, reborn...',
					category: '现代都市',
					cover: '/static/image/default/novel1.jpg',
					tag: null
				},
				{
					id: 2,
					title: '我的叔叔堂吉诃德',
					desc: 'Li Wei, parents passed away, huge debt...',
					category: '现代都市',
					cover: '/static/image/default/novel2.jpg',
					tag: null
				},
				{
					id: 3,
					title: '末世农场主系统...',
					desc: 'resigned, inherited farm, bound system...',
					category: '现代都市',
					cover: '/static/image/default/novel3.jpg',
					tag: null
				},
				{
					id: 4,
					title: '诸天穿...',
					desc: 'best of times, worst of times',
					category: '现代都市',
					cover: '/static/image/default/novel4.jpg',
					tag: '起点读书'
				},
				{
					id: 5,
					title: '从高三开...',
					desc: 'Financial Freedom Starting from High School Year 3',
					category: '现代都市',
					cover: '/static/image/default/novel5.jpg',
					tag: '起点读书'
				},
				{
					id: 6,
					title: '都重生了...',
					desc: 'Everyone is Reborn, I Must Become an Internet Celebrity',
					category: '现代都市',
					cover: '/static/image/default/novel6.jpg',
					tag: '起点读书'
				}
			],
			featuredList: [
				{
					id: 1,
					title: '海棠瘦尽春未晚',
					desc: 'haven\'t been home for years, uncle\'s family asked me to go home for Chinese New Year...',
					category: '现代都市',
					cover: '/static/image/default/story1.jpg',
					tag: null
				},
				{
					id: 2,
					title: '生还者偏差',
					desc: 'reborn in the past, envision the future, dream reality, reshape a legendary life!...',
					category: '都市超自然',
					cover: '/static/image/default/story2.jpg',
					tag: '起点 9万人在追'
				},
				{
					id: 3,
					title: '海棠瘦尽春未晚',
					desc: 'haven\'t been home for years, uncle\'s family asked me to go home for Chinese New Year...',
					category: '现代都市',
					cover: '/static/image/default/story1.jpg',
					tag: null
				},
				{
					id: 4,
					title: '生还者偏差',
					desc: 'reborn in the past, envision the future, dream reality, reshape a legendary life!...',
					category: '都市超自然',
					cover: '/static/image/default/story2.jpg',
					tag: '起点 9万人在追'
				}
			]
		}
	},
	onLoad() {
		this.getSystemInfo();
	},
	methods: {
		getSystemInfo() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			if (systemInfo.safeArea) {
				this.safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom;
			}
		},
		handleBack() {
			uni.navigateBack();
		},
		handleRefresh() {
			uni.showToast({
				title: '刷新中...',
				icon: 'none'
			});
		},
		handleBookshelf() {
			uni.showToast({
				title: '我的书架',
				icon: 'none'
			});
		},
		handleTabClick(index) {
			this.currentTabIndex = index;
			// 这里可以加载对应分类的数据
		},
		handleBookClick(book) {
			uni.showToast({
				title: `打开${book.title}`,
				icon: 'none'
			});
		},
		handleStoryClick(story) {
			uni.showToast({
				title: `打开${story.title}`,
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.novel-page {
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}

.status-bar {
	width: 100%;
	background-color: #ffffff;
}

.nav-bar {
	width: 100%;
	height: 88rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	
	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.nav-actions {
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.nav-icon-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 60rpx;
			
			.nav-icon-text {
				font-size: 20rpx;
				color: #333333;
				margin-top: 4rpx;
				line-height: 1;
			}
		}
	}
}

.page-content {
	flex: 1;
	width: 100%;
}

// 分类标签栏
.category-tabs {
	width: 100%;
	padding: 20rpx 0;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tabs-scroll {
		width: 100%;
		white-space: nowrap;
	}
	
	.tabs-wrapper {
		display: flex;
		padding: 0 30rpx;
		gap: 20rpx;
	}
	
	.tab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 24rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		white-space: nowrap;
		font-size: 28rpx;
		color: #333333;
		transition: all 0.3s ease;
		
		.tab-text {
			margin: 0 8rpx;
		}
		
		.flame-icon {
			font-size: 24rpx;
		}
		
		&.tab-recommend {
			background-color: #FFF4E6;
		}
		
		&.active {
			background-color: #FF6B35;
			color: #ffffff;
			
			.flame-icon {
				display: none;
			}
		}
	}
}

// 推荐榜
.recommend-section {
	width: 100%;
	padding: 40rpx 30rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		
		.flame-icon {
			font-size: 32rpx;
			margin: 0 10rpx;
		}
		
		.section-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}
	}
	
	.recommend-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx 20rpx;
	}
	
	.recommend-item {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.item-number {
		position: absolute;
		top: -10rpx;
		left: 10rpx;
		width: 48rpx;
		height: 48rpx;
		background-color: #FF6B35;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 600;
		color: #ffffff;
		z-index: 2;
	}
	
	.item-cover-wrapper {
		width: 100%;
		height: 240rpx;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.item-cover {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
	}
	
	.cover-tag {
		position: absolute;
		bottom: 8rpx;
		left: 8rpx;
		background-color: #FF4757;
		color: #ffffff;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
	}
	
	.item-info {
		display: flex;
		flex-direction: column;
	}
	
	.item-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.item-desc {
		font-size: 22rpx;
		color: #999999;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
	}
	
	.item-category {
		display: inline-block;
		background-color: #FFF4E6;
		color: #FF6B35;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		width: fit-content;
	}
}

// 故事精选
.featured-section {
	width: 100%;
	padding: 40rpx 30rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}
	}
	
	.featured-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx 20rpx;
	}
	
	.featured-item {
		display: flex;
		flex-direction: column;
	}
	
	.story-cover-wrapper {
		width: 100%;
		height: 320rpx;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.story-cover {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
	}
	
	.story-tag {
		position: absolute;
		bottom: 8rpx;
		left: 8rpx;
		background-color: #FF4757;
		color: #ffffff;
		padding: 6rpx 12rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
	}
	
	.story-info {
		display: flex;
		flex-direction: column;
	}
	
	.story-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.story-desc {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		line-height: 1.5;
	}
	
	.story-category {
		display: inline-block;
		background-color: #FFF4E6;
		color: #FF6B35;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		width: fit-content;
	}
}

.safe-area-bottom {
	width: 100%;
	height: 40rpx;
}
</style>