xs/xs-app/pages/bookstore/template/template-book-Banner.vue

<template>
	<view class="book-Banner-content">
		<swiper class="swiper" 
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="500" 
		:circular="true"
		indicator-color='#ffffff'
		indicator-active-color='#dc5656'>
			<swiper-item v-for="(item, index) in templateData.list" :key="index" @click="clickItem(item)">
				<image class="image" :src="item.cover" mode=""></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
    import { banner_data, book_item_data } from '../../../data/data';
	defineProps({
		templateData:Object,
	})
	const emits = defineEmits(['clickBook'])
	
	function clickItem(data:banner_data) {
		// 跳转类型 0 不跳转 1 小说 2 公告
		if(data.jump_type==1) {
			let book_data = new book_item_data()
			book_data.book_id = data.jump_id
			emits('clickBook',book_data)
		}
	}
</script>

<style lang="scss">
	.book-Banner-content{
		display: flex;
		justify-content: center; //水平居中
		align-items: center; //垂直居中
		overflow: hidden;//内容超出隐藏
		padding: 0px 20rpx;
		margin-bottom: 36rpx;
				
		.swiper{
			width: 100%;
			height: 314rpx;
			.image{
				width: 100%;
				height: 100%;
				// background-color: orange;
			}
		}
	}
</style>