<!--商品-->
<template>

	<div  style="height: 20px"></div>
	<el-row>
		<el-col :span="24">
			<span style="font-weight: 700;font-size: 26px">狗狗主粮</span>
		</el-col>
	</el-row>

	<el-row>
		<el-col :span="24">
			<div class="containa">
				<el-space wrap>
				<div v-for="(i, index) in 10" :key="i">
					<div
						@click="to()"
						class="box-card"
						v-if="index === 0 || index === 5">
						<el-image
							style="width: 230px;height: 300px;"
							src="https://img2.epetbar.com/common/upload/commonfile/2020/03/20/0104650_205628.jpg"
							fit="fill" />
					</div>
					<el-card
						v-else
						class="box-card"
						@click="to()"
						shadow="hover" >
						<!--					图片-->
						<el-image  src="https://img2.epetbar.com/common/upload/commonfile/2020/03/20/0104650_205628.jpg" fit="fill" />
						<!--					标题-->
						<div class="item-title ">澳大利亚原装进口自然馈赠Natures Gift 牛肉配方成犬粮 18kg</div>
						<!--					价格&& 评分-->
						<div class="price-box">
							<span class="price-now ft16 " style="line-height: 1">¥998.00</span>
							<span class="ft14 c999 price-old" style="line-height: 1">¥1098.00</span>
						</div>
					</el-card>
				</div>
				</el-space>

			</div>
		</el-col>
	</el-row>

</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
// const props = defineProps({
// 	isPage: {
// 		type: Boolean,
// 		default: false,
// 	},
// })

const to = () => {
	router.push("/front/info")
}
</script>
<style scoped>

.containa{
	padding-top: 10px;
	margin-bottom: 10px;
}
.box-card{
	cursor: pointer;
	width: 232px;
	height: 300px
}
.box-card1{
	cursor: pointer;
	width: 100%;
	height: 300px
}
:deep(.el-image){
	display: block;
	width: 170px;
	height: 180px;
	margin: 0 auto;

}
.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;
}
.price-box{
	text-align: center;
	font-size: 16px;
}
.price-now{
	color: #FF0000;
	padding-right: 10px;
}
.ft16 {
	font-size: 16px;
}
.ft14 {
	font-size: 14px;
}

.pagination-container{
	padding-top: 10px;
}

</style>
