MiniPrograms/pages/home/home.vue

<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<view class="home-topinfo">
			<image class="children-avatar" src="../../static/logo.png"></image>
			<view class="children-name">
				<text>XXX</text>
			</view>
			<uni-icons class="children-icons" type="right"></uni-icons>
		</view>
		<!-- 卡片区域 -->
		<uni-card class="home-card" title="基础卡片" margin="-30px 20px" >
			<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			
		},
		methods: {
			
			
		}
	}
</script>

<style lang="scss">
.home-container{
	height: 100%;
	
	.home-topinfo{
		height: 430rpx;
		background: linear-gradient(#4169E1, #f5f5f5);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		
		.children-avatar{
			margin-top: 40px;
			margin-left: 20px;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			border: 1px solid #FFFFFF;
			
		}
		.children-name{
			margin-top: 40px;
			margin-left: 10px;
		}
		.children-icons{
			margin-top: 40px;
			margin-left: 5px;
		}
	}
}

</style>