uniapp 一个文章预览首页，包括了标题和封面，数据循环和CSS样式

<template>
	<view class="home">
		
		<view @click="seearticle(item._id)" class="container" v-for="item in listarr" :key="item.index">
			<view class="title">
				{{item.title}}
			</view>
			<image class="pic" mode="aspectFill" :src="item.avatar" ></image>
		</view>
		
		<button @click="onsubmit">发布</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				name: "",
				gender: "",
				imageValue: [],
				avatar: [],
				listarr:[],
				num:1
			}
		},
		onLoad() {
			uniCloud.callFunction({
				name: "getdata",
				data: {
			
				}
			}).then(res => {
				this.listarr = res.result.data
				console.log(this.listarr);
			})
		},
		methods: {
			onsubmit() {
				uni.navigateTo({
					url: "/pages/home/home",
					query:"65a0eb406e5d2d71871b52f7"
				})
			},
			seearticle(value){
				uni.navigateTo({
					url: "/pages/detail/detail?id="+value
				})
			}
		}
	}
</script>


<style lang="scss">
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #F5FFFA;
	}

	.title {
		flex: 1;
		height: 35%;
		line-height: 35%;
		margin-right: 30rpx;
	}

	.pic {
		width: 245rpx;
		height: 137rpx;
		border-radius: 15rpx;
		/* 圆角设置 */
	}
</style>