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

src/components/PortalHeader.vue

@@ -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/logo-white.png" v-if="textColor == '#fff' || textColor == '#ffffff'" style="width:160px;height: 27px;" />
-            <img src="../assets/logo/logo2.png" v-else 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' : ''">
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'index' ? activeNav : ''">
-              <router-link to="/index" :style="{color:textColor}">首页
+              <router-link to="/index" >首页
                 <div :class="current == 'index' ? 'nav-bottbor' : ''"></div>
-            </router-link></div>
+              </router-link>
-            <div class="top-nav" :style="{color:textColor}" :class="current == 'course' ? 'current-nav' : ''">
+            </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>
+              </router-link>
-            <div class="top-nav" :style="{color:textColor}" :class="current == 'article' ? 'current-nav' : ''">
+            </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>
+              </router-link>
-            <div class="top-nav" :style="{color:textColor}" :class="current == 'qa' ? 'current-nav' : ''">
+            </div>
-              <router-link to="/qa">问答
+            <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>
+              </router-link>
-            <div class="top-nav" :style="{color:textColor}" :class="current == 'follow' ? 'current-nav' : ''"><router-link to="/follow">我的关注
+            </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%;

src/views/Index.vue

@@ -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">

src/views/portal/case/Detail.vue

@@ -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">

src/views/portal/case/Index.vue

@@ -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;">

src/views/portal/course/Index.vue

@@ -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">

src/views/portal/follow/index.vue

@@ -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>
-