<template>
	<div class="goods-list-big-module">
		<div class="title-tag">
			<div class="title-text">{{ info.categoryName }}</div>
			<div class="title-img">
				<!-- <img :src="`${constant.imgUrl}/retail/home/goods-small-tit.png`" alt /> -->
				<img :src="`${constant.imgUrl}/retail/home/goods-big-tit.png`" alt mode="widthFix" />
			</div>
		</div>
		<div class="goods-wrap">
			<block>
				<div class="goods-list" v-for="(item, index) in info.goodsInfoList" :key="index" @click="pageTo({
					url: '/pages/goods/detail',
					query: {
						id: item.id
					}
				})">
					<div class="goods-img">
						<app-img :src="item.smallImgList[0]" alt="商品图片" mode="aspectFit" :height="534" />
					</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>
			</block>
		</div>
	</div>
</template>

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

<style lang="scss" scoped>
	.goods-list-big-module {
		.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-list {
			background-color: #fff;
			box-shadow: 4px 4px 10px #eee;
			margin-top: 20px;
			&:first-child {
				margin-top: 0;
			}
			.goods-img {
				height: 534px;
				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>
