xs/xs-app/pages/mine/mine-info.vue

<template>
	<view class="mine-info_content">
		<view class="bg">
			<image class="image" src="../../static/imgs/public/img_top_bg_1.png" mode="aspectFill"></image>
		</view>
		<view class="container">
			<view class="container__avatar">
				<image class="image" :src="UserData().getData().avatar_url" mode=""></image>
			</view>
			<view class="container__name">
				{{UserData().getData().user_name}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
    import { UserData } from '../../stores/userDataManager';
</script>

<style lang="scss">
	.mine-info_content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		.bg{
			position: relative;
			flex-shrink: 0;
			width: 100%;
			height: 300rpx;
			.image{
				width: 100%;
				height: 100%;
			}
		}
		.container{
			 position: absolute;
			 display: flex;
			 flex-direction: row;
			 margin-left: 40rpx;
			 align-items: center;
			 &__avatar{
				 flex-shrink: 0;
				 width: 150rpx;
				 height: 150rpx;
				 .image {
					 width: 100%;
					 height: 100%;
					 border-radius: 50%;
				 }
			 }
			 &__name{
				 margin-left: 50rpx;
				 font-size: 20px;
			 }
		}
	}
</style>