From 1d7ae243d52e9a425085f081e9cf04979691fa4a Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Mon, 2 Dec 2024 19:52:32 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=91=E9=81=93=E6=9B=B4=E6=94=B9=EF=BC=9A?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E4=B8=8D=E5=90=8C=E9=A2=91=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/router/index.js       |  3 +-
 vueHomilyLink/src/views/ChannelView.vue | 78 +++++++++++++++++++++++++++++++--
 2 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/vueHomilyLink/src/router/index.js b/vueHomilyLink/src/router/index.js
index 476d1f9..02c22e7 100644
--- a/vueHomilyLink/src/router/index.js
+++ b/vueHomilyLink/src/router/index.js
@@ -19,7 +19,8 @@ const router = createRouter({
       component: ClubView,
     },
     {
-      path: '/channel',
+      path: '/channel/:id?',
+      props: true,
       name: 'channel',
       component: ChannelView,
     },
diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 455ba36..4358c71 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -1,13 +1,22 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
 import { ref } from 'vue';
+import router from '@/router';
 
 //频道
+//获取传递的参数中的id
 const channel = ref();
 //加载频道信息
-function loadChannels(){
+function loadChannels(channelId){
     channel.value = {
-        id:1,
+        // id:1,
+        // image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        // name:"量价时空四维预测术",
+        // // 订阅数量
+        // subscriptionCount:60,
+        // backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+        // status:0
+        id:2,
         image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
         name:"量价时空四维预测术",
         // 订阅数量
@@ -17,8 +26,15 @@ function loadChannels(){
     }
 }
 loadChannels();
-// 展示列表
-const shows = ref([])
+function toLink(channelId){
+  router.push({path:'/channel',query:{id: channelId}});
+  console.log(channelId);
+  loadChannels(channelId);
+  loadShows();
+}
+
+// 展示列表1
+const shows = ref([]);
 // 加载展示列表
 function loadShows(){
   shows.value = ([
@@ -123,10 +139,20 @@ loadShows();
 function submit(){
     
 }
+
+
 </script>
 
 <template>
     <Nav></Nav>
+    <div class="club-nav">
+        <div class="container">
+            <button @click="toLink(1)" class="nav-item">量价时空四维预测术</button>
+            <button @click="toLink(2)" class="nav-item">云板&左侧频道</button>
+            <button @click="toLink(3)" class="nav-item">HomilyChart第一频道</button>
+            <button @click="toLink(4)" class="nav-item">TD频道</button>
+        </div>
+    </div>
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
@@ -192,6 +218,50 @@ function submit(){
     </div>
 </template>
 <style scoped>
+.club-nav {
+  height: 100vh; 
+  position: fixed;
+  left: 30px;
+  top: 30px;
+  background-color: #ffffff; 
+  overflow-x: hidden; 
+  padding-top: 20px; 
+  transition: 0.5s; 
+}
+
+
+.container {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  background-color: #ffffff; 
+}
+
+
+.nav-item {
+  border: none;
+  background-color: #ffffff; 
+  padding: 10px 15px;
+  width: 250px;
+  height: 60px;
+  text-decoration: none;
+  font-size: 18px;
+  color: rgb(19, 18, 18);
+  display: block;
+  transition: 0.3s;
+}
+
+
+.nav-item:hover {
+  background-color: #407fdf; 
+  color: #f1f1f1; 
+}
+
+.nav-item.router-link-active {
+  background-color: #407fdf; 
+  color: white; 
+  border-radius: 5%;
+}
 .channel{
     width: 800px;
     margin-left: auto;