You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
14 KiB
310 lines
14 KiB
<template>
|
|
<view class="club">
|
|
<view class="container">
|
|
<!-- 俱乐部相关信息 -->
|
|
<view class="club-header1">
|
|
<image v-if="club && club[0]" class="club-image"
|
|
:src="club[0].image" alt="视频缩略图"></image>
|
|
<button class="club-button" @click="handleMore">查看更多</button>
|
|
</view>
|
|
<view class="text-container">
|
|
<text v-if="club && club[0]"
|
|
class="club-text">{{ club[0].introduction }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 俱乐部内容 -->
|
|
<view class="special-topic">
|
|
<text class="h2">专题</text>
|
|
<view class="topic">
|
|
<view class="topic-title">
|
|
<text class="h3">前言股市投资分享之左侧交易</text>
|
|
</view>
|
|
|
|
<!-- 展示列表 -->
|
|
<view class="sub-topic">
|
|
<view class="display-list">
|
|
<view class="li" v-for="show in shows">
|
|
<!-- 左边 -->
|
|
<view class="sub-left">
|
|
<image class="sub-image" :src="show.cover" alt="视频缩略图"></image>
|
|
<image v-if="show.flagType==1" class="player" src="data:image/png;base64,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"></image>
|
|
</view>
|
|
<!-- 右边 -->
|
|
<view class="sub-right">
|
|
<!-- 视频题目 -->
|
|
<view class="right-inline">
|
|
<image src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png"
|
|
class="logo"></image>
|
|
<text :name="show.name" class="show-name">{{ show.name }}</text>
|
|
</view>
|
|
<!-- 俱乐部名字 -->
|
|
<view class="right-inline">
|
|
<view class="yellow">
|
|
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAI4SURBVFiF7VhBcsIwDFy5/VfNDPRNcIKcwptKZ3Af1qiHJMVOZFty6K17gqDIy8peKQH+0QbamoD7vZ8/D3DeYQgAQKfPsDV3Eznu956JztNXX4xl6gDg5fRxsa5jIheRKhLK3s/UWUiqyG0lleRi6hyGoCl7ldxE7K5cO0D5BzQqutKP3/37xUAM7njbaWOJ+Pzdv1+K+UrEiPic+32JeeNjVE8FIj7Hp11Fjvu9txBLFmTu6lHRWkT3HEGR3AAnBpcw758Wf4tsKcGKnLWcQFLSGcFyPwAvqbci11rOJIextICsXmIlLaoBgDveVpY0XA9szUPMu3hbFK1EA6GkM0Lmej7XQr3X+MtCtaApD0EWyB1vu5JNAOPBK1UqKYdUCms/1CLXeeLSujhYSqJxciu0nee1FgCMBIfr4Y2Yuy1z2mOAYK+J/1VOYbyeie6tKkZqFdeJebjHh3GCraGlzMP1cG+yKOsNgI3gtJe9ntBDpGaf+4sTDKS92S0uhnW4CG2cNW+CJuWY6Uu8nrMjZa9ddpuEnDaJVNL5ND7TE6WGXT3ucaPPPPyEpSda8wLSyFRRL5a+4F1mT5QGiDW5ygaej7rGu2LLKf3pXP8WD0RNvWlA8KWYmOBwPfDk/EGKyTWA7HOr8Xm1GaWpJ2sldPoMhUHyKaiNY9Un/tbRvYblSC7GaBJxv/e1qdWAlc3kYHrLtFFFNakZTe/nfu2hTjQA4+lvGVI3v9kEHmUHUlt4xtvNf7TgB2p5V6EQkIsLAAAAAElFTkSuQmCC"
|
|
class="img-yellow"></image>
|
|
<text v-if="club && club[0]"
|
|
:clubname="club[0].name">{{ club[0].name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-inline">
|
|
<!-- 日期 -->
|
|
<view class="right-item">
|
|
<text>{{ show.releaseTime }}</text>
|
|
</view>
|
|
<!-- 观看 -->
|
|
<!-- <view class="right-item">
|
|
<image src="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"
|
|
class="img2"></image>
|
|
<text>{{ show.viewCount }} </text>
|
|
</view> -->
|
|
<!-- 评论 -->
|
|
<!-- <view class="right-item">
|
|
<image src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg=="
|
|
class="img2"></image>
|
|
<text>{{ show.comments }}</text>
|
|
</view> -->
|
|
<!-- 点赞 -->
|
|
<!-- <view class="right-item">
|
|
<image src="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="
|
|
class="img2"></image>
|
|
<text>{{ show.likes }} 个赞</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref} from 'vue';
|
|
import ClubApi from '../../api/clubApi';
|
|
|
|
// 俱乐部
|
|
const club = ref();
|
|
|
|
// 加载俱乐部信息
|
|
function loadClub() {
|
|
//调用查询俱乐部api
|
|
ClubApi.getClub(1).then((result) =>{
|
|
console.log(result)
|
|
console.log("++++++++",result.data);
|
|
club.value = result.data;
|
|
console.log(club.value);
|
|
})
|
|
}
|
|
|
|
loadClub();
|
|
// 展示列表
|
|
const shows = ref([]);
|
|
|
|
|
|
// 加载展示列表
|
|
function loadShows(){
|
|
ClubApi.getShows(1).then((result) =>{
|
|
console.log(result);
|
|
shows.value = result.data;
|
|
})
|
|
}
|
|
loadShows();
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 你的 CSS 样式放在这里，确保路径正确，如有必要，使用相对路径或base64编码 */
|
|
.club {
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.container {
|
|
background: linear-gradient(to right, #ffe5ca,#ffca95,#ffa953);
|
|
width: 100%;
|
|
padding: 5px;
|
|
border-radius: 2%;
|
|
}
|
|
|
|
.club-header1 {
|
|
display: flex; /* 启用flexbox布局 */
|
|
align-items: center; /* 垂直居中对齐 */
|
|
justify-content: space-between; /* 在主轴上两端对齐 */
|
|
padding: 10px; /* 可选：根据需要添加内边距 */
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.club-image {
|
|
height: 50px;
|
|
width: 50px;
|
|
max-width: 100%;
|
|
/* height: auto; 保持图片的原始宽高比 */
|
|
margin-left: 10px;
|
|
border-radius: 100%; /* 设置图片为圆形 */
|
|
}
|
|
|
|
.club-button{
|
|
margin-left: auto; /* 将按钮推向右侧 */
|
|
margin-right: 30px;
|
|
background-color: #ff9900;
|
|
color: white;
|
|
border: none;
|
|
font-size: 12px;
|
|
padding: 2px;
|
|
top: 8px; /* 距离顶部20px */
|
|
cursor: pointer;
|
|
color: #72706a;
|
|
border-radius: 10%;
|
|
width: 70px;
|
|
height: 30px;
|
|
}
|
|
.text-container{
|
|
width: 100%;
|
|
display: block;
|
|
|
|
}
|
|
.club-text{
|
|
|
|
display: block;
|
|
font-size: 12px;
|
|
margin: 5px;
|
|
color: #72706a;
|
|
word-wrap: break-word;
|
|
|
|
}
|
|
.special-topic {
|
|
/* 背景颜色，根据需要调整 */
|
|
padding: 10px; /* 内边距，根据需要调整 */
|
|
margin: 20px 0px; /* 外边距，根据需要调整 */
|
|
}
|
|
.topic{
|
|
background: linear-gradient(to bottom, #fff9e9,#fffcf3,#fffffd);
|
|
}
|
|
.h3{
|
|
padding: 10px;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.h2 {
|
|
margin: 0; /* 移除默认的外边距 */
|
|
padding-bottom: 5px; /* 下方内边距，为下划线留出空间 */
|
|
border-bottom: 2px solid #007bff; /* 下划线样式 */
|
|
display: inline-block; /* 使下划线只在文字下方 */
|
|
}
|
|
.topic-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
/* .h3{
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
|
|
} */
|
|
.sub-topic {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
display: flex;
|
|
}
|
|
.display-list{
|
|
list-style-type: none;
|
|
padding: 0px;
|
|
width: 100%;
|
|
|
|
}
|
|
.li{
|
|
display: flex;
|
|
justify-content: space-between; /* 在主轴上两端对齐 */
|
|
width: 100%;
|
|
border-bottom: 1px solid #d0d2df;
|
|
margin: 3px 5px;
|
|
padding-top: 3px;
|
|
}
|
|
.sub-left{
|
|
width: 40%;
|
|
position: relative;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.sub-right{
|
|
width: 55%;
|
|
position: relative;
|
|
}
|
|
.sub-image{
|
|
width: 90%;
|
|
height: 90%;
|
|
|
|
}
|
|
.player{
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
left: 34%;
|
|
top: 27%;
|
|
/* z-index: 999; */
|
|
}
|
|
|
|
.right-inline{
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
}
|
|
.show-name{
|
|
font-size: 14px;
|
|
}
|
|
.yellow{
|
|
display: flex;
|
|
color: #e9a479;
|
|
font-size: 12px;
|
|
height: 18px;
|
|
background-color: #ffefdf;
|
|
}
|
|
.img-yellow{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.right-item{
|
|
width: 100%;
|
|
display: flex;
|
|
color: #8e8e8e;
|
|
font-size: 12px;
|
|
margin-right: 18px;
|
|
align-items: center;
|
|
}
|
|
.logo{
|
|
width: 25px;
|
|
height: 18px;
|
|
margin-right: 3px;
|
|
border-radius: 50%;
|
|
}
|
|
.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; /* 图标和文字之间的间距 */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|