jpcj-xcx/pages/index/components/find/index.vue

<template>
	<view class="content">
		<swiper class="swiper-box" :current="current" autoplay circular>
			<swiper-item v-for="(item, index) in info" :key="index">
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item.url" mode="aspectFill" :draggable="false" @click="onBanner(index)" />
				</view>
			</swiper-item>
		</swiper>

		<view class="">
			<component is="xueche" class="animation-fade"></component>
		</view>

	</view>
	</view>
</template>

<script>
	import xueche from '@/components/home/index'
	export default {
		components: {
			xueche
		},
		data() {
			return {
				active: 0,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				current: 0,
				mode: 'round',
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1F1F1;
	}


	.swiper-box {
		width: 100vw;
		height: 56.25vw;

		.image {
			width: 100%;
		}
	}


	.sticky-top {
		position: sticky;
		top: 0px;
		left: 0;
		background-color: #4fc08d;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		// border-top-left-radius: 14px;
		// border-top-right-radius: 14px;
		padding-right: 3%;

		.top-search {
			flex: 1;
		}
	}

	.sticky-bottom {
		position: sticky;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 10;
	}

	.fadeIn {
		animation: fadeIn 5s linear 2s infinite alternate;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>