<template>
	<div class="goods-list-small-module">
		<div class="title-tag">
			<div class="title-text">{{ info.categoryName }}</div>
			<div class="title-img">
				<img :src="`${constant.imgUrl}/retail/home/goods-big-tit.png`" alt mode="widthFix" />
			</div>
		</div>
		<div class="goods-wrap">
			<div class="goods-list" v-for="(item, index) in info.goodsInfoList" :key="index" @click="pageTo(`/pages/goods/detail?id=${item.id}`)">
				<div class="goods-img">
					<app-img :src="item.smallImgList[0]" alt="商品图片" mode="aspectFit" :height="246" />
				</div>
				<div class="goods-det">
					<div class="goods-left">
						<div class="goods-name">{{ item.goodsName }}</div>
						<div class="app-price">￥{{ item.price }}</div>
					</div>
					<div class="button-com red buy-com-btn">购买</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import AppImg from '@/components/app-img'
export default {
	name: 'goods-list-big',
	components: {
		AppImg
	},
	props: {
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			constant: this.$constant
		}
	}
}
</script>

<style lang="scss" scoped>
	.goods-list-small-module {
		// .title-tag {
		// 	.title-text {
		//         font-size: 38px;
		//         text-align: center;
		//     }
		//     .title-img {
		//         width: 296px;
		//         margin: 10px auto 48px;
		//     }
		// }
		.title-tag {
			position: relative;
			.title-text {
				position: absolute;
				left: 0;
				right: 0;
				font-size: 34px;
				text-align: center;
			}
			.title-img {
				width: 94%;
				margin: 0 auto 30px;
			}
		}
		.goods-wrap {
			@include disFlex(flex-start, space-between);
			flex-wrap: wrap;
		}
		.goods-list {
			width: 48%;
			background-color: #fff;
			box-shadow: 4px 4px 10px #eee;
			margin-top: 20px;
			&:nth-child(-n + 2) {
				margin-top: 0;
			}
			.goods-img {
				// width: 346px;
				width: 100%;
				height: 346px;
				img {
					height: 100%;
				}
			}
			.goods-det {
				@include disFlex(flex-end, space-between);
				font-size: 28px;
				padding: 0 20px 30px;
				.goods-left {
					& > div {
						margin-top: 24px;
					}
				}
			}
		}
	}
</style>
