150 lines
3.2 KiB
Vue
150 lines
3.2 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})`}">
|
||
<image class="mdb-logo" :src="mobileFileUrl+logo"></image>
|
||
<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/',
|
||
mobileFileUrl: configService.fileUrl + 'pixel/home/',
|
||
// logo图标
|
||
logo: 'logo-new.png',
|
||
// 下载链接
|
||
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-logo{
|
||
position: absolute;
|
||
top: 42rpx;
|
||
left: 30rpx;
|
||
width: 300rpx;
|
||
height: 70rpx;
|
||
}
|
||
.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> |