<template>
	<view class="container" @touchmove.stop>
		<view class="actor-block">
			<view class="actor-star">
				<text>AV女优</text>
			</view>
			<swiper class="swiper" style="height: 240rpx" circular display-multiple-items="5" :autoplay="true" :circular="false" :acceleration="true">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="actor-item">
						<view class="">
							<navigator :url="'/pages/album/actor-details?id=' + item.id" class="vod-image">
								<vod-image :src="item.pic" mode="aspectFill"></vod-image>
							</navigator>
							<view class="name">{{ item.name }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import vodImage from '@/components/vod-image.vue';
export default {
	name: 'IndexActor',
	props: {
		data: {
			type: Array
		}
	},
	components: {
		vodImage
	},
	data() {
		return {
			swiperOption: {
				slidesPerView: 'auto',
				spaceBetween: 15,
				autoplay: {
					delay: 2500,
					disableOnInteraction: false
				}
			}
		};
	}
};
</script>

<style lang="scss">
.actor-block {
	width: 100%;
	padding-top: 10rpx;
	.actor-item {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.vod-image {
		margin-bottom: 10px;
		width: 100%;
		display: flex;
		align-content: center;
		&:before {
			content: '';
			display: block;
			padding-top: 100%;
			background-color: #171929;
			border-radius: 50%;
		}
		width: 100rpx;
		uni-image {
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 50%;
		}
		text-align: center;
		overflow: hidden;
		display: block;
	}
	.name {
		color: #fff;
		font-size: 13px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
.actor-star {
	margin: 0 15px;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
}
.swiper {
	padding: 20px 0;
}

.actor-block .more {
	width: 60px;
	// height: 60px;
	border-radius: 50%;
	// background-color: #fef3ef;
	color: #ff4d03;
	font-weight: 700;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
