346 lines
8.5 KiB
Vue
346 lines
8.5 KiB
Vue
<template>
|
|
<div class="layout">
|
|
<div class="header">
|
|
<div class="menu_wrapper">
|
|
<img @click="$router.push('/home')" src="@/static/images/zzlogo2.png" alt="" v-if="$i18n.locale === 'zh'" />
|
|
<img @click="$router.push('/home')" src="@/static/images/zzlogo4.png" alt="" v-else />
|
|
<el-menu mode="horizontal" background-color="#fff" :default-active="active.toString()" text-color="#333"
|
|
@select="selectTab" active-text-color="#428bca">
|
|
<template>
|
|
<el-menu-item key="0" index="0">{{ $t('home.menuName') }}</el-menu-item>
|
|
<el-submenu key="1" index="1" @click.native="selectTab('1')">
|
|
<template slot="title">
|
|
{{ $t('service.menuName') }}
|
|
</template>
|
|
<el-menu-item key="1-1" index="1-1">{{ $t('service.subMenu1') }}</el-menu-item>
|
|
<el-menu-item key="1-2" index="1-2">{{ $t('service.subMenu2') }}</el-menu-item>
|
|
</el-submenu>
|
|
<el-menu-item key="2" index="2">{{ $t('about.menuName') }}</el-menu-item>
|
|
<el-menu-item key="3" index="3">{{ $t('media.menuName') }}</el-menu-item>
|
|
<el-menu-item key="4" index="4">{{ $t('book.menuName') }}</el-menu-item>
|
|
<el-menu-item key="5" index="5">{{ $t('login.menuName') }}</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<keep-alive v-if="$route.meta.keepAlive">
|
|
<router-view :key="$route.path + new Date().getTime()"></router-view>
|
|
</keep-alive>
|
|
<router-view :key="$route.path + new Date().getTime()" v-if="!$route.meta.keepAlive"></router-view>
|
|
</div>
|
|
<div class="bottom" style="text-align: center">
|
|
<!-- <a
|
|
target="_blank"
|
|
style="
|
|
color: #fff;
|
|
line-height: 32px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
"
|
|
>© {{ new Date().getFullYear() }} Elevate Imaging Inc. info@elevateimaging.ai</a
|
|
> -->
|
|
<div class="copyright cf">
|
|
<p class="left">
|
|
<a class="text-color" href="https://beian.miit.gov.cn" target="_blank">Copyright © {{ new Date().getFullYear()
|
|
}}
|
|
上海展影医疗科技有限公司 版权所有 |
|
|
沪ICP备2021037850-2</a>
|
|
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002005859"
|
|
style="margin-left:20px;">
|
|
<img src="@/static/images/ba.png" style="vertical-align: middle;">
|
|
<span style="margin: 0px 0px 0px 3px; vertical-align: middle;">沪公网安备 31011002005859号</span></a>
|
|
</p>
|
|
<!-- <a href="javascript:;" class="backTop tre"><i class="fa fa-angle-up"></i></a> -->
|
|
<div class="shares cf">
|
|
<a href="http://weibo.com/u/5834449233?is_all=1" class="a1" target="_blank"><img
|
|
src="@/static/images/weibo.png" alt=""></a>
|
|
<a href="javascript:;" class="a2">
|
|
<img src="@/static/images/wechat.png" alt="">
|
|
<img src="@/static/images/wxqr.jpg" style="width:128px;height:128px;" class="qrCode">
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
menuList: [
|
|
'Home',
|
|
'Services',
|
|
'About',
|
|
'Media',
|
|
'Book'
|
|
],
|
|
routerList: [
|
|
'home',
|
|
'services',
|
|
'about',
|
|
'media',
|
|
'book'
|
|
],
|
|
active: '0'
|
|
}
|
|
},
|
|
watch: {
|
|
$route (v) {
|
|
this.changeTab()
|
|
}
|
|
},
|
|
methods: {
|
|
changeTab () {
|
|
if (this.menuList.findIndex((v) => v === this.$route.name) === -1) {
|
|
if (this.$route.name === 'Center Imaging Services') {
|
|
this.active = '1'
|
|
}
|
|
if (this.$route.name === '3D Post Processing Services') {
|
|
this.active = '1'
|
|
}
|
|
} else {
|
|
this.active = this.menuList.findIndex((v) => v === this.$route.name)
|
|
}
|
|
},
|
|
selectTab (v, title) {
|
|
console.log('selectTab')
|
|
if (v === '5') {
|
|
window.open('https://irc.extimaging.com')
|
|
this.changeTab()
|
|
} else {
|
|
if (v.indexOf('-') > -1) {
|
|
switch (v) {
|
|
case '1':
|
|
this.$router.push({ path: '/services' })
|
|
break
|
|
case '1-1':
|
|
this.$router.push({ path: '/services/centralizedImagingServices' })
|
|
break
|
|
case '1-2':
|
|
this.$router.push({ path: '/services/3DPostProcessingServices' })
|
|
break
|
|
}
|
|
} else {
|
|
this.$router.push(`/${this.routerList[v]}`)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.menuList.findIndex((v) => v === this.$route.name) === -1) {
|
|
if (this.$route.name === 'Center Imaging Services') {
|
|
this.active = '1'
|
|
}
|
|
if (this.$route.name === '3D Post Processing Services') {
|
|
this.active = '1'
|
|
}
|
|
} else {
|
|
this.active = this.menuList.findIndex((v) => v === this.$route.name)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.layout .el-menu--horizontal>.el-submenu .el-submenu__title {
|
|
height: 90px;
|
|
line-height: 120px;
|
|
background: #fff !important;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.layout .el-menu--horizontal>.el-submenu .el-submenu__title i {
|
|
line-height: 120px;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.layout {
|
|
overflow: auto;
|
|
// user-select: none;
|
|
|
|
.header {
|
|
background: #fff;
|
|
position: relative;
|
|
|
|
p {
|
|
height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
letter-spacing: 5px;
|
|
|
|
b {
|
|
letter-spacing: 10px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
line-height: 30px;
|
|
position: relative;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
text-shadow: 0 0 1px rgba(94, 255, 216, 0.8);
|
|
margin-left: 5px;
|
|
letter-spacing: 1px;
|
|
padding: 0;
|
|
z-index: 2;
|
|
transition: all 0.5s ease-out;
|
|
|
|
b {
|
|
letter-spacing: 2px;
|
|
color: #fff;
|
|
font-size: 54px;
|
|
transition: all 0.5s ease-out;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu_wrapper {
|
|
height: 120px;
|
|
max-width: 1226px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 180px;
|
|
cursor: pointer
|
|
}
|
|
}
|
|
|
|
.el-menu {
|
|
height: 100%;
|
|
|
|
&.el-menu--horizontal {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.el-menu-item {
|
|
height: 90px;
|
|
line-height: 120px;
|
|
background: #fff !important;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
background-color: #302f6d;
|
|
|
|
div {
|
|
max-width: 1226px;
|
|
margin: 0 auto;
|
|
|
|
.el-menu.el-menu--horizontal {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.container {
|
|
text-align: left;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-height: calc(100vh - 160px);
|
|
}
|
|
|
|
.bottom {
|
|
width: 1200px;
|
|
height: 74px;
|
|
background: #d4d4d4;
|
|
margin: 30px auto 30px auto;
|
|
position: relative;
|
|
font-size: 12px !important;
|
|
|
|
.copyright {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
p {
|
|
padding-left: 30px;
|
|
color: #3e3e3f;
|
|
line-height: 74px;
|
|
}
|
|
|
|
.left {
|
|
// float: left;
|
|
font-size: 12px !important;
|
|
|
|
a {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
span {
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
|
|
.shares {
|
|
// float: right;
|
|
width: 100px;
|
|
height: 100%;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
// margin-top: 22px;
|
|
a {
|
|
display: block;
|
|
width: 34px;
|
|
height: 34px;
|
|
border: 1px solid #898d98;
|
|
border-radius: 2px;
|
|
margin-right: 15px;
|
|
// float: left;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
font-size: 17px;
|
|
color: #898d98;
|
|
text-align: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.a2 {
|
|
position: relative;
|
|
|
|
.qrCode {
|
|
display: none;
|
|
position: absolute;
|
|
right: -15px;
|
|
bottom: 35px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&:hover {
|
|
.qrCode {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|