|
|
|
@ -4,27 +4,27 @@ |
|
|
|
<el-col :span="17" :xs="24"> |
|
|
|
<div class="section-title">推荐</div> |
|
|
|
<el-row :gutter="20" class="recommend-videos" style="margin-right: -25px;"> |
|
|
|
<el-col :span="24" v-for="video in video" :key="video.id"> |
|
|
|
<el-card class="video-card" @click="incrementViews(scope.row.id)"> |
|
|
|
<el-col :span="24" v-for="video in recommendedVideos" :key="video.id"> |
|
|
|
<el-card class="video-card"> |
|
|
|
<div class="video-content"> |
|
|
|
<img :src="video.cover" alt="视频缩略图" class="video-thumbnail" /> |
|
|
|
<img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" /> |
|
|
|
<div class="video-info"> |
|
|
|
<div class="video-title1">{{ video.title }}</div> |
|
|
|
<div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.clubId == '1'" /><img v-else /></div> |
|
|
|
<div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.author == '博股俱乐部'" /><img v-else /></div> |
|
|
|
<div class="video-meta1"> |
|
|
|
<img class="icon" :src="video.publisherAvatar" /> |
|
|
|
<span> {{ video.publisherName }} {{ video.publishTime }}</span> |
|
|
|
<img class="icon" src="../pic/link.jpg" /> |
|
|
|
<span> {{ video.author }} {{ video.time }}</span> |
|
|
|
<div class="video-stats"> |
|
|
|
<el-icon> |
|
|
|
<View /> |
|
|
|
</el-icon> |
|
|
|
<el-button type="text">{{ video.videoDuration }}</el-button> |
|
|
|
<el-button type="text">{{ video.views }}</el-button> |
|
|
|
<el-icon> |
|
|
|
<ChatDotSquare /> |
|
|
|
</el-icon> |
|
|
|
<el-button type="text">{{ video.likeCount }}</el-button> |
|
|
|
<el-button type="text">{{ video.likes }}</el-button> |
|
|
|
<img src="../pic/like.png" class="like"> |
|
|
|
<el-button type="text">{{ video.commentCount }}</el-button> |
|
|
|
<el-button type="text">{{ video.comments }}</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -39,16 +39,16 @@ |
|
|
|
<el-col :span="24" v-for="video in featuredVideos" :key="video.id"> |
|
|
|
<el-card class="video-card"> |
|
|
|
<div class="video-content"> |
|
|
|
<img :src="video.cover" alt="视频缩略图" class="video-thumbnail" /> |
|
|
|
<img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" /> |
|
|
|
<div class="video-info"> |
|
|
|
<div class="video-title2">{{ video.title }}</div> |
|
|
|
<div class="video-meta2"> |
|
|
|
<div class="video-stats"> |
|
|
|
<el-icon class="my-icon"> |
|
|
|
<el-icon> |
|
|
|
<View /> |
|
|
|
</el-icon> |
|
|
|
<el-button type="text">{{ video.viewCount }}</el-button> |
|
|
|
<el-button type="text">{{ video.publishTime }}</el-button> |
|
|
|
<el-button type="text">{{ video.views }}</el-button> |
|
|
|
<el-button type="text">{{ video.time }}</el-button> |
|
|
|
<!-- <el-button type="text">{{ video.comments }}</el-button> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -63,172 +63,134 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import 'element-plus/dist/index.css'; |
|
|
|
import homeApi from '@/api/homeApi'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化所有的推荐视频 |
|
|
|
const video = ref([]); |
|
|
|
|
|
|
|
// 定义方法，获取推荐视频 |
|
|
|
function getAllRecommendedVideos(queryType) { |
|
|
|
homeApi.selectHome(queryType) |
|
|
|
.then(resp =>{ |
|
|
|
if(resp.data){ |
|
|
|
video.value = resp.data.list; |
|
|
|
console.log(video.value); |
|
|
|
}else{ |
|
|
|
console.log('获取推荐视频失败'); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//精选视频 |
|
|
|
const featuredVideos = ref([]); |
|
|
|
|
|
|
|
// 定义方法，获取精选视频 |
|
|
|
function getAllFeaturedVideos(queryType) { |
|
|
|
homeApi.selectHome(queryType) |
|
|
|
.then(resp =>{ |
|
|
|
if(resp.data){ |
|
|
|
featuredVideos.value = resp.data.list; |
|
|
|
console.log(featuredVideos.value); |
|
|
|
}else{ |
|
|
|
console.log('获取精选视频失败'); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 页面加载时调用 |
|
|
|
getAllRecommendedVideos(1); |
|
|
|
getAllFeaturedVideos(2); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const recommendedVideos = ref([ |
|
|
|
// { |
|
|
|
// id: 1, |
|
|
|
// thumbnail: 'src/pic/money.png', |
|
|
|
// title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)', |
|
|
|
// author: '小金', |
|
|
|
// time: '23小时前', |
|
|
|
// views: 15, |
|
|
|
// likes: 0, |
|
|
|
// comments: 1, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 2, |
|
|
|
// thumbnail: 'src/pic/touzi.png', |
|
|
|
// title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)', |
|
|
|
// author: 'STW', |
|
|
|
// time: '07-16 17:47', |
|
|
|
// views: 5, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 3, |
|
|
|
// thumbnail: 'src/pic/qiangshi.png', |
|
|
|
// title: '第二节《强势结构形态》', |
|
|
|
// author: '博股俱乐部', |
|
|
|
// time: '01-24 09:55', |
|
|
|
// views: 498, |
|
|
|
// likes: 0, |
|
|
|
// comments: 12, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 4, |
|
|
|
// thumbnail: 'src/pic/jihuigu.png', |
|
|
|
// title: '价值投资之机会谷一Josie老师(11.7.24)', |
|
|
|
// author: 'STW', |
|
|
|
// time: '07-16 17:37', |
|
|
|
// views: 6, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 5, |
|
|
|
// thumbnail: 'src/pic/A.png', |
|
|
|
// title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告', |
|
|
|
// author: '宋建军', |
|
|
|
// time: '07-16 16:22', |
|
|
|
// views: 3, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// ]); |
|
|
|
import 'element-plus/dist/index.css'; |
|
|
|
// import homeApi from '@/api/homeApi'; |
|
|
|
|
|
|
|
//初始化所有的推荐视频 |
|
|
|
// const video = ref([]); |
|
|
|
|
|
|
|
//定义方法，获取推荐视频 |
|
|
|
// function getAllRecommendedVideos(queryType) { |
|
|
|
// homeApi.selectHome() |
|
|
|
// .then(resp =>{ |
|
|
|
// video.value = resp.data.QueryRecommend; |
|
|
|
// }); |
|
|
|
// } |
|
|
|
|
|
|
|
//页面加载时调用 |
|
|
|
// getAllRecommendedVideos(1); |
|
|
|
|
|
|
|
|
|
|
|
const recommendedVideos = ref([ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
thumbnail: 'src/pic/money.png', |
|
|
|
title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)', |
|
|
|
author: '小金', |
|
|
|
time: '23小时前', |
|
|
|
views: 15, |
|
|
|
likes: 0, |
|
|
|
comments: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
thumbnail: 'src/pic/touzi.png', |
|
|
|
title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)', |
|
|
|
author: 'STW', |
|
|
|
time: '07-16 17:47', |
|
|
|
views: 5, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
thumbnail: 'src/pic/qiangshi.png', |
|
|
|
title: '第二节《强势结构形态》', |
|
|
|
author: '博股俱乐部', |
|
|
|
time: '01-24 09:55', |
|
|
|
views: 498, |
|
|
|
likes: 0, |
|
|
|
comments: 12, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
thumbnail: 'src/pic/jihuigu.png', |
|
|
|
title: '价值投资之机会谷一Josie老师(11.7.24)', |
|
|
|
author: 'STW', |
|
|
|
time: '07-16 17:37', |
|
|
|
views: 6, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
thumbnail: 'src/pic/A.png', |
|
|
|
title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告', |
|
|
|
author: '宋建军', |
|
|
|
time: '07-16 16:22', |
|
|
|
views: 3, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
]); |
|
|
|
|
|
|
|
// 精选视频 |
|
|
|
// const featuredVideos = ref([ |
|
|
|
// { |
|
|
|
// id: 1, |
|
|
|
// thumbnail: 'src/pic/wengehua.png', |
|
|
|
// title: '温哥华弘粉之约-北美同城会陪你共话投资', |
|
|
|
// author: 'CANADA', |
|
|
|
// time: '07-08 19:47', |
|
|
|
// views: 523, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 2, |
|
|
|
// thumbnail: 'src/pic/shengkuang.png', |
|
|
|
// title: '盛况！香港弘粉同城会圆满成功！', |
|
|
|
// author: '精彩回顾', |
|
|
|
// time: '07-08 19:47', |
|
|
|
// views: 307, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 3, |
|
|
|
// thumbnail: 'src/pic/jinrongzhan.png', |
|
|
|
// title: '金融战事再升级-欧盟对中国电动车征税的真相', |
|
|
|
// author: '精彩回顾', |
|
|
|
// time: '06-27 17:30', |
|
|
|
// views: 144, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 4, |
|
|
|
// thumbnail: 'src/pic/youxueban.png', |
|
|
|
// title: '弘粉游学班：赏美景、品美食、学投资！', |
|
|
|
// author: '精彩回顾', |
|
|
|
// time: '06-29 19:11', |
|
|
|
// views: 658, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// id: 5, |
|
|
|
// thumbnail: 'src/pic/meiyuanbaquan.png', |
|
|
|
// title: '美元霸权地位动摇！"石油美元"时代...', |
|
|
|
// author: '精彩回顾', |
|
|
|
// time: '06-18 14:00', |
|
|
|
// views: 538, |
|
|
|
// likes: 0, |
|
|
|
// comments: 0, |
|
|
|
// }, |
|
|
|
// ]); |
|
|
|
const featuredVideos = ref([ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
thumbnail: 'src/pic/wengehua.png', |
|
|
|
title: '温哥华弘粉之约-北美同城会陪你共话投资', |
|
|
|
author: 'CANADA', |
|
|
|
time: '07-08 19:47', |
|
|
|
views: 523, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
thumbnail: 'src/pic/shengkuang.png', |
|
|
|
title: '盛况！香港弘粉同城会圆满成功！', |
|
|
|
author: '精彩回顾', |
|
|
|
time: '07-08 19:47', |
|
|
|
views: 307, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
thumbnail: 'src/pic/jinrongzhan.png', |
|
|
|
title: '金融战事再升级-欧盟对中国电动车征税的真相', |
|
|
|
author: '精彩回顾', |
|
|
|
time: '06-27 17:30', |
|
|
|
views: 144, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
thumbnail: 'src/pic/youxueban.png', |
|
|
|
title: '弘粉游学班：赏美景、品美食、学投资！', |
|
|
|
author: '精彩回顾', |
|
|
|
time: '06-29 19:11', |
|
|
|
views: 658, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
thumbnail: 'src/pic/meiyuanbaquan.png', |
|
|
|
title: '美元霸权地位动摇！"石油美元"时代...', |
|
|
|
author: '精彩回顾', |
|
|
|
time: '06-18 14:00', |
|
|
|
views: 538, |
|
|
|
likes: 0, |
|
|
|
comments: 0, |
|
|
|
}, |
|
|
|
]); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.video-card:hover{ |
|
|
|
transform: scale(1.01); |
|
|
|
} |
|
|
|
|
|
|
|
.my-icon{ |
|
|
|
right: 3px; |
|
|
|
} |
|
|
|
.like { |
|
|
|
height: 14px; |
|
|
|
width: 14px; |
|
|
|
@ -313,7 +275,6 @@ span { |
|
|
|
align-items: center; |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
padding-top: 40px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
guoyanqiang
3 months ago