aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
src/views/HomeMain.vue
View File

@@ -7,9 +7,12 @@
<img :src="userInfo?.avatar" alt="">
</div>
<div class="homeMain_user_detail">
<div class="homeMain_user_icon" @click="openAccount">
<img :src="userInfo?.avatar" alt="">
</div>
<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
<div v-else class="username">{{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
<div class="homeMain_user_detail_item homeMain_user_detail_attention">
<div class="homeMain_user_detail_attention">
<div class="attention_item">
<!-- 点击事件就用下面的div -->
<!-- <div class="attention_item attention_item_active"> -->
@@ -25,30 +28,52 @@
<span>作品数</span>
</div> -->
</div>
<div class="homeMain_user_detail_item homeMain_user_detail_setUser" @click="openAccount">
<i class="fi fi-rr-user"></i>
<div>{{$t('Header.personal')}}</div>
<i class="icon iconfont icon-xiala"></i>
<div class="homeMain_subscribe">
<div>
<span class="font">Status</span>
<span class="state font">Paid <i class="fi fi-ss-check-circle"></i></span>
<span class="time">31 Dec 2024</span>
</div>
<!-- <div>
<span class="font">Cancel Renewal <i class="fi fi-rr-arrow-small-right"></i></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="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0" :to="`/administrator`">
<span class="icon iconfont icon-yonghu"></span>
<span class="select_item_des">Administrator</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 class="homeMain_user_content">
<div v-if="isTest" class="username"><span>/</span> {{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
<div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
<div
v-if="!isMurmur"
:class="[
'icon',
'iconfont',
'icon-xiala',
isShowOperate ? 'icon_rotate' : '',
]"
@click.stop="changeShowOperateContent()"
></div>
</div>
<div
class="trialApproval button_second credits hideChecked"
>
@@ -63,36 +88,16 @@
<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
</div>
<div class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">Subscribe now</div>
</div>
<!-- <nav class="homeMain_nav_content">
<router-link :class="['nav_item',$route.name === 'homePage' ? 'select_nav' : '', ]" :to="`/home/homePage`">
{{$t('Header.HOME')}}
</router-link>
<router-link :class="['nav_item',$route.name === 'library' ? 'select_nav' : '', ]" :to="`/home/library`">
{{$t('Header.LIBRARY')}}
</router-link>
<router-link :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
{{$t('Header.HISTORY')}}
</router-link>
<router-link :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
{{$t('Header.WORKS')}}
</router-link>
</nav> -->
<navRouter :routerList="navRouterList"></navRouter>
<div class="homeMain_right">
<!-- <img
class="homeMain_logo"
@click="turnToNewPage('https://www.aidlab.hk/en/')"
src="@/assets/images/loginPage/aida_logo.png"
/> -->
<div class="trialApproval credits message">
<div class="message_iconItem">
<a-badge :count="messageNum">
<i class="fi fi-rr-envelope" @click="openMessage"></i>
</a-badge>
</div>
<div class="message_iconItem">
<a-badge :count="messageType?.newPosted">
<!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
@@ -106,44 +111,7 @@
<Habit></Habit>
</div>
<nav class="select_block" v-show="isShowOperate">
<!-- <div class="select_item" @click="showBindEmailModal()">
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
</div> -->
<div class="select_item" @click.stop="isLanguage = !isLanguage">
<span class="icon iconfont icon-yuyan"></span>
<span class="select_item_des">{{$t('Header.language')}}</span>
</div>
<!-- <div class="select_item" @click="openTask()">
<i class="icon iconfont icon-renwu"></i>
<span class="select_item_des">{{$t('Header.TaskList')}}</span>
</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="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0" :to="`/administrator`">
<span class="icon iconfont icon-yonghu"></span>
<span class="select_item_des">Administrator</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" @click="logout()">
<span class="icon iconfont icon-tuichu"></span>
<span class="select_item_des">{{$t('Header.logOff')}}</span>
</div>
</nav>
<ul class="select_block select_list" v-show="isLanguage">
<li class="select_item" v-for="item in language" @click="setLocale(item.value)">
<span class="select_item_des">{{ item.name }}</span>
</li>
</ul>
<payOrder ref="payOrder"></payOrder>
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
<TaskPage ref="TaskPage"></TaskPage>
@@ -160,6 +128,8 @@
</div>
<RobotAssist></RobotAssist>
<scaleVideo ref="scaleVideo"></scaleVideo>
<!-- 进行续订 -->
<renew ref="renew"></renew>
</div>
</template>
<script >
@@ -168,6 +138,7 @@ import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
import payOrder from "@/component/Pay/payOrder.vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import renew from "@/component/HomePage/renew.vue";
import Habit from "@/component/Detail/habit.vue";
import TaskPage from "@/component/HomePage/TaskPage.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
@@ -189,6 +160,7 @@ import MyEvent from "@/tool/myEvents";
export default defineComponent({
components: {
VerificationCodeInput,
renew,
Habit,
RobotAssist,
scaleVideo,
@@ -223,11 +195,9 @@ export default defineComponent({
})
let stateList = reactive({
isNewPosted:false,
isShowOperate:false,
isLanguage:false,
})
let isNewPosted = ref(false)
let isShowOperate = ref(false)
let isLanguage = ref(false)
let newPosted = ref(null)
@@ -273,14 +243,6 @@ export default defineComponent({
);
}
//点击下拉图标出现操作
let changeShowOperateContent=() =>{
stateList.isShowOperate = !stateList.isShowOperate;
document.addEventListener(
"click",
closeShowOperateContent,
false
);
}
let changeLanguage=() =>{
stateList.isLanguage = !stateList.isLanguage;
document.addEventListener(
@@ -292,12 +254,14 @@ export default defineComponent({
//关闭下拉图标
let closeShowOperateContent=() =>{
stateList.isShowOperate = false;
stateList.isLanguage = false
stateList.isNewPosted = false
document.removeEventListener("click", closeShowOperateContent);
}
let renew = ref(null)
const subscribe = ()=>{
renew.value.init()
}
onMounted(()=>{
getUnreadCount()
navRouterList.value = [
@@ -341,9 +305,10 @@ export default defineComponent({
...toRefs(stateList),
newPosted,
openNewPosted,
changeShowOperateContent,
changeLanguage,
closeShowOperateContent,
renew,
subscribe,
}
},
data() {
@@ -415,15 +380,13 @@ export default defineComponent({
let heradeRight = document.querySelector('.homeMain_max .homeMain_right_content')
let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
let userDetailIcon = document.querySelector('.homeMain_max .homeMain_user_icon')
let userName = document.querySelector('.homeMain_max .homeMain_user_content')
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':'15rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
.to(userName,.3, {opacity:0},'-=.3')
// .to(userDetailIcon,.3, {'left':'16rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
let overTime
let outTime
userDetailMax.addEventListener('mouseenter',(event)=>{
@@ -432,7 +395,6 @@ export default defineComponent({
clearTimeout(outTime)
overTime = setTimeout(() => {
state = true
this.isShowOperate = false
this.isLanguage = false
tl1.play()
}, 500);
@@ -453,9 +415,7 @@ export default defineComponent({
setTask(data){
this.openTask(data)
},
turnToNewPage(url) {
window.open(url);
},
turnToPage(name) {
let noRefresh = name === "home" ? true : false;
@@ -647,23 +607,23 @@ export default defineComponent({
.homeMain_heade {
flex-shrink: 0;
display: flex;
justify-content: space-between;
// padding: 0 30px;
padding: 0 9rem;
padding: 0 6rem;
width: 100%;
height: 7rem;
height: auto;
background: rgba(255, 255, 255, 0.2);
// border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
position: relative;
align-items: center;
z-index: 1049;
z-index: 9;
background-color: #fff;
.homeMain_right{
width: 33%;
// width: 33%;
width: auto;
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: auto;
.message{
display: flex;
width: 6rem;
@@ -715,7 +675,9 @@ export default defineComponent({
// right: 3.2rem;
left: 0;
display: flex;
width: 33%;
// width: 36%;
margin-right: 7rem;
width: auto;
height: 100%;
align-items: center;
.homeMain_icon {
@@ -734,6 +696,7 @@ export default defineComponent({
left: 0;
border-radius: 50%;
cursor: pointer;
background: #fff;
img{
width: 100%;
height: 100%;
@@ -745,24 +708,107 @@ export default defineComponent({
position: absolute;
top: calc(100% + .5rem);
background: #fff;
border-radius: 4px;
width: 30rem;
height: 30rem;
width: 32rem;
height: auto;
opacity: 0;
display: none;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
padding-top: 4rem;
// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
text-align: center;
flex-direction: column;
align-items: center;
padding: 4rem 3rem;
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;
}
.state{
color: #3ab45c;
}
.time{
font-size: 1.4rem;
font-weight: 400;
margin-left: auto;
}
}
.homeMain_select{
width: 100%;
.select_item {
padding: 0 1rem;
border-radius: .8rem;
line-height: 4rem;
color: #4d4d4d;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
width: 100%;
flex-wrap: wrap;
&:hover {
background: #f3f3f6;
}
.iconfont ,.fi-rr-book-user {
// font-size: 1.4rem;
}
.select_item_des {
font-size: 1.6rem;
margin-left: 1rem;
font-weight: 500;
}
}
.select_item_long{
border-bottom: 1px solid #eceaea;
margin: 2rem 0;
}
.icon-xiala{
margin-left: auto;
&.active{
transform: rotate(180deg);
}
}
.select_list{
height: 0;
overflow: hidden;
transition: all .3s;
width: 100%;
margin: 0;
> li{
padding-left: 2.5rem;
}
&.active{
height: auto;
}
}
}
.homeMain_user_detail_attention{
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 2rem;
border-bottom: 1px solid #e3e5e7;
padding-left: 3.5rem;
padding-right: 3.5rem;
.attention_item{
display: flex;
flex-direction: column;
@@ -777,32 +823,15 @@ export default defineComponent({
color: #39215b;
}
}
div{
font-size: 1.6rem;
font-weight: 600;
}
span{
font-size: 1.4rem;
color: #949eae;
}
}
.homeMain_user_detail_setUser{
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
width: 100%;
i{
font-size: 2rem;
display: flex;
}
.fi-rr-user{
margin-right: 1rem;
}
.icon-xiala{
margin-left: auto
}
}
.homeMain_user_detail_item{
margin-top: 1rem;
padding-bottom: 1rem;
}
}
}
@@ -815,29 +844,6 @@ export default defineComponent({
margin: .7rem;
}
}
.homeMain_user_content {
// transition: all .3s;
display: flex;
align-items: center;
position: relative;
height: 3.7rem;
&.marLeft2{
margin-left: 2rem;
}
.icon-xiala {
font-size: 1.4rem;
cursor: pointer;
transition: .3s all;
}
.icon_rotate {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
}
.credits{
font-size: 1.8rem;
color: #1a1a1a;
@@ -846,6 +852,10 @@ export default defineComponent({
padding: 0 1rem;
cursor: auto;
display: flex;
line-height: 6rem;
height: 6rem;
box-sizing: content-box;
border-radius: 4rem;
span{
width: 5rem;
display: inline-block;
@@ -855,7 +865,7 @@ export default defineComponent({
.credits_item{
transition: .3s all;
// height: 4rem;
height: 35px;
height: 100%;
// height: 3.2rem;
div{
height: 100%;
@@ -899,33 +909,37 @@ export default defineComponent({
overflow: hidden;
border: 1px solid #000000;
height: auto;
&.select_list{
// display: none;
transform: translateX(105%);
// transform: translateX(120%);
}
.select_item {
padding-left: 1.5rem;
height: 4.1rem;
color: #4d4d4d;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
// &.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;
}
&:hover {
background: #f7f7f7;
}
.iconfont ,.fi-rr-book-user {
// font-size: 1.4rem;
}
.iconfont ,.fi-rr-book-user {
font-size: 1.4rem;
}
.select_item_des {
font-size: 1.3rem;
margin-left: 0.8rem;
.select_item_des {
font-size: 1.6rem;
margin-left: 1rem;
font-weight: 500;
}
}
}
}
.modal_component {
.skip_content {