代码：这里的prompt.showToast是弹出提示，@Extend(TextInput) 的功能是对TextInput做了公用的样式。isShowProgress是用来控制isShowProgress，出来一个等待效果
`

import prompt from ‘@ohos.promptAction’;
import router from ‘@ohos.router’;
import CommonConstants from ‘…/common/constants/CommonConstants’;
/**

• 样式TextInput
  /
  @Extend(TextInput)
  function inputStyle() {
  .placeholderColor($r{(}^{\prime }app.color.placeholde{r}_{c}olo{r}^{\prime })).height($r(‘app.float.login_input_height’))
  .fontSize($r{(}^{\prime }app.float.bi{g}_{t}ex{t}_{s}iz{e}^{\prime })).backgroundColor($r(‘app.color.background’))
  .width(CommonConstants.FULL_PARENT)
  .padding({ left: CommonConstants.INPUT_PADDING_LEFT })
  .margin({ top: $r(‘app.float.input_margin_top’) })
  }
  /*
• 样式
  */
  @Extend(Line)
  function lineStyle() {
  .width(CommonConstants.FULL_PARENT)
  .height($r{(}^{\prime }app.float.lin{e}_{h}eigh{t}^{\prime })).backgroundColor($r(‘app.color.line_color’))
  }

@Extend(Text)
function blueTextStyle() {
.fontColor($r{(}^{\prime }app.color.logi{n}_{b}lu{e}_{t}ex{t}_{c}olo{r}^{\prime })).fontSize($r(‘app.float.small_text_size’))
.fontWeight(FontWeight.Medium)
}

/**

• 登陆界面
  */
  @Entry
  @Component
  struct LoginPage {
  @State account: string = ‘’;
  @State password: string = ‘’;
  @State isShowProgress: boolean = false;
  private timeOutId: number = -1;

@Builder
imageButton(src: Resource) {
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image(src)
}
.height($r{(}^{\prime }app.float.othe{r}_{l}ogi{n}_{i}mag{e}_{s}iz{e}^{\prime })).width($r(‘app.float.other_login_image_size’))
.backgroundColor($r(‘app.color.background’))
}

login(): void {
if (this.account === ‘’ || this.password === ‘’) {
prompt.showToast({
message: ‘输入帐号密码不能为空’
})
} else {
this.isShowProgress = true;
if (this.timeOutId === -1) {
this.timeOutId = setTimeout(() => {
this.isShowProgress = false;
this.timeOutId = -1;
router.pushUrl({ url: ‘pages/MainPage’ });
}, CommonConstants.LOGIN_DELAY_TIME);
}
}
}

aboutToDisappear() {
clearTimeout(this.timeOutId);
this.timeOutId = -1;
}

build() {
Column() {
Image($r{(}^{\prime }app.media.im{g}^{\prime })).width($r(‘app.float.logo_image_size’))
.height($r(‘app.float.logo_image_size’))
.margin({ top: $r(‘app.float.logo_margin_top’), bottom: KaTeX parse error: Expected 'EOF', got '}' at position 35: …argin_bottom') }̲) Text(r(‘app.string.login_page’))
.fontSize($r{(}^{\prime }app.float.pag{e}_{t}itl{e}_{t}ex{t}_{s}iz{e}^{\prime })).fontWeight(FontWeight.Medium).fontColor($r(‘app.color.title_text_color’))
Text($r{(}^{\prime }app.string.logi{n}_{m}or{e}^{\prime })).fontSize($r(‘app.float.normal_text_size’))
.fontColor($r(‘app.color.login_more_text_color’))
.margin({ bottom: $r(‘app.float.login_more_margin_bottom’), top: $r(‘app.float.login_more_margin_top’) })

  TextInput({ placeholder: $r('app.string.account') }).maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH).type(InputType.Number).inputStyle().onChange((value: string) => {this.account = value;})Line().lineStyle()TextInput({ placeholder: $r('app.string.password') }).maxLength(CommonConstants.INPUT_PASSWORD_LENGTH).type(InputType.Password).inputStyle().onChange((value: string) => {this.password = value;})Line().lineStyle()Row() {Text($r('app.string.message_login')).blueTextStyle()Text($r('app.string.forgot_password')).blueTextStyle()}.justifyContent(FlexAlign.SpaceBetween).width(CommonConstants.FULL_PARENT).margin({ top: $r('app.float.forgot_margin_top') })Button($r('app.string.login'), { type: ButtonType.Capsule }).width(CommonConstants.BUTTON_WIDTH).height($r('app.float.login_button_height')).fontSize($r('app.float.normal_text_size')).fontWeight(FontWeight.Medium).backgroundColor($r('app.color.login_button_color')).margin({ top: $r('app.float.login_button_margin_top'), bottom: $r('app.float.login_button_margin_bottom') }).onClick(() => {this.login();})Text($r('app.string.register_account')).fontColor($r('app.color.login_blue_text_color')).fontSize($r('app.float.normal_text_size')).fontWeight(FontWeight.Medium)if (this.isShowProgress) {LoadingProgress().color($r('app.color.loading_color')).width($r('app.float.login_progress_size')).height($r('app.float.login_progress_size')).margin({ top: $r('app.float.login_progress_margin_top') })}Blank()Text($r('app.string.other_login_method')).fontColor($r('app.color.other_login_text_color')).fontSize($r('app.float.little_text_size')).fontWeight(FontWeight.Medium).margin({ top: $r('app.float.other_login_margin_top'), bottom: $r('app.float.other_login_margin_bottom') })Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {this.imageButton($r('app.media.login_method1'))this.imageButton($r('app.media.login_method2'))this.imageButton($r('app.media.login_method3'))}
}
.backgroundColor($r('app.color.background'))
.height(CommonConstants.FULL_PARENT)
.width(CommonConstants.FULL_PARENT)
.padding({left: $r('app.float.page_padding_hor'),right: $r('app.float.page_padding_hor'),bottom: $r('app.float.login_page_padding_bottom')
})

}
}`