ting
7 months ago
1 changed files with 249 additions and 1 deletions
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue