tongli_WeChat/subPackages/leyou/index.vue

<template>
	<view class="bg">
		<swiper class="swiper-box" :circular="true" previous-margin="0" next-margin="70rpx" :duration="800"
			:current="current" @change="swiperChange">
			<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item">
				<view class="swiper-item" :class="['swiper-item', {'active': index == current}]">
					<image :src="showImg(item.image)" mode="aspectFill" class="swiper-img"></image>
					<view class="content">
						<view class="title text-overflowRows">{{item.title}}</view>
						<view class="tags" v-if="item.label">
							<view class="tag" v-for="(tagItem, tagIndex) in item.label.split(',').slice(0,2)" :key="tagIndex">{{tagItem}}</view>
						</view>
						<view class="address text-overflowRows" v-if="item.address">
							<image src="https://static.ticket.sz-trip.com/tongli/images/index/location.png" mode=""></image>
							{{item.address}}
						</view>
						<navigator :url="'/subPackages/leyou/detail?id='+item.id" class="btn">
							查看更多 >
						</navigator>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="current-box">
			<view :class="['current-item', {'current-items': current == index}]" v-for="(item,index) in list" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				https://tlgz.sz-trip.com?scenic_type_id=11&offset=0&limit=10&lon=120&lat=30&token=96035795-fe93-4db8-8cf3-aeabbdb4e8c4
				this.Post({
					scenic_type_id: 12,
					offset: 0,
					limit: 100
				},'/api/Scenic/getScenicByType').then(res => {
					this.list = res.data
				})
			},
			//轮播图左右滑动
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				//在自动或手动的时候才赋予current值
				if (source === 'autoplay' || source === 'touch') {
					this.current = current;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		padding: 40rpx 0 0 40rpx;
	}
	
	.swiper-box {
		height: 1267rpx;
		
		.swiper-item {
			width: 640rpx;
			height: 1267rpx;
			border-radius: 27rpx;
			position: relative;
			
			.swiper-img {
				width: 100%;
				height: 100%;
				border-radius: 27rpx;
				position: absolute;
				left: 0;
				transform: scale(0.9);
			}
			
			.active {
				width: 640rpx;
				height: 1267rpx;
				
				.swiper-img {
					transform: scale(1);
				}
			}
			
			.content {
				position: absolute;
				width: 530rpx;
				left: 40rpx;
				bottom: 50rpx;
				
				.title {
					font-weight: 500;
					font-size: 44rpx;
					color: #FFFFFF;
				}
				
				.tags {
					display: flex;
					margin-top: 28rpx;
					
					.tag {
						line-height: 47rpx;
						border-radius: 8rpx;
						border: 1rpx solid #FFFFFF;
						padding: 0 12rpx;
						margin-right: 20rpx;
						font-weight: 500;
						font-size: 27rpx;
						color: #FFFFFF;
					}
				}
				
				.address {
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 28rpx;
					
					image {
						width: 30.67rpx;
						height: 36.67rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
				
				.btn {
					width: 253rpx;
					line-height: 73rpx;
					background: rgba(255, 255, 255, .26);
					border-radius: 37rpx;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 28rpx;
				}
			}
		}
	}
	
	.current-box {
		position: absolute;
		bottom: 70rpx;
		left: 0;
		display: flex;
		width: 750rpx;
		justify-content: center;
		
		.current-item {
			width: 13rpx;
			height: 13rpx;
			background: rgba(36, 139, 170, .3);
			border-radius: 7rpx;
			margin-right: 6rpx;
		}
		.current-items {
			background: #248BAA;
		}
	}
</style>