1.b站登录界面

我的b站教学视频：https://www.bilibili.com/video/BV1LQgQexEGm/?spm_id_from=333.999.0.0&vd_source=d0ea58f1127eed138a4ba5421c577eb1

最终实现效果：

需要准备2张图片，分别是向下和向右边的图标

代码：

@Entry
@Component
struct Index {build() {Column({space:25}){Text('手机号登录/注册').fontSize(25)Row({ space: 10}){Row(){Text('+86')Image($r('app.media.ic_public_arrow_down_0')).width(15)}.width('15%')TextInput({placeholder:'请输入手机号码'}).backgroundColor(Color.White)}.border({width:{bottom:1},style:BorderStyle.Dotted}).margin({top:30})Row({ space: 10}){Text('验证码').width('15%')TextInput({placeholder:'请输入验证码'}).backgroundColor(Color.White).width('50%')Text('获取验证码')}.width('100%').border({width:{bottom:1},style:BorderStyle.Dotted})Button('登录').backgroundColor(Color.Pink).width('100%').margin(15)Row(){Text('账号密码登录')Image($r('app.media.ic_public_arrow_right_filled')).width(15)}Row(){Text('').width(15).height(15).border({width:1})Column(){Row(){Text(' 我已阅读并同意').fontWeight('300')Text('用户协议、隐私协议').fontColor(Color.Blue)}Text('，未注册绑定的手机号验证成功后将自动注册').fontWeight('300')}}.margin({top:300})Text('登录遇到问题')}.width('100%').padding(15)}
}

2.华为登录界面

最终实现效果：

准备华为的图片存放在resource.base.media.huawei.svg

代码：

@Entry
@Component
struct Index {build() {Column({ space:15 }) {Image($r('app.media.huawei')).width(70)TextInput({placeholder:'请输入用户名'})TextInput({placeholder:'请输入密码'}).type(InputType.Password)Button('登录').width('100%')Row({ space: 15}){Text('注冊账号')Text('忘记密码')}}.width('100%').padding(30)}
}

3. 微信登录界面

实现效果显示：

代码：

@Entry
@Component
struct Index {build() {Column({ space:25 }) {Text('手机号登录').fontSize(30).fontWeight(FontWeight.Medium)Row(){Text('国家/地区').width('25%')TextInput({placeholder:'中国大陆 (+86)'}).backgroundColor(Color.White)}.width('100%').border({width:{bottom:1},style:BorderStyle.Dotted})Row(){Text('手机号').width('25%')TextInput({placeholder:'请输入手机号'}).backgroundColor(Color.White)}.width('100%').border({width:{bottom:1},style:BorderStyle.Dotted})Text('用微信号/QQ号/邮箱登录').width('100%').fontColor('#20a0f1').fontWeight(300)Text('上述手机号仅用于登录验证').fontSize(13).margin({top:100})Button('同意并继续').backgroundColor('#32df72').fontSize(18).width(160).type(ButtonType.Normal).borderRadius(10)Row({space:10}){Text('找回密码')Text('|')Text('更多选项')}}.width('100%').padding({top:110,left:30,right:30})}
}