2259 lines
68 KiB
Vue
2259 lines
68 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=""
|
||
@click="() => $router.push('/home')"
|
||
/>
|
||
<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" :class="{ active: isNewProject }" @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="current-projct"
|
||
@click="handleNavigateToCurrentProject"
|
||
:class="{
|
||
disabled: disabledCurrentProject,
|
||
filled: !disabledCurrentProject,
|
||
active: currentProjectActive
|
||
}"
|
||
>
|
||
<FolderOpenOutlined class="current-project-icon" />
|
||
<span>{{ $t('Habit.currentProject') }}</span>
|
||
</div>
|
||
<div class="divider" />
|
||
<div class="navList">
|
||
<div
|
||
class="tools list"
|
||
v-for="item in navTypeList"
|
||
:class="{
|
||
'active': openType == item.value,
|
||
'history': item.value == 'history',
|
||
'show-history': showHistory && item.value === 'history',
|
||
'isHistory': item.value === 'history'
|
||
}"
|
||
>
|
||
<div class="titleBox" @click="setOpenType(item)">
|
||
<div class="left">
|
||
<i :class="['fi', item.icon]"></i>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
<div class="right" v-if="item.value !== 'history'">
|
||
<i class="fi fi-br-angle-small-down"></i>
|
||
</div>
|
||
</div>
|
||
<div class="detailBox" v-if="item.value != 'history'" 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">{{ $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" @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: 0.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="routerView">
|
||
<div class="userSystem" v-show="pastDuePage">
|
||
{{ $t('Header.pastDue') }}
|
||
</div>
|
||
<div class="router" v-if="!getLangIsShowMark">
|
||
<home
|
||
ref="home"
|
||
@setNewProject="() => (leftShow = true)"
|
||
@setTask="setTask"
|
||
></home>
|
||
</div>
|
||
</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,
|
||
defineAsyncComponent
|
||
} 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, FolderOpenOutlined } 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 { navTypeList } 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'
|
||
// const home = defineAsyncComponent(() =>
|
||
// import('@/component/home/index.vue')
|
||
// )
|
||
export default defineComponent({
|
||
components: {
|
||
renew,
|
||
// Habit,
|
||
RobotAssist,
|
||
scaleVideo,
|
||
newPosted,
|
||
UpgradePlan,
|
||
payOrder,
|
||
TaskPage,
|
||
home,
|
||
projectSetting,
|
||
bindEmail,
|
||
FolderOpenOutlined
|
||
},
|
||
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),
|
||
navTypeList: navTypeList(t),
|
||
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'],
|
||
showHistory: false,
|
||
isNewProject: false
|
||
})
|
||
let userDetail = computed(() => {
|
||
return store.state.UserHabit.userDetail
|
||
})
|
||
const pastDuePage = computed(() => {
|
||
const isAllowedRoute = route.path === '/home/events' || route.path === '/home/works'
|
||
const hasNoSystemAccess = userDetail.value.systemList.indexOf(1) === -1
|
||
return hasNoSystemAccess && !isAllowedRoute
|
||
})
|
||
watch(
|
||
() => homeMainData.userDetailLanguage,
|
||
newVal => {
|
||
if (locale.value == newVal || !newVal) return
|
||
locale.value = newVal
|
||
let navList = navTypeList(t)
|
||
for (const key in navList) {
|
||
const element = navList[key]
|
||
homeMainData.navTypeList[key].label = element.label
|
||
if (element.list?.length > 0) {
|
||
element.list.forEach((item, index) => {
|
||
homeMainData.navTypeList[key].list[index].label = item.label
|
||
})
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
// watch(()=>locale.value,(newVal,oldVal)=>{
|
||
// if(newVal == oldVal)return
|
||
// console.log(newVal , oldVal)
|
||
// // homeMainData.navTypeList =
|
||
// })
|
||
|
||
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 (homeMainData.openType === 'history' && route.path !== '/home/history') {
|
||
homeMainData.openTypeChild = ''
|
||
homeMainData.openType = ''
|
||
}
|
||
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 } // 立即触发一次以处理初始参数
|
||
)
|
||
|
||
// 监听路由,当路由地址为/home/history时homeMainData.showHistory为true,改变左侧菜单颜色
|
||
watch(
|
||
[() => route.path, () => route.fullPath],
|
||
([path, fullPath]) => {
|
||
if (route.path == '/home/history') {
|
||
homeMainData.showHistory = true
|
||
} else {
|
||
homeMainData.showHistory = false
|
||
}
|
||
// 当fullPath为/home时表示在新建项目
|
||
if (route.fullPath === '/home') {
|
||
homeMainData.isNewProject = true
|
||
} else {
|
||
homeMainData.isNewProject = false
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
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()
|
||
// })
|
||
})
|
||
// onBeforeUnmount(()=>{
|
||
// let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
|
||
// if(Observer?.unobserve)Observer.unobserve(imgParent);
|
||
// })
|
||
const setOpenType = item => {
|
||
const { value, list } = item
|
||
if (!list?.length) {
|
||
router.push(item.router)
|
||
return
|
||
}
|
||
homeMainData.openType = homeMainData.openType === value ? '' : value
|
||
}
|
||
let Observer = null
|
||
let setPorfolioDom = () => {
|
||
if (Observer) return
|
||
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'
|
||
)
|
||
Observer = 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 = () => {
|
||
if (homeMainData.historyData.page == 1) {
|
||
return
|
||
}
|
||
homeMainData.historyData.page = 1
|
||
// homeMainData.navTypeList.history = {
|
||
// icon:"fi-br-time-past",
|
||
// label:"History",
|
||
// value:"history",
|
||
// Todaylist:[],
|
||
// Yesterdaylist:[],
|
||
// WithinAWeeklist:[],
|
||
// Earlierlist:[],
|
||
// }
|
||
homeMainData.navTypeList.history.Todaylist = []
|
||
homeMainData.navTypeList.history.Yesterdaylist = []
|
||
homeMainData.navTypeList.history.WithinAWeeklist = []
|
||
homeMainData.navTypeList.history.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.navTypeList.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.navTypeList.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.navTypeList.history) {
|
||
let list = ['Earlierlist', 'Todaylist', 'WithinAWeeklist', 'Yesterdaylist']
|
||
if (list.indexOf(key) == -1) continue
|
||
homeMainData.navTypeList.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}`
|
||
)
|
||
}
|
||
|
||
const currentProjectPath = computed(() => {
|
||
return store.state.Workspace.projectPath
|
||
})
|
||
|
||
const disabledCurrentProject = computed(() => {
|
||
if (!currentProjectPath.value) return true
|
||
|
||
return false
|
||
})
|
||
|
||
const currentProjectActive = computed(() => {
|
||
return currentProjectPath.value === route.fullPath
|
||
})
|
||
|
||
const handleNavigateToCurrentProject = () => {
|
||
if (currentProjectActive.value) return
|
||
if (currentProjectPath.value) {
|
||
router.push(currentProjectPath.value)
|
||
}
|
||
}
|
||
|
||
return {
|
||
store,
|
||
userDetail,
|
||
t,
|
||
...toRefs(homeMainData),
|
||
...toRefs(historyData),
|
||
pastDuePage,
|
||
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,
|
||
currentProjectPath,
|
||
disabledCurrentProject,
|
||
currentProjectActive,
|
||
handleNavigateToCurrentProject
|
||
}
|
||
},
|
||
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, 0.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://aida.com.hk/video/AiDA_3_1_Demo_V2_EN.mp4' })
|
||
} else {
|
||
showViewVideo({ url: 'https://aida.com.hk/video/AiDA_3_1_Demo_V2_CN.mp4' })
|
||
}
|
||
this.toUserManual()
|
||
// //打开视频
|
||
// 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 0.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;
|
||
&.show-history {
|
||
background: #fff;
|
||
border-radius: 0.8rem;
|
||
}
|
||
&.active {
|
||
> .detailBox {
|
||
flex: 1;
|
||
}
|
||
}
|
||
&.history {
|
||
flex: 1;
|
||
&:hover {
|
||
background: #fff;
|
||
border-radius: 0.8rem;
|
||
}
|
||
> .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 0.3s;
|
||
color: #000000bf;
|
||
}
|
||
}
|
||
> .right {
|
||
> i {
|
||
transition: all 0.3s;
|
||
}
|
||
}
|
||
&:hover {
|
||
> .left {
|
||
> span {
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> .detailBox {
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
flex: 0;
|
||
> .detail {
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 0 0.5rem;
|
||
> img {
|
||
width: 100%;
|
||
}
|
||
.timeType {
|
||
font-size: 1.6rem;
|
||
color: #52525b;
|
||
font-weight: 400;
|
||
margin-top: 1.2rem;
|
||
margin-bottom: 0.8rem;
|
||
}
|
||
.detailItem {
|
||
cursor: pointer;
|
||
padding: 0.8rem;
|
||
// padding: 1.2rem 1.1rem 1.2rem 2.2rem;
|
||
font-size: 1.8rem;
|
||
// font-size: 1.4rem;
|
||
font-weight: 400;
|
||
margin-bottom: 0.4rem;
|
||
border-radius: 0.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: 0.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: 0.4rem 0.8rem;
|
||
border-radius: 0.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: 0.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: 0.8rem;
|
||
box-shadow: 0 0 3.2rem -0.8rem #1a1b1e33;
|
||
position: absolute;
|
||
height: min-content;
|
||
&.active {
|
||
top: auto;
|
||
bottom: 3rem;
|
||
}
|
||
&.activeLeft {
|
||
bottom: 0;
|
||
}
|
||
> .item {
|
||
padding: 0.8rem;
|
||
color: #52525b;
|
||
display: flex;
|
||
border-radius: 0.8rem;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
> i {
|
||
font-size: 1.6rem;
|
||
display: flex;
|
||
}
|
||
> span {
|
||
margin-left: 0.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;
|
||
&.isHistory {
|
||
background: #fff;
|
||
border-radius: 0.8rem;
|
||
max-height: 5rem;
|
||
}
|
||
> .titleBox {
|
||
padding: 0;
|
||
margin-bottom: 1.6rem;
|
||
padding: 0 1.2rem;
|
||
> .right {
|
||
> i {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.language {
|
||
> .titleBox {
|
||
padding: 0.8rem;
|
||
background: #00000000;
|
||
height: 5rem;
|
||
> .left {
|
||
> i {
|
||
margin-right: 2rem;
|
||
}
|
||
}
|
||
}
|
||
> .detailBox {
|
||
> .detail {
|
||
.detailItem {
|
||
padding: 0.8rem;
|
||
> svg {
|
||
margin-right: 2.5rem;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
}
|
||
> span {
|
||
color: #111a18;
|
||
opacity: 0.5;
|
||
margin-left: 4.5rem;
|
||
font-weight: 600;
|
||
}
|
||
&.active {
|
||
> span {
|
||
color: #52525b;
|
||
opacity: 1;
|
||
margin-left: 0px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> .title {
|
||
display: flex;
|
||
padding: 0.4rem;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
> span {
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
}
|
||
> img {
|
||
width: 2.7rem;
|
||
cursor: pointer;
|
||
}
|
||
> 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 rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
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;
|
||
&.active {
|
||
border-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
&:hover {
|
||
border-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
> 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: 0.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: 0.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 0.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 {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
// transition: all .3s;
|
||
}
|
||
.homeMain_user_detail {
|
||
z-index: 1050;
|
||
position: absolute;
|
||
top: calc(100% + 0.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: 0.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;
|
||
}
|
||
|
||
.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 0.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> .routerView {
|
||
position: relative;
|
||
overflow: hidden;
|
||
flex: 1;
|
||
display: flex;
|
||
> .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);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 4rem;
|
||
z-index: 100;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.current-projct {
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 25.1rem;
|
||
padding: calc(2rem - 2px) 0;
|
||
margin-top: 2rem;
|
||
&.filled {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.current-project-icon {
|
||
margin-right: 1.3rem;
|
||
}
|
||
|
||
&.disabled {
|
||
color: #9a9a9a;
|
||
border-color: rgba(0, 0, 0, 0.1);
|
||
background: #f5f5f5;
|
||
cursor: not-allowed;
|
||
}
|
||
&.active {
|
||
cursor: not-allowed;
|
||
border-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
&.filled:hover {
|
||
border-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
.divider {
|
||
width: 100%;
|
||
height: 1px;
|
||
margin-top: 3rem;
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
</style>
|