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

<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<view class="calendar-icon">
					<uv-icon name="calendar" color="#ffffff" size="44rpx"></uv-icon>
				</view>
			</view>
			<view class="navbar-center" @click="toSearch">
				<view class="search-box">
					<uv-icon name="search" color="#999999" size="32rpx"></uv-icon>
					<text class="search-placeholder">请输入搜索内容</text>
				</view>
			</view>
			<view class="navbar-right">
				<view class="function-btn">
					<uv-icon name="more-dot-fill" color="#ffffff" size="44rpx"></uv-icon>
				</view>
				<view class="function-btn">
					<uv-icon name="chat-fill" color="#ffffff" size="44rpx"></uv-icon>
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 顶部横幅广告 -->
			<view class="banner">
				<uv-swiper 
					:list="bannerList" 
					keyName="image"
					:autoplay="true"
					:circular="true"
					:interval="3000"
					radius="10"
					:height="400"
					indicatorActiveColor="#ffffff"
					indicatorInactiveColor="rgba(255, 255, 255, 0.5)"
					@click="clickBanner"
				>
					<template v-slot:default="{item}">
						<view class="swiper-item">
							<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
							<view class="swiper-content">
								<view class="swiper-title">{{item.title}}</view>
								<view class="swiper-desc">{{item.desc}}</view>
							</view>
						</view>
					</template>
				</uv-swiper>
			</view>

			<!-- 通知区域 -->
			<view class="notice" @click="viewNotice">
				<view class="notice-left">
					<view class="notice-icon">
						<image src="/static/image/home/notice.png" mode="aspectFill"></image>
					</view>
					<view class="">
						全部共告
					</view>
				</view>
				<view class="notice-center">
					<view class="notice-tag">通讯</view>
					<view class="notice-text" @click="viewNotice">
						2025年2月平台福利活动截稿作品公示
					</view>
				</view>
				<view class="notice-right">
					<uv-icon name="arrow-right" color="#999" size="24rpx"></uv-icon>
				</view>
			</view>

			<!-- 最近更新 -->

			<view class="section">
				<view class="section-header">
					<text class="section-title">最近更新</text>

				</view>
                <scroll-view scroll-x style="width: 100%;">
                    <view class="recommend-list">
						<view class="recommend-item" 
						@click="navigateToDetail(item.id)"
						v-for="(item, index) in novelList" :key="index">
							<novel-item horizontal :key="index" :book="item" />
						</view>
                    </view>
                </scroll-view>
			</view>
		</view>

		<!-- 精品推荐 -->
		<view class="section1">
			<view class="section-header">
				<text class="section-title">精品推荐</text>
				<text class="section-more" @click="$utils.navigateTo('/pages/index/category')">查看更多 ></text>
			</view>
			<view class="novel-list">
				<novel-item v-for="(item, index) in novelList" 
                @click="navigateToDetail(item.id)"
                :key="index" :book="item" />
			</view>
		</view>


		<PrivacyAgreementPoup />

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

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
    import novelItem from '@/components/novel/novelItem.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			tabber,
			PrivacyAgreementPoup,
            novelItem,
		},
		data() {
			return {
				// 轮播图数据
				bannerList: [
					{
						id: '3',
						image: 'https://img95.699pic.com/photo/50055/5909.jpg_wh300.jpg',
						title: '我有一座妖怪城',
						desc: '妖怪横行，一座神秘古城，藏着千年秘密'
					}
				],
				// 小说列表数据
				novelList: [
					{
						id: '1',
						title: '我是半妖',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
						author: '东方不败',
						desc: '都市玄幻小说，主角获得半妖化能力，通过吸收妖气不断变强...',
						tags: ['玄幻', '都市', '热血'],
						status: '连载中'
					},
					{
						id: '2',
						title: '兽王进化',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
						author: '天下霸唱',
						desc: '一场意外让主角获得兽王血脉，开始了进化之路...',
						tags: ['奇幻', '冒险'],
						status: '连载中'
					},
					{
						id: '3',
						title: '魔法少女纯爷们',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
						author: '南派三叔',
						desc: '一个普通男孩意外获得魔法少女的力量，开始了奇妙冒险...',
						tags: ['搞笑', '奇幻'],
						status: '已完结'
					},
					{
						id: '4',
						title: '我是一条小青龙',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
						author: '辰东',
						desc: '重生为一条小青龙，主角在修仙世界中成长的故事...',
						tags: ['仙侠', '修真'],
						status: '连载中'
					},
					{
						id: '5',
						title: '女帝归来',
						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
						author: '猫腻',
						desc: '曾经的女帝重生归来，开始了复仇之路...',
						tags: ['古代', '女强'],
						status: '连载中'
					}
				]
			}
		},
		computed: {},
		methods: {
			// 跳转到搜索页面
			toSearch() {
				this.$utils.navigateTo('/pages/search/index')
			},
			// 点击轮播图
			clickBanner(index) {
				// const banner = this.bannerList[index];
				// console.log('点击了轮播图:', banner.title);
				// // 跳转到小说详情页
				// uni.showToast({
				// 	title: '正在前往: ' + banner.title,
				// 	icon: 'none'
				// })
				// setTimeout(() => {
				// 	this.$utils.navigateTo(`/pages_order/book/bookDetail?id=${banner.id}`)
				// }, 500)
			},
			// 查看公告详情
			viewNotice() {
				uni.navigateTo({
					url: '/pages_order/announcement/announcements'
				})
			},
			navigateToDetail(id) {
				// 跳转到小说详情页
				this.$utils.navigateTo(`/pages_order/novel/novelDetail?id=${id}`)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f5f5f5;
		// min-height: 100vh;

		/* 自定义导航栏样式 */
		.custom-navbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 20rpx 20rpx;
			background-color: #001351; /* 深蓝色背景 */
			height: 160rpx;
			box-sizing: border-box;
			position: sticky;
			top: 0;
			z-index: 99;
			padding-top: calc(var(--status-bar-height) + 20rpx);
			
			.navbar-left {
				width: 80rpx;
				display: flex;
				justify-content: center;
				.calendar-icon {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.navbar-center {
				flex: 1;
				margin: 0 20rpx;
				
				.search-box {
					display: flex;
					align-items: center;
					background-color: rgba(255, 255, 255, 0.95);
					border-radius: 40rpx;
					padding: 0 30rpx;
					height: 70rpx;
					box-sizing: border-box;
					
					.search-placeholder {
						color: #999;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
				}
			}
			
			.navbar-right {
				display: flex;
				align-items: center;
				
				.function-btn {
					margin-left: 16rpx;
					width: 50rpx;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.content {
			padding-bottom: 5rpx;
		}

		.banner {
			padding: 0;
			margin: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.98);
			}
			
			.swiper-item {
				position: relative;
				width: 100%;
				height: 100%;
				
				.swiper-image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				
				.swiper-content {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					padding: 30rpx;
					background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3), transparent);
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					
					.swiper-title {
						font-size: 36rpx;
						color: #fff;
						font-weight: bold;
						margin-bottom: 10rpx;
						text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
					}
					
					.swiper-desc {
						font-size: 28rpx;
						color: rgba(255,255,255,0.9);
						line-height: 1.4;
						text-shadow: 0 1rpx 3rpx rgba(0,0,0,0.5);
					}
				}
			}
		}

		.notice {
			display: flex;
			align-items: center;
			background-color: #fff;
			margin: 20rpx;
            margin-bottom: 0;
			padding: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
			transition: all 0.2s;
			
			&:active {
				background-color: #f9f9f9;
			}

			.notice-left {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
                flex-direction: column;
                font-size: 22rpx;
                width: 90rpx;
                justify-content: center;
				.notice-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.notice-center {
				flex: 1;
                
				.notice-tag {
					font-size: 22rpx;
					color: #666;
					background-color: #f5f5f5;
					padding: 4rpx 12rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
                    width: fit-content;
                    margin-bottom: 10rpx;
				}
				
				.notice-text {
					font-size: 26rpx;
					color: #333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.notice-right {
				margin-left: 20rpx;
				opacity: 0.6;
			}
		}

		.section {
			background-color: #fff;
			margin: 30rpx 0 0 0;
			padding: 10rpx 30rpx;
			border-radius: 0;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.section-more {
					font-size: 24rpx;
					color: #999;
				}
			}

			.novel-list {
				.novel-item {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}

					.novel-cover {
						width: 160rpx;
						height: 200rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}

					.novel-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.novel-title {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}

						.novel-desc {
							font-size: 24rpx;
							color: #999;
							line-height: 1.5;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
						}
					}
				}
			}

			.recommend-list {
				display: flex;

				.recommend-item {
					width: fit-content;
				}
			}
		}

		.section1 {
			background-color: #fff;
			margin: 0rpx 0 0 0;
			padding: 20rpx 30rpx;
			border-radius: 0;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.section-more {
					font-size: 24rpx;
					color: #999;
				}
			}

			.novel-list {
				.novel-item {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}

					.novel-cover {
						width: 160rpx;
						height: 200rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}

					.novel-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.novel-title {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}

						.novel-desc {
							font-size: 24rpx;
							color: #999;
							line-height: 1.5;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
						}
					}
				}
			}

			.recommend-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.recommend-item {
					width: 30%;
					margin-bottom: 20rpx;

					.recommend-cover {
						width: 100%;
						height: 200rpx;
						border-radius: 8rpx;
						margin-bottom: 10rpx;
					}

					.recommend-title {
						font-size: 24rpx;
						color: #333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>