顶部导航颜色更改

src/views/navigation/navigation.vue

@@ -1,10 +1,21 @@
 <template>
-  <div style="width: 100%;height: 62px;display: flex;justify-content:space-around;box-shadow: 0 3px 7px 0 rgba(0,0,0,0.09);position:fixed;left: 0;background-color: #FFFFFF">
+  <div style="width: 100%;height: 62px;display: flex;justify-content:space-around;box-shadow: 0 3px 7px 0 rgba(0,0,0,0.09);position:fixed;left: 0;background-color: #0d4dc9">
+<!--    <el-menu-->
+<!--      :default-active="activeIndex"-->
+<!--      class="el-menu-demo"-->
+<!--      mode="horizontal"-->
+<!--      @select="handleSelect"-->
+<!--      active-text-color="#fd3f31"-->
+<!--    >-->
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
       mode="horizontal"
-      @select="handleSelect">
+      @select="handleSelect"
+      active-text-color="#fff"
+      background-color="#0d4dc9"
+      text-color="#fff"
+    >
       <img src="../../assets/logo.png" alt="" style="float: left;width: 4%;margin-top: 10px">
       <el-menu-item index="/">首页</el-menu-item>
       <el-submenu index="2">
@@ -16,12 +27,12 @@
         <el-menu-item index="9">荣誉资质</el-menu-item>
         <el-menu-item index="8">合作伙伴</el-menu-item>
       </el-submenu>
-      <el-submenu index="3">
-        <template slot="title">新闻资讯</template>
-        <el-menu-item index="7">公司新闻</el-menu-item>
-        <el-menu-item index="6">行业动态</el-menu-item>
-        <el-menu-item index="5">政策法规</el-menu-item>
-      </el-submenu>
+<!--      <el-submenu index="3">-->
+<!--        <template slot="title">新闻资讯</template>-->
+<!--        <el-menu-item index="7">公司新闻</el-menu-item>-->
+<!--        <el-menu-item index="6">行业动态</el-menu-item>-->
+<!--        <el-menu-item index="5">政策法规</el-menu-item>-->
+<!--      </el-submenu>-->
       <el-submenu index="4">
         <template slot="title">服务项目</template>
         <el-menu-item index="4">营销网络</el-menu-item>
@@ -37,13 +48,13 @@
 <!--      <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" @click="warning">-->
 <!--        中文&nbsp;&nbsp;|&nbsp;&nbsp;English-->
 <!--      </div>-->
-      <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" @click="immediately" v-if="loginStatus === false">
+      <div style="width: 100px;margin-top: 18px;float: right;font-size: 15px;" @click="immediately" v-if="loginStatus === false" class="nav-login">
         登录
       </div>
       <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" v-else>
         <span>{{ username }}</span>
         丨
-        <span @click="cancellation">注销</span>
+        <span @click="cancellation" class="logout">注销</span>
       </div>
     </el-menu>
   </div>
@@ -96,6 +107,19 @@ export default {
 };
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
+  color: #fd3f31;
+}
+.el-menu--horizontal .el-menu .el-menu-item:hover {
+  color: #fd3f31;
+}
+.nav-login {
+  //color: #909399;
+  color: #fff;
+}
+.logout:hover,.nav-login:hover {
+  cursor: pointer;
+  color: #409EFF;
+}
 </style>