You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
5.5 KiB
196 lines
5.5 KiB
<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>
|