zhaowenkang
7 months ago
7 changed files with 466 additions and 28 deletions
-
99vueHomilyLink/package-lock.json
-
12vueHomilyLink/src/api/HomeApi.js
-
5vueHomilyLink/src/api/index.js
-
3vueHomilyLink/src/assets/main.css
-
15vueHomilyLink/src/components/Nav.vue
-
357vueHomilyLink/src/views/HomeView.vue
-
3vueHomilyLink/vite.config.js
@ -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; |
|||
@ -1,12 +1,365 @@ |
|||
<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 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> |
|||
<Nav></Nav> |
|||
主页 |
|||
<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="文章图片"> |
|||
<span class="play-icon"></span> |
|||
</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> |
|||
<span class="articleinfo-avatar islink" style="font-size: 14px;"> |
|||
<img :src="articleData.authorAvatarSrc[index]" alt="作者头像"> |
|||
{{ articleData.authorName[index] }} |
|||
</span> |
|||
<span class="articleinfo-time" alt="发布时间"> |
|||
{{ articleData.publishTime[index] }} |
|||
</span> |
|||
<span class="homepage-list-li-see"> |
|||
<img :src="seeSrc" alt="浏览量图标"> |
|||
{{ articleData.viewsCount[index] }} |
|||
</span> |
|||
<span class="homepage-list-li-ping"> |
|||
<img :src="pingSrc" alt="评论数图标"> |
|||
{{ articleData.commentsCount[index] }} |
|||
</span> |
|||
<span class="homepage-list-1i-zan"> |
|||
<img :src="zanSrc" alt="点赞图标"> |
|||
{{ articleData.likesCount[index] }} |
|||
</span> |
|||
</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> |
|||
<span class="see"> |
|||
<img :src="seeSrc" alt="浏览量图标"> |
|||
{{ article.viewCount }} |
|||
</span> |
|||
<span class="articleinfo-time">{{ article.releaseTime }}</span> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.articletitle{ |
|||
display: block; |
|||
font-size: 16px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.play-icon { |
|||
width: 0; |
|||
height: 0; |
|||
border-style: solid; |
|||
border-width: 10px 0 10px 16px; /* 根据需要调整三角形大小 */ |
|||
border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); /* 白色半透明三角形，可调整颜色 */ |
|||
position: absolute; |
|||
top: 45%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
.daohang{ |
|||
height: 32px; |
|||
} |
|||
.container{ |
|||
margin-right: 0; |
|||
margin-left: auto; |
|||
|
|||
} |
|||
.sidebar-right{ |
|||
margin-right: auto; |
|||
margin-left: 0; |
|||
} |
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
} |
|||
.title { |
|||
font-size: 24px; |
|||
color: #333; |
|||
padding: 10px 0; |
|||
|
|||
} |
|||
.data-list-li { |
|||
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: 7%; |
|||
} |
|||
.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; |
|||
} |
|||
.homepage-list-li-see, |
|||
.homepage-list-li-ping, |
|||
.homepage-list-1i-zan { |
|||
display: inline-block; |
|||
margin-left: 10px; |
|||
cursor: pointer; |
|||
font-size: 13px; |
|||
} |
|||
.homepage-list-li-see img, |
|||
.homepage-list-li-ping img, |
|||
.homepage-list-1i-zan img { |
|||
width: 20px; |
|||
height: 20px; |
|||
padding: 0; |
|||
margin-left: 0; |
|||
} |
|||
.see{ |
|||
margin-left: 0; |
|||
font-size: 13px; |
|||
} |
|||
.see img{ |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
.class123{ |
|||
/*让页面分为左右结构*/ |
|||
display: flex; |
|||
} |
|||
|
|||
.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: 10%; |
|||
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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue