leromro-mini/pages_qiun/components/card-swiper/card-swiper.vue

<template>
	<view>
		<view class="top-swiper">
			<view class="box">
				<view style="height: 44px;"></view>
				<swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true"
					@change="swiperChange">
					<swiper-item v-for="(item,index) in card_menu" :key="index" @click="toUrl(item.url)">
						<!-- <image class='le-img' :src='item' :class="{'le-active':swiper.index == index}"></image> -->
						<view class="le-img" :class="{'le-active':swiper.index == index}">
							<view class="img_box">
								<image class="card_img" :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="detail_box">
								<view class="title_box">{{item.title}}</view>
								<view class="author_box">By:{{item.author}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import Common from '../../static/js/common'
	export default {
		props: {
			card_menu: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				swiper: {
					margin: "150rpx",
					index: 0,
					list: [
						"/static/images/douyin/0.jpg",
						"/static/images/douyin/4.jpg",
						"/static/images/douyin/7.jpg",
					]
				}
			}
		},
		components: {

		},
		mounted() {

		},
		methods: {
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
			},
			toUrl(url){
				Common.navigateTo(url);
			}
		}
	}
</script>

<style lang="scss">
	.top-swiper {
		margin-bottom: 30rpx;

		.box {
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}

		.swiper {
			height: 600rpx;
			margin: 0 20rpx;

			.le-img {
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.9);
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 10px;
				background-color: #fff;
				overflow: hidden;

				&.le-active {
					transform: scale(1);
				}

				.img_box {
					width: 100%;
					height: 65%;
					overflow: hidden;

					.card_img {
						height: 100%;
						width: 100%;
					}
				}

				.detail_box {
					width: 100%;
					height: 35%;
					overflow: hidden;

					.title_box {
						width: 100%;
						text-align: center;
						font-size: 40rpx;
						margin: 30rpx 0;
					}



					.author_box {
						width: 100%;
						text-align: center;
						font-size: 30rpx;
						position: relative;
						height: 80rpx;
						line-height: 80rpx;

						&::before {
							content: "";
							height: 1px;
							width: 150rpx;
							position: absolute;
							transform: translateX(-50%);
							left: 50%;
							top: 0;
							background: #000;
						}
					}
				}
			}

		}
	}
</style>