【报Bug】uni.createCanvasContext(canvasId, this) draw方法无法回调

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容]
draw方法无法回调，会一直卡在showLoading不能进入drawFANGFA

重现步骤

[步骤]
点击生成宣传图片
[结果]
无法进入draw页面，但是我单独创建一个页面。无任何组件的情况下可以绘制并回调成功
[期望]
进入draw回调方法回调成功
[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]
HBuilderX
[IDE版本号]
1.9.4
[windows版本号]

[mac版本号]
MACOS SIERRA 10.12.6

uni-app运行环境说明

[运行端是h5或app或某个小程序？]
app
[运行端版本号]

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
hbuilderx
[编译模式是老模板模式还是新的自定义组件模式？]

App运行环境说明

[Android版本号]

[iOS版本号]
12.4
[手机型号]
ip6s
[模拟器型号]
ip6sp

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
卡主无报错
[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]
<template>
<view class="content">
<!--还能怎么办 画图喽-->
<view style='width:0px;height:0px;overflow:hidden;'>
<canvas canvas-id="proShow" class="proShow">
</canvas>
</view>
<!-- 分享啊 是真的烦躁-->
<uni-popup :show="type === 'bottom-share'" position="bottom" @hidePopup="togglePopup('')">
<view class="bottom-title">分享到</view>
<view class="bottom-content">
<view class="bottom-content-box" v-for="(item, index) in bottomData" :key="index">
<view class="bottom-content-image" :class="item.name" :data-index="index" @tap="share">
<text class="icon">{{ item.icon }}</text>
</view>
<view class="bottom-content-text">{{ item.text }}</view>
</view>
</view>
<view class="bottom-btn" @click="togglePopup('')">取消分享</view>
</uni-popup>
<!--画图和弹出窗喽-->
<view v-if="showMask" class="jumpMask" @tap="hindMask">
<view class="imgBox" v-if="showType === 2">
<image :src="haibaoImg" :data-src="haibaoImg" @error="getErr" @load="getLoad" />
<button class="saveBtn" @tap="saveImg">保存到相册</button>
</view>

        <view v-if="showType === 1" class="awardMSG">  
            <label>邀请用户奖励</label>  
            <text>{{ awardMsg.txt }}</text>  
        </view>  

        <view class="close">x</view>  
    </view>   
    <view class="ballBox">  
        <view class="ball"></view>  
        <view class="ball"></view>  
    </view>  
    <view class="UserInfo">  
        <image :src="UserInfo.photo" />  
        <label>{{ UserInfo.nickName }}</label>  
    </view>  
    <view class="detailView">  
        <label class="myInvite">我的邀请</label>  
        <view class="detailData">  
            <view class="inviteCountBox">  
                <label>已邀请(人)</label>  
                <label style="margin-top: 20upx;">{{ winnerInfo.recommendedUsers }}</label>  
            </view>  
            <view class="line">|</view>  
            <view class="getMoney inviteCountBox">  
                <label>收到的金额(元)</label>  
                <label style="margin-top: 20upx;">{{ winnerInfo.cumulativeMoney }}</label>  
                <view @tap="showWinnerRules">奖励明细</view>  
            </view>  
        </view>  

        <view class="qrimg">  
            <tki-qrcode  
                ref="tkiQrcode"  
                :val="val"  
                :size="size"  
                :unit="unit"  
                :background="background"  
                :foreground="foreground"  
                :pdground="pdground"  
                :icon="icon"  
                :iconSize="iconsize"  
                :lv="lv"  
                :onval="onval"  
                :loadMake="loadMake"  
                :usingComponents="usingComponents"  
                :showLoading="showLoading"  
                :loadingText="loadingText"  
                @result="qrR"  
            />  
            <label>发送二维码邀请好友-一起冲刺互联网新零售</label>  
        </view>  
        <view class="myJoinCode">  
            <label>我的邀请码</label>  
            <view>{{ UserInfo.invitationCodes }}</view>  
        </view>  
        <view class="btn">  
            <button class="justInvite" hover-class="on" @click="togglePopup('bottom-share')">立即邀请</button>  
            <button plain="true" class="createCas" @tap="createInvitePage">生成海报</button>  
        </view>  

        <view class="swiperTab">  
            <view class="swiperTabChild" @tap="changeType('0')">  
                <label>一起创业</label>  
                <view v-show="currentTap === '0'" class="ontab" />  
            </view>  
            <view class="swiperTabChild" @tap="changeType('1')">  
                <label>邀请明细</label>  
                <view v-show="currentTap === '1'" class="ontab" />  
            </view>  
        </view>  
        <view class="workBox" v-if="currentTap === '0'">  
            <!--分三种展示-按照类别  有可能是一个视频  有可能是1张或多张图片-->  
            <block v-for="(item, index) in workInfo" :key="item.index">  
                <view class="workMsgItem">  
                    <view class="headBox">  
                        <view class="icoBox">  
                            <image src="../../../static/sharemenu/qq.png"></image>  
                            <view class="nameBox">  
                                <label>小二好货</label>  
                                <view>门店智能营销专家-一起打造品牌化门店吧</view>  
                            </view>  
                        </view>  
                        <view class="txtBox">  
                            <text class="txt">{{ item.text }}</text>  
                            <view class="detailBox">  
                                <view v-if="item.type === 2" class="imgItemBox">  
                                    <block v-for="(citem, index) in item.content" :key="citem.index"><image :src="citem"></image></block>  
                                </view>  
                                <view v-if="item.type === 1" class="imageBox"><image :src="item.content"></image></view>  
                                <view v-if="item.type === 3" class="videoBox"><video id="myVideo" :src="item.content" @error="videoErrorCallback" controls></video></view>  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </block>  
        </view>  
        <view class="facaiBox" v-if="currentTap === '1'">  
            <block v-for="(item, index) in winnerList" :key="index">  
                <view class="facaiItem">  
                    <image :src="item.photo"></image>  
                    <view class="facaiInfo">  
                        <label>{{ item.phone }}</label>  
                        <view>2017-2-2受邀</view>  
                    </view>  
                    <view class="moneyInfo">  
                        <label>奖励金额</label>  
                        <view>{{ item.money }}元</view>  
                    </view>  
                </view>  
            </block>  
            <view v-if="storeList.length < 1" class="kongView">  
                <image src="../../static/img/kong_back.png"></image>  
                <label>没有邀请好朋友,快去分享吧</label>  
            </view>  
        </view>  
    </view>  
    <view style="width: 100vw; height: 5vh;" />  
