小程序P171 09.登录与支付-登录-初步渲染页面的布局结构（接上一个）4、实现登录组件的基本布局①为 my-login 组件定义如下的 UI 结构：<template> <view class="login-container"> <!-- 提示登录的图标 --> <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> <!-- 登录按钮 --> <button type="primary" class="btn-login">一键登录</button> <!-- 登录提示 --> <view class="tips-text">登录后尽享更多权益</view> </view></template>②美化登录组件的样式：.login-container { // 登录盒子的样式 height: 750rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f8f8f8; position: relative; overflow: hidden; // 绘制登录盒子 &::after { content: ' '; display: block; position: absolute; width: 100%; height: 40px; left: 0; bottom: 0; background-color: white; border-radius: 100%; transform: translateY(50%); }// 登录按钮 .btn-login { width: 90%; border-radius: 100px; margin: 15px 0; background-color: #c00000; } // 按钮下方提示消息 .tips-text { font-size: 12px; color: gray; }}