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>
								<view class="play-icon-container">
									<text class="play-icon" v-if="article.flagType===1"></text>
								<text class="play-icon-background" v-if="article.flagType===1"></text>
								</view>

								<text class="corner-mark">{{ article.cornerMark }}</text>
							</view>
							<view class="articleinfo">
								<view class="articletitle">{{ article.name }}</view><br>
								<view class="avatarName">
									{{ article.user.username }}
								</view>
							</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;
		width: 100%;
	}
	.play-icon-container {
	  width: 30px;
	  /* 可以根据需求调整这个容器宽度，用于控制整体大小和布局 */
	  height: 30px;
	  /* 可以根据需求调整这个容器高度，用于控制整体大小和布局 */
	  position: absolute;
	}

	.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;
		bottom: 200%;
		left: 170%;
		transform: translate(200%, -50%);
		z-index: 1;
	}

	.play-icon-background {
	  content: "";
	  width: 35px;
	  height: 35px;
	  border-radius: 50%;
	  background-color: rgba(0, 0, 0, 0.6);
	  position: absolute;
	  bottom: 210%;
	  left: 120%;
	  transform: translateX(100%);
	  z-index: 0;
	}

	.daohang {
		height: 32px;
	}

	.container {
		margin-right: 0;
		margin-left: auto;
	}

	body {
		font-family: Arial, sans-serif;
	}

	.title {
		font-size: 22px;
		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;
		width: 100%;
	}

	.articleimage {
		position: relative;
		width: 48%;
		height: 50%;
		margin: 3px;
		border-radius: 5px;
		overflow: hidden;
	}

	.el-image img {
		width: 100%;
		height: 100px;
		object-fit: cover;
		// transform: scale();
	}

	.articleinfo {
		// 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;
		width: 95%;
	}

	.avatarName {
		margin-left: 0;
		margin-top: -12px;
		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>