book-shop/pages/mall/components/poster.vue

<template>
	<view class="slot">
		<!-- {{JSON.stringify(data)}} -->
		<view class="purchase">
			<view class="pur_left">
				<view class="left_img" @click="goDetail(data[0])" v-if="data[0]">
					<image :src="data[0].target_image"></image>
					<view style="position: absolute;bottom: 44rpx;left: 28rpx;">
						<view class="left_head">{{item.target_name}}</view>
						<!-- <view class="left_foot">立即抢购</view> -->
					</view>
				</view>
			</view>
			<view class="pur_right">
				<view class="right_top">
					<view class="top_img" @click="goDetail(data[1])" v-if="data[1]">
						<image :src="data[1].target_image"></image>

						<view style="position: absolute;top: 30rpx; left: 24rpx;">
							<view class="top_title">{{item.target_name}}</view>
							<!-- <view class="top_pur">立即抢购</view> -->
						</view>
					</view>
				</view>
				<view class="right_bottom">
					<view class="bottom_img" @click="goDetail(data[2])" v-if="data[2]">
						<image :src="data[2].target_image"></image>

						<view style="position: absolute;top: 30rpx; left: 24rpx;">
							<view class="bottom_title">{{item.target_name}}</view>
							<!-- <view class="bottom_pur">立即抢购</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { goType } from '@/utils/pub';
export default {
	name: 'poster',
	props:{
		data:{
			type:Array,
			default:()=>{
				return []
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		goDetail(e) {
			goType(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.purchase {
	margin: 30rpx 30rpx 28rpx 30rpx;
	display: flex;

	.pur_left {
		.left_img {
			position: relative;
			width: 304rpx;
			height: 394rpx;
			border-radius: 15rpx;
			overflow: hidden;
			image {
				width: 304rpx;
				height: 394rpx;
				// background-image: url("../../static/img/product_one.png");
			}
		}

		.left_head {
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #ffe7d3;
			line-height: 34rpx;
			margin-bottom: 10rpx;
		}

		.left_foot {
			font-size: 16rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			text-align: center;
			color: #9d724e;
			line-height: 32rpx;
			width: 116rpx;
			height: 32rpx;
			background: linear-gradient(90deg, #fdefe0 0%, #fbdabe 100%);
			border-radius: 14rpx;
		}
	}

	.pur_right {
		margin-left: 22rpx;

		.right_top {
			margin-bottom: 22rpx;
			border-radius: 15rpx;
			overflow: hidden;

			.top_img {
				position: relative;
				width: 364rpx;
				height: 186rpx;

				image {
					width: 364rpx;
					height: 186rpx;
				}
			}

			.top_title {
				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #2f3438;
				line-height: 34rpx;
				margin-bottom: 10rpx;
			}

			.top_pur {
				font-size: 16rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 32rpx;
				width: 116rpx;
				height: 32rpx;
				background: #1eb7cf;
				border-radius: 14rpx;
			}
		}

		.right_bottom {
			.bottom_img {
				position: relative;
				width: 364rpx;
				height: 186rpx;
				border-radius: 15rpx;
				overflow: hidden;

				image {
					width: 364rpx;
					height: 186rpx;
				}
			}

			.bottom_title {
				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #2f3438;
				line-height: 34rpx;
				margin-bottom: 10rpx;
			}

			.bottom_pur {
				font-size: 16rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 32rpx;
				width: 116rpx;
				height: 32rpx;
				background: #e28843;
				border-radius: 14rpx;
			}
		}
	}
}
</style>