<!--商品展示风格2-->
<template>
	<el-row>
		<el-col :span="24">
			<el-space wrap>
				<el-card
					v-for="item in state.commit" :key="state.id"
					class="box-card"
					@click="to(item.id)"
					shadow="hover" >
					<!--图片-->
					<img class="img"  :src="item.largePic" fit="fill" />
					<!--					标题-->
					<div class="item-title ">{{item.title}}</div>
<!--					价格&& 评分-->
					<div class="price-box">
						<span class="price-now ft16 " >{{item.movieType}}</span>
						<span class="ft14 c999 price-old" >{{item.ratingValue}} 分</span>
					</div>
				</el-card>
			</el-space>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const  state = reactive({
	commit:[]
})

function init() {
	frontRequest.get("/api/item/commit").then(res =>{
		state.commit = res.data
	})

}
onMounted(() =>{
	init()
})

const to = (id:number) => {
	router.push(`/info/${id}`)
}

</script>
<style scoped>
.box-card{
	cursor: pointer;
	width: 232px;
	height: 300px;
	border-radius: 10px;

}
.img{
	display: block;
	width: 170px;
	height: 180px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.item-title{
	color: #333;
	font-size: 14px;
	width: 164px;
	margin: 0 auto 8px auto;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
}
.price-box{
	text-align: center;
	font-size: 16px;
}
.price-now{
	color: #FF0000;
	padding-right: 10px;
}
.ft16 {
	font-size: 16px;
}
.ft14 {
	font-size: 14px;
}
.price-old{
	color: #fce04b;
}
</style>
