Compare commits
merge into: wanglin:master
wanglin:bogu_yjt
wanglin:channel_yjt
wanglin:dev
wanglin:home_zwk
wanglin:live_lh
wanglin:master
wanglin:study
pull from: wanglin:dev
wanglin:bogu_yjt
wanglin:channel_yjt
wanglin:dev
wanglin:home_zwk
wanglin:live_lh
wanglin:master
wanglin:study
50 Commits
lenghui
ting
zhaowenkang
21 changed files with 2546 additions and 71 deletions
-
313vueHomilyLink/package-lock.json
-
4vueHomilyLink/package.json
-
28vueHomilyLink/src/api/ChannelApi.js
-
23vueHomilyLink/src/api/ClubApi.js
-
12vueHomilyLink/src/api/HomeApi.js
-
16vueHomilyLink/src/api/LiveApi.js
-
16vueHomilyLink/src/api/index.js
-
BINvueHomilyLink/src/assets/live.jpg
-
33vueHomilyLink/src/assets/main.css
-
56vueHomilyLink/src/components/ClubNav.vue
-
25vueHomilyLink/src/components/Nav.vue
-
5vueHomilyLink/src/main.js
-
23vueHomilyLink/src/router/index.js
-
480vueHomilyLink/src/views/ChannelView.vue
-
10vueHomilyLink/src/views/ClubView.vue
-
425vueHomilyLink/src/views/HomeView.vue
-
235vueHomilyLink/src/views/LiveView.vue
-
294vueHomilyLink/src/views/club/BoguView.vue
-
291vueHomilyLink/src/views/club/MuminView.vue
-
292vueHomilyLink/src/views/club/shenQiang.vue
-
12vueHomilyLink/vite.config.js
@ -0,0 +1,28 @@ |
|||
import service from "."; |
|||
|
|||
const ChannelApi = { |
|||
//获取频道列表
|
|||
getchannels(){ |
|||
return service.get('/list'); |
|||
}, |
|||
//获取shows列表
|
|||
getShows(Id,UserId,FlagType){ |
|||
return service.post('/channel',{Id,UserId,FlagType}); |
|||
}, |
|||
//订阅状态
|
|||
subscribe(Id,UserId){ |
|||
return service.post('/subscription',{Id,UserId}) |
|||
}, |
|||
//取消订阅
|
|||
unSubscribe(Id,UserId){ |
|||
console.log("_________",Id); |
|||
return service.delete('/subscription',{ |
|||
params:{ |
|||
Id:Id, |
|||
UserId:UserId |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
export default ChannelApi; |
|||
@ -0,0 +1,23 @@ |
|||
import service from "."; |
|||
|
|||
const ClubApi = { |
|||
getClub(id){ |
|||
return service.get( |
|||
'/clubpage/get-club',{ |
|||
params: { |
|||
id: id |
|||
} |
|||
} |
|||
); |
|||
}, |
|||
getShows(id){ |
|||
return service.get( |
|||
'/clubpage/get-club-shows',{ |
|||
params: { |
|||
id: id |
|||
} |
|||
} |
|||
) |
|||
} |
|||
} |
|||
export default ClubApi; |
|||
@ -0,0 +1,12 @@ |
|||
import service from "."; |
|||
const homeApi = { |
|||
//获取首页列表
|
|||
gethomeList() { |
|||
return service.get('/mainpage/get-shows'); |
|||
}, |
|||
//获取视频列表
|
|||
getHomeVideo(){ |
|||
return service.get('/mainpage/get-videos?flagType=1'); |
|||
} |
|||
} |
|||
export default homeApi; |
|||
@ -0,0 +1,16 @@ |
|||
import service from "."; |
|||
const liveApi = { |
|||
//获取直播列表
|
|||
getLiveList() { |
|||
return service.post('/live', { UserId: 90000001 }); |
|||
}, |
|||
//预约
|
|||
addReservation(Id, UserId) { |
|||
return service.post('/reservation', { Id, UserId }); |
|||
}, |
|||
//取消预约
|
|||
cancelReservation(Id, UserId) { |
|||
return service.delete(`/reservation?Id=${Id}&UserId=${UserId}`); |
|||
} |
|||
} |
|||
export default liveApi; |
|||
@ -0,0 +1,16 @@ |
|||
import axios from "axios"; |
|||
|
|||
const service = axios.create({ |
|||
// baseURL: 'http://192.168.8.191:8080',
|
|||
// baseURL: 'http://localhost:8080',
|
|||
baseURL: '/api', |
|||
}); |
|||
// http://192.168.8.191:8080
|
|||
|
|||
//Axios的响应拦截器..
|
|||
service.interceptors.response.use(resp => { |
|||
return resp.data; |
|||
}, error => { |
|||
return Promise.reject(error); |
|||
}); |
|||
export default service; |
|||
|
After Width: 310 | Height: 200 | Size: 39 KiB |
@ -1,35 +1,10 @@ |
|||
@import './base.css'; |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
a, |
|||
.green { |
|||
text-decoration: none; |
|||
color: hsla(160, 100%, 37%, 1); |
|||
transition: 0.4s; |
|||
padding: 3px; |
|||
} |
|||
|
|||
@media (hover: hover) { |
|||
a:hover { |
|||
background-color: hsla(160, 100%, 37%, 0.2); |
|||
} |
|||
html,body{ |
|||
margin:0px; |
|||
height: 100%; |
|||
} |
|||
|
|||
@media (min-width: 1024px) { |
|||
body { |
|||
display: flex; |
|||
place-items: center; |
|||
} |
|||
|
|||
#app{ |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
padding: 0 2rem; |
|||
} |
|||
height: 100%; |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div class="club-nav"> |
|||
<div class="container"> |
|||
<RouterLink to="/bogu" class="nav-item">博股俱乐部</RouterLink> |
|||
<RouterLink to="/mumin" class="nav-item">牧民俱乐部</RouterLink> |
|||
<RouterLink to="/shenqiang" class="nav-item">神枪手俱乐部</RouterLink> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.club-nav { |
|||
height: 100vh; |
|||
width: 15%; |
|||
position: fixed; |
|||
left: 30px; |
|||
top: 30px; |
|||
background-color: #fffffd; |
|||
overflow-x: hidden; |
|||
padding-top: 20px; |
|||
transition: 0.5s; |
|||
} |
|||
|
|||
|
|||
.container { |
|||
padding: 0; |
|||
margin: 0; |
|||
list-style-type: none; |
|||
} |
|||
|
|||
|
|||
.nav-item { |
|||
padding: 10px 15px; |
|||
text-decoration: none; |
|||
font-size: 18px; |
|||
color: rgb(19, 18, 18); |
|||
display: block; |
|||
transition: 0.3s; |
|||
} |
|||
|
|||
|
|||
.nav-item:hover { |
|||
background-color: #407fdf; |
|||
color: #f1f1f1; |
|||
} |
|||
|
|||
.nav-item.router-link-active { |
|||
background-color: #407fdf; |
|||
color: white; |
|||
border-radius: 5%; |
|||
} |
|||
</style> |
|||
@ -1,10 +1,488 @@ |
|||
<script setup> |
|||
import Nav from '@/components/Nav.vue'; |
|||
import { computed, ref } from 'vue'; |
|||
import {ElMessage} from 'element-plus'; |
|||
import router from '@/router'; |
|||
import ChannelApi from '@/api/ChannelApi'; |
|||
|
|||
|
|||
const activeId = ref(1); |
|||
|
|||
//频道列表 |
|||
const channelList = ref([]); |
|||
//视频上的导航栏 |
|||
const currentTab = ref(null); |
|||
const flagType = ref(null); |
|||
//频道 |
|||
//默认信息 |
|||
const channel = ref({ |
|||
id: 1, |
|||
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|||
name: "量价时空四维预测术", |
|||
// 订阅数量 |
|||
subscriptionCount: 60, |
|||
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", |
|||
status:true |
|||
}); |
|||
//1-左侧导航栏加载 |
|||
function getChannels() { |
|||
//查询频道列表api |
|||
ChannelApi.getchannels().then((result) =>{ |
|||
console.log(result.data); |
|||
channelList.value = result.data; |
|||
console.log("++++",channelList.value); |
|||
}) |
|||
|
|||
} |
|||
getChannels(); |
|||
|
|||
function toLink(channelId) { |
|||
router.push({ path: '/channel', query: { id: channelId } }); |
|||
flagType.value = null; |
|||
currentTab.value = null; |
|||
loadShows(channelId,flagType.value); |
|||
//将当前频道id添加到激活状态数组中 |
|||
activeId.value = channelId; |
|||
console.log("flga",flagType.value); |
|||
} |
|||
|
|||
|
|||
|
|||
function changeTab(channelId, type) { |
|||
currentTab.value = type; |
|||
flagType.value = type; |
|||
loadShows(channelId,type); |
|||
} |
|||
|
|||
// 展示列表1 |
|||
const shows = ref([]); |
|||
// 加载展示列表 |
|||
function loadShows(channleId,flagType) { |
|||
//shows查询api,根据id,userId |
|||
ChannelApi.getShows(channleId,90000000,flagType).then((result)=>{ |
|||
console.log(result.data) |
|||
channel.value = result.data.channel; |
|||
shows.value = result.data.shows; |
|||
}) |
|||
} |
|||
loadShows(channel.value.id,flagType.value); |
|||
|
|||
//订阅 |
|||
function submit(channelId) { |
|||
console.log("频道id",channelId); |
|||
ChannelApi.subscribe(channelId,90000000).then((result)=>{ |
|||
if(result.code ==200){ |
|||
ElMessage.success('订阅成功！'); |
|||
loadShows(channelId,flagType.value); |
|||
}else{ |
|||
ElMessage.error(result.messsage); |
|||
} |
|||
}) |
|||
|
|||
} |
|||
//取消订阅 |
|||
function unsubmit(channelId){ |
|||
console.log("取消频道id",channelId); |
|||
ChannelApi.unSubscribe(channelId,90000000).then((result) =>{ |
|||
|
|||
if(result.code ==200){ |
|||
console.log("取消频道id+++++++",channelId); |
|||
ElMessage.success('取消订阅成功！'); |
|||
loadShows(channelId,flagType.value); |
|||
}else{ |
|||
ElMessage.error(result.messsage); |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
频道 |
|||
<Nav></Nav> |
|||
<ChannelNav></ChannelNav> |
|||
<div class="channel-nav"> |
|||
<div class="container"> |
|||
<button v-for="ch in channelList" @click="toLink(ch.id)" |
|||
:class="{'button-active': activeId==ch.id}" |
|||
class="nav-item">{{ ch.name }}</button> |
|||
</div> |
|||
</div> |
|||
<div class="channel"> |
|||
<div class="channel-head"> |
|||
<!-- 1-订阅按钮 --> |
|||
<button v-if="channel.status && channel.status == true" class="submited" |
|||
@click="unsubmit(channel.id)">取消订阅</button> |
|||
<button v-else class="submit" @click="submit(channel.id)">订阅</button> |
|||
<!-- 2-背景图片 --> |
|||
<img alt="" class="bc-image" :src="channel.backgroundImage" /> |
|||
<!-- 3-频道主题 --> |
|||
<div class="channel-title"> |
|||
<!-- 频道头像 --> |
|||
<img alt="" class="title-image" :src="channel.image" /> |
|||
<!-- 频道title --> |
|||
<div class="title-content"> |
|||
<h3 :name="channel.name">{{ channel.name }}</h3> |
|||
<span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount }}已订阅</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 频道内容 --> |
|||
<div class="channel-content"> |
|||
<!-- 导航栏 --> |
|||
<div class="content-nav"> |
|||
<button |
|||
class="tab" |
|||
:class="{ active: currentTab == null }" |
|||
@click="changeTab(channel.id,null)">全部</button> |
|||
<button |
|||
class="tab" |
|||
:class="{ active: currentTab == 1 }" |
|||
@click="changeTab(channel.id,1)">视频</button> |
|||
<button |
|||
class="tab" |
|||
:class="{ active: currentTab == 2 }" |
|||
@click="changeTab(channel.id, 2)">文章</button> |
|||
</div> |
|||
<component :is="currentTabComponent"></component> |
|||
<!-- 内容 --> |
|||
<!-- 如果是全部 --> |
|||
|
|||
<div v-if="currentTab == null" class="content-list"> |
|||
<ul class="list-display"> |
|||
<!-- 一条 --> |
|||
<li v-for="show in shows"> |
|||
<div class="sub-topic"> |
|||
<!-- 左边 --> |
|||
<div class="sub-left"> |
|||
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|||
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time"> |
|||
{{ show.videoDuration }} |
|||
</div> |
|||
</div> |
|||
<!-- 右边 --> |
|||
<div class="sub-right"> |
|||
<!-- title --> |
|||
<h3 :name="show.name" class="right-title">{{ show.name }}</h3> |
|||
|
|||
<div class="right-inline"> |
|||
<!-- 发布的用户名 --> |
|||
<div class="right-item"> |
|||
<img :src="show.user.avatar" class="img1"> |
|||
<div :username="show.user.username">{{ show.user.username }}</div> |
|||
</div> |
|||
<!-- 评论 --> |
|||
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span> |
|||
<!-- 日期 --> |
|||
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div v-if="currentTab == 1" class="content-list"> |
|||
<ul class="list-display"> |
|||
<!-- 一条 --> |
|||
<li v-for="show in shows"> |
|||
<div class="sub-topic"> |
|||
<!-- 左边 --> |
|||
<div class="sub-left"> |
|||
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|||
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time"> |
|||
{{ show.videoDuration }} |
|||
</div> |
|||
</div> |
|||
<!-- 右边 --> |
|||
<div class="sub-right"> |
|||
<!-- title --> |
|||
<h3 :name="show.name" class="right-title">{{ show.name }}</h3> |
|||
|
|||
<div class="right-inline"> |
|||
<!-- 发布的用户名 --> |
|||
<div class="right-item"> |
|||
<img :src="show.user.avatar" class="img1"> |
|||
<div :username="show.user.username">{{ show.user.username }}</div> |
|||
</div> |
|||
<!-- 评论 --> |
|||
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span> |
|||
<!-- 日期 --> |
|||
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
|
|||
<div v-if="currentTab == 2" class="content-list"> |
|||
<ul class="list-display"> |
|||
<!-- 一条 --> |
|||
<li v-for="show in shows"> |
|||
<div class="sub-topic"> |
|||
<!-- 左边 --> |
|||
<div class="sub-left"> |
|||
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|||
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time"> |
|||
{{ show.videoDuration }} |
|||
</div> |
|||
</div> |
|||
<!-- 右边 --> |
|||
<div class="sub-right"> |
|||
<!-- title --> |
|||
<h3 :name="show.name" class="right-title">{{ show.name }}</h3> |
|||
|
|||
<div class="right-inline"> |
|||
<!-- 发布的用户名 --> |
|||
<div class="right-item"> |
|||
<img :src="show.user.avatar" class="img1"> |
|||
<div :username="show.user.username">{{ show.user.username }}</div> |
|||
</div> |
|||
<!-- 评论 --> |
|||
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span> |
|||
<!-- 日期 --> |
|||
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.channel-nav { |
|||
height: 100vh; |
|||
width: 15%; |
|||
position: fixed; |
|||
left: 30px; |
|||
top: 30px; |
|||
background-color: #ffffff; |
|||
overflow-x: hidden; |
|||
padding-top: 20px; |
|||
transition: 0.5s; |
|||
} |
|||
|
|||
|
|||
.container { |
|||
padding: 0; |
|||
margin: 0; |
|||
list-style-type: none; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
|
|||
.nav-item { |
|||
border: none; |
|||
background-color: #ffffff; |
|||
padding: 10px 15px; |
|||
text-decoration: none; |
|||
font-size: 18px; |
|||
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: 50%; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.channel-head { |
|||
position: relative; |
|||
height: 200px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.bc-image { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
.submited { |
|||
position: absolute; |
|||
/* 绝对定位 */ |
|||
top: 50px; |
|||
/* 根据需要调整位置 */ |
|||
right: 10px; |
|||
/* 根据需要调整位置 */ |
|||
color: rgb(129, 132, 134); |
|||
background-color: aliceblue; |
|||
padding: 10px; |
|||
border-radius: 10%; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.submit { |
|||
position: absolute; |
|||
/* 绝对定位 */ |
|||
top: 50px; |
|||
/* 根据需要调整位置 */ |
|||
right: 10px; |
|||
/* 根据需要调整位置 */ |
|||
color: rgb(129, 132, 134); |
|||
background-color: aliceblue; |
|||
padding: 10px 20px; |
|||
|
|||
border-radius: 10%; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.channel-title { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
padding-top: 60px; |
|||
padding-left: 50px; |
|||
box-sizing: border-box; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
|
|||
} |
|||
|
|||
.title-image { |
|||
width: 90px; |
|||
height: 90px; |
|||
margin-right: 25px; |
|||
vertical-align: top; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.title-content { |
|||
display: inline-block; |
|||
position: absolute; |
|||
width: 400px; |
|||
color: white; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.channel-title h3 { |
|||
max-width: 75%; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
font-size: 24px; |
|||
color: #fff; |
|||
margin: 0px; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.channel-title span { |
|||
padding: 4px 0; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.content-nav { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
/* 修正了属性名中的空格 */ |
|||
background-color: #fff; |
|||
/* 修正了属性名中的空格 */ |
|||
border-bottom: 1px solid #ccc; |
|||
/* 修正了属性名中的空格 */ |
|||
margin: 10px; |
|||
} |
|||
|
|||
.tab { |
|||
padding: 10px 20px; |
|||
border: none; |
|||
background-color: transparent; |
|||
/* 修正了属性名中的空格 */ |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.active { |
|||
color: red; |
|||
border-bottom: 2px solid red; |
|||
} |
|||
|
|||
.list-display { |
|||
list-style-type: none; |
|||
padding: 0px; |
|||
} |
|||
|
|||
.sub-topic { |
|||
margin: 10px 0; |
|||
padding: 10px; |
|||
display: flex; |
|||
|
|||
} |
|||
|
|||
.sub-left { |
|||
height: 112px; |
|||
width: 200px; |
|||
position: relative; |
|||
|
|||
.sub-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.video-time { |
|||
position: absolute; |
|||
left: 70%; |
|||
top: 80%; |
|||
color: #fff; |
|||
background-color: rgba(31, 30, 30, 0.5); |
|||
border-radius: 20%; |
|||
font-size: smaller; |
|||
} |
|||
} |
|||
|
|||
|
|||
.right-inline { |
|||
display: flex; |
|||
margin-bottom: 15px; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
|
|||
} |
|||
|
|||
.right-title { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.right-item { |
|||
display: flex; |
|||
color: #8e8e8e; |
|||
font-size: 14px; |
|||
margin-right: 18px; |
|||
align-items: center; |
|||
} |
|||
|
|||
.img1 { |
|||
margin-left: 10px; |
|||
width: 22px; |
|||
height: 22px; |
|||
border-radius: 50%; |
|||
} |
|||
</style> |
|||
@ -1,10 +0,0 @@ |
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
俱乐部 |
|||
</template> |
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -1,12 +1,435 @@ |
|||
<script setup> |
|||
import Nav from '@/components/Nav.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'); |
|||
const clubMark3Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/cbd9eda094b33695bab858e08c67ae71.png'); |
|||
const clubMark4Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS4.98fc204a.png'); |
|||
|
|||
// 定义响应式数据来存储从数据库获取的数据 |
|||
const articleData = reactive({ |
|||
articleImgSrc: '', |
|||
title: '', |
|||
authorAvatarSrc: '', |
|||
authorName: '', |
|||
viewsCount: 0, |
|||
commentsCount: 0, |
|||
likesCount: 0, |
|||
playTime: '', |
|||
club_id: '', |
|||
publishTime: '', |
|||
flag_type: '' |
|||
}); |
|||
|
|||
// 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中 |
|||
const mapResponseToArticleData = (responseData) => { |
|||
if (Array.isArray(responseData)) { |
|||
console.log('res:', responseData); |
|||
articleData.articleImgSrc = responseData.map(item => item.cover); |
|||
articleData.title = responseData.map(item => item.name); |
|||
articleData.authorAvatarSrc = responseData.map(item => item.user.avatar); |
|||
articleData.authorName = responseData.map(item => item.user.username); |
|||
articleData.viewsCount = responseData.map(item => item.viewCount); |
|||
articleData.commentsCount = responseData.map(item => item.comments); |
|||
articleData.likesCount = responseData.map(item => item.likes); |
|||
articleData.playTime = responseData.map(item => item.videoDuration); |
|||
articleData.publishTime = responseData.map(item => { |
|||
const date = new Date(item.releaseTime); |
|||
const month = ('0' + (date.getMonth() + 1)).slice(-2); |
|||
const day = ('0' + date.getDate()).slice(-2); |
|||
const hours = ('0' + date.getHours()).slice(-2); |
|||
const minutes = ('0' + date.getMinutes()).slice(-2); |
|||
return `${month}-${day} ${hours}:${minutes}`; |
|||
}); |
|||
articleData.club_id = responseData.map(item => item.clubId); |
|||
articleData.flag_type = responseData.map(item => item.flagType); |
|||
|
|||
} else { |
|||
console.warn('接口返回的数据格式不符合预期'); |
|||
} |
|||
}; |
|||
|
|||
// 页面加载时调用接口获取数据 |
|||
async function selectAll() { |
|||
try { |
|||
const response = await homeApi.gethomeList(); |
|||
mapResponseToArticleData(response.data); |
|||
|
|||
} catch (error) { |
|||
console.error('获取数据出错：', error); |
|||
} |
|||
} |
|||
console.log('初始化后的articleData:', articleData); |
|||
selectAll(); |
|||
|
|||
|
|||
|
|||
// 精选视频接口 |
|||
const articleData2 = ref([]); |
|||
function fetchData() { |
|||
homeApi.getHomeVideo().then(response => { |
|||
// 将articleData响应式对象赋值给articleData2 |
|||
articleData2.value = response.data; |
|||
articleData2.value = articleData2.value.map(item => { |
|||
const date = new Date(item.releaseTime); |
|||
const month = ('0' + (date.getMonth() + 1)).slice(-2); |
|||
const day = ('0' + date.getDate()).slice(-2); |
|||
const hours = ('0' + date.getHours()).slice(-2); |
|||
const minutes = ('0' + date.getMinutes()).slice(-2); |
|||
return { |
|||
...item, |
|||
releaseTime: `${month}-${day} ${hours}:${minutes}` |
|||
}; |
|||
}); |
|||
console.log('初始化后的articleData2:', articleData2.value); |
|||
}).catch(error => { |
|||
console.error('获取数据出错：', error); |
|||
}); |
|||
}; |
|||
fetchData(); |
|||
|
|||
|
|||
|
|||
const getColorClass = (index) => { |
|||
const num = index + 1; |
|||
if (num === 1) { |
|||
return 'color-red'; |
|||
} else if (num === 2) { |
|||
return 'color-green'; |
|||
} else if (num === 3) { |
|||
return 'color-blue'; |
|||
} |
|||
return ''; |
|||
}; |
|||
|
|||
// const filteredArticleData = computed(() => { |
|||
// return articleData.title.filter((_, index) => articleData.flag_type[index] === 1); |
|||
// }); |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<div class="daohang"> |
|||
<Nav></Nav> |
|||
主页 |
|||
</div> |
|||
<div class="class123"> |
|||
<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="文章图片"> |
|||
<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> |
|||
<img |
|||
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"> |
|||
<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> |
|||
<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> |
|||
.data-list{ |
|||
margin: 10px; |
|||
padding: 0; |
|||
} |
|||
.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: 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, 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; |
|||
bottom: 190%; |
|||
left: 75%; |
|||
transform: translateX(100%); |
|||
z-index: 0; |
|||
} |
|||
|
|||
.daohang { |
|||
height: 32px; |
|||
} |
|||
|
|||
.container { |
|||
margin-right: 0; |
|||
margin-left: auto; |
|||
|
|||
} |
|||
|
|||
.sidebar-right { |
|||
background-color: #f1f1f1; |
|||
margin-right: auto; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 24px; |
|||
color: #333; |
|||
padding: 10px 0; |
|||
|
|||
} |
|||
|
|||
.data-list-li { |
|||
border-bottom: #f1f1f1 1px solid; |
|||
border-right: #eeeeee 1px solid; |
|||
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; |
|||
} |
|||
|
|||
.color-green { |
|||
background-color: rgb(255, 102, 0); |
|||
} |
|||
|
|||
.color-blue { |
|||
background-color: rgb(255, 196, 0); |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.club { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
/* 可以根据实际需求调整容器大小等样式 */ |
|||
|
|||
width: 10px; |
|||
height: 10px; |
|||
} |
|||
|
|||
.club_img img { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
/* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */ |
|||
width: 15px; |
|||
/* 假设调整宽度 */ |
|||
height: 15px; |
|||
/* 假设调整高度 */ |
|||
} |
|||
</style> |
|||
@ -1,10 +1,239 @@ |
|||
<template> |
|||
<!-- 顶部导航栏 --> |
|||
<Nav></Nav> |
|||
<!-- 卡片 --> |
|||
<div class="card-container"> |
|||
<div v-for="(live, index) in liveList" :key="index" class="card"> |
|||
<div class="cover-image" :class="{ 'no-overlay': !live.status == 1 }" style="position:relative;"> |
|||
<img :src=live.cover alt="节目1"> |
|||
<div v-if="live.status == 1" class="overlay">即将开播</div> |
|||
<div v-if="live.status == 1" class="start-time">{{ getDateDay(live.startTime) }} {{ live.startTime.slice(11, 16) }}开播</div> |
|||
</div> |
|||
<div class="card-content"> |
|||
<div class="card-title">{{ live.liveName }}</div> |
|||
<div class="card-actions"> |
|||
<!-- 用户头像 --> |
|||
<img :src=live.user.avatar alt="节目1" class="user-avatar"> |
|||
<!-- 用户昵称，与头像同行显示 --> |
|||
<div class="card-info">{{ live.user.username }}</div> |
|||
<!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” --> |
|||
<a v-if="live.reservation == 0" href="#" class="card-button" |
|||
@click="booking(live.id, 90000001)">预约</a> |
|||
<a v-else href="#" @click="cancelBooking(live.id, 90000001)" class="card-button" style="background-color: #ccc;">已预约</a> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import liveApi from '@/api/LiveApi'; |
|||
import { ref } from 'vue'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import Nav from '@/components/Nav.vue'; |
|||
/* |
|||
模拟后端数据 |
|||
*/ |
|||
const liveList = ref({}); |
|||
//获取直播列表 |
|||
function getLive() { |
|||
liveApi.getLiveList() |
|||
.then(resp => { |
|||
if(resp.code == 200){ |
|||
liveList.value = resp.data; |
|||
console.log(liveList.value); |
|||
}else{ |
|||
ElMessage.error('获取直播列表失败'); |
|||
} |
|||
}) |
|||
} |
|||
getLive(); |
|||
|
|||
// 判断开播日期与当前时间的关系（今天、明天、其他） |
|||
function getDateDay(startTime) { |
|||
const now = new Date(); |
|||
const start = new Date(startTime); |
|||
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数 |
|||
if (now.toDateString() == start.toDateString()) { |
|||
return "今天"; |
|||
} else if (now.getTime() + oneDay >= start.getTime()) { |
|||
return "明天"; |
|||
} else { |
|||
return startTime.slice(5, 10); |
|||
} |
|||
} |
|||
|
|||
/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/ |
|||
function booking(liveId, userId) { |
|||
liveApi.addReservation(liveId,userId) |
|||
.then(resp => { |
|||
console.log(resp.code); |
|||
if (resp.code == 200) { |
|||
getLive(); |
|||
ElMessage.success("预约成功"); |
|||
} else { |
|||
ElMessage.error("预约失败，请联系管理员"); |
|||
} |
|||
}) |
|||
|
|||
} |
|||
function cancelBooking(liveId, userId) { |
|||
liveApi.cancelReservation(liveId, userId) |
|||
.then(resp => { |
|||
if (resp.code == 200) { |
|||
ElMessage.success("取消预约成功"); |
|||
} else { |
|||
ElMessage.error("取消预约失败，请联系管理员"); |
|||
} |
|||
getLive(); |
|||
}) |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
直播 |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.card-container { |
|||
/*居中显示*/ |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
/*宽度*/ |
|||
width: 1000px; |
|||
font-family: Arial, sans-serif; |
|||
padding: 0; |
|||
flex-wrap: wrap; |
|||
/*超出自动换行*/ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.card { |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|||
margin: 20px; |
|||
overflow: hidden; |
|||
border: #666; |
|||
height: 190px; |
|||
width: 209px; |
|||
} |
|||
|
|||
.card .cover-image img { |
|||
width: 100%; |
|||
height: 100%; |
|||
/*图片占满整个卡片*/ |
|||
object-fit: cover; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.cover-image { |
|||
position: relative; |
|||
height: 120px; |
|||
width: 208px; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
/*即将开播图层*/ |
|||
.overlay { |
|||
position: absolute; |
|||
z-index: 2; |
|||
text-align: center; |
|||
top: 30%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: #fff; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
/*开播时间*/ |
|||
.start-time { |
|||
position: absolute; |
|||
z-index: 2; |
|||
text-align: center; |
|||
top: 60%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: #ffffffaf; |
|||
font-size: 15px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.cover-image::before { |
|||
content: " "; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 209px; |
|||
height: 120px; |
|||
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/ |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
/*用于隐藏样式*/ |
|||
.cover-image.no-overlay::before { |
|||
display: none; |
|||
} |
|||
|
|||
.card-content { |
|||
padding: 8px; |
|||
} |
|||
|
|||
.card-title { |
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
margin-bottom: 5px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
|
|||
} |
|||
|
|||
.card-info { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.card-button { |
|||
display: inline-block; |
|||
padding: 5px 5px; |
|||
background-color: #eb8b31; |
|||
color: #fff; |
|||
text-decoration: none; |
|||
border-radius: 20px; |
|||
font-size: small; |
|||
width: 50px; |
|||
text-align: center; |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.card-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
/* 垂直居中对齐 */ |
|||
justify-content: space-between; |
|||
/* 按钮右对齐 */ |
|||
} |
|||
|
|||
.user-avatar { |
|||
border-radius: 50%; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.card-info { |
|||
margin-left: 5px; |
|||
/* 昵称与头像之间的间距 */ |
|||
margin-top: 0; |
|||
/* 移除顶部外边距 */ |
|||
/*超长以后将内容省略显示*/ |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
|
|||
width: 90px; |
|||
font-size: 12px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,294 @@ |
|||
<script setup> |
|||
import ClubApi from '@/api/ClubApi'; |
|||
import ClubNav from '@/components/ClubNav.vue'; |
|||
import Nav from '@/components/Nav.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
// 俱乐部 |
|||
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> |
|||
|
|||
<template> |
|||
<Nav></Nav> |
|||
<ClubNav></ClubNav> |
|||
<div class="club"> |
|||
<!-- 俱乐部相关信息 --> |
|||
<header> |
|||
<div class="club-header1"> |
|||
<img v-if="club && club[0]" class="club-image" :src="club[0].image" alt="视频缩略图"> |
|||
<button class="club-button" @click="handleMore">查看更多</button> |
|||
</div> |
|||
|
|||
<p v-if="club && club[0]">{{ club[0].introduction }}</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="show in shows"> |
|||
<!-- 左边 --> |
|||
<div class="sub-left"> |
|||
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|||
<img v-if="show.flagType==1" class="player" src="data:image/png;base64,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"> |
|||
</div> |
|||
<!-- 右边 --> |
|||
<div class="sub-right"> |
|||
<div class="right-inline"> |
|||
<img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo"> |
|||
<span :name="show.name">{{ show.name }}</span> |
|||
</div> |
|||
<div class="right-inline"> |
|||
<div class="yellow"> |
|||
<img 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="img2"> |
|||
<span v-if="club && club[0]" :clubname="club[0].name">{{ club[0].name }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="right-inline"> |
|||
<!-- HomilyLink --> |
|||
<div class="right-item"> |
|||
<img :src="show.user.avatar" class="img1"> |
|||
<div :username="show.user.username">{{show.user.username}}</div> |
|||
</div> |
|||
<!-- 日期 --> |
|||
<div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div> |
|||
<!-- 观看 --> |
|||
<div class="right-item"> |
|||
<img 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"> |
|||
<div :viewCount="viewCount">{{ show.viewCount }}</div> |
|||
</div> |
|||
<!-- 评论 --> |
|||
<div class="right-item"> |
|||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2"> |
|||
<div :comments="show.comments">{{ show.comments }}</div> |
|||
</div> |
|||
<!-- 点赞 --> |
|||
<div class="right-item"> |
|||
<img 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"> |
|||
<div :likes="show.likes">{{ show.likes }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.club{ |
|||
width: 50%; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-top: 20px; |
|||
} |
|||
header { |
|||
background: linear-gradient(to right, #ffe5ca,#ffca95,#ffa953); |
|||
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: 10%; |
|||
} |
|||
|
|||
header p { |
|||
margin: 10px 10px; |
|||
|
|||
} |
|||
.special-topic { |
|||
margin: 20px; |
|||
} |
|||
.topic{ |
|||
background: linear-gradient(to bottom, #fff9e9,#fffcf3,#fffffd); |
|||
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; |
|||
display: flex; |
|||
|
|||
} |
|||
.display-list{ |
|||
list-style-type: none; |
|||
padding: 0px; |
|||
|
|||
} |
|||
.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: 40px; |
|||
height: 40px; |
|||
left: 40%; |
|||
top: 40%; |
|||
z-index: 999; |
|||
} |
|||
} |
|||
|
|||
.sub-right{ |
|||
margin-left: 20px; |
|||
|
|||
} |
|||
.right-inline{ |
|||
display: flex; |
|||
margin-bottom: 15px; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
.yellow{ |
|||
display: flex; |
|||
color: #e9a479; |
|||
font-size: 14px; |
|||
height: 18px; |
|||
background-color: #ffefdf; |
|||
} |
|||
.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> |
|||
@ -0,0 +1,291 @@ |
|||
<script setup> |
|||
import ClubApi from '@/api/ClubApi'; |
|||
import ClubNav from '@/components/ClubNav.vue'; |
|||
import Nav from '@/components/Nav.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
// 俱乐部 |
|||
const club = ref() |
|||
// 加载俱乐部信息 |
|||
function loadClub(){ |
|||
//调用查询俱乐部api |
|||
|
|||
ClubApi.getClub(2).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(2).then((result) =>{ |
|||
console.log(result); |
|||
shows.value = result.data; |
|||
}) |
|||
} |
|||
// |
|||
loadShows(); |
|||
</script> |
|||
|
|||
<template> |
|||
<Nav></Nav> |
|||
<ClubNav></ClubNav> |
|||
<div class="club"> |
|||
<!-- 俱乐部相关信息 --> |
|||
<header> |
|||
<div class="club-header1"> |
|||
<img v-if="club && club[0]" class="club-image" :src="club[0].image" alt="视频缩略图"> |
|||
<button class="club-button" @click="handleMore">查看更多</button> |
|||
</div> |
|||
|
|||
<p v-if="club && club[0]">{{ club[0].introduction }}</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="show in shows"> |
|||
<!-- 左边 --> |
|||
<div class="sub-left"> |
|||
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|||
<img v-if="show.flagType==1" class="player" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAApeSURBVHic7Z39b1PXGcc/8bJSEDQMSpWEZHOBLtkMpbxIUMFWyCLeSqwRLYA2aWiaFEAg5YdICCEQ/wC/IRFA+2lbW2qkVrxkgfC6F8bSUBBtWtEYtYaYvGDyAjGEhhTvhxODMY7ta9/rc659PhISsc+955G/eu4953nOOU8e2cEkYBowFZgMFIx+NgF4FRgHvBJ1zTDwPfAYeAQMAveBAaAXCIx+ZmvyZBuQAnmAEygFSoAihJhWMAh0AX6gA/ABIYv6sgS7CFwAlAGzgBlAviQ7RoBvgZvANwiPVxqVBR4PzAZcCI9VER/wFdAGDMk1JTYqCuwE5gFzJdthlOvANYToyqCSwLOBRYh3q53pAFoQXi0dFQR+G3gXMVjKJrqAy8AXMo2QKfBbwK+xv8cmogP4F+CV0bkMgacAFYhHci7RBpwH+jLZaaYFXgJUSuhXFULAWeBSpjrM1A/9BrAaeDND/anOd0ATcNfqjjIh8ELg/Qz1ZSdCQCNwxcpOfmTlzQE38B5a3FjkAT8HXkNExSzBKoGnAL8Hyi26fzZRBMwEbmFBNMwKgZ3AHxDZHU1yFCBCsp2IbJZpmC2wCyFudGpOk5hXgHcQacqAWTc1U+B5QLWJ98tVXIgsVbcZNzNL4AWIAZXGHMp5notOCzMEnocW1wrKMMGT0xXYhX4sW0k5ab6T0xHYiRhQaazFhZhCpTS6TlXgKejRciaZBdwghXmyI8UO1wETU7xWY5yJiN/cMKl4sBsdoZJBASmENY0KvBARW9bIoQh4iIh4JYWRR/QbiKyQRi7vA4XJNjYi8Gp0VkgVViXbMNlH9BJEtEqjBpMRi/BvJ2qYjAdPQSyz0ahFJfB6okbJCFyBfjSrSkWiBokEfgsFVz/W1tY629vbN7W3t28KhUJ7PR7PMo/Hs0y2XRL4JSJmPSaJPPPPKLZu2ePxLKupqYk5VQsGg8EdO3Z80tDQ8F2m7ZKIH/jLWF/GE/htFEskxBM3khMnTlxyu91nM2GTInyK2Bv1EvFG0b/Fun23hklWXICysrKf1tbWlg8NDfVduXLF1CUwivITxlidOdY7eDY23ytUXFxceODAgT8eP348F2YAhcCcWF+M5cFViNinMng8nk2pXJdD3vwacDX6w1ge7ESxgRWIAVSq14a9+dixY9nszSXE2CgfS+B5lpuSAhMnTkw7Pel2u5fcuXNn89atW7N1C81L2kULPB777aw3RJZ781yEhs+IFli5oIZVhL158+bN2ebNL2gYLbArg4aYzsjIyBMj7YuLiwsPHjyYbd78goaRAheg7mk2SZGfn//jVK4Le/OWLVucJpskAycRM6BIgePGNLOd4uLiwoaGhk1Z4s3PtIwUeJYEQ5TD7XYv6ejosLs3P9MyLHAe4gQ5DVBSUmJ3b57BaJ4hLLATeccDKouNvTmf0fFUWGDlIleqEOHNv5Fti0FK4bnAJRINsQVut3upzby5BJ4LbOvMUaawmTcXgRB4Egrlfe1A2Jtra2udsm2JwyRgkgN9lkZKlJSUFB46dEh1b57mQByDr0kRt9u91O/31yrqzVMdiEXUmjSYPn16kaLePNmBYis37IyC3lyQB/wJ+JlsSxIRCoX2yrbBCC0tLV8uXrz4E8lm3HIgSs9oTGbRokVzbt++XSvZjAkORF0hjQWUlpYWSd5x8aoDUTRKYxE1NTXvSRR5nAN9kEo280qqh7BoDJDsjgwr0AJnOVrgDOD1en2y+nYgqnBqLGTfvn3/lNT1sANRYlVjEV6v13f48GGfpO6/dyDq52oswOv1+iR6L8DjfERxZI3J+P3+rmXLlh3p7OyU+YR85CALqlyrxMDAwP29e/ceLS0tPSxZXIDBfGxQ5NguXLx48fONGzc29/T0qDJwve/A5CofuUh/f//Anj17PMuXLz+pkLgAA/lAr2wr7MyFCxc+37Bhw+lAIGBo41uG6HVgYgmXXKK/v79/9+7dH1dUVJxUVFyAQD5ikDWIXlmZNOfOnbtSU1PT3N/fr6qwMKprOFSZdvmWXKC3t7d/165dRyorKxsVFxdGNQ3vR/IjCiVqxuDcuXOt1dXVzQ8ePBiRbUuS+OF5sqFDoiFK09vb27dz584jlZWV/7CRuDCqadiDfYjzh/UOwwjOnDnzWXV1dXMwGPxBti0GGUFo+syDQ8C3sqxRjUAg0Ltjx46PVqxY0WRDcUFoGYIXPfYm+j1Mc3PzZ+vWrTv96NGjp7JtSYOb4f9EJvwtq0JtBwKBwL36+voPV65c2WRzcSFCy0gPvo94bjszbIxpPH369AeHw2G4FtTp06db3G538/DwsN2FBaHhs/xC9JKdrzJqiskYFbenp+defX39B6tWrTqVJeJClIbRo+Y2cqQ20qlTp/5XVVXVPDIyEpJti8m0Rf4R7cFDjHFyeLbQ3d0dqKur+2D16tWns1Dc60QVsIw1772GggeSBoPBYLonzjY1NV1es2ZNs1k2Kci16A9iLZv1oWBkKx1xu7u779bV1f09y8X1MxrciGSsQckTRMkWZXC5XHkul8tp9LrGxsbLCxYs+LilpaXfArNU4gxwN/rDsRa+t2HzDFNXV1fP9u3b/7Z27dps9tow3cCXsb6IN614AvzCEnNS4OjRo75kvfjkyZP/Xbhwoae1tTXbvTbMGaAn1hfxtq58gWLv4vXr11+Mtw1kcHDw4bZt2/5aVVV1JoNmycZPnJlPosBAEFEgSxn2799/vaur61Z5efnkvr6+galTp072er2+8+fPX58/f/6Hra2tubaIsJE46+qSKTr5O3LoqH+b8TXgidcgmd2F5xlNPWmU43yiBsnEbocQCeSZaZujMZOzwI1EjZLdH3wJyKWKnqrjA/6TTEMjG8Cb0I9qVTiVbEMj6bWHo/9yftWHZBqB9mQbG02OdyKKIOrzpeVwFbhg5ALDqx8Qy0Fmos+4zDQdwBGjF6V6CMuniCCIJjMEEb+5YVLxYBBTp07gnRSv1xjjI1JM/qQqMIh9xQFsXu/QBhzFwKAqmnQEBiHwfaA8zftoYnMMkfRJmXQFBpGLHCTHax9awAlilGw3ihkCg3g/aE82j2OYIC6YJzAIT9bv5PQ5SpqP5UjMFBiEwLcQ1S/1McXGCCJGyykPqGJhtsAgRtc3gGJ0MCRZOkhjKhQPKwQGMU++hg5rJsNVRIRqKFHDVLBK4DDfoBMU8WjEYGzZKMks2TGDQmAVNt65aDI+RMqv2+qOMiVwmKWAXatqm8VZkkzWm0GmBQZ4HahAsZ0TGeBrxBqqe5nsVIbAYcqAX5H9xan9wL+RdIKCTIHDzAXeRbyns4lu4DKSt+OqIHCYOcAi7O/RfqCFMfYKZRqVBA7jBOah4B7lBFxHzP19ku14ARUFDjMesaPChbrTKx/iTIw2LApUpIvKAkdSgBiUzQJmIO9EvhHEIWM3EYMm5U/Lt4vAkeQhPLoU8b4uwrqjkAcR8WE/Il7sw2Zrw+0ocCwmAdOAqYiS9QWjn01AlM8dx8vZrWFEzajHiMozgwiPHEDs1guQBQVL/g8kNuAku4fBgAAAAABJRU5ErkJggg=="> |
|||
</div> |
|||
<!-- 右边 --> |
|||
<div class="sub-right"> |
|||
<div class="right-inline"> |
|||
<img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo"> |
|||
<span :name="show.name">{{ show.name }}</span> |
|||
</div> |
|||
<div class="right-inline"> |
|||
<div class="yellow"> |
|||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAJASURBVFiF7VhBdqswDBz5914lx/jpLZr3tzXONo/couQY4R+sqAueEwdkLJl011mCLYaRNRIAv6gDbQ3Qni7NLZgbGx7dAADtv7/D1thV5NrTpXF/2AMAM5r11RwAwB/eWutzTOQiqTKhHDhYSKrIbSeVggOPbtCkvUiuPV0acnzVPJYIg/4Fyiq6tZuh+2y1xADg432/064FyIfus11bkSU3bSSvf9h08Ikw6PeQT6t9DpHctMFC7I7xi4JlPTm+5giK5MiN4uI1xPNT42/RlhbX5xfs6QRiSiNsqZ28UlJPUK4unSmsqQVk9R6spE41wB/2C0sKXc/WODzSLj0Wq1aiDCmqZE0tsFTvZRbydpMIgy49so9/vO93azYBxMLLZ2qWVikVtn6oRa7zpKl16WI5TNnJrdB2npfSggnkj+f+dfyisGVOsw4QN+VKxsuMhhxfa1WMapWIpTxu5OIEW4Y9zcdzf62xqEor0RNsT5fGMgemIlX73E9UMPDYm116UWucFoO1xJ2jSjlm/i8SydiRvtc+dpsHctogUkpjNT7TExe953jui+WeNnrJu2LrS8+PNS4gpLWs3l36nHfVeeJygFiQKx3gWOo677pbzvpLy/1bLIiSeqHrWe9d5EPXM7mxyb10rgFkv1st36vbkJ96slYyHWZ5kHwe1sex4hd/7ehewnwkl1A0YX94a3mk3bNUJMKgIQYY/zJtUVHyvuKemgfd/WudaKzO2iF1859NIFb2NCSmtvCMv5u/qME3731X4FmGtJ4AAAAASUVORK5CYII=" class="img2"> |
|||
<span v-if="club && club[0]" :clubname="club[0].name">{{ club[0].name }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="right-inline"> |
|||
<!-- HomilyLink --> |
|||
<div class="right-item"> |
|||
<img :src="show.user.avatar" class="img1"> |
|||
<div :username="show.user.username">{{show.user.username}}</div> |
|||
</div> |
|||
<!-- 日期 --> |
|||
<div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div> |
|||
<!-- 观看 --> |
|||
<div class="right-item"> |
|||
<img 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"> |
|||
<div :viewCount="viewCount">{{ show.viewCount }}</div> |
|||
</div> |
|||
<!-- 评论 --> |
|||
<div class="right-item"> |
|||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2"> |
|||
<div :comments="show.comments">{{ show.comments }}</div> |
|||
</div> |
|||
<!-- 点赞 --> |
|||
<div class="right-item"> |
|||
<img 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"> |
|||
<div :likes="show.likes">{{ show.likes }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.club{ |
|||
width: 50%; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-top: 20px; |
|||
} |
|||
header { |
|||
background: linear-gradient(to right, #f5f8fa,#dde7ee,#c7d9e5); |
|||
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: #bdced9; |
|||
color: white; |
|||
border: none; |
|||
top: 20px; /* 距离顶部20px */ |
|||
right: 20px; /* 距离右侧20px */ |
|||
cursor: pointer; |
|||
color: #72706a; |
|||
border-radius: 10%; |
|||
} |
|||
|
|||
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; |
|||
display: flex; |
|||
|
|||
} |
|||
.display-list{ |
|||
list-style-type: none; |
|||
padding: 0px; |
|||
|
|||
} |
|||
.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: 40px; |
|||
height: 40px; |
|||
left: 40%; |
|||
top: 40%; |
|||
z-index: 999; |
|||
} |
|||
} |
|||
|
|||
.sub-right{ |
|||
margin-left: 20px; |
|||
|
|||
} |
|||
.right-inline{ |
|||
display: flex; |
|||
margin-bottom: 15px; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
.yellow{ |
|||
display: flex; |
|||
color: #848b99; |
|||
font-size: 14px; |
|||
height: 18px; |
|||
background-color: #ecf2ff; |
|||
} |
|||
.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> |
|||
@ -0,0 +1,292 @@ |
|||
<script setup> |
|||
import ClubApi from '@/api/ClubApi'; |
|||
import ClubNav from '@/components/ClubNav.vue'; |
|||
import Nav from '@/components/Nav.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
// 俱乐部 |
|||
const club = ref() |
|||
// 加载俱乐部信息 |
|||
function loadClub(){ |
|||
//调用查询俱乐部api |
|||
|
|||
ClubApi.getClub(3).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(3).then((result) =>{ |
|||
console.log(result); |
|||
shows.value = result.data; |
|||
}) |
|||
} |
|||
// |
|||
loadShows(); |
|||
</script> |
|||
|
|||
<template> |
|||
<Nav></Nav> |
|||
<ClubNav></ClubNav> |
|||
<div class="club"> |
|||
<!-- 俱乐部相关信息 --> |
|||
<header> |
|||
<div class="club-header1"> |
|||
<img v-if="club && club[0]" class="club-image" :src="club[0].image" alt="视频缩略图"> |
|||
<button class="club-button" @click="handleMore">查看更多</button> |
|||
</div> |
|||
|
|||
<p v-if="club && club[0]">{{ club[0].introduction }}</p> |
|||
</header> |
|||
<!-- 俱乐部内容 --> |
|||
<section class="special-topic"> |
|||
<div class="special-topic"> |
|||
<h2>专题</h2> |
|||
</div> |
|||
<div class="topic"> |
|||
<div class="topic-title"> |
|||
<p>驾驭AI的深度</p> |
|||
<span @click="handleMore">查看更多</span> |
|||
</div> |
|||
|
|||
<!-- 展示列表 --> |
|||
<div class="sub-topic"> |
|||
<ul class="display-list"> |
|||
<li v-for="show in shows"> |
|||
<!-- 左边 --> |
|||
<div class="sub-left"> |
|||
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|||
<img v-if="show.flagType==1" class="player" src="data:image/png;base64,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"> |
|||
</div> |
|||
<!-- 右边 --> |
|||
<div class="sub-right"> |
|||
<div class="right-inline"> |
|||
<img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo"> |
|||
<span :name="show.name">{{ show.name }}</span> |
|||
</div> |
|||
<div class="right-inline"> |
|||
<div class="yellow"> |
|||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIvSURBVFiF7VhbcsMgDFxo7lUyk+RWnsTDrZrMhB4sVj9iGoxBSDj96375IYu1BCsB8I8+mK0ODp5cvLaY3AQbAOA2mLDVdxe5gydnQOf51nG2BjQCwNfwcdGOoyKXkGIJ1QejUUNSRG4rqeWANE6wQZL2JrmZ2F04doDwByRRtNzLk39cFMRwHexeaksw55N/XDibKrmTf1wI5lx7nyNOfDyjJwLBnNPVLiJ38OQ0xLIBx7bVCwZ0rxEskrOYisYc4vzp0bdEljIeGbTpnJ3n0Qqa7wG4UvRW5HrTmflQpRYoR28hJT1RA4DrYFeSdPQTaf0QzD6dFqyUSFBIaUSoPOd8LQKzS2+yqAVJeqii49fB7jmZAJ4Lj8vUwnMpFdp6KEWt8qSptalxyYlEybWQVp5dywB4Ejz66ZNgxi19WmwgSFh/7euiKbzOgO69UUyixY6T8vglFzvYFnrSfPTTvUeiuqREQ3Cey07qOw1St879xQoGlrXZZg/D2rwIqZ3W7wJdkTOg79JzRo5EtTavNgtyUiellMbV+E5NLBXs5nJPC31l8xNyTdT6BcotExu9NPSMdqk1sdRArMi1JnBc6hLtSiWH++la/S4uiFb05gbBcTYpwaOfaFb+ULKpFYDqvlW5X+0G1/VUpeQ2mMA0km9Bqx1r7vh7W/cW8pa8BPFZSatrVWAlMzWoTpk2RlFMKqLrfC6RhxbRMNt1NambTzaBV9qBpSy843TzHz34AcF4N1nRyTl4AAAAAElFTkSuQmCC" class="img2"> |
|||
<span v-if="club && club[0]" :clubname="club[0].name">{{ club[0].name }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="right-inline"> |
|||
<!-- HomilyLink --> |
|||
<div class="right-item"> |
|||
<img :src="show.user.avatar" class="img1"> |
|||
<div :username="show.user.username">{{show.user.username}}</div> |
|||
</div> |
|||
<!-- 日期 --> |
|||
<div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div> |
|||
<!-- 观看 --> |
|||
<div class="right-item"> |
|||
<img 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"> |
|||
<div :viewCount="viewCount">{{ show.viewCount }}</div> |
|||
</div> |
|||
<!-- 评论 --> |
|||
<div class="right-item"> |
|||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2"> |
|||
<div :comments="show.comments">{{ show.comments }}</div> |
|||
</div> |
|||
<!-- 点赞 --> |
|||
<div class="right-item"> |
|||
<img 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"> |
|||
<div :likes="show.likes">{{ show.likes }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.club{ |
|||
width: 50%; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-top: 20px; |
|||
} |
|||
header { |
|||
background: linear-gradient(to right, #dbeaf6,#8bc7f9,#30a0fc); |
|||
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: #3d9eee; |
|||
color: white; |
|||
border: none; |
|||
top: 20px; /* 距离顶部20px */ |
|||
right: 20px; /* 距离右侧20px */ |
|||
cursor: pointer; |
|||
color: #72706a; |
|||
border-radius: 10%; |
|||
} |
|||
|
|||
header p { |
|||
margin: 10px 10px; |
|||
|
|||
} |
|||
.special-topic { |
|||
margin: 20px; |
|||
} |
|||
.topic{ |
|||
background: linear-gradient(to bottom, #daebf8,#e7f3fc,#f8f9fa); |
|||
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; |
|||
display: flex; |
|||
|
|||
} |
|||
.display-list{ |
|||
list-style-type: none; |
|||
padding: 0px; |
|||
|
|||
} |
|||
.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: 40px; |
|||
height: 40px; |
|||
left: 40%; |
|||
top: 40%; |
|||
z-index: 999; |
|||
} |
|||
} |
|||
|
|||
.sub-right{ |
|||
margin-left: 20px; |
|||
|
|||
} |
|||
.right-inline{ |
|||
display: flex; |
|||
margin-bottom: 15px; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
.yellow{ |
|||
display: flex; |
|||
color: #5f95fe; |
|||
font-size: 14px; |
|||
height: 18px; |
|||
background-color: #d5e2ff; |
|||
} |
|||
.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