From b1c654d8081adccb78960c61d042f071b3538823 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Thu, 28 Nov 2024 19:33:30 +0800
Subject: [PATCH 1/6] =?UTF-8?q?Channel=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/assets/main.css       |  36 +-----
 vueHomilyLink/src/views/ChannelView.vue | 219 +++++++++++++++++++++++++++++++-
 2 files changed, 222 insertions(+), 33 deletions(-)

diff --git a/vueHomilyLink/src/assets/main.css b/vueHomilyLink/src/assets/main.css
index 36fb845..62eb52b 100644
--- a/vueHomilyLink/src/assets/main.css
+++ b/vueHomilyLink/src/assets/main.css
@@ -1,35 +1,9 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+html,body{
+  margin:0px;
+  height: 100%;
 }
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+#app{
+  height: 100%;
 }
diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index ddc7564..57dac43 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -1,10 +1,225 @@
 <script setup>
-
+import Nav from '@/components/Nav.vue';
 </script>
 
 <template>
-频道
+    <Nav></Nav>
+    <div class="channel">
+        <div class="channel-head">
+            <!-- 1-订阅按钮 -->
+            <button disabled="disabled" type="button" class="submit">已订阅</button>
+            <!-- 2-背景图片 -->
+            <img alt="" class="bc-image" src="https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" />
+            <!-- 3-频道主题 -->
+            <div class="channel-title">
+            <!-- 频道头像 -->
+            <img alt="" class="title-image" src="https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png" />
+            <!-- 频道title -->
+            <div class="title-content">
+                <h3>量价时空四维预测术</h3>
+                <span>5525已订阅</span>
+                <p style="line-height: 18px;">.</p>
+            </div>
+            </div>
+        </div>
+        <!-- 频道内容 -->
+        <div class="channel-content">
+            <!-- 导航栏 -->
+            <div class="content-nav">
+            <button class="tab">全部</button>
+            <button class="tab">文章</button>
+            <button class="tab">视频</button>
+            <button class="tab">合集</button>
+            </div>
+            <!-- 内容 -->
+            <div class="content-list">
+            <ul class="list-display">
+                <!-- 一条 -->
+                <li>
+                    <div class="sub-topic">
+                        <!-- 左边 -->
+                        <div class="sub-left">
+                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
+                        </div>
+                        <!-- 右边 -->
+                        <div class="sub-right">
+                            <!-- title -->
+                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
+                            
+                            <div class="right-inline">
+                                <!-- HomilyLink -->
+                                <div class="right-item">
+                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
+                                    <div>HomilyLink</div>
+                                </div>
+                                <!-- 评论 -->
+                                <span class="right-item">0评论</span>
+                                <!-- 日期 -->
+                                <div class="right-item"> 05-26 11:42 </div>
+                            </div>
+                        </div>
+
+
+
+                                
+
+                        
+                    </div>
+                </li>
+                <li>
+                    <div class="sub-topic">
+                        <!-- 左边 -->
+                        <div class="sub-left">
+                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
+                        </div>
+                        <!-- 右边 -->
+                        <div class="sub-right">
+                            <!-- title -->
+                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
+                            
+                            <div class="right-inline">
+                                <!-- HomilyLink -->
+                                <div class="right-item">
+                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
+                                    <div>HomilyLink</div>
+                                </div>
+                                <!-- 评论 -->
+                                <span class="right-item">0评论</span>
+                                <!-- 日期 -->
+                                <div class="right-item"> 05-26 11:42 </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            </div>
+        </div>
+    </div>
 </template>
 <style scoped>
