<template>
	<view class="content">
		<view class="shareMain">
		<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>
		<view class="shareBox">
			<text class="iconfont icon-baseline-close-px"></text>
			<view class="shareCol">
				<image src="../../static/shreLink.png"></image>
				<view>分享链接</view>
			</view>
			<view class="shareCol">
				<image src="../../static/sharePic.png"></image>
				<view>分享海报</view>
			</view>			
		</view>
	</view>
</template>

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

		},
		methods: {

		}
	}
</script>
<style>
	page{overflow: hidden;}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width:100%;
		height:100vh;
		background: rgba(0,0,0,0.7);
	}
	.shareMain{
		width:600rpx;
		height:840rpx;
		position:absolute;
		top:70rpx;
		left:50%;
		margin-left:-300rpx;
	}
	.shareBox{
		position:fixed;
		width:100%;
		height:230rpx;
		background: #fff;
		left:0;
		bottom:0;
		border-radius: 24rpx 24rpx 0px 0px;
		display: flex;
		justify-content:space-around;
		align-items: center;
		align-content: center;
		.iconfont{position: absolute;font-size:50rpx;color:#B2B2B2;right:30rpx;top:30rpx;}
		.shareCol{
			text-align: center;font-size: 24rpx;font-weight: 400;color: #333333;
			image{width: 96rpx;height:96rpx;margin-bottom:16rpx;}
			}
	}
	.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:40rpx;color: #FFFFFF;text-align: center;margin:40rpx 0;}
		.posterCon{
			position: relative;
			width:560rpx;height:662rpx;
			margin:0 auto;
			.conBg{position: absolute;width:560rpx;height:662rpx;left:50%;margin-left:-280rpx;top:0;z-index:888;}
			.con{
				position: relative;
				z-index: 999;
				.banner{
					width: 560rpx;height: 260rpx;border-radius: 22rpx 22rpx 0px 0px;overflow: hidden;
					image{display: block;width: 560rpx;height: 260rpx;border-radius: 22rpx 22rpx 0px 0px;}
				}
				.info{
					padding:20rpx 36rpx;min-height:230rpx;box-sizing: border-box;
					.subTit{font-size: 30rpx;font-weight: 500;color: #333333;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
					.detail{
						display: flex;
						justify-content: space-between;
						margin-top:10rpx;
						.detail_l{
							width:70%;
							.infoCol{
								display: flex;
								justify-content:flex-start;
								color:#999;
								font-size: 24rpx;
								line-height:1.8;
								align-items: center;
								align-content: center;
								.date image{width:23rpx;height:23rpx;display: inline-block;margin-right:12rpx;}
								.address{
									overflow: hidden;
									vertical-align: middle;
									.icon{
										width:23rpx;height:23rpx;display:block;float: left;margin-top:6rpx;
										image{width:23rpx;height:23rpx;display:block;}
									}
									
									text{padding-left:36rpx;display: block;}
								}
							}						
						}
						.price{
							font-size: 36rpx;
							font-weight: 500;
							text-align: right;
							text{font-size: 24rpx;}
						}
					}
					}
			}
				.infoBot{
					position: relative;
					padding:0 35rpx;
					.userInfo{
						display:flex;justify-content: flex-start;align-items: center;align-content: center;
						.photo{
							width: 100rpx;height: 100rpx;border-radius: 50%;
							image{display: block;width: 100rpx;height: 100rpx;border-radius: 50%;}
						}
						.title{
							margin-left:29rpx;
							text-align: left;
							text{font-size: 28rpx;font-weight: 400;color: #333333;display:block;line-height: 1.5;}
						}
					}
					.qr{
						width: 130rpx;height: 130rpx;background: #FFFFFF;box-sizing: border-box;padding:10rpx;
						right:40rpx;top:50%;margin-top:-78rpx;position: absolute;
						image{display:block;width:110rpx;height:110rpx;}
					}
				}	
		}
	}
</style>
