ArkUI-登录界面（不完整）

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
    //顶部区域
      Row(){
        Image($r('app.media.ic_public_cancel'))
          .width(20)
          .fillColor(Color.White)

        Text('帮助')
          .fontSize(16)
          .fontColor(Color.White)
      }.justifyContent(FlexAlign.SpaceBetween)
      .width('100%')

      //logo图片
      Image($r('app.media.APP'))
        .width(250)
        .height(250)

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

      //电话号码
     TextInput({placeholder:'请输入电话号码'})
       .backgroundColor(Color.White)
       .width('100%')
       .height(40)
       .borderRadius(20)
       .margin({
         bottom:20
       })

      //协议
      Row(){
        Checkbox()
          .unselectedColor(Color.White)
          .width(10)
          .margin({
            top:0
          })

         Text(){
          Span('我已阅读并同意')
          Span('《隐私政策》')
            .fontColor(Color.Red)
          Span('《用户服务协议》')
            .fontColor(Color.Red)
          Span('未注册的电话号码将会创建账号')
         }
         .fontSize(12)
         .fontWeight(FontWeight.Bold)
         .height(20)

      }

      //登录按钮
      Button('登录')
        .margin({
          top:35
        })
        .height(40)
        .width('100%')
        .backgroundColor(Color.Red)

      //其他
      Row(){
        Text('新用户注册')
          .fontColor(Color.Black)
          .fontSize(14)

        Text('账户密码登录')
          .fontColor(Color.Black)
          .fontSize(14)

        Text('无法登陆')
          .fontColor(Color.Black)
          .fontSize(14)
      }
      .margin({
        top:10
      })
      .width('95%')
      .justifyContent(FlexAlign.SpaceBetween)

     //底部
      Blank()
      Column(){

        Text('其他登录方式')
          .fontSize(14)
          .height(22)
          .fontWeight(FontWeight.Bold)
        Row(){
          Image($r('app.media.HUAWEI_logo'))
            .width(40)

          Image($r('app.media.weibo_logo'))
            .width(34)
            .fillColor('#ffff1700')

          Image($r('app.media.WeChat_logo'))
            .width(34)
            .fillColor('#ff23ff00')

          Image($r('app.media.QQ_logo'))
            .width(34)
            .fillColor('#ff0099fc')
        }

        .margin({
          top:28,
          bottom:20
        })
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.background1'))
    .backgroundImageSize(ImageSize.Cover)
  }
}