<template>
	<view v-if="list.length" class="vod-topic" @touchmove.stop>
		
		<view class="topic-content">
			<view v-for="(item, index) in list" :key="index" >
				<view @click="openUrl('/pages/album/details?id='+item.topic_id)" class="topic-item">
					<view class="topic-info">
						<text class="topic-info-title"> <text style="color: #5A759B;">#</text>
							{{item.topic_name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vodImage from '@/components/vod-image';
	export default {
		components: {
			vodImage
		},
		props: {
			list: {
				type: Array,
				default: []
			},
		},
	}
</script>

<style lang="scss">
	.vod-topic {
		// height: 90px;
		position: relative;
		justify-content: center;
		overflow-y: hidden;
		
		.topic-box-title {
			margin: 0 15px;
			font-weight: 500;
			font-size: 18px;
			color: #fff;
		}

		.topic-content {
			padding: 0px 16px 0;
			align-content: center;
			display: grid;
			grid-template-columns: repeat(4, 24%);
			column-gap: 10px;
			row-gap: 10px;
			justify-content: space-between;

			.topic-item {
				height: 50px;
				text-align: center;
				width: 100%;
				// margin-right: 15px;
				display: inline-block;
				border-radius: 4px;
				background-size: 100% 100%;
				padding: 0 10rpx;
				position: relative;

				.topic-info {
					margin: 0 70px 0 0px;
					height: 100%;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.topic-info-title {
						height: 40px;
						line-height: 40px;
						color: #a7a8b0;

						margin-bottom: 5px;
						font-size: 14px;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.topic-info-des {
						height: 16px;
						font-size: 12px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.topic-image {
					width: 48px;
					height: 68px;
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
					border-radius: 2px;
					overflow: hidden;
					position: absolute;
					right: 10px;
					top: -10px;
				}
			}
		}
	}
</style>