企业官网建设流程全解析

1. 宽/高 （width /height）

页面常用width('100%')铺满屏幕；按钮、输入框常规高50；头像多用正方形100×100/120×120。

实例：

.width(120).height(120) .width('90%').height(50) .width('100%').height('100%')

2. 颜色

backgroundColor背景色、fontColor文字色

• 系统色：Color.Red、Color.Transparent透明
• 十六进制色：0x999999、0xf53f3f
• 实例：

  TextInput({ placeholder: "用户名:" }) .width('90%') .height(50) .backgroundColor(0xf773) .fontColor(Color.Black)

3. 间距

• padding：组件内部留白
• margin：组件与外部间距 Column 的space可统一子元素间距
• 实例：

  .padding(40)

4. 圆角 borderRadius

按钮圆角8~12，卡片12~16；圆形头像圆角设为宽高一半；你代码多用大圆角。

实例：

.borderRadius(60)

5. 边框 border

.border({width:1,color:色值})设置边框粗细与颜色。

实例：

.border({width:1,color:0xcccccc})

6. 阴影 shadow

给卡片、按钮增加立体凹凸层次感。

实例：

.shadow({radius:50,color:Color.Yellow})

7. 透明度 opacity

取值0~1，0 完全透明，1 完全不透明。

实例：

.opacity(0.9)

8. 图片适配 objectFit（Image 专用）

• Cover：铺满裁剪
• Contain：完整显示留边
• 实例：

  .objectFit(ImageFit.Cover)

9. 对齐

文字居中textAlign；布局整体居中用justifyContent、alignItems，你绝大多数页面都用它居中排版。

实现整体垂直 + 水平居中排版实例：

.justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)

总结实例：

@Entry @Component struct zongjie { build() { Column({ space: 30 }) { Image($r('app.media.01')) .width(120) .height(120) .borderRadius(60) .objectFit(ImageFit.Cover) .shadow({radius:50,color:Color.Yellow}) Text("账号登录") .fontSize(26) .fontColor(0x25a9a9) .fontWeight(FontWeight.Bold) TextInput({ placeholder: "用户名:" }) .width('90%') .height(50) .backgroundColor(0xf773) .fontColor(Color.Black) TextInput({ placeholder: "密码:" }) .width('90%') .height(50) .type(InputType.Password) .backgroundColor(0xf773) .fontColor(Color.Black) Row({ space: 40 }) { Button("登录") .width(120) .height(50) .backgroundColor(0xf5f566) .fontColor(Color.Black) Button("注册") .width(120) .height(50) .backgroundColor(0xf5f566) .fontColor(Color.Black) } } .padding(40) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .width('100%') .height('100%') .backgroundColor(0xf5f59) } }