From f4f5040a472b72270f550400e03ba232c94de8b4 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Thu, 28 Nov 2024 19:37:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=9A=E5=8F=A4=E4=BF=B1=E4=B9=90=E9=83=A8?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ClubView.vue | 250 ++++++++++++++++++++++++++++++++++-
 1 file changed, 249 insertions(+), 1 deletion(-)

diff --git a/vueHomilyLink/src/views/ClubView.vue b/vueHomilyLink/src/views/ClubView.vue
index 5f75119..0576723 100644
--- a/vueHomilyLink/src/views/ClubView.vue
+++ b/vueHomilyLink/src/views/ClubView.vue
@@ -1,10 +1,258 @@
 <script setup>
+import Nav from '@/components/Nav.vue';
+
 
 </script>
 
 <template>
-俱乐部
+    <Nav></Nav>
+    <div class="club">
+    <!-- 俱乐部相关信息 -->
+    <header>
+      <div class="club-header1">
+        <img class="club-image" :src="clubImage" alt="视频缩略图">
+        <button class="club-button" @click="handleMore">查看更多</button>
+      </div>
+      
+      <p>博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。</p>
+    </header>
+    <section class="special-topic">
+      <div class="special-topic">
+        <h2>专题</h2>
+      </div>
+      <div class="topic">
+        <div class="topic-title">
+          <p>前言股市投资分享之左侧交易</p>
+          <span @click="handleMore">查看更多</span>
+        </div>
+        
+        <!-- 视频 -->
+        <div class="sub-topic">
+          <ul class="display-list">
+            <li v-for="(video, index) in videos" :key="index">
+              <!-- 左边 -->
+              <div class="sub-left">
+                <img class="sub-image" :src="video.thumbnail" alt="视频缩略图">
+                <img class="player" src="../image/播放按钮图.png">
+              </div>
+              <!-- 右边 -->
+              <div class="sub-right">
+                <div class="right-inline">
+                  <img :src="clubLogo" class="logo">
+                  <span>第一节《影型结构同现》</span>
+                </div>
+                <div class="right-inline">
+                  <div class="yellow">
+                    <img src="../image/五角星.png" class="img2">
+                    <span>博股俱乐部</span>
+                  </div>
+                </div>
+                <div class="right-inline">
+                  <!-- HomilyLink -->
+                  <div class="right-item">
+                    <img :src="video.homilyLink" class="img1">
+                    <div>HomilyLink</div>
+                  </div>
+                  <div class="right-item">{{ video.time }}</div>
+                  <!-- 观看 -->
+                  <div class="right-item">
+                    <img src="../image/观看icon.png" class="img2">
+                    <div>{{ video.views }}</div>
+                  </div>
+                  <!-- 评论 -->
+                  <div class="right-item">
+                    <img src="../image/评论icon.png" class="img2">
+                    <div>{{ video.comments }}</div>
+                  </div>
+                  <!-- 点赞 -->
+                  <div class="right-item">
+                    <img src="../image/点赞icon.png" class="img2">
+                    <div>{{ video.likes }}</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 <style scoped>
+.club{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+header {
+    background-color: #ffba75;
+    padding: 20px;
+    border-radius: 2%;
+}
+
+.club-header1 {
+    display: flex; /* 启用flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: space-between; /* 在主轴上两端对齐 */
+    padding: 10px; /* 可选：根据需要添加内边距 */
+}
+
+.club-image {
+    height: 80px;
+    width: 80px;
+    max-width: 100%; 
+    /* height: auto; 保持图片的原始宽高比 */
+    margin-left: 50px;
+    border-radius: 100%; /* 设置图片为圆形 */
+}
+
+.club-button{
+    margin-left: auto; /* 将按钮推向右侧 */
+    margin-right: 50px;
+    padding: 5px;
+    background-color: #ff9900;
+    color: white;
+    border: none;
+    top: 20px; /* 距离顶部20px */
+    right: 20px; /* 距离右侧20px */
+    cursor: pointer;
+    color: #72706a;
+    border-radius: 5%;
+}
+
+header p {
+    margin: 10px 10px;
+    
+}
+.special-topic {
+    margin: 20px;
+}
+
+.topic h3 {
+    background-color: #e0e0e0;
+    padding: 10px;
+    margin: 0;
+}
+.special-topic {
+    background-color: #f8f8f8; /* 背景颜色，根据需要调整 */
+    padding: 10px; /* 内边距，根据需要调整 */
+    margin: 20px 0; /* 外边距，根据需要调整 */
+}
+
+.special-topic h2 {
+    margin: 0; /* 移除默认的外边距 */
+    padding-bottom: 5px; /* 下方内边距，为下划线留出空间 */
+    border-bottom: 2px solid #007bff; /* 下划线样式 */
+    display: inline-block; /* 使下划线只在文字下方 */
+}
+.topic-title{
+    display: flex;
+    justify-content: space-between;
+    span{
+        margin-left: auto; /* 向右对齐 */
+        margin-right: 50px;
+        color: #8e8e8e;
+        font-size: 14px;
+    }
+    p{
+        display: inline-block;
+        font-size: 20px;
+        
+    }
+}
+.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{
+    display: flex; 
+}
+.sub-left{
+    height: 112px;
+    width: 200px;
+    position: relative;
+    .sub-image{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .player{
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        left: 40%;
+        top: 40%;
+    }
+}
+
+.sub-right{
+    margin-left: 20px;
+    
+}
+.right-inline{
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+    .yellow{
+        display: flex;
+        color: #e4af5f;
+        font-size: 14px;
+        height: 18px;
+    }
+    .right-item{
+        display: flex;
+        color: #8e8e8e;
+        font-size: 14px;
+        margin-right: 18px;
+        align-items: center;
+    }
+}
+
+.logo{
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+}
+.img1{
+    width: 22px;
+    height: 22px;
+}
+.img2{
+    width: 18px;
+    height: 18px;
+}
+.club-badge {
+    display: inline-flex; /* 使用flex布局使图标和文字并排 */
+    align-items: center; /* 垂直居中对齐 */
+    background-color: #f0f0f0; /* 背景颜色 */
+    padding: 5px 10px; /* 内边距 */
+    border-radius: 15px; /* 圆角边框 */
+    font-size: 14px; /* 字体大小 */
+    color: #333; /* 字体颜色 */
+}
+
+.club-icon {
+    width: 16px; /* 图标宽度 */
+    height: 16px; /* 图标高度 */
+    margin-right: 5px; /* 图标和文字之间的间距 */
+}
+
+.club-text {
+    white-space: nowrap; /* 防止文本换行 */
+    color: #ffba75;
+}
 
+.sub-topic p {
+    margin: 5px 0;
+}
 </style>
\ No newline at end of file