+.channel{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.channel-head{
+    position: relative;
+    height: 200px;
+    width: 100%;
+}
+.bc-image{
+    height: 100%;
+    width: 100%;
+}
+.submit{
+    position: absolute; /* 绝对定位 */
+    top: 50px; /* 根据需要调整位置 */
+    right: 10px; /* 根据需要调整位置 */
+    color: rgb(129, 132, 134);
+    background-color: aliceblue;
+    padding: 10px;
+    border-radius: 5%;
+}
+.channel-title{
+    box-sizing: border-box;
+    position: absolute;
+    left: 60px;
+    top: 50px;
+    background: rgba(0, 0, 0, .4);
+    width: 400px;
+    overflow: hidden;
+}
+.title-image{
+    width: 90px;
+    height: 90px;
+    margin-right: 25px;
+    vertical-align: top;
+    border-radius: 50%;
+}
+.title-content{
+    display: inline-block;
+    position: absolute;
+    width: 400px;
+    color: white;
+    overflow: hidden;
+}
+.channel-title h3{
+    max-width: 75%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 24px;
+    color: #fff;
+    margin: 0px;
+    z-index: 999;
+}
+.channel-title span{
+    padding: 4px 0;
+    font-size: 14px;
+    color: #fff;
+}
+
+.content-nav {
+    display: flex;
+    justify-content: flex-start; /* 修正了属性名中的空格 */
+    background-color: #fff; /* 修正了属性名中的空格 */
+    border-bottom: 1px solid #ccc; /* 修正了属性名中的空格 */
+    margin: 10px;
+}
+
+.tab {
+    padding: 10px 20px;
+    border: none;
+    background-color: transparent; /* 修正了属性名中的空格 */
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.active {
+    color: red;
+    border-bottom: 2px solid red; /* 修正了属性名中的空格 */
+}
+.list-display{
+    list-style-type: none;
+    padding: 0px;
+}
+.sub-topic {
+    margin: 10px 0;
+    padding: 10px;
+    display: flex; 
+
+}
+.sub-left{
+    height: 112px;
+    width: 200px;
+}
+.sub-image{
+    width: 100%;
+    height: 100%;
+}
+
+.right-inline{
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+
+}
+.right-title{
+    margin-left: 10px;
+}
+.right-item{
+    display: flex;
+    color: #8e8e8e;
+    font-size: 14px;
+    margin-right: 18px;
+    align-items: center;
+}
+.img1{
+    margin-left: 10px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+}
 
 </style>
\ No newline at end of file

From 8b362d48e1c31059a69a8348e9622d3e08f39f88 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Fri, 29 Nov 2024 19:53:16 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E9=A2=91=E9=81=93js=E6=A8=A1=E6=8B=9F?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ChannelView.vue | 271 +++++++++++++++++++++++---------
 1 file changed, 198 insertions(+), 73 deletions(-)

diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 57dac43..5bc5367 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -1,5 +1,130 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
+
+//频道
+const channel = ref();
+//加载频道信息
+function loadChannels(){
+    channel.value = {
+        id:1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        name:"量价时空四维预测术",
+        // 订阅数量
+        subscriptionCount:60,
+        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+        status:0
+    }
+}
+loadChannels();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  shows.value = ([
+    {
+      id: 3,
+      cover:"	https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg",
+      name:"联合利剑！五大机器人史诗升级",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+        password:"123456",
+      },
+      releaseTime:"2024-05-26 11:42:00",
+      // 视频时长
+      videoDurition:"01:22:11",
+      // 观看数量
+      viewCount:796,
+      comments:1,
+      likes:10,
+      // 内容标识类型,图文还是视频
+      flagType:1,
+      
+      
+    },
+    {
+      id: 4,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
+      name:"壁垒将至？中美博弈开启拼刺刀白热化阶段",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+        password:"123456",
+      },
+      releaseTime:"2024-01-24 09:55:00",
+      // 视频时长
+      videoDurition:"03:56:00",
+      // 观看数量
+      viewCount:"594",
+      comments:50,
+      likes:16,
+      // 内容标识类型,图文还是视频
+      flagType:1,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+      channel:{
+        id:1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        name:"量价时空四维预测术",
+        // 订阅数量
+        subscriptionCount:60,
+        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
+      }
+      
+    },
+    {
+      id: 5,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
+      name:"壁垒将至？中美博弈开启拼刺刀白热化阶段",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+        password:"123456",
+      },
+      releaseTime:"2024-01-24 09:55:00",
+      // 视频时长
+      videoDurition:"03:56:00",
+      // 观看数量
+      viewCount:"594",
+      comments:50,
+      likes:16,
+      // 内容标识类型,图文还是视频
+      flagType:2,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+      channel:{
+        id:1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        name:"量价时空四维预测术",
+        // 订阅数量
+        subscriptionCount:60,
+        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
+      }
+      
+    }
+  ])
+
+}
+// 
+loadShows();
+//订阅
+function submit(){
+    
+}
 </script>
 
 <template>
@@ -7,19 +132,20 @@ import Nav from '@/components/Nav.vue';
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
-            <button disabled="disabled" type="button" class="submit">已订阅</button>
+            <button v-if="channel.status==1" class="submited">已订阅</button>
+            <button v-else class="submit" @click="submit">订阅</button>
             <!-- 2-背景图片 -->
-            <img alt="" class="bc-image" src="https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" />
+            <img alt="" class="bc-image" :src="channel.backgroundImage" />
             <!-- 3-频道主题 -->
             <div class="channel-title">
-            <!-- 频道头像 -->
-            <img alt="" class="title-image" src="https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png" />
-            <!-- 频道title -->
-            <div class="title-content">
-                <h3>量价时空四维预测术</h3>
-                <span>5525已订阅</span>
-                <p style="line-height: 18px;">.</p>
-            </div>
+                <!-- 频道头像 -->
+                <img alt="" class="title-image" :src="channel.image" />
+                <!-- 频道title -->
+                <div class="title-content">
+                    <h3 :name="channel.name">{{ channel.name }}</h3>
+                    <span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount}}已订阅</span>
+                    <p style="line-height: 18px;">.</p>
+                </div>
             </div>
         </div>
         <!-- 频道内容 -->
@@ -29,69 +155,40 @@ import Nav from '@/components/Nav.vue';
             <button class="tab">全部</button>
             <button class="tab">文章</button>
             <button class="tab">视频</button>
-            <button class="tab">合集</button>
             </div>
             <!-- 内容 -->
             <div class="content-list">
-            <ul class="list-display">
-                <!-- 一条 -->
-                <li>
-                    <div class="sub-topic">
-                        <!-- 左边 -->
-                        <div class="sub-left">
-                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
-                        </div>
-                        <!-- 右边 -->
-                        <div class="sub-right">
-                            <!-- title -->
-                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
-                            
-                            <div class="right-inline">
-                                <!-- HomilyLink -->
-                                <div class="right-item">
-                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
-                                    <div>HomilyLink</div>
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType==1" :videoDurition="show.videoDurition" class="video-time">
+                                    {{ show.videoDurition }}
                                 </div>
-                                <!-- 评论 -->
-                                <span class="right-item">0评论</span>
-                                <!-- 日期 -->
-                                <div class="right-item"> 05-26 11:42 </div>
                             </div>
-                        </div>
-
-
-
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
                                 
-
-                        
-                    </div>
-                </li>
-                <li>
-                    <div class="sub-topic">
-                        <!-- 左边 -->
-                        <div class="sub-left">
-                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
-                        </div>
-                        <!-- 右边 -->
-                        <div class="sub-right">
-                            <!-- title -->
-                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
-                            
-                            <div class="right-inline">
-                                <!-- HomilyLink -->
-                                <div class="right-item">
-                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
-                                    <div>HomilyLink</div>
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} </div>
                                 </div>
-                                <!-- 评论 -->
-                                <span class="right-item">0评论</span>
-                                <!-- 日期 -->
-                                <div class="right-item"> 05-26 11:42 </div>
                             </div>
                         </div>
