鸿蒙HarmonyOS京东登陆页面DevEcoStudio
1. 结果图https://i-blog.csdnimg.cn/direct/cafea71e9eb9493999d954b07097dee7.png
2. 实当代码
ArkTS语言
ArkUI框架
@Entry
@Component
struct Index {
build() {
Column(){
//顶部
Row() {
Image($r('app.media.xmark'))
.width(20)
.fillColor('#666')
Text('帮助')
.height(16)
.fontColor('#666')
}
.justifyContent(FlexAlign.SpaceBetween)
.height(20)
.width('100%')
//商标
Row(){
Image($r('app.media.jingdong'))
.width(200)
}
.width(250)
.height(250)
Row(){
Text('国家/地址').fontColor('#666').layoutWeight(1)
Text('中国(+86)').fontColor('#666').margin({right: 8})
Image($r('app.media.chevron_right'))
.width(15)
.fillColor('#666')
}
.justifyContent(FlexAlign.SpaceBetween)
.padding({left: 15, right: 10})
.width('100%')
.height(40)
.borderRadius(20)
.backgroundColor(Color.White)
TextInput({
placeholder: '请输入手机号'
})
.height(40)
.placeholderColor('#666')
.width('100%')
.borderRadius(20)
.backgroundColor(Color.White)
.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)
}
.margin({top: 20 ,bottom: 25})
.alignItems(VerticalAlign.Top)
//登录按钮
Button('登录')
.width('100%')
.backgroundColor('#bf2838')
Row({space: 25}){
Text('新用户注册').fontColor('#666').fontSize(14)
Text('账户密码登录').fontColor('#666').fontSize(14)
Text('无法登录').fontColor('#666').fontSize(14)
}
.margin({top: 15})
//填充组件：填充空白区域
Blank()
//其他登录方式
Column(){
Text('其他登陆方式')
.fontSize(14)
Row(){
Image($r('app.media.huawei')).height(34).backgroundColor(Color.Transparent)
Image($r('app.media.weixin')).height(34)
Image($r('app.media.weibo')).height(34)
Image($r('app.media.QQ')).height(34)
}
.width('100%')
.height(34)
.justifyContent(FlexAlign.SpaceAround)
.margin({bottom: 50,top: 28})
}
.width('100%')
}
.width('100%')
.height('100%')
.padding(20)
.backgroundImage($r('app.media.beijing'))
.backgroundImageSize(ImageSize.Cover)
}
}
3. 附录图片
京东商标和背景图片都可轻松从网上搜到，微信，QQ，微博和华为这四个商标利用的是SVG图片，这类图片具有伸缩不改变图像清晰度，且可以修改图片颜色等优质特点。
这里保举一个能够提供丰富SVG图片的网站，iconfont-阿里巴巴矢量图标库当然还有许多其他不错的网站，仅供参考。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]