<template>
	<div class="goods-list-middle-module">
		<div class="title-tag">
			<div class="title-text">{{ info.categoryName }}</div>
			<div class="title-img">
				<img :src="`${constant.imgUrl}/retail/home/goods-middle-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">
					<img :src="item.img" alt="商品图片" mode="aspectFit" :height="346" />
				</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" @click="pageTo(`/pages/goods/detail?id=${item.id}`)">购买</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'goods-list-middle',
	props: {
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			constant: this.$constant
		}
	}
}
</script>

<style lang="scss" scoped>
	.goods-list-middle-module {
		.title-tag {
            position: relative;
			.title-text {
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                font-size: 36px;
                text-align: center;
                color: #DB112D;
            }
            .title-img {
                width: 100%;
                margin: 0 auto 30px;
            }
        }
		.goods-list {
			position: relative;
			@include disFlex(center, flex-start);
			background-color: #fff;
			box-shadow: 4px 4px 10px #eee;
			margin-top: 20px;
			&:first-child {
				margin-top: 0;
			}
			.goods-img {
				// width: 346px;
				width: 100%;
				height: 346px;
				img {
					height: 100%;
				}
			}
			.goods-det {
				width: calc(100% - 386px);
				font-size: 28px;
				padding: 20px 20px 40px;
				.goods-left {
					.goods-name {
						margin-bottom: 24px;
					}
				}
			}
			.buy-com-btn {
				position: absolute;
				right: 20px;
				bottom: 20px;
			}
		}
	}
</style>
