鸿蒙HarmonyOS京东登陆页面DevEcoStudio

 1. 效果图

2. 实现代码

      ArkTS语言

      ArkUI框架

@Entry
@Component
struct Index {
  build() {
    Column(){
      //顶部
      Row() {
        Image($r('app.media.xmark'))
          .width(20)
          .fillColor('#666')

        Text('帮助')
          .height(16)
          .fontColor('#666')
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(20)
      .width('100%')
      //商标
      Row(){
        Image($r('app.media.jingdong'))
          .width(200)
      }
      .width(250)
      .height(250)

      Row(){
          Text('国家/地址').fontColor('#666').layoutWeight(1)
          Text('中国(+86)').fontColor('#666').margin({right: 8})
          Image($r('app.media.chevron_right'))
            .width(15)
            .fillColor('#666')
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({left: 15, right: 10})
        .width('100%')
        .height(40)
        .borderRadius(20)
        .backgroundColor(Color.White)

      TextInput({
        placeholder: '请输入手机号'
      })
        .height(40)
        .placeholderColor('#666')
        .width('100%')
        .borderRadius(20)
        .backgroundColor(Color.White)
        .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)
      }
      .margin({top: 20 ,bottom: 25})
      .alignItems(VerticalAlign.Top)

      //登录按钮
      Button('登录')
        .width('100%')
        .backgroundColor('#bf2838')

      Row({space: 25}){
        Text('新用户注册').fontColor('#666').fontSize(14)
        Text('账户密码登录').fontColor('#666').fontSize(14)
        Text('无法登录').fontColor('#666').fontSize(14)
      }
      .margin({top: 15})

      //填充组件：填充空白区域
      Blank()

      //其他登录方式
      Column(){
        Text('其他登陆方式')
          .fontSize(14)


        Row(){
          Image($r('app.media.huawei')).height(34).backgroundColor(Color.Transparent)
          Image($r('app.media.weixin')).height(34)
          Image($r('app.media.weibo')).height(34)
          Image($r('app.media.QQ')).height(34)
        }
        .width('100%')
        .height(34)
        .justifyContent(FlexAlign.SpaceAround)
        .margin({bottom: 50,top: 28})

      }
      .width('100%')

    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundImage($r('app.media.beijing'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

 3. 附录图片

京东商标和背景图片都可轻松从网上搜到，微信，QQ，微博和华为这四个商标使用的是SVG图片，这类图片具有伸缩不改变图像清晰度，且可以修改图片颜色等优质特点。

这里推荐一个能够提供丰富SVG图片的网站，iconfont-阿里巴巴矢量图标库当然还有许多其他不错的网站，仅供参考。