hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-10 19:36:43 +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

75
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="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' ? 'current-nav' : ''">
</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' : ''">
</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">问答
</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>
</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="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' ? 'current-nav' : ''"><router-link to="/follow">我的关注
</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>
</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%;

2
src/views/Index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="course-banner">
<portal-header current="index" style="z-index:999; position: relative;"></portal-header>
<portal-header current="index" textColor="#000000" style="z-index:999; position: relative;"></portal-header>
<div id="container" style="z-index:99;">
<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
<swiper-slide style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">

2
src/views/portal/case/Detail.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="case-list-content">
<div class="case-banner">
<portal-header current="case" :goSearch="2"></portal-header>
<portal-header current="case" textColor="#fff" :goSearch="2"></portal-header>
</div>
<div class="">
<div class="xcontent2">

2
src/views/portal/case/Index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="case-list-content">
<div class="case-banner">
<portal-header current="case" @emitInput="emitInput"></portal-header>
<portal-header current="case" textColor="#fff" @emitInput="emitInput"></portal-header>
</div>
<div class="xcontent2">
<div class="xcontent2-main" style="margin-right: 30px;">

1401
src/views/portal/course/Index(1).vue
View File

File diff suppressed because it is too large Load Diff

2
src/views/portal/course/Index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="couser-list-content" class="couser-list-content">
<div class="course-banner">
<portal-header current="course" @emitInput="emitInput"></portal-header>
<portal-header current="course" textColor="#fff" @emitInput="emitInput"></portal-header>
</div>
<div style="padding-top:30px" class="">
<div class="xcontent2">

13
src/views/portal/follow/index.vue
View File

@@ -1,6 +1,8 @@
<template>
<div class="follow-page">
<top></top>
<div class="follow-banner">
<portal-header current="follow" textColor="#fff" @emitInput="emitInput"></portal-header>
</div>
<div>
<div class="home-page-left">
<div class="book-input">
@@ -54,7 +56,7 @@
</template>
<script>
import top from '../../../layout/components/TopNav/Index.vue'
import portalHeader from "@/components/PortalHeader.vue";
import UcHeader from '@/components/HomePage/homePage.vue'
import CaseList from '@/components/HomePage/caseList.vue'
import CourseList from '@/components/HomePage/courseList.vue'
@@ -66,7 +68,7 @@
import BookList from "@/components/HomePage/bookList.vue"
export default{
components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
components:{portalHeader,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
data(){
return{
input:'',
@@ -82,9 +84,11 @@
</script>
<style lang="scss" scoped>
.follow-banner{
background-color: #0078FC;
}
.follow-page{
background: #FFFFFF;
padding-top: 72px;
height: 100vh;
::v-deep .el-tabs__active-bar{
height: 4px;
@@ -221,4 +225,3 @@
// }
}
</style>