UI设计规范及说明

Appearance

DataEntry2 数据录入2

明细内容

1. 多选框

未选中项 / 未选悬停项 / 选中项 / 未选失效项 / 选中失效项

多选框 UI
查看代码（CSS + HTML）

CSS

.bs-de2-item{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:rgba(231,243,255,.72);margin-right:28px;}
.bs-de2-box{width:16px;height:16px;border-radius:2px;box-sizing:border-box;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;}
.bs-de2-box.is-hover{border-color:rgba(61,220,255,.55);box-shadow:0 0 12px rgba(61,220,255,.15);}
.bs-de2-box.is-checked{border-color:rgba(0,116,255,.9);background:rgba(0,116,255,.65);box-shadow:0 0 12px rgba(0,116,255,.25);}
.bs-de2-box.is-disabled{opacity:.38;}
.bs-de2-check{width:10px;height:10px;display:block;}

HTML

<label class="bs-de2-item">
  <span class="bs-de2-box"></span>未选中项
</label>
<label class="bs-de2-item">
  <span class="bs-de2-box is-hover"></span>未选悬停项
</label>
<label class="bs-de2-item">
  <span class="bs-de2-box is-checked">
    <svg class="bs-de2-check" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 6.5L5 9.2L10 3" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>选中项
</label>

2. 单选框

未选中项 / 未选悬停项 / 选中项 / 未选失效项 / 选中失效项

单选框 UI
查看代码（CSS + HTML）

CSS

.bs-de2-item{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:rgba(231,243,255,.72);margin-right:28px;}
.bs-de2-box{width:16px;height:16px;border-radius:2px;box-sizing:border-box;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;}
.bs-de2-box.is-hover{border-color:rgba(61,220,255,.55);box-shadow:0 0 12px rgba(61,220,255,.15);}
.bs-de2-box.is-checked{border-color:rgba(0,116,255,.9);background:rgba(0,116,255,.65);box-shadow:0 0 12px rgba(0,116,255,.25);}
.bs-de2-box.is-disabled{opacity:.38;}
.bs-de2-check{width:10px;height:10px;display:block;}



.bs-de2-radio{width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;}
.bs-de2-radio.is-hover{border-color:rgba(61,220,255,.55);box-shadow:0 0 12px rgba(61,220,255,.15);}
.bs-de2-radio.is-checked{border-color:rgba(0,116,255,.9);}
.bs-de2-radio-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,116,255,.95);box-shadow:0 0 12px rgba(0,116,255,.35);}
.bs-de2-radio.is-disabled{opacity:.38;}

HTML

<label class="bs-de2-item">
  <span class="bs-de2-radio"></span>未选中项
</label>
<label class="bs-de2-item">
  <span class="bs-de2-radio is-hover"></span>未选悬停项
</label>
<label class="bs-de2-item">
  <span class="bs-de2-radio is-checked"><span class="bs-de2-radio-dot"></span></span>选中项
</label>

3. 开关

关 / 开 / 禁用

开关 UI
查看代码（CSS + HTML）

CSS

.bs-de2-switch{width:54px;height:26px;border-radius:14px;position:relative;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.12);box-sizing:border-box;}
.bs-de2-switch::after{content:'';position:absolute;top:50%;left:4px;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 10px rgba(0,0,0,.25);}
.bs-de2-switch.is-on{background:rgba(0,116,255,.75);border-color:rgba(0,116,255,.65);box-shadow:0 0 14px rgba(0,116,255,.2);}
.bs-de2-switch.is-on::after{left:auto;right:4px;background:#fff;}
.bs-de2-switch.is-disabled{opacity:.38;}

HTML

<div class="bs-de2-switch"></div>
<div class="bs-de2-switch is-on"></div>

4. 穿梭框

源列表 / 目的列表 / 选中态 / 滚动条 / 操作按钮

穿梭框 UI
查看代码（CSS + HTML）

CSS

.bs-de2-transfer{display:flex;align-items:center;gap:18px;}
.bs-de2-transfer-col{width:220px;height:292px;border-radius:4px;border:1px solid rgba(15,60,126,.9);background:rgba(2,16,43,.25);box-shadow:inset 0 0 14px rgba(99,167,255,.18);}
.bs-de2-transfer-hd{height:34px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-size:12px;color:rgba(231,243,255,.78);background:rgba(0,0,0,.06);}
.bs-de2-transfer-list{padding:8px 10px;display:flex;flex-direction:column;gap:10px;}
.bs-de2-transfer-row{display:flex;align-items:center;gap:10px;color:rgba(231,243,255,.72);font-size:12px;}
.bs-de2-transfer-row.is-active{background:rgba(0,116,255,.18);border-radius:3px;padding:6px 6px;}
.bs-de2-transfer-mid{display:flex;flex-direction:column;gap:10px;}
.bs-de2-midbtn{width:28px;height:28px;border-radius:4px;border:1px solid rgba(15,60,126,.9);background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;color:rgba(231,243,255,.8);}
.bs-de2-midbtn.is-primary{background:rgba(0,116,255,.6);border-color:rgba(0,116,255,.75);box-shadow:0 0 12px rgba(0,116,255,.25);}

HTML

<div class="bs-de2-transfer">
  <div class="bs-de2-transfer-col">...</div>
  <div class="bs-de2-transfer-mid">...</div>
  <div class="bs-de2-transfer-col">...</div>
</div>

示例

设计规范
Design Code
07
DATAENTRY
数据录入
多选框
单选框
开关
穿梭框
源列表
未选中项
选中项
未选失效项
选中失效项
未选中项
>
<
目的列表
未选中项
未选中项