</view>  

</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import tkiQrcode from 'tki-qrcode';
import service from '@/service.js';
import util from '@/util.js';
var page = 1;
let provider = '';
let scene = '';
let type = 0;
let href = '';
let title = '';
let summary = '';
let imageUrl = '';
let miniProgram = '';
var ctx = null;
var img = ''
export default {
components: { uniPopup,tkiQrcode },
data() {
return {
type: '',
list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
bottomData: [{
text: '微信',
icon: '\ue6a4',
name: 'wx'
},
{
text: '朋友圈',
icon: '\ue646',
name: 'wx'
}
],
shareProvide:['sinaweibo','qq','weixin'],
showType: 0,
showMask: false,
UserInfo: '',
currentTap: '0',
val: '', // 要生成的二维码值
size: 220, // 二维码大小
unit: 'upx', // 单位
background: '#ffffff', // 背景色
foreground: '#000000', // 前景色
pdground: '#000000', // 角标色
icon: '../../../static/img/ic_logo.png', // 二维码图标
iconsize: 10, // 二维码图标大小
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
onval: false, // val值变化时自动重新生成二维码
loadMake: true, // 组件加载完成后自动生成二维码,
usingComponents: 'true',
showLoading: 'true',
src: '', // 二维码生成后的图片地址或base64
loadingText: '二维码生成中',
workInfo: '',
winnerInfo: '', //或得到的奖励信息
winnerList: [], //奖励列表
awardMsg: '', //奖励的明细机制
haibaoImg:''
};
},
onBackPress() {
if (this.type !== '') {
this.type = '';
return true;
}
},
methods: {
hindMask() {
this.showMask = false;
},
createInvitePage() {

                    var _this = this  

                ctx = uni.createCanvasContext('proShow',_this)  

                ctx.setFillStyle('rgb(254,195,11)')  
                ctx.fillRect(0, 0, 576, 930)  
                ctx.save()  
                ctx.drawImage("../../static/img/welcome.png", 20, 10, 536, 719.44)  
                ctx.save()  
                console.log("画白色")  
                ctx.setFillStyle('white')  
                ctx.fillRect(0, 750.86, 576, 179.14)  
                ctx.save()  

                //https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560696276917&di=2c15022869802cbb905476902328bf7d&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150822%2FImg419472540.jpg  

                var x=69.02;  
                var y=852.44;  
                var w=209.78;  
                var h = 30;  
                var r=10;  
                ctx.setFillStyle("black")  
                ctx.setTextAlign("left")  
                ctx.setFontSize(21)  
                ctx.fillText('商家营销小二来助力', x, y-h*2)   
                ctx.fillText('扫码加入即可拥有智慧门店', x, y-h)      

                ctx.drawImage("../../static/img/welcome.png",   
                400, y-100,150 , 150)  
                ctx.save()  
                // context.font='italic 12px SYshuxingti'  
                    ctx.setFontSize(12)  
                ctx.fillText("我是"+"  毛宜兵  "+"我为小二代言", x, y+h*2)  
                ctx.beginPath()  
                 // 因为边缘描边存在锯齿，最好指定使用 transparent 填充  
                 // 这里是使用 fill 还是 stroke都可以，二选一即可  
                 ctx.setFillStyle('rgb(254,195,11)')  
                 // context.setStrokeStyle('transparent')  
                 // 左上角  
                 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)  

                 // border-top  
                 ctx.moveTo(x + r, y)  
                 ctx.lineTo(x + w - r, y)  
                 ctx.lineTo(x + w, y + r)  
                 // 右上角  
                 ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)  

                 // border-right  
                 ctx.lineTo(x + w, y + h - r)  
                 ctx.lineTo(x + w - r, y + h)  
                 // 右下角  
                 ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)  

                 // border-bottom  
                 ctx.lineTo(x + r, y + h)  
                 ctx.lineTo(x, y + h - r)  
                 // 左下角  
                 ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)  

                 // border-left  
                 ctx.lineTo(x, y + r)  
                 ctx.lineTo(x + r, y)  

                 // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应  
                 ctx.fill()  
                 // context.stroke()  
                 ctx.closePath()  
                 // 剪切  
                ctx.clip()  
                ctx.save()  
                //画文字  
                console.log("花蚊子")  

                ctx.font='10px sans-serif'  
                ctx.setFillStyle("black")  
                ctx.setTextAlign("center")  
                ctx.setFontSize(13)  
                ctx.fillText('联系我们：0731-89572689', x+w/2, y+h/2+2)    
                ctx.save()  
                uni.showLoading({  
                    title:"正在生成图片",  
                    icon:'none'  
                })  
                ctx.draw(  
                        {reserve: false,  
                      callback: function () {  
                        setTimeout(function(){  
                        uni.canvasToTempFilePath({  
                      canvasId: 'proShow',  
                      success: function(res) {  
                        console.log(res.tempFilePath)  
                        _this.showMask = true  
                        _this.showType=2  
                        _this.haibaoImg=res.tempFilePath  

                        console.log(_this.haibaoImg)  
                        uni.hideLoading()  
                      }   
                    })  
                    },5000)  
                      }  

                }  
            );  

    },  
    showWinnerRules(){  
        this.showMask = true;  
        this.showType = 1;  
    },  

    getawardMsg(e) {  
        var _this = this;  

        let winnerUrl = service.BASE_URL + 'open/Incentives?tpye=1';  
        let params = '';  
        service.getRequest(winnerUrl, params, function success(res) {  
            console.log(JSON.stringify(res));  
            _this.awardMsg = res.data.data;  
        });  
    },  
    togglePopup(type) {  
        console.log(this.type)  
        this.type = type;  
        console.log(type)  
        var _this = this;  

        console.log(_this.type)  
    },  
    //open/Incentives?tpye=1  
    //获取最终的奖励金额  
    getWinnerInfo(e) {  
        var _this = this;  
        let listUrl = service.BASE_URL + 'merchant/recommendedData';  
        let params = '';  

        service.getRequest(listUrl, params, function success(res) {  
            console.log(JSON.stringify(res));  
            _this.winnerInfo = res.data.data;  
        });  
    },  
    //获取邀请的列表  
    getInviteList(e) {  
        var _this = this;  
        let listUrl = service.BASE_URL + 'merchant/inviteList';  
        var time = Date.parse(new Date());  
        let params = 'upTime=' + time / 1000;  

        if (e != undefined) {  
            params = 'upTime=' + e / 1000;  
        }  

        service.getRequest(listUrl, params, function success(res) {  
            console.log(JSON.stringify(res));  
            _this.winnerList = res.data.data;  
        });  
    },  
    getWorkInfoList() {  
        var _this = this;  
        let url = service.BASE_URL + 'open/getWorkInfoData';  
        let params = {  
            page: page  
        };  
        service.postRequest(url, params, function success(res) {  
            if (res.data.status != 1) {  
                return;  
            }  

            for (var i = 0; i < res.data.data.length; i++) {  
                res.data.data[i].content = res.data.data[i].type === 2 ? res.data.data[i].content.toString().split('|||') : res.data.data[i].content;  
            }  
            _this.workInfo = res.data.data;  

            page = page + 1;  
        });  
    },  
    getUserInfo() {  
        var _this = this;  
        _this.UserInfo = uni.getStorageSync('userInfoData');  
        console.log(JSON.stringify(_this.UserInfo));  
        this.val = 'https://m.worldhtg.com/mcinvite?inviteCode=' + _this.UserInfo.invitationCodes;  
    },  
    videoErrorCallback(e) {  
        console.log(JSON.stringify(e));  
    },  
    sliderchange(e) {  
        this.size = e.detail.value;  
    },  
    creatQrcode() {  
        this.$refs.tkiQrcode._makeCode();  
    },  
    saveQrcode() {  
        this.$refs.tkiQrcode._saveCode();  
    },  
    getLoad(res){  
        console.log(JSON.stringify(res))  
    },  
    getErr(res){  
            console.log(JSON.stringify(res))  
    },  

    qrR(res) {  
        console.log(JSON.stringify(res));  
        this.src = res;  
    },  
    clearQrcode() {  
        this.$refs.tkiQrcode._clearCode();  
        this.val = '';  
    },  
    changeType(e) {  
        var _this = this;  
        _this.currentTap = e;  
    }  
},  
onLoad(e) {  
    this.getUserInfo();  
    setTimeout(function success(res) {}, 2000);  
    this.getWorkInfoList();  
    this.getawardMsg();  
    this.getWinnerInfo();  
    this.creatQrcode();  
    this.getInviteList();  

}  

};
</script>

