practice_uniapp/pages/home/home.vue

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