fix
This commit is contained in:
X1627315083
@@ -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 {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="homeRecommend_max Guide_1_16_1">
|
||||
<div class="homeRecommend_max" ref="homeRecommendMax">
|
||||
<header class="homeRecommend_heade">
|
||||
<div class="homeRecommend_right_content">
|
||||
<div class="homeRecommend_user_content">
|
||||
@@ -8,56 +8,59 @@
|
||||
@click="turnToNewPage('https://www.aidlab.hk/en/')"
|
||||
src="@/assets/images/loginPage/aida_logo.png"
|
||||
/>
|
||||
<div
|
||||
class="login_footer_item_text"
|
||||
@click="turnToWindow(
|
||||
'https://code-create.com.hk/aida-terms-and-conditions/'
|
||||
)"
|
||||
>
|
||||
Terms&Conditions
|
||||
</div>
|
||||
<div
|
||||
class="login_footer_item_text"
|
||||
@click="turnToWindow(
|
||||
'https://code-create.com.hk/aida-subscription-agreement/'
|
||||
)"
|
||||
>
|
||||
Privacy Policy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeRecommend_right">
|
||||
<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
|
||||
<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
|
||||
<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
|
||||
<a class="gallery_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
|
||||
<div class="gallery_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
|
||||
<div class="gallery_btn white" v-if="systemUser.value != -1" @click="logout">log off</div>
|
||||
</div>
|
||||
<div class="homeRecommend_right" v-if="systemUser.value == -1">
|
||||
<div class="started_btn" @click="setLogin">Login</div>
|
||||
<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
|
||||
<div class="gallery_btn" @click="setLogin">Login</div>
|
||||
<div class="gallery_btn white" @click="setRegister">Sign up</div>
|
||||
</div>
|
||||
</header>
|
||||
<signUp ref="signUp" @close="signUpClose"></signUp>
|
||||
<div class="homeRecommend_content_body">
|
||||
<div class="homeRecommend_content_body_recommend" id="aaaa">
|
||||
<div class="content_body_recommend_left mdhidden">
|
||||
<img class="content_body_img1 content_body_img" src="/image/mainImg/img1.png" alt="">
|
||||
<img class="content_body_img2 content_body_img" src="/image/mainImg/img2.png" alt="">
|
||||
<img class="content_body_img3 content_body_img" src="/image/mainImg/img3.png" alt="">
|
||||
<img class="content_body_img4 content_body_img" src="/image/mainImg/img4.png" alt="">
|
||||
<img class="content_body_img5 content_body_img" src="/image/mainImg/img5.png" alt="">
|
||||
</div>
|
||||
<div class="homeRecommend_content_body_recommend">
|
||||
<img src="@/assets/images/homePage/home-bg.png">
|
||||
<div class="content_body_recommend_center content_body_text">
|
||||
<div class="content_body_recommend_center_title">
|
||||
<h1>AiDA</h1>
|
||||
<h3>bloom your creativity</h3>
|
||||
</div>
|
||||
<div class="content_body_recommend_center_btn">
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
|
||||
<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
|
||||
<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_body_recommend_right mdhidden">
|
||||
<img class="content_body_img1 content_body_img" src="/image/mainImg/img6.png" alt="">
|
||||
<img class="content_body_img2 content_body_img" src="/image/mainImg/img7.png" alt="">
|
||||
<img class="content_body_img3 content_body_img" src="/image/mainImg/img8.png" alt="">
|
||||
<img class="content_body_img4 content_body_img" src="/image/mainImg/img9.png" alt="">
|
||||
<img class="content_body_img5 content_body_img" src="/image/mainImg/img10.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<Works :isScroll="false"></Works>
|
||||
</div>
|
||||
<div class="homeRecommend_content_adminTop" @click="setAdminUp">
|
||||
<i class="fi fi-rr-arrow-small-up"></i>
|
||||
</div>
|
||||
<registerModel ref="registerModel"></registerModel>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script >
|
||||
import { defineComponent, createVNode, ref , nextTick,computed, onMounted } from "vue";
|
||||
import { defineComponent, reactive, ref , nextTick,computed, onMounted, toRefs } from "vue";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
@@ -72,18 +75,22 @@ import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from 'vue-router';
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import registerModel from '@/component/Login/registerModel.vue'
|
||||
import signUp from '@/component/mainPage/signUp/index.vue'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
Habit,
|
||||
Works,
|
||||
registerModel,
|
||||
signUp,
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
let registerModel = ref()
|
||||
let data = reactive({
|
||||
homeRecommendMax:null,
|
||||
signUp:null
|
||||
})
|
||||
let isMoblie = ref(false)
|
||||
let systemUser = computed(()=>{
|
||||
return store.state.UserHabit.systemUser
|
||||
@@ -92,12 +99,11 @@ export default defineComponent({
|
||||
router.push("/login");
|
||||
}
|
||||
let setRegister = () =>{
|
||||
// ler
|
||||
if(window.innerWidth < 768){
|
||||
registerModel.value.pageWidth = '100%'
|
||||
}
|
||||
registerModel.value.init()
|
||||
// router.push("/register");
|
||||
data.signUp.init()
|
||||
data.homeRecommendMax.classList.add('openSignUp')
|
||||
}
|
||||
let signUpClose = ()=>{
|
||||
data.homeRecommendMax.classList.remove('openSignUp')
|
||||
}
|
||||
let setAdminUp = ()=>{
|
||||
let scrollDom = document.querySelector('.homeRecommend_content_body')
|
||||
@@ -127,10 +133,12 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
return {
|
||||
...toRefs(data),
|
||||
systemUser,
|
||||
setLogin,
|
||||
registerModel,
|
||||
setRegister,
|
||||
signUpClose,
|
||||
setAdminUp,
|
||||
logout,
|
||||
goHome,
|
||||
@@ -148,33 +156,9 @@ export default defineComponent({
|
||||
},
|
||||
mounted() {
|
||||
nextTick().then(()=>{
|
||||
|
||||
let dom = document.querySelector('.homeRecommend_content_body')
|
||||
let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
|
||||
let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
|
||||
for (let index = 0; index < codeTween.length; index++) {
|
||||
gsap.from(codeTween[index],.5, {scale:.6 },);
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
|
||||
ScrollTrigger.create({
|
||||
trigger: codeTween[index], // 触发器元素
|
||||
start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
// onUpdate:(v)=>{
|
||||
// if(v.progress < 0.1){
|
||||
// v.trigger?.classList.remove('active')
|
||||
// }else{
|
||||
// v.trigger?.classList.add('active')
|
||||
// // v.trigger?.classList.add('active')
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
|
||||
@@ -187,12 +171,29 @@ export default defineComponent({
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
|
||||
});
|
||||
//标题滚动背景就变为背景
|
||||
let header = document.querySelectorAll('.homeRecommend_max .homeRecommend_heade')
|
||||
let tl2 = gsap.timeline();
|
||||
tl2.to(header,0.5, {'background-color':'#fff'},)
|
||||
ScrollTrigger.create({
|
||||
trigger: header, // 触发器元素
|
||||
start: "0% 0%", // 滚动触发器的起始滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
// scrub: true,
|
||||
animation:tl2,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:.5,
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
turnToNewPage(url) {
|
||||
window.open(url);
|
||||
},
|
||||
turnToWindow(url) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -207,34 +208,54 @@ export default defineComponent({
|
||||
.homeRecommend_content_body{
|
||||
flex: 1;
|
||||
}
|
||||
&.openSignUp{
|
||||
.homeRecommend_heade{
|
||||
position: relative;
|
||||
background: #fff !important;
|
||||
.login_footer_item_text{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.homeRecommend_content_body{
|
||||
display: none;
|
||||
}
|
||||
.homeRecommend_content_adminTop{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeRecommend_heade {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// padding: 0 30px;
|
||||
padding: 0 9rem;
|
||||
padding: 1rem 4rem;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
// height: 7rem;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
// border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
|
||||
position: relative;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
z-index: 1049;
|
||||
z-index: 2;
|
||||
@media (max-width: 768px) {
|
||||
z-index: 1000;
|
||||
}
|
||||
background-color: #fff;
|
||||
// background-color: #fff;
|
||||
.homeRecommend_right{
|
||||
width: 33%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.started_btn2{
|
||||
color: #000;
|
||||
background: #fff;
|
||||
border: 2px solid #39215b;
|
||||
margin-left: 2rem;
|
||||
.gallery_btn{
|
||||
// color: #000;
|
||||
// background: #fff;
|
||||
// border: 2px solid #39215b;
|
||||
// margin-left: 2rem;
|
||||
width: 13rem;
|
||||
text-align: center;
|
||||
&.gallery_btn:nth-child(1){
|
||||
margin-right: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeRecommend_logo {
|
||||
@@ -242,11 +263,15 @@ export default defineComponent({
|
||||
height: 3.2rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.login_footer_item_text{
|
||||
margin-left: 5rem;
|
||||
display: none;
|
||||
}
|
||||
.homeRecommend_right_content {
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 33%;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@@ -293,138 +318,31 @@ export default defineComponent({
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ececec;
|
||||
|
||||
.content_body_recommend_left,
|
||||
.content_body_recommend_right{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
img{
|
||||
border-radius: 2rem;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
--margin:3rem;
|
||||
.content_body_recommend_right{
|
||||
right: 0;
|
||||
.content_body_img1{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 10rem;
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img2{
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
object-fit: cover;
|
||||
top: calc(30rem + var(--margin));
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img3{
|
||||
top: 38rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
object-fit: cover;
|
||||
right: calc(-13rem + var(--margin));
|
||||
}
|
||||
.content_body_img4{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 51rem;
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img5{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 15rem;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.content_body_recommend_left{
|
||||
left: 0;
|
||||
.content_body_img1{
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
object-fit: cover;
|
||||
top: 5rem;
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img2{
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
object-fit: cover;
|
||||
top: calc(20rem + var(--margin));
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img3{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: calc(10rem + var(--margin));
|
||||
// left: calc(0 + var(--margin));
|
||||
}
|
||||
.content_body_img4{
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
object-fit: cover;
|
||||
top: 36rem;
|
||||
left: calc(-13rem + var(--margin));
|
||||
}
|
||||
.content_body_img5{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 51rem;
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img6{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 20rem;
|
||||
left: calc(0 + var(--margin));
|
||||
}
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.content_body_recommend_center{
|
||||
padding: 20rem 0;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
@media (max-width: 768px) {
|
||||
width: 80%;
|
||||
}
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 36rem;
|
||||
transform: translateY(-50%);
|
||||
.content_body_recommend_center_title{
|
||||
h1,h3{
|
||||
color: #fff;
|
||||
}
|
||||
h1{
|
||||
font-size: 15rem;
|
||||
margin-bottom: 0;
|
||||
line-height: 1;
|
||||
font-size: 13rem;
|
||||
font-weight: 900;
|
||||
margin: 7rem;
|
||||
div{
|
||||
color: #341e57;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
line-height: 1;
|
||||
margin: 7rem;
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
.content_body_recommend_center_btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
a{
|
||||
margin: 0 2rem;
|
||||
a:nth-child(1){
|
||||
margin-right: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,7 +208,7 @@ export default defineComponent({
|
||||
// height: 100%;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
padding: 0 9rem;
|
||||
padding: 0 6rem;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
padding-top: 5rem;
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
|
||||
<div class="page_content_body">
|
||||
<div class="home_page_body">
|
||||
<div class="home_page_left">
|
||||
<div class="home_page_left_content">
|
||||
<div class="home_page_left" ref="hidden">
|
||||
<div class="home_page_left_content" :class="{'active':domHidden}">
|
||||
<!-- 空状态 start-->
|
||||
<div class="home_left_null" v-show="!isHaveReviewCollection">
|
||||
<div>
|
||||
@@ -32,10 +32,10 @@
|
||||
<!-- <div class="button_second" @click="startNewCollection()">
|
||||
{{ $t('HomeView.Start') }}
|
||||
</div> -->
|
||||
<div class="button_first button_margin" @click="recollection()">
|
||||
<div class="gallery_btn white button_margin" @click="recollection()">
|
||||
{{ $t('HomeView.Edit') }}
|
||||
</div>
|
||||
<div class="button_first button_margin" @click="resetCollection()">
|
||||
<div class="gallery_btn white button_margin" @click="resetCollection()">
|
||||
{{ $t('HomeView.Reset') }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,20 +52,37 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 有图状态 end-->
|
||||
|
||||
</div>
|
||||
<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home_page_right">
|
||||
|
||||
<div class="right_top">
|
||||
<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
|
||||
<div class="right_top_left">
|
||||
<div class="button_second Guide_1_15" @click="designNewCollection()">
|
||||
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
|
||||
{{ $t('HomeView.Design') }}
|
||||
</div>
|
||||
<div class="button_first button_margin_14 Guide_1_30" v-show="designCollectionId"
|
||||
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
||||
@click="resDesignCollection()">
|
||||
{{ $t('HomeView.Redesign') }}
|
||||
</div>
|
||||
<div class="silder button_margin_14" v-show="designCollectionId">
|
||||
<div class="text">Small</div>
|
||||
<a-slider id="system_silder"
|
||||
class="system_silder"
|
||||
v-model:value="collValue"
|
||||
@afterChange="setSystemDesigner"
|
||||
:tooltipVisible="false"
|
||||
>
|
||||
</a-slider>
|
||||
<div class="text">Big</div>
|
||||
</div>
|
||||
<div class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
|
||||
<!-- {{ $t('HomeView.Export') }} -->
|
||||
{{$t('HomeView.FinalizeCollection')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -79,11 +96,35 @@
|
||||
</div>
|
||||
|
||||
<div class="right_content_body">
|
||||
<div class="right_content_img_block scroll_style Guide_1_17 active" v-mousewheel :class="[driver__.driver?'showEvents':'']">
|
||||
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
|
||||
<div class="right_content_img_item">
|
||||
<!-- <draggable
|
||||
group="people" > -->
|
||||
<div class="content_img_block" v-for="(
|
||||
|
||||
<div class="content_img_block active" :style="collStyle" draggable
|
||||
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
||||
@click="designDetail(
|
||||
design,
|
||||
index,
|
||||
likeDesignCollectionList,
|
||||
'like'
|
||||
)"
|
||||
@dragstart="dragstart($event, index)"
|
||||
@dragover.prevent
|
||||
@drop="dragDrop($event, index)">
|
||||
<div class="content_img_flex">
|
||||
<img class="content_img" :src="design.designOutfitUrl"
|
||||
:key="design.designOutfitUrl" />
|
||||
</div>
|
||||
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
|
||||
dislikeDesignCollection(
|
||||
design,
|
||||
index
|
||||
)">
|
||||
</div>
|
||||
</div>
|
||||
<!-- </draggable> -->
|
||||
<div class="content_img_block" :style="collStyle" v-for="(
|
||||
design, index
|
||||
) in designCollectionList" :key="design?.designItemId">
|
||||
<div class="content_img_flex"
|
||||
@@ -106,64 +147,28 @@
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
<!-- </draggable> -->
|
||||
|
||||
<div class="content_img_block" v-show="showDesignMark">
|
||||
<div class="content_img_flex" >
|
||||
<!-- <img class="content_img" v-lazy="''" /> -->
|
||||
<img class="content_img" src="@/assets/images/homePage/loading.gif" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right_content_header">
|
||||
<!-- <div class="right_content_header">
|
||||
<div class="content_header_left">
|
||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
|
||||
</div>
|
||||
<div class="right_content_export" v-show="likeDesignCollectionList.length">
|
||||
<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
|
||||
<div class="button_second Guide_1_31" @click="exportModel()">
|
||||
<!-- {{ $t('HomeView.Export') }} -->
|
||||
{{$t('HomeView.FinalizeCollection')}}
|
||||
</div>
|
||||
<!-- <div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
isShowOperate ? 'icon_rotate' : '',
|
||||
]"
|
||||
@click.stop="changeShowOperateContent()"
|
||||
></div> -->
|
||||
<!-- <div class="export_nav" v-show="isShowOperate" @click.stop="">
|
||||
<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
|
||||
{{ item.name }}
|
||||
</a-checkbox>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right_content_body">
|
||||
<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:likeDesignCollectionList.length != 0}">
|
||||
<div class="right_content_img_block scroll_style" :class="{active:likeDesignCollectionList.length != 0}">
|
||||
<div class="right_content_img_item" id="right_content_img_block">
|
||||
<!-- <div class="content_img_block" v-for="(
|
||||
design, index
|
||||
) in likeDesignCollectionList" :key="design?.id" @click="
|
||||
designDetail(
|
||||
design,
|
||||
index,
|
||||
likeDesignCollectionList,
|
||||
'like'
|
||||
)
|
||||
">
|
||||
<div class="content_img_flex">
|
||||
<img class="content_img" v-lazy="design.designOutfitUrl"
|
||||
:key="design.designOutfitUrl" />
|
||||
</div>
|
||||
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
|
||||
dislikeDesignCollection(
|
||||
design,
|
||||
index
|
||||
)
|
||||
"></div>
|
||||
</div> -->
|
||||
<div class="content_img_block" draggable
|
||||
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
||||
@click="designDetail(
|
||||
@@ -188,7 +193,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -200,6 +205,7 @@
|
||||
<productImg ref="productImg" @setTask="setTask"></productImg>
|
||||
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
|
||||
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
|
||||
|
||||
<!-- 导出缩略图的蒙层 start-->
|
||||
<div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
|
||||
<a-spin size="large" />
|
||||
@@ -207,14 +213,15 @@
|
||||
<!-- 导出缩略图的蒙层 end-->
|
||||
|
||||
<!-- design collection的进度蒙层 start-->
|
||||
<div class="progress_mark" v-show="showDesignMark">
|
||||
|
||||
<!-- <div class="progress_mark" v-show="showDesignMark">
|
||||
<div class="mark_content Guide_1_16">
|
||||
<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
|
||||
<div>
|
||||
<a-spin :indicator="indicator" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- design collection的进度蒙层 end-->
|
||||
<affiche ref="affiche"></affiche>
|
||||
<!-- <RobotAssist></RobotAssist> -->
|
||||
@@ -224,7 +231,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode} from "vue";
|
||||
import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode} from "vue";
|
||||
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import CollectionModal from "@/component/HomePage/collectionModal.vue";
|
||||
@@ -240,7 +247,6 @@ import html2canvas from "html2canvas";
|
||||
import { message,Modal } from "ant-design-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
import draggable from 'vuedraggable'
|
||||
@@ -344,6 +350,25 @@ export default defineComponent({
|
||||
return store.state.UploadFilesModule.chooseIsDesign})
|
||||
let portfolio:any = ref({})
|
||||
provide('portfolio',portfolio)
|
||||
|
||||
const collItemSize = reactive({
|
||||
collValue:40,
|
||||
collStyle:{
|
||||
width:'24rem',
|
||||
height:'37rem'
|
||||
},
|
||||
collTime:null as any,
|
||||
})
|
||||
const setSystemDesigner = ()=>{
|
||||
clearTimeout(collItemSize.collTime)
|
||||
collItemSize.collTime = setTimeout(()=>{
|
||||
let wScale = 60,hScale = 92.5
|
||||
let num = collItemSize.collValue
|
||||
let {width,height} = collItemSize.collStyle
|
||||
collItemSize.collStyle.width = wScale * ((num<20?20:num) / 100) + 'rem'
|
||||
collItemSize.collStyle.height = hScale * ((num<20?20:num) / 100) + 'rem'
|
||||
},500)
|
||||
}
|
||||
return {
|
||||
store,
|
||||
likeDesignCollectionList,
|
||||
@@ -365,6 +390,8 @@ export default defineComponent({
|
||||
isMannequinShow,
|
||||
chooseIsDesign,
|
||||
portfolio,
|
||||
setSystemDesigner,
|
||||
...toRefs(collItemSize),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -387,6 +414,9 @@ export default defineComponent({
|
||||
likeLoading: false, //喜欢防抖
|
||||
dragIdx:0,
|
||||
designRandom:'',
|
||||
domHidden:false,
|
||||
|
||||
getDesignTime:null as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -401,6 +431,9 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
},
|
||||
beforeUnmount(){
|
||||
clearTimeout(this.getDesignTime);
|
||||
},
|
||||
async mounted() {
|
||||
// if(JSON.parse( getCookie('isFirst') as any)){
|
||||
// }
|
||||
@@ -645,38 +678,63 @@ export default defineComponent({
|
||||
);
|
||||
return;
|
||||
}
|
||||
clearTimeout(this.getDesignTime);
|
||||
let data = this.getDesignData("");
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.designCollection, data)
|
||||
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
this.store.commit(
|
||||
"setDesignCollectionList",
|
||||
rv.designCollectionItems
|
||||
);
|
||||
|
||||
let value = {
|
||||
objectSignList:data.requestIdList.join(),
|
||||
requestId:rv
|
||||
}
|
||||
this.store.commit("setLikeDesignCollectionList", []);
|
||||
this.store.commit("deleteUserGroupId");
|
||||
this.store.commit(
|
||||
"setDesignCollectionId",
|
||||
rv.collectionId
|
||||
);
|
||||
this.store.commit("setDesignId", rv.designId);
|
||||
// this.designProgress = 0;
|
||||
this.getDesignResult(value,'newDesign')
|
||||
this.startDesignType = "design";
|
||||
}
|
||||
this.isShowMark = false;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.showDesignMark = false;
|
||||
this.isShowMark = false;
|
||||
})
|
||||
// setTimeout(() => {
|
||||
this.getDesignProcess(this.designRandom);
|
||||
// }, 1000);
|
||||
// this.getDesignProcess(this.designRandom);
|
||||
},
|
||||
getDesignResult(data:any,str:any){
|
||||
this.showDesignMark = true
|
||||
Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
|
||||
.then((rv)=>{
|
||||
if(rv.designCollectionItems){
|
||||
this.store.commit("setDesignCollectionList",rv.designCollectionItems);
|
||||
}
|
||||
|
||||
if(rv.unfinishedList.length == 0){
|
||||
this.showDesignMark = false
|
||||
if(str == 'newDesign'){
|
||||
if(rv.designCollectionItems){
|
||||
this.store.commit("deleteUserGroupId");
|
||||
this.store.commit(
|
||||
"setDesignCollectionId",
|
||||
rv.collectionId
|
||||
);
|
||||
this.store.commit("setDesignId", rv.designId);
|
||||
}
|
||||
}else{
|
||||
// this.designProgress = 0,
|
||||
this.store.commit("setDesignId", rv.designId);
|
||||
}
|
||||
}else{
|
||||
this.getDesignTime = setTimeout(()=>{
|
||||
data.objectSignList = rv.unfinishedList.join()
|
||||
this.getDesignResult(data,str)
|
||||
},1000)
|
||||
}
|
||||
}).catch(()=>this.showDesignMark = false)
|
||||
},
|
||||
//重新设计collection
|
||||
resDesignCollection() {
|
||||
@@ -693,25 +751,25 @@ export default defineComponent({
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
clearTimeout(this.getDesignTime);
|
||||
this.isShowMark = true
|
||||
let data = this.getDesignData(this.designCollectionId);
|
||||
Https.axiosPost(Https.httpUrls.reDesignCollection, data)
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
this.store.commit(
|
||||
"setDesignCollectionList",
|
||||
rv.designCollectionItems
|
||||
);
|
||||
// this.designProgress = 0,
|
||||
let value = {
|
||||
objectSignList:data.requestIdList.join(),
|
||||
requestId:rv
|
||||
}
|
||||
this.getDesignResult(value,'resDesign')
|
||||
this.startDesignType = "resDesign";
|
||||
this.store.commit("setDesignId", rv.designId);
|
||||
this.isShowMark = false
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
this.showDesignMark = false;
|
||||
this.isShowMark = false;
|
||||
});
|
||||
// setTimeout(() => {
|
||||
this.getDesignProcess(this.designRandom);
|
||||
// }, 1000);
|
||||
// this.getDesignProcess(this.designRandom);
|
||||
|
||||
},
|
||||
|
||||
@@ -754,9 +812,15 @@ export default defineComponent({
|
||||
data.collectionId = designCollectionId;
|
||||
}
|
||||
if(!isLoad){
|
||||
this.designProgress = 0;
|
||||
this.showDesignMark = true;
|
||||
// this.designProgress = 0;
|
||||
// this.isShowMark = true;
|
||||
}
|
||||
let arr = []
|
||||
for (let index = 0; index < 8; index++) {
|
||||
let floor = Math.floor(Math.random() * 90000000) + 10000000
|
||||
arr.push(floor)
|
||||
}
|
||||
data.requestIdList = arr
|
||||
return data;
|
||||
},
|
||||
|
||||
@@ -1142,8 +1206,8 @@ export default defineComponent({
|
||||
.home_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
overflow: hidden;
|
||||
padding: 0 6rem;
|
||||
// overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
// left: 50%;
|
||||
@@ -1164,18 +1228,51 @@ export default defineComponent({
|
||||
display: flex;
|
||||
// padding-left: 0.7rem;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
|
||||
.home_page_left {
|
||||
// width: 44.4rem;
|
||||
width: 55rem;
|
||||
height: 100%;
|
||||
padding: 2rem 0 0 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
|
||||
.home_page_left_bottom{
|
||||
position: absolute;
|
||||
width: 4rem;
|
||||
height: 7rem;
|
||||
background: #fff;
|
||||
border: 2px solid;
|
||||
border-right: none;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
top: 50%;
|
||||
transform: translate(-100%,-50%);
|
||||
left: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
>span{
|
||||
transition: all .3s;
|
||||
transform: rotate(90deg);
|
||||
&.active{
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.home_page_left_content {
|
||||
height: 100%;
|
||||
|
||||
width: 55rem;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
padding-right: 1.2rem;
|
||||
&.active{
|
||||
padding-right: 0;
|
||||
width: 0;
|
||||
}
|
||||
.home_left_null {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1185,7 +1282,6 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #f7f8fa;
|
||||
border: 1px solid #f2f2f9;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1275,21 +1371,40 @@ export default defineComponent({
|
||||
justify-content: space-between;
|
||||
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
||||
transition: all .3s;
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 0;
|
||||
}
|
||||
.right_top_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
.button_margin_14 {
|
||||
margin-left: 1.4rem;
|
||||
}
|
||||
.silder{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.system_silder{
|
||||
margin: 0 3rem;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_content_block {
|
||||
height: calc(100% - 8.584rem);
|
||||
overflow-y: auto;
|
||||
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.right_content_block::-webkit-scrollbar{display: none;}
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
@@ -1351,11 +1466,11 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.right_content_body {
|
||||
padding: 0 1.8rem 0 1.2rem;
|
||||
// padding: 0 1.8rem 0 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
height: calc(50% - 4.5rem);
|
||||
// min-height: 280px;
|
||||
|
||||
// height: calc(50% - 4.5rem);
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.right_content_img_block {
|
||||
// overflow-y: auto;
|
||||
background: #f6f6fa;
|
||||
@@ -1399,18 +1514,18 @@ export default defineComponent({
|
||||
}
|
||||
>div{
|
||||
display: flex;
|
||||
padding: 0 2.8rem 0 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
// padding: 0 2.8rem 0 0.9rem;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.content_img_block {
|
||||
// width: 20.1rem;
|
||||
width: auto;
|
||||
width: 24rem;
|
||||
height: 37rem;
|
||||
// height: 29.5rem;
|
||||
margin-right: 1rem;
|
||||
// margin-bottom: 1rem;
|
||||
min-width: 127px;
|
||||
margin-bottom: 1rem;
|
||||
// min-height: 271px;
|
||||
max-height: 100%;
|
||||
|
||||
@@ -1423,9 +1538,9 @@ export default defineComponent({
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
// &:nth-child(4n) {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
|
||||
.content_img_flex {
|
||||
display: flex;
|
||||
@@ -1433,8 +1548,17 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
|
||||
}
|
||||
&.active{
|
||||
.icon_like{
|
||||
display: block;
|
||||
}
|
||||
.content_img_flex {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.content_img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
@@ -1454,7 +1578,8 @@ export default defineComponent({
|
||||
color: #000;
|
||||
}
|
||||
.icon-jushoucanggift {
|
||||
color: rgba(52, 53, 121, 1);
|
||||
// color: rgba(52, 53, 121, 1);
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -282,7 +282,7 @@ export default defineComponent({
|
||||
// height: 100%;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
padding: 0 9rem;
|
||||
padding: 0 6rem;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
padding-top: 5rem;
|
||||
|
||||
@@ -398,7 +398,7 @@ export default defineComponent({
|
||||
.history_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
padding: 0 6rem;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
@@ -420,7 +420,7 @@ export default defineComponent({
|
||||
.history_page_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2.5rem 4rem;
|
||||
padding: 4rem 2.5rem 4rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history_header{
|
||||
|
||||
@@ -259,6 +259,7 @@
|
||||
@keydown.enter="getgenerate"
|
||||
@click="inputFocus()"
|
||||
:placeholder="(scene?.value == 'Slogan' && selectCode == 'Printboard')?isSloganHint:$t('LibraryPage.inputContent2')"
|
||||
@paste="onPaste"
|
||||
v-model="captionGeneration">
|
||||
<i class="fi fi-br-upload" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||
<a-upload
|
||||
@@ -1317,10 +1318,9 @@ export default defineComponent({
|
||||
}
|
||||
file.categoryValue = category?.value;
|
||||
file.category = category?.name;
|
||||
let fileList = this.selectGenerateList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
this.selectGenerateList = fileList
|
||||
let paste = this.selectGenerateList.filter((v: any) => v.id === file.id);
|
||||
if(paste.length == 0)this.selectGenerateList.push(file);
|
||||
this.selectGenerateList = this.selectGenerateList.filter((v: any) => v.status === "done");
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
@@ -1630,6 +1630,32 @@ export default defineComponent({
|
||||
scaleImage.scaleImageMask = true
|
||||
scaleImage.init(this.generateList[this.selectCode],index)
|
||||
},
|
||||
onPaste(e:any){
|
||||
if(e.clipboardData.items[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('gender',this.sex)
|
||||
param.append('level1Type',this.selectCode)
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',e.clipboardData.files[0]);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
|
||||
let value = {data:v,errCode : 0}
|
||||
v.status = 'done'
|
||||
let data = {
|
||||
file:{
|
||||
status: 'done',
|
||||
xhr:{
|
||||
response:JSON.stringify(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.generateFileUploadChange(data)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1641,7 +1667,7 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
padding: 0 6rem;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
.page_content {
|
||||
|
||||
@@ -23,44 +23,44 @@
|
||||
<!-- v-show="loginType == 'username'" -->
|
||||
<div>
|
||||
<div class="login_form_content" :state="emailStap">
|
||||
<div class="login_form_title">Name</div>
|
||||
<!-- <div class="login_form_title">Name</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your username"
|
||||
v-model="username"
|
||||
/>
|
||||
|
||||
<div class="login_form_title marign_top30">
|
||||
<div>Password</div>
|
||||
<!-- <div class="tip_content" @click="changeIsLogin(2)">
|
||||
Forgot password？
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="password_input_block">
|
||||
<input
|
||||
class="login_form_input"
|
||||
:type="passwordType"
|
||||
placeholder="Enter your password"
|
||||
v-model="password"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
<div
|
||||
class="icon iconfont icon-yanjing_yincang_o password_show_icon"
|
||||
@click="changePasswordType()"
|
||||
></div>
|
||||
</div>
|
||||
<div class="login_form_title marign_top30">
|
||||
Email
|
||||
</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your email address"
|
||||
v-model="email"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
/> -->
|
||||
<div v-show="emailStap === 1">
|
||||
<div class="login_form_title marign_top30">
|
||||
Email
|
||||
</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your email address"
|
||||
v-model="email"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
<div class="login_form_title marign_top30">
|
||||
<div>Password</div>
|
||||
</div>
|
||||
<div class="password_input_block">
|
||||
<input
|
||||
class="login_form_input"
|
||||
:type="passwordType"
|
||||
placeholder="Enter your password"
|
||||
v-model="password"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
<div
|
||||
class="icon iconfont icon-yanjing_yincang_o password_show_icon"
|
||||
@click="changePasswordType()"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 邮箱登录 start -->
|
||||
<div
|
||||
v-show="emailStap === 2"
|
||||
class="login_form_email"
|
||||
:class="{ active: emailStap === 2 }"
|
||||
>
|
||||
@@ -129,7 +129,9 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="thirdPartyLogin marign_top30">
|
||||
<googleLogin></googleLogin>
|
||||
<googleLogin @googelLogin="googelLogin"></googleLogin>
|
||||
<weiXinLogin></weiXinLogin>
|
||||
<phoneLogin></phoneLogin>
|
||||
</div>
|
||||
<div
|
||||
class="login_submit_button marign_top40"
|
||||
@@ -233,7 +235,9 @@
|
||||
<!-- 忘记密码 end -->
|
||||
</div>
|
||||
|
||||
<div class="login_footer">
|
||||
|
||||
|
||||
<!-- <div class="login_footer">
|
||||
<div class="login_footer_item">
|
||||
<div class="login_footer_item_text">
|
||||
©2024 Code-Create Limited
|
||||
@@ -262,7 +266,10 @@
|
||||
Privacy Policy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -274,22 +281,26 @@ import { setCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { message } from "ant-design-vue";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import googleLogin from "@/component/LoginPage/googleLogin.vue";
|
||||
import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
|
||||
import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { setLang } from "@/tool/guide";
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,googleLogin
|
||||
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
|
||||
},
|
||||
setup() {
|
||||
let timer: any = 0;
|
||||
const { locale } = useI18n();
|
||||
const store = useStore();
|
||||
let loadingShow = ref(false)
|
||||
return {
|
||||
store,
|
||||
timer,
|
||||
locale,
|
||||
loadingShow,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -315,6 +326,7 @@ export default defineComponent({
|
||||
loginTime: true,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeLoginType(type: string) {
|
||||
this.loginType = type;
|
||||
@@ -431,7 +443,7 @@ export default defineComponent({
|
||||
if (this.emailStap >= 2) {
|
||||
return;
|
||||
} else {
|
||||
if (!this.username || !this.password) {
|
||||
if (!this.password) {
|
||||
message.info(
|
||||
"Please enter your account number or password"
|
||||
);
|
||||
@@ -456,7 +468,8 @@ export default defineComponent({
|
||||
}
|
||||
let data = {
|
||||
password: md5(this.password + "abc"),
|
||||
userName: this.username,
|
||||
userName: 'a',
|
||||
// userName: this.username,
|
||||
email: this.email,
|
||||
operationType: "LOGIN",
|
||||
ip: "",
|
||||
@@ -503,54 +516,79 @@ export default defineComponent({
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
if (rv.systemUser == 4) {
|
||||
rv.systemUser = 1;
|
||||
}
|
||||
this.createTimer();
|
||||
let isTest = rv.systemUser == 3 ? true : false;
|
||||
let isBeginner = rv.isBeginner == 1 ? true : false;
|
||||
let token = rv.token;
|
||||
setCookie("isMurmur", false);
|
||||
setCookie("token", token);
|
||||
setCookie("isTest", isTest);
|
||||
setCookie("isBeginner", isBeginner);
|
||||
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
|
||||
setCookie("userInfo", JSON.stringify(rv));
|
||||
this.store.commit("setSystemUser", rv.systemUser);
|
||||
let obj: any = {
|
||||
avatar: rv.avatar,
|
||||
followeeCount: rv.followeeCount,
|
||||
followerCount: rv.followerCount,
|
||||
};
|
||||
|
||||
this.store.commit("setUserInfo", obj);
|
||||
if (rv.systemUser == 0) {
|
||||
this.turnToHomePage("/Square");
|
||||
} else {
|
||||
if (window.innerWidth < 768) {
|
||||
message.info(
|
||||
"If you need to design, please log in using an iPad or computer."
|
||||
);
|
||||
this.turnToHomePage("/Square");
|
||||
} else {
|
||||
this.turnToHomePage("/home");
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem(
|
||||
"isTimeOne",
|
||||
JSON.stringify(false)
|
||||
); //是否需要公告 提示 弹窗
|
||||
let randomNum: any =
|
||||
Math.floor(Math.random() * 9000000000000000) +
|
||||
1000000000000000;
|
||||
sessionStorage.setItem("sessionId", randomNum);
|
||||
sessionStorage.setItem("record", JSON.stringify([]));
|
||||
}
|
||||
this.setSuccessLogin(rv)
|
||||
})
|
||||
.catch((res) => {});
|
||||
},
|
||||
//微信登录
|
||||
wechatLogin(value:any) {
|
||||
let data = {
|
||||
code : value.code
|
||||
}
|
||||
this.loadingShow = true
|
||||
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
|
||||
.then((rv: any) => {
|
||||
this.loadingShow = false
|
||||
this.setSuccessLogin(rv)
|
||||
})
|
||||
.catch((res) => {this.loadingShow = false});
|
||||
},
|
||||
//谷歌登录
|
||||
googelLogin(value:any) {
|
||||
let data = {credential : value}
|
||||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
|
||||
.then((rv: any) => {
|
||||
this.setSuccessLogin(rv)
|
||||
})
|
||||
.catch((res) => {});
|
||||
},
|
||||
//登陆成功设置参数
|
||||
setSuccessLogin(rv:any){
|
||||
if (rv) {
|
||||
if (rv.systemUser == 4) {
|
||||
rv.systemUser = 1;
|
||||
}
|
||||
this.createTimer();
|
||||
let isTest = rv.systemUser == 3 ? true : false;
|
||||
let isBeginner = rv.isBeginner == 1 ? true : false;
|
||||
let token = rv.token;
|
||||
setCookie("isMurmur", false);
|
||||
setCookie("token", token);
|
||||
setCookie("isTest", isTest);
|
||||
setCookie("isBeginner", isBeginner);
|
||||
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
|
||||
setCookie("userInfo", JSON.stringify(rv));
|
||||
this.store.commit("setSystemUser", rv.systemUser);
|
||||
let obj: any = {
|
||||
avatar: rv.avatar,
|
||||
followeeCount: rv.followeeCount,
|
||||
followerCount: rv.followerCount,
|
||||
};
|
||||
|
||||
this.store.commit("setUserInfo", obj);
|
||||
if (rv.systemUser == 0) {
|
||||
this.turnToHomePage("/Square");
|
||||
} else {
|
||||
if (window.innerWidth < 768) {
|
||||
message.info(
|
||||
"If you need to design, please log in using an iPad or computer."
|
||||
);
|
||||
this.turnToHomePage("/Square");
|
||||
} else {
|
||||
this.turnToHomePage("/home");
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem(
|
||||
"isTimeOne",
|
||||
JSON.stringify(false)
|
||||
); //是否需要公告 提示 弹窗
|
||||
let randomNum: any =
|
||||
Math.floor(Math.random() * 9000000000000000) +
|
||||
1000000000000000;
|
||||
sessionStorage.setItem("sessionId", randomNum);
|
||||
sessionStorage.setItem("record", JSON.stringify([]));
|
||||
}
|
||||
},
|
||||
//修改密码提交
|
||||
submitResetPassword() {
|
||||
let data = {
|
||||
@@ -610,10 +648,13 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
},
|
||||
turnToWindow(url: any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const data = this.$route.query
|
||||
if(data?.state == 'weiXin'){
|
||||
this.wechatLogin(data)
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@@ -631,17 +672,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.login_content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// width: 60rem;
|
||||
width: 150rem;
|
||||
background: #ffffff;
|
||||
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||
border-radius: 1rem;
|
||||
padding: 3rem 6rem 6.5rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -649,16 +682,15 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
}
|
||||
.login_content_left {
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
padding: 0 20rem;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
.login_form_email {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
transform: scale(0);
|
||||
transition: 0.3s all;
|
||||
@@ -677,9 +709,12 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.login_content_right {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.login_type_list {
|
||||
@@ -758,7 +793,10 @@ export default defineComponent({
|
||||
font-size: 1.4rem;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
transition: all .3s;
|
||||
&:hover{
|
||||
border: 0.1rem solid #000;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #a5b0c2;
|
||||
}
|
||||
@@ -809,6 +847,10 @@ export default defineComponent({
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
&:hover{
|
||||
background: #3C3C3C;
|
||||
}
|
||||
&[state="2"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -955,7 +997,10 @@ export default defineComponent({
|
||||
}
|
||||
.thirdPartyLogin{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
>div{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
.tip_content {
|
||||
font-size: 1.3rem;
|
||||
|
||||
@@ -84,7 +84,7 @@ export default defineComponent({
|
||||
.paySucceed_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
padding: 0 6rem;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
|
||||
@@ -383,7 +383,7 @@ export default defineComponent({
|
||||
.trial_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
padding: 0 6rem;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user