修改header

src/components/Header.vue

@@ -6,62 +6,20 @@
         v-if="configInfor.logo_image_url"
         :src="configInfor.logo_image_url"
         alt=""
+        class="logo-image"
+        @click="handleSelect"
       />
       <span class="logo-img" v-else>logo</span>
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect"
-        text-color="#black"
-        active-text-color="#FF9900"
-      >
-        <el-menu-item index="1">主页</el-menu-item>
-        <el-menu-item index="2">
-          <template v-if="projectList.length > 1">
-            <el-dropdown trigger="click" @command="handleCommand">
-              <span
-                class="el-dropdown-link"
-                :style="{ color: activeIndex == 2 ? '#FF9900' : '#black' }"
-              >
-                {{ projectName }}
-                <!-- SYSTEM -->
-                <img
-                  v-if="activeIndex == 2"
-                  src="../assets/learncenter/headerDownlod.png"
-                  alt=""
-                />
-                <img
-                  v-else
-                  src="../assets/learncenter/headerDownlod2.png"
-                  alt=""
-                />
-              </span>
-              <el-dropdown-menu slot="dropdown" style="min-width: 278px">
-                <el-dropdown-item
-                  :class="i == LoginNavIndex ? 'menuActive' : ''"
-                  :command="i"
-                  :key="i"
-                  class="projectList"
-                  v-for="(item, i) in projectList"
-                >
-                  <img
-                    style="position: relative; width: 24px"
-                    :src="item.icon_url_memu_default"
-                    alt=""
-                  />
-                  <span style="margin-left: 16px">
-                    {{ item.name }}
-                  </span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-          <template v-else>{{
-            projectList.length > 0 && projectList[0].name
-          }}</template>
-        </el-menu-item>
-      </el-menu>
+      <ul class="logo-projectlist">
+        <li
+          v-for="(itemI, indexI) in projectList"
+          :key="indexI"
+          :class="indexI == LoginNavIndex ? 'active' : ''"
+          @click="handleCommand(indexI)"
+        >
+          {{ itemI.name }}
+        </li>
+      </ul>
     </div>
     <div class="userName">
       <template>
@@ -70,9 +28,9 @@
           trigger="click"
           @command="changeLang"
         >
-          <span class="el-dropdown-link" style="color: #black">
+          <span class="el-dropdown-link" style="color: #000000">
             {{ lang }}
-            <img src="../assets/learncenter/headerdown3.png" alt="" />
+            <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown" style="width: 200px">
             <el-dropdown-item
