鸿蒙HarmonyOS京东登陆页面DevEcoStudio

 1. 结果图

2. 实当代码

      ArkTS语言
      ArkUI框架

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Column(){
6.       //顶部
7.       Row() {
8.         Image($r('app.media.xmark'))
9.           .width(20)
10.           .fillColor('#666')
12.         Text('帮助')
13.           .height(16)
14.           .fontColor('#666')
15.       }
16.       .justifyContent(FlexAlign.SpaceBetween)
17.       .height(20)
18.       .width('100%')
19.       //商标
20.       Row(){
21.         Image($r('app.media.jingdong'))
22.           .width(200)
23.       }
24.       .width(250)
25.       .height(250)
27.       Row(){
28.           Text('国家/地址').fontColor('#666').layoutWeight(1)
29.           Text('中国(+86)').fontColor('#666').margin({right: 8})
30.           Image($r('app.media.chevron_right'))
31.             .width(15)
32.             .fillColor('#666')
33.         }
34.         .justifyContent(FlexAlign.SpaceBetween)
35.         .padding({left: 15, right: 10})
36.         .width('100%')
37.         .height(40)
38.         .borderRadius(20)
39.         .backgroundColor(Color.White)
41.       TextInput({
42.         placeholder: '请输入手机号'
43.       })
44.         .height(40)
45.         .placeholderColor('#666')
46.         .width('100%')
47.         .borderRadius(20)
48.         .backgroundColor(Color.White)
49.         .margin({top: 20})
51.       Row(){
52.         Checkbox().width(10).margin({top: 7})
53.         Text(){
54.           Span('我已经阅读并同意')
55.           Span('《京东隐私协议》').fontColor('#3274f6')
56.           Span('《京东用户服务协议》').fontColor('#3274f6')
57.           Span('未注册的手机号将自动创建手机号')
58.         }
59.         .fontSize(12)
60.         .fontColor('#666')
61.         .lineHeight(20)
62.       }
63.       .margin({top: 20 ,bottom: 25})
64.       .alignItems(VerticalAlign.Top)
66.       //登录按钮
67.       Button('登录')
68.         .width('100%')
69.         .backgroundColor('#bf2838')
71.       Row({space: 25}){
72.         Text('新用户注册').fontColor('#666').fontSize(14)
73.         Text('账户密码登录').fontColor('#666').fontSize(14)
74.         Text('无法登录').fontColor('#666').fontSize(14)
75.       }
76.       .margin({top: 15})
78.       //填充组件：填充空白区域
79.       Blank()
81.       //其他登录方式
82.       Column(){
83.         Text('其他登陆方式')
84.           .fontSize(14)
87.         Row(){
88.           Image($r('app.media.huawei')).height(34).backgroundColor(Color.Transparent)
89.           Image($r('app.media.weixin')).height(34)
90.           Image($r('app.media.weibo')).height(34)
91.           Image($r('app.media.QQ')).height(34)
92.         }
93.         .width('100%')
94.         .height(34)
95.         .justifyContent(FlexAlign.SpaceAround)
96.         .margin({bottom: 50,top: 28})
98.       }
99.       .width('100%')
101.     }
102.     .width('100%')
103.     .height('100%')
104.     .padding(20)
105.     .backgroundImage($r('app.media.beijing'))
106.     .backgroundImageSize(ImageSize.Cover)
107.   }
108. }

复制代码

 3. 附录图片

京东商标和背景图片都可轻松从网上搜到，微信，QQ，微博和华为这四个商标利用的是SVG图片，这类图片具有伸缩不改变图像清晰度，且可以修改图片颜色等优质特点。
这里保举一个能够提供丰富SVG图片的网站，iconfont-阿里巴巴矢量图标库当然还有许多其他不错的网站，仅供参考。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。