-                    </div>
-                </li>
-            </ul>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -111,23 +208,39 @@ import Nav from '@/components/Nav.vue';
     height: 100%;
     width: 100%;
 }
-.submit{
+.submited{
     position: absolute; /* 绝对定位 */
     top: 50px; /* 根据需要调整位置 */
     right: 10px; /* 根据需要调整位置 */
     color: rgb(129, 132, 134);
     background-color: aliceblue;
     padding: 10px;
-    border-radius: 5%;
+    border-radius: 10%;
+    z-index: 999;
+}
+.submit{
+    position: absolute; /* 绝对定位 */
+    top: 50px; /* 根据需要调整位置 */
+    right: 10px; /* 根据需要调整位置 */
+    color: rgb(129, 132, 134);
+    background-color: aliceblue;
+    padding: 10px 20px;
+    
+    border-radius: 10%;
+    z-index: 999;
 }
 .channel-title{
+    position:absolute;
+    top: 0px;
+    left: 0px;
+    padding-top: 60px;
+    padding-left: 50px;
     box-sizing: border-box;
-    position: absolute;
-    left: 60px;
-    top: 50px;
-    background: rgba(0, 0, 0, .4);
-    width: 400px;
+    background: rgba(0, 0, 0, 0.4);
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+
 }
 .title-image{
     width: 90px;
@@ -192,12 +305,24 @@ import Nav from '@/components/Nav.vue';
 .sub-left{
     height: 112px;
     width: 200px;
-}
-.sub-image{
+    position: relative;
+    .sub-image{
     width: 100%;
     height: 100%;
+    }
+   
+    .video-time{
+        position: absolute;
+        left: 70%;
+        top: 80%;
+        color: #fff;
+        background-color: rgba(31, 30, 30, 0.5); 
+        border-radius: 20%;
+        font-size: smaller;
+    }
 }
 
+
 .right-inline{
     display: flex;
     margin-bottom: 15px;

From ba04cbb5c1e9320bc2da18ab046b2c001b2bb2f7 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Sat, 30 Nov 2024 17:41:00 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E9=A2=91=E9=81=93=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=A8=A1=E6=8B=9F=E6=95=B0=E6=8D=AE=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ChannelView.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 5bc5367..455ba36 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -30,11 +30,10 @@ function loadShows(){
         id:1,
         username:"HomilyLink",
         avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-        password:"123456",
       },
       releaseTime:"2024-05-26 11:42:00",
       // 视频时长
-      videoDurition:"01:22:11",
+      videoDuration:"01:22:11",
       // 观看数量
       viewCount:796,
       comments:1,
@@ -52,11 +51,10 @@ function loadShows(){
         id:1,
         username:"HomilyLink",
         avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-        password:"123456",
       },
       releaseTime:"2024-01-24 09:55:00",
       // 视频时长
-      videoDurition:"03:56:00",
+      videoDuration:"03:56:00",
       // 观看数量
       viewCount:"594",
       comments:50,

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 4/6] =?UTF-8?q?=E9=A2=91=E9=81=93=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=EF=BC=9A=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;

From 35600b7e4bc9d5083cef9c62bb6f636a5e6b5eb9 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Tue, 3 Dec 2024 14:28:22 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E9=A2=91=E9=81=93=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E8=A7=86=E9=A2=91=E6=97=B6=E9=95=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ChannelView.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 4358c71..d793232 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -56,7 +56,7 @@ function loadShows(){
       likes:10,
       // 内容标识类型,图文还是视频
       flagType:1,
-      
+    
       
     },
     {
@@ -112,7 +112,7 @@ function loadShows(){
       comments:50,
       likes:16,
       // 内容标识类型,图文还是视频
-      flagType:2,
+      flagType:0,
       club:{
         id: 1,
         image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
@@ -145,6 +145,7 @@ function submit(){
 
 <template>
     <Nav></Nav>
+    <ChannelNav></ChannelNav>
     <div class="club-nav">
         <div class="container">
             <button @click="toLink(1)" class="nav-item">量价时空四维预测术</button>
@@ -189,8 +190,8 @@ function submit(){
                             <!-- 左边 -->
                             <div class="sub-left">
                                 <img class="sub-image" :src="show.cover" alt="视频缩略图">
-                                <div v-if="show.flagType==1" :videoDurition="show.videoDurition" class="video-time">
-                                    {{ show.videoDurition }}
+                                <div v-if="show.flagType==1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
                                 </div>
                             </div>
                             <!-- 右边 -->

From 65e2d52d43881182f3a7e589d8ec071431d1511c Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Tue, 3 Dec 2024 15:33:27 +0800
Subject: [PATCH 6/6] =?UTF-8?q?axios+=E9=A2=91=E9=81=93=E4=BE=A7=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/package-lock.json         | 100 ++++++++
 vueHomilyLink/package.json              |   1 +
 vueHomilyLink/src/views/ChannelView.vue | 441 ++++++++++++++++++--------------
 3 files changed, 346 insertions(+), 196 deletions(-)

diff --git a/vueHomilyLink/package-lock.json b/vueHomilyLink/package-lock.json
index a347183..03a0d28 100644
--- a/vueHomilyLink/package-lock.json
+++ b/vueHomilyLink/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vuehomilylink",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.8",
         "pinia": "^2.2.6",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -1434,6 +1435,23 @@
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -1514,6 +1532,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1619,6 +1649,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.64",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
@@ -1727,6 +1766,40 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -1990,6 +2063,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -2239,6 +2333,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
diff --git a/vueHomilyLink/package.json b/vueHomilyLink/package.json
index 5c51bad..79fd816 100644
--- a/vueHomilyLink/package.json
+++ b/vueHomilyLink/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.8",
     "pinia": "^2.2.6",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index d793232..4cceea3 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -3,141 +3,165 @@ import Nav from '@/components/Nav.vue';
 import { ref } from 'vue';
 import router from '@/router';
 
+//频道列表
+
+const channelList = ref([]);
+function getChannel() {
+    channelList.value = ([
+        {
+            id: 1,
+            image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+            name: "量价时空四维预测术",
+            // 订阅数量
+            subscriptionCount: 60,
+            backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+            status: 1
+        },
+        {
+            id:2,
+            image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+            name:"时空四维预测术",
+            // 订阅数量
+            subscriptionCount:60,
+            backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+            status:0
+        }
+    ]);
+}
+getChannel();
+
+
 //频道
 //获取传递的参数中的id
-const channel = ref();
+const channel = ref({
+    id: 1,
+    image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+    name: "量价时空四维预测术",
+    // 订阅数量
+    subscriptionCount: 60,
+    backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+    status: 1
+});
 //加载频道信息
-function loadChannels(channelId){
-    channel.value = {
-        // 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:"量价时空四维预测术",
-        // 订阅数量
-        subscriptionCount:60,
-        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
-        status:0
-    }
+function loadChannels(channelId) {
+    channelList.value.forEach(ch =>{
+        if(ch.id == channelId){
+            channel.value = ch;
+        }
+    });
 }
 loadChannels();
-function toLink(channelId){
-  router.push({path:'/channel',query:{id: channelId}});
-  console.log(channelId);
-  loadChannels(channelId);
-  loadShows();
+function toLink(channelId) {
+    router.push({ path: '/channel', query: { id: channelId } });
+    loadChannels(channelId);
+    loadShows();
 }
 
 // 展示列表1
 const shows = ref([]);
 // 加载展示列表
-function loadShows(){
-  shows.value = ([
-    {
-      id: 3,
-      cover:"	https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg",
-      name:"联合利剑！五大机器人史诗升级",
-      user:{
-        id:1,
-        username:"HomilyLink",
-        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-      },
-      releaseTime:"2024-05-26 11:42:00",
-      // 视频时长
-      videoDuration:"01:22:11",
-      // 观看数量
-      viewCount:796,
-      comments:1,
-      likes:10,
-      // 内容标识类型,图文还是视频
-      flagType:1,
-    
-      
-    },
-    {
-      id: 4,
-      cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
-      name:"壁垒将至？中美博弈开启拼刺刀白热化阶段",
-      user:{
-        id:1,
-        username:"HomilyLink",
-        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-      },
-      releaseTime:"2024-01-24 09:55:00",
-      // 视频时长
-      videoDuration:"03:56:00",
-      // 观看数量
-      viewCount:"594",
-      comments:50,
-      likes:16,
-      // 内容标识类型,图文还是视频
-      flagType:1,
-      club:{
-        id: 1,
-        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
-        name:"博股俱乐部",
-        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
-        backgroundImage:""
-      },
-      channel:{
-        id:1,
-        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
-        name:"量价时空四维预测术",
-        // 订阅数量
-        subscriptionCount:60,
-        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
-      }
-      
-    },
-    {
-      id: 5,
-      cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
-      name:"壁垒将至？中美博弈开启拼刺刀白热化阶段",
-      user:{
-        id:1,
-        username:"HomilyLink",
-        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-        password:"123456",
-      },
-      releaseTime:"2024-01-24 09:55:00",
-      // 视频时长
-      videoDurition:"03:56:00",
-      // 观看数量
-      viewCount:"594",
-      comments:50,
-      likes:16,
-      // 内容标识类型,图文还是视频
-      flagType:0,
-      club:{
-        id: 1,
-        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
-        name:"博股俱乐部",
-        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
-        backgroundImage:""
-      },
-      channel:{
-        id:1,
-        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
-        name:"量价时空四维预测术",
-        // 订阅数量
-        subscriptionCount:60,
-        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
-      }
-      
-    }
-  ])
+function loadShows() {
+    shows.value = ([
+        {
+            id: 3,
+            cover: "	https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg",
+            name: "联合利剑！五大机器人史诗升级",
+            user: {
+                id: 1,
+                username: "HomilyLink",
+                avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+            },
+            releaseTime: "2024-05-26 11:42:00",
+            // 视频时长
+            videoDuration: "01:22:11",
+            // 观看数量
+            viewCount: 796,
+            comments: 1,
+            likes: 10,
+            // 内容标识类型,图文还是视频
+            flagType: 1,
+
+
+        },
+        {
+            id: 4,
+            cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
+            name: "壁垒将至？中美博弈开启拼刺刀白热化阶段",
+            user: {
+                id: 1,
+                username: "HomilyLink",
+                avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+            },
+            releaseTime: "2024-01-24 09:55:00",
+            // 视频时长
+            videoDuration: "03:56:00",
+            // 观看数量
+            viewCount: "594",
+            comments: 50,
+            likes: 16,
+            // 内容标识类型,图文还是视频
+            flagType: 1,
+            club: {
+                id: 1,
+                image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+                name: "博股俱乐部",
+                introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+                backgroundImage: ""
+            },
+            channel: {
+                id: 1,
+                image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+                name: "量价时空四维预测术",
+                // 订阅数量
+                subscriptionCount: 60,
+                backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
+            }
+
+        },
+        {
+            id: 5,
+            cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
+            name: "壁垒将至？中美博弈开启拼刺刀白热化阶段",
+            user: {
+                id: 1,
+                username: "HomilyLink",
+                avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+                password: "123456",
+            },
+            releaseTime: "2024-01-24 09:55:00",
+            // 视频时长
+            videoDurition: "03:56:00",
+            // 观看数量
+            viewCount: "594",
+            comments: 50,
+            likes: 16,
+            // 内容标识类型,图文还是视频
+            flagType: 0,
+            club: {
+                id: 1,
+                image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+                name: "博股俱乐部",
+                introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+                backgroundImage: ""
+            },
+            channel: {
+                id: 1,
+                image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+                name: "量价时空四维预测术",
+                // 订阅数量
+                subscriptionCount: 60,
+                backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
+            }
+
+        }
+    ])
 
 }
 // 
 loadShows();
 //订阅
-function submit(){
-    
+function submit() {
+
 }
 
 
@@ -148,16 +172,13 @@ function submit(){
     <ChannelNav></ChannelNav>
     <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>
+            <button v-for="channel in channelList" @click="toLink(channel.id)" class="nav-item">{{ channel.name }}</button>
         </div>
     </div>
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
-            <button v-if="channel.status==1" class="submited">已订阅</button>
+            <button v-if="channel.status && channel.status == 1" class="submited">已订阅</button>
             <button v-else class="submit" @click="submit">订阅</button>
             <!-- 2-背景图片 -->
             <img alt="" class="bc-image" :src="channel.backgroundImage" />
@@ -168,7 +189,7 @@ function submit(){
                 <!-- 频道title -->
                 <div class="title-content">
                     <h3 :name="channel.name">{{ channel.name }}</h3>
-                    <span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount}}已订阅</span>
+                    <span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount }}已订阅</span>
                     <p style="line-height: 18px;">.</p>
                 </div>
             </div>
@@ -177,9 +198,9 @@ function submit(){
         <div class="channel-content">
             <!-- 导航栏 -->
             <div class="content-nav">
-            <button class="tab">全部</button>
-            <button class="tab">文章</button>
-            <button class="tab">视频</button>
+                <button class="tab">全部</button>
+                <button class="tab">文章</button>
+                <button class="tab">视频</button>
             </div>
             <!-- 内容 -->
             <div class="content-list">
@@ -190,7 +211,7 @@ function submit(){
                             <!-- 左边 -->
                             <div class="sub-left">
                                 <img class="sub-image" :src="show.cover" alt="视频缩略图">
-                                <div v-if="show.flagType==1" :videoDuration="show.videoDuration" class="video-time">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
                                     {{ show.videoDuration }}
                                 </div>
                             </div>
@@ -198,7 +219,7 @@ function submit(){
                             <div class="sub-right">
                                 <!-- title -->
                                 <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
-                                
+
                                 <div class="right-inline">
                                     <!-- 发布的用户名 -->
                                     <div class="right-item">
@@ -208,7 +229,8 @@ function submit(){
                                     <!-- 评论 -->
                                     <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
                                     <!-- 日期 -->
-                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} </div>
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -220,86 +242,98 @@ function submit(){
 </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; 
+    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; 
+    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;
+    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; 
+    background-color: #407fdf;
+    color: #f1f1f1;
 }
 
 .nav-item.router-link-active {
-  background-color: #407fdf; 
-  color: white; 
-  border-radius: 5%;
+    background-color: #407fdf;
+    color: white;
+    border-radius: 5%;
 }
-.channel{
+
+.channel {
     width: 800px;
     margin-left: auto;
     margin-right: auto;
 }
-.channel-head{
+
+.channel-head {
     position: relative;
     height: 200px;
     width: 100%;
 }
-.bc-image{
+
+.bc-image {
     height: 100%;
     width: 100%;
 }
-.submited{
-    position: absolute; /* 绝对定位 */
-    top: 50px; /* 根据需要调整位置 */
-    right: 10px; /* 根据需要调整位置 */
+
+.submited {
+    position: absolute;
+    /* 绝对定位 */
+    top: 50px;
+    /* 根据需要调整位置 */
+    right: 10px;
+    /* 根据需要调整位置 */
     color: rgb(129, 132, 134);
     background-color: aliceblue;
     padding: 10px;
     border-radius: 10%;
     z-index: 999;
 }
-.submit{
-    position: absolute; /* 绝对定位 */
-    top: 50px; /* 根据需要调整位置 */
-    right: 10px; /* 根据需要调整位置 */
+
+.submit {
+    position: absolute;
+    /* 绝对定位 */
+    top: 50px;
+    /* 根据需要调整位置 */
+    right: 10px;
+    /* 根据需要调整位置 */
     color: rgb(129, 132, 134);
     background-color: aliceblue;
     padding: 10px 20px;
-    
+
     border-radius: 10%;
     z-index: 999;
 }
-.channel-title{
-    position:absolute;
+
+.channel-title {
+    position: absolute;
     top: 0px;
     left: 0px;
     padding-top: 60px;
@@ -311,21 +345,24 @@ function submit(){
     overflow: hidden;
 
 }
-.title-image{
+
+.title-image {
     width: 90px;
     height: 90px;
     margin-right: 25px;
     vertical-align: top;
     border-radius: 50%;
 }
-.title-content{
+
+.title-content {
     display: inline-block;
     position: absolute;
     width: 400px;
     color: white;
     overflow: hidden;
 }
-.channel-title h3{
+
+.channel-title h3 {
     max-width: 75%;
     overflow: hidden;
     white-space: nowrap;
@@ -335,7 +372,8 @@ function submit(){
     margin: 0px;
     z-index: 999;
 }
-.channel-title span{
+
+.channel-title span {
     padding: 4px 0;
     font-size: 14px;
     color: #fff;
@@ -343,77 +381,88 @@ function submit(){
 
 .content-nav {
     display: flex;
-    justify-content: flex-start; /* 修正了属性名中的空格 */
-    background-color: #fff; /* 修正了属性名中的空格 */
-    border-bottom: 1px solid #ccc; /* 修正了属性名中的空格 */
+    justify-content: flex-start;
+    /* 修正了属性名中的空格 */
+    background-color: #fff;
+    /* 修正了属性名中的空格 */
+    border-bottom: 1px solid #ccc;
+    /* 修正了属性名中的空格 */
     margin: 10px;
 }
 
 .tab {
     padding: 10px 20px;
     border: none;
-    background-color: transparent; /* 修正了属性名中的空格 */
+    background-color: transparent;
+    /* 修正了属性名中的空格 */
     cursor: pointer;
     font-size: 16px;
 }
 
 .active {
     color: red;
-    border-bottom: 2px solid red; /* 修正了属性名中的空格 */
+    border-bottom: 2px solid red;
+    /* 修正了属性名中的空格 */
 }
-.list-display{
+
+.list-display {
     list-style-type: none;
     padding: 0px;
 }
+
 .sub-topic {
     margin: 10px 0;
     padding: 10px;
-    display: flex; 
+    display: flex;
 
 }
-.sub-left{
+
+.sub-left {
     height: 112px;
     width: 200px;
     position: relative;
-    .sub-image{
-    width: 100%;
-    height: 100%;
+
+    .sub-image {
+        width: 100%;
+        height: 100%;
     }
-   
-    .video-time{
+
+    .video-time {
         position: absolute;
         left: 70%;
         top: 80%;
         color: #fff;
-        background-color: rgba(31, 30, 30, 0.5); 
+        background-color: rgba(31, 30, 30, 0.5);
         border-radius: 20%;
         font-size: smaller;
     }
 }
 
 
-.right-inline{
+.right-inline {
     display: flex;
     margin-bottom: 15px;
     align-items: center;
     font-size: 16px;
 
 }
-.right-title{
+
+.right-title {
     margin-left: 10px;
 }
-.right-item{
+
+.right-item {
     display: flex;
     color: #8e8e8e;
     font-size: 14px;
     margin-right: 18px;
     align-items: center;
 }
-.img1{
+
+.img1 {
     margin-left: 10px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
 }
-
 </style>
\ No newline at end of file