|
|
|
@ -3,9 +3,11 @@ |
|
|
|
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> |
|
|
|
<block v-if="isRight(goods_detail)"> |
|
|
|
<!-- 商品图片轮播 --> |
|
|
|
<swiper :current="current" :indicator-dots="goods_detail.banners.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#FE9903"> |
|
|
|
<swiper :current="current" :indicator-dots="goods_detail.banners.length > 1 ? true : false" |
|
|
|
:circular="true" class="swiper-box" indicator-active-color="#FE9903"> |
|
|
|
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id"> |
|
|
|
<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> |
|
|
|
<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" |
|
|
|
@click="lookImg(index)"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<view class="bill-position" @tap='formSubmit()'> |
|
|
|
@ -28,7 +30,8 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length"> |
|
|
|
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view> |
|
|
|
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 地址信息 --> |
|
|
|
@ -36,9 +39,12 @@ |
|
|
|
<view class="lf-font-32 lf-font-bold">适用门店</view> |
|
|
|
<view class="lf-m-t-20 lf-row-between"> |
|
|
|
<view class="lf-flex"> |
|
|
|
<image mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image> |
|
|
|
<image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image> |
|
|
|
<view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view> |
|
|
|
<image mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" |
|
|
|
v-if="goods_detail.store.cover"></image> |
|
|
|
<image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" |
|
|
|
v-else></image> |
|
|
|
<view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;"> |
|
|
|
{{ goods_detail.store.name }}</view> |
|
|
|
</view> |
|
|
|
<view @click="makePhoneCall(goods_detail.store.tel)"> |
|
|
|
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text> |
|
|
|
@ -48,30 +54,36 @@ |
|
|
|
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center"> |
|
|
|
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text> |
|
|
|
</view> |
|
|
|
<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view> |
|
|
|
<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 商品详情 --> |
|
|
|
<view class="goods-detail"> |
|
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view> |
|
|
|
<rich-text :nodes="formatRichText(goods_detail.content)" v-if="goods_detail.content_type == 'rich_text'"></rich-text> |
|
|
|
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> |
|
|
|
<rich-text :nodes="formatRichText(goods_detail.content)" |
|
|
|
v-if="goods_detail.content_type == 'rich_text'"></rich-text> |
|
|
|
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" |
|
|
|
v-if="goods_detail.content_type == 'img'"></image> |
|
|
|
</view> |
|
|
|
<!-- 修饰专用 --> |
|
|
|
<view class="extra"></view> |
|
|
|
<!-- 吸底操作按钮 --> |
|
|
|
<view class="lf-row-between fixed-bottom"> |
|
|
|
<view class="lf-flex lf-p-t-10 lf-p-b-10"> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})"> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" |
|
|
|
@click="$url('/pages/index/index', {type: 'switch'})"> |
|
|
|
<image class="icon-img" src="../../static/center/home.png"></image> |
|
|
|
<view class="lf-m-t-1">首页</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')"> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" |
|
|
|
@click="$url('/pages/contactService/index')"> |
|
|
|
<image class="icon-img" src="../../static/center/service.png"></image> |
|
|
|
<view class="lf-m-t-1">客服</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect"> |
|
|
|
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image> |
|
|
|
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"> |
|
|
|
</image> |
|
|
|
<image class="icon-img" src="../../static/center/collect.png" v-else></image> |
|
|
|
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view> |
|
|
|
</view> |
|
|
|
@ -84,21 +96,15 @@ |
|
|
|
</view> |
|
|
|
<!-- 回到顶部 --> |
|
|
|
<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> --> |
|
|
|
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top> |
|
|
|
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"> |
|
|
|
</u-back-top> |
|
|
|
</block> |
|
|
|
</skeleton> |
|
|
|
|
|
|
|
<!-- 海报 --> |
|
|
|
<tki-qrcode v-if="info.avatar" style="visibility: hidden;position: fixed;left: -500rpx;" ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" |
|
|
|
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="info.avatar" /> |
|
|
|
|
|
|
|
<tki-qrcode v-else ref="qrcode"style="visibility: hidden;position: fixed;left: -500rpx;" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" |
|
|
|
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/payfail.png')" /> |
|
|
|
|
|
|
|
|
|
|
|
<view class="canvas-box"> |
|
|
|
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class='imagePathBox' v-if="maskHidden == true && imagePath" @click="maskHidden = false "> |
|
|
|
<image :src="imagePath" class='shengcheng' mode="widthFix"></image> |
|
|
|
<button class='baocun' @click.stop="saveBill()">保存相册，分享到朋友圈</button> |
|
|
|
@ -107,9 +113,8 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import tkiQrcode from "tki-qrcode"; // 二维码生成器 |
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
current: 0, // 轮播下标 |
|
|
|
goods_id: 0, |
|
|
|
@ -128,77 +133,68 @@ |
|
|
|
}, |
|
|
|
showLogin: true, |
|
|
|
imagePath: '', |
|
|
|
userToken: '' |
|
|
|
userToken: '', |
|
|
|
wxCode: '', |
|
|
|
onceCode: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
tkiQrcode |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isRight(){ |
|
|
|
return function(val){ |
|
|
|
isRight() { |
|
|
|
return function(val) { |
|
|
|
return this.$shared.isRight(val); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options){ |
|
|
|
onLoad(options) { |
|
|
|
this.goods_id = options.id; |
|
|
|
this.getGoodsDetail(); |
|
|
|
this.getData() |
|
|
|
this.getWxCode() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getWxCode() { |
|
|
|
uni.request({ |
|
|
|
url: 'http://dev-gxsky.com/api/salesman/qrcode', //仅为示例，并非真实接口地址。 |
|
|
|
data: { |
|
|
|
scene: 'route=goods&id=2&pt=2', |
|
|
|
page: 'pages/route/index', |
|
|
|
width: '2800' |
|
|
|
}, |
|
|
|
method: 'POST', |
|
|
|
success: (res) => { |
|
|
|
this.wxCode = res.data.data.base_url |
|
|
|
if (this.wxCode) { |
|
|
|
this.getwxCodeImg() |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
//海报开始 |
|
|
|
//保存头像 |
|
|
|
saveAvatar() { |
|
|
|
var that = this |
|
|
|
wx.saveImageToPhotosAlbum({ |
|
|
|
filePath: that.info.avatar, |
|
|
|
success(res) { |
|
|
|
wx.showModal({ |
|
|
|
content: '图片已保存到相册，赶紧晒一下吧~', |
|
|
|
showCancel: false, |
|
|
|
confirmText: '好的', |
|
|
|
confirmColor: '#333', |
|
|
|
success: function(res) { |
|
|
|
if (res.confirm) { |
|
|
|
console.log('用户点击确定'); |
|
|
|
that.maskHidden = false |
|
|
|
} |
|
|
|
}, |
|
|
|
fail: function(res) { |
|
|
|
that.maskHidden = false |
|
|
|
console.log(res) |
|
|
|
} |
|
|
|
}) |
|
|
|
getwxCodeImg() { |
|
|
|
var imgSrc = this.wxCode; //base64编码 |
|
|
|
var save = wx.getFileSystemManager(); |
|
|
|
var number = Math.random(); |
|
|
|
save.writeFile({ |
|
|
|
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg', |
|
|
|
data: imgSrc, |
|
|
|
encoding: 'base64', |
|
|
|
success: res => { |
|
|
|
this.onceCode = wx.env.USER_DATA_PATH + '/pic' + number + '.jpg' |
|
|
|
}, |
|
|
|
fail(err) { |
|
|
|
fail: err => { |
|
|
|
console.log(err) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
qrR(data) { |
|
|
|
this.base64Img = data; |
|
|
|
console.log('base64',this.base64Img) |
|
|
|
}, |
|
|
|
getData() { |
|
|
|
let userinfo = uni.getStorageSync('userinfo') || {}; |
|
|
|
if (userinfo) { |
|
|
|
this.info = userinfo |
|
|
|
console.log('用户数据缓存',this.info) |
|
|
|
} else { |
|
|
|
this.$http(this.API.API_USER_CENTER).then(res => { |
|
|
|
this.info = res.data; |
|
|
|
console.log('用户数据接口',this.info) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
createNewImg() { |
|
|
|
var that = this; |
|
|
|
var context = wx.createCanvasContext('mycanvas'); |
|
|
|
var path = "../../static/images/bill.png"; |
|
|
|
context.drawImage(path, 0, 0, 375, 667); |
|
|
|
//绘制二维码 |
|
|
|
context.drawImage(that.base64Img, 24, 530,120, 120); |
|
|
|
var number = Math.random(); |
|
|
|
let wxcode = that.onceCode |
|
|
|
context.drawImage(wxcode, 24, 530, 120, 120); |
|
|
|
//绘制名字 |
|
|
|
// context.setFontSize(24); |
|
|
|
// context.setFillStyle('#fff'); |
|
|
|
@ -212,7 +208,7 @@ |
|
|
|
canvasId: 'mycanvas', |
|
|
|
success: function(res) { |
|
|
|
that.imagePath = res.tempFilePath; |
|
|
|
if(that.imagePath) { |
|
|
|
if (that.imagePath) { |
|
|
|
that.canvasHidden = true |
|
|
|
that.maskHidden = true |
|
|
|
} |
|
|
|
@ -260,9 +256,11 @@ |
|
|
|
that.createNewImg() |
|
|
|
}, |
|
|
|
//海报结束 |
|
|
|
getGoodsDetail(){ |
|
|
|
getGoodsDetail() { |
|
|
|
let that = this; |
|
|
|
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => { |
|
|
|
this.$http(this.API.API_GOODS_DETAIL, { |
|
|
|
goods_id: this.goods_id |
|
|
|
}).then(res => { |
|
|
|
this.skeletonLoading = false; |
|
|
|
this.goods_detail = res.data; |
|
|
|
this.is_collect = Boolean(res.data.user.is_collect); |
|
|
|
@ -274,41 +272,43 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 切换商品收藏 |
|
|
|
switchCollect(){ |
|
|
|
switchCollect() { |
|
|
|
let userInfo = uni.getStorageSync('userinfo') || {}; |
|
|
|
if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){ |
|
|
|
if (!userInfo.id || !userInfo.nickname || !userInfo.avatar) { |
|
|
|
this.$url('/pages/login/index?type=userinfo'); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => { |
|
|
|
this.$http(this.API.API_COLLECT_DEAL, { |
|
|
|
goods_id: this.goods_id |
|
|
|
}).then(res => { |
|
|
|
this.$msg(res.msg); |
|
|
|
this.is_collect = Boolean(res.data.user.is_collect); |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 拨打电话 |
|
|
|
makePhoneCall(phoneStr){ |
|
|
|
makePhoneCall(phoneStr) { |
|
|
|
uni.makePhoneCall({ |
|
|
|
phoneNumber: String(phoneStr) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 打开地图 |
|
|
|
openMap(){ |
|
|
|
openMap() { |
|
|
|
// return; |
|
|
|
uni.openLocation({ |
|
|
|
longitude: 108.36637, |
|
|
|
latitude: 22.817746, |
|
|
|
scale: 18, |
|
|
|
name: this.goods_detail.store.address |
|
|
|
}) |
|
|
|
longitude: 108.36637, |
|
|
|
latitude: 22.817746, |
|
|
|
scale: 18, |
|
|
|
name: this.goods_detail.store.address |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 跳转到确认下单页面 |
|
|
|
toAddOrder(){ |
|
|
|
toAddOrder() { |
|
|
|
let goods_id = this.goods_detail.id; |
|
|
|
let goods_specs_id = this.goods_detail.specs[0].id |
|
|
|
this.$url('/pages/order/confirm-order?goods_id='+ goods_id +'&goods_specs_id='+ goods_specs_id); |
|
|
|
this.$url('/pages/order/confirm-order?goods_id=' + goods_id + '&goods_specs_id=' + goods_specs_id); |
|
|
|
}, |
|
|
|
// 预览图片 |
|
|
|
lookImg(index){ |
|
|
|
lookImg(index) { |
|
|
|
this.$u.throttle(() => { |
|
|
|
let goods_banner = this.goods_detail.banners || []; |
|
|
|
let banners = goods_banner.map(item => item.cover); |
|
|
|
@ -319,32 +319,34 @@ |
|
|
|
}, 200); |
|
|
|
}, |
|
|
|
// 富文本处理 |
|
|
|
formatRichText(richText){ |
|
|
|
if(richText != null){ |
|
|
|
let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){ |
|
|
|
formatRichText(richText) { |
|
|
|
if (richText != null) { |
|
|
|
let newRichText = richText.replace(/<img[^>]*>/gi, function(match, capture) { |
|
|
|
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); |
|
|
|
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); |
|
|
|
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); |
|
|
|
return match; |
|
|
|
}); |
|
|
|
newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){ |
|
|
|
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;'); |
|
|
|
newRichText = newRichText.replace(/style="[^"]+"/gi, function(match, capture) { |
|
|
|
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, |
|
|
|
'width:100%;'); |
|
|
|
return match; |
|
|
|
}); |
|
|
|
newRichText = newRichText.replace(/<br[^>]*\/>/gi, ''); |
|
|
|
newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"'); |
|
|
|
newRichText = newRichText.replace(/\<img/gi, |
|
|
|
'<img style="width:100%;height:auto;display:block;margin:10px 0;"'); |
|
|
|
return newRichText; |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
return null; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onShareAppMessage(){ |
|
|
|
onShareAppMessage() { |
|
|
|
let goods = this.goods_detail; |
|
|
|
let title = goods.name; |
|
|
|
let imageUrl = goods.share_cover || goods.cover; |
|
|
|
let path = '/pages/route/index?route=goods_detail&id='+ goods.id; |
|
|
|
|
|
|
|
let path = '/pages/route/index?route=goods_detail&id=' + goods.id; |
|
|
|
|
|
|
|
return { |
|
|
|
title, |
|
|
|
path, |
|
|
|
@ -355,7 +357,7 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
page{ |
|
|
|
page { |
|
|
|
background-color: #f5f5f5; |
|
|
|
overflow-x: hidden; |
|
|
|
} |
|
|
|
@ -366,6 +368,7 @@ |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.cu-btn1 { |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
@ -386,30 +389,33 @@ |
|
|
|
color: #FFFFFF; |
|
|
|
border-radius: 33rpx; |
|
|
|
} |
|
|
|
.swiper-box{ |
|
|
|
|
|
|
|
.swiper-box { |
|
|
|
width: 750rpx; |
|
|
|
height: 520rpx; |
|
|
|
background-color: #FFFFFF; |
|
|
|
} |
|
|
|
|
|
|
|
.head-info{ |
|
|
|
|
|
|
|
.head-info { |
|
|
|
width: 750rpx; |
|
|
|
height: auto; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 32rpx; |
|
|
|
padding-top: 20rpx; |
|
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
// .price>view:nth-of-type(1){ |
|
|
|
// color: #FF0000; |
|
|
|
// margin-right: 22rpx; |
|
|
|
// font-weight: bold; |
|
|
|
// } |
|
|
|
.price>view:nth-of-type(1){ |
|
|
|
.price>view:nth-of-type(1) { |
|
|
|
text-decoration: line-through; |
|
|
|
color: #777777; |
|
|
|
margin-right: 22rpx; |
|
|
|
} |
|
|
|
.price>view:nth-of-type(2){ |
|
|
|
|
|
|
|
.price>view:nth-of-type(2) { |
|
|
|
width: max-content; |
|
|
|
padding: 0 18rpx; |
|
|
|
height: 46rpx; |
|
|
|
@ -420,14 +426,16 @@ |
|
|
|
align-items: center; |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
.label-box{ |
|
|
|
|
|
|
|
.label-box { |
|
|
|
min-height: 130rpx; |
|
|
|
width: 100%; |
|
|
|
border-top: 1rpx solid #E5E5E5; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
padding: 30rpx 0 10rpx 0; |
|
|
|
.label-item{ |
|
|
|
|
|
|
|
.label-item { |
|
|
|
width: 156rpx; |
|
|
|
height: 70rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
@ -442,42 +450,44 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.address-box{ |
|
|
|
|
|
|
|
.address-box { |
|
|
|
width: 750rpx; |
|
|
|
height: auto; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #FFFFFF; |
|
|
|
padding: 32rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
.shop-img{ |
|
|
|
|
|
|
|
.shop-img { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.goods-detail{ |
|
|
|
|
|
|
|
.goods-detail { |
|
|
|
width: 750rpx; |
|
|
|
height: auto; |
|
|
|
background-color: #FFFFFF; |
|
|
|
padding: 32rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-top: 20rpx; |
|
|
|
.goods-img{ |
|
|
|
|
|
|
|
.goods-img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.extra{ |
|
|
|
|
|
|
|
.extra { |
|
|
|
width: 100%; |
|
|
|
height: 120rpx; |
|
|
|
padding-bottom: constant(safe-area-inset-bottom); |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
box-sizing: content-box; |
|
|
|
} |
|
|
|
|
|
|
|
.fixed-bottom{ |
|
|
|
|
|
|
|
.fixed-bottom { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
@ -488,7 +498,8 @@ |
|
|
|
border-top: 1rpx solid #e5e5e5; |
|
|
|
padding-bottom: constant(safe-area-inset-bottom); |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
.icon-item{ |
|
|
|
|
|
|
|
.icon-item { |
|
|
|
margin-right: 16rpx; |
|
|
|
background-color: transparent; |
|
|
|
margin: 0; |
|
|
|
@ -498,15 +509,18 @@ |
|
|
|
margin-right: 10rpx; |
|
|
|
padding: 0; |
|
|
|
width: 88rpx; |
|
|
|
&:first-child{ |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
padding-left: 0; |
|
|
|
} |
|
|
|
.icon-img{ |
|
|
|
|
|
|
|
.icon-img { |
|
|
|
height: 50rpx; |
|
|
|
width: 50rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn{ |
|
|
|
|
|
|
|
.btn { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
width: 208rpx; |
|
|
|
@ -518,21 +532,21 @@ |
|
|
|
border-radius: 42rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//海报 |
|
|
|
.bgImg { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 366rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.mine { |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
color: #333; |
|
|
|
margin-top: 44rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.code { |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
@ -541,7 +555,7 @@ |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.who { |
|
|
|
display: block; |
|
|
|
margin-top: 80rpx; |
|
|
|
@ -549,12 +563,12 @@ |
|
|
|
color: #333; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.inputBox { |
|
|
|
text-align: center; |
|
|
|
margin-top: 44rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.input { |
|
|
|
text-align: center; |
|
|
|
width: 440rpx; |
|
|
|
@ -564,7 +578,7 @@ |
|
|
|
font-size: 32rpx; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
width: 160rpx; |
|
|
|
height: 88rpx; |
|
|
|
@ -576,18 +590,18 @@ |
|
|
|
line-height: 88rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
button[class="btn"]::after { |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tishi { |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
color: #999; |
|
|
|
margin-top: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.shareText { |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
@ -595,24 +609,24 @@ |
|
|
|
font-size: 28rpx; |
|
|
|
margin-top: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.imgBox { |
|
|
|
text-align: center; |
|
|
|
width: 100%; |
|
|
|
margin-top: 60rpx; |
|
|
|
padding-bottom: 120rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.m_l { |
|
|
|
margin-left: 180rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.zfbtn { |
|
|
|
display: inline-block; |
|
|
|
width: 120rpx; |
|
|
|
@ -623,15 +637,15 @@ |
|
|
|
border: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
button[class="zfbtn"]::after { |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
button[class="zfbtn m_l"]::after { |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.imagePathBox { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -643,7 +657,7 @@ |
|
|
|
bottom: 0; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.shengcheng { |
|
|
|
width: 80%; |
|
|
|
height: 80%; |
|
|
|
@ -653,7 +667,7 @@ |
|
|
|
margin-left: -40%; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.baocun { |
|
|
|
display: block; |
|
|
|
width: 80%; |
|
|
|
@ -669,8 +683,8 @@ |
|
|
|
font-size: 32rpx; |
|
|
|
border-radius: 44rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
button[class="baocun"]::after { |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
