【HarmonyOS 鸿蒙黑马程序员学习笔记 38.1】

京东登录页面_实战

布局_内容
美化

布局_内容

这是第二天又开始写的,所以部分美化装饰过的组件

@Entry
@Component
struct Index {
   
   
  @State
  jd1: string =
    'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cDovL2dkLWhiaW1nLmh1YWJhbi5jb20vNTlkYjc5ZjkzNGQzZDA5OGZhYTkwMjUzOWU1NzZkN2Q2MTIxNmNkZDI2MjczLXc5dVZOSl9mdzY1OA==&sign=yx:xKqM0AS3Ky2zlwx9bNBHXNhkZt4=&tv=0_0'
  bj1: string =
    'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdWl0YW5nLmNvbS91cGxvYWRzL2l0ZW0vMjAyMDAyLzIxLzIwMjAwMjIxMTMxNjUwXzMzbVl6LnRodW1iLjEwMDBfMC5qcGVn&sign=yx:SPWS96fm62NlxS9Nub3UjTdssXo=&tv=0_0'
  hw1: string = ''
  wx1: string = ''
  wb1: string = ''
  qq1: string = ''

  build() {
   
   
    Column() {
   
   
      //  顶上两个按钮
      Row() {
   
   
        //  Image() 从性能和节约资源来说,应该可以用text来代替
        Text('X')
        Text('帮助')
      }
      .width('100%')  //  撑开横向布局
      .justifyContent(FlexAlign.SpaceBetween) //  主轴对齐  两头分开

      //  logo大图
      Image(this.jd1)
        .width(200)
      TextInput({
   
    placeholder: '国家/地址' })
        .type(InputType.Number) //  数字输入
      TextInput({
   
    placeholder: '请输入手机号' })
        .type(InputType.PhoneNumber) //  电话号码输入
      //  条款
      Row() {
   
   
        Text(' ')
        Text('我已阅读并同意')
        Text('<京东隐私政策>')
        Text('<京东用户服务协议>')
        Text('来注册的手机号并自