From d5deaa62db7656b2536eff07398afadc7880521c Mon Sep 17 00:00:00 2001
From: lenghui <h280650@163.com>
Date: Thu, 5 Dec 2024 13:21:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ChannelView.vue    |   6 +-
 vueHomilyLink/src/views/HomeView.vue       | 468 ++++++++++++++++-------------
 vueHomilyLink/src/views/club/BoguView.vue  |   3 +-
 vueHomilyLink/src/views/club/MuminView.vue |   3 +-
 vueHomilyLink/src/views/club/shenQiang.vue |   3 +-
 5 files changed, 276 insertions(+), 207 deletions(-)

diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 10f8b49..12ec0ec 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -288,24 +288,28 @@ function unsubmit(channelId){
     color: rgb(19, 18, 18);
     display: block;
     transition: 0.3s;
+    width: 250px;   
 }
 
 
 .nav-item:hover {
     background-color: #407fdf;
     color: #f1f1f1;
+    width: 250px;
 }
 
 .nav-item.button-active {
     background-color: #407fdf;
     color: white;
     border-radius: 5%;
+    width: 250px;
 }
 
 .channel {
-    width: 46%;
+    width: 50%;
     margin-left: auto;
     margin-right: auto;
+    margin-top: 20px;
 }
 
 .channel-head {
diff --git a/vueHomilyLink/src/views/HomeView.vue b/vueHomilyLink/src/views/HomeView.vue
index b4ec13e..dbf99ac 100644
--- a/vueHomilyLink/src/views/HomeView.vue
+++ b/vueHomilyLink/src/views/HomeView.vue
@@ -1,11 +1,12 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
-import { ref, onMounted, reactive,computed } from 'vue';
+import { ref, onMounted, reactive, computed } from 'vue';
 import homeApi from '@/api/HomeApi';
 
 const seeSrc = ref('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');
 const pingSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==');
 const zanSrc = ref('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=');
+const play = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAFBSURBVFiFzdhNSsUwFIbhE5d0RVEUF+EedA0qij/ouiqKojhwCw7v/MJ1JK8DG6jtbZu0OTn5oJM0gydfaKAR6QlQ1Q/ADbDdNzd7GrBm1sCFtU3qtobyaNrmCK6ZcyvgMgKZv80InE2bA4jvgDYXlsCfItoMRIxFr81EQJ/0bSYGwt+hn65NBaBPmjYVgZCiTWWgz1npQJjaZkagz2CbbhMwelXz8yUix865z/aLUoAiIuKc63i2LCB9Aar2WFHATSlqi0W621xag7ftgaIaLPkjWYnISdBMg4P6IWopGWEfwFF015lw99GwTMB34HAyThl4NwumCHwDDpLgFICdg7cU4Cuwnxw3Agz9cb9WgQUAx/IC7KniZgCv1GETgc/AbjZcDawCcZdZYRHAJ2DHBNdA9sX+Et2H/5fpFXBq4fgF4t3cL8okR7EAAAAASUVORK5CYII=');
 
 const clubMark1Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/416cf8f2e000451043b1d1af74b5dbb8.png ');
 const clubMark2Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS1.b631a2c3.png');
@@ -24,7 +25,7 @@ const articleData = reactive({
   playTime: '',
   club_id: '',
   publishTime: '',
-  flag_type:''
+  flag_type: ''
 });
 
 // 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中
@@ -60,7 +61,7 @@ async function selectAll() {
   try {
     const response = await homeApi.gethomeList();
     mapResponseToArticleData(response.data);
-    
+
   } catch (error) {
     console.error('获取数据出错：', error);
   }
@@ -72,7 +73,7 @@ selectAll();
 
 // 精选视频接口
 const articleData2 = ref([]);
-function fetchData (){
+function fetchData() {
   homeApi.getHomeVideo().then(response => {
     // 将articleData响应式对象赋值给articleData2
     articleData2.value = response.data;
@@ -83,7 +84,7 @@ function fetchData (){
       const hours = ('0' + date.getHours()).slice(-2);
       const minutes = ('0' + date.getMinutes()).slice(-2);
       return {
-       ...item,
+        ...item,
         releaseTime: `${month}-${day} ${hours}:${minutes}`
       };
     });
@@ -92,7 +93,7 @@ function fetchData (){
     console.error('获取数据出错：', error);
   });
 };
-fetchData ();
+fetchData();
 
 
 
@@ -122,49 +123,56 @@ const getColorClass = (index) => {
       <div class="container" style="width: 600px;">
         <div class="title"><b>推荐</b></div>
         <ul class="data-list">
-  <li class="data-list-li articleList" v-for="(title, index) in articleData.title" :key="index">
-    <!-- 下面继续展示对应数据的渲染，和之前类似 -->
-    <div class="articleimg">
-      <div class="el-image articleimg-img">
-        <img :src="articleData.articleImgSrc[index]" alt="文章图片">
-        <span class="play-icon"></span>
-      </div>
-      <div class="club">
-          <span class="club_img">
-          <img v-if="articleData.club_id[index] === 1" :src="clubMark1Src" alt="club_id为1的角标">
-          <img v-else-if="articleData.club_id[index] === 2" :src="clubMark2Src" alt="club_id为2的角标">
-          <img v-else-if="articleData.club_id[index] === 3" :src="clubMark3Src" alt="club_id为3的角标">
-          <img v-else-if="articleData.club_id[index] === 4" :src="clubMark4Src" alt="club_id为4的角标">
-        </span>
-        </div>
-    </div>
-    <div class="articleinfo">
-      <p><b>{{ title }}</b></p>
-      <span class="articleinfo-avatar islink" style="font-size: 14px;">
-        <img :src="articleData.authorAvatarSrc[index]" alt="作者头像">
-        {{ articleData.authorName[index] }}
-      </span>
-      <span class="articleinfo-time" alt="发布时间">
-        {{ articleData.publishTime[index] }}
-      </span>
-      <span class="homepage-list-li-see">
-        <img :src="seeSrc" alt="浏览量图标">
-        {{ articleData.viewsCount[index] }}
-      </span>
-      <span class="homepage-list-li-ping">
-        <img :src="pingSrc" alt="评论数图标">
-        {{ articleData.commentsCount[index] }}
-      </span>
-      <span class="homepage-list-1i-zan">
-        <img :src="zanSrc" alt="点赞图标">
-        {{ articleData.likesCount[index] }}
-      </span>
-    </div>
-  </li>
-</ul>
+          <li class="data-list-li articleList" v-for="(title, index) in articleData.title" :key="index">
+            <!-- 下面继续展示对应数据的渲染，和之前类似 -->
+            <div class="articleimg">
+              <div class="el-image articleimg-img">
+                <img :src="articleData.articleImgSrc[index]" alt="文章图片">
+                <div class="play-icon-container">
+                  <span class="play-icon" v-if="articleData.flag_type[index]===1"></span>
+                  <span class="play-icon-background" v-if="articleData.flag_type[index]===1"></span>
+                </div>
+              </div>
+              <div class="club">
+                <span class="club_img">
+                  <img v-if="articleData.club_id[index] === 1" :src="clubMark1Src" alt="club_id为1的角标">
+                  <img v-else-if="articleData.club_id[index] === 2" :src="clubMark2Src" alt="club_id为2的角标">
+                  <img v-else-if="articleData.club_id[index] === 3" :src="clubMark3Src" alt="club_id为3的角标">
+                  <img v-else-if="articleData.club_id[index] === 4" :src="clubMark4Src" alt="club_id为4的角标">
+                </span>
+              </div>
+            </div>
+            <div class="articleinfo">
+              <p><b>{{ title }}</b></p>
+              <div class="right-inline">
+                <!-- HomilyLink -->
+                <div class="right-item">
+                  <img :src="articleData.authorAvatarSrc[index]" class="img1">
+                  <div>{{ articleData.authorName[index] }}</div>
+                </div>
+                <!-- 日期 -->
+                <div class="right-item">{{ articleData.publishTime[index] }}</div>
+                <!-- 观看 -->
+                <div class="right-item">
+                  <img :src="seeSrc" class="img2">
+                  <div>{{ articleData.viewsCount[index] }}</div>
+                </div>
+                <!-- 评论 -->
+                <div class="right-item">
+                  <img :src="pingSrc" class="img2">
+                  <div>{{ articleData.commentsCount[index] }}</div>
+                </div>
+                <!-- 点赞 -->
+                <div class="right-item">
+                  <img :src="zanSrc" class="img2">
+                  <div>{{ articleData.likesCount[index] }}</div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
       </div>
 
-
       <!-- 精选视频 -->
       <div class="sidebar-right" style="width: 400px; float: right;">
         <div>
@@ -172,159 +180,209 @@ const getColorClass = (index) => {
             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHJSURBVFiF1ZhRkoMgDIb/OD1CPc/SWe5Vey86i+dx75B9KHHEWsEItvu/tFYGviaQkBCUGqw1AECM6+RnEz49ADChB4DWuU67DinAOmJ8TWBy5ZnQb4XNBgxg1/TItJhwywVNAg7WGmL87KZaUA5os/YyWK0KHPDYv4O13eqYVy9KujSlNUsuAh4JJ3oF+QT4DjjREmQE+E44ERMurXNenqND8m64wBAdyhEwdZqO1JRlBNRYjwk3hLRWUlOWBtBZTzb0+e4uAbSohKkBgJBbt8rLlwBKJUGFSVxsSkxaGNQM1pqmxuFonetKWXM1F+9RCWsS49oo91+29oJWs+Bcwe2bTzz9flvWLDhPSVu0Zc3DLKjVCY94Zo5YLNzOt2Qsf6pGM5P2plQdcART7HQm9Ccm3IjLu3h05865i1uwFBjwCE1NCBV+72RAVAWaAtN5IFiQCf0eN4+1syqiLkvaJmNNogjYPvwxTRskqfPdETAJ1IpcKTHNFOR6YomqOm3aKy2xHjBLdUy4HI8Ta+7JCLB1zteoL3KVLNxFH936EH1080h0BGSqR5jTwKwGmXPp/f8t4Lk+tom+JKmpJ5WhERgZI2FLW7/8AexhA1wjeFcZAAAAAElFTkSuQmCC"
             alt style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle;">精选视频
         </div>
-        <ul class="data-list" >
+        <ul class="data-list">
           <li class="data-list-li articleList" v-for="(article, index) in articleData2" :key="index">
-    <div class="articleimg">
-      <div class="el-image articleimg-img" >
-        <img :src="article.cover" alt="文章图片">
-        <span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
-        <span class="play-time">{{ article.videoDuration }}</span>
-      </div>
-    </div>
-    <div class="articleinfo">
-      <span class="articletitle">{{ article.name }}</span>
-      <span class="see">
-        <img :src="seeSrc" alt="浏览量图标">
-        {{ article.viewCount }}
-      </span>
-      <span class="articleinfo-time">{{ article.releaseTime }}</span>
-    </div>
-  </li>
-</ul>
+            <div class="articleimg">
+              <div class="el-image articleimg-img">
+                <img :src="article.cover" alt="文章图片">
+                <span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
+                <span class="play-time">{{ article.videoDuration }}</span>
+              </div>
+            </div>
+            <div class="articleinfo">
+              <span class="articletitle">{{ article.name }}</span>
+              <div class="right-inline">
+                <!-- 观看 -->
+                <div class="right-item">
+                  <img :src="seeSrc" class="img2">
+                  <div>{{ article.viewCount }}</div>
+                </div>
+                <!-- 日期 -->
+                <div class="right-item">{{ article.releaseTime }}</div>
+              </div>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.articletitle{
+.img1 {
+  width: 22px;
+  height: 22px;
+}
+
+.img2 {
+  width: 18px;
+  height: 18px;
+}
+
+.right-inline {
+  display: flex;
+  margin-bottom: 5px;
+  align-items: center;
+  font-size: 16px;
+}
+
+.right-item {
+  display: flex;
+  color: #8e8e8e;
+  font-size: 14px;
+  margin-right: 18px;
+  align-items: center;
+}
+
+.articletitle {
   display: block;
   font-size: 16px;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
+
 .play-icon {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 10px 0 10px 16px; /* 根据需要调整三角形大小 */
-    border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); /* 白色半透明三角形，可调整颜色 */
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 10px 0 10px 16px;
+  /* 根据需要调整三角形大小 */
+  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
+  /* 白色半透明三角形，可调整颜色 */
+  position: absolute;
+  bottom: 180%;
+  left: 150%;
+  transform: translate(150%, -50%);
+  z-index: 1;
+}
+
+.play-icon-container {
+  width: 30px;
+  /* 可以根据需求调整这个容器宽度，用于控制整体大小和布局 */
+  height: 30px;
+  /* 可以根据需求调整这个容器高度，用于控制整体大小和布局 */
+  position: relative;
 }
-.daohang{
-    height: 32px;
+
+.play-icon-background {
+  content: "";
+  width: 35px;
+  /* 调整圆形的直径大小 */
+  height: 35px;
+  /* 调整圆形的直径大小 */
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  bottom: 190%;
+  left: 75%;
+  transform: translateX(100%);
+  z-index: 0;
 }
-.container{
-    margin-right: 0;
-    margin-left: auto;
-    
+
+.daohang {
+  height: 32px;
 }
-.sidebar-right{
-    margin-right: auto;
-    margin-left: 0;
+
+.container {
+  margin-right: 0;
+  margin-left: auto;
+
 }
+
+.sidebar-right {
+  margin-right: auto;
+  margin-left: 0;
+}
+
 body {
-            font-family: Arial, sans-serif;
-        }
-        .title {
-            font-size: 24px;
-            color: #333;
-            padding: 10px 0;
-
-        }
-        .data-list-li {
-            display: flex;
-            align-items: flex-start;
-            padding: 10px 0;
-        }
-        .articleimg {
-            position: relative; /* 设置相对定位 */
-            width: 150px;
-            height: 100px;
-            margin-right: 10px; /* 减少右边距以让文字更靠近图片 */
-            border-radius: 5px;
-            /* overflow: hidden; */
-        }
-        .articleimg-img img {
-            width: 150px;
-            height: 90px;
-            object-fit: cover;
-        }
-        .articleinfo {
-            flex-grow: 1;
-            font-size: 20px;
-            margin: 0;
-            padding: 0;
-        }
-        .articleinfo p {
-            margin: 0; /* 移除外边距 */
-            font-size: 20px;
-            color: #555;
-            margin-bottom: 7%;
-        }
-        .right_inline {
-            display: inline-block;
-            vertical-align: top;
-        }
-        .articleinfo-avatar {
-            margin-left: 0;
-            display: inline-block;
-        }
-        .articleinfo-avatar img {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-        }
-        .articleinfo-time {
-            font-size: 13px;
-            color: #000000;
-            margin-left: 10px;
-        }
-        .homepage-list-li-see,
-        .homepage-list-li-ping,
-        .homepage-list-1i-zan {
-            display: inline-block;
-            margin-left: 10px;
-            cursor: pointer;
-            font-size: 13px;
-        }
-        .homepage-list-li-see img,
-        .homepage-list-li-ping img,
-        .homepage-list-1i-zan img {
-            width: 20px;
-            height: 20px;
-            padding: 0;
-            margin-left: 0;
-        }
-        .see{
-          margin-left: 0;
-          font-size: 13px;
-        }
-        .see img{
-          width: 20px;
-          height: 20px;
-        }
-        .class123{
-            /*让页面分为左右结构*/
-            display: flex;
-            margin-top: 30px
-        }
-
-        .corner-mark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: rgb(128, 128, 128);
-    color: white;
-    padding: 2px 5px;
-    border-radius: 2px;
-    font-size: 12px;
+  font-family: Arial, sans-serif;
+}
+
+.title {
+  font-size: 24px;
+  color: #333;
+  padding: 10px 0;
+
+}
+
+.data-list-li {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px 0;
+}
+
+.articleimg {
+  position: relative;
+  /* 设置相对定位 */
+  width: 150px;
+  height: 100px;
+  margin-right: 10px;
+  /* 减少右边距以让文字更靠近图片 */
+  border-radius: 5px;
+  /* overflow: hidden; */
+}
+
+.articleimg-img img {
+  width: 150px;
+  height: 90px;
+  object-fit: cover;
+}
+
+.articleinfo {
+  flex-grow: 1;
+  font-size: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+.articleinfo p {
+  margin: 0;
+  /* 移除外边距 */
+  font-size: 20px;
+  color: #555;
+  margin-bottom: 10%;
+}
+
+.right_inline {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.articleinfo-avatar {
+  margin-left: 0;
+  display: inline-block;
+}
+
+.articleinfo-avatar img {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+.articleinfo-time {
+  font-size: 13px;
+  color: #000000;
+  margin-left: 10px;
+}
+
+.class123 {
+  /*让页面分为左右结构*/
+  display: flex;
+  margin-top: 30px
+}
+
+.corner-mark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgb(128, 128, 128);
+  color: white;
+  padding: 2px 5px;
+  border-radius: 2px;
+  font-size: 12px;
 }
 
 .color-red {
-    background-color: red;
+  background-color: red;
 }
 
 .color-green {
@@ -336,31 +394,35 @@ body {
 }
 
 .play-time {
-    position: absolute;
-    bottom: 4%;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，可调整透明度和颜色 */
-    color: white;
-    padding: 2px 5px;
-    border-radius: 2px;
-    font-size: 12px;
+  position: absolute;
+  bottom: 4%;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  /* 半透明黑色背景，可调整透明度和颜色 */
+  color: white;
+  padding: 2px 5px;
+  border-radius: 2px;
+  font-size: 12px;
 }
 
 .club {
-    position: absolute;
-    top: 0;
-    right: 0;
-    /* 可以根据实际需求调整容器大小等样式 */
-    
-    width: 10px;
-    height: 10px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* 可以根据实际需求调整容器大小等样式 */
+
+  width: 10px;
+  height: 10px;
 }
+
 .club_img img {
-    position: absolute;
-    top: 0;
-    right: 0;
-    /* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
-    width: 15px; /* 假设调整宽度 */
-    height: 15px; /* 假设调整高度 */
-  }
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
+  width: 15px;
+  /* 假设调整宽度 */
+  height: 15px;
+  /* 假设调整高度 */
+}
 </style>
diff --git a/vueHomilyLink/src/views/club/BoguView.vue b/vueHomilyLink/src/views/club/BoguView.vue
index 3677364..7c0264e 100644
--- a/vueHomilyLink/src/views/club/BoguView.vue
+++ b/vueHomilyLink/src/views/club/BoguView.vue
@@ -112,9 +112,10 @@ loadShows();
 </template>
 <style scoped>
 .club{
-    width: 46%;
+    width: 50%;
     margin-left: auto;
     margin-right: auto;
+    margin-top: 20px;
 }
 header {
     background: linear-gradient(to right,  #ffe5ca,#ffca95,#ffa953);
diff --git a/vueHomilyLink/src/views/club/MuminView.vue b/vueHomilyLink/src/views/club/MuminView.vue
index 0c4880c..fad8226 100644
--- a/vueHomilyLink/src/views/club/MuminView.vue
+++ b/vueHomilyLink/src/views/club/MuminView.vue
@@ -110,9 +110,10 @@ loadShows();
 </template>
 <style scoped>
 .club{
-    width: 46%;
+  width: 50%;
     margin-left: auto;
     margin-right: auto;
+    margin-top: 20px;
 }
 header {
     background: linear-gradient(to right,  #f5f8fa,#dde7ee,#c7d9e5);
diff --git a/vueHomilyLink/src/views/club/shenQiang.vue b/vueHomilyLink/src/views/club/shenQiang.vue
index bcffd5f..e608592 100644
--- a/vueHomilyLink/src/views/club/shenQiang.vue
+++ b/vueHomilyLink/src/views/club/shenQiang.vue
@@ -110,9 +110,10 @@ loadShows();
 </template>
 <style scoped>
 .club{
-    width: 46%;
+    width: 50%;
     margin-left: auto;
     margin-right: auto;
+    margin-top: 20px;
 }
 header {
     background: linear-gradient(to right,  #dbeaf6,#8bc7f9,#30a0fc);