小程序P177 15.登录与支付-用户信息-渲染用户的头像和昵称
1、实现用户头像昵称区域的基本布局
①在 my-userinfo 组件中，定义如下的 UI 结构：

<template>
<view class="my-userinfo-container">

<!-- 头像昵称区域 -->
<view class="top-box">
<image src="" class="avatar"></image>
<view class="nickname">xxx</view>
</view>

</view>
</template>
②美化当前组件的样式：
.my-userinfo-container {
height: 100%;
// 为整个组件的结构添加浅灰色的背景
background-color: #f4f4f4;

.top-box {
height: 400rpx;
background-color: #c00000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

.avatar {
display: block;
width: 90px;
height: 90px;
border-radius: 45px;
border: 2px solid white;
box-shadow: 0 1px 5px black;
}

.nickname {
color: white;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
}
}
}
③在 my.vue 页面中，为最外层包裹性质的 view 容器，添加 class="my-container" 的类名，并美化样式如下：
page,
.my-container {
height: 100%;
}