From 02de0f4ab5830359f7aafc183982b0f29a0876ae Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Fri, 29 Nov 2024 19:50:59 +0800
Subject: [PATCH] =?UTF-8?q?js=E6=A8=A1=E6=8B=9F=E6=95=B0=E6=8D=AE=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ClubView.vue | 138 ++++++++++++++++++++++++++++-------
 1 file changed, 110 insertions(+), 28 deletions(-)

diff --git a/vueHomilyLink/src/views/ClubView.vue b/vueHomilyLink/src/views/ClubView.vue
index 0576723..29a379d 100644
--- a/vueHomilyLink/src/views/ClubView.vue
+++ b/vueHomilyLink/src/views/ClubView.vue
@@ -1,7 +1,84 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
 
+// 俱乐部
+const club = ref()
+// 加载俱乐部信息
+function loadClub(){
+  club.value = {
+    id: 1,
+    image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+    name:"博股俱乐部",
+    introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+    backgroundImage:""
+};
+}
+loadClub();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  shows.value = ([
+    {
+      id: 1,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/1nzz3jjlxo0d1j9karz0ev31l0ryr0cj.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:2,
+      likes:10,
+      // 内容标识类型,图文还是视频
+      flagType:1,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+    },
+    {
+      id: 2,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0oxr0cymk998qbud22ztc1559v.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:0,
+      likes:16,
+      // 内容标识类型,图文还是视频
+      flagType:2,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+    }
+  ])
 
+}
+// 
+loadShows();
 </script>
 
 <template>
@@ -10,12 +87,13 @@ import Nav from '@/components/Nav.vue';
     <!-- 俱乐部相关信息 -->
     <header>
       <div class="club-header1">
-        <img class="club-image" :src="clubImage" alt="视频缩略图">
+        <img class="club-image" :src="club.image" alt="视频缩略图">
         <button class="club-button" @click="handleMore">查看更多</button>
       </div>
       
-      <p>博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。</p>
+      <p>{{ club.introduction }}</p>
     </header>
+    <!-- 俱乐部内容 -->
     <section class="special-topic">
       <div class="special-topic">
         <h2>专题</h2>
@@ -26,48 +104,49 @@ import Nav from '@/components/Nav.vue';
           <span @click="handleMore">查看更多</span>
         </div>
         
-        <!-- 视频 -->
+        <!-- 展示列表 -->
         <div class="sub-topic">
           <ul class="display-list">
-            <li v-for="(video, index) in videos" :key="index">
+            <li v-for="show in shows">
               <!-- 左边 -->
               <div class="sub-left">
-                <img class="sub-image" :src="video.thumbnail" alt="视频缩略图">
-                <img class="player" src="../image/播放按钮图.png">
+                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                <img v-if="show.flagType==1" class="player" src="data:image/png;base64,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">
               </div>
               <!-- 右边 -->
               <div class="sub-right">
                 <div class="right-inline">
-                  <img :src="clubLogo" class="logo">
-                  <span>第一节《影型结构同现》</span>
+                  <img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo">
+                  <span :name="show.name">{{ show.name }}</span>
                 </div>
                 <div class="right-inline">
                   <div class="yellow">
