|
@@ -1,9 +1,45 @@
|
|
<template>
|
|
<template>
|
|
<div class="login-container">
|
|
<div class="login-container">
|
|
- <page-head @changeMenu="toOtherPage" @btnClick="loginClick" />
|
|
|
|
|
|
+ <div class="login-nav">
|
|
|
|
+ <div class="logo-cont" @click="clickLogo">
|
|
|
|
+ <svg-icon icon-class="logo" style="width: 136px; height: 42px;" />
|
|
|
|
+ </div>
|
|
|
|
+ <template v-if="!isMobileTerminal">
|
|
|
|
+ <div class="nav-desc">
|
|
|
|
+ <div v-for="item in bannerList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div v-if="isMobileTerminal" class="mobile-btn">
|
|
|
|
+ <img
|
|
|
|
+ v-if="!showCloseIcon"
|
|
|
|
+ src="@/assets/login/mobile_1.png"
|
|
|
|
+ :style="iconAnimate1"
|
|
|
|
+ @click="mobileIconClick"
|
|
|
|
+ >
|
|
|
|
+ <img
|
|
|
|
+ v-if="showCloseIcon"
|
|
|
|
+ src="@/assets/login/mobile_2.png"
|
|
|
|
+ :style="iconAnimate2"
|
|
|
|
+ @click="mobileIconClick"
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="!isMobileTerminal && $route.path !== '/login/register'">
|
|
|
|
+ <el-button type="primary" round @click="loginClick('login')">登 录</el-button>
|
|
|
|
+ <el-button type="text" @click="loginClick('register')">注册</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<div v-if="showBackToTop && !isMobileTerminal" class="back-to-top" @click="backTotop">
|
|
<div v-if="showBackToTop && !isMobileTerminal" class="back-to-top" @click="backTotop">
|
|
<i class="el-icon-top" />
|
|
<i class="el-icon-top" />
|
|
</div>
|
|
</div>
|
|
|
|
+ <template v-if="isMobileTerminal">
|
|
|
|
+ <div v-if="showCloseIcon" class="nav-desc-mobile">
|
|
|
|
+ <div v-for="item in bannerMobileList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
<router-view :key="key" />
|
|
<router-view :key="key" />
|
|
<div v-if="loginStatus" class="login-modal" />
|
|
<div v-if="loginStatus" class="login-modal" />
|
|
<transition mode="out-in">
|
|
<transition mode="out-in">
|
|
@@ -95,8 +131,7 @@ export default {
|
|
RegisterProtocal: () => import('./components/RegisterProtocal'),
|
|
RegisterProtocal: () => import('./components/RegisterProtocal'),
|
|
PrivacyProtocal: () => import('./components/PrivacyProtocal'),
|
|
PrivacyProtocal: () => import('./components/PrivacyProtocal'),
|
|
HomeBottom: () => import('./components/HomeBottom'),
|
|
HomeBottom: () => import('./components/HomeBottom'),
|
|
- ChangePassword: () => import('./components/ChangePassword'),
|
|
|
|
- PageHead: () => import('./component/pageHead.vue')
|
|
|
|
|
|
+ ChangePassword: () => import('./components/ChangePassword')
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -105,7 +140,7 @@ export default {
|
|
protocolStatus: '',
|
|
protocolStatus: '',
|
|
bannerList: [
|
|
bannerList: [
|
|
{
|
|
{
|
|
- name: '跨境通',
|
|
|
|
|
|
+ name: '首页',
|
|
isActice: true,
|
|
isActice: true,
|
|
order: 0,
|
|
order: 0,
|
|
path: '/login/tradeSinceLink'
|
|
path: '/login/tradeSinceLink'
|
|
@@ -117,15 +152,21 @@ export default {
|
|
path: '/login/qualificationsHonors'
|
|
path: '/login/qualificationsHonors'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: '关于我们',
|
|
|
|
|
|
+ name: '外贸工具',
|
|
isActice: false,
|
|
isActice: false,
|
|
order: 2,
|
|
order: 2,
|
|
|
|
+ path: '/login/tradeTool'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '关于我们',
|
|
|
|
+ isActice: false,
|
|
|
|
+ order: 3,
|
|
path: '/login/aboutUs'
|
|
path: '/login/aboutUs'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '联系我们',
|
|
name: '联系我们',
|
|
isActice: false,
|
|
isActice: false,
|
|
- order: 3,
|
|
|
|
|
|
+ order: 4,
|
|
path: '/login/contactUs'
|
|
path: '/login/contactUs'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
@@ -143,21 +184,27 @@ export default {
|
|
path: '/login/qualificationsHonors'
|
|
path: '/login/qualificationsHonors'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: '关于我们',
|
|
|
|
|
|
+ name: '外贸工具',
|
|
isActice: false,
|
|
isActice: false,
|
|
order: 2,
|
|
order: 2,
|
|
|
|
+ path: '/login/tradeTool'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '关于我们',
|
|
|
|
+ isActice: false,
|
|
|
|
+ order: 3,
|
|
path: '/login/aboutUs'
|
|
path: '/login/aboutUs'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '联系我们',
|
|
name: '联系我们',
|
|
isActice: false,
|
|
isActice: false,
|
|
- order: 3,
|
|
|
|
|
|
+ order: 4,
|
|
path: '/login/contactUs'
|
|
path: '/login/contactUs'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '立即注册',
|
|
name: '立即注册',
|
|
isActice: false,
|
|
isActice: false,
|
|
- order: 4,
|
|
|
|
|
|
+ order: 5,
|
|
path: '/login/register'
|
|
path: '/login/register'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
@@ -167,7 +214,7 @@ export default {
|
|
iconAnimate1: {},
|
|
iconAnimate1: {},
|
|
iconAnimate2: {},
|
|
iconAnimate2: {},
|
|
homepagePath: '/login/tradeSinceLink',
|
|
homepagePath: '/login/tradeSinceLink',
|
|
- notHomepagePath: ['/login/qualificationsHonors', '/login/aboutUs', '/login/contactUs']
|
|
|
|
|
|
+ notHomepagePath: ['/login/qualificationsHonors', '/login/tradeTool', '/login/aboutUs', '/login/contactUs']
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -177,7 +224,8 @@ export default {
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
$route: {
|
|
$route: {
|
|
- handler(val) {
|
|
|
|
|
|
+ handler(val, v) {
|
|
|
|
+ console.log(val, v)
|
|
let findIdx = -1
|
|
let findIdx = -1
|
|
this.isMobile()
|
|
this.isMobile()
|
|
if (this.isMobileTerminal) {
|
|
if (this.isMobileTerminal) {
|
|
@@ -212,13 +260,6 @@ export default {
|
|
window.removeEventListener('resize', this.isMobile)
|
|
window.removeEventListener('resize', this.isMobile)
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- toOtherPage(val) {
|
|
|
|
- console.log(val, 'val')
|
|
|
|
- },
|
|
|
|
- loginClick(type) {
|
|
|
|
- this.loginStatus = true
|
|
|
|
- this.loginType = type
|
|
|
|
- },
|
|
|
|
preventDefault(e) {
|
|
preventDefault(e) {
|
|
e.preventDefault()
|
|
e.preventDefault()
|
|
},
|
|
},
|
|
@@ -240,6 +281,10 @@ export default {
|
|
mobileIconClick() {
|
|
mobileIconClick() {
|
|
this.showCloseIcon = !this.showCloseIcon
|
|
this.showCloseIcon = !this.showCloseIcon
|
|
},
|
|
},
|
|
|
|
+ loginClick(type) {
|
|
|
|
+ this.loginStatus = true
|
|
|
|
+ this.loginType = type
|
|
|
|
+ },
|
|
protocol(type) {
|
|
protocol(type) {
|
|
this.protocolStatus = type
|
|
this.protocolStatus = type
|
|
},
|
|
},
|
|
@@ -260,6 +305,7 @@ export default {
|
|
element.isActice = false
|
|
element.isActice = false
|
|
})
|
|
})
|
|
this.bannerList[idx].isActice = true
|
|
this.bannerList[idx].isActice = true
|
|
|
|
+ console.log(this.bannerList[idx].path, 'click')
|
|
this.$router.push({
|
|
this.$router.push({
|
|
path: this.bannerList[idx].path
|
|
path: this.bannerList[idx].path
|
|
})
|
|
})
|
|
@@ -303,6 +349,11 @@ export default {
|
|
.login-nav {
|
|
.login-nav {
|
|
padding: 0 !important;
|
|
padding: 0 !important;
|
|
justify-content: center !important;
|
|
justify-content: center !important;
|
|
|
|
+ .nav-desc {
|
|
|
|
+ flex: initial !important;
|
|
|
|
+ width: 44% !important;
|
|
|
|
+ padding-left: 6% !important;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -312,6 +363,11 @@ export default {
|
|
.login-nav {
|
|
.login-nav {
|
|
padding: 0 !important;
|
|
padding: 0 !important;
|
|
justify-content: center !important;
|
|
justify-content: center !important;
|
|
|
|
+ .nav-desc {
|
|
|
|
+ flex: initial !important;
|
|
|
|
+ width: 62% !important;
|
|
|
|
+ padding-left: 6% !important;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -377,6 +433,22 @@ export default {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
+ .logo-cont {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ .nav-desc {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #E6E6E6;
|
|
|
|
+ padding-left: 8%;
|
|
|
|
+ div {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin-right: 8%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.nav-btn {
|
|
.nav-btn {
|
|
flex-basis: 100px;
|
|
flex-basis: 100px;
|
|
}
|
|
}
|
|
@@ -529,6 +601,19 @@ export default {
|
|
align-items: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
+ .nav-desc {
|
|
|
|
+ flex: initial;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #E6E6E6;
|
|
|
|
+ padding-left: 8%;
|
|
|
|
+ div {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin-right: 8%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.nav-desc-mobile {
|
|
.nav-desc-mobile {
|
|
position: fixed;
|
|
position: fixed;
|
|
top: 60px;
|
|
top: 60px;
|