修改导航栏

vueHomilyLink/src/components/Nav.vue

@@ -4,30 +4,38 @@
 
 <template>
     <div class="nav">
-        <div class="container">
-        <router-link to="/">首页</router-link>
-        <router-link to="/channel">频道</router-link>
-        <router-link to="/bogu">俱乐部</router-link>
-        <router-link to="/live">直播</router-link>
-        </div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
+            background-color="rgb(197.7, 225.9, 255)" text-color="#fff" active-text-color="#ffd04b"
+            :router="true">
+            <el-menu-item index="/">首页</el-menu-item>
+            <el-menu-item index="/channel">频道</el-menu-item>
+            <el-menu-item index="/bogu">俱乐部</el-menu-item>
+            <el-menu-item index="/live">直播</el-menu-item>
+        </el-menu>
     </div>
 </template>
 
 <style scoped>
-.nav{
-    background-color: rgba(177, 174, 159, 0.493); 
-    height: 30px;
+.nav {
+    background-color: rgba(177, 174, 159, 0.493);
+    height: 40px;
     border-bottom: 1px solid #aaa;
     width: 1000px;
     margin-right: auto;
     margin-left: auto;
 }
-.container{
+
+.container {
     width: 1200px;
 }
-a{
-        margin-right: 40px;
-        margin-left: 50px;
-        color: black;
-    }
+
+a {
+    margin-right: 40px;
+    margin-left: 50px;
+    color: black;
+}
+
+.el-menu--horizontal {
+  --el-menu-horizontal-height: 40px;
+}
 </style>

vueHomilyLink/src/views/HomeView.vue

@@ -309,6 +309,7 @@ body {
         .class123{
             /*让页面分为左右结构*/
             display: flex;
+            margin-top: 30px
         }
 
         .corner-mark {