<template>
	<view class="container" @touchmove.stop v-if="data.length">
		<view class="game-block">
			<view class="game-item" v-for="(item, index) in data" :key="index" @click="openApp(item.adv_link)">
				<view class="vod-image">
					<vod-image :src="item.adv_image" mode="aspectFill"></vod-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import vodImage from '@/components/vod-image.vue';
export default {
	name: 'Indexgame',
	props: {
		data: {
			type: Array
		}
	},
	components: {
		vodImage
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.game-block {
	margin-top: 10px;
	width: 100%;
	padding: 0 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.game-item {
		flex: 0 0 calc(20% - 10px);
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.vod-image {
		&:before {
			content: '';
			display: block;
			padding-top: 100%;
			background-color: #171929;
			border-radius: 50%;
		}
		margin-bottom: 10px;
		width: 100rpx;
		text-align: center;
		uni-image {
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 50%;
		}

		text-align: center;
		overflow: hidden;
		display: block;
	}
}

.game-star {
	margin: 0 15px;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
}

.swiper {
	padding: 15px 0 0 0;
	text-align: center;
}

.game-block .more {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	// background-color: #fef3ef;
	color: #ff4d03;
	display: flex;
	align-items: center;
	font-weight: 700;

	uni-view {
		width: 100%;
		text-align: center;
	}
}
</style>
