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.
152 lines
4.4 KiB
152 lines
4.4 KiB
<template>
|
|
<view class="content">
|
|
<image mode="scaleToFill" class="posterBg" src="../../static/bg_haibao@2x.jpg"></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>
|