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


  }
}