效果

代碼實現

@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])}
}