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

<template>
	<view class="page">
		
		<view class="header">
			<view class="tab-container">
				<view class="tab active">阅读</view>
				<view class="tab">作品</view>
			</view>
			
		</view>
		
		<view class="novel-grid">
			<!-- 第一行小说 -->
			<view class="novel-row">
				<!-- 小说1 -->
				<view class="novel-item" @click="toNovelDetail('1')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">我是半妖</view>
				</view>
				
				<!-- 小说2 -->
				<view class="novel-item" @click="toNovelDetail('2')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">兽王进化：从被小萝莉召唤开始</view>
				</view>
				
				<!-- 小说3 -->
				<view class="novel-item" @click="toNovelDetail('3')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">魔法少女纯爷们</view>
				</view>
			</view>
			
			<!-- 第二行小说 -->
			<view class="novel-row">
				<!-- 小说4 -->
				<view class="novel-item" @click="toNovelDetail('4')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"></image>
					<view class="novel-title">我是一条小青龙</view>
				</view>
				
				<!-- 小说5 -->
				<view class="novel-item" @click="toNovelDetail('5')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"></image>
					<view class="novel-title">女帝：别闹，朕怀孕了！</view>
				</view>
				
				<!-- 小说6 -->
				<view class="novel-item" @click="toNovelDetail('6')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">中国式应酬——应酬是门技术活</view>
				</view>
			</view>
			
			<!-- 第三行小说 -->
			<view class="novel-row">
				<!-- 小说7 -->
				<view class="novel-item" @click="toNovelDetail('7')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">苏世民：我的经验与教训</view>
				</view>
				
				<!-- 小说8 -->
				<view class="novel-item" @click="toNovelDetail('8')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">认知觉醒：开启自我改变的原动力</view>
				</view>
				
				<!-- 小说9 -->
				<view class="novel-item" @click="toNovelDetail('9')">
					<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
					<view class="novel-title">纳瓦尔宝典</view>
				</view>
			</view>
		</view>
		
		<tabber select="book"/>
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import { mapGetters } from 'vuex'
	export default {
		components : {
			tabber,
		},
		computed : {
			...mapGetters(['userShop']),
		},
		data() {
			return {
				novels: [
					{
						id: '1',
						title: '我是半妖',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '2',
						title: '兽王进化：从被小萝莉召唤开始',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '3',
						title: '魔法少女纯爷们',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '4',
						title: '我是一条小青龙',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '5',
						title: '女帝：别闹，朕怀孕了！',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '6',
						title: '中国式应酬——应酬是门技术活',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '7',
						title: '苏世民：我的经验与教训',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '8',
						title: '认知觉醒：开启自我改变的原动力',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					},
					{
						id: '9',
						title: '纳瓦尔宝典',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'
					}
				]
			}
		},
		onShow() {
			// 页面显示时的逻辑
		},
		methods: {
			// 跳转到小说详情页
			toNovelDetail(id) {
				uni.navigateTo({
					url: '/pages_order/novel/novelDetail?id=' + id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 30rpx;
		
		.tab-container {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			
			.tab {
				margin-right: 30rpx;
				color: #999;
				
				&.active {
					color: #000;
					font-weight: bold;
					font-size: 36rpx;
				}
			}
		}
		
		.icons {
			display: flex;
			align-items: center;
			
			.icon {
				margin-right: 20rpx;
			}
		}
	}
	
	.novel-grid {
		padding: 10rpx 30rpx;
		
		.novel-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			
			.novel-item {
				width: 31%;
				
				.novel-cover {
					width: 100%;
					height: 240rpx;
					border-radius: 16rpx;
					box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
				}
				
				.novel-title {
					font-size: 24rpx;
					margin-top: 16rpx;
					line-height: 1.4;
					height: 64rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					color: #333;
				}
			}
		}
	}
</style>