显示优化

7 months ago · d5deaa62db
5 changed files with 276 additions and 207 deletions
--- 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 {
--- a/vueHomilyLink/src/views/HomeView.vue
+++ b/vueHomilyLink/src/views/HomeView.vue
@ -6,6 +6,7 @@ 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');
@ -127,7 +128,10 @@ const getColorClass = (index) => {
            <div class="articleimg">
              <div class="el-image articleimg-img">
                <img :src="articleData.articleImgSrc[index]" alt="文章图片">
-        <span class="play-icon"></span>
+                <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">
@ -140,31 +144,35 @@ const getColorClass = (index) => {
            </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 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>
@ -183,11 +191,15 @@ const getColorClass = (index) => {
            </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 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>
@ -197,115 +209,161 @@ const getColorClass = (index) => {
 </template>

 <style scoped>
+.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); /* 白色半透明三角形，可调整颜色 */
+  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;
+}
+
+.play-icon-background {
+  content: "";
+  width: 35px;
+  /* 调整圆形的直径大小 */
+  height: 35px;
+  /* 调整圆形的直径大小 */
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  bottom: 190%;
+  left: 75%;
+  transform: translateX(100%);
+  z-index: 0;
 }
+
 .daohang {
  height: 32px;
 }
+
 .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; /* 设置相对定位 */
+  position: relative;
+  /* 设置相对定位 */
  width: 150px;
  height: 100px;
-            margin-right: 10px; /* 减少右边距以让文字更靠近图片 */
+  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; /* 移除外边距 */
+  margin: 0;
+  /* 移除外边距 */
  font-size: 20px;
  color: #555;
-            margin-bottom: 7%;
+  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;
 }
-        .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;
@ -339,7 +397,8 @@ body {
  position: absolute;
  bottom: 4%;
  right: 0;
-    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，可调整透明度和颜色 */
+  background-color: rgba(0, 0, 0, 0.5);
+  /* 半透明黑色背景，可调整透明度和颜色 */
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
@ -355,12 +414,15 @@ body {
  width: 10px;
  height: 10px;
 }
+
 .club_img img {
  position: absolute;
  top: 0;
  right: 0;
  /* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
-    width: 15px; /* 假设调整宽度 */
-    height: 15px; /* 假设调整高度 */
+  width: 15px;
+  /* 假设调整宽度 */
+  height: 15px;
+  /* 假设调整高度 */
 }
 </style>
--- 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);
--- 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);
--- 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);