139 lines
2.9 KiB
Vue
139 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<u-popup :value="showDialog" mode="center" border-radius="14" @close="$emit('close')">
|
|||
|
|
<view class="mobile-download-dialog">
|
|||
|
|
<view class="mobile-download-background" :style="{backgroundImage: `url(${fileUrl+background})`}">
|
|||
|
|
<u-icon name="close-circle" color="#7da4c4" class="mdb-close" size="60" @click="$emit('close')" />
|
|||
|
|
<image class="mdb-code" :src="fileUrl + downloadCode"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="mobile-download-content">
|
|||
|
|
<view class="mdc-title">
|
|||
|
|
pixel.ai移动端上线啦！
|
|||
|
|
</view>
|
|||
|
|
<view class="mdc-content">
|
|||
|
|
直接扫码或者复制链接到手机端，在手机上继续展开AI创作之旅
|
|||
|
|
</view>
|
|||
|
|
<view class="mdc-button">
|
|||
|
|
<view class="mdcb-btn" @click="copyUrl">
|
|||
|
|
复制链接
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import configService from '@/common/config.service.js';
|
|||
|
|
import { tools } from '@/utils/utils.js';
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
showDialog: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
// 基础路径
|
|||
|
|
fileUrl: configService.fileUrl + 'pixel/pc/home/',
|
|||
|
|
// 下载链接
|
|||
|
|
downloadUrl: 'mobile.apk',
|
|||
|
|
// 二维码
|
|||
|
|
downloadCode: 'download-code.png',
|
|||
|
|
// 弹窗背景图片
|
|||
|
|
background: 'mobile-download.png'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 复制下载链接
|
|||
|
|
copyUrl(){
|
|||
|
|
let that = this;
|
|||
|
|
tools.methods.uniCopy({
|
|||
|
|
content: this.fileUrl + this.downloadUrl,
|
|||
|
|
success: (result)=>{
|
|||
|
|
that.$emit('toast',{type: 'success', title: result});
|
|||
|
|
},
|
|||
|
|
error: (result)=>{
|
|||
|
|
that.$emit('toast',{type: 'error', title: result});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.mobile-download-dialog{
|
|||
|
|
width: 1500rpx;
|
|||
|
|
height: 1100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
position: relative;
|
|||
|
|
.mdb-close{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30rpx;
|
|||
|
|
top: 30rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.mobile-download-background{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 70%;
|
|||
|
|
position: relative;
|
|||
|
|
.mdb-code{
|
|||
|
|
border: 6rpx solid #c2ffd8;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 220rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 30rpx;
|
|||
|
|
left: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.mobile-download-content{
|
|||
|
|
width: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
background-color: #121a14;
|
|||
|
|
padding: 36rpx 50rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.mdc-title{
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #dcffe9;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
.mdc-content{
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #b9d4c8;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
}
|
|||
|
|
.mdc-button{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
.mdcb-btn{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-image: linear-gradient(to right, #c2fc3b 0%, #c2ffd8 100%);
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #1d2129;
|
|||
|
|
cursor: pointer;
|
|||
|
|
&:hover{
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
&:active{
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|