You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
7.0 KiB
237 lines
7.0 KiB
<template>
|
|
<view class="class123">
|
|
<view class="container" style="width: 100%;">
|
|
<view class="title"><b>推荐</b></view>
|
|
<ul class="data-list">
|
|
<li class="data-list-li articleList" v-for="(group, index) in chunk(articleData, 2)" :key="index">
|
|
<view class="article-row">
|
|
<view class="articleimage" v-for="(article, subIndex) in group" :key="subIndex">
|
|
<view class="el-image">
|
|
<img :src="article.cover" alt="文章图片"></img>
|
|
<text class="play-icon"></text>
|
|
<text class="corner-mark">{{ article.cornerMark }}</text>
|
|
</view>
|
|
<view class="articleinfo">
|
|
<text class="articletitle">{{ article.name }}</text><br>
|
|
<text class="avatarName">
|
|
{{ article.user.username }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- <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 articleData" :key="index">
|
|
<div class="articleimg">
|
|
<div class="el-image articleimg-img" >
|
|
<img :src="article.cover" alt="文章图片">
|
|
<span class="play-time">{{ article.videoDuration }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="articleinfo">
|
|
<h5>{{ article.name }}</h5>
|
|
<span class="homepage-list-li-see">
|
|
<img :src="seeSrc" alt="浏览量图标">
|
|
{{ article.viewCount }}
|
|
</span>
|
|
<span class="articleinfo-time">{{ article.releaseTime }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
|
|
|
|
<!-- <view class="class123">
|
|
<view class="container" style="width: 100%;">
|
|
<view class="title"><b>推荐</b></view>
|
|
<ul class="data-list">
|
|
<li class="data-list-li articleList" v-for="(group, index) in chunk(articleData.value, 2)" :key="index">
|
|
<view class="article-row flex-row">
|
|
<view class="articleimage" v-for="(article, subIndex) in group" :key="subIndex" style="width: 48%; margin-right: 2%;" v-if="subIndex < 2">
|
|
<view class="el-image">
|
|
<img :src="article.cover" alt="文章图片"></img>
|
|
<text class="play-icon"></text>
|
|
<text class="corner-mark">{{ article.cornerMark }}</text>
|
|
</view>
|
|
<view class="articleinfo">
|
|
<text class="articletitle">{{ article.name }}</text><br>
|
|
<text class="avatarName">
|
|
{{ article.user.username }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="articleimage" v-for="(article, subIndex) in group" :key="subIndex" style="width: 100%; margin-top: 10px;" v-if="subIndex === 2">
|
|
<view class="el-image">
|
|
<img :src="article.cover" alt="文章图片"></img>
|
|
<text class="play-icon"></text>
|
|
<text class="corner-mark">{{ article.cornerMark }}</text>
|
|
</view>
|
|
<view class="articleinfo">
|
|
<text class="articletitle">{{ article.name }}</text><br>
|
|
<text class="avatarName">
|
|
{{ article.user.username }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
</view> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, reactive,computed } from 'vue';
|
|
import homeApi from '@/api/HomeApi';
|
|
|
|
const articleData = ref([]);
|
|
function fetchData (){
|
|
homeApi.gethomeList().then(response => {
|
|
// 将articleData响应式对象赋值给articleData
|
|
articleData.value = response.data;
|
|
console.log('初始化后的articleData:', articleData.value);
|
|
}).catch(error => {
|
|
console.error('获取数据出错:', error);
|
|
});
|
|
};
|
|
fetchData ();
|
|
|
|
function chunk(arr, size = 2) {
|
|
if (!arr) {
|
|
return [];
|
|
}
|
|
const result = [];
|
|
for (let i = 0; i < arr.length; ) {
|
|
const subArr = [];
|
|
for (let j = 0; j < size && i < arr.length; j++) {
|
|
subArr.push(arr[i++]);
|
|
}
|
|
result.push(subArr);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.class123 {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.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;
|
|
top: 35%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.daohang {
|
|
height: 32px;
|
|
}
|
|
|
|
.container {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 7px;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.data-list {
|
|
list-style: none;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.data-list-li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.article-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.articleimage {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 50%;
|
|
margin-right: 10px;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.el-image img {
|
|
width: 100%;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
// transform: scale();
|
|
}
|
|
|
|
.articleinfo {
|
|
position: relative;
|
|
// bottom: 0;
|
|
// left: 0;4
|
|
width: 100%;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: white;
|
|
padding: 5px;
|
|
text-align: center;
|
|
margin-top: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.articletitle {
|
|
padding: 0;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
|
|
.avatarName {
|
|
margin-left: 0;
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
color: gray;
|
|
}
|
|
|
|
.class123 {
|
|
display: flex;
|
|
}
|
|
|
|
.corner-mark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: red;
|
|
color: white;
|
|
padding: 2px 5px;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|