修改页面宽度，频道页面侧导航栏跳转改变颜色

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 {

vueHomilyLink/src/views/LiveView.vue

@@ -41,8 +41,8 @@ const liveList = ref({});
 function getLive() {
     liveApi.getLiveList()
         .then(resp => {
-            if(resp.code == 0){
-                liveList.value = resp.data.liveList;
+            if(resp.code == 200){
+                liveList.value = resp.data;
                 console.log(liveList.value);
             }else{
                 ElMessage.error('获取直播列表失败');
@@ -100,7 +100,7 @@ function cancelBooking(liveId, userId) {
     margin-left: auto;
     margin-right: auto;
     /*宽度*/
-    width: 916px;
+    width: 1000px;
     font-family: Arial, sans-serif;
     padding: 0;
     flex-wrap: wrap;
@@ -113,7 +113,7 @@ function cancelBooking(liveId, userId) {
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    margin: 10px;
+    margin: 20px;
     overflow: hidden;
     border: #666;
     height: 190px;