novel-front-app/pages/index/category.vue

<template>
	<view class="page">
		<navbar title="书城"/>

		<view class="tabs-container">
			<scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
				<view class="tabs">
					<view class="tab-item" :class="{active: activeTab === 'ranking'}">
						<text>排行榜</text>
					</view>
					<view class="tab-item">
						<text>历史</text>
					</view>
					<view class="tab-item">
						<text>科幻</text>
					</view>
					<view class="tab-item">
						<text>异能</text>
					</view>
					<view class="tab-item">
						<text>逆袭</text>
					</view>
					<view class="tab-item">
						<text>娱乐圈</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="category">
			<view class="left-menu">
				<view class="menu-item active">
					<text>推荐榜</text>
				</view>
				<view class="menu-item">
					<text>完本榜</text>
				</view>
				<view class="menu-item">
					<text>阅读榜</text>
				</view>
				<view class="menu-item">
					<text>口碑榜</text>
				</view>
				<view class="menu-item">
					<text>新书榜</text>
				</view>
				<view class="menu-item">
					<text>高分榜</text>
				</view>
			</view>
			
			<view class="right-content">
				<view class="novel-list">
					<view class="novel-item" v-for="(item, index) in novelList" :key="index">
						<view class="rank-number" :class="{'top-rank': index < 3}">
							{{index + 1}}
						</view>
						<view class="novel-cover">
							<image :src="item.cover" mode="aspectFill"></image>
						</view>
						<view class="novel-info">
							<view class="novel-title">{{item.title}}</view>
							<view class="novel-tags">
								<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
							</view>
							<view class="novel-author">{{item.author}}</view>
						</view>
						<view class="novel-status">
							<text>{{item.status}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<tabber select="category" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'

	export default {
		components: {
			tabber,
		},
		data() {
			return {
				activeTab: 'ranking',
				novelList: [
					{
						title: '网游之绝世萧尊',
						author: '星梦辰缘',
						cover: '/static/image/novel/cover1.jpg',
						tags: ['玄幻', '校园', '热血'],
						status: '完结'
					},
					{
						title: '网游：1级的我，偷窃神明',
						author: '我是解药猫',
						cover: '/static/image/novel/cover2.jpg',
						tags: ['玄幻', '校园', '热血'],
						status: '连载中'
					},
					{
						title: '全民网游：我有神级造物主',
						author: '我吃西红柿',
						cover: '/static/image/novel/cover3.jpg',
						tags: ['玄幻', '校园', '热血'],
						status: '完结'
					},
					{
						title: '潜伏传说的我，携西罗摩修',
						author: '清风明月',
						cover: '/static/image/novel/cover4.jpg',
						tags: ['玄幻', '校园', '热血'],
						status: '完结'
					},
					{
						title: '网游之一杆定乾坤',
						author: '香蕉流文',
						cover: '/static/image/novel/cover5.jpg',
						tags: ['玄幻', '校园', '热血'],
						status: '连载中'
					},
					{
						title: '网游之一杆定乾坤',
						author: '香蕉流文',
						cover: '/static/image/novel/cover5.jpg',
						tags: ['玄幻', '校园', '热血'],
						status: '连载中'
					}
				]
			}
		},
		methods: {
			changeTab(tab) {
				this.activeTab = tab;
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f5f5f5;
	}
	
	.tabs-container {
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
	}
	
	.tabs-scroll {
		white-space: nowrap;
		width: 100%;
	}
	
	.tabs {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		
		.tab-item {
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #666;
			
			&.active {
				color: #2b5cff;
				font-weight: bold;
				position: relative;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #2b5cff;
				}
			}
		}
	}
	
	.category {
		display: flex;
		height: calc(100vh - 240rpx);
		
		.left-menu {
			width: 180rpx;
			background-color: #f5f5f5;
			
			.menu-item {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				
				&.active {
					background-color: #fff;
					color: #2b5cff;
					font-weight: bold;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 6rpx;
						height: 36rpx;
						background-color: #2b5cff;
					}
				}
			}
		}
		
		.right-content {
			flex: 1;
			background-color: #fff;
			padding: 20rpx;
			overflow-y: auto;
			
			.novel-list {
				.novel-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #eee;
					
					.rank-number {
						width: 40rpx;
						text-align: center;
						font-size: 32rpx;
						color: #999;
						font-weight: bold;
						
						&.top-rank {
							color: #ff6b00;
						}
					}
					
					.novel-cover {
						width: 120rpx;
						height: 160rpx;
						margin: 0 20rpx;
						
						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
					
					.novel-info {
						flex: 1;
						
						.novel-title {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}
						
						.novel-tags {
							display: flex;
							margin-bottom: 10rpx;
							
							.tag {
								font-size: 22rpx;
								color: #999;
								margin-right: 10rpx;
								
								&::before {
									content: '[';
								}
								
								&::after {
									content: ']';
								}
							}
						}
						
						.novel-author {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.novel-status {
						font-size: 24rpx;
						color: #67c23a;
					}
				}
			}
		}
	}
</style>