|
|
|
|
@ -1,114 +1,66 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="header"> |
|
|
|
|
<a class="logo" |
|
|
|
|
@click="toIndex"> |
|
|
|
|
<a class="logo" @click="toIndex"> |
|
|
|
|
<template v-if="isIndex"> |
|
|
|
|
<img v-if="isZj" |
|
|
|
|
src="/images/4.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="isSq" |
|
|
|
|
style="max-height: 100%" |
|
|
|
|
src="/images/1.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="!isZxy" |
|
|
|
|
src="@/assets/img/logo.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else |
|
|
|
|
src="@/assets/img/zxy/logo.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-if="isZj" src="/images/4.png" alt=""> |
|
|
|
|
<img v-else-if="isSq" style="max-height: 100%" src="/images/1.png" alt=""> |
|
|
|
|
<img v-else-if="!isZxy" src="@/assets/img/logo.png" alt=""> |
|
|
|
|
<img v-else src="@/assets/img/zxy/logo.png" alt=""> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<img v-if="isZj" |
|
|
|
|
src="/images/4.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="isSq" |
|
|
|
|
style="max-height: 100%" |
|
|
|
|
src="/images/1.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else |
|
|
|
|
:style="{maxWidth: title ? '200px' : '300px'}" |
|
|
|
|
:src="logoUrl" |
|
|
|
|
height="50" /> |
|
|
|
|
<span class="title">{{title}}</span> |
|
|
|
|
<img v-if="isZj" src="/images/4.png" alt=""> |
|
|
|
|
<img v-else-if="isSq" style="max-height: 100%" src="/images/1.png" alt=""> |
|
|
|
|
<img v-else :style="{ maxWidth: title ? '200px' : '300px' }" :src="logoUrl" height="50" /> |
|
|
|
|
<span class="title">{{ title }}</span> |
|
|
|
|
</template> |
|
|
|
|
</a> |
|
|
|
|
<el-radio-group v-if="isDev && !$store.state.layout.isMobile" |
|
|
|
|
class="ip" |
|
|
|
|
v-model="ip" |
|
|
|
|
@change="ipChange"> |
|
|
|
|
<el-radio-group v-if="isDev && !$store.state.layout.isMobile" class="ip" v-model="ip" @change="ipChange"> |
|
|
|
|
<el-radio :label="0">刘榕ip</el-radio> |
|
|
|
|
<el-radio :label="1">陈赓ip</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
<!-- pc端 --> |
|
|
|
|
<div v-if="!$store.state.layout.isMobile" |
|
|
|
|
class="inner"> |
|
|
|
|
<navbar class="nav-wrap" |
|
|
|
|
ref="nav"></navbar> |
|
|
|
|
<div v-if="!$store.state.layout.isMobile" class="inner"> |
|
|
|
|
<navbar class="nav-wrap" ref="nav"></navbar> |
|
|
|
|
|
|
|
|
|
<div class="right"> |
|
|
|
|
<template v-if="token || serverToken"> |
|
|
|
|
<el-popover v-if="!isIndex" |
|
|
|
|
placement="top" |
|
|
|
|
:disabled="!notices.length"> |
|
|
|
|
<p v-for="(item, i) in notices" |
|
|
|
|
:key="i" |
|
|
|
|
class="p-v-5 cursor-pointer" |
|
|
|
|
@click="toComment(item)">{{ item.commentUsername }} 回复了你的评论</p> |
|
|
|
|
<el-badge class="msg" |
|
|
|
|
:is-dot="!!notices.length" |
|
|
|
|
slot="reference">消息</el-badge> |
|
|
|
|
<el-popover v-if="!isIndex" placement="top" :disabled="!notices.length"> |
|
|
|
|
<p v-for="(item, i) in notices" :key="i" class="p-v-5 cursor-pointer" @click="toComment(item)">{{ |
|
|
|
|
item.commentUsername }} 回复了你的评论</p> |
|
|
|
|
<el-badge class="msg" :is-dot="!!notices.length" slot="reference">消息</el-badge> |
|
|
|
|
</el-popover> |
|
|
|
|
<div class="user-wrap"> |
|
|
|
|
<el-dropdown size="medium" |
|
|
|
|
@command="menuChange"> |
|
|
|
|
<el-dropdown size="medium" @command="menuChange"> |
|
|
|
|
<div class="user"> |
|
|
|
|
<el-avatar :size="35" |
|
|
|
|
:src="avatar"></el-avatar> |
|
|
|
|
<el-avatar :size="35" :src="avatar"></el-avatar> |
|
|
|
|
<span class="username">{{ customerName || cName || userName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
|
<el-dropdown-item v-if="isIndex" |
|
|
|
|
command="index">前往{{ serverToken ? '教学' : '学习' }}</el-dropdown-item> |
|
|
|
|
<el-dropdown-item v-if="!customerName && !serverToken" |
|
|
|
|
command="info">个人中心</el-dropdown-item> |
|
|
|
|
<el-dropdown-item v-if="isIndex" command="index">前往{{ serverToken ? '教学' : '学习' }}</el-dropdown-item> |
|
|
|
|
<el-dropdown-item v-if="!customerName && !serverToken" command="info">个人中心</el-dropdown-item> |
|
|
|
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</el-dropdown> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<el-button v-if="isZxy" |
|
|
|
|
class="rounded" |
|
|
|
|
type="primary" |
|
|
|
|
@click="toNew('/login')">登录</el-button> |
|
|
|
|
<div v-else |
|
|
|
|
class="login" |
|
|
|
|
@click="toNew('/login')"> |
|
|
|
|
<img src="@/assets/img/user.png" |
|
|
|
|
alt=""> |
|
|
|
|
<el-button v-if="isZxy" class="rounded" type="primary" @click="toNew('/login')">登录</el-button> |
|
|
|
|
<div v-else class="login" @click="toNew('/login')"> |
|
|
|
|
<img src="@/assets/img/user.png" alt=""> |
|
|
|
|
<span>登录</span> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<el-button v-if="isZxy && isIndex" |
|
|
|
|
class="rounded trial" |
|
|
|
|
type="primary" |
|
|
|
|
plain |
|
|
|
|
@click="toTrial">免费试用</el-button> |
|
|
|
|
<el-button v-if="isZxy && isIndex" class="rounded trial" type="primary" plain @click="toTrial">免费试用</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 移动端 --> |
|
|
|
|
<div v-else |
|
|
|
|
class="mobile-inner"> |
|
|
|
|
<i class="login el-icon-user-solid" |
|
|
|
|
@click="toLogin"></i> |
|
|
|
|
<i class="menu-icon" |
|
|
|
|
:class="mobileMenuStatus ? 'el-icon-s-fold': 'el-icon-s-unfold' " |
|
|
|
|
<div v-else class="mobile-inner"> |
|
|
|
|
<i class="login el-icon-user-solid" @click="toLogin"></i> |
|
|
|
|
<i class="menu-icon" :class="mobileMenuStatus ? 'el-icon-s-fold' : 'el-icon-s-unfold'" |
|
|
|
|
@click.stop="toggleMobileMenu"></i> |
|
|
|
|
<navbar v-show="mobileMenuStatus" |
|
|
|
|
class="mobile-menu" |
|
|
|
|
:isHome.sync="isHome" |
|
|
|
|
<navbar v-show="mobileMenuStatus" class="mobile-menu" :isHome.sync="isHome" |
|
|
|
|
@toggleMobileMenu="toggleMobileMenu" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -316,6 +268,7 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
$height: 64px; |
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
z-index: 10; |
|
|
|
|
position: fixed; |
|
|
|
|
@ -325,6 +278,7 @@ $height: 64px; |
|
|
|
|
height: $height; |
|
|
|
|
background-color: #fff; |
|
|
|
|
box-shadow: 0px 0px 6px 0px rgba(178, 178, 178, 0.32); |
|
|
|
|
|
|
|
|
|
.inner { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
@ -333,6 +287,7 @@ $height: 64px; |
|
|
|
|
padding: 0 80px 0 10px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.logo { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
@ -343,28 +298,35 @@ $height: 64px; |
|
|
|
|
color: #568df2; |
|
|
|
|
height: $height; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
max-width: 300px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 18px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nav-wrap { |
|
|
|
|
height: 64px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.login { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
color: #666; |
|
|
|
|
@ -372,40 +334,49 @@ $height: 64px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.msg { |
|
|
|
|
margin-right: 30px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.user-wrap { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.user { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-divider--vertical { |
|
|
|
|
width: 2px; |
|
|
|
|
height: 15px; |
|
|
|
|
margin-left: 15px; |
|
|
|
|
background-color: #d8d8d8; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.username { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.logout { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #666; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rounded { |
|
|
|
|
border-radius: 6px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.trial { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background-color: #48cafd; |
|
|
|
|
border-color: #48cafd; |
|
|
|
|
@ -420,11 +391,13 @@ $height: 64px; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 100%; |
|
|
|
|
height: $height; |
|
|
|
|
|
|
|
|
|
.login { |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #c1c1c1; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.menu-icon { |
|
|
|
|
margin: 0 20px 0 10px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
@ -433,6 +406,7 @@ $height: 64px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
|
|
z-index: 9999; |
|
|
|
|
position: absolute; |
|
|
|
|
@ -443,16 +417,19 @@ $height: 64px; |
|
|
|
|
max-height: 300px; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: 1870px) { |
|
|
|
|
.header { |
|
|
|
|
.logo { |
|
|
|
|
left: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.inner { |
|
|
|
|
padding-right: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: 1550px) { |
|
|
|
|
.header { |
|
|
|
|
.logo { |
|
|
|
|
@ -462,6 +439,7 @@ $height: 64px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ip { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 25px; |
|
|
|
|
|