@@ -224,10 +182,7 @@ export default {
     },
     // 切换导航
     handleSelect(key, keyPath) {
-      this.activeIndex = key;
-      if (this.activeIndex == 1) {
-        window.location.href = "/";
-      }
+      window.location.href = "/";
     },
     // 切换项目
     handleCommand(command) {
@@ -351,37 +306,42 @@ export default {
   .logo {
     > img {
       // width: 188px;
-      height: 50px;
+      height: 48px;
+      cursor: pointer;
     }
     &-img {
       font-style: normal;
       font-weight: 600;
       font-size: 30px;
       font-variant: small-caps;
-      // color: #000000;
-      color: #fff;
+      color: #000000;
+      // color: #fff;
       margin-right: 29px;
       line-height: 64px;
     }
     display: flex;
     align-items: center;
-    .el-menu-demo {
-      background: rgba(0, 0, 0, 0);
-      // margin-left: 100px;
-      li:hover {
-        background: none;
-      }
+    .logo-projectlist {
+      display: flex;
+      padding: 0 24px;
+      height: 64px;
+      list-style: none;
       li {
+        padding: 0 12px;
+        color: rgba(0, 0, 0, 0.45);
         font-size: 16px;
-        background: none;
-        height: 64px;
         line-height: 64px;
+        font-weight: 500;
+        cursor: pointer;
+        &:hover {
+          background: #f6f6f6;
+        }
+        &.active {
+          color: #ff9900;
+          background: #ffefd6;
+        }
       }
     }
-    // 取消组件默认的样式
-    .el-menu.el-menu--horizontal {
-      border-bottom: none;
-    }
   }
   .el-dropdown-link {
     img {
@@ -394,7 +354,7 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    color: #000;
+    color: #000000;
     .seek {
       margin-right: 100px;
       position: relative;
@@ -450,7 +410,7 @@ export default {
       > span {
         cursor: pointer;
         font-size: 16px;
-        color: #fff;
+        color: #000000;
       }
     }
     .user {
@@ -458,13 +418,13 @@ export default {
       align-items: center;
       cursor: pointer;
       position: relative;
-      color: #fff;
+      color: #000000;
       > img {
         width: 34px;
         height: 34px;
       }
       > span {
-        color: #000;
+        color: #000000;
         font-size: 16px;
         padding-left: 10px;
       }

src/components/learnCenter/Course.vue

@@ -6,7 +6,7 @@
         <span>
           <img src="../../assets/learncenter/listTitleImg1.png" alt="" />
         </span>
-        教学
+        学习
       </div>
       <div class="more" @click="gotolist">
         <span> 查看更多 </span>

src/views/learn-center/CourseDetail.vue

@@ -1,11 +1,8 @@
 <template>
   <!-- 课程详情 -->
   <div class="CourseDetail" v-if="CourseData">
-    <div class="nav">
-      <!-- 登录导航 -->
-      <Header />
-      <div class="shade"></div>
-    </div>
+    <Header />
+
     <HeaderOne text="123" :name="CourseData.name" title="教学" />
     <div class="main" v-if="CourseData" v-loading="loading">
       <div class="bookDetail">
@@ -809,63 +806,7 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .CourseDetail {
-  // height: 100%;
-  .nav {
-    background: #ffffff;
-   
-    background-size: 100% 100%;
-    height: 64px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    position: relative;
-    .shade {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      color: #fff;
-      font-weight: bold;
-      font-size: 18px;
-      justify-content: space-around;
-      align-items: center;
-      .el-menu-demo {
-        background: rgba(0, 0, 0, 0);
-      }
-      // 取消组件默认的样式
-      .el-menu.el-menu--horizontal {
-        border-bottom: none;
-        li:hover {
-          background: none;
-        }
-        li {
-          background: none;
-        }
-      }
-      .nav_title {
-        text-align: left;
-      }
-      .seek {
-        input {
-          width: 450px;
-          height: 46px;
-          background: #979797;
-          border: none;
-          outline: none;
-          color: white;
-          font-size: 18px;
-          opacity: 0.5;
-        }
-        img {
-          position: relative;
-          right: 40px;
-          top: 8px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
+
   .main {
     min-height: 100%;
     padding-top: 52px;

src/views/learn-center/ListPage.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="teacher_edu">
     <!-- 头部导航及搜索 -->
-    <div class="nav">
-      <!-- 登录导航 -->
-      <Header />
-      <div class="shade"></div>
-    </div>
+    <Header />
+
     <div>
       <HeaderOne :title="headerOneTitle" />
     </div>
@@ -159,61 +156,6 @@ export default {
 .teacher_edu {
   min-height: 100vh;
   background: #f6f6f6;
-  .nav {
-    background: url("../../assets/learncenter/Homebg2.png") no-repeat center;
-    background-size: cover;
-    height: 64px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    position: relative;
-    .shade {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      color: #fff;
-      font-weight: bold;
-      font-size: 18px;
-      justify-content: space-around;
-      align-items: center;
-      .el-menu-demo {
-        background: rgba(0, 0, 0, 0);
-      }
-      // 取消组件默认的样式
-      .el-menu.el-menu--horizontal {
-        border-bottom: none;
-        li:hover {
-          background: none;
-        }
-        li {
-          background: none;
-        }
-      }
-      .nav_title {
-        text-align: left;
-      }
-      .seek {
-        input {
-          width: 450px;
-          height: 46px;
-          background: #979797;
-          border: none;
-          outline: none;
-          color: white;
-          font-size: 18px;
-          opacity: 0.5;
-        }
-        img {
-          position: relative;
-          right: 40px;
-          top: 8px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
   .main {
     min-height: 100%;
     padding-top: 52px;

src/views/learn-center/Seekresult.vue

@@ -2,11 +2,7 @@
   <!-- 搜索结果 -->
   <div class="SeekResult" v-loading="loading">
     <!-- 头部导航及搜索 -->
-    <div class="nav">
-      <!-- 登录导航 -->
-      <Header />
-      <div class="shade"></div>
-    </div>
+    <Header />
     <HeaderOne
       :changeKeycode="changeKeycode"
       :keycode="keycode"
@@ -105,7 +101,7 @@ export default {
       pageSize: 8,
       targetPage: 1,
       loading: false,
-      classilfyList: ["课程", "教材"],
+      classilfyList: ["学习", "教材"],
       classilfyIndex: 0,
       classilfyID: null,
     };
@@ -226,77 +222,6 @@ export default {
 .SeekResult {
   min-height: 100vh;
   background: #f6f6f6;
-  .nav {
-    height: 64px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    position: relative;
-    .shade {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      color: #fff;
-      font-weight: bold;
-      font-size: 18px;
-      justify-content: space-around;
-      align-items: center;
-      .el-menu-demo {
-        background: rgba(0, 0, 0, 0);
-        li:hover {
-          background: none;
-        }
-        li {
-          background: none;
-        }
-      }
-      // 取消组件默认的样式
-      .el-menu.el-menu--horizontal {
-        border-bottom: none;
-      }
-      .nav_title {
-        text-align: left;
-      }
-      .seek {
-        position: relative;
-        input {
-          width: 450px;
-          height: 46px;
-          background: rgba(163, 163, 163, 0.5);
-          border: none;
-          outline: none;
-          color: white;
-          font-size: 18px;
-          padding-left: 10px;
-        }
-        img {
-          position: relative;
-          right: 40px;
-          top: 8px;
-          cursor: pointer;
-        }
-        .dimSeek {
-          width: 450px;
-          position: absolute;
-          top: 50px;
-          background: #fff;
-          color: rgba(0, 0, 0, 0.7);
-          border: 1px solid rgba(0, 0, 0, 0.3);
-          p {
-            cursor: pointer;
-            height: 48px;
-            line-height: 48px;
-            padding-left: 10px;
-          }
-          > p:hover {
-            background: rgba(0, 0, 0, 0.05);
-          }
-        }
-      }
-    }
-  }
   .top {
     width: 95%;
     margin: 0 auto;

src/views/learn-center/TextbookDetail.vue

@@ -1,11 +1,8 @@
 <template>
   <!-- 教材详情 -->
   <div class="TextbookDetail" v-if="TextbookData">
-    <div class="nav">
-      <!-- 登录导航 -->
-      <Header />
-      <div class="shade"></div>
-    </div>
+    <Header />
+
     <HeaderOne text="123" title="教材" :name="TextbookData.name" />
     <div class="main" v-loading="loading">
       <div class="bookDetail">
@@ -297,59 +294,6 @@ export default {
 /* @import url(); 引入css类 */
 .TextbookDetail {
   // height: 100%;
-  .nav {
-    height: 64px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    position: relative;
-    .shade {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      color: #fff;
-      font-weight: bold;
-      font-size: 18px;
-      justify-content: space-around;
-      align-items: center;
-      .el-menu-demo {
-        background: rgba(0, 0, 0, 0);
-      }
-      // 取消组件默认的样式
-      .el-menu.el-menu--horizontal {
-        border-bottom: none;
-        li:hover {
-          background: none;
-        }
-        li {
-          background: none;
-        }
-      }
-      .nav_title {
-        text-align: left;
-      }
-      .seek {
-        input {
-          width: 450px;
-          height: 46px;
-          background: #979797;
-          border: none;
-          outline: none;
-          color: white;
-          font-size: 18px;
-          opacity: 0.5;
-        }
-        img {
-          position: relative;
-          right: 40px;
-          top: 8px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
   .main {
     min-height: 100%;
     padding-top: 52px;

src/views/learn-center/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="lear_center">
     <!-- 头部导航及搜索 -->
-    <div class="nav">
-      <!-- 登录导航 -->
-      <Header />
-      <div class="shade"></div>
-    </div>
+    <Header />
     <div class="nav_title">
       <div class="inner">
         <el-menu
@@ -16,7 +12,7 @@
           text-color="#000"
           active-text-color="#FF9900"
         >
-          <el-menu-item index="COURSE">教学</el-menu-item>
+          <el-menu-item index="COURSE">学习</el-menu-item>
           <el-menu-item index="TEXTBOOK">教材</el-menu-item>
           <!-- <el-menu-item index="LIVE LESSON">LIVE LESSON</el-menu-item>
         <el-menu-item index="VIDEO COURSE">VIDEO COURSE</el-menu-item> -->
@@ -240,33 +236,6 @@ export default {
 .lear_center {
   min-height: 100vh;
   background: #f6f6f6;
-  .nav {
-    background: #ffffff;
-    height: 64px;
-    position: relative;
-    .shade {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      color: #fff;
-      font-weight: bold;
-      font-size: 18px;
-      justify-content: space-around;
-      align-items: center;
-      .el-menu-demo {
-        background: rgba(0, 0, 0, 0);
-        li:hover {
-          background: none;
-        }
-        li {
-          background: none;
-        }
-      }
-    }
-  }
   .nav_title {
     background: #fff;