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

<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>