EpicSoul/pages/index/readingBody.vue

<template>
	<view class="bg">
		<headerVue />

		<view class="top-box">
			<swiper class="carousel-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
				@change="onSwiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.img" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="exhibit-issue">issue/0{{ currentIndex + 1 }}</view>
			<!-- 底部指示点 -->
			<view class="custom-indicators">
				<view v-for="(_, index) in swiperList" :key="index"
					:class="['indicator-dot', {'active': index === currentIndex}]"></view>
			</view>
		</view>
		
		<scroll-view scroll-x="true" show-scrollbar="false">
			<view class="category-scroll">
				<image v-for="(item,index) in categories" :key="index" :src="item"></image>
			</view>
		</scroll-view>
		
		<view class="title-box">
			全部阅读
			<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/titleSpan.png" mode=""></image>
		</view>
		
		<view class="reading-title flex-between">
			<view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item}}</view>
			<span :style="{left: readingIndex == 0 ? '32rpx' : (readingIndex == 1 ? '245rpx' : '448rpx')}"></span>
		</view>
		<view class="reading-box">
			<image v-for="(item,index) in readingList" :key="index" :src="item"></image>
		</view>
		
		<CustomTabBar :currentTab="1" />
	</view>
</template>

<script>
	import headerVue from "@/components/header.vue";
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			headerVue,
			CustomTabBar
		},
		data() {
			return {
				swiperList: [{
						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
					},
					{
						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
					},
					{
						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
					},
					{
						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
					}
				],
				currentIndex: 0,
				categories: [
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png'
				],
				readingList: [
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png'
				],
				readingType: ['2025', '2026', '更多'],
				readingIndex: 0
			}
		},
		methods: {
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			changeType(index) {
				this.readingIndex = index
				console.log(index,this.readingIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		padding-bottom: 200rpx;
	}

	.top-box {
		margin: 60rpx 40rpx 0;
		height: 830rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding-top: 10rpx;
		background-color: #fff;
	}

	.carousel-swiper {
		width: 582.13rpx;
		height: 706.24rpx;
		margin: -40rpx auto 0;

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

	.exhibit-issue {
		font-family: serif;
		font-size: 28rpx;
		color: #999;
		font-style: italic;
		padding: 40rpx 30rpx 0 0;
		text-align: right;
	}

	.custom-indicators {
		display: flex;
		justify-content: center;
		gap: 8rpx;
		margin-top: 40rpx;

		.indicator-dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: rgba(150, 150, 150, 0.5);
			transition: all 0.3s;
		}

		.indicator-dot.active {
			width: 20rpx;
			background-color: rgb(133, 133, 133);
		}
	}
	
	.category-scroll {
		padding: 40rpx 0 0 40rpx;
		display: flex;
		
		image {
			width: 520rpx;
			height: 260rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	}
	
	.title-box {
		font-size: 36rpx;
		font-weight: 500;
		margin-top: 40rpx;
		padding-left: 60rpx;
		
		image {
			width: 185.85rpx;
			height: 20.98rpx;
			margin-left: 21rpx;
		}
	}
	
	.reading-title {
		margin: 60rpx auto 0;
		width: 585rpx;
		height: 30rpx;
		border-radius: 15rpx;
		background-color: rgba(46, 220, 78, .8);
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		padding: 0 55rpx;
		position: relative;
		
		view {
			position: absolute;
			z-index: 20;
			bottom: 15rpx;
		}
		&>view:nth-child(2) {
			left: 268rpx;
		}
		&>view:nth-child(3) {
			right: 55rpx;
		}
		
		span {
			width: 111rpx;
			height: 100%;
			background-color: rgb(9, 154, 60);
			border-radius: 15rpx;
			position: absolute;
			left: 32rpx;
		}
	}
	
	.reading-box {
		margin: 0 40rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		padding: 35rpx 20rpx 5rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		top: -15rpx;
		background-color: #fff;
		
		image {
			width: 188rpx;
			height: 335rpx;
			margin-bottom: 30rpx;
		}
	}
</style>