40 lines
3.0 KiB
Plaintext
40 lines
3.0 KiB
Plaintext
|
---
|
|||
|
|
description: zhxy-jsd 新增/改版移动端表单页结构与样式基准（对齐 xkkcForm / wjManageEdit）
|
|||
|
|
globs:
|
|||
|
|
- zhxy-jsd/src/pages/**/*.vue
|
|||
|
|
- src/pages/**/*.vue
|
|||
|
|
alwaysApply: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 移动端表单页 UI 规范（Uni-app）
|
|||
|
|
|
|||
|
|
新增或改版「长表单」「编辑页」「资料填写页」时，优先采用与本规范一致的排版与样式；参考实现：**`pages/view/routine/xkxqk/xkkc/xkkcForm.vue`**、**`pages/view/routine/wj/wjManageEdit.vue`**。
|
|||
|
|
|
|||
|
|
## 页面结构
|
|||
|
|
|
|||
|
|
- 根容器：**灰底 `#f1f5f9`**（或同系），横向内边距约 **`24rpx`**；内容区内层可用 **`page` / `form`** 语义类名分包。
|
|||
|
|
- 单字段一块：**`.field`** 白卡片，**`margin-bottom: 20rpx`**（或接近值），圆角 **`~20rpx`**，浅色描边 **`#e2e8f0`**，轻投影（与上述参考文件一致）。
|
|||
|
|
- 标题：**`.lab`**，`font-weight 500`、`#334155`；必填在 **`lab` 上使用 class `required`**，用 **`::before` 红色 `*`**，勿在模板里零散拼 `*` 标签。
|
|||
|
|
- **输入框**：**`.inp`**；**多行**：**`.area`**。边框 **`#cbd5e1`**、圆角 **`~14rpx`**、底色 **`#fafafa`**；聚焦可把底色改为白、边框高亮 **`#2563eb`**。
|
|||
|
|
- **选择器（picker）展示**：用 **`picker-val`** 包住展示文案，占位/未选可加 **`picker-val--ph`**（浅色字 **`#94a3b8`**）；带箭头的一行可加 **`picker-val--row`** 做两端对齐。
|
|||
|
|
- **开关与其它控件同一行**：**`.field`** 上再加 **`.row2`**：`flex` 两端对齐；该行内 **`.lab` 去掉多余 `margin-bottom`**。
|
|||
|
|
- **说明性小字**：**`.field-tip`**（ **`#64748b`**、`~24rpx`**），跟在标题后或与业务说明搭配。
|
|||
|
|
|
|||
|
|
## 底部主操作
|
|||
|
|
|
|||
|
|
- 使用 **`BasicLayout`** 时，主按钮放在 **`<template #bottom>`**，容器类名对齐参考：**`.footer-bar`**；主按钮：**`.submit-btn`**（通栏、高度 **`~96rpx`**、 **`#2563eb`**、`border-radius ~16rpx`）。
|
|||
|
|
- 滚动区内底部留白：在表单末尾 **`form-tail`**（固定高度占位 + **`safe-area-inset-bottom`**），避免最后被底栏遮住。
|
|||
|
|
|
|||
|
|
## 次要操作按钮
|
|||
|
|
|
|||
|
|
- 区块内辅助操作（如「添加一项」「上传」）：**`.btn-dashed`**（浅蓝浅底 + 蓝色虚线边框），与同参考文件保持一致；少用大面积原生默认按钮占位主操作。
|
|||
|
|
|
|||
|
|
## 组件库
|
|||
|
|
|
|||
|
|
- **主 CTAs** 以小节规范为准时用 **原生 `<button type="primary">`** + 上述样式类；不要为了「省事」整块表单单用 **`u-button`** 顶固定底栏——若项目其它页已统一 uView，可局部保留，但排版（灰底、`field`、`footer-bar`）仍应与参考一致。
|
|||
|
|
- **`BasicTeacherSelect`、分页内嵌控件**等：外层仍包在 **`field`** 内，并用 **`:deep()`** 将触发区域高度/边框与 **`picker-val`/`.inp`** 对齐。
|
|||
|
|
|
|||
|
|
## 禁止
|
|||
|
|
|
|||
|
|
- 不要在同一项目里新开一套互不相同的「卡片圆角 / 表单灰底 / 主色蓝」且无理由偏离上述参考——除非产品与上述页面明确不同体系（需产品设计说明）。
|