<template>
	<view class="content">
		<image mode="scaleToFill" class="posterBg" src="../../static/bg_haibao@2x.png"></image>
		<view class="posterBox">
			<view class="title">发现身边的母婴活动</view>
			<view class="posterCon">
				<image mode="scaleToFill" class="conBg" src="../../static/bg_haibao1.png"></image>
				<view class="con">
					<view class="banner"><image mode="widthFix" src="../../static/rishang.png"></image></view>
					<view class="info">
						<view class="subTit">时光印记新概念婚纱摄影</view>
						<view class="detail">
							<view class="detail_l">
								<view class="infoCol"><view class="date"><image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>2021-02-10 14:00</view></view>
								<view class="infoCol">
									<view class="address">
										<view class="icon"><image src="../../static/icon_dizhi.png"></image></view>
										<text>苏州·园区星海街188号苏州万怡大酒店</text>
									</view>
								</view>
							</view>
							<view class="price font_red">免费</view>
						</view>
					</view>
					<view class="infoBot">
						<view class="userInfo">
							<view class="photo"><image mode="widthFix" src="../../static/84x84.png"></image></view>
							<view class="title">
								<text>王大宝</text>
								<text class="font_red">向您推荐</text>
							</view>
						</view>
						<view class="qr"><image mode="widthFix" src="../../static/300_qr.png"></image></view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.posterBg{
		position: absolute;
		top:0;
		left:0;
		display: block;
		width:100%;
		height:100%;
		z-index: 99;
	}
	.posterBox{
		position: relative;
		z-index: 100;
		.title{font-size: 50rpx;color: #FFFFFF;text-align: center;margin:75rpx 0;}
		.posterCon{
			position: relative;
			width:672rpx;height:849rpx;
			margin:0 auto;
			.conBg{position: absolute;width:672rpx;height:849rpx;left:50%;margin-left:-336rpx;top:0;z-index:888;}
			.con{
				position: relative;
				z-index: 999;
				.banner{
					width: 672rpx;height: 330rpx;border-radius: 27rpx 27rpx 0px 0px;overflow: hidden;
					image{display: block;width: 672rpx;height: 330rpx;border-radius: 27rpx 27rpx 0px 0px;}
				}
				.info{
					padding:30rpx 36rpx;min-height:276rpx;box-sizing: border-box;
					.subTit{font-size: 36rpx;font-weight: 500;color: #333333;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
					.detail{
						display: flex;
						justify-content: space-between;
						margin-top:20rpx;
						.detail_l{
							width:70%;
							.infoCol{
								display: flex;
								justify-content:flex-start;
								color:#999;
								font-size: 29rpx;
								line-height:1.8;
								align-items: center;
								align-content: center;
								.date image{width:26rpx;height:26rpx;display: inline-block;margin-right:12rpx;}
								.address{
									overflow: hidden;
									vertical-align: middle;
									.icon{
										width:25rpx;height:26rpx;display:block;float: left;margin-top:12rpx;
										image{width:25rpx;height:26rpx;display:block;}
									}
									
									text{padding-left:36rpx;display: block;}
								}
							}						
						}
						.price{
							font-size: 43rpx;
							font-weight: 500;
							text-align: right;
						}
					}
					}
			}
				.infoBot{
					position: relative;
					padding:0 35rpx;
					.userInfo{
						display:flex;justify-content: flex-start;align-items: center;align-content: center;
						.photo{
							width: 120rpx;height: 120rpx;border-radius: 50%;
							image{display: block;width: 120rpx;height: 120rpx;border-radius: 50%;}
						}
						.title{
							margin-left:29rpx;
							text-align: left;
							text{font-size: 34rpx;font-weight: 400;color: #333333;display:block;line-height: 1.5;}
						}
					}
					.qr{
						width: 156rpx;height: 156rpx;background: #FFFFFF;box-sizing: border-box;padding:10rpx;
						right:40rpx;top:50%;margin-top:-78rpx;position: absolute;
						image{display:block;width:136rpx;height:136rpx;}
					}
				}	
		}
	}
</style>
