hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-12 04:16:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改页面头部文字及选中状态的色调变化 ，logo变化 等

Browse Source
This commit is contained in:
daihh
2022-10-08 19:55:39 +08:00
parent c23e0c838d
commit 9547d07244
7 changed files with 79 additions and 1436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/PortalHeader.vue
View File

@@ -3,26 +3,30 @@
<div class="portal-top" :style="{color:textColor}">
<div class="portal-top-left">
<div class="portal-top-logo">
<img src="../assets/logo/logo.png" v-if="current == 'qa'" style="width:160px;height: 27px;" />
<img src="../assets/logo/logo2.png" v-else style="width:160px;height: 27px;" />
<img src="../assets/logo/logo-white.png" v-if="textColor == '#fff' || textColor == '#ffffff'" style="width:160px;height: 27px;" />
<img src="../assets/logo/logo.png" v-else style="width:160px;height: 27px;" />
</div>
<div class="portal-top-nav">
<div class="top-nav" :class="current == 'index' ? 'current-nav' : ''">
<router-link to="/index" :style="{color:textColor}">首页
<div :class="current == 'index' ? 'nav-bottbor' : ''"></div>
</router-link></div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'course' ? 'current-nav' : ''">
<div class="top-nav" :style="{color:textColor}" :class="current == 'index' ? activeNav : ''">
<router-link to="/index" >首页
<div :class="current == 'index' ? 'nav-bottbor' : ''"></div>
</router-link>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'course' ? activeNav : ''">
<router-link to="/course">课程
<div :class="current == 'course' ? 'nav-bottbor' : ''"></div>
</router-link></div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'article' ? 'current-nav' : ''">
<div :class="current == 'course' ? 'nav-bottbor' : ''"></div>
</router-link>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'article' ? activeNav : ''">
<router-link to="/article">文章
<div :class="current == 'article' ? 'nav-bottbor' : ''"></div>
</router-link></div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'qa' ? 'current-nav' : ''">
<router-link to="/qa">问答
<div :class="current == 'qa' ? 'nav-bottbor' : ''"></div>
</router-link></div>
<div :class="current == 'article' ? 'nav-bottbor' : ''"></div>
</router-link>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'qa' ? activeNav : ''">
<router-link to="/qa" >问答
<div :class="current == 'qa' ? 'nav-bottbor' : ''"></div>
</router-link>
</div>
<div class="top-nav">
<el-dropdown placement="bottom" @command="handleCommand">
<span class="el-dropdown-link" style="font-size:16px;cursor: pointer;" :style="{color:textColor}">专区</span>
@@ -35,12 +39,16 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'case' ? 'current-nav' : ''"><router-link to="/case">推荐案例
<div :class="current == 'case' ? 'nav-bottbor' : ''"></div>
</router-link></div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'follow' ? 'current-nav' : ''"><router-link to="/follow">我的关注
<div :class="current == 'follow' ? 'nav-bottbor' : ''"></div>
</router-link></div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'case' ? activeNav : ''">
<router-link to="/case">推荐案例
<div :class="current == 'case' ? 'nav-bottbor' : ''"></div>
</router-link>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'follow' ? activeNav : ''">
<router-link to="/follow">我的关注
<div :class="current == 'follow' ? 'nav-bottbor' : ''"></div>
</router-link>
</div>
</div>
</div>
<div class="portal-top-right">
@@ -75,7 +83,7 @@
<div class="person-action-item">
<el-dropdown class="person-action-index">
<span class="el-dropdown-link">
<span>学员</span>
<span :style="{color:textColor}">学员</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
@@ -153,6 +161,12 @@ export default {
avatarText(){
return userAvatarText(this.userInfo.name);
},
activeNav(){
return {
'top-nav-active-blue': this.textColor=='#000000',
'top-nav-active-white': this.textColor=='#fff' || this.textColor=='#ffffff',
}
}
},
data() {
@@ -292,6 +306,33 @@ export default {
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-nav-active-blue{
color: #387DF7;
a{color:#387DF7;}
div{
width: 75%;
height: 4px;
top: 75%;
left: 13%;
background: #387DF7;
border-radius: 5px;
position: absolute;
}
}
.top-nav-active-white{
color: #fff;
a{color:#fff;}
div{
width: 75%;
height: 4px;
top: 75%;
left: 13%;
background: #fff;
border-radius: 5px;
position: absolute;
}
}
.sear-but{
position: absolute;
bottom: 10%;