更新pc端
This commit is contained in:
parent
475352f562
commit
9c45bbec66
24
App.vue
24
App.vue
@ -132,6 +132,21 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
// #ifdef H5
|
||||
mounted() {
|
||||
if(!this.isMobile()){
|
||||
document.documentElement.scrollTop = 0;
|
||||
this.setPageZoom();
|
||||
window.addEventListener('resize', this.setPageZoom);
|
||||
}
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
if(!this.isMobile()){
|
||||
window.removeEventListener('resize', this.setPageZoom);
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
methods:{
|
||||
// 缓存设备平台
|
||||
isMobile() {
|
||||
@ -141,7 +156,14 @@
|
||||
// #endif
|
||||
this.$u.vuex('current_platform', flag ? 'mobile_web' : 'pc_web');
|
||||
return flag;
|
||||
}
|
||||
},
|
||||
// #ifdef H5
|
||||
setPageZoom() {
|
||||
const screenWidth = window.innerWidth;
|
||||
const zoom = screenWidth / 1920;
|
||||
document.documentElement.style.zoom = zoom;
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -25,6 +25,9 @@ const install = (Vue, vm) => {
|
||||
vm.$api.getReleases = async (params = {}) => await vm.$u.get('/paCreationRelease', params);// 发布作品查询
|
||||
vm.$api.deleteReleases = async (id) => await vm.$u.delete(`/paCreationRelease/${id}`);// 删除发布作品
|
||||
|
||||
// 推荐作品管理
|
||||
vm.$api.getRecommend = async (params = {}) => await vm.$u.get('/paRecommend', params);// 首页推荐作品查询
|
||||
|
||||
// 图片管理
|
||||
vm.$api.getCpPhotoById = async (params = {}) => await vm.$u.get('/cpPhoto/all', params);// 根据标签id查询全部图片
|
||||
vm.$api.singlePhotoById = async (id) => await vm.$u.get(`/cpPhoto/${id}`);// 根据图片id查询单个图片
|
||||
|
||||
@ -67,13 +67,36 @@ const install = (Vue, vm) => {
|
||||
break;
|
||||
case 502: //错误判断
|
||||
if(result.errorMsg === '只有登录成功后才可访问'){
|
||||
if(vm.$store.state.current_platform === 'mobile_web')
|
||||
if(vm.$store.state.current_platform === 'mobile_web'){
|
||||
vm.$u.vuex('vuex_token', '');
|
||||
vm.$u.vuex('user_message', {});
|
||||
uni.navigateTo({url:`/pages/mobile_web/my/child_pages/login?nextUrl=/${getCurrentPages()[0].route}`,complete() {
|
||||
setTimeout(()=>{
|
||||
uni.showToast({title: vm.$store.state.vuex_token?'当前登录过期，请重新登录！':
|
||||
'只有登录成功后才可访问',icon: 'none'});
|
||||
},300);
|
||||
}});
|
||||
}else{
|
||||
const status = vm.$store.state.vuex_token;
|
||||
vm.$u.vuex('vuex_token', '');
|
||||
vm.$u.vuex('user_message', {});
|
||||
vm.$router.go(0);
|
||||
if(status){
|
||||
setTimeout(()=>{
|
||||
uni.showToast({title: '当前登录过期，请重新登录！',icon: 'none'});
|
||||
},500);
|
||||
}
|
||||
// uni.reLaunch({
|
||||
// url:getCurrentPages()[0].route,
|
||||
// complete() {
|
||||
// if(status){
|
||||
// setTimeout(()=>{
|
||||
// uni.showToast({title: '当前登录过期，请重新登录！',icon: 'none'});
|
||||
// },300);
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
return result;
|
||||
break;
|
||||
}
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
let needLogin = [
|
||||
"/pages/my/mySetting",
|
||||
"/pages/mobile_web/workshops/index",
|
||||
"/pages/mobile_web/my/child_pages/contact"
|
||||
"/pages/mobile_web/my/child_pages/contact",
|
||||
"/pages/mobile_web/my/child_pages/share",
|
||||
"/pages/mobile_web/my/child_pages/create",
|
||||
"/pages/mobile_web/my/child_pages/recharge",
|
||||
];
|
||||
// 多端通用路由
|
||||
let filterRoute = [
|
||||
|
||||
@ -78,6 +78,13 @@
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "my/child_pages/recharge",
|
||||
"style": {
|
||||
"navigationBarTitleText": "充值记录",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "my/child_pages/contact",
|
||||
"style": {
|
||||
|
||||
@ -77,8 +77,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下面这里等后端有了之后，用isFinish判断 -->
|
||||
<view class="last-tip">
|
||||
~~ 已加载全部 ~~
|
||||
<view class="last-tip" @click="getMore">
|
||||
{{ recommendForm.isFinish ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -103,6 +103,7 @@ export default {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 基础地址
|
||||
staticIp: configService.ip,
|
||||
fileUrl: configService.fileUrl + 'pixel/home/',
|
||||
aliUrl: configService.aliUrl.split("://")[1],
|
||||
@ -154,7 +155,14 @@ export default {
|
||||
// 轮播功能列表单组功能数
|
||||
group: 10,
|
||||
// 魔术棒
|
||||
magicWand: 'magic-wand.png'
|
||||
magicWand: 'magic-wand.png',
|
||||
// 推荐作品表单
|
||||
recommendForm: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
isFinish: true,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@ -162,6 +170,7 @@ export default {
|
||||
async init(){
|
||||
this.getBanner();
|
||||
this.getServices();
|
||||
this.recommendForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||||
this.getWorkList();
|
||||
},
|
||||
// 获取轮播图
|
||||
@ -175,6 +184,7 @@ export default {
|
||||
this.$refs.uToast.show({type:'error',title: "轮播图获取失败!"});
|
||||
}
|
||||
},
|
||||
// 图片格式化
|
||||
getWorkPath(path){
|
||||
return path.includes(this.aliUrl) ? path : encodeURI(this.staticIp+path);
|
||||
},
|
||||
@ -195,13 +205,29 @@ export default {
|
||||
},
|
||||
// 获取推荐作品列表
|
||||
async getWorkList(){
|
||||
let res = await this.$api.getCpPhotoById({labelId: 4});
|
||||
if(this.recommendForm.isFinish) return;
|
||||
let res = await this.$api.getRecommend(this.recommendForm);
|
||||
if(res?.success){
|
||||
this.workList = res.data;
|
||||
const { records, total, current, size } = res.data;
|
||||
const result = records;
|
||||
if(current === 1){
|
||||
this.workList = result
|
||||
}else{
|
||||
this.workList.push(...result);
|
||||
}
|
||||
this.recommendForm.total = total;
|
||||
this.recommendForm.isFinish = current*size >= total;
|
||||
this.$forceUpdate();
|
||||
}else{
|
||||
this.$refs.uToast.show({type:'error',title: "推荐作品获取失败!"});
|
||||
}
|
||||
},
|
||||
// 查看更多
|
||||
getMore(){
|
||||
if(this.recommendForm.isFinish) return;
|
||||
this.recommendForm.current++;
|
||||
this.getWorkList();
|
||||
},
|
||||
// 横向功能列表切换页
|
||||
categoryChange(event){
|
||||
this.currentPageindex = event.detail.current+1;
|
||||
|
||||
@ -59,6 +59,7 @@ export default {
|
||||
scrollTop: 0,
|
||||
// refs组件列表
|
||||
refs: ['home','work','my'],
|
||||
// 登录状态
|
||||
isLogin: this.$store.state.vuex_token,
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,8 +1,275 @@
|
||||
<!-- 充值记录 -->
|
||||
<template>
|
||||
<!-- #ifdef APP -->
|
||||
<view class="recharge-detail" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
|
||||
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
||||
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP -->
|
||||
<view class="recharge-detail" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
|
||||
<!-- #endif -->
|
||||
<view class="cdt-top">
|
||||
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
||||
:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
|
||||
<image :src="myFileUrl+logo"></image>
|
||||
<view style="width: 75rpx;"></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image :src="myFileUrl+logo"></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<u-section title="充值记录" :subTitle="`总数 ${total}`"
|
||||
color="#befda1" fontSize="34" :arrow="false" subColor="#cbe7fb" />
|
||||
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="rechargeList"
|
||||
scroll-with-animation @scroll="scroll">
|
||||
<u-collapse :itemStyle="{border: '4rpx solid rgba(56,45,79,1)',borderTopRightRadius: '10rpx',
|
||||
borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
|
||||
backgroundColor: 'rgba(56,45,79,0.6)', borderTopLeftRadius: '10rpx',
|
||||
borderTopRightRadius: '10rpx'}" :bodyStyle="{backgroundColor: 'rgba(56,45,79,1)',minHeight: '100rpx'}">
|
||||
<u-collapse-item v-for="(item, index) in rechargeList" :key="item.id">
|
||||
<template slot="title">
|
||||
<view class="recharge-item-title">
|
||||
<view class="cit-left">
|
||||
{{ index+1 }}. {{ item.type }}
|
||||
<text :class="item.addOrSub === 'sub' ? 'citl-red' : 'citl-green'">
|
||||
{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ item.value }}￥
|
||||
</text>
|
||||
</view>
|
||||
<view class="cit-right">
|
||||
{{ dateFormat(item.createtime) }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="recharge-item-content">{{item.description}}</view>
|
||||
</u-collapse-item>
|
||||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
|
||||
</u-collapse>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="goTop">
|
||||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
// 基础路径
|
||||
myFileUrl: configService.fileUrl + 'pixel/my/',
|
||||
// 我的页面背景
|
||||
background: 'background.png',
|
||||
// logo图标
|
||||
logo: 'logo.png',
|
||||
// 顶部距离等级
|
||||
topLevel: 0,
|
||||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||||
isFinish: 'nomore',
|
||||
form: {
|
||||
size: 10,
|
||||
current: 1
|
||||
},
|
||||
// 滚动顶部
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
// 充值记录
|
||||
rechargeList: [],
|
||||
// 总数
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
// #ifndef H5
|
||||
onPageScroll(e) {
|
||||
const level = e.scrollTop/60;
|
||||
if(level<=1) this.topLevel = level;
|
||||
else this.topLevel = 1;
|
||||
},
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
mounted(){
|
||||
let that = this;
|
||||
window.onscroll = function () {
|
||||
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
||||
//scrollTop就是触发滚轮事件时滚轮的高度
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const level = scrollTop/60;
|
||||
if(level<=1) that.topLevel = level;
|
||||
else that.topLevel = 1;
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
window.onscroll = null;
|
||||
},
|
||||
// #endif
|
||||
// 上拉刷新
|
||||
onPullDownRefresh(){
|
||||
try{
|
||||
this.init();
|
||||
}catch(e){}
|
||||
finally{
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
// 返回
|
||||
back(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 滚动回顶部
|
||||
goTop() {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(()=>{
|
||||
this.scrollTop = 0;
|
||||
});
|
||||
},
|
||||
// 滚动监听
|
||||
scroll(e){
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
},
|
||||
// 时间格式化
|
||||
dateFormat(time){
|
||||
let date = new Date(time);
|
||||
let month = date.getMonth()+1,
|
||||
day = date.getDate(),
|
||||
hour = date.getHours(),
|
||||
minute = date.getMinutes(),
|
||||
second = date.getSeconds();
|
||||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||||
},
|
||||
// 加载更多
|
||||
getMore(){
|
||||
if(this.isFinish === 'nomore') return;
|
||||
this.form.current++;
|
||||
this.getRechargeList();
|
||||
},
|
||||
// 获取充值记录列表
|
||||
async getRechargeList(){
|
||||
this.isFinish = 'loading';
|
||||
let res = await this.$api.getConsumption(this.form);
|
||||
if(res?.success){
|
||||
const { records, size, total, current } = res.data;
|
||||
if(current === 1) this.rechargeList = records;
|
||||
else this.rechargeList.push(...records);
|
||||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||||
this.total = total;
|
||||
}else{
|
||||
this.$refs.uToast.show({type:'error',title: "充值记录获取失败!"});
|
||||
this.isFinish = 'loadmore';
|
||||
}
|
||||
},
|
||||
// 初始化
|
||||
init(){
|
||||
this.form = {size: 10,current: 1};
|
||||
let { createtime } = JSON.parse(this.$store.state.user_message);
|
||||
this.rechargeList = [{
|
||||
type: '充值钻石',
|
||||
addOrSub: 'add',
|
||||
value: '1000',
|
||||
createtime: createtime,
|
||||
description: '新用户注册，赠送1000钻石。'
|
||||
}];
|
||||
this.total = 1;
|
||||
// this.getRechargeList();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped lang="scss">
|
||||
.recharge-detail{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-size: cover;
|
||||
// #ifdef APP
|
||||
.app-top{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 81;
|
||||
top: 0;
|
||||
}
|
||||
// #endif
|
||||
.cdt-top{
|
||||
// #ifdef APP
|
||||
.app-top{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 81;
|
||||
top: 0;
|
||||
}
|
||||
// #endif
|
||||
.mobile-logo{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// #ifndef MP-WEIXIN
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.back{
|
||||
margin-left: 35rpx;
|
||||
margin-top: 5rpx
|
||||
}
|
||||
// #endif
|
||||
position: fixed;
|
||||
z-index: 81;
|
||||
padding: 15rpx 0;
|
||||
image{
|
||||
width: 200rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
// .u-icon{
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
.detail-content{
|
||||
margin: 120rpx 20rpx 32rpx;
|
||||
padding: 40rpx 25rpx 20rpx;
|
||||
background-color: rgba(160, 160, 160, 0.1);
|
||||
border-radius: 16rpx;
|
||||
.rechargeList{
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recharge-item-title{
|
||||
width: 100%;
|
||||
margin: 0 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.cit-left{
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.citl-green{
|
||||
color: #49cc90;
|
||||
}
|
||||
.citl-red{
|
||||
color: #f93e3e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recharge-item-content{
|
||||
margin: 10rpx 30rpx;
|
||||
color: #e7eefe;
|
||||
}
|
||||
</style>
|
||||
@ -144,7 +144,7 @@ export default {
|
||||
{
|
||||
icon: 'recharge.png',
|
||||
name: '充值记录',
|
||||
path: '',
|
||||
path: '/pages/mobile_web/my/child_pages/recharge',
|
||||
},
|
||||
{
|
||||
icon: 'customer.png',
|
||||
@ -201,7 +201,7 @@ export default {
|
||||
this.myCurrency();
|
||||
}else{
|
||||
this.userMessage = {};
|
||||
this.timeList[0].time = 0;
|
||||
this.diamondForm.time = 0;
|
||||
}
|
||||
},
|
||||
// 获取我的余额
|
||||
|
||||
@ -67,9 +67,16 @@
|
||||
</template>
|
||||
</EditorBox>
|
||||
</view>
|
||||
<view class="workshops-tip" @click="showTutorial" v-if="(form.type !== 4 || (form.type === 4 && resultFile)) && (form.type !== 1 || (form.type === 1 && resultFile))">
|
||||
<u-icon name="question-circle" size="35" color="#d5ff00" />
|
||||
Tips：{{resultFile ? '点击预览图片效果~' : form.tips||'智能创作~'}}
|
||||
<view class="workshops-tip" v-show="(form.type !== 4 || (form.type === 4 && resultFile)) && (form.type !== 1 || (form.type === 1 && resultFile))">
|
||||
<view @click="showTutorial" class="tip-content" v-show="this.asyncPollTime === -1">
|
||||
<u-icon name="question-circle" size="35" color="#d5ff00" />
|
||||
Tips：{{resultFile ? '点击预览图片效果~' : form.tips||'智能创作~'}}
|
||||
</view>
|
||||
<view class="tip-progress" v-show="form.id > 3 && this.asyncPollTime !== -1">
|
||||
<text class="progress-title">进度</text>
|
||||
<u-line-progress :percent="dealPercent" :show-percent="false" inactive-color="#2d3240" round/>
|
||||
<text class="progress-deal">{{ dealPercent }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文生图 -->
|
||||
@ -121,8 +128,8 @@
|
||||
<u-icon name="download" size="32"></u-icon>保存作品
|
||||
</u-button>
|
||||
<view class="wbu-dbtn wbu-odbtn">
|
||||
<u-button class="wbud-btn" :loading="functionLoading" ripple :hairLine="false"
|
||||
shape="circle" rippleBgColor="#f0fdbf" @click="resultFunction['reUpload'].fun" :class="transition?'transition':''">
|
||||
<u-button class="wbud-btn" ripple :hairLine="false" shape="circle"
|
||||
rippleBgColor="#f0fdbf" @click="resultFunction['reUpload'].fun" :class="transition?'transition':''">
|
||||
<u-icon name="edit-pen" color="#8fb4e6" size="32"></u-icon>
|
||||
<text>重新绘制</text>
|
||||
</u-button>
|
||||
@ -171,7 +178,6 @@ import configService from '@/common/config.service.js';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
import EditorBox from './components/editor.vue';
|
||||
import DressSelect from './components/dress_select.vue';
|
||||
import { toList } from './common/functionalClassification';
|
||||
import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
|
||||
export default {
|
||||
components: {
|
||||
@ -263,6 +269,10 @@ export default {
|
||||
asyncResult: false,
|
||||
// 加载中随机图片
|
||||
rangeImageList: [],
|
||||
// 进度条
|
||||
dealPercent: 0,
|
||||
// 进度条计时器
|
||||
dealPercentTimer: 1
|
||||
}
|
||||
},
|
||||
// #ifndef H5
|
||||
@ -332,7 +342,7 @@ export default {
|
||||
// 图片格式化
|
||||
getTypeImage(path){
|
||||
if(path === null || path === ''){
|
||||
return '/static/coat.png';
|
||||
return '/static/default-select.png';
|
||||
}else if(path.startsWith("http")){
|
||||
return path;
|
||||
}else if(path.startsWith("/")){
|
||||
@ -448,7 +458,9 @@ export default {
|
||||
// 开启轮询查询结果图片
|
||||
delayLoadImage(id){
|
||||
if(this.form.id > 3&&id){
|
||||
this.dealPercent = 0;
|
||||
this.asyncPollTime = 0;
|
||||
this.startDealPercent();
|
||||
this.asyncPoll(id);
|
||||
}
|
||||
},
|
||||
@ -468,8 +480,9 @@ export default {
|
||||
try {
|
||||
let res = await this.$api.singlePhotoById(id);
|
||||
if(res?.success && res.data !== null && res.data?.creationState !== "create"){
|
||||
this.dealPercent = 100;
|
||||
this.resultFile = res.data?.path;
|
||||
this.asyncPollTime = -1;
|
||||
setTimeout(()=>{this.asyncPollTime = -1;},100);
|
||||
// 结果判断
|
||||
this.asyncResult = res.data?.creationState === 't' ? true : false;
|
||||
this.$refs.uToast.show({type:'success',title: `${this.form.name}成功`});
|
||||
@ -482,6 +495,23 @@ export default {
|
||||
}
|
||||
setTimeout(() => this.asyncPoll(id), 5000);
|
||||
},
|
||||
// 设置进度条——最多15秒
|
||||
startDealPercent(){
|
||||
let that = this;
|
||||
let timerx = 1;
|
||||
let timer = function(){
|
||||
let random = Math.floor(Math.random()*3.5);
|
||||
let num = timerx === 75 ? 99 : that.dealPercent + random;
|
||||
if(num<99){
|
||||
that.dealPercent = num;
|
||||
timerx++;
|
||||
}else{
|
||||
that.dealPercent = 99;
|
||||
clearInterval(that.dealPercentTimer);
|
||||
}
|
||||
}
|
||||
this.dealPercentTimer = setInterval(timer,200);
|
||||
},
|
||||
// 表单合法判断
|
||||
legalJudge(){
|
||||
const currentType = this.form.type;
|
||||
@ -693,6 +723,7 @@ export default {
|
||||
this.$refs.dressRef.resetForm();
|
||||
};
|
||||
this.asyncPollTime = -1;
|
||||
setTimeout(()=>{this.dealPercent = 100;});
|
||||
},
|
||||
// 使用教程
|
||||
showTutorial(){
|
||||
@ -720,8 +751,6 @@ export default {
|
||||
// this.form.options[index];
|
||||
|
||||
},
|
||||
// 导入的方法
|
||||
toList,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -923,14 +952,43 @@ export default {
|
||||
}
|
||||
}
|
||||
.workshops-tip{
|
||||
margin-top: 70rpx;
|
||||
margin-top: 50rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #c2fc3b;
|
||||
.u-icon{
|
||||
margin-right: 15rpx;
|
||||
.tip-content{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.u-icon{
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.tip-progress{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 200rpx);
|
||||
.progress-title{
|
||||
margin-right: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.progress-deal{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
text{
|
||||
background-image: linear-gradient(to right, #d3e7e7 0%, #a7b6b8 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
::v-deep .u-active{
|
||||
border-top-right-radius: 100rpx;
|
||||
border-bottom-right-radius: 100rpx;
|
||||
box-shadow: 0 0 20rpx #d3e7e7;
|
||||
background: linear-gradient(to right, #96a3a5 0%, #d3e7e7 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
16
pages/pc_web/home/components/second.vue
Normal file
16
pages/pc_web/home/components/second.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<view class="home-second">
|
||||
123
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-second{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to left bottom, #ffffff, #fcfbfc, #f8f8f9, #f5f4f7, #f1f1f4, #eef0f6, #eaeff7, #e5eff8, #ddf3f9, #d9f6f2, #def7e6, #eef6d9);
|
||||
}
|
||||
</style>
|
||||
296
pages/pc_web/home/home.vue
Normal file
296
pages/pc_web/home/home.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<view class="pc-home">
|
||||
<view class="main-content" :style="{backgroundImage: `url(${staticIp+backgroundImage})`}">
|
||||
<view class="mc-left">
|
||||
<view class="mcl-out">
|
||||
<view class="mcl-top">
|
||||
自由的Ai图像重绘服务
|
||||
<br />
|
||||
图像识别与替换
|
||||
</view>
|
||||
<view class="mcl-bottom">
|
||||
自由绘制 | 自动识别 | 无限扩展
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mc-right">
|
||||
<view class="mcr-card">
|
||||
<el-upload class="mcr-upload" drag action="#" :auto-upload="false" ref="uploadCover"
|
||||
:multiple="false" accept="image/*" list-type="picture" :on-change="uploadFile">
|
||||
<image src="/static/upload-image.png"></image>
|
||||
</el-upload>
|
||||
<view class="mcr-tip">点击或拖拽图片到这里</view>
|
||||
<view class="mcr-show">
|
||||
<view class="mcrs-item" v-for="(item,index) in getForeWorkList" :key="index"
|
||||
:title="item.serviceName||'暂无'">
|
||||
<image class="work-module" :src="getImagePath(item.path)"></image>
|
||||
<view class="work-todo">
|
||||
<image :src="fileUrl+magicWand"></image>
|
||||
<text>做同款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<Second />
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Second from './components/second.vue';
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
components:{
|
||||
Second
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 基础路径
|
||||
staticIp: configService.ip,
|
||||
fileUrl: configService.fileUrl + 'pixel/home/',
|
||||
// 背景图片
|
||||
backgroundImage: 'static/pixel/pc/home/background.png',
|
||||
// 推荐作品列表
|
||||
workList: [],
|
||||
// 默认推荐作品
|
||||
defaultWorkList: [
|
||||
{path: "http://guojunjie.oss-cn-hangzhou.aliyuncs.com/20241227/173529161311570.jpg?Expires=1737119003&OSSAccessKeyId=LTAI5tFAiAq9SjM9vaucMuYD&Signature=rbGd4zWKvzlRDgl5fLzETD0epgg%3D"},
|
||||
{path: "https://guojunjie.oss-cn-hangzhou.aliyuncs.com/upload/sample/1734970091260.jpg"},
|
||||
{path: "https://guojunjie.oss-cn-hangzhou.aliyuncs.com/upload/sample/1734970072585.jpg"},
|
||||
{path: "http://guojunjie.oss-cn-hangzhou.aliyuncs.com/20241227/1735277872644388.jpg?Expires=1737105263&OSSAccessKeyId=LTAI5tFAiAq9SjM9vaucMuYD&Signature=w7koLjcj2ePK5dGkxgMgn4pxkOw%3D"},
|
||||
],
|
||||
// 魔术棒
|
||||
magicWand: 'magic-wand.png',
|
||||
// 推荐作品表单
|
||||
recommendForm: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
isFinish: true,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getForeWorkList(){
|
||||
let iIndex = 0;
|
||||
while(this.workList.length <= 3){
|
||||
this.workList.push(this.defaultWorkList[iIndex]);
|
||||
iIndex++;
|
||||
}
|
||||
return this.workList.slice(0,4);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 初始化
|
||||
init(){
|
||||
this.recommendForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||||
this.getWorkList();
|
||||
},
|
||||
// 图片地址格式化
|
||||
getImagePath(path){
|
||||
if(path){
|
||||
return path.includes("://") ? path : encodeURI(this.staticIp+path);
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
// 获取推荐作品列表
|
||||
async getWorkList(){
|
||||
if(this.recommendForm.isFinish) return;
|
||||
let res = await this.$api.getRecommend(this.recommendForm);
|
||||
if(res?.success){
|
||||
const { records, total, current, size } = res.data;
|
||||
const result = records;
|
||||
if(current === 1){
|
||||
this.workList = result;
|
||||
}else{
|
||||
this.workList.push(...result);
|
||||
}
|
||||
this.recommendForm.total = total;
|
||||
this.recommendForm.isFinish = current*size >= total;
|
||||
this.$forceUpdate();
|
||||
}else{
|
||||
this.workList = this.defaultWorkList;
|
||||
this.$refs.uToast.show({type:'error',title: "推荐作品获取失败!"});
|
||||
}
|
||||
},
|
||||
// 首页上传文件
|
||||
uploadFile(file, fileList){
|
||||
this.$refs.uploadCover.clearFiles();
|
||||
const size = file.size / 1024; // 计算文件大小
|
||||
if(size<5 || (size/1024)>5){
|
||||
this.$refs.uToast.show({type: 'warning',title: "请上传大小为5KB~5MB的图片!"});
|
||||
return;
|
||||
}
|
||||
let isAccept = new RegExp('image/*').test(file.raw.type)
|
||||
if (!isAccept) {
|
||||
this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
|
||||
return;
|
||||
}
|
||||
// this.form.coverPath = file;
|
||||
// this.fileList[0] = file;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pc-home{
|
||||
.main-content {
|
||||
width: 100%;
|
||||
min-height: 73.5em;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
aspect-ratio: 16/9 !important;
|
||||
|
||||
.mc-left {
|
||||
margin-top: 15%;
|
||||
flex: 1;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
|
||||
.mcl-out {
|
||||
margin-left: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// width: 740rpx;
|
||||
.mcl-top {
|
||||
color: #12121f;
|
||||
font-weight: 500;
|
||||
font-size: 100rpx;
|
||||
line-height: 150rpx;
|
||||
}
|
||||
|
||||
.mcl-bottom {
|
||||
margin-top: 48rpx;
|
||||
color: #959ba6;
|
||||
font-size: 38rpx;
|
||||
font-family: fangsong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mc-right {
|
||||
margin-top: 13%;
|
||||
flex: 1;
|
||||
|
||||
.mcr-card {
|
||||
overflow: hidden;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 5%;
|
||||
min-height: 1100rpx;
|
||||
width: 1400rpx;
|
||||
background-color: #fff;
|
||||
aspect-ratio: 23/18;
|
||||
box-shadow: 0 5rpx 10rpx 0 #dcdae4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
box-shadow: 0 0 25rpx #eee;
|
||||
}
|
||||
.mcr-upload{
|
||||
margin-top: 120rpx;
|
||||
::v-deep .el-upload-dragger{
|
||||
width: 450rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f5f6f9;
|
||||
border-radius: 30rpx;
|
||||
&:hover{
|
||||
border-color: #959ba6;
|
||||
image{
|
||||
width: 160rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
}
|
||||
&:active{
|
||||
border-color: #959ba6;
|
||||
}
|
||||
}
|
||||
image{
|
||||
transition: 0.5s;
|
||||
width: 140rpx;
|
||||
height: 112rpx;
|
||||
}
|
||||
}
|
||||
.mcr-tip{
|
||||
font-size: 58rpx;
|
||||
margin: 50rpx;
|
||||
}
|
||||
.mcr-show{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.mcrs-item{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 10rpx 40rpx;
|
||||
border-radius: 12rpx;
|
||||
.work-module{
|
||||
width: 240rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 0 10rpx #959ba6;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.work-todo{
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
padding-left: 34rpx;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 8rpx 8rpx 12rpx 12rpx;
|
||||
bottom: -80rpx;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 35rpx;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
text{
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to right, #cdfbf2 0%, #a3d4ff 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
image{
|
||||
margin-right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.work-todo{
|
||||
bottom: 6rpx;
|
||||
}
|
||||
.work-module{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -8,35 +8,62 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-right" v-if="isLogin">
|
||||
<view class="header-function">
|
||||
我的作品
|
||||
<view class="header-function" @click="showMobileDownloadDialog = true">
|
||||
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
||||
<text class="web-download">移动端下载</text>
|
||||
</view>
|
||||
<view class="header-function">
|
||||
我的藏品
|
||||
<u-icon name="/static/pc-code.png" size="34" class="hfu-icon" />
|
||||
<text class="web-diamond">{{ diamond }} 充值</text>
|
||||
</view>
|
||||
<el-dropdown class="header-avatar">
|
||||
<u-icon name="/static/header.png" size="41" label="123"></u-icon>
|
||||
<!-- <el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu> -->
|
||||
<el-dropdown class="header-avatar" @command="toShow">
|
||||
<view class="ha-icon">
|
||||
<image :src="fileUrl+getAvatar"></image>
|
||||
<text>{{ getTopTip }}</text>
|
||||
</view>
|
||||
<el-dropdown-menu :append-to-body="false" slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in dropList" :key="index"
|
||||
class="dropdown-item" :command="item.path">{{ item.name }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="loginout" class="dropdown-loginout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</view>
|
||||
<view class="header-right" v-else>
|
||||
<view class="header-login">
|
||||
<view class="header-function" @click="showMobileDownloadDialog = true">
|
||||
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
||||
<text class="web-download">移动端下载</text>
|
||||
</view>
|
||||
<view class="header-login" @click="showLogin = true">
|
||||
<text>登录/注册</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
|
||||
@login="login"/>
|
||||
<MobileDownloadDialog @toast="showToast" :showDialog="showMobileDownloadDialog" @close="showMobileDownloadDialog = false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginDialog from './loginDialog.vue';
|
||||
import MobileDownloadDialog from './mobileDownloadDialog.vue';
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
props: {
|
||||
isLogin: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LoginDialog,
|
||||
MobileDownloadDialog
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 基础路径
|
||||
fileUrl: configService.fileUrl + 'pixel/my/',
|
||||
// 左侧操作按钮列表
|
||||
functionList:[
|
||||
{
|
||||
@ -49,12 +76,105 @@ export default {
|
||||
},
|
||||
],
|
||||
routePath: this.$route.path,// 当前路由
|
||||
isLogin: this.$store.state.vuex_token,// 是否登录
|
||||
// 头像
|
||||
avatar: 'avatar.png',
|
||||
// 默认登录头像
|
||||
defaultLoginAvatar: 'login-avatar.png',
|
||||
// 用户信息
|
||||
userMessage:{},
|
||||
// 钻石余额
|
||||
diamond: 0,
|
||||
// 登录/注册弹窗显示
|
||||
showLogin: false,
|
||||
// 移动端下载弹窗显示
|
||||
showMobileDownloadDialog: false,
|
||||
// 下拉栏列表
|
||||
dropList: [
|
||||
{
|
||||
name: '我的作品',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
name: '我的藏品',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
name: '生成记录',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
name: '发布记录',
|
||||
path: ''
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// 获取登录头像
|
||||
getAvatar(){
|
||||
return this.isLogin ? this.defaultLoginAvatar : this.avatar;
|
||||
},
|
||||
// 获取头像旁tip
|
||||
getTopTip(){
|
||||
return this.userMessage?.realname||('用户'+this.userMessage?.username);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
// 判断当前显示项
|
||||
judgeSelect(path){
|
||||
return this.routePath == path;
|
||||
},
|
||||
// 初始化
|
||||
init(){
|
||||
if(this.isLogin !== ''){
|
||||
this.userMessage = JSON.parse(this.$store.state.user_message);
|
||||
this.myCurrency();
|
||||
}else{
|
||||
this.userMessage = {};
|
||||
}
|
||||
},
|
||||
// 跳转
|
||||
toShow(path = ''){
|
||||
if(path === 'loginout'){
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: '注销',
|
||||
content: '是否确认退出登录？',
|
||||
confirmColor: '#94d500',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.$u.vuex('vuex_token', '');
|
||||
that.$u.vuex('user_message', {});
|
||||
that.userMessage = {};
|
||||
that.diamond = 0;
|
||||
that.$api.logOut();
|
||||
that.$refs.uToast.show({type:'success',title: "退出登录成功!"});
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if(path) uni.navigateTo({url: path});
|
||||
},
|
||||
// 登录
|
||||
login(userMessage){
|
||||
this.userMessage = userMessage;
|
||||
this.myCurrency();
|
||||
},
|
||||
// 获取我的余额
|
||||
async myCurrency(){
|
||||
let res = await this.$api.getCurrency();
|
||||
if(res?.success){
|
||||
// this.timeList[0].time = res.data.numerical;
|
||||
this.diamond = res.data.numerical;
|
||||
} else {
|
||||
this.$refs.uToast.show({type:'error',title: "余额数据拉取失败！"});
|
||||
}
|
||||
},
|
||||
// 提示语弹窗
|
||||
showToast({type,title}){
|
||||
this.$refs.uToast.show({type: type, title: title});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -74,19 +194,22 @@ export default {
|
||||
align-items: center;
|
||||
margin-left: 40rpx;
|
||||
.header-logo{
|
||||
width: 240rpx;
|
||||
height: 50rpx;
|
||||
width: 260rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.header-function{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #959ba6;
|
||||
font-size: 30rpx;
|
||||
font-size: 32rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 100rpx;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: #b1b1b1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.function-select{
|
||||
@ -99,32 +222,69 @@ export default {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-right: 40rpx;
|
||||
.web-download{
|
||||
background-image: linear-gradient(to right, #a3d4ff 0%, #bee7df 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.web-diamond{
|
||||
background-image: linear-gradient(to right, #a5fe2f 0%, #c9fe76 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.header-function{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #959ba6;
|
||||
font-size: 30rpx;
|
||||
font-size: 32rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 100rpx;
|
||||
cursor: pointer;
|
||||
.hfu-icon{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
&:hover{
|
||||
color: #b1b1b1;
|
||||
opacity: 0.7
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.header-avatar{
|
||||
margin-left: 100rpx;
|
||||
width: 150rpx;
|
||||
min-width: 200rpx;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #959ba6;
|
||||
font-size: 30rpx;
|
||||
height: 50rpx;
|
||||
&:hover{
|
||||
filter: opacity(0.8);
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
position: relative;
|
||||
.ha-icon{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
text{
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #959ba6;
|
||||
|
||||
}
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-login{
|
||||
margin-left: 100rpx;
|
||||
background-color: #d3fd24;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
@ -135,11 +295,29 @@ export default {
|
||||
filter: opacity(0.8);
|
||||
}
|
||||
text{
|
||||
font-size: 26rpx;
|
||||
font-size: 28rpx;
|
||||
color: #12131e;
|
||||
margin: 20rpx 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-item{
|
||||
&:hover{
|
||||
color: #67C23A !important;
|
||||
background-color: rgb(224.6, 242.8, 215.6) !important;
|
||||
}
|
||||
}
|
||||
.dropdown-loginout{
|
||||
&:hover{
|
||||
color: #F56C6C !important;
|
||||
background-color: rgb(253, 225.6, 225.6) !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dropdown-menu {
|
||||
position: absolute !important;
|
||||
top: 40rpx !important;
|
||||
left: 80rpx !important;
|
||||
}
|
||||
</style>
|
||||
350
pages/pc_web/index/components/loginDialog.vue
Normal file
350
pages/pc_web/index/components/loginDialog.vue
Normal file
@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<u-popup :value="showLogin" mode="center" border-radius="14" @close="$emit('close')">
|
||||
<view class="login-dialog">
|
||||
<view class="login-dialog-left" :style="{backgroundImage: `url(${fileUrl+loginBackground})`}">
|
||||
<image src="/static/logo.png" class="ldl-logo"></image>
|
||||
<view class="ldl-system-name">智能图像创作平台</view>
|
||||
<view class="ldl-team">研发团队</view>
|
||||
<view class="ldl-message">与其说做功能强大的PIXEL.AI，其实我们更注重用户的使用体验。灵活、富有趣味性的产品是我们在PIXEL.AI的追求，认真做产品，有耐心，不含糊，我们相信PIXEL.AI一定会做的很好。</view>
|
||||
<view class="ldl-bottom">
|
||||
<text>PIXEL.AI 移动端</text>正式上线啦！
|
||||
<u-icon name="arrow-right" size="24" @click="openCode"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="login-dialog-right">
|
||||
<u-icon class="ldr-close" name="close" size="32" @click="$emit('close')"></u-icon>
|
||||
<view class="ldr-top">
|
||||
<el-tabs class="ldr-tabs" v-model="current" @tab-click="change">
|
||||
<el-tab-pane v-for="(item,index) in list" :key="index" :label="item.name"
|
||||
:name="item.name"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</view>
|
||||
<view class="ldr-post">
|
||||
<el-form ref="loginForm" size="medium" :model="loginForm" :rules="getCurrent ? registerRules : loginRules">
|
||||
<el-form-item prop="username" label="手机号: ">
|
||||
<el-input v-model.trim="loginForm.username" type="tel"
|
||||
placeholder="请输入手机号" auto-complete="off" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码: ">
|
||||
<el-input v-model.trim="loginForm.password" type="password"
|
||||
placeholder="请输入密码" auto-complete="off" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="getCurrent" prop="confirmPassword" label="确认密码: ">
|
||||
<el-input v-model.trim="loginForm.confirmPassword" type="password"
|
||||
placeholder="请输入确认密码" auto-complete="off" ></el-input>
|
||||
</el-form-item>
|
||||
<u-button class="ldr-btn" @click="submit" ripple :hairLine="false"
|
||||
shape="circle" rippleBgColor="#dcf1fc" :loading='dotLoading'>
|
||||
{{ getCurrent ? '注册' : '登录' }}
|
||||
</u-button>
|
||||
</el-form>
|
||||
<view class="ldr-agreement">
|
||||
<u-checkbox class="ldr-checkbox" active-color="#8fca80" v-model="isAgreed"></u-checkbox>
|
||||
我已阅读并同意<text>用户服务协议</text>、<text>隐私权政策</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
props: {
|
||||
showLogin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 基础路径
|
||||
fileUrl: configService.fileUrl + 'pixel/pc/home/',
|
||||
// tabs标签栏
|
||||
list: [
|
||||
{name: '用户登录'},
|
||||
{name: '手机注册'}
|
||||
],
|
||||
// 当前tabs下标
|
||||
current: '用户登录',
|
||||
// 登录表单
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
// 登录验证规则
|
||||
loginRules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if(!this.$u.test.mobile(value)){
|
||||
callback(new Error('手机号格式不正确'));
|
||||
}else{
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 注册验证规则
|
||||
registerRules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if(!this.$u.test.mobile(value)){
|
||||
callback(new Error('手机号格式不正确'));
|
||||
}else{
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
confirmPassword: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入确认密码',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if(this.loginForm.password !== '' && this.loginForm.password === value){
|
||||
callback();
|
||||
}else{
|
||||
callback(new Error('两次密码输入不同'));
|
||||
}
|
||||
},
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
},
|
||||
// 加载
|
||||
dotLoading: false,
|
||||
// 是否同意协议、政策
|
||||
isAgreed: false,
|
||||
// 弹窗背景图-左
|
||||
loginBackground: 'login-background.png',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCurrent(){
|
||||
return this.current === '手机注册'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开移动端下载弹窗
|
||||
openCode(){
|
||||
this.$emit('close');
|
||||
this.$emit('openCode');
|
||||
},
|
||||
// 切换方式
|
||||
change(tab, event) {
|
||||
this.$refs.loginForm.resetFields();
|
||||
},
|
||||
// 提交
|
||||
submit(){
|
||||
if(!this.isAgreed){
|
||||
this.$emit('toast',{type: 'warning', title: "请阅读并勾选同意协议!"});
|
||||
return;
|
||||
}
|
||||
try{
|
||||
let that = this;
|
||||
let current = this.current === '手机注册';
|
||||
this.dotLoading = true;
|
||||
this.$refs.loginForm.validate(async(valid) => {
|
||||
if (valid) {
|
||||
// 判断注册或登录的表单值，进行调整匹配
|
||||
if(!current) delete that.loginForm.confirmPassword;
|
||||
let res = await that.$api[current?'register':'login'](that.loginForm);
|
||||
if(res.success){
|
||||
if(!current){
|
||||
// 存储登录记录
|
||||
uni.setStorageSync('loginMemory',JSON.stringify({
|
||||
username: that.loginForm.username,
|
||||
password: that.loginForm.password,
|
||||
timer: new Date()
|
||||
}));
|
||||
that.$u.vuex('vuex_token', res.data.token);
|
||||
that.$u.vuex('user_message', JSON.stringify(res.data.user));
|
||||
uni.showToast({icon: 'none', title: '登录成功！'});
|
||||
that.$emit('login', res.data.user);
|
||||
that.$emit('close');
|
||||
}else{
|
||||
that.$emit('toast',{type: 'success', title: "注册成功，请登录"});
|
||||
that.current = '用户登录';
|
||||
}
|
||||
that.$refs.loginForm.resetFields();
|
||||
}else{
|
||||
that.$emit('toast',{type: 'error', title: current?`${res.data}!`:"手机号或密码错误!"});
|
||||
}
|
||||
}else{
|
||||
that.$emit('toast',{type: 'error', title: "请完善信息！"});
|
||||
}
|
||||
});
|
||||
}catch(e){}
|
||||
finally{
|
||||
this.dotLoading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loading = false;
|
||||
// 判断上次登录记录
|
||||
let loginMemory = uni.getStorageSync('loginMemory');
|
||||
if(loginMemory) {
|
||||
const {username, password, timer} = JSON.parse(loginMemory);
|
||||
// 距离上次存储间隔5天，则删除缓存
|
||||
if(Math.floor((Date.parse(new Date()) - Date.parse(new Date(timer)))/(24*3600*1000)) >5){
|
||||
uni.removeStorageSync('loginMemory');
|
||||
}else{
|
||||
this.loginForm = {
|
||||
username: username,
|
||||
password: password
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-dialog{
|
||||
width: 2000rpx;
|
||||
height: 1140rpx;
|
||||
display: flex;
|
||||
.login-dialog-left{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 160rpx 160rpx 100rpx;
|
||||
background-size: cover;
|
||||
.ldl-logo{
|
||||
width: 360rpx;
|
||||
height: 76rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.ldl-system-name{
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin-bottom: 90rpx;
|
||||
}
|
||||
.ldl-team{
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #9eb3a1;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.ldl-message{
|
||||
height: 420rpx;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 50rpx;
|
||||
border-bottom: 2rpx solid #9eb3a1;
|
||||
}
|
||||
.ldl-bottom{
|
||||
margin-top: 70rpx;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.u-icon{
|
||||
margin-left: 10rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
text{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-dialog-right{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 120rpx;
|
||||
.ldr-close{
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
top: 40rpx;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: #b4f08e;
|
||||
}
|
||||
}
|
||||
.ldr-top{
|
||||
width: 100%;
|
||||
margin-bottom: 35rpx;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
.ldr-tabs{
|
||||
::v-deep .el-tabs__nav-wrap::after{
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-tabs__item{
|
||||
font-size: 46rpx;
|
||||
&.is-active{
|
||||
color: #a6ec96;
|
||||
}
|
||||
&:hover{
|
||||
color: #a6ec96;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
::v-deep .el-tabs__active-bar{
|
||||
height: 6rpx;
|
||||
background-color: #a6ec96;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ldr-btn{
|
||||
height: 90rpx;
|
||||
margin-top: 80rpx;
|
||||
background-image: linear-gradient(to right, #81cd7d 0%, #b0f090 51%, #81cd7d 100%);
|
||||
box-shadow: 0 0 20rpx #eee;
|
||||
background-size: 200% auto;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
.ldr-agreement{
|
||||
margin-top: 60rpx;
|
||||
margin-bottom: 30rpx;
|
||||
color: #ded3c9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
text{
|
||||
cursor: pointer;
|
||||
color: #8fca80;
|
||||
}
|
||||
.ldr-checkbox{
|
||||
margin-right: -10rpx;
|
||||
::v-deep .u-checkbox__icon-wrap--square{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
pages/pc_web/index/components/mobileDownloadDialog.vue
Normal file
139
pages/pc_web/index/components/mobileDownloadDialog.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<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>
|
||||
@ -2,42 +2,48 @@
|
||||
<view>
|
||||
<el-container class="pc-container">
|
||||
<view class="pc-header">
|
||||
<Header />
|
||||
<Header :isLogin="isLogin" />
|
||||
</view>
|
||||
<view style="width: 100%;height: 100rpx;"></view>
|
||||
<view class="pc-main">
|
||||
<view class="main-content" :style="{height: WindowHeight-50 + 'px'}">
|
||||
<view class="mc-left">
|
||||
<view class="mcl-out">
|
||||
<view class="mcl-top">
|
||||
自由的Ai图像重绘服务图像识别与替换
|
||||
</view>
|
||||
<view class="mcl-bottom">
|
||||
自由绘制 | 自动识别 | 无线扩展
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mc-right">
|
||||
<view class="mcr-card">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<component ref="pageRef" :is="refs[current]" />
|
||||
</view>
|
||||
</el-container>
|
||||
<Loading :show="loading" />
|
||||
<u-back-top class="back-top" :scrollTop="scrollTop" zIndex="100" :iconStyle="{ color: '#fff', fontSize: '50rpx' }"
|
||||
:customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',
|
||||
filter: 'opacity(0.96)', width: '120rpx', height: '120rpx'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './components/header.vue';
|
||||
import Home from '@/pages/pc_web/home/home.vue';
|
||||
export default {
|
||||
components:{
|
||||
Header
|
||||
Header, Home
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 当前页码下标
|
||||
current: uni.getStorageSync('pc_current')||0,
|
||||
// refs组件列表
|
||||
refs: ['home'],
|
||||
// 加载
|
||||
loading: false,
|
||||
// 滚动顶部
|
||||
scrollTop: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 登录状态
|
||||
isLogin(){
|
||||
return this.$store.state.vuex_token;
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
}
|
||||
@ -50,58 +56,18 @@ export default {
|
||||
}
|
||||
.pc-header{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
height: 120rpx;
|
||||
z-index: 90;
|
||||
box-shadow: 0 5rpx 10rpx 0 #dcdae4;
|
||||
position: fixed;
|
||||
}
|
||||
.pc-main{
|
||||
background-color: #edecf1;
|
||||
.main-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('http://8.138.171.103/static/homeBackground.png');
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
.mc-left{
|
||||
margin-top: 11%;
|
||||
flex: 1;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
.mcl-out{
|
||||
margin-left: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 650rpx;
|
||||
.mcl-top{
|
||||
color: #12121f;
|
||||
font-weight: 500;
|
||||
font-size: 65rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
.mcl-bottom{
|
||||
margin-top: 30rpx;
|
||||
color: #959ba6;
|
||||
font-size: 30rpx;
|
||||
font-family: fangsong;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mc-right{
|
||||
margin-top: 10%;
|
||||
flex: 1;
|
||||
height: 45%;
|
||||
.mcr-card{
|
||||
border-radius: 30rpx;
|
||||
margin-left: 5%;
|
||||
// height: 100%;
|
||||
height: 26em;
|
||||
width: 33em;
|
||||
background-color: #fff;
|
||||
// aspect-ratio: 22/17;
|
||||
box-shadow: 0 5rpx 10rpx 0 #dcdae4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.back-top{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #d8fc92;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/default-select.png
Normal file
BIN
static/default-select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
static/pc-code.png
Normal file
BIN
static/pc-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/upload-image.png
Normal file
BIN
static/upload-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Loading…
Reference in New Issue
Block a user