650 lines
15 KiB
Vue
650 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<view class="content" :style="{backgroundImage: 'url('+ staticUrl + 'user/invite_bg.png)'}">
|
|||
|
|
<view class="invite-c">
|
|||
|
|
<view class="invite-w">
|
|||
|
|
<!-- <view class='invite-w-detail' style="font-size: 60upx;font-weight: bolder;line-height:60upx;">邀请好友领取红包</view> -->
|
|||
|
|
<!-- <view class='invite-w-detail' style="font-size: 30upx;line-height:30upx;">快邀请好友加入我们,一起赚钱</view> -->
|
|||
|
|
<view class='invite-w-t' style="margin-top: 50upx;">我的专属邀请码</view>
|
|||
|
|
<text class='invite-w-num'>{{code||userDetailInfo.username}}</text>
|
|||
|
|
<tki-qrcode
|
|||
|
|
ref="qrcode"
|
|||
|
|
:val="qrValue"
|
|||
|
|
:size="300"
|
|||
|
|
icon="/static/logo.png"
|
|||
|
|
:iconSize="30"
|
|||
|
|
:onval="true"
|
|||
|
|
></tki-qrcode>
|
|||
|
|
<view class='invite-w-bot' style="width: 100%;margin-top: 20px;margin-bottom: 0px;">
|
|||
|
|
<view bindtap='recommendlist'>
|
|||
|
|
<!-- <text class='invite-w-bot-red' style="font-size: 30upx;color: #000000;">
|
|||
|
|
已邀请
|
|||
|
|
<text style="font-size: 40upx;color: #d10d0d;margin-left: 10upx;margin-right: 10upx;">{{number}}</text>
|
|||
|
|
人
|
|||
|
|
</text> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class='invite-btn' style="margin-top: 50upx;right: 35upx;">
|
|||
|
|
<view class='share btn' @click="$onCopy(code||userDetailInfo.username)">
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<image :src="staticUrl + 'user/ic-link.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<text class="share-text-two-text">复制邀请码</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='share btn' @click="createPoster()">
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<image :src="staticUrl + 'user/ic-img.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<text class="share-text-two-text">生成邀请海报</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='share btn' @click="onShare">
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<image :src="staticUrl + 'user/weact.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<text class="share-text-two-text">分享到微信</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
|
|||
|
|
<view class="flex_column">
|
|||
|
|
<view class="backgroundColor-white padding1vh border_radius_10px">
|
|||
|
|
<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row marginTop2vh">
|
|||
|
|
<button type="primary" style="height: 80upx;line-height: 80upx;" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="hideCanvasView">
|
|||
|
|
<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
|
|||
|
|
<view class="cu-dialog">
|
|||
|
|
<view class="flex flex-between bg-w title">
|
|||
|
|
<view style="color: #00c73a;">确定</view>
|
|||
|
|
<view class="color-b9" @tap="hideModal">取消</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="padding-xl flex flex-center">
|
|||
|
|
<view class="invite-btn">
|
|||
|
|
<view class='share btn' style="width: 345upx;" @click="onShareType(0)">
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<image :src="staticUrl + 'user/weact.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<text class="share-text-two-text">分享到微信好友</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='share btn' style="width: 345upx;" @click="onShareType(1)">
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<image :src="staticUrl + 'user/wechat_frend.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="share-text-two">
|
|||
|
|
<text class="share-text-two-text">分享到微信朋友圈</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <image src="../../static/poster.png" mode=""></image> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState } from "vuex"
|
|||
|
|
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
|||
|
|
import url from '@/common/http/url.js';
|
|||
|
|
import { getSharePoster } from '@/libs/QS-SharePoster/QS-SharePoster.js';
|
|||
|
|
import publics from "@/common/utils/public.js"
|
|||
|
|
import { inviteUrl } from "@/common/http/index.js"
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: { tkiQrcode },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
staticUrl: this.$staticUrl,
|
|||
|
|
memberData:{},
|
|||
|
|
modalName: null,
|
|||
|
|
code: '',
|
|||
|
|
money: 0,
|
|||
|
|
number: 0,
|
|||
|
|
appTitle:'',
|
|||
|
|
is_superior: false,
|
|||
|
|
invitecode: '',
|
|||
|
|
userDetailInfo:{},
|
|||
|
|
qrValue: "",
|
|||
|
|
poster: {},
|
|||
|
|
qrShow: false,
|
|||
|
|
canvasId: 'default_PosterCanvasId',
|
|||
|
|
codeBackGroundImageUrl:'../../static/poster.png',
|
|||
|
|
// http://yunjulai-oss.oss-cn-shenzhen.aliyuncs.com/web-20200428-08cb0876976e4f2a9900c503eb89c753.png
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
...mapState(["userInfo"])
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// this.getInviteData();
|
|||
|
|
// this.getImages();
|
|||
|
|
let _this = this
|
|||
|
|
this.userDetailInfo = this.userInfo;
|
|||
|
|
let data = {
|
|||
|
|
type: 99,
|
|||
|
|
data: this.userInfo.imAccount
|
|||
|
|
}
|
|||
|
|
this.qrValue = inviteUrl +this.userInfo.username
|
|||
|
|
setTimeout(()=> {
|
|||
|
|
_this.$refs.qrcode._makeCode()
|
|||
|
|
}, 300)
|
|||
|
|
this.$http("GET", url.user.getTeamList, {pageSize: 1}).then(res =>{
|
|||
|
|
this.number = res.data.total
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onShare(){
|
|||
|
|
this.modalName = 'bottomModal';
|
|||
|
|
},
|
|||
|
|
hideModal() {
|
|||
|
|
this.modalName = null;
|
|||
|
|
},
|
|||
|
|
onShareType(type){
|
|||
|
|
console.log(type);
|
|||
|
|
console.log('this.userDetailInfo', this.userDetailInfo)
|
|||
|
|
uni.showLoading({
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
if(type == 0){//好友
|
|||
|
|
publics.shareFriend(this.userDetailInfo.recommendCode,this.userDetailInfo.username,this.userDetailInfo.headPortrait);
|
|||
|
|
}else{//朋友圈
|
|||
|
|
publics.shareFriendcricle(this.userDetailInfo.recommendCode,this.userDetailInfo.username,this.userDetailInfo.headPortrait);
|
|||
|
|
}
|
|||
|
|
this.hideModal();
|
|||
|
|
uni.hideLoading()
|
|||
|
|
},
|
|||
|
|
// 获取页面背景图片
|
|||
|
|
async getImages(){
|
|||
|
|
let data = await this.$http('GET', url.common.codeBackGroundImage).then(res =>{
|
|||
|
|
this.codeBackGroundImageUrl = res.data;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//获取数据
|
|||
|
|
async getInviteData() {
|
|||
|
|
let res = await this.$http('GET', url.user.getInviteData);
|
|||
|
|
this.memberData = res.data;
|
|||
|
|
this.code = res.data.recommendCode;
|
|||
|
|
this.number = res.data.buyCount;
|
|||
|
|
this.invitecode = res.data.recommendCode;
|
|||
|
|
},
|
|||
|
|
// 生成邀请海报
|
|||
|
|
async createPoster() {
|
|||
|
|
let that = this;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const d = await getSharePoster({
|
|||
|
|
_this: this, //若在组件中使用 必传
|
|||
|
|
type: 'testShareType',
|
|||
|
|
formData: {
|
|||
|
|
//访问接口获取背景图携带自定义数据
|
|||
|
|
},
|
|||
|
|
posterCanvasId: this.canvasId, //canvasId
|
|||
|
|
delayTimeScale: 20, //延时系数
|
|||
|
|
backgroundImage: this.codeBackGroundImageUrl,
|
|||
|
|
/* background: {
|
|||
|
|
width: 1080,
|
|||
|
|
height: 1920,
|
|||
|
|
backgroundColor: '#666'
|
|||
|
|
}, */
|
|||
|
|
drawArray: ({
|
|||
|
|
bgObj,
|
|||
|
|
type,
|
|||
|
|
bgScale
|
|||
|
|
}) => {
|
|||
|
|
const dx = bgObj.width * 0.3;
|
|||
|
|
const fontSize = bgObj.width * 0.045;
|
|||
|
|
const lineHeight = bgObj.height * 0.04;
|
|||
|
|
//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
|
|||
|
|
return new Promise((rs, rj) => {
|
|||
|
|
rs([
|
|||
|
|
{
|
|||
|
|
type: 'text',
|
|||
|
|
fontStyle: 'italic',
|
|||
|
|
text: '中亿华商',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
size: fontSize+10,
|
|||
|
|
color: 'white',
|
|||
|
|
alpha: 1,
|
|||
|
|
textAlign: 'left',
|
|||
|
|
textBaseline: 'middle',
|
|||
|
|
infoCallBack(textLength) {
|
|||
|
|
return {
|
|||
|
|
// dx: bgObj.width - textLength - fontSize,
|
|||
|
|
dx: 20,
|
|||
|
|
dy: bgObj.height - lineHeight * 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
serialNum: 0,
|
|||
|
|
id: 'tag1' //自定义标识
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'text',
|
|||
|
|
text: '用户: '+that.userDetailInfo.nickname,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
size: fontSize+10,
|
|||
|
|
color: 'white',
|
|||
|
|
alpha: 1,
|
|||
|
|
textAlign: 'left',
|
|||
|
|
textBaseline: 'middle',
|
|||
|
|
serialNum: 1,
|
|||
|
|
infoCallBack(textLength) {
|
|||
|
|
return {
|
|||
|
|
// dx: bgObj.width - textLength - fontSize,
|
|||
|
|
dx: 20,
|
|||
|
|
dy: bgObj.height - lineHeight * 2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'text',
|
|||
|
|
text: '邀请码: '+that.userDetailInfo.username,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
size: fontSize+10,
|
|||
|
|
color: 'white',
|
|||
|
|
alpha: 1,
|
|||
|
|
textAlign: 'left',
|
|||
|
|
textBaseline: 'middle',
|
|||
|
|
serialNum: 2,
|
|||
|
|
infoCallBack(textLength) {
|
|||
|
|
return {
|
|||
|
|
dx: 20,
|
|||
|
|
dy: bgObj.height - lineHeight
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//二维码内容
|
|||
|
|
{
|
|||
|
|
type: 'qrcode',
|
|||
|
|
text: inviteUrl + that.userDetailInfo.username,
|
|||
|
|
size: bgObj.width * 0.2,
|
|||
|
|
// size: 80,
|
|||
|
|
// dx: bgObj.width * 0.05,
|
|||
|
|
dx: bgObj.width - (bgObj.width * 0.2) - 20,
|
|||
|
|
dy: bgObj.height - bgObj.width * 0.25,
|
|||
|
|
image: '/static/logo.png',
|
|||
|
|
imageSize: bgObj.width * 0.05
|
|||
|
|
// dy: 380
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
setCanvasWH: ({
|
|||
|
|
bgObj,
|
|||
|
|
type,
|
|||
|
|
bgScale
|
|||
|
|
}) => { // 为动态设置画布宽高的方法，
|
|||
|
|
this.poster = bgObj;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.poster.finalPath = d.poster.tempFilePath;
|
|||
|
|
this.qrShow = true;
|
|||
|
|
} catch (e) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
this.$msg(JSON.stringify(e));
|
|||
|
|
console.log(JSON.stringify(e));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
saveImage() {
|
|||
|
|
let _this = this
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: this.poster.finalPath,
|
|||
|
|
success(res) {
|
|||
|
|
_this.$msg('保存成功');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
hideQr() {
|
|||
|
|
this.qrShow = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.content{
|
|||
|
|
width: 750rpx;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
.invite {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 750upx;
|
|||
|
|
height: 753upx;
|
|||
|
|
z-index: 66;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-c {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 67;
|
|||
|
|
width: 750upx;
|
|||
|
|
padding: 0 30upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w {
|
|||
|
|
background-color: #fff;
|
|||
|
|
width: 690upx;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40upx 40upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
margin-bottom: 70upx;
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 35vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-t {
|
|||
|
|
width: 70%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10upx;
|
|||
|
|
display: block;
|
|||
|
|
background: linear-gradient(to right, #5f2ef6, #b945dd);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-num {
|
|||
|
|
color: #5f2ef6;
|
|||
|
|
display: block;
|
|||
|
|
font-size: 36upx;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-detail {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-bot {
|
|||
|
|
margin: 20upx 0 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-bot>view {
|
|||
|
|
width: 49%;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-bot-ic {
|
|||
|
|
width: 48upx;
|
|||
|
|
height: 48upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-bot-red {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #ca0400;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-bot-gray {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #acacac;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-t-blue {
|
|||
|
|
color: #348dfc;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
margin-bottom: 50upx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-input {
|
|||
|
|
font-size: 30upx;
|
|||
|
|
border-bottom: 1px solid #dadada;
|
|||
|
|
margin-bottom: 50upx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-w-btn {
|
|||
|
|
background: linear-gradient(to right, #4a6af9, #28c4ff);
|
|||
|
|
color: #fff;
|
|||
|
|
width: 50%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
padding: 10upx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-btn {
|
|||
|
|
position: relative;
|
|||
|
|
/* top: -160upx; */
|
|||
|
|
text-align: center;
|
|||
|
|
width: 690upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share {
|
|||
|
|
background-color: none;
|
|||
|
|
position: relative;
|
|||
|
|
width: 230upx;
|
|||
|
|
height: 98upx;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
padding: 0;
|
|||
|
|
/* margin: 0 40rpx 40rpx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-text-two {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-text-two-text {
|
|||
|
|
color: #000000;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-btn image {
|
|||
|
|
width: 98upx;
|
|||
|
|
height: 98upx;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
.hideCanvasView {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hideCanvas {
|
|||
|
|
position: fixed;
|
|||
|
|
top: -99999upx;
|
|||
|
|
left: -99999upx;
|
|||
|
|
z-index: -99999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row_c_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modalView {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
opacity: 0;
|
|||
|
|
outline: 0;
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
perspective: 2500upx;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
transition: all .3s ease-in-out;
|
|||
|
|
pointer-events: none;
|
|||
|
|
backface-visibility: hidden;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modalView.show {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_column {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.backgroundColor-white {
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border_radius_10px {
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.padding1vh {
|
|||
|
|
padding: 1vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.posterImage {
|
|||
|
|
width: 60vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marginTop2vh {
|
|||
|
|
margin-top: 2vh;
|
|||
|
|
}
|
|||
|
|
/* ==================
|
|||
|
|
模态窗口
|
|||
|
|
==================== */
|
|||
|
|
|
|||
|
|
.cu-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 1110;
|
|||
|
|
opacity: 0;
|
|||
|
|
outline: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
-ms-transform: scale(1.185);
|
|||
|
|
transform: scale(1.185);
|
|||
|
|
backface-visibility: hidden;
|
|||
|
|
perspective: 2000upx;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
transition: all 0.3s ease-in-out 0s;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal::before {
|
|||
|
|
content: "\200B";
|
|||
|
|
display: inline-block;
|
|||
|
|
height: 100%;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.show {
|
|||
|
|
opacity: 1;
|
|||
|
|
transition-duration: 0.3s;
|
|||
|
|
-ms-transform: scale(1);
|
|||
|
|
transform: scale(1);
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-dialog {
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
width: 680upx;
|
|||
|
|
max-width: 100%;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-dialog .title{
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
.cu-dialog .padding-xl{
|
|||
|
|
padding: 50rpx 0;
|
|||
|
|
}
|
|||
|
|
.cu-modal.bottom-modal::before {
|
|||
|
|
vertical-align: bottom;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.bottom-modal .cu-dialog {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.bottom-modal {
|
|||
|
|
margin-bottom: -1000upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.bottom-modal.show {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.drawer-modal {
|
|||
|
|
transform: scale(1);
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.drawer-modal .cu-dialog {
|
|||
|
|
height: 100%;
|
|||
|
|
min-width: 200upx;
|
|||
|
|
border-radius: 0;
|
|||
|
|
margin: initial;
|
|||
|
|
transition-duration: 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.drawer-modal.justify-start .cu-dialog {
|
|||
|
|
transform: translateX(-100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.drawer-modal.justify-end .cu-dialog {
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-modal.drawer-modal.show .cu-dialog {
|
|||
|
|
transform: translateX(0%);
|
|||
|
|
}
|
|||
|
|
.cu-modal .cu-dialog>.cu-bar:first-child .action{
|
|||
|
|
min-width: 100rpx;
|
|||
|
|
margin-right: 0;
|
|||
|
|
min-height: 100rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|