HarmonyOS鸿蒙Next中兔鲜儿登录界面原创源代码公开【ArkTs写的】

HarmonyOS鸿蒙Next中兔鲜儿登录界面原创源代码公开【ArkTs写的】 制作了UI设计，一些交互的东西还没有设计，这个ArkTs还是昨天才学不久所以还在交互的东西还在研究学习，发出这个源代码是为了与大家共同探讨ArkTs做UI还有哪些更简单的方法制作【自认为我写这个UI应该不是这个语言的最优解】，愿与大家共勉！！！

@Component
export struct Login{
  build(){
    Column(){
      Row(){
        Image($r('app.media.logo')).width('100%').height('120').backgroundImageSize(ImageSize.Auto)
      }.width('100%').height('30%')
      Column(){
        Row(){
          Text('欢迎~').fontSize(32).fontWeight(FontWeight.Medium).fontColor('#666').width('100%').textAlign(TextAlign.Center)
        }.width('100%').height('15%').borderRadius(10).shadow({radius: 20, color:'#f0f0f0', offsetX: 8, offsetY: 8})
        Flex({direction: FlexDirection.Column,justifyContent: FlexAlign.SpaceAround,alignItems: ItemAlign.Center}){
          TextInput({placeholder:'手机号/邮箱'}).type(InputType.Email).width('95%').height(60).borderRadius(10)
          TextInput({placeholder:'密码'}).type(InputType.Password).width('95%').height(60).borderRadius(10)
          // 验证码
          Row(){
            TextInput({placeholder:'验证码'}).type(InputType.Email).width('50%').height('100%')
            Text('AdcB').fontSize(24).width('50%').textAlign(TextAlign.Center).height('100%')
          }.width('95%').height(60).borderRadius(10)
          Button(){
            Text('登录').fontSize('25').fontWeight(FontWeight.Medium).width('100%').textAlign(TextAlign.Center).height('100%')
              .lineHeight(30)
          }.width('95%').height(60)
          .backgroundColor('#ff5b8cdd')
        }.width('100%').height('85%')
      }.width('95%').height('50%')
      .borderRadius(30)
      .shadow({
        radius: 10,
        color: '#f0f0f0',
        offsetX: 8,
        offsetY: 16
      })
      .padding({top:10})
      Row(){
        Flex({direction: FlexDirection.Column,justifyContent: FlexAlign.SpaceAround,alignItems: ItemAlign.Center}){
          Row(){
            Divider().width('25%')
            Text('第三方登录')
              .fontSize(16)
              .margin(10)
            Divider().width('25%')
          }.width('100%').justifyContent(FlexAlign.Center)
          Row(){
            Image($r('app.media.weixin')).width(60).height(60)
            Image($r('app.media.QQ')).width(60).height(60)
            Image($r('app.media.zhifubao')).width(60).height(60)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.width('100%').height('100%')

      }.width('100%').height('20%')
    }.width('100%').height('100%')
  }
}