<style>
.canvas{

    height: 960px;  
    width: 100vw;  
}  

.awardMSG {
display: flex;
flex-direction: column;
width: 70vw;
z-index: 999;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 17px 1px rgba(11, 10, 9, 0.1);
border-radius: 5px;
}
.awardMSG > label {
margin-top: 30upx;
width: 100%;
text-align: center;
font-size: 15px;
font-family: STHeitiSC-Medium;
font-weight: bold;
color: rgba(245, 179, 46, 1);
}
.awardMSG > text {
margin-top: 30upx;
margin-bottom: 30upx;
}
.close {
margin-top: 5vh;
width: 10vw;
height: 10vw;
background-color: #ffffff;
font-size: 8vw;
border: 1px solid #000000;
text-align: center;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
color: #000000;
border-radius: 50%;
}
.jumpMask {
background: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.content {
display: flex;
background-color: rgba(245, 179, 46, 1);
width: 100vw;
flex-direction: column;
align-content: center;
align-items: center;
}
.UserInfo {
margin-top: 5vh;
position: absolute;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
width: 100vw;
height: 20vh;
}
.UserInfo > image {
height: 10vh;
width: 10vh;
border-radius: 50%;
}
.UserInfo > label {
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 18px;
}
.detailView {
margin-top: 10vh;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
width: 90vw;
min-height: 100vh;
background: rgba(255, 255, 255, 1);
border-radius: 13px;
}
.myInvite {
margin-top: 11vh;
}
.detailData {
display: flex;
position: relative;
flex-direction: row;
width: 80vw;
align-content: center;
align-items: center;
justify-content: center;
height: 200upx;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 8px 1px rgba(204, 204, 203, 0.3);
border-radius: 5px;
margin-bottom: 100upx;
}
.inviteCountBox {
height: 120upx;
width: 35vw;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.inviteCountBox > label {
margin-top: 10upx;
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(51, 51, 51, 1);
line-height: 18px;
}
.inviteCountBox > view {
font-size: 9px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
text-decoration: underline;
color: rgba(200, 199, 198, 1);
line-height: 18px;
}
.line {
height: 120upx;
margin-top: 10upx;
width: 10 vw;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.qrimg {
margin-top: 50rpx;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
width: 90vw;
height: 250upx;
}
.qrimg > label {
font-size: 10px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(113, 112, 112, 1);
line-height: 18px;
}
.qrimg > tki-qrcode {
width: 220upx;
height: 220upx;
}
.myJoinCode {
margin-top: 30upx;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
width: 90vw;
}
.myJoinCode > label {
display: flex;
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 18px;
}
.myJoinCode > view {
margin-top: 20upx;
font-size: 30px;
font-family: FZLTZHK--GBK1-0;
font-weight: bold;
color: rgba(254, 84, 86, 1);
line-height: 18px;
}
.ballBox {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100vw;
position: absolute;
}
.ball {
margin-top: 50vh;
display: flex;
height: 10vw;
width: 10vw;
background-color: rgba(245, 179, 46, 1);
border-radius: 50%;
}
.btn {
margin-top: 20upx;
width: 90vw;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.btn > button {
margin-top: 30upx;
width: 80vw;
border: 1px solid rgba(254, 84, 86, 1);
border-radius: 20px;
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
line-height: 37px;
}
.justInvite {
background: linear-gradient(to right, rgb(250, 103, 112), rgb(248, 195, 93));
color: #ffffff;
}
.createCas {
color: rgba(254, 84, 86, 1);
}
.on {
background: linear-gradient(to right, rgb(250, 103, 112), rgb(250, 103, 112));
}
.swiperTab {
position: sticky;
width: 90vw;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
}
.swiperTabChild {
position: sticky;
margin-top: 20upx;
width: 45vw;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.swiperTabChild > label {
height: 20px;
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 20px;
}
.ontab {
width: 10vw;
height: 2px;
background-color: #f5b32e;
border-radius: 10px;
}
.facaiItem {
height: 180upx;
width: 80vw;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
.facaiItem > image {
margin-left: 20upx;
height: 100upx;
width: 100upx;
border-radius: 50%;
}
.facaiInfo {
display: flex;
margin-left: 20upx;
flex-direction: column;
height: 100upx;
justify-content: space-around;
}

.facaiInfo > label {
display: flex;
flex-direction: column;
font-size: 14px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(193, 192, 195, 1);
}

.facaiInfo > view {
font-size: 11px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(193, 192, 195, 1);
}

.moneyInfo {
position: relative;
display: flex;
flex-direction: column;
margin-left: 15vw;
height: 100upx;
justify-content: space-around;
}
.moneyInfo > label {
font-size: 11px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(193, 192, 195, 1);
}
.moneyInfo > view {
font-size: 14px;
font-family: FZLTZHK--GBK1-0;
font-weight: bold;
color: rgba(254, 84, 86, 1);
}
.headBox {
margin-top: 20upx;
width: 80vw;
display: flex;
flex-direction: column;
}
.icoBox {
display: flex;
flex-direction: row;
}
.icoBox > image {
height: 80upx;
width: 80upx;
border-radius: 50%;
}
.nameBox {
margin-left: 15upx;
}
.nameBox > label {
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(51, 51, 51, 1);
}
.nameBox > view {
font-size: 11px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(193, 192, 195, 1);
}
.txtBox {
margin-top: 15upx;
}
.txt {
font-size: 15px;
font-family: FZLTZHK--GBK1-0;
font-weight: 600;
color: rgba(51, 51, 51, 1);
}
.detailBox {
margin-top: 15upx;
}
.imgItemBox {
width: 80vw;
max-height: 44vw;
overflow: hidden;
}
.imgItemBox > image {
margin-left: 3vw;
min-height: 22vw;
min-width: 22vw;
max-height: 22vw;
height: 22vw;
width: 22vw;
}
.imageBox {
width: 80vw;
}
.imageBox > image {
min-height: 33vw;
min-width: 50vw;
max-height: 33vw;
height: 33vw;
width: 50vw;
}
.videoBox {
width: 80vw;
}
.videoBox > video {
min-height: 33vw;
min-width: 50vw;
max-height: 33vw;
height: 33vw;
width: 50vw;
}

.uni-padding-wrap {  
    padding: 0 30upx;  
}  

button {  
    margin: 20upx 0;  
}  

.uni-helllo-text {  
    height: 100upx;  
    line-height: 100upx;  
    text-align: center;  
}  

.center-box {  
    width: 500upx;  
    height: 500upx;  
}  

.uni-list-item {  
    text-align: left;  
    line-height: 80upx;  
    border-bottom: 1px #f5f5f5 solid;  
}  

.uni-list-item:last-child {  
    border: none;  
}  

.center-box .image {  
    width: 100%;  
    height: 100%;  
}  

.bottom-title {  
    line-height: 60upx;  
    font-size: 24upx;  
    padding: 15upx 0;  
}  

.bottom-content {  
    display: flex;  
    flex-wrap: wrap;  
    padding: 0 35upx;  
}  

.bottom-content-box {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    margin-bottom: 15upx;  
    width: 25%;  
    box-sizing: border-box;  
}  

.bottom-content-image {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    width: 90upx;  
    height: 90upx;  
    overflow: hidden;  
    background: #007aff;  
    border-radius: 10upx;  
}  

.bottom-content-text {  
    font-size: 26upx;  
    color: #333;  
    margin-top: 10upx;  
}  

.bottom-btn {  
    height: 90upx;  
    line-height: 90upx;  
    border-top: 1px #f5f5f5 solid;  
}  

.bottom-content-image.wx {  
    background: #00ce47;  
}  

.bottom-content-image.qq {  
    background: #00b6f6;  
}  

.bottom-content-image.sina {  
    background: #ff766a;  
}  

.bottom-content-image.copy {  
    background: #07ccd0;  
}  

@font-face {  
    font-family: 'iconfont';  
    /* project id 1028200 */  
    src: url('https://at.alicdn.com/t/font_1028200_47ewtwy4t04.ttf') format('truetype');  
}  

.icon {  
    font-family: 'iconfont';  
    font-size: 40upx;  
    color: #fff;  
}  
.imgBox>image{  

    width: 80vw;  
    height: 70vh;  
    z-index: 9999;    
    background-color: #FFFFFF;  
}  
.saveBtn{  
    display: flex;  
    text-align: center;  
    align-content: center;  
    align-items: center;  
    justify-content: center;  
    width: 60vw;  
    height: 80upx;  
    color: #FFFFFF;  
    background-color: #F5B32E;  
    z-index: 9999;  

}  

.imgBox{  
    position: absolute;  
    display: flex;  
    flex-direction: column;  
    align-content: center;  
    align-items: center;  
    width: 80vw;  
    height: 80vh;  
    z-index: 9999;  
    margin-top: 5vh;          
}  

</style>

联系方式

[QQ]