鸿蒙 实现“登录”页面

1、使用ArkUI实现“登录”页面。

2、要求用户界面友好，显示Logo。

3、“登录”页面使用Column容器组件布局，由Image、TextInput、Button、Text等基础组件构成。

4、要求用户输入用户名和密码，并进行判断，如果用户名和密码均正确，显示“输入正确！”；否则提示“输入错误，请重新输入！”

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct LoginPage {
  @State password: string = ''
  @State username: string = ''

  build() {

    Column() {
      Image($r("app.media.panada"))
        .width(100) // 设置图片宽度
        .height(100) // 设置图片高度
        .margin({
          bottom: 60 // 设置图片下方的外边距
        })
      Row() {
        Text("用户名")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Row() {
        Image($r("app.media.login")).width(30)

        TextInput({
          placeholder: "请输入用户名"
        }).width(200).onChange((val: string) => {
          this.username = val


        })
      }.margin({
        bottom: 8,
        top: 8
      }).width("100%")

      Divider().strokeWidth(4)

      Row() {
        Text("密码")
          .fontSize(18)
          .fontWeight(FontWeight.Bold).margin({
          bottom: 8,
          top: 8
        })
      }.width("100%")

      Row() {
        Image($r("app.media.pwd")).width(30)

        TextInput({
          placeholder: "请输入密码"
        }).width(200).onChange((val: string) => {
          this.password = val


        }).type(InputType.Password)
      }.width("100%")

      Divider().strokeWidth(4)
      Row() {
        Blank()
        Text("忘记密码？")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Button("登录").width("90%").height(60).backgroundColor(Color.Blue).onClick(() => {

        if (this.username == "admin" && this.password == "123456") {

          promptAction.showToast({
            message:"输入正确！"
          })

        }
        else {
          promptAction.showToast({
            message:"输入错误，请重新输入！"
          })
        }
      })

      Text("第三方登录")
        .fontSize(18).margin({
        bottom: 40,
        top: 60
      })

      Row({ space: 8 }) {
        Image($r("app.media.qq")).width(60)
        Image($r("app.media.wechat")).width(60)

      }

      Text("立即注册")
        .fontSize(18).margin({
        top: 20,
      })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: 20,
      right: 20
    })
  }
}

图片需要自己下载并指明url。