|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="memberBanner">
|
|
|
<image mode="widthFix" src="../../static/member_01.jpg"></image>
|
|
|
</view>
|
|
|
<view class="memberCon">
|
|
|
<view class="topTit">
|
|
|
<text class="titInner">
|
|
|
<text class="titCon"><text class="f_blue">￥<text class="f_big">19.9</text></text>专享大礼包</text>
|
|
|
<text class="line"></text>
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">超值产后修复套餐</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
<view class="mealCol flex_start flex_wrap">
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>上门黄疸检测</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>产后中药熏蒸</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>产后肩颈调理</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">超值拍摄套餐1套</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">游泳洗澡</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">早教</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">平江医院四维彩超</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="memberCon">
|
|
|
<view class="topTit">
|
|
|
<text class="titInner">
|
|
|
<text class="titCon"><text class="f_blue">￥<text class="f_big">99</text></text>超级修复女王卡</text>
|
|
|
<text class="line"></text>
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">套餐项目</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
<view class="mealCol flex_start flex_wrap">
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>黄疸检测</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>腹直肌修复</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>磁疗发汗排毒</text><text class="f_black">2次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>经络头疗</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>肩颈调理</text><text class="f_black">2次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo width_453">
|
|
|
<view class="flex_between"><text>露安适尿不湿</text><text class="f_black">1包（S/56PCS）</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="memberCon">
|
|
|
<view class="topTit">
|
|
|
<text class="titInner">
|
|
|
<text class="titCon"><text class="f_blue">￥<text class="f_big">680</text></text>超级福利卡</text>
|
|
|
<text class="line"></text>
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left"><image src="../../static/i_left.png"></image></view>
|
|
|
<view class="tit_center">套餐项目</view>
|
|
|
<view class="i_right"><image src="../../static/i_right.png"></image></view>
|
|
|
</view>
|
|
|
<view class="mealCol flex_start flex_wrap">
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>黄疸检测</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>腹直肌修复</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>磁疗发汗排毒</text><text class="f_black">2次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>经络头疗</text><text class="f_black">1次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo">
|
|
|
<view class="flex_between"><text>肩颈调理</text><text class="f_black">2次</text></view>
|
|
|
</view>
|
|
|
<view class="colInfo width_453">
|
|
|
<view class="flex_between"><text>露安适尿不湿</text><text class="f_black">1包（S/56PCS）</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="joinBox" @click="open"><button>加入会员</button></view>
|
|
|
<view class="shareIcon" @click="shareOpen" v-if="user_info.promotion == 1">
|
|
|
<image src="../../static/share.png"></image>
|
|
|
</view>
|
|
|
<uni-popup ref="popup" :mask-click="false" type="bottom" class="popBox">
|
|
|
<view class="memberPop">
|
|
|
<image class="i_close" @click="close" src="../../static/details_close@2x.png"></image>
|
|
|
<view class="title">购会员，享特权</view>
|
|
|
<view class="cardOuter">
|
|
|
<view v-for="(i, k) in packages" :class="{cur: cardActive == k, cardCol: true}"
|
|
|
@click="cardActive = k">
|
|
|
<view class="flex_between" >
|
|
|
<view>{{i.name}}</view>
|
|
|
<view class="cardTit">{{i.price}}元</view>
|
|
|
</view>
|
|
|
<view class="note">备注：{{i.name}}</view>
|
|
|
</view>
|
|
|
<!-- <view :class="{cur: cardActive == 1, cardCol: true}" @click="cardActive = 1">
|
|
|
<view>福利卡</view>
|
|
|
<view class="cardTit">99元</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<button class="buyNow" @click="goBuy">立即购买</button>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
|
|
|
<view class="codeOuter">
|
|
|
<view class="shareCon" @click="shareClose">
|
|
|
<canvas style="width:80%;margin-left:10%;position: absolute;"
|
|
|
:style="{ height:(shareHeight*scare) + 'px', marginTop:(cropperH-(shareHeight*scare))/2+'rpx'}" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
|
|
<!-- <image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image> -->
|
|
|
<!-- <image class="code" src="../../static/300_qr.png"></image> -->
|
|
|
</view>
|
|
|
<view class="shareBott" :style="{display: shareBtnDisplay}">
|
|
|
<button class="shareCol" @click="shareClose" open-type="share"
|
|
|
style="border-radius:0;flex:1;">发给朋友</button>
|
|
|
<button class="shareCol" @click="save" style="border-radius:0;flex:1;">保存相册</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
let sysInfo = uni.getSystemInfoSync();
|
|
|
let SCREEN_WIDTH = sysInfo.screenWidth
|
|
|
let SCREEN_HEIGHT = sysInfo.screenHeight;
|
|
|
let WindowHeight=sysInfo.windowHeight;
|
|
|
|
|
|
let windowWidth=sysInfo.windowWidth;
|
|
|
import {
|
|
|
weixin
|
|
|
} from '../../utils/weixin.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
cardActive: 0,
|
|
|
img: '',
|
|
|
user_info: {
|
|
|
promotion: ''
|
|
|
},
|
|
|
shareBtnDisplay: 'none',
|
|
|
// 动态的宽高
|
|
|
cropperW: SCREEN_WIDTH,
|
|
|
cropperH: SCREEN_HEIGHT,
|
|
|
packages: [],
|
|
|
sharePath: "",
|
|
|
scare:1,
|
|
|
shareHeight:500
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
if (option.promotion_id) {
|
|
|
uni.setStorageSync("base_promotion_id", option.promotion_id)
|
|
|
}
|
|
|
weixin.getOpenidInfo(info => {
|
|
|
this.user_info = info
|
|
|
}, false)
|
|
|
|
|
|
this.scare=windowWidth/375;
|
|
|
},
|
|
|
onShow() {
|
|
|
if (this.checkLogin()) {
|
|
|
this.getPackages()
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
title: '加入会员',
|
|
|
path: 'pages/member/member?promotion_id=' + this.user_info.id,
|
|
|
imageUrl: this.img
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
shareOpen() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
});
|
|
|
var that = this;
|
|
|
this.$refs.shareCode.open()
|
|
|
uni.request({
|
|
|
url: this.baseUrl + '/api/member/get-wxa-qrcode',
|
|
|
method: 'GET',
|
|
|
data: {
|
|
|
path: 'pages/member/member',
|
|
|
scene: 'promotion_id=' + this.user_info.id
|
|
|
},
|
|
|
success: r => {
|
|
|
if (r.data.status === 1) {
|
|
|
uni.getImageInfo({
|
|
|
src: this.baseUrl + r.data.data, // 二维码
|
|
|
success: res => {
|
|
|
var ctx = uni.createCanvasContext('firstCanvas')
|
|
|
|
|
|
|
|
|
var w = SCREEN_WIDTH * 0.8;
|
|
|
var h = this.shareHeight*this.scare;
|
|
|
// ctx.fillStyle = '#fff';
|
|
|
// ctx.fillRect(0, 0, 214, 342);
|
|
|
ctx.drawImage('../../static/bg_haibao@2x.jpg', 0, 0,
|
|
|
w, h
|
|
|
); //(SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);
|
|
|
|
|
|
ctx.drawImage('../../static/bg_haibao1.png', 20, 30 + 40, w -
|
|
|
40, h - 100);
|
|
|
/* SCREEN_WIDTH *
|
|
|
0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
|
|
|
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); */
|
|
|
|
|
|
ctx.drawImage('../../static/member_01.jpg', 20, 30 + 40, w -
|
|
|
40, (h - 60 - 60) * 0.5);
|
|
|
/* SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH *
|
|
|
0.6 * 1.65) /
|
|
|
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695 / 1.6); */
|
|
|
|
|
|
ctx.font = "22rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#fff";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("会员福利孕产礼包", 20, 50);
|
|
|
|
|
|
ctx.font = "16rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#000";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("专享大礼包", 40, (h + 50) * 0.5 + 20);
|
|
|
|
|
|
ctx.font = "14rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#3377b7";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("¥19.9元起福利卡", 40, (h + 50) * 0.5 + 20 + 30);
|
|
|
|
|
|
|
|
|
let user_info = uni.getStorageSync("user_info_yunyubang");
|
|
|
|
|
|
let userProfile = uni.getStorageSync('user_profile');
|
|
|
|
|
|
var img = '../../static/avatar.jpg';
|
|
|
uni.getImageInfo({
|
|
|
src: userProfile.avatarUrl, // 头像
|
|
|
success: rlogo => {
|
|
|
img = rlogo.path;
|
|
|
|
|
|
}
|
|
|
});
|
|
|
that.circleImg(ctx,
|
|
|
img,
|
|
|
40, h - 60 - w * 0.15,
|
|
|
w * 0.15 / 2);
|
|
|
|
|
|
ctx.font = "12rpx normal";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#000";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText(user_info.name + "/" + user_info.phone,
|
|
|
40, h - 40);
|
|
|
|
|
|
this.circleImg(ctx, res.path, w - 40 - w * 0.2, h - 40 - w *
|
|
|
0.2, w * 0.2 / 2);
|
|
|
|
|
|
ctx.draw(),
|
|
|
// r: 半径
|
|
|
setTimeout(() => {
|
|
|
uni.canvasToTempFilePath({
|
|
|
canvasId: 'firstCanvas',
|
|
|
fileType: 'jpg',
|
|
|
success: (res) => {
|
|
|
this.shareBtnDisplay = 'flex'
|
|
|
uni.hideLoading();
|
|
|
this.img =
|
|
|
'../../static/member_01.jpg'
|
|
|
this.sharePath = res
|
|
|
.tempFilePath;
|
|
|
},
|
|
|
})
|
|
|
}, 100)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
uni.hideLoading()
|
|
|
this.$refs.shareCode.close()
|
|
|
this.alert(r.data.msg)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
circleImg: function(ctx, img, x, y, r) {
|
|
|
ctx.save()
|
|
|
var d = 2 * r;
|
|
|
var cx = x + r;
|
|
|
var cy = y + r;
|
|
|
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
|
|
|
|
|
|
ctx.clip();
|
|
|
ctx.drawImage(img, x, y, d, d);
|
|
|
ctx.restore();
|
|
|
},
|
|
|
shareClose() {
|
|
|
this.$refs.shareCode.close()
|
|
|
},
|
|
|
open() {
|
|
|
this.$refs.popup.open('top')
|
|
|
|
|
|
},
|
|
|
close() {
|
|
|
this.$refs.popup.close()
|
|
|
},
|
|
|
goBuy() {
|
|
|
if (this.checkLogin()) {
|
|
|
this.$refs.popup.close()
|
|
|
let package_id = this.packages.length > 0 ? this.packages[this.cardActive].id : 0
|
|
|
if (this.packages.length == 0) {
|
|
|
uni.showToast({
|
|
|
title: '请选择套餐',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
});
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: "../../packages/packageBuy/pages/buyMember/buyMember?package_id=" + package_id
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
//保存图片时，h5端不能直接保存，只能通过预览长按保存
|
|
|
save() {
|
|
|
|
|
|
console.log(1)
|
|
|
let _this = this;
|
|
|
// #ifdef H5
|
|
|
uni.previewImage({
|
|
|
urls: [_this.sharePath]
|
|
|
})
|
|
|
// #endif
|
|
|
// #ifdef APP-PLUS||MP-WEIXIN
|
|
|
uni.saveImageToPhotosAlbum({
|
|
|
filePath: _this.sharePath,
|
|
|
success: function() {
|
|
|
_this.$refs.shareCode.close()
|
|
|
_this.alert('保存成功')
|
|
|
}
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
getPackages() {
|
|
|
// this.reqByToken('/api/member/get-packages', {}, r => {
|
|
|
// this.packages = r
|
|
|
// }, 'GET')
|
|
|
const phone_token = uni.getStorageSync('phone_token')
|
|
|
weixin.request({
|
|
|
api: '/api/member/get-packages',
|
|
|
method: 'GET',
|
|
|
utilSuccess: r => {
|
|
|
this.packages = r.data
|
|
|
},
|
|
|
utilFail: r => {
|
|
|
console.log(r);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
page {
|
|
|
background: linear-gradient(to right, #488e4c 0%,#039786 100%);
|
|
|
padding-bottom: 160rpx;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.memberBanner {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
|
|
|
image {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.joinBox {
|
|
|
width: 100%;
|
|
|
padding: 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
position: fixed;
|
|
|
z-index:5;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
box-shadow: -5rpx 0px 20rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
button {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
|
text-align: center;
|
|
|
line-height: 100rpx;
|
|
|
text-align: center;
|
|
|
background: linear-gradient(to bottom, #488e4c 0%,#039786 100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.popBox {
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.shareIcon {
|
|
|
position: fixed;
|
|
|
width: 136rpx;
|
|
|
height: 136rpx;
|
|
|
bottom: 150rpx;
|
|
|
right: 30rpx;
|
|
|
z-index: 9;
|
|
|
|
|
|
image {
|
|
|
display: block;
|
|
|
width: 136rpx;
|
|
|
height: 136rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.memberPop {
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
position: fixed;
|
|
|
padding-bottom: 50rpx;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
|
|
|
.title {
|
|
|
font-size: 36rpx;
|
|
|
color: #000;
|
|
|
text-align: center;
|
|
|
padding: 25rpx 0;
|
|
|
}
|
|
|
|
|
|
.i_close {
|
|
|
display: block;
|
|
|
width: 38rpx;
|
|
|
height: 36rpx;
|
|
|
position: absolute;
|
|
|
top: 30rpx;
|
|
|
right: 30rpx;
|
|
|
}
|
|
|
|
|
|
.cardOuter {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 20rpx;
|
|
|
.note{
|
|
|
color:#999;
|
|
|
font-size:24rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.cardCol {
|
|
|
flex:1;
|
|
|
height: 156rpx;
|
|
|
margin: 0 15rpx 15rpx 15rpx;
|
|
|
border-radius: 8rpx;
|
|
|
box-sizing: border-box;
|
|
|
border: 2rpx solid #F5DFB5;
|
|
|
font-size: 28rpx;
|
|
|
color: #999;
|
|
|
text-align: center;
|
|
|
line-height: 2;
|
|
|
padding:10rpx 30rpx;
|
|
|
.cardTit {
|
|
|
color: #333;
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cardCol.cur {
|
|
|
border: 2rpx solid #E40280;
|
|
|
box-shadow: 0 0 15rpx rgba(228, 2, 128, 0.4);
|
|
|
color: #FF578A;
|
|
|
|
|
|
.cardTit {
|
|
|
color: #FF578A;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.buyNow {
|
|
|
width: 500rpx;
|
|
|
height: 80rpx;
|
|
|
border-radius: 40rpx;
|
|
|
color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
text-align: center;
|
|
|
line-height: 80rpx;
|
|
|
text-align: center;
|
|
|
background: #FF578A;
|
|
|
margin: 30rpx auto 0 auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.shareBox {
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
.codeOuter {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
// padding-top: 13vh;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.shareCon {
|
|
|
// width: 500rpx;
|
|
|
// margin: 0 auto;
|
|
|
//position: absolute;
|
|
|
//top: 45%;
|
|
|
//left: 50%;
|
|
|
// transform: translate(-50%, -50%);
|
|
|
|
|
|
.code {
|
|
|
width: 300rpx;
|
|
|
height: 300rpx;
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
margin-left: -150rpx;
|
|
|
top: 50%;
|
|
|
margin-top: -150rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.shareBott {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
.shareCol {
|
|
|
width: 50%;
|
|
|
height: 100rpx;
|
|
|
text-align: center;
|
|
|
line-height: 100rpx;
|
|
|
font-size: 30rpx;
|
|
|
background: #FF578A;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.shareCol:first-child {
|
|
|
background: #e8e8e8;
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
.memberCon{
|
|
|
width:690rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 8rpx;
|
|
|
padding:30rpx 0;
|
|
|
box-sizing: border-box;
|
|
|
margin-top:20rpx;
|
|
|
.topTit{
|
|
|
font-size:33rpx;
|
|
|
color:#302c2f;
|
|
|
font-weight:700;
|
|
|
padding:0 30rpx;
|
|
|
.titInner{position: relative;}
|
|
|
.titCon{position: relative;z-index:3;}
|
|
|
.line{
|
|
|
display:inline-block;
|
|
|
height:30rpx;
|
|
|
width:110%;
|
|
|
position: absolute;
|
|
|
left:0;
|
|
|
bottom:0;
|
|
|
background: linear-gradient(to bottom, #FDFEFD 0%,#91E4C1 100%);
|
|
|
z-index:1;
|
|
|
}
|
|
|
.f_blue{
|
|
|
color:#0079b8;
|
|
|
}
|
|
|
.f_big{
|
|
|
font-size:43rpx;
|
|
|
padding:0 5rpx;
|
|
|
}
|
|
|
}
|
|
|
.title{
|
|
|
padding:20rpx 30rpx;
|
|
|
.i_left{
|
|
|
image{display:block;width:23rpx;height:23rpx;}
|
|
|
}
|
|
|
.i_right{
|
|
|
image{display:block;width:23rpx;height:23rpx;}
|
|
|
}
|
|
|
.tit_center{
|
|
|
font-size:28rpx;
|
|
|
color:#0c967f;
|
|
|
font-weight: bold;
|
|
|
min-width:250rpx ;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.mealCol{
|
|
|
padding:0 20rpx;
|
|
|
.width_453{width:480rpx!important;}
|
|
|
.colInfo{
|
|
|
width:310rpx;
|
|
|
margin:10rpx;
|
|
|
background: #def6eb;
|
|
|
height:50rpx;
|
|
|
border-radius:25rpx;
|
|
|
padding:0 30rpx;
|
|
|
font-size:26rpx;
|
|
|
font-weight:700;
|
|
|
line-height:50rpx;
|
|
|
box-sizing: border-box;
|
|
|
color:#079683;
|
|
|
.f_black{color:#044238;}
|
|
|
}
|
|
|
.colInfo:nth-child(even){
|
|
|
margin:10rpx 0 10rpx 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
