简单实现京东登录页面

@Entry
@Component
struct Index {@State message: string = '';build() {
Column(){//顶部区域Row(){Image($r('app.media.jd_cancel')).width(20).height(20)Text('帮助')}.width('100%').justifyContent(FlexAlign.SpaceBetween)//logo图标Image($r('app.media.jd_logo')).width(250).height(250)//国家/地址
Row(){
Text('国家/地址').fontColor('#666').layoutWeight(1)Text('中国(+86)').fontColor('#666').margin({right:5})Image($r('app.media.jd_right')).width(20).fillColor('#666')
}.width('100%').height(40).backgroundColor('#fff').borderRadius(20).padding({left:15,right:10})//手机号（输入框）
TextInput({placeholder:'请输入手机号'
}).placeholderColor('#666')//占位符颜色.height(40).borderRadius(20).backgroundColor('#fff').margin({top:20})//已阅读并同意Row(){Checkbox().width(10).margin({top:7})Text(){Span('我已经阅读并同意')Span('《京东隐私政策》').fontColor('#3274f6')Span('《京东用户服务协议》').fontColor('#3274f6')Span('未注册的手机号将自动创建京东账号')}.fontSize(12).fontColor('#666').lineHeight(20)}.alignItems(VerticalAlign.Top).margin({top:20})//登录Button('登录').width('100%').backgroundColor('#bf2838').margin({top:25})//新用户登录等
Row({space:25}){Text('新用户注册').fontSize(14)Text('账户密码登录').fontSize(14)Text('无法登录').fontSize(14)
}.margin({top:15}).foregroundColor('#666')//底部：其他登录方式Blank()Column(){Text('其他登录方式').fontColor('#666').height(22).fontSize(14).margin({bottom:28})Row(){Image($r('app.media.jd_huawei')).width(34)Image($r('app.media.jd_wechat')).width(34).fillColor('#56a44a')Image($r('app.media.jd_weibo')).width(34).fillColor('#c8493b')Image($r('app.media.jd_QQ')).width(34).fillColor('#4ba0e8')}.width('100%').margin({bottom:30}).justifyContent(FlexAlign.SpaceAround)}.width('100%')
}.padding(20).width('100%').height('100%').backgroundImage($r('app.media.jd_login_bg')).backgroundImageSize(ImageSize.Cover)}
}