效果

代码实现

@Entry
@Component
struct Index {build() {Column() {Row() {Image($r('app.media.jd_cancel')).width(20)Text('帮助').fontSize(16).fontColor('#666')}.width('100%').justifyContent(FlexAlign.SpaceBetween)Image($r('app.media.jd_logo')).height(250).width(250)// .backgroundColor(Color.Pink)// 国家/地址  -- 是点按区域，自己画出来/*TextInput({ placeholder: '国家/地址' }).height(40).backgroundColor('#fff')*/Row() {Text("国家/地址").fontSize(16).layoutWeight(1).fontColor('#666')Text('中国(+86)').fontSize(16).fontColor('#666')Image($r('app.media.jd_right')).width(20).fillColor('#666')}.padding({ left: 15, right: 10 }).width('100%').height(40).backgroundColor('#fff').borderRadius(20) // 胶囊按钮是高的一半TextInput({ placeholder: '请输入手机号' }).height(40).backgroundColor('#fff').margin({ top: 20, bottom: 20 }).placeholderColor('#666')Row(){Checkbox().width(10).margin({ top: 7})Text(){Span('我已经阅读并同意')Span('《京东隐私政策》').fontColor('#3274f6')Span('《京东用户服务协议》').fontColor('#3274f6')Span('未注册的手机号将自动创建京东账号')}.fontSize(12).fontColor('#666').lineHeight(20)}.width('100%').alignItems(VerticalAlign.Top)Button('登录').backgroundColor('#ffa20c0c').width('100%').height(40).margin({ top: 25, bottom: 15 })Row() {Text('新用户注册').fontSize(14)Text('账号密码登入').fontSize(14).margin({ left: 25, right: 25 })Text('无法登录').fontSize(14)}Blank()Text('其它登录方式').fontSize(12).lineHeight(22).margin({ bottom: 28 })Row() {Image($r('app.media.jd_huawei')).width(34)Image($r('app.media.jd_wechat')).width(34).fillColor('#ff49b525')Image($r('app.media.jd_weibo')).width(34).fillColor('#ffc1204c')Image($r('app.media.jd_QQ')).fillColor('#ff2892c0').width(34)}.width('100%').justifyContent(FlexAlign.SpaceAround)}.padding({top: 20,bottom: 50,left: 20,right: 20}).width('100%').height('100%')// .backgroundColor('#ffe0cfcf').backgroundImage($r('app.media.jd_login_bg')).backgroundImageSize(ImageSize.Cover).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])}
}