practice_VUE/vueHomilyLink/src/views/ClubView.vue

<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>