ArkUI开发学习随机——得物卡片,京东登录界面

小丑西瓜6662024-06-25 14:44

案例一：得物卡片

代码：

复制代码

Column(){
        Column(){
          Image($r("app.media.mihoyo")).width(200).height(200)
        Row(){
            Text("今晚玩这个 | 每日游戏打卡").fontWeight(700).fontSize(16).padding(4)
        }.width(200)
        Text("No.12").fontWeight(700).width("100%").margin({left:10,bottom:10})
        Row(){
           Row(){
             Image($r("app.media.naxida")).width(12).margin({left:5})
             Text("原神？启动！").fontColor("#999").fontSize(12)
           }.layoutWeight(1)
           Row(){
            Image($r("app.media.ic_like")).width(12)
             Text("6666").fontColor("#999").fontSize(12).margin({right:5})
           }
        }
        }.backgroundColor(Color.White).width(200).alignItems(HorizontalAlign.Center).borderRadius(10)


      }.width("100%").height("100%").backgroundColor("#ccc").padding(20)

  }

案例二：京东登录界面

代码:

复制代码

  build() {
        Column(){

          Row(){
          Image($r("app.media.jd_cancel")).width(20)
            Text("帮助")
          }.width("100%").justifyContent(FlexAlign.SpaceBetween)
          Image($r("app.media.jd_logo")).width(250)

          Row(){
          Text("国家/地址").fontColor("#666").height(16).layoutWeight(1)
            Text("中国(+86)").fontColor("#666").height(16)
            Image($r("app.media.ic_arrow_right")).fillColor("#666").height(16)
          }.backgroundColor("#fff").width("100%").padding(10).height(40).borderRadius(20)

          Row(){
            Text("请输入手机号").height(16).fontColor("#666")
          }.backgroundColor("#fff").width("100%").padding(10).height(40).borderRadius(20).margin({top:20,bottom:20})
          Row(){
            Checkbox().width(10)
            Text(){
              Span("我已经阅读并同意")
              Span("《京东隐私政策》《京东用户协议》").fontColor("#3274f6")
              Span("未注册的手机号将自动创建京东账号")
            }.width("100%").fontSize(12).fontColor("#666")
          }.width("100%").margin({right:20,bottom:25})

          Button("登录").width("100%").backgroundColor("#bf2838")

          Row(){
            Text("注册新用户").height(14).fontSize(14).margin({right:25,left:25})
            Text("账户密码登录").height(14).fontSize(14).margin({right:25})
            Text("无法登录").height(14).fontSize(14)
          }.width("100%").margin({top:15})


          Text("其他登录方式").margin({top:100}).fontSize(14).height(22).fontColor("#666")
          Row(){
            Image($r("app.media.jd_huawei")).width(34)
            Image($r("app.media.jd_wechat")).width(34).fillColor(Color.Green)
            Image($r("app.media.jd_weibo")).width(34).fillColor("#bf2838")
            Image($r("app.media.jd_QQ")).width(34).fillColor("#4ba0e8")

          }.width("100%").padding(28).justifyContent(FlexAlign.SpaceBetween)


        }.width("100%").height("100%").padding(20).backgroundImage($r("app.media.jd_login_bg"))
  }