-                    <img src="../image/五角星.png" class="img2">
-                    <span>博股俱乐部</span>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAI4SURBVFiF7VhBcsIwDFy5/VfNDPRNcIKcwptKZ3Af1qiHJMVOZFty6K17gqDIy8peKQH+0QbamoD7vZ8/D3DeYQgAQKfPsDV3Eznu956JztNXX4xl6gDg5fRxsa5jIheRKhLK3s/UWUiqyG0lleRi6hyGoCl7ldxE7K5cO0D5BzQqutKP3/37xUAM7njbaWOJ+Pzdv1+K+UrEiPic+32JeeNjVE8FIj7Hp11Fjvu9txBLFmTu6lHRWkT3HEGR3AAnBpcw758Wf4tsKcGKnLWcQFLSGcFyPwAvqbci11rOJIextICsXmIlLaoBgDveVpY0XA9szUPMu3hbFK1EA6GkM0Lmej7XQr3X+MtCtaApD0EWyB1vu5JNAOPBK1UqKYdUCms/1CLXeeLSujhYSqJxciu0nee1FgCMBIfr4Y2Yuy1z2mOAYK+J/1VOYbyeie6tKkZqFdeJebjHh3GCraGlzMP1cG+yKOsNgI3gtJe9ntBDpGaf+4sTDKS92S0uhnW4CG2cNW+CJuWY6Uu8nrMjZa9ddpuEnDaJVNL5ND7TE6WGXT3ucaPPPPyEpSda8wLSyFRRL5a+4F1mT5QGiDW5ygaej7rGu2LLKf3pXP8WD0RNvWlA8KWYmOBwPfDk/EGKyTWA7HOr8Xm1GaWpJ2sldPoMhUHyKaiNY9Un/tbRvYblSC7GaBJxv/e1qdWAlc3kYHrLtFFFNakZTe/nfu2hTjQA4+lvGVI3v9kEHmUHUlt4xtvNf7TgB2p5V6EQkIsLAAAAAElFTkSuQmCC" class="img2">
+                    <span :clubname="show.club.name">{{ show.club.name }}</span>
                   </div>
                 </div>
                 <div class="right-inline">
                   <!-- HomilyLink -->
                   <div class="right-item">
-                    <img :src="video.homilyLink" class="img1">
-                    <div>HomilyLink</div>
+                    <img :src="show.user.avatar" class="img1">
+                    <div :username="show.user.username">show.user.username</div>
                   </div>
-                  <div class="right-item">{{ video.time }}</div>
+                  <!-- 日期 -->
+                  <div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div>
                   <!-- 观看 -->
                   <div class="right-item">
-                    <img src="../image/观看icon.png" class="img2">
-                    <div>{{ video.views }}</div>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIjSURBVFiF7VhtkqQgDE2sudfSxwAOox4GOUYzFzPzY2Ar0higdWtnqni//IjwQh5JBGBgYGBg4H8C7xrIe68AAPZ9V4j4h4g+07tpmoLWOtwxzyXC3ntFRDMAqBZ7IlqttcuVOd8i3Es0xxXi3YSdcwsiztnjAACAiCsAQAq/917t+67iu/ybt4h3Ed627QnHVQ2IuLbqs+RsL+lmwjnZK2EtEA/GmEfLt1XCJb0i4uPqro/jPtmjpmhVCW/bRj2D8vRWi8A7iyESzkInhk3KHDX5ZHIT5zklnOvMGNNsW0IPacl2aiGAiKcelzYQIj6IaCWilY0xJ7mUkFJizbZImBMgIlGzua0x5qG1DtbaxVq7cNJRMkVorUNm+yyRfiHsnFs4ASmMfMAz2/gsxFslrXJmW3TwQNh7r/gmq+3yVMVq4OGuIW64EG9fHCxKohXTNIXSdQ7uWKOTpzYHwlGraWLF5VGDpM/DhIJjAEdJAsBLW1pMVbxYNKQj0fZKeizZfpQ+jGnpGa9n7/1pA57bOucA4Hsl80LCs0AOVnhE26KGCymmOR0h4oyIc3TiQFaKFO8rJFuxNPeUTKHaVfuPW0ozG6yr+QH4Jp82V61RymUjabyJMMBrL/yj28uEX9PAVybqIn7SgjaTBbjvJ/RvGuJnEKmssiyj8m/+6U8oR0sPLKDr55Xj8slPJ/G3iSbcelTFG5t0XNWS3gYGBgYGfg++AMoF42iHsimVAAAAAElFTkSuQmCC" class="img2">
+                    <div :viewCount="viewCount">{{ show.viewCount }}</div>
                   </div>
                   <!-- 评论 -->
                   <div class="right-item">
