1696 lines
46 KiB
Vue
1696 lines
46 KiB
Vue
<template>
|
|
<div class="homeMain_max">
|
|
<div class="leftBox" :class="{leftHide:leftShow}">
|
|
<div class="left">
|
|
<div class="title">
|
|
<span>AiDA</span>
|
|
<svg @click="()=>leftShow=!leftShow" class="leftShowOrHide" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 24 24" data-v-1c7326d6=""><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd" data-v-1c7326d6=""></path></svg>
|
|
</div>
|
|
<div class="newObj marginT2" @click="newProject">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.5 5v14m-7-7h14"></path></svg>
|
|
<p>New Project</p>
|
|
</div>
|
|
<div class="navList marginT2">
|
|
<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value}">
|
|
|
|
<div class="titleBox" @click="setOpenType(item.value,item.list)">
|
|
<div class="left">
|
|
<i :class="['fi',item.icon]"></i>
|
|
<span>{{item.label}}</span>
|
|
</div>
|
|
<div class="right">
|
|
<i class="fi fi-br-angle-small-down"></i>
|
|
</div>
|
|
</div>
|
|
<div class="detailBox" v-show="openType">
|
|
<div class="detail" v-if="item.value != 'history' && item.value != 'cloud'" v-show="openType == item.value">
|
|
<div class="detailItem" v-for="childItem in item.list" @click="setRouter(item,childItem)" :class="{active:openTypeChild == childItem.value}">
|
|
<i v-show="childItem.icon" :class="['fi',childItem.icon]"></i>
|
|
<div class="text">
|
|
<span>{{ childItem.label }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail" v-else-if="item.value == 'history'">
|
|
<div class="detailItem history" v-for="childItem,index in item.list" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
|
|
<div class="text" style="width: 100%;">
|
|
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
|
|
<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
|
|
</div>
|
|
<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
|
|
<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
|
|
<div class="btn">
|
|
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item.list)"></i>
|
|
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
|
|
<div class="operation" v-show="historyData.selectHistoryIndex == index">
|
|
<div class="item" @click.stop="editName(childItem)">
|
|
<i class="fi fi-rr-edit"></i>
|
|
<span>Rename</span>
|
|
</div>
|
|
<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
|
|
<i class="fi fi-rr-settings-sliders"></i>
|
|
<span>Setting</span>
|
|
</div>
|
|
<div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
|
|
<i class="fi fi-rr-settings-sliders"></i>
|
|
<span>Batch Generation</span>
|
|
</div>
|
|
<div class="item" @click.stop="deleteItem(childItem)">
|
|
<i class="icon iconfont icon-shanchu operate_icon"></i>
|
|
<span>Delete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="!historyData.isNoData" class="material_content_list_loding">
|
|
<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
|
|
<span v-show="historyData.isShowLoading">
|
|
<a-spin size="large" />
|
|
</span>
|
|
</div>
|
|
<img v-show="historyData.isNoData && historyData.isNull" src="@/assets/images/homePage/null_img.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="navListBottom">
|
|
<div class="tools marginT2 list" :class="{active:$route.name == 'cloud'}" @click="()=>$router.push('/home/cloud')">
|
|
<div class="titleBox" style="margin-bottom: 0;">
|
|
<div class="left">
|
|
<i class="fi fi-rr-cloud-upload-alt"></i>
|
|
<span>Batch Generation</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tools list language" :class="{active:isLanguage}">
|
|
<div class="titleBox" @click="()=>isLanguage = !isLanguage">
|
|
<div class="left">
|
|
<i class="fi fi-br-globe"></i>
|
|
<span>Language</span>
|
|
</div>
|
|
<div class="right">
|
|
<i class="fi fi-br-angle-small-down"></i>
|
|
</div>
|
|
</div>
|
|
<div class="detailBox">
|
|
<div class="detail" v-show="isLanguage">
|
|
<div class="detailItem" v-for="item in language" :class="{active:locale == item.value}" @click="setLocale(item.value)">
|
|
<svg v-show="locale == item.value" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="dark-icon sidebar-lang-icon" width="20" height="20"><path stroke="#52525b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.167" d="M11.667 3.5 5.25 9.917 2.334 7"></path></svg>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="homeMain_right_content">
|
|
<div
|
|
class="button_second credits hideChecked"
|
|
>
|
|
{{$t('Header.Credits')}}:
|
|
<span :title="credits">
|
|
<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">
|
|
<div v-for="numItem in 10">{{ numItem-1 }}</div>
|
|
</div>
|
|
</span>
|
|
<i @click="getCredits" class="fi fi-br-refresh" :class="[activeCredits?'active':'']"></i>
|
|
<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
|
|
</div>
|
|
</div>
|
|
<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;">Upgrade to Pro</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightBox">
|
|
<div class="right">
|
|
<div class="user">
|
|
<div class="left" v-show="leftShow">
|
|
<svg @click="()=>leftShow=!leftShow" class="leftShowOrHide" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 24 24" data-v-1c7326d6=""><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd" data-v-1c7326d6=""></path></svg>
|
|
<div class="newObj marginT2" @click="newProject">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.5 5v14m-7-7h14"></path></svg>
|
|
<p>New Project</p>
|
|
</div>
|
|
</div>
|
|
<div class="trialApproval">
|
|
<div class="message_iconItem">
|
|
<a-badge :count="messageNum">
|
|
<i class="fi fi-rr-envelope" @click="openMessage"></i>
|
|
</a-badge>
|
|
</div>
|
|
<div class="message_iconItem">
|
|
<a-badge :count="messageType?.newPosted">
|
|
<!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
|
|
<i class="fi fi-rr-bell" @click.stop="openNewPosted"></i>
|
|
</a-badge>
|
|
<div class="message_iconItem_value select_block" v-show="isNewPosted" style="width: 40rem">
|
|
<newPosted ref="newPosted"></newPosted>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="homeMain_user">
|
|
<div class="homeMain_user_icon" @click="openAccount">
|
|
<img :src="userDetail.avatar" alt="">
|
|
</div>
|
|
<div class="homeMain_user_detail">
|
|
<div class="homeMain_user_icon" @click="openAccount">
|
|
<img :src="userDetail.avatar" alt="">
|
|
</div>
|
|
<div v-if="userDetail.systemUser == 3" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
|
|
<div v-else class="username">{{$t('Header.hello')}}@{{ userDetail.userName }}</div>
|
|
<div class="homeMain_user_detail_attention">
|
|
<div class="attention_item">
|
|
<!-- 点击事件就用下面的div -->
|
|
<div>{{ userDetail?.followeeCount }}</div>
|
|
<span>{{$t('account.Follow')}}</span>
|
|
</div>
|
|
<div class="attention_item">
|
|
<div>{{ userDetail?.followerCount }}</div>
|
|
<span>{{$t('account.Fans')}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="homeMain_subscribe">
|
|
<div>
|
|
<span class="font">Status</span>
|
|
<span v-if="userDetail.timeData.isExpiration" class="stateSucsess font">Valid <i class="fi fi-ss-check-circle"></i></span>
|
|
<span v-else class="stateError font">Expire <i class="fi fi-ss-check-circle"></i></span>
|
|
<span class="time">{{ userDetail.timeData.text }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="homeMain_select">
|
|
<!-- <div class="select_item_box" @click.stop="isLanguage = !isLanguage">
|
|
<div class="select_item">
|
|
<span class="icon iconfont icon-yuyan"></span>
|
|
<span class="select_item_des">{{$t('Header.language')}}</span>
|
|
<span class="icon iconfont icon-xiala" :class="{'active': isLanguage}"></span>
|
|
</div>
|
|
<ul class="select_list" :class="{'active': isLanguage}" @click.stop="">
|
|
<li class="select_item" v-for="item in language" @click="setLocale(item.value)">
|
|
<span class="select_item_des">{{ item.name }}</span>
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
<div class="select_item" @click="orderForm()">
|
|
|
|
<i class="fi fi-rs-notebook"></i>
|
|
<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
|
|
</div>
|
|
<router-link class="select_item" v-if="userDetail.systemList.indexOf(3) >= 0" :to="`/administrator`">
|
|
<span class="icon iconfont icon-yonghu"></span>
|
|
<span class="select_item_des">Administrator</span>
|
|
</router-link>
|
|
<router-link class="select_item" :to="`/Affiliate`" v-if="userDetail.systemList.indexOf(2) >= 0">
|
|
<span class="icon iconfont icon-yonghu"></span>
|
|
<span class="select_item_des">Affiliate</span>
|
|
</router-link>
|
|
<div class="select_item" @click="getTutorial()">
|
|
<span class="fi fi-rr-book-user"></span>
|
|
<span class="select_item_des">{{$t('Header.Tutorial')}}</span>
|
|
</div>
|
|
<div class="select_item_long"></div>
|
|
<div class="select_item" @click="logout()">
|
|
<span class="icon iconfont icon-tuichu"></span>
|
|
<span class="select_item_des">{{$t('Header.logOff')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
|
|
You can use these features only after becoming a regular user~
|
|
</div>
|
|
<div class="router" v-else-if="!getLangIsShowMark">
|
|
<home ref="home" @setTask="setTask"></home>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<payOrder ref="payOrder"></payOrder>
|
|
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
|
<TaskPage ref="TaskPage"></TaskPage>
|
|
|
|
<div class="mark_loading" v-show="getLangIsShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<!-- <RobotAssist v-if="!getLangIsShowMark"></RobotAssist> -->
|
|
<scaleVideo ref="scaleVideo"></scaleVideo>
|
|
<!-- 进行续订 -->
|
|
<renew ref="renew"></renew>
|
|
<projectSetting ref="projectSetting" @getHistory="settingGetHistory"></projectSetting>
|
|
</div>
|
|
</template>
|
|
<script >
|
|
import { defineComponent, createVNode, ref,toRefs, reactive, computed, onMounted, nextTick, watch, provide } from "vue";
|
|
import { isEmail } from "@/tool/util";
|
|
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
|
|
import payOrder from "@/component/Pay/payOrder.vue";
|
|
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
|
import renew from "@/component/HomePage/renew.vue";
|
|
// import Habit from "@/component/Detail/habit.vue";
|
|
import TaskPage from "@/component/HomePage/TaskPage.vue";
|
|
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
|
import { Https } from "@/tool/https";
|
|
import { Modal, message } from "ant-design-vue";
|
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
|
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
import scaleVideo from "@/component/HomePage/scaleVideo.vue";
|
|
import newPosted from "@/component/HomePage/newPosted.vue";
|
|
import { useStore } from "vuex";
|
|
import { setLang } from "@/tool/guide";
|
|
import showViewVideo from "@/tool/mount";
|
|
import { useI18n } from "vue-i18n";
|
|
import { gsap, TweenMax,TweenLite } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import MyWs from "@/tool/webSocket";
|
|
import MyEvent from "@/tool/myEvents";
|
|
import { useRouter,useRoute } from 'vue-router'
|
|
import {openTypeList} from "@/tool/listData.js";
|
|
import home from "@/component/home/index.vue";
|
|
import projectSetting from '@/component/home/newProject/setting.vue'
|
|
export default defineComponent({
|
|
components: {
|
|
VerificationCodeInput,
|
|
renew,
|
|
// Habit,
|
|
RobotAssist,
|
|
scaleVideo,
|
|
newPosted,
|
|
UpgradePlan,
|
|
payOrder,
|
|
TaskPage,
|
|
home,
|
|
projectSetting,
|
|
},
|
|
setup(){
|
|
const store = useStore();
|
|
const {t} = useI18n()
|
|
const {locale} = useI18n()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const homeMainData = reactive({
|
|
leftShow:false,
|
|
openType:'',
|
|
openTypeChild:'',
|
|
isLanguage:false,
|
|
openTypeList:openTypeList(t),
|
|
projectSetting:null,
|
|
historyData:{
|
|
isNoData:false,
|
|
isShowLoading:false,
|
|
isNull:false,
|
|
searchCollectionName:'',
|
|
historyTextarea:'',
|
|
historyList:[],
|
|
selectHistoryIndex:-1,
|
|
page:1,
|
|
size:10,
|
|
},
|
|
bathGenerationList:["poseTransfer","SERIES_DESIGN","toProduct","relight"]
|
|
})
|
|
const historyData = reactive({
|
|
|
|
})
|
|
watch(() => route.query,
|
|
(query, oldQuery) => {
|
|
nextTick(()=>{
|
|
const key = Object.keys(query)?.[0]
|
|
if(key){
|
|
if(query.id){
|
|
homeMainData.openType = 'history'
|
|
homeMainData.openTypeChild = query.id
|
|
}else{
|
|
homeMainData.openType = Object.keys(query)[0]
|
|
homeMainData.openTypeChild = query[Object.keys(query)[0]]
|
|
}
|
|
}else{
|
|
homeMainData.openType = ''
|
|
homeMainData.openTypeChild = ''
|
|
}
|
|
})
|
|
},
|
|
{ immediate: true } // 立即触发一次以处理初始参数
|
|
);
|
|
let userDetail= computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
let isMurmur = ref()
|
|
let credits = computed(()=>{
|
|
return store.state.UserHabit.credits.value
|
|
})
|
|
|
|
let activeCredits = ref(false)
|
|
let getLangIsShowMark = ref(true)
|
|
let messageNum = computed(()=>{
|
|
return store.state.UserHabit.messageSystem.messageNum
|
|
})
|
|
let messageType = computed(()=>{
|
|
return store.state.UserHabit.messageSystem.messageType
|
|
})
|
|
let stateList = reactive({
|
|
isNewPosted:false,
|
|
isLanguage:false,
|
|
})
|
|
let newPosted = ref(null)
|
|
|
|
let getUnreadCount = ()=>{
|
|
Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
|
|
if(rv){
|
|
store.commit('setMessageSystem',[rv])
|
|
}
|
|
})
|
|
}
|
|
MyWs.close()
|
|
// MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
|
|
MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
|
|
let getWsMessage = (data)=>{
|
|
let userInfo = ['followeeCount','followerCount']
|
|
let obj = {}
|
|
let isObj = false
|
|
data.forEach(element => {
|
|
const keys = Object.keys(element)[0]
|
|
if(userInfo.indexOf(keys) > 0){
|
|
obj[keys] = element[keys]
|
|
isObj = true
|
|
}
|
|
});
|
|
if(isObj)store.commit('upUserDetail',obj)
|
|
|
|
store.commit('setMessageSystem',data)
|
|
}
|
|
MyEvent.add('getMessage',getWsMessage)
|
|
let openNewPosted = ()=>{
|
|
stateList.isNewPosted = !stateList.isNewPosted
|
|
newPosted.value.init()
|
|
document.addEventListener(
|
|
"click",
|
|
closeShowOperateContent,
|
|
false
|
|
);
|
|
}
|
|
//点击下拉图标出现操作
|
|
let changeLanguage=() =>{
|
|
stateList.isLanguage = !stateList.isLanguage;
|
|
document.addEventListener(
|
|
"click",
|
|
closeShowOperateContent,
|
|
false
|
|
);
|
|
}
|
|
|
|
//关闭下拉图标
|
|
let closeShowOperateContent=() =>{
|
|
stateList.isLanguage = false
|
|
stateList.isNewPosted = false
|
|
document.removeEventListener("click", closeShowOperateContent);
|
|
}
|
|
let renew = ref(null)
|
|
const openUpgradeToPro = ()=>{
|
|
renew.value.init()
|
|
}
|
|
onMounted(async ()=>{
|
|
let test = getCookie('isTest')
|
|
let isTest =JSON.parse(test)
|
|
//判断账号剩余时间是否太短
|
|
let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne"))
|
|
if(!isModalOne){//判断是否是试用用户
|
|
await new Promise(async (resolve) => {
|
|
if(isTest){
|
|
resolve('')
|
|
}else{
|
|
await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv) => {
|
|
if (rv) {
|
|
let dateNow = Date.now()
|
|
let date = new Date(dateNow)
|
|
let rvDate = new Date(rv);
|
|
let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
|
|
let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
|
|
let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
|
|
let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
|
|
if(days < 5){
|
|
setTimeout(() => {
|
|
let text = {
|
|
str:`${t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${t('HomeView.jsContent8')}</a>`,
|
|
title:`${t('HomeView.jsContent7')}`,
|
|
}
|
|
dataDom.affiche.init(text)
|
|
}, 500);
|
|
}
|
|
resolve('')
|
|
}else{
|
|
resolve('')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
getUnreadCount()
|
|
nextTick(()=>{
|
|
setPorfolioDom()
|
|
})
|
|
})
|
|
const setOpenType = (type,list)=>{
|
|
if(homeMainData.openType == type){
|
|
homeMainData.openType = ''
|
|
}else {
|
|
homeMainData.openType = type
|
|
if(type == 'history'){
|
|
if(list.length == 0){
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let setPorfolioDom = ()=>{
|
|
homeMainData.historyData.isShowLoading = false
|
|
homeMainData.historyData.isNoData = false
|
|
let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
|
|
new IntersectionObserver(
|
|
(entries, observer) => {
|
|
// 如果不是相交，则直接返回
|
|
if (!entries[0].intersectionRatio) return;
|
|
getHistory()
|
|
homeMainData.historyData.page += 1
|
|
},
|
|
).observe(imgParent);
|
|
}
|
|
const setRouter = (item,childItem)=>{
|
|
let itemRouter = item.router
|
|
if(childItem.router)itemRouter = itemRouter + '?' + childItem.router
|
|
router.push(itemRouter)
|
|
}
|
|
const setHistory = (item,childItem)=>{
|
|
// router.push(`/home/tools?tools=toProduct&id=${childItem.id}`)
|
|
if(childItem.process == 'SERIES_DESIGN' || childItem.process == "SINGLE_DESIGN"){
|
|
router.push(`/home?history=${childItem.id}`)
|
|
}else{
|
|
let processList = {
|
|
toProduct:'TO_PRODUCT_IMAGE',
|
|
relight:'RELIGHT',
|
|
poseTransfer:'POSE_TRANSFER',
|
|
deReconstruction:'DE_RECONSTRUCTION',
|
|
patternMaking3D:'THREE_D_PLATE_MAKING',
|
|
canvasUpload:'CANVAS',
|
|
}
|
|
let process = ''
|
|
for (const key in processList) {
|
|
if(processList[key] == childItem.process){
|
|
process = key
|
|
break
|
|
}
|
|
}
|
|
router.push(`/home/tools?tools=${process}&id=${childItem.id}`)
|
|
}
|
|
// router.push(`/home?history=${childItem.id}`)
|
|
}
|
|
const settingGetHistory = ()=>{
|
|
homeMainData.historyData.page = 1
|
|
homeMainData.openTypeList.history.list = []
|
|
homeMainData.historyData.isShowLoading = false
|
|
homeMainData.historyData.isNoData = false
|
|
}
|
|
provide('settingGetHistory',settingGetHistory)
|
|
const getHistory = ()=>{
|
|
if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
|
|
homeMainData.historyData.isShowLoading = true
|
|
let data = {
|
|
page:homeMainData.historyData.page,
|
|
size:homeMainData.historyData.size,
|
|
projectName:homeMainData.historyData.searchCollectionName,
|
|
asc:0,
|
|
process:'',
|
|
// startDate:startDate,
|
|
// endDate:endDate,
|
|
// intersection:1,
|
|
}
|
|
Https.axiosPost( Https.httpUrls.historyProject, data).then(
|
|
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
|
(rv) => {
|
|
if(data.page == 1 && rv.content.length == 0){
|
|
homeMainData.historyData.isNull = true
|
|
}else{
|
|
homeMainData.historyData.isNull = false
|
|
}
|
|
if (rv.content.length > 0) {
|
|
homeMainData.historyData.isNull = false
|
|
homeMainData.openTypeList.history.list.push(...rv.content)
|
|
} else {
|
|
homeMainData.historyData.isNoData = true
|
|
}
|
|
homeMainData.historyData.isShowLoading = false
|
|
}
|
|
).catch(res=>{
|
|
homeMainData.historyData.isShowMark = false
|
|
if(data.page == 1){
|
|
homeMainData.historyData.isNull = true
|
|
}
|
|
homeMainData.historyData.isNoData = true
|
|
});
|
|
}
|
|
const editHistory = (item,index,el,list)=>{
|
|
if(homeMainData.historyData.selectHistoryIndex == -1){
|
|
let top = el.target.parentNode.parentNode.getBoundingClientRect().top
|
|
let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
|
|
let parentHeight = el.target.parentNode.parentNode.parentNode.offsetHeight
|
|
let operation = el.target.parentNode.querySelector('.operation')
|
|
homeMainData.historyData.selectHistoryIndex = index
|
|
//判断弹窗是加载按钮上面还是下面
|
|
if(list.length == 1){
|
|
operation.classList.add('activeLeft')
|
|
return
|
|
}
|
|
if((parentTop+parentHeight)/2 < top){//加在按钮上面
|
|
operation.classList.add('active')
|
|
}else{
|
|
operation.classList.remove('active')
|
|
}
|
|
}else{
|
|
homeMainData.historyData.selectHistoryIndex = -1
|
|
}
|
|
let operationCli = ()=>{
|
|
homeMainData.historyData.selectHistoryIndex = -1
|
|
document.removeEventListener("click", operationCli);
|
|
}
|
|
document.addEventListener("click",operationCli,);
|
|
}
|
|
const editName = (item)=>{
|
|
homeMainData.historyData.selectHistoryIndex = -1
|
|
homeMainData.openTypeList.history.list.forEach((item)=>{
|
|
item.editName = false
|
|
})
|
|
item.editName = true
|
|
homeMainData.historyData.historyTextarea = item.name
|
|
}
|
|
const deleteItem = (item)=>{
|
|
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:{projectId:item.id}}).then(
|
|
(rv) => {
|
|
homeMainData.historyData.selectHistoryIndex = -1
|
|
settingGetHistory()
|
|
if(homeMainData.openTypeChild == item.id){
|
|
router.push('/home')
|
|
}
|
|
}
|
|
);
|
|
}
|
|
const setting = (item)=>{
|
|
homeMainData.projectSetting.init(item)
|
|
}
|
|
const accomplishHistory = (item)=>{
|
|
let data = {
|
|
name:homeMainData.historyData.historyTextarea,//library名字
|
|
id :item.id,//history id
|
|
}
|
|
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data).then(
|
|
(rv) => {
|
|
item.name = homeMainData.historyData.historyTextarea
|
|
item.editName = false
|
|
homeMainData.historyData.historyTextarea = ''
|
|
}
|
|
).catch((res)=>{
|
|
});
|
|
|
|
}
|
|
const newProject = ()=>{
|
|
router.push('/home')
|
|
}
|
|
const bathGeneration = (item)=>{
|
|
homeMainData.openType = ''
|
|
homeMainData.historyData.selectHistoryIndex = -1
|
|
router.push(`/home/cloud?type=creation&id=${item.id}&name=${item.name}`)
|
|
}
|
|
return {
|
|
store,
|
|
userDetail,
|
|
t,
|
|
...toRefs(homeMainData),
|
|
...toRefs(historyData),
|
|
locale,
|
|
isMurmur,
|
|
credits,
|
|
activeCredits,
|
|
getLangIsShowMark,
|
|
messageNum,
|
|
messageType,
|
|
...toRefs(stateList),
|
|
newPosted,
|
|
openNewPosted,
|
|
changeLanguage,
|
|
closeShowOperateContent,
|
|
renew,
|
|
openUpgradeToPro,
|
|
setOpenType,
|
|
setRouter,
|
|
setHistory,
|
|
editHistory,
|
|
settingGetHistory,
|
|
editName,
|
|
deleteItem,
|
|
setting,
|
|
accomplishHistory,
|
|
newProject,
|
|
bathGeneration,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
email: "",
|
|
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
|
time: 60, //60秒倒计时
|
|
timer: 0,
|
|
timerOperate: null,
|
|
numTime: 30,
|
|
timerSec: null,
|
|
modalWarning: null,
|
|
|
|
language:[
|
|
{name:'English',value:'ENGLISH'},
|
|
{name:'中文',value:'CHINESE_SIMPLIFIED'},
|
|
// {name:'한국인',value:'KOREAN'},
|
|
// {name:'にほんご',value:'JAPANESE'},
|
|
// {name:'Русский',value:'RUSSIAN'},
|
|
// {name:'Français',value:'FRENCH'},
|
|
// {name:'แบบไทย',value:'THAI'},
|
|
// {name:'Tiếng Việt',value:'VIETNAMESE'},
|
|
// {name:'Italiano',value:'ITALIAN'},
|
|
],
|
|
};
|
|
},
|
|
directives:{
|
|
},
|
|
async mounted() {
|
|
await new Promise((resolve, reject) => {
|
|
this.store.dispatch('getLangType').then(()=>{
|
|
this.getLangIsShowMark = false
|
|
resolve()
|
|
}).catch(()=>{
|
|
this.getLangIsShowMark = false
|
|
reject()
|
|
})
|
|
})
|
|
|
|
let isMurmur = getCookie('isMurmur')//获取是否是试用用户
|
|
this.isMurmur =JSON.parse(isMurmur)
|
|
if (this.userDetail.userId && this.userDetail.userId > -1) {
|
|
this.accountIsLogin();
|
|
} else {
|
|
this.$router.replace("/");
|
|
}
|
|
if(!this.isMurmur){
|
|
this.operateClick();
|
|
document.addEventListener("click", this.operateClick);
|
|
}
|
|
this.getCredits()
|
|
this.getLang('')
|
|
//语言适配
|
|
|
|
|
|
let tl1 = gsap.timeline({ paused: true });
|
|
let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
|
|
let userDetail = document.querySelector('.homeMain_max .homeMain_user_detail')
|
|
// let anmiation = TweenMax.to(userDetailMax,1, {'margin-top':'30px',opacity:1})
|
|
// anmiation.stop()
|
|
let state
|
|
tl1
|
|
.to(userDetail,.3, {opacity:1,display:'flex'})
|
|
// .to(userDetailIcon,.3, {'left':'16rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
|
|
let overTime
|
|
let outTime
|
|
userDetailMax.addEventListener('mouseenter',(event)=>{
|
|
if(state && !outTime)return
|
|
clearTimeout(overTime)
|
|
clearTimeout(outTime)
|
|
overTime = setTimeout(() => {
|
|
state = true
|
|
this.isLanguage = false
|
|
tl1.play()
|
|
}, 500);
|
|
})
|
|
userDetailMax.addEventListener('mouseleave',(event)=>{
|
|
if(overTime){
|
|
clearTimeout(overTime)
|
|
}
|
|
if(!state)return
|
|
clearTimeout(outTime)
|
|
outTime = setTimeout(() => {
|
|
state = false
|
|
tl1.reverse()
|
|
}, 500);
|
|
})
|
|
let orderId = sessionStorage.getItem('orderId');//进入首页后是否打开订单列表查询到订单
|
|
if(orderId){
|
|
let payOrder = this.$refs.payOrder
|
|
payOrder.init(orderId)
|
|
}
|
|
},
|
|
methods: {
|
|
setTask(data){
|
|
this.openTask(data)
|
|
},
|
|
|
|
turnToPage(name) {
|
|
let noRefresh = name === "home" ? true : false;
|
|
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
|
|
},
|
|
UpgradePlan(){//购买积分
|
|
let UpgradePlan = this.$refs.UpgradePlan
|
|
UpgradePlan.init()
|
|
},
|
|
Assignment(){//任务
|
|
// let num = 123+this.credits
|
|
// this.store.commit('setCredits',num)
|
|
},
|
|
getCredits(){//刷新当前积分
|
|
if(!this.activeCredits){
|
|
this.activeCredits = true
|
|
this.store.dispatch('getCredits').then((rv)=>{
|
|
setTimeout(()=>{
|
|
this.activeCredits = false
|
|
},300)
|
|
})
|
|
}else{
|
|
this.activeCredits = false
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//查看订单
|
|
orderForm(){
|
|
let payOrder = this.$refs.payOrder
|
|
payOrder.init()
|
|
},
|
|
//教程
|
|
getTutorial(){
|
|
let url = 'https://code-create.com.hk/wp-content/uploads/2025/02/aida_3.0-Manual-2_5-CN.pdf'
|
|
if(this.locale == 'ENGLISH'){
|
|
url = 'https://code-create.com.hk/wp-content/uploads/2025/02/aida_3.0-Manual-2_5-EN.pdf'
|
|
showViewVideo({url:'https://code-create.com.hk/wp-content/uploads/2025/02/AiDA-demo-video_2_5_EN.mp4'})
|
|
}else{
|
|
showViewVideo({url:'https://code-create.com.hk/wp-content/uploads/2025/02/AiDA-demo-video_2_5_CN.mp4'})
|
|
}
|
|
//打开视频
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.target = '_blank';
|
|
a.download = 'aida_3.0-Manual.pptx'; // 下载的文件名
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
},
|
|
//登出
|
|
async logout() {
|
|
let data = {
|
|
userId: this.userDetail.userId,
|
|
};
|
|
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
|
// WriteCookie("token");
|
|
});
|
|
this.$router.replace("/");
|
|
this.store.commit('createDetail')
|
|
this.store.commit('createProbject')
|
|
|
|
// WriteCookie("token");
|
|
clonAllCookie()
|
|
// window.location.reload()
|
|
|
|
},
|
|
//判断是否登录
|
|
accountIsLogin() {
|
|
let data = {
|
|
userId: this.userDetail.userId,
|
|
};
|
|
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
|
|
if (!rv) {
|
|
this.$router.replace("/");
|
|
}
|
|
});
|
|
},
|
|
|
|
//点击重置判断是否长时间五操作
|
|
operateClick() {
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
let _this = this;
|
|
let timeNum = 1000 * 60 * 120;
|
|
this.timer = setTimeout(() => {
|
|
this.modalWarning = Modal.warning({
|
|
title: () =>
|
|
this.t('Header.jsContent3',{numTime:_this.numTime}),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: "Ok",
|
|
centered:true,
|
|
onOk() {
|
|
_this.numTime = 30;
|
|
clearInterval(_this.timerSec);
|
|
},
|
|
});
|
|
_this.numCounter();
|
|
}, timeNum);
|
|
},
|
|
|
|
numCounter() {
|
|
this.timerSec = setInterval(() => {
|
|
if (this.numTime > 0) {
|
|
this.numTime = this.numTime - 1;
|
|
} else {
|
|
clearTimeout(this.timer);
|
|
clearInterval(this.timerSec);
|
|
this.logout();
|
|
this.modalWarning.destroy();
|
|
}
|
|
}, 1000);
|
|
},
|
|
//获取当前语言
|
|
getLang(v){
|
|
let data
|
|
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
|
|
(rv) => {
|
|
if (rv) {
|
|
this.locale = rv
|
|
setLang(rv)
|
|
}
|
|
}
|
|
);
|
|
},
|
|
setLang(v){
|
|
|
|
Https.axiosGet(Https.httpUrls.changeUserLanguage,{params:{language:v}}).then((rv) => {
|
|
if (rv) {
|
|
if (rv) {
|
|
let token = rv;
|
|
setCookie("token", token);
|
|
this.getLang('')
|
|
// if(this.$router.currentRoute._value.path == '/home'){
|
|
// this.$router.push("/home")
|
|
// }else{
|
|
// this.$router.push("/home")
|
|
// }
|
|
this.store.commit('clearAllData')
|
|
// window.location.reload()
|
|
window.location.href = '/home';
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
setLocale(v){
|
|
this.setLang(v)
|
|
},
|
|
openTask(data){
|
|
let taskPage = this.$refs.TaskPage
|
|
taskPage.init(data)
|
|
},
|
|
openAccount(){
|
|
this.$router.push("/home/account")
|
|
},
|
|
openMessage(){
|
|
this.$router.push("/home/account/accountMessage")
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.homeMain_max{
|
|
position: relative;
|
|
display: flex;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
> .leftBox{
|
|
height: 100%;
|
|
background: #f5f5f5;
|
|
overflow: hidden;
|
|
width: 26rem;
|
|
transition: width .3s;
|
|
&.leftHide{
|
|
width: 0;
|
|
}
|
|
> .left{
|
|
width: 26rem;
|
|
height: 100%;
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.marginT2{
|
|
margin-top: 2rem;
|
|
}
|
|
.list{
|
|
display: flex;
|
|
flex-direction: column;
|
|
// padding: 1.2rem;
|
|
max-height: 5rem;
|
|
border-radius: 2rem;
|
|
> .titleBox{
|
|
padding: 1.2rem;
|
|
display: flex;
|
|
font-size: 1.4rem;
|
|
cursor: pointer;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
i{
|
|
display: flex;
|
|
}
|
|
> .left{
|
|
display: flex;
|
|
align-items: center;
|
|
> i{
|
|
margin-right: .8rem;
|
|
}
|
|
> span{
|
|
line-height: 2.4rem;
|
|
color: #52525b;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
> .right{
|
|
> i{
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
&:hover{
|
|
> .left{
|
|
> span{
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .detailBox{
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
flex: 1;
|
|
> .detail{
|
|
position: relative;
|
|
height: 100%;
|
|
> img{
|
|
width: 100%;
|
|
}
|
|
> .detailItem{
|
|
cursor: pointer;
|
|
padding: 1.2rem 1.1rem 1.2rem 2.2rem;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin-bottom: .4rem;
|
|
border-radius: .8rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
> .time{
|
|
font-size: 1.2rem;
|
|
opacity: .5;
|
|
}
|
|
> i{
|
|
margin-right: .8rem;
|
|
display: flex;
|
|
}
|
|
> .text{
|
|
> span{
|
|
//只在一行显示
|
|
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
&.active{
|
|
background: #f5f5f5;
|
|
}
|
|
&:hover{
|
|
background: #f5f5f5;
|
|
}
|
|
&.history{
|
|
background: #f5f5f5;
|
|
&:hover{
|
|
background: #fdfdfd;
|
|
}
|
|
&.active{
|
|
background: #fdfdfd;
|
|
}
|
|
> .text{
|
|
> span{
|
|
width: 100%;
|
|
font-weight: 600;
|
|
line-height: 2rem;
|
|
font-size: 1.8rem;
|
|
display: inline-block;
|
|
}
|
|
> textarea{
|
|
resize: none;
|
|
border: none;
|
|
background: rgba(0, 0, 0, 0);
|
|
font-weight: 600;
|
|
line-height: 2rem;
|
|
height: 4rem;
|
|
width: 100%;
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
|
|
> .type{
|
|
border: 1px solid #0000000d;
|
|
padding: .4rem .8rem;
|
|
border-radius: .8rem;
|
|
color: #71717a;
|
|
font-size: 1.4rem;
|
|
max-width: 70%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
> .btn{
|
|
border: 1px solid #0000000d;
|
|
border-radius: .8rem;
|
|
margin-left: auto;
|
|
position: relative;
|
|
> i{
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
> .fi-br-check{
|
|
border-radius: 50%;
|
|
background: #38c793;
|
|
color: #fff;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
> .operation{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3rem;
|
|
background: #e4e4e7;
|
|
border: 1px solid #d4d4d8;
|
|
border-radius: 1rem;
|
|
z-index: 7;
|
|
padding: .8rem;
|
|
box-shadow: 0 0 3.2rem -.8rem #1a1b1e33;
|
|
position: absolute;
|
|
&.active{
|
|
top: auto;
|
|
bottom: 3rem;
|
|
}
|
|
&.activeLeft{
|
|
bottom: 0;
|
|
right: 3rem;
|
|
}
|
|
> .item{
|
|
padding: .8rem;
|
|
color: #52525b;
|
|
display: flex;
|
|
border-radius: .8rem;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
> i{
|
|
font-size: 1.6rem;
|
|
display: flex;
|
|
}
|
|
> span{
|
|
margin-left: .5rem;
|
|
white-space: nowrap;
|
|
}
|
|
&:hover{
|
|
background: #efeff1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
> .detailItem:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
> .material_content_list_loding{
|
|
text-align: center;
|
|
height: 50px;
|
|
.page_loading{
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 auto;
|
|
}
|
|
img{
|
|
height: calc(10rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.active{
|
|
padding: 1.2rem;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
background: #00000008;
|
|
> .titleBox{
|
|
padding: 0;
|
|
margin-bottom: 1.6rem;
|
|
> .right{
|
|
> i{
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.language{
|
|
> .titleBox{
|
|
padding: .8rem;
|
|
background: #00000000;
|
|
height: 5rem;
|
|
> .left{
|
|
> i{
|
|
margin-right: 2rem;
|
|
}
|
|
}
|
|
}
|
|
> .detailBox{
|
|
> .detail{
|
|
> .detailItem{
|
|
padding: .8rem;
|
|
> svg{
|
|
margin-right: 2.5rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
> span{
|
|
color: #111a18;
|
|
opacity: .5;
|
|
margin-left: 4.5rem;
|
|
font-weight: 600;
|
|
}
|
|
&.active{
|
|
> span{
|
|
color: #52525b;
|
|
opacity: 1;
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .title{
|
|
display: flex;
|
|
padding: .4rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
> span{
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
}
|
|
> svg{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
> .navList{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
> .navListBottom{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
> .homeMain_right_content {
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
.homeMain_icon {
|
|
font-size: 3.6rem;
|
|
position: relative;
|
|
top: 0.3rem;
|
|
}
|
|
|
|
.username {
|
|
font-size: 1.6rem;
|
|
color: #1a1a1a;
|
|
margin: 0 0.8rem;
|
|
font-weight: 900;
|
|
span{
|
|
margin: .7rem;
|
|
}
|
|
}
|
|
.credits{
|
|
font-size: 1.6rem;
|
|
color: #1a1a1a;
|
|
font-weight: 900;
|
|
width: auto;
|
|
padding: 0 1.6rem;
|
|
cursor: auto;
|
|
display: flex;
|
|
line-height: 6rem;
|
|
height: 6rem;
|
|
box-sizing: content-box;
|
|
border-radius: 4rem;
|
|
span{
|
|
width: 5rem;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
display: flex;
|
|
margin-right: .9rem;
|
|
.credits_item{
|
|
transition: .3s all;
|
|
// height: 4rem;
|
|
height: 100%;
|
|
// height: 3.2rem;
|
|
div{
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
i{
|
|
height: 100%;
|
|
border-left: .1rem solid ;
|
|
padding-left: 1.3rem;
|
|
margin-left: 1.5rem;
|
|
font-size: 1.6rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.fi-br-refresh{
|
|
margin-left: 0;
|
|
border-left: none;
|
|
padding-left: 0;
|
|
&.active{
|
|
transition: all .3s;
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
> .gallery_btn{
|
|
margin-top: 1.2rem;
|
|
}
|
|
|
|
}
|
|
}
|
|
.newObj{
|
|
border-radius: 1.2rem;
|
|
padding: 1.6rem 1.2rem;
|
|
border: 1px solid #0003;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
> svg{
|
|
margin-right: .4rem;
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
}
|
|
> p{
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
}
|
|
> .rightBox{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
> .right{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
position: relative;
|
|
> .user{
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 2rem 2rem 1.2rem;
|
|
align-items: center;
|
|
> .left{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: auto;
|
|
> .newObj{
|
|
background: #f5f5f5;
|
|
padding: 1.2rem;
|
|
}
|
|
> svg{
|
|
margin-right: 2rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
> .trialApproval{
|
|
display: flex;
|
|
margin-right: 1rem;
|
|
align-items: center;
|
|
> .message_iconItem{
|
|
position: relative;
|
|
cursor: pointer;
|
|
i{
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
.homeMain_user{
|
|
height: 6rem;
|
|
width: 6rem;
|
|
// margin-left: auto;
|
|
|
|
position: relative;
|
|
.homeMain_user_icon{
|
|
height: 6rem;
|
|
width: 6rem;
|
|
position: relative;
|
|
transform-origin: top;
|
|
overflow: hidden;
|
|
z-index: 2;
|
|
left: 0;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
// transition: all .3s;
|
|
}
|
|
.homeMain_user_detail{
|
|
z-index: 999;
|
|
position: absolute;
|
|
top: calc(100% + .5rem);
|
|
background: #fff;
|
|
width: 32rem;
|
|
height: auto;
|
|
opacity: 0;
|
|
right: 0px;
|
|
display: none;
|
|
// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
|
text-align: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 1.2rem 2rem;
|
|
border: 2px solid #000;
|
|
border-radius: 2rem;
|
|
.username,.homeMain_user_detail_attention,.homeMain_subscribe{
|
|
margin-bottom: 2rem;
|
|
}
|
|
.homeMain_user_icon{
|
|
position: relative;
|
|
}
|
|
.homeMain_subscribe{
|
|
padding: 2rem;
|
|
background: #f3f3f6;
|
|
border-radius: 1.4rem;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
> div{
|
|
display: flex;
|
|
margin-bottom: 2rem;
|
|
}
|
|
> div:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.font{
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
margin-right: 1rem;
|
|
}
|
|
.stateSucsess{
|
|
color: #3ab45c;
|
|
}
|
|
.stateError{
|
|
color: #b43a3a;
|
|
}
|
|
.time{
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
.homeMain_select{
|
|
width: 100%;
|
|
.select_item {
|
|
padding: 0 1rem;
|
|
border-radius: .8rem;
|
|
line-height: 4rem;
|
|
color: #4d4d4d;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
&:hover {
|
|
background: #f3f3f6;
|
|
}
|
|
|
|
.iconfont ,.fi-rr-book-user {
|
|
// font-size: 1.4rem;
|
|
}
|
|
|
|
.select_item_des {
|
|
font-size: 1.6rem;
|
|
margin-left: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.select_item_long{
|
|
border-bottom: 1px solid #eceaea;
|
|
margin: 2rem 0;
|
|
}
|
|
.icon-xiala{
|
|
margin-left: auto;
|
|
&.active{
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.select_list{
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: all .3s;
|
|
width: 100%;
|
|
margin: 0;
|
|
> li{
|
|
padding-left: 2.5rem;
|
|
}
|
|
&.active{
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
.homeMain_user_detail_attention{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 3.5rem;
|
|
padding-right: 3.5rem;
|
|
.attention_item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.attention_item_active{
|
|
cursor: pointer;
|
|
}
|
|
.attention_item_active:hover{
|
|
color: #39215b;
|
|
span{
|
|
color: #39215b;
|
|
}
|
|
}
|
|
div{
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
}
|
|
span{
|
|
font-size: 1.4rem;
|
|
color: #949eae;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
> .router{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 0 6rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
> .userSystem{
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
z-index:2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.select_block {
|
|
z-index: 1050;
|
|
position: absolute;
|
|
right: 0rem;
|
|
top: 4rem;
|
|
width: 13.5rem;
|
|
background: #ffffff;
|
|
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
border: 1px solid #000000;
|
|
height: auto;
|
|
padding: 2rem;
|
|
border-radius: 2rem;
|
|
// &.select_list{
|
|
// top: 56%;
|
|
// left: 100%;
|
|
// // transform: translateX(5%);
|
|
// }
|
|
.homeMain_select{
|
|
width: 100%;
|
|
.select_item {
|
|
height: 4.1rem;
|
|
color: #4d4d4d;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
width: 100%;
|
|
&:hover {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.iconfont ,.fi-rr-book-user {
|
|
// font-size: 1.4rem;
|
|
}
|
|
|
|
.select_item_des {
|
|
font-size: 1.6rem;
|
|
margin-left: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.modal_component {
|
|
.skip_content {
|
|
width: 6rem;
|
|
height: 3rem;
|
|
line-height: 2.8rem;
|
|
border: 0.1rem solid #000;
|
|
font-size: 1.4rem;
|
|
color: #000;
|
|
position: absolute;
|
|
top: 1.8rem;
|
|
right: 1.8rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bind_email_content {
|
|
padding: 4.8rem 9.2rem 6rem;
|
|
|
|
.bind_email_tip {
|
|
font-size: 1.8rem;
|
|
color: #a5b0c2;
|
|
line-height: 1.9rem;
|
|
text-align: center;
|
|
}
|
|
.bind_email {
|
|
margin-top: 2rem;
|
|
font-size: 2.2rem;
|
|
font-weight: 400;
|
|
color: #030303;
|
|
text-align: center;
|
|
}
|
|
|
|
.bind_email_form_content {
|
|
.bind_email_form_title {
|
|
font-size: 2.2rem;
|
|
font-weight: bold;
|
|
color: #030303;
|
|
line-height: 2.4rem;
|
|
}
|
|
|
|
.bind_email_form_input {
|
|
width: 100%;
|
|
height: 4.6rem;
|
|
margin-top: 1rem;
|
|
border: 0.1rem solid #b4bed7;
|
|
padding-left: 2.1rem;
|
|
line-height: 4.6rem;
|
|
font-size: 1.8rem;
|
|
box-sizing: border-box;
|
|
|
|
&::placeholder {
|
|
color: #a5b0c2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bind_email_submit_button {
|
|
height: 4.6rem;
|
|
line-height: 4.6rem;
|
|
background: #000;
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
width: 12.8rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin: 3rem auto 0;
|
|
}
|
|
|
|
.icon--shangyibu {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: #030303;
|
|
}
|
|
|
|
.email_last_step_content {
|
|
margin-left: 1rem;
|
|
font-size: 2.2rem;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #030303;
|
|
}
|
|
|
|
.tip_content {
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
color: #000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.email_last_step_des {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
|
|
.sent_email_content {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
color: #a5b0c2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|