<template>
	<view class="index-vertical-box" @click="openVideo(item.vod_id)">
		<vodImage class="index-header-img" :src="item.vod_pic"></vodImage>
		<view class="index-footer-box">
			<view class="index-vertical-titleimg">
				<vodImage :src="item.vod_pic"></vodImage>
			</view>
			<view class="index-vertical-info">
				<text class="title">
					{{ item.vod_name }}
					<text class="score">{{ item.vod_score }}</text>
				</text>
				<!-- <text class="desc">2023 中国大陆/ 甄子丹 李连杰</text> -->
			</view>
		</view>
	</view>
</template>

<script>
import vodImage from '@/components/vod-image';
export default {
	components: {
		vodImage
	},
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.index-vertical-box {
	margin: 0 15px;
	box-shadow: 0px 0px 10px 0px rgba(17, 17, 17, 0.7);
	border-radius: 5px;
	background-color: #171929;

	.index-header-img {
		width: 100%;
		border-radius: 5px 5px 0 0;
		&:before {
			content: '';
			display: block;
			// padding-top: 133.06%;
			background-color: #171929;
		}
	}

	.index-footer-box {
		padding: 10px;
		display: flex;
		align-items: center;

		uni-image {
			width: 34px;
			height: 48px;
			border-radius: 3px;
			margin-right: 10px;
		}

		.index-vertical-info {
			border-radius: 10px;

			.title {
				display: block;
				font-size: 16px;
				color: #fff;
				font-weight: 500;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.score {
				font-size: 14px;
				color: #f7b500;
			}

			.desc {
				font-size: 10px;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.4);
			}
		}
	}
}
</style>
