最外层垂直布局 Column

• 顶部：居中加粗大标题「个人信息中心」
• 中间水平布局 Row
  • 左侧：80×80 灰色圆形头像
  • 右侧垂直文字区：两行靠左文字（姓名、院系） 整体是一个极简的个人资料展示卡片页面。
  • 卡片全局外观
    • 宽度占屏幕 90%、浅灰底色、12px 大圆角；
    • 内边距 15px，顶部外边距 152px，左右自动居中；
  • 标题样式 22 号粗体文字、通栏居中，底部 20px 间距隔开头像区；
  • 头像信息区 左 80px 灰色圆形头像，右侧两行 16 号文字左对齐，头像文字间隔 15px；
  • 底部按钮区 两个 120×40 圆角按钮，蓝绿区分，按钮间距 15px，整行居中摆放；

  • 4. 功能效果

    页面最终呈现一张居中下沉的浅灰色个人信息卡片，从上到下依次是标题、头像姓名信息、两个操作按钮，布局整洁分层清晰，满足个人资料展示页面基础需求。

  • 、页面基础结构

    整体使用垂直布局Column承载全部内容，页面整体预留 10px 外边距，分为标题、轮播图两大模块。

    二、顶部标题

    文字 “欢迎来到河北软件职业技术学院”，字号 30、字体加粗，放在轮播组件上方，作为页面主标题。

    三、Swiper 轮播核心组件

  • 轮播子项 内部放置 5 个全屏宽、高 180 的文本色块，分别设置红、粉、黑、绿、蓝五种背景色，充当轮播展示内容。
  • 基础尺寸 轮播容器铺满屏幕宽度，高度固定 180，和内部色块尺寸匹配。
  • 轮播功能配置
  • indicator(true)：开启底部小圆点指示器，标识当前是第几页；
  • autoPlay(true)：开启自动轮播；
  • interval(3000)：每 3000 毫秒（3 秒）自动切换一页；
  • loop(true)：开启循环滚动，滑到最后一页会自动切回第一页。

  • 页面基础

    标记为独立页面，整体采用垂直布局承载所有内容，分为标题、头像信息栏两大块。

    二、顶部标题模块

    文字 “个人信息中心”，字号 22、加粗，整行居中铺满页面宽度，标题底部预留 20 像素空白，和下方内容分隔开。

    三、头像 + 个人信息横向栏

  • 外层 Row 横向布局，左右内容间距 15，内部左对齐排布；
  • 左侧圆形头像：用 Circle 圆形组件实现，宽高 80，灰色填充，替代图片做简易头像；
  • 右侧垂直文字区：嵌套 Column，两行文字上下间距 8，分别展示姓名、所属院系，字号 16。

  • 四、核心知识点

  • 多层嵌套布局：外层垂直、中间横向、右侧再嵌套垂直布局，实现左右分栏卡片样式；
  • Circle 圆形组件绘制纯色头像，无需图片资源；
  • 通过间距、外边距区分页面模块，控制文字对齐方式优化排版。

  • 一、底部双按钮横向布局

  • 外层Row实现水平排列，两个按钮间距 15px，整行铺满宽度、内容整体居中。
  • 两个按钮统一尺寸：宽 120、高 40、圆角 8、白色文字；配色区分功能：
    • 「编辑资料」：浅蓝色背景；
    • 「查看详情」：绿色背景。

  • 二、外层卡片整体美化样式（包裹标题、头像、按钮全部内容）

  • 卡片宽度仅占屏幕 90%，左右自动留白实现页面水平居中；
  • 卡片内边距 15，内部所有内容和卡片边缘留出空隙；
  • 浅灰色底色、整体圆角 12，做成卡片式容器；
  • 卡片顶部外边距 152，让卡片整体向下偏移，不和屏幕顶部贴边。

  • 三、整体作用

    承接上一段头像信息代码，补充页面底部操作按钮，同时给整块个人信息模块添加卡片外观，区分页面背景与内容区域，完成完整个人信息卡片页面