ZartUI Mobile · Signature 签名

v2.2.1 · 表单签名卡片 · 手写签名页(横屏) · 左侧 44px+64px 两列导航栏 · 状态栏列含时间 · 标题栏列:扫码/更多36px图标+标题+返回24px朝下箭头底部对齐 · 右下角按钮 · 16px 字号 · DB60→DB40 渐变

基础用法
未签名状态,44px 标题行左标题 + 右侧无按钮,卡片显示占位文字
标题最多七个字*
点击签名
签名展示
已签名状态,标题行右侧显示"重签"按钮,卡片右上角 G50 关闭图标
标题最多七个字*
签名手写页面 · 横屏(空)
横屏展示,左侧竖排导航栏(状态栏列:电池/信号/WiFi/时间;标题栏列:扫码/更多图标、标题、返回图标底部对齐),右侧画布,右下角按钮
12:16
签名页
请在此签名
签名手写页面 · 横屏(已签名)
横屏展示,左侧竖排导航栏(状态栏列:电池/信号/WiFi/时间;标题栏列:扫码/更多图标、标题、返回图标底部对齐),签名笔触居中,右下角按钮
12:16
签名页
表单签名卡片
卡片宽度382px
卡片高度144px
卡片圆角8px
卡片背景G0 #FFFFFF
卡片描边1px solid G20 #DDE1EB
标题行(44px)
标题行高度44px
标题字号14px / 400
标题颜色G50 #6B7A99
必填标记R60 #F26450,位于标题右侧
重签按钮32px 高,位于标题行右上角,白底,DB60 描边,DB60 文字,14px/400,全圆角 100px
重签按钮位置标题行右侧,与标题两端对齐
签名展示状态
签名笔触颜色G60 #223355
签名笔触粗细2px ~ 3px
关闭 × 图标20px × 图标,G50 #6B7A99,位于卡片右上角(距上 12px,距右 12px)
签名手写页面 · 横屏布局
页面方向横屏(landscape),宽 896px × 高 414px
导航栏位置左侧两列竖条(总宽 108px = 44px 状态栏 + 64px 标题栏),G05 背景 + G10 右侧分割线
状态栏列44px 宽,电池、信号、WiFi 图标竖向排列(16×16px,G60),底部竖排时间(15px/500/G60)
标题栏列64px 宽,顶部扫码+更多图标(36×36px,G60,竖向排列),中间竖排标题,底部返回图标(24×24px朝下箭头,G60,靠下边缘对齐)
标题文字"签名页",20px/500/G60,竖排(writing-mode: vertical-rl),字间距 4px
返回图标24×24px,箭头朝下,G60 #223355,位于标题栏列底部,靠下边缘对齐
扫码图标36×36px,G60 #223355,位于标题栏列顶部
更多图标36×36px,G60 #223355,位于标题栏列顶部(扫码下方)
时间15px/500/G60,HarmonyOS Sans,状态栏列底部竖排,字间距 2px
画布区域788px 宽(896 - 108)× 414px 满高,G0 #FFFFFF 白底
占位文字"请在此签名",16px/400,G40 #A8B4C8,居中
笔触颜色G60 #223355
底部操作栏(横屏,右下角横排)
按钮位置画布区域右下角,水平排列
按钮高度44px
按钮间距12px
按钮内边距0 24px
按钮圆角100px(全圆角胶囊)
按钮字号16px / 400
重签按钮(启用)G0 白底 + G20 描边 + G60 文字
重签按钮(禁用)G0 白底 + G30 描边 + G30 文字 + opacity 0.4
取消按钮G0 白底 + G20 描边 + G60 文字(始终启用)
完成按钮(启用)DB60→DB40 渐变底(#3388FF→#75A3FF)+ G0 白色文字
完成按钮(禁用)DB60→DB40 渐变底 + G0 白色文字 + opacity 0.4
禁用规则未签名时:重签、完成 禁用;已签名后:重签、完成 启用;取消始终启用
返回组件首页