Appearance
DataEntry 数据录入
状态明细
本页补齐「数据录入」在业务中最常用的交互状态（Hover / Focus / Disabled / Error / Success / Open）。下方示例使用统一的状态类名，方便组件库与业务页面复用。
状态类名约定
.is-hover：鼠标悬停.is-focus：聚焦/激活（输入框 focus、选择器打开前的激活态）.is-open：面板打开（Select 下拉展开、Date/Time 弹层打开）.is-disabled：禁用.is-error：校验失败.is-success：校验通过/成功态.is-filled：已填写（原有）
状态预览
提示：每个分组标题右侧可点击「查看代码」，快速跳到 CSS/HTML 复制区。
选择器 / 日期 / 时间 查看代码
默认
请选择▾
Hover
请选择▾
Open
请选择▾
Disabled
不可选择▾
Error
请选择▾
必填项
Success
2024-03-26▾
已选择
CSS样式
全部 dataentry 样式代码：
查看代码
.bs-de-wrap{max-width:1594px;width:100%;margin:16px auto;position:relative;padding-top:14px;box-sizing:border-box;}
.bs-de-scale{transform:scale(var(--bs-scale));transform-origin:top left;}
.bs-de-canvas{width:1594px;height:920px;position:relative;background: radial-gradient(1200px 700px at 20% 10%, rgba(12, 72, 145, .35) 0%, rgba(2, 20, 50, 0) 60%), linear-gradient(180deg, #021432 0%, #02102B 100%);border-radius:8px;overflow:hidden;}
.bs-de-topline{position:absolute;left:0;top:0;width:1594px;height:2px;background: linear-gradient(180deg, rgba(1, 19, 47, 0) 0%, #4D9BFF 55%, rgba(255, 255, 255, 0) 100%);}
.bs-de-hd{position:absolute;left:91px;top:75px;display:flex;align-items:center;gap:10px;color:#CFE4FF;}
.bs-de-hd .dot{width:8px;height:8px;transform:rotate(45deg);background:#3DDCFF;box-shadow:0 0 12px rgba(61,220,255,.55);}
.bs-de-hd .t{font-size:22px;font-weight:600;letter-spacing:.5px;}
.bs-de-hd .sub{font-size:12px;opacity:.65;margin-left:2px;}
.bs-de-no{position:absolute;right:70px;top:58px;font-size:56px;font-weight:800;letter-spacing:2px;color:rgba(163, 214, 255, .35);}
.bs-de-title{position:absolute;left:91px;top:145px;}
.bs-de-title .en{font-size:12px;letter-spacing:6px;color:rgba(199, 227, 255, .45);margin-bottom:6px;}
.bs-de-title .cn{font-size:26px;font-weight:700;color:#E7F3FF;}
.bs-de-sec{position:absolute;color:#CFE4FF;}
.bs-de-sec .sec-h{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-weight:600;}
.bs-de-sec .sec-h .diamond{width:7px;height:7px;transform:rotate(45deg);background:#3DDCFF;box-shadow:0 0 10px rgba(61,220,255,.45);}
.bs-de-sec .sec-h span{font-size:16px;}
.bs-de-row{margin-bottom:18px;}
.bs-de-lab{font-size:12px;color:rgba(207,228,255,.6);margin-bottom:8px;}
.bs-de-field{width:248px;height:38px;border-radius:2px;border:1px solid #0F3C7E;box-sizing:border-box;background:rgba(2, 16, 43, .25);display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#E7F3FF;}
.bs-de-field .ph{color:rgba(231,243,255,.35);}
.bs-de-field .val{color:#E7F3FF;}
.bs-de-ic{width:16px;height:16px;opacity:.75;flex:0 0 auto;}
.bs-de-field.is-focus{box-shadow:0 0 0 2px rgba(61,220,255,.18), inset 0 0 10px rgba(99,167,255,.25);border-color:#2D7DFF;}
.bs-de-field.is-filled{background:rgba(149, 195, 255, 0.08);}
.bs-de-field.is-hover{border-color:#1A56B0;background:rgba(149,195,255,0.05);}
.bs-de-field.is-open{box-shadow:0 0 0 2px rgba(61,220,255,.18), inset 0 0 10px rgba(99,167,255,.25);border-color:#2D7DFF;background:rgba(149,195,255,0.08);}
.bs-de-field.is-disabled{opacity:.45;filter:saturate(.7);pointer-events:none;border-color:rgba(15,60,126,.7);background:rgba(2, 16, 43, .15);}
.bs-de-field.is-error{border-color:#FF383C;box-shadow:0 0 0 2px rgba(255,56,60,.14);background:rgba(255,56,60,.06);}
.bs-de-field.is-success{border-color:#34C759;box-shadow:0 0 0 2px rgba(52,199,89,.12);background:rgba(52,199,89,.06);}
.bs-de-help{margin-top:6px;font-size:12px;line-height:1.2;opacity:.95;}
.bs-de-help.is-error{color:#FF7A7D;}
.bs-de-help.is-success{color:#6BE59A;}
.bs-de-states{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:14px 0 10px;padding:16px;border:1px solid rgba(15,60,126,.6);border-radius:8px;background:rgba(2,16,43,.18);}
.bs-de-state-ttl{font-size:14px;font-weight:700;color:#CFE4FF;margin-bottom:12px;}
.bs-de-chevron{opacity:.65;font-size:14px;transform-origin:center;transition:transform .15s ease;}
.bs-de-chevron.is-rot{transform:rotate(180deg);}
@media (max-width: 900px){.bs-de-states{grid-template-columns:1fr;}}
HTML结构
示例结构（可直接复制）：
查看代码
<div class="bs-de-wrap" id="deDemo">
<div class="bs-de-topline"></div>
<div class="bs-de-scale" id="deScale">
<div class="bs-de-canvas">
<div class="bs-de-hd">
<span class="dot"></span>
<div>
<div class="t">设计规范</div>
<div class="sub">Design Code</div>
</div>
</div>
<div class="bs-de-no">06</div>
<div class="bs-de-title">
<div class="en">DATAENTRY</div>
<div class="cn">数据录入</div>
</div>
<!-- 输入框 -->
<div class="bs-de-sec" style="left:91px;top:308px;">
<div class="sec-h"><i class="diamond"></i><span>输入框</span></div>
<div class="bs-de-row">
<div class="bs-de-lab">未输入</div>
<div class="bs-de-field">
<span class="ph">请输入</span>
</div>
</div>
<div class="bs-de-row">
<div class="bs-de-lab">已输入</div>
<div class="bs-de-field is-filled">
<span class="val">示例文字</span>
</div>
</div>
</div>
<!-- 选择器 -->
<div class="bs-de-sec" style="left:616px;top:308px;">
<div class="sec-h"><i class="diamond"></i><span>选择器</span></div>
<div class="bs-de-row">
<div class="bs-de-lab">未选择</div>
<div class="bs-de-field">
<span class="ph">请选择</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6.5L8 10.5L12 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="bs-de-row">
<div class="bs-de-lab">选择中</div>
<div class="bs-de-field is-focus">
<span class="ph">选项一</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6.5L8 10.5L12 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="bs-de-row">
<div class="bs-de-lab">已选择</div>
<div class="bs-de-field is-filled">
<span class="val">选项一</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6.5L8 10.5L12 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<!-- 日期选择框 -->
<div class="bs-de-sec" style="left:1111px;top:308px;">
<div class="sec-h"><i class="diamond"></i><span>日期选择框</span></div>
<div class="bs-de-row">
<div class="bs-de-lab">未选择</div>
<div class="bs-de-field">
<span class="ph">开始日期</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2.5V4.2M11 2.5V4.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M3.5 6.2H12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.5 3.8H11.5C12.3284 3.8 13 4.4716 13 5.3V12.2C13 13.0284 12.3284 13.7 11.5 13.7H4.5C3.6716 13.7 3 13.0284 3 12.2V5.3C3 4.4716 3.6716 3.8 4.5 3.8Z" stroke="currentColor" stroke-width="1.2" />
</svg>
</div>
</div>
<div class="bs-de-row">
<div class="bs-de-lab">已选择</div>
<div class="bs-de-field is-filled">
<span class="val">2024-03-26</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2.5V4.2M11 2.5V4.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M3.5 6.2H12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.5 3.8H11.5C12.3284 3.8 13 4.4716 13 5.3V12.2C13 13.0284 12.3284 13.7 11.5 13.7H4.5C3.6716 13.7 3 13.0284 3 12.2V5.3C3 4.4716 3.6716 3.8 4.5 3.8Z" stroke="currentColor" stroke-width="1.2" />
</svg>
</div>
</div>
</div>
<!-- 时间选择框 -->
<div class="bs-de-sec" style="left:91px;top:660px;">
<div class="sec-h"><i class="diamond"></i><span>时间选择框</span></div>
<div class="bs-de-row">
<div class="bs-de-lab">未选择</div>
<div class="bs-de-field">
<span class="ph">选择时间</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" stroke="currentColor" stroke-width="1.2"/>
<path d="M8 4.7V8.3L10.4 9.9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="bs-de-row">
<div class="bs-de-lab">已择</div>
<div class="bs-de-field is-filled">
<span class="val">09:41:36</span>
<svg class="bs-de-ic" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" stroke="currentColor" stroke-width="1.2"/>
<path d="M8 4.7V8.3L10.4 9.9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
</div>
</div>示例
设计规范
Design Code
06
DATAENTRY
数据录入
输入框
未输入
请输入
已输入
示例文字
选择器
未选择
请选择
选择中
选项一
已选择
选项一
日期选择框
未选择
开始日期
已选择
2024-03-26
时间选择框
未选择
选择时间
已择
09:41:36