国家企业信用公示系统官方网站机关单位建设网站 说明

实验要求：

        制作一个类似于deepseek的登陆界面，要求有输入框（含输入提示）、按钮、背景等部分，应用好内边距、外边距等 相关知识。实验报告格式不限，背景图及logo不限。

源代码：

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Stack() {// 背景图Image($r('app.media.bg')).width('100%').height('100%').objectFit(ImageFit.Cover)// 设置图片填充方式为覆盖整个区域Column() {Column() {// LogoImage($r('app.media.logo')).width(120).height(120).margin({ top: 150 ,bottom:50})// 用户名输入框TextInput({placeholder: '请输入用户名',}).width('80%').height(50).backgroundColor(Color.White).padding(10).margin({ bottom: 20 }).borderRadius(25)// 密码输入框TextInput({placeholder: '请输入密码',}).width('80%').height(50).backgroundColor(Color.White).padding(10).margin({ bottom: 40 }).borderRadius(25).type(InputType.Password)// 设置输入框类型为密码输入// 登录按钮Button('立即登录', { type: ButtonType.Capsule })// 创建一个胶囊形状的按钮.width('60%').height(50).backgroundColor('#007DFF').fontColor(Color.White).fontSize(18)// 辅助链接Row() {Text('忘记密码').fontSize(14).fontColor('#666').margin({ right: 30 })Text('注册账号').fontSize(14).fontColor('#007DFF')}.margin({ top: 20 })}.width('100%').alignItems(HorizontalAlign.Center)}.width('100%').height('100%')//.backgroundColor('rgba(255,255,255,0.9)')}.width('100%').height('100%')}
}

 运行结果：

附件：

app.media.bg

app.media.logo