@Entry
@Component
struct TextInputDemo {
build() {
Column({ space: 30 }) {
Text('用户登录')
.fontSize(28)
.fontWeight(FontWeight.Bold)

TextInput({ placeholder: "请输入学号/手机号码" })
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

TextInput({ placeholder: "请输入密码" })
.type(InputType.Password)
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

Row({ space: 20 }) {
Button('登录')
.height(50)
.width(100)
.fontSize(25)

Button('注册')
.height(50)
.width(100)
.fontSize(25)
}
    }
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}

效果图

二、信息操作界面

@Entry
@Component
struct ButtonDemo1{
build() {
Column({space:30}){
//常见的，用于登录、提交的按钮
Button("确认提交")
.width(300)
.height(50)
.backgroundColor(0x007DFF)
.fontSize(20)
.borderRadius(8)
//灰色按钮，用于取消/返回使用
Row({space:10}){
Button("取消操作")
.width(150)
.height(50)
.backgroundColor(0x999999)
.fontSize(20)
.borderRadius(8)

Button("删除数据")
.width(150)
.height(50)
.backgroundColor(Color.Red)
.fontSize(20)
.borderRadius(8)
}
    }
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}

三、个人信息

@Entry
@Component
struct TextInputDemo {
build() {
Column({ space: 30 }) {
Text('完善个人信息')
.fontSize(28)
.fontWeight(FontWeight.Bold)

TextInput({ placeholder: "姓名" })
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

TextInput({ placeholder: "班级" })
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

TextInput({ placeholder: "联系方式" })
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)
/*
      Row({ space: 20 }) {
        Button('确定')
          .height(50)
          .width(100)
          .fontSize(25)

        Button('注册')
          .height(50)
          .width(100)
          .fontSize(25)

      }
      */
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}

四、注册界面

@Entry
@Component
struct TextInputDemo {
build() {
Column({ space: 30 }) {
Text('用户注册')
.fontSize(28)
.fontWeight(FontWeight.Bold)

TextInput({ placeholder: "请输入学号/手机号码" })
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

TextInput({ placeholder: "请输入密码" })
.type(InputType.Password)
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

TextInput({ placeholder: "请再次输入密码" })
.type(InputType.Password)
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)

}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Center)
}
  }

五、：轮播展示

import { radio } from '@kit.TelephonyKit'

@Entry
@Component
struct TextInputDemo {
build() {
Column({ space: 30 }) {
Text('河北软件职业技术学院')
.fontSize(28)
.fontWeight(FontWeight.Bold)

// 本地图片轮播 1.jpg ~ 5.jpg
Swiper() {
Image($r("app.media.1")).width('100%').height('200%').objectFit(ImageFit.Cover)
Image($r("app.media.2")).width('100%').height('200%').objectFit(ImageFit.Cover)
Image($r("app.media.3")).width('100%').height('200%').objectFit(ImageFit.Cover)
Image($r("app.media.4")).width('100%').height('200%').objectFit(ImageFit.Cover)
Image($r("app.media.5")).width('100%').height('200%').objectFit(ImageFit.Cover)
}
.width('100%')
.height(180)
.autoPlay(true)
.loop(true)
.interval(3000)
.borderRadius(25)
.shadow({radius:100,color:0xcccccc,offsetX:2,offsetY:2})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Center)
}
}

六、个人中心界面

@Entry
@Component
struct UserCardDemo{
build() {
Column({space:20}){
Text("欢迎来到我的个人中心")
.fontSize(30)
.fontWeight(FontWeight.Bolder)

Row({space:20}){
Image($r('app.media.1'))
.width('50%')
.borderRadius(100)

Text('QY-T')
.width('30%')
.fontSize(30)
}
.height(100)
.width('100%')
.padding({left:20})

}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}

七

@Entry
@Component
struct Index {
  private videoCtrl: VideoController = new VideoController()

  build() {
    Column({ space: 40 }) {
      Text("本地视频播放器")
        .fontSize(24)
        .width("100%")
        .textAlign(TextAlign.Center)

      Video({
        src: $rawfile("sd.mp4"),
        controller: this.videoCtrl,
        previewUri: $r("app.media.background")
      })
        .width("100%")
        .height(220)
        .controls(false)
        .autoPlay(false)
        .loop(true)
        .muted(false)
        .objectFit(ImageFit.Contain)

      Row({ space: 30 }) {
        Button("播放")
          .onClick(() => {
            this.videoCtrl.start()
          })

        Button("暂停")
          .onClick(() => {
            this.videoCtrl.pause()
          })
      }
    }
    .width("100%")
    .height("100%")
    .padding(15)
    .justifyContent(FlexAlign.Center)
  }
}