1925 lines
54 KiB
Vue
1925 lines
54 KiB
Vue
<template>
|
||
<div class="homeMain_max">
|
||
|
||
<div class="leftBox" :class="{leftHide:leftShow}">
|
||
<div class="left">
|
||
<div class="title">
|
||
<!-- <span>AiDA</span> -->
|
||
<img src="@/assets/images/homePage/aidaIcon.png" alt="">
|
||
<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" @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> -->
|
||
|
||
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="9.83398" y1="1" x2="9.83398" y2="15" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||
<path d="M1.5 8H17.5" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||
</svg>
|
||
<p>{{$t('Header.NewProject')}}</p>
|
||
</div>
|
||
<div class="navList ">
|
||
<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value,history:item.value == 'history'}">
|
||
|
||
<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'" style="height: auto;">
|
||
<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
|
||
<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">{{$t('Header.Today')}}</div>
|
||
<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">{{$t('Header.Yesterday')}}</div>
|
||
<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">{{$t('Header.WithinAWeek')}}</div>
|
||
<div class="timeType" v-if="historyTypeItem == 'Earlierlist' && item.Earlierlist.length>0">{{$t('Header.Earlier')}}</div>
|
||
<div v-for="childItem,index in item[historyTypeItem]" :key="childItem.name" class="detailItem history" @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" v-if="childItem.process == 'THREE_D_PLATE_MAKING'">3D Pattern Making</div>
|
||
<div class="type" v-else>{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div> -->
|
||
<div class="type">{{ $t(`Header.${childItem.process}`) }}</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[historyTypeItem])"></i>
|
||
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
|
||
<div class="operation" v-show="historyData.selectHistoryId == childItem.id">
|
||
<div class="item" @click.stop="editName(childItem)">
|
||
<i class="fi fi-rr-edit"></i>
|
||
<span>{{$t('Header.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>{{$t('Header.Setting')}}</span>
|
||
</div>
|
||
<!-- <div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
|
||
<i class="fi fi-rr-cloud-upload-alt"></i>
|
||
<span>{{$t('Header.BatchGeneration')}}</span>
|
||
</div> -->
|
||
<div class="item" @click.stop="deleteItem(childItem)">
|
||
<i class="icon iconfont icon-shanchu operate_icon"></i>
|
||
<span>{{$t('Header.Delete')}}</span>
|
||
</div>
|
||
</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 marginB2 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>{{$t('Header.BatchGeneration')}}</span>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="tools list" :class="{active:isLanguage}">
|
||
<div class="titleBox" @click="()=>isLanguage = !isLanguage">
|
||
<div class="left">
|
||
<i class="fi fi-br-globe"></i>
|
||
<span>{{$t('Header.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="segmentation"></div>
|
||
<div v-if="userDetail.systemUser != 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
||
|
||
<i class="fi fi-br-dollar" style="margin-right: .6rem;display: flex;"></i>
|
||
{{$t('Header.openUpgrade')}}
|
||
</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="3rem" height="3rem" 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 width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="9.83398" y1="1" x2="9.83398" y2="15" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||
<path d="M1.5 8H17.5" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||
</svg>
|
||
<p style="white-space: nowrap;">{{$t('Header.NewProject')}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="trialApproval">
|
||
<div class="message_iconItem" style="display: flex;">
|
||
<i class="fi fi-rs-interrogation" style="font-size: 2.4rem" @click="toUserManual"></i>
|
||
</div>
|
||
<div class="message_iconItem" style="display: flex;">
|
||
<a-badge :count="messageNum">
|
||
<i class="fi fi-rr-envelope" style="font-size: 2.4rem" @click="openMessage"></i>
|
||
</a-badge>
|
||
</div>
|
||
<div class="message_iconItem" style="display: flex;">
|
||
<a-badge :count="messageType?.newPosted">
|
||
<!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
|
||
<i class="fi fi-rr-bell" style="font-size: 2.4rem" @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_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-if="item != '.'" v-for="numItem in 10">{{ numItem-1 }}</div>
|
||
<div v-else>{{item}}</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 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">{{$t('account.Status')}}</span>
|
||
<span v-if="userDetail.timeData.isExpiration" class="stateSucsess font">{{$t('account.Valid')}} <i class="fi fi-ss-check-circle"></i></span>
|
||
<span v-else class="stateError font">{{$t('account.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">{{$t('Header.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">{{$t('Header.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">
|
||
{{$t('Header.pastDue')}}
|
||
</div>
|
||
<div class="router" v-else-if="!getLangIsShowMark">
|
||
<home ref="home" @setNewProject="()=>leftShow=true" @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>
|
||
<!-- 未绑定邮箱弹窗 -->
|
||
<bindEmail ref="bindEmail"></bindEmail>
|
||
</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 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'
|
||
import bindEmail from "@/component/HomePage/bindEmail.vue";
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
renew,
|
||
// Habit,
|
||
RobotAssist,
|
||
scaleVideo,
|
||
newPosted,
|
||
UpgradePlan,
|
||
payOrder,
|
||
TaskPage,
|
||
home,
|
||
projectSetting,
|
||
bindEmail,
|
||
},
|
||
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,
|
||
userDetailLanguage:computed(()=>store.state.UserHabit.userDetail.language),
|
||
openTypeList:[],
|
||
projectSetting:null,
|
||
historyData:{
|
||
isNoData:false,
|
||
isShowLoading:false,
|
||
isNull:false,
|
||
searchCollectionName:'',
|
||
historyTextarea:'',
|
||
updateTimeType:['Todaylist','Yesterdaylist','WithinAWeeklist','Earlierlist'],
|
||
selectHistoryId:-1,
|
||
page:1,
|
||
size:10,
|
||
isToday:false,
|
||
isYesterday:false,
|
||
isWithinAWeek:false,
|
||
isEarlier:false,
|
||
},
|
||
bathGenerationList:["poseTransfer","SERIES_DESIGN","toProduct","relight"]
|
||
})
|
||
watch(()=>locale.value,(newVal)=>{
|
||
homeMainData.openTypeList = openTypeList(t)
|
||
}, { immediate: true })
|
||
|
||
const historyData = reactive({
|
||
|
||
})
|
||
const getIdExistToHistory = async ()=>{
|
||
return await new Promise((resolve, reject) => {
|
||
let value = {
|
||
id:Number(route.query?.id || route.query?.history),
|
||
}
|
||
Https.axiosPost( Https.httpUrls.historyProject, value)
|
||
.then((rv)=>{
|
||
resolve(rv.content.length > 0)
|
||
}).catch(()=>{resolve(false)})
|
||
})
|
||
|
||
}
|
||
watch(() => route.query,
|
||
(query, oldQuery) => {
|
||
nextTick(async ()=>{
|
||
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]]
|
||
}
|
||
if((query?.id || query?.history) && !await getIdExistToHistory()){
|
||
router.push('/home')
|
||
return
|
||
}
|
||
}else{
|
||
homeMainData.openType = ''
|
||
homeMainData.openTypeChild = ''
|
||
}
|
||
if(
|
||
query.create == 'true' ||
|
||
query?.source == 'batch' ||
|
||
(query.history && query.type == 'Works')
|
||
){
|
||
settingGetHistory()
|
||
}
|
||
|
||
})
|
||
},
|
||
{ immediate: true } // 立即触发一次以处理初始参数
|
||
);
|
||
// watch(()=>homeMainData.openTypeList,()=>{
|
||
// homeMainData.historyData.page = 1
|
||
// })
|
||
watch(()=>homeMainData.userDetailLanguage,(newVal)=>{
|
||
locale.value = newVal
|
||
})
|
||
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()
|
||
}
|
||
const toUserManual = ()=>{
|
||
const route = router.resolve({ name: 'userManual' });
|
||
window.open(route.href + '?lang=' + locale.value, '_blank');
|
||
}
|
||
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
|
||
homeMainData.historyData.page = 1
|
||
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 = {
|
||
icon:"fi-br-time-past",
|
||
label:"History",
|
||
value:"history",
|
||
Todaylist:[],
|
||
Yesterdaylist:[],
|
||
WithinAWeeklist:[],
|
||
Earlierlist:[],
|
||
}
|
||
homeMainData.historyData.isShowLoading = false
|
||
homeMainData.historyData.isNoData = false
|
||
isFound = 0//表示是否找到当前id的记录，
|
||
existToHistoryIndex = -1
|
||
}
|
||
provide('settingGetHistory',settingGetHistory)
|
||
const categorizeDate = (inputDate) => {
|
||
const now = new Date();
|
||
const date = new Date(inputDate);
|
||
// 计算时间差（毫秒）
|
||
const diffTime = now - date;
|
||
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
||
// 判断逻辑
|
||
if ((diffDays === -1 || diffDays === 0) && date.getDate() === now.getDate()) {
|
||
return "Today";
|
||
} else if (diffDays === 1 || (diffDays === 0 && date.getDate() !== now.getDate())) {
|
||
return "Yesterday";
|
||
} else if (diffDays <= 7) {
|
||
return "WithinAWeek";
|
||
} else {
|
||
return "Earlier";
|
||
}
|
||
}
|
||
let isFound = 0
|
||
let existToHistoryIndex = -1
|
||
const setScrollTop = ()=>{
|
||
setTimeout(()=>{
|
||
let historyDateList = ['Todaylist','Yesterdaylist','WithinAWeeklist','Earlierlist']
|
||
let num = 0
|
||
let dateIndex = -1 //表示某个时间段
|
||
let parent = document.querySelectorAll('.homeMain_max .navList .history .detail')
|
||
let imgParent = document.querySelectorAll('.homeMain_max .navList .history .detail>div')
|
||
if(existToHistoryIndex == -1){
|
||
parent[0].parentNode.scrollTop = parent[0].offsetHeight
|
||
}else{
|
||
isFound++
|
||
historyDateList.forEach((item,dateItemIndex)=>{
|
||
let length = homeMainData.openTypeList.history[item].length
|
||
if(existToHistoryIndex > length + num){
|
||
num += length
|
||
}else{
|
||
if(dateIndex == -1)dateIndex = dateItemIndex
|
||
}
|
||
})
|
||
let dateEl = imgParent[dateIndex].querySelectorAll('.history')
|
||
parent[0].parentNode.scrollTop = dateEl[existToHistoryIndex - num-1].offsetTop
|
||
}
|
||
},0)
|
||
|
||
}
|
||
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) {
|
||
rv.content.forEach((item,index)=>{
|
||
let str = categorizeDate(item.updateTime) + 'list'
|
||
homeMainData.openTypeList.history[str].push(item)
|
||
if(item.id == (route.query?.id || route.query?.history)){
|
||
existToHistoryIndex = rv.page * rv.size + index + 1 - rv.size
|
||
}
|
||
})
|
||
homeMainData.historyData.isNull = false
|
||
if((route.query?.id || route.query?.history) && isFound < 1)setScrollTop()
|
||
} 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.selectHistoryId == -1){
|
||
let top = el.target.parentNode.parentNode.getBoundingClientRect().y
|
||
let parentTop = el.target.parentNode.parentNode.parentNode.parentNode.parentNode.getBoundingClientRect().y
|
||
let parentHeight = el.target.parentNode.parentNode.parentNode.parentNode.parentNode.offsetHeight
|
||
let operation = el.target.parentNode.querySelector('.operation')
|
||
homeMainData.historyData.selectHistoryId = item.id
|
||
//判断弹窗是加载按钮上面还是下面
|
||
if(list.length == 1){
|
||
operation.classList.add('activeLeft')
|
||
return
|
||
}
|
||
if(top > parentHeight/2 + parentTop){//加在按钮上面
|
||
operation.classList.add('active')
|
||
}else{
|
||
operation.classList.remove('active')
|
||
}
|
||
}else{
|
||
homeMainData.historyData.selectHistoryId = -1
|
||
}
|
||
let operationCli = ()=>{
|
||
homeMainData.historyData.selectHistoryId = -1
|
||
document.removeEventListener("click", operationCli);
|
||
}
|
||
document.addEventListener("click",operationCli,);
|
||
}
|
||
const editName = (item)=>{
|
||
homeMainData.historyData.selectHistoryId = -1
|
||
for (const key in homeMainData.openTypeList.history) {
|
||
let list = ['Earlierlist','Todaylist','WithinAWeeklist','Yesterdaylist']
|
||
if(list.indexOf(key) == -1)continue
|
||
homeMainData.openTypeList.history[key].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.selectHistoryId = -1
|
||
settingGetHistory()
|
||
if(homeMainData.openTypeChild == item.id){
|
||
router.push('/home')
|
||
}
|
||
}
|
||
);
|
||
}
|
||
const setting = (item)=>{
|
||
homeMainData.projectSetting.init(item)
|
||
homeMainData.historyData.selectHistoryId = -1
|
||
}
|
||
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.selectHistoryId = -1
|
||
router.push(`/home/cloud?type=creation&id=${item.id}&name=${item.name}&process=${item.process}`)
|
||
}
|
||
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,
|
||
toUserManual,
|
||
}
|
||
},
|
||
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://aida-user-manual-chinese.super.site/'
|
||
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");
|
||
clonAllCookie()
|
||
});
|
||
this.$router.replace("/");
|
||
this.store.commit('createDetail')
|
||
this.store.commit('createProbject')
|
||
|
||
// WriteCookie("token");
|
||
// 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){
|
||
this.getLangIsShowMark = true
|
||
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';
|
||
}
|
||
this.getLangIsShowMark = false
|
||
}
|
||
}).catch(()=>{
|
||
this.getLangIsShowMark = false
|
||
})
|
||
},
|
||
|
||
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: 29.5rem;
|
||
transition: width .3s;
|
||
&.leftHide{
|
||
width: 0;
|
||
}
|
||
> .left{
|
||
// width: 26rem;
|
||
width: 29.5rem;
|
||
height: 100%;
|
||
padding: 2.4rem 2.2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.marginT2{
|
||
margin-top: 2rem;
|
||
}
|
||
.marginB2{
|
||
// margin-bottom: 1rem;
|
||
&.active{
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
.list{
|
||
display: flex;
|
||
flex-direction: column;
|
||
// padding: 1.2rem;
|
||
max-height: 5rem;
|
||
border-radius: 2rem;
|
||
&.active{
|
||
> .detailBox{
|
||
flex: 1;
|
||
}
|
||
}
|
||
&.history{
|
||
flex: 1;
|
||
> .detailBox{
|
||
>.detail{
|
||
min-height: 10rem;
|
||
}
|
||
}
|
||
}
|
||
> .titleBox{
|
||
padding: 1.2rem;
|
||
display: flex;
|
||
font-size: 1.8rem;
|
||
cursor: pointer;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
i{
|
||
display: flex;
|
||
font-size: 1.8rem;
|
||
}
|
||
> .left{
|
||
display: flex;
|
||
align-items: center;
|
||
> i{
|
||
margin-right: 1rem;
|
||
}
|
||
> span{
|
||
line-height: 2.4rem;
|
||
// color: #52525b;
|
||
transition: all .3s;
|
||
color: #000000BF;
|
||
}
|
||
}
|
||
> .right{
|
||
> i{
|
||
transition: all .3s;
|
||
}
|
||
}
|
||
&:hover{
|
||
> .left{
|
||
> span{
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> .detailBox{
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
flex: 0;
|
||
> .detail{
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 0 .5rem;
|
||
> img{
|
||
width: 100%;
|
||
}
|
||
.timeType{
|
||
font-size: 1.6rem;
|
||
color: #52525b;
|
||
font-weight: 400;
|
||
margin-top: 1.2rem;
|
||
margin-bottom: .8rem;
|
||
}
|
||
.detailItem{
|
||
cursor: pointer;
|
||
padding: .8rem;
|
||
// padding: 1.2rem 1.1rem 1.2rem 2.2rem;
|
||
font-size: 1.8rem;
|
||
// font-size: 1.4rem;
|
||
font-weight: 400;
|
||
margin-bottom: .4rem;
|
||
border-radius: .8rem;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
// flex-wrap: nowrap;
|
||
|
||
&.history{
|
||
padding: 1.2rem 1.1rem 1.2rem 2.2rem;
|
||
margin-bottom: 1rem;
|
||
> .text{
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
> .time{
|
||
font-size: 1.2rem;
|
||
opacity: .5;
|
||
}
|
||
> i{
|
||
font-size: 1.8rem;
|
||
margin-right: 1rem;
|
||
display: flex;
|
||
}
|
||
> .text{
|
||
flex: 1;
|
||
overflow: hidden;
|
||
> span{
|
||
//只在一行显示
|
||
width: 100%;
|
||
display: block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
&.active{
|
||
// background: #f5f5f5;
|
||
background-color: #ffffff;
|
||
}
|
||
&:hover{
|
||
// background: #f5f5f5;
|
||
background-color: #ffffff;
|
||
}
|
||
&.history{
|
||
background: #f5f5f5;
|
||
// background-color: #ffffff;
|
||
&:hover{
|
||
background: #fdfdfd;
|
||
// background-color: #ffffff;
|
||
}
|
||
&.active{
|
||
background: #fdfdfd;
|
||
// background-color: #ffffff;
|
||
}
|
||
> .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;
|
||
min-width: 40%;
|
||
text-align: center;
|
||
}
|
||
> .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;
|
||
height: min-content;
|
||
&.active{
|
||
top: auto;
|
||
bottom: 3rem;
|
||
}
|
||
&.activeLeft{
|
||
bottom: 0;
|
||
}
|
||
> .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 0;
|
||
overflow: hidden;
|
||
max-height: 100%;
|
||
background: #00000008;
|
||
> .titleBox{
|
||
padding: 0;
|
||
margin-bottom: 1.6rem;
|
||
padding: 0 1.2rem;
|
||
> .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;
|
||
}
|
||
> img{
|
||
width: 2.7rem;
|
||
}
|
||
> svg{
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
> .navList{
|
||
height: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 2.8rem;
|
||
}
|
||
> .segmentation{
|
||
height: 2px;
|
||
background: #0000000d;
|
||
margin-top: 2rem;
|
||
width: 100%;
|
||
}
|
||
|
||
> .navListBottom{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
> .gallery_btn{
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
}
|
||
}
|
||
.newObj{
|
||
border-radius: 2rem;
|
||
border: 2px solid #000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
margin-top: 4.2rem;
|
||
width: 25.1rem;
|
||
// height: 6.8rem;
|
||
padding: calc(2rem - 2px) 0;
|
||
> svg{
|
||
margin-right: 1.3rem;
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
}
|
||
> p{
|
||
font-size: 2rem;
|
||
font-weight: 500;
|
||
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: 3.2rem 2.1rem 1.2rem;
|
||
align-items: center;
|
||
> .left{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: auto;
|
||
> .newObj{
|
||
background: #fff;
|
||
padding: 1.2rem 2.5rem;
|
||
margin: 0;
|
||
width: 17.7rem;
|
||
border-radius: 3rem;
|
||
p{
|
||
font-size: 1.6rem;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
> svg{
|
||
margin-right: 2rem;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
> .homeMain_right_content {
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 1.2rem;
|
||
.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: 500;
|
||
cursor: auto;
|
||
display: flex;
|
||
line-height: calc(5rem - 4px);
|
||
height: 5rem;
|
||
border-radius: 3.4rem;
|
||
justify-content: center;
|
||
width: auto;
|
||
// width: calc(25.3rem - 4px);
|
||
padding: 0 1.2rem;
|
||
border: 1.72px solid #000;
|
||
span{
|
||
// width: 5rem;
|
||
max-width: 10rem;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
display: flex;
|
||
margin-right: 1.2rem;
|
||
.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: 1.72px solid ;
|
||
padding-left: 1.3rem;
|
||
margin-left: 1.5rem;
|
||
font-size: 2.2rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.fi-rr-shop{
|
||
font-size: 2.4rem;
|
||
}
|
||
.fi-br-refresh{
|
||
margin-left: 0;
|
||
border-left: none;
|
||
padding-left: 0;
|
||
&.active{
|
||
transition: all .3s;
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
> .trialApproval{
|
||
display: flex;
|
||
align-items: center;
|
||
> .message_iconItem{
|
||
position: relative;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
margin-right: 1.4rem;
|
||
i{
|
||
width: 2.4rem;
|
||
height: 2.4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
.homeMain_user{
|
||
height: 5.6rem;
|
||
width: 5.6rem;
|
||
// margin-left: auto;
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
position: relative;
|
||
.homeMain_user_icon{
|
||
height: 5.6rem;
|
||
width: 5.6rem;
|
||
position: relative;
|
||
// transform-origin: top;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
left: 0;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
background: #fff;
|
||
img{
|
||
background: #000;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
// transition: all .3s;
|
||
}
|
||
.homeMain_user_detail{
|
||
z-index: 1050;
|
||
position: absolute;
|
||
top: calc(100% + .5rem);
|
||
background: #fff;
|
||
width: 34rem;
|
||
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;
|
||
}
|
||
.fi{
|
||
font-size: 1.8rem;
|
||
}
|
||
.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: #000;
|
||
span{
|
||
color: #000;
|
||
}
|
||
}
|
||
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-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>
|