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

vueHomilyLink/src/components/ClubNav.vue

@@ -15,7 +15,7 @@
 <style scoped>
 .club-nav {
   height: 100vh; 
-  width: 210px; 
+  width: 15%; 
   position: fixed;
   left: 30px;
   top: 30px;

vueHomilyLink/src/views/ChannelView.vue

@@ -5,6 +5,9 @@ import {ElMessage} from 'element-plus';
 import router from '@/router';
 import ChannelApi from '@/api/ChannelApi';
 
+
+const activeId = ref(1);
+
 //频道列表
 const channelList = ref([]);
 //视频上的导航栏
@@ -38,6 +41,8 @@ function toLink(channelId) {
     flagType.value = null;
     currentTab.value = null;
     loadShows(channelId,flagType.value);
+    //将当前频道id添加到激活状态数组中
+    activeId.value = channelId;
     console.log("flga",flagType.value);
 }
 
@@ -65,11 +70,11 @@ loadShows(channel.value.id,flagType.value);
 function submit(channelId) {
     console.log("频道id",channelId);
     ChannelApi.subscribe(channelId,90000000).then((result)=>{
-       if(result && result.data.success){
+       if(result.code ==200){
         ElMessage.success('订阅成功！');
         loadShows(channelId,null);
        }else{
-        ElMessage.console.error('订阅失败！');
+        ElMessage.error(result.messsage);
        }
     })
 
@@ -79,26 +84,25 @@ function unsubmit(channelId){
     console.log("取消频道id",channelId);
     ChannelApi.unSubscribe(channelId,90000000).then((result) =>{
         
-        if(result && result.data.success){
+        if(result.code ==200){
             console.log("取消频道id+++++++",channelId);
             ElMessage.success('取消订阅成功！');
             loadShows(channelId,null);
-        }
+        }else{
+        ElMessage.error(result.messsage);
+       }
     })
 }
-// function buttonActive(){
-   
-// }
-// buttonActive();
-
 </script>
 
 <template>
     <Nav></Nav>
     <ChannelNav></ChannelNav>
-    <div class="club-nav">
+    <div class="channel-nav">
         <div class="container">
-            <button v-for="ch in channelList.list" @click="toLink(ch.id)" class="nav-item">{{ ch.name }}</button>
+            <button v-for="ch in channelList" @click="toLink(ch.id)" 
+                :class="{'button-active': activeId==ch.id}"
+                class="nav-item">{{ ch.name }}</button>
         </div>
     </div>
     <div class="channel">
@@ -254,8 +258,9 @@ function unsubmit(channelId){
     </div>
 </template>
 <style scoped>
-.club-nav {
+.channel-nav {
     height: 100vh;
+    width: 15%;
     position: fixed;
     left: 30px;
     top: 30px;
@@ -278,8 +283,6 @@ function unsubmit(channelId){
     border: none;
     background-color: #ffffff;
     padding: 10px 15px;
-    width: 250px;
-    height: 60px;
     text-decoration: none;
     font-size: 18px;
     color: rgb(19, 18, 18);
@@ -293,14 +296,14 @@ function unsubmit(channelId){
     color: #f1f1f1;
 }
 
-.nav-item.router-link-active {
+.nav-item.button-active {
     background-color: #407fdf;
     color: white;
     border-radius: 5%;
 }
 
 .channel {
-    width: 800px;
+    width: 46%;
     margin-left: auto;
     margin-right: auto;
 }

vueHomilyLink/src/views/club/BoguView.vue

@@ -57,7 +57,9 @@ loadShows();
         
         <!-- 展示列表 -->
         <div class="sub-topic">
-          <ul class="display-list">
+          <ul class="display-list"> 
+
+            
             <li v-for="show in shows">
               <!-- 左边 -->
               <div class="sub-left">
@@ -110,7 +112,7 @@ loadShows();
 </template>
 <style scoped>
 .club{
-    width: 800px;
+    width: 46%;
     margin-left: auto;
     margin-right: auto;
 }

vueHomilyLink/src/views/club/MuminView.vue

@@ -13,7 +13,7 @@ function loadClub(){
   ClubApi.getClub(2).then((result) =>{
     console.log(result)
     console.log("++++++++",result.data);
-    club.value = result;
+    club.value = result.data;
     console.log(club.value);
   })
 }
@@ -24,7 +24,7 @@ const shows = ref([])
 function loadShows(){
   ClubApi.getShows(2).then((result) =>{
     console.log(result);
-    shows.value = result;
+    shows.value = result.data;
   })
 }
 // 
@@ -51,7 +51,7 @@ loadShows();
       </div>
       <div class="topic">
         <div class="topic-title">
-          <p>前言股市投资分享之左侧交易</p>
+          <p>降息周期下的全球猎涨专题</p>
           <span @click="handleMore">查看更多</span>
         </div>
         
@@ -110,7 +110,7 @@ loadShows();
 </template>
 <style scoped>
 .club{
-    width: 800px;
+    width: 46%;
     margin-left: auto;
     margin-right: auto;
 }

vueHomilyLink/src/views/club/shenQiang.vue

@@ -13,7 +13,7 @@ function loadClub(){
   ClubApi.getClub(3).then((result) =>{
     console.log(result)
     console.log("++++++++",result.data);
-    club.value = result;
+    club.value = result.data;
     console.log(club.value);
   })
 }
@@ -24,7 +24,7 @@ const shows = ref([])
 function loadShows(){
   ClubApi.getShows(3).then((result) =>{
     console.log(result);
-    shows.value = result;
+    shows.value = result.data;
   })
 }
 // 
@@ -51,7 +51,7 @@ loadShows();
       </div>
       <div class="topic">
         <div class="topic-title">
-          <p>前言股市投资分享之左侧交易</p>
+          <p>驾驭AI的深度</p>
           <span @click="handleMore">查看更多</span>
         </div>
         
@@ -110,7 +110,7 @@ loadShows();
 </template>
 <style scoped>
 .club{
-    width: 800px;
+    width: 46%;
     margin-left: auto;
     margin-right: auto;
 }