-                    <img src="../image/评论icon.png" class="img2">
-                    <div>{{ video.comments }}</div>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2">
+                    <div :comments="show.comments">{{ show.comments }}</div>
                   </div>
                   <!-- 点赞 -->
                   <div class="right-item">
-                    <img src="../image/点赞icon.png" class="img2">
-                    <div>{{ video.likes }}</div>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHOSURBVFiF7ZjdbawwEIXPISkknVzvC9p2sAtgKQC7hrTBS0wn9zbiyQsg4/3JgnfjKLpHWgmN/74dezwDwH/dFnMGO+eUiLQAlIh0AGCMOeXMWeUMDiEoAAoASLYk277vs4Be9g7s+/5EsgUAEelIAsAbSVXXNYdh8HvmzfLQJG+MOWmtD/O2kWydc+rbgGLvkOxme+752Q0Uq2kan5g8AEyHfbM2A6VnZ8+iDwWK9YgtSrUJyDmnnumdzUDTvQPgOd4BgNctnTd6R1lrP641isgInP+xu4HiG3iDd9S1BpJqmnc1391A93qHZBdCGL/o8wdRynHO+fn6WCXXS3nIGHOKQ11rnZWQY1lrZXr0WusDEHkoytwrOed8COFRDCtNOXC1ZhU17rpZczRt3UpnYT9RH74HaVlzOXOPyPY5UqmhGFBcnlRV5ZfnEjC3VAwoTkNxCVMMKIowH9uLb1kcYUBZIHXJWNxDqYoAXQt54Ad4KH1JKAIUh3yqIkBzyF+qrc4KNJJtmvmrqvKzzVr7kYbqDhh1rX0BEpFxLiu/kLqz302JSHepFF4+NgzD4I/H4ygi/wCM84/k36ZpfF3XnD8oZLJ4EXl/1lvL79cnbWbUVZZeqYsAAAAASUVORK5CYII=" class="img2">
+                    <div :likes="show.likes">{{ show.likes }}</div>
                   </div>
                 </div>
               </div>
@@ -85,7 +164,7 @@ import Nav from '@/components/Nav.vue';
     margin-right: auto;
 }
 header {
-    background-color: #ffba75;
+    background: linear-gradient(to right,  #ffe5ca,#ffca95,#ffa953);
     padding: 20px;
     border-radius: 2%;
 }
@@ -117,7 +196,7 @@ header {
     right: 20px; /* 距离右侧20px */
     cursor: pointer;
     color: #72706a;
-    border-radius: 5%;
+    border-radius: 10%;
 }
 
 header p {
@@ -127,12 +206,15 @@ header p {
 .special-topic {
     margin: 20px;
 }
-
-.topic h3 {
+.topic{
+  background: linear-gradient(to bottom,  #fff9e9,#fffcf3,#fffffd);
+  h3 {
     background-color: #e0e0e0;
     padding: 10px;
     margin: 0;
 }
+}
+
 .special-topic {
     background-color: #f8f8f8; /* 背景颜色，根据需要调整 */
     padding: 10px; /* 内边距，根据需要调整 */
@@ -163,14 +245,12 @@ header p {
 .sub-topic {
     margin: 10px 0;
     padding: 10px;
-    background-color: #f0f0f0;
     display: flex; 
 
 }
 .display-list{
     list-style-type: none;
     padding: 0px;
-    background-color: #f0f0f0;
     
 }
 .sub-topic li{
@@ -187,10 +267,11 @@ header p {
     }
     .player{
         position: absolute;
-        width: 30px;
-        height: 30px;
+        width: 40px;
+        height: 40px;
         left: 40%;
         top: 40%;
+        z-index: 999;
     }
 }
 
@@ -205,9 +286,10 @@ header p {
     font-size: 16px;
     .yellow{
         display: flex;
-        color: #e4af5f;
+        color: #e9a479;
         font-size: 14px;
         height: 18px;
+        background-color: #ffefdf;
     }
     .right-item{
         display: flex;