|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<script setup> |
|
|
|
import Nav from '@/components/Nav.vue'; |
|
|
|
import { ref, onMounted, reactive } from 'vue'; |
|
|
|
import axios from 'axios'; |
|
|
|
import { ref, onMounted, reactive,computed } from 'vue'; |
|
|
|
import homeApi from '@/api/HomeApi'; |
|
|
|
|
|
|
|
const articleImgSrc = ref(''); |
|
|
|
const title = ref(''); |
|
|
|
@ -11,42 +11,80 @@ const viewsCount = ref(''); |
|
|
|
const commentsCount = ref(''); |
|
|
|
const likesCount = ref(''); |
|
|
|
const playTime = ref(''); |
|
|
|
const club_id=ref(''); |
|
|
|
|
|
|
|
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: '', |
|
|
|
publishTime: '', |
|
|
|
viewsCount: 0, |
|
|
|
commentsCount: 0, |
|
|
|
likesCount: 0, |
|
|
|
playTime: '' |
|
|
|
playTime: '', |
|
|
|
club_id: '', |
|
|
|
publishTime: '', |
|
|
|
flag_type:'' |
|
|
|
}); |
|
|
|
|
|
|
|
console.log('初始化后的articleData:', articleData); |
|
|
|
|
|
|
|
// 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中 |
|
|
|
const mapResponseToArticleData = (responseData) => { |
|
|
|
if (Array.isArray(responseData)) { |
|
|
|
articleData.articleImgSrc = responseData.map(item => item.cover); |
|
|
|
articleData.title = responseData.map(item => item.name); |
|
|
|
articleData.authorAvatarSrc = responseData.map(item => item.avatar); |
|
|
|
articleData.authorName = responseData.map(item => item.username); |
|
|
|
articleData.viewsCount = responseData.map(item => item.view_count); |
|
|
|
articleData.commentsCount = responseData.map(item => item.comments); |
|
|
|
articleData.likesCount = responseData.map(item => item.likes); |
|
|
|
articleData.playTime = responseData.map(item => item.video_duration); |
|
|
|
articleData.publishTime = responseData.map(item => item.releaseTime); |
|
|
|
articleData.club_id = responseData.map(item => item.club_id); |
|
|
|
articleData.flag_type = responseData.map(item => item.flag_type); |
|
|
|
} else { |
|
|
|
console.warn('接口返回的数据格式不符合预期'); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 页面加载时调用接口获取数据 |
|
|
|
onMounted(() => { |
|
|
|
axios.get('https://api.example.com/article') |
|
|
|
.then((response) => { |
|
|
|
// 直接修改articleData里的各个属性，因为它现在是reactive响应式对象 |
|
|
|
articleData.articleImgSrc = response.data.articleImgSrc; |
|
|
|
articleData.title = response.data.title; |
|
|
|
articleData.authorAvatarSrc = response.data.authorAvatarSrc; |
|
|
|
articleData.authorName = response.data.authorName; |
|
|
|
articleData.publishTime = response.data.publishTime; |
|
|
|
articleData.viewsCount = response.data.viewsCount; |
|
|
|
articleData.commentsCount = response.data.commentsCount; |
|
|
|
articleData.likesCount = response.data.likesCount; |
|
|
|
articleData.playTime = response.data.playTime; |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
console.error('获取数据出错：', error); |
|
|
|
}); |
|
|
|
async function selectAll() { |
|
|
|
try { |
|
|
|
const response = await homeApi.gethomeList(); |
|
|
|
mapResponseToArticleData(response); |
|
|
|
} catch (error) { |
|
|
|
console.error('获取数据出错：', error); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
selectAll(); |
|
|
|
|
|
|
|
|
|
|
|
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> |
|
|
|
|
|
|
|
@ -59,35 +97,46 @@ onMounted(() => { |
|
|
|
<div class="container" style="width: 600px;"> |
|
|
|
<div class="title"><b>推荐</b></div> |
|
|
|
<ul class="data-list"> |
|
|
|
<li class="data-list-li articleList" v-for="(item, index) in articleData" :key="index"> |
|
|
|
<div class="articleimg"> |
|
|
|
<div class="el-image articleimg-img"> |
|
|
|
<img :src="item.articleImgSrc" alt="文章图片"> |
|
|
|
<span class="play-icon"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="articleinfo"> |
|
|
|
<p>{{ item.title }}</p> |
|
|
|
<span class="articleinfo-avatar islink"> |
|
|
|
<img :src="item.authorAvatarSrc" alt="作者头像"> |
|
|
|
"{{ item.authorName }}" |
|
|
|
</span> |
|
|
|
<span class="articleinfo-time">{{ item.publishTime }}</span> |
|
|
|
<span class="homepage-list-li-see"> |
|
|
|
<img :src="seeSrc" alt="浏览量图标"> |
|
|
|
"{{ item.viewsCount }}" |
|
|
|
</span> |
|
|
|
<span class="homepage-list-li-ping"> |
|
|
|
<img :src="pingSrc" alt="评论数图标"> |
|
|
|
"{{ item.commentsCount }}" |
|
|
|
</span> |
|
|
|
<span class="homepage-list-1i-zan"> |
|
|
|
<img :src="zanSrc" alt="点赞图标"> |
|
|
|
"{{ item.likesCount }}" |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<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>{{ title }}</p> |
|
|
|
<span class="articleinfo-avatar islink"> |
|
|
|
<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> |
|
|
|
@ -95,25 +144,25 @@ onMounted(() => { |
|
|
|
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="(item, index) in articleData" :key="index"> |
|
|
|
<div class="articleimg"> |
|
|
|
<div class="el-image articleimg-img"> |
|
|
|
<img :src="item.articleImgSrc" alt="文章图片"> |
|
|
|
<span class="corner-mark">1</span> |
|
|
|
<span class="play-time">{{ item.playTime }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="articleinfo"> |
|
|
|
<h5>{{ item.title }}</h5> |
|
|
|
<span class="homepage-list-li-see"> |
|
|
|
<img :src="seeSrc" alt="浏览量图标"> |
|
|
|
"{{ item.viewsCount }}" |
|
|
|
</span> |
|
|
|
<span class="articleinfo-time">{{ item.publishTime }}</span> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<ul class="data-list" > |
|
|
|
<li class="data-list-li articleList" v-for="(title, index) in filteredArticleData" :key="index"> |
|
|
|
<div class="articleimg" > |
|
|
|
<div class="el-image articleimg-img" > |
|
|
|
<img :src="articleData.articleImgSrc[index]" alt="文章图片"> |
|
|
|
<span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span> |
|
|
|
<span class="play-time">{{ articleData.playTime[index] }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="articleinfo"> |
|
|
|
<h5>{{ title }}</h5> |
|
|
|
<span class="homepage-list-li-see"> |
|
|
|
<img :src="seeSrc" alt="浏览量图标"> |
|
|
|
{{ articleData.viewsCount[index] }} |
|
|
|
</span> |
|
|
|
<span class="articleinfo-time">{{ articleData.publishTime[index] }}</span> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -215,17 +264,29 @@ body { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.corner-mark { |
|
|
|
.corner-mark { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
background-color: red; |
|
|
|
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%; |
|
|
|
@ -236,4 +297,22 @@ body { |
|
|
|
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> |
zhaowenkang
7 months ago