UI设计规范及说明

Appearance

DataEntry 数据录入2 ​

数据大屏选择型数据录入组件规范，采用纯 HTML+CSS 实现。

CSS样式 ​

全部 selection 样式代码：

查看代码
css
/* 大屏组件全局 CSS 变量 */

:root {
  /* ==================== 主题色 ==================== */
  --hn-color-primary: #439FFF;              /* 品牌色 */

  /* ==================== 辅助色 ==================== */
  --hn-color-auxiliary-blue: #00EEFF;       /* 海天蓝 */
  --hn-color-auxiliary-cyan: #00FFB7;       /* 炫丽青 */
  --hn-color-auxiliary-purple: #AA00FF;     /* 神秘紫 */

  /* ==================== 文字颜色 ==================== */
  --hn-color-text-white: #FFFFFF;           /* 闪亮白 */
  --hn-color-text-gray: #A3C0E5;            /* 朦胧灰 */

  /* ==================== 告警颜色 ==================== */
  --hn-color-success: #00FF4D;              /* 成功绿 */
  --hn-color-link: #247BFF;                 /* 超链蓝 */
  --hn-color-warning: #FFC300;              /* 警告黄 */
  --hn-color-danger: #FF1F47;               /* 危险红 */

  /* ==================== 渐变色 ==================== */
  /* 品牌色渐变01 */
  --hn-gradient-brand-start: #A1CFFF;
  --hn-gradient-brand-end: #439FFF;
  --hn-gradient-brand: linear-gradient(90deg, #A1CFFF 0%, #439FFF 100%);

  /* 蓝色渐变02 */
  --hn-gradient-blue-start: #7FB2FF;
  --hn-gradient-blue-end: #0066FF;
  --hn-gradient-blue: linear-gradient(90deg, #7FB2FF 0%, #0066FF 100%);

  /* 红色渐变03 */
  --hn-gradient-red-start: #E98197;
  --hn-gradient-red-end: #E98197;
  --hn-gradient-red: linear-gradient(90deg, #E98197 0%, #E98197 100%);

  /* 蓝青色渐变04 */
  --hn-gradient-cyan-start: #00D4FF;
  --hn-gradient-cyan-end: #00FFB7;
  --hn-gradient-cyan: linear-gradient(90deg, #00D4FF 0%, #00FFB7 100%);

  /* 警告渐变05 */
  --hn-gradient-warning-start: #FFE799;
  --hn-gradient-warning-end: #FFC300;
  --hn-gradient-warning: linear-gradient(90deg, #FFE799 0%, #FFC300 100%);

  /* 绿色渐变06 */
  --hn-gradient-green-start: #8CF7B7;
  --hn-gradient-green-end: #00FF4D;
  --hn-gradient-green: linear-gradient(90deg, #8CF7B7 0%, #00FF4D 100%);

  /* 白色渐变07 */
  --hn-gradient-white-start: #FFFFFF;
  --hn-gradient-white-end: #A3C0E5;
  --hn-gradient-white: linear-gradient(90deg, #FFFFFF 0%, #A3C0E5 100%);

  /* 紫色渐变08 */
  --hn-gradient-purple-start: #D47FFF;
  --hn-gradient-purple-end: #AA00FF;
  --hn-gradient-purple: linear-gradient(90deg, #D47FFF 0%, #AA00FF 100%);

  /* ==================== 背景色 ==================== */
  --hn-bg-center: #072652;                  /* 径向渐变中心 */
  --hn-bg-edge: #00102A;                    /* 径向渐变边缘 */
  --hn-bg-radial: radial-gradient(60% 60% at 50% 50%, #072652 0%, #00102A 100%), #D8D8D8;
  --hn-bg-radial-center: linear-gradient(0deg, #072652, #072652), #D8D8D8;;
  --hn-bg-radial-edge: linear-gradient(0deg, #00102A, #00102A), #D8D8D8;

  /* ==================== 品牌梯度色 ==================== */
  --hn-brand-level-1: #72B7FF;
  --hn-brand-level-2: #439FFF;
  --hn-brand-level-3: #1377FF;
  --hn-brand-level-4: #133EF1;
  --hn-brand-level-5: #000BDA;

  /* ==================== 白色梯度色（文字） ==================== */
  --hn-text-level-1: #FFFFFF;
  --hn-text-level-2: #D8E4F4;
  --hn-text-level-3: #A3C0E5;
  --hn-text-level-4: #759DCF;
  --hn-text-level-5: #426FA9;

  /* ==================== 字体家族 ==================== */
  --hn-font-family-title: 'DouYuZhuiGuangTi', sans-serif;   /* 斗鱼追光体 - 头部标题 */
  --hn-font-family-cn: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;  /* 思源黑体 - 中文 */
  --hn-font-family-num: 'D-DIN', 'DIN Alternate', sans-serif;  /* D-DIN - 数值/英文 */

  /* ==================== 字号 ==================== */
  --hn-font-size-h1: 28px;       /* 头部标题栏 */
  --hn-font-size-h2: 16px;       /* 标题 */
  --hn-font-size-h3: 14px;       /* 小标题、按钮文字 */
  --hn-font-size-body: 14px;     /* 正文 */
  --hn-font-size-caption: 12px;  /* 辅助文字 */
  --hn-font-size-num-lg: 32px;   /* 大数值 */
  --hn-font-size-num-md: 16px;   /* 中数值 */
  --hn-font-size-num-sm: 14px;   /* 小数值 */
  --hn-font-size-num-xs: 12px;   /* 超小数值 */

  /* ==================== 字重 ==================== */
  --hn-font-weight-regular: 400;
  --hn-font-weight-medium: 500;
  --hn-font-weight-bold: 700;
}
css
/* 复选框基础样式 */
.hn-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.hn-checkbox input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hn-text-level-4);
  border-radius: 2px;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.hn-checkbox input[type="checkbox"]:checked {
  background: var(--hn-color-primary);
  border-color: var(--hn-color-primary);
}

.hn-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hn-checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 1;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hn-checkbox input[type="checkbox"]:checked:disabled::after {
  border-color: rgba(255, 255, 255, 0.3);
}

.hn-checkbox-label {
  color: var(--hn-text-level-4);
  font-size: 14px;
}

.hn-checkbox input[type="checkbox"]:checked ~ .hn-checkbox-label {
  color: var(--hn-color-text-white);
}

.hn-checkbox input[type="checkbox"]:disabled ~ .hn-checkbox-label {
  color: rgba(163, 192, 229, 0.4);
  cursor: not-allowed;
}

/* 单选框基础样式 */
.hn-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.hn-radio input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hn-text-level-4);
  border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.hn-radio input[type="radio"]:checked {
  border-color: var(--hn-color-primary);
}

.hn-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--hn-color-primary);
  border-radius: 50%;
}

.hn-radio input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 1;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hn-radio input[type="radio"]:checked:disabled::after {
  background: rgba(255, 255, 255, 0.3);
}

.hn-radio-label {
  color: var(--hn-text-level-4);
  font-size: 14px;
}

.hn-radio input[type="radio"]:checked ~ .hn-radio-label {
  color: var(--hn-color-text-white);
}

.hn-radio input[type="radio"]:disabled ~ .hn-radio-label {
  color: rgba(163, 192, 229, 0.4);
  cursor: not-allowed;
}

/* 开关基础样式 */
.hn-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.hn-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.hn-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--hn-text-level-5);
  transition: 0.3s;
  border-radius: 22px;
}

.hn-switch-slider::before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.hn-switch input[type="checkbox"]:checked + .hn-switch-slider {
  background-color: var(--hn-color-primary);
}

.hn-switch input[type="checkbox"]:checked + .hn-switch-slider::before {
  transform: translateX(22px);
}

.hn-switch input[type="checkbox"]:disabled + .hn-switch-slider {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: rgba(163, 192, 229, 0.2);
}

/* 穿梭框基础样式 */
.hn-transfer {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hn-transfer-panel {
  width: 200px;
  height: 240px;
  border: 1px solid rgba(67, 159, 255, 0.3);
  border-radius: 4px;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.hn-transfer-header {
  padding: 12px;
  border-bottom: 1px solid rgba(67, 159, 255, 0.2);
  color: var(--hn-text-level-2);
  font-size: 14px;
  font-weight: 500;
}

.hn-transfer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.hn-transfer-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hn-transfer-item:hover {
  background: rgba(67, 159, 255, 0.1);
}

.hn-transfer-item input[type="checkbox"] {
  margin-right: 8px;
}

.hn-transfer-operations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hn-transfer-button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(67, 159, 255, 0.3);
  border-radius: 2px;
  color: var(--hn-color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hn-transfer-button:hover {
  background: rgba(67, 159, 255, 0.1);
  border-color: var(--hn-color-primary);
}

.hn-transfer-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

多选框 ​

复选框组件，支持多项选择。提供选中、未选中、禁用等多种状态。

多选框
查看代码
vue
<div class="demo-grid">
  <label class="hn-checkbox">
    <input type="checkbox" v-model="uncheckedNormal" />
    <span class="hn-checkbox-label">未选中项</span>
  </label>
  <label class="hn-checkbox">
    <input type="checkbox" v-model="uncheckedNormal2" />
    <span class="hn-checkbox-label">未选中项</span>
  </label>
  <label class="hn-checkbox">
    <input type="checkbox" v-model="checked" />
    <span class="hn-checkbox-label">选中项</span>
  </label>
  <label class="hn-checkbox">
    <input type="checkbox" v-model="uncheckedDisabled" disabled />
    <span class="hn-checkbox-label">未选失效项</span>
  </label>
  <label class="hn-checkbox">
    <input type="checkbox" v-model="checkedDisabled" disabled />
    <span class="hn-checkbox-label">选中失效项</span>
  </label>
</div>

单选框 ​

单选按钮组件，用于从多个选项中选择一个。提供选中、未选中、禁用等状态。

单选框
查看代码
vue
<div class="demo-grid">
  <label class="hn-radio">
    <input type="radio" value="option1" v-model="selected" />
    <span class="hn-radio-label">未选中项</span>
  </label>
  <label class="hn-radio">
    <input type="radio" value="option2" v-model="selected" />
    <span class="hn-radio-label">未选择项</span>
  </label>
  <label class="hn-radio">
    <input type="radio" value="option3" v-model="selected" />
    <span class="hn-radio-label">选中项</span>
  </label>
  <label class="hn-radio">
    <input type="radio" value="option4" v-model="disabledSelected" disabled />
    <span class="hn-radio-label">未选失效项</span>
  </label>
  <label class="hn-radio">
    <input type="radio" value="option5" v-model="disabledSelected" disabled />
    <span class="hn-radio-label">选中失效项</span>
  </label>
</div>

开关 ​

开关切换组件，用于两种状态的切换。具有流畅的滑动动画效果。

开关
查看代码
vue
<div class="demo-grid">
  <label class="hn-switch">
    <input type="checkbox" v-model="switchOn" />
    <span class="hn-switch-slider"></span>
  </label>
  <label class="hn-switch">
    <input type="checkbox" v-model="switchOff" />
    <span class="hn-switch-slider"></span>
  </label>
</div>

穿梭框 ​

数据穿梭选择组件，用于在两个列表之间移动数据项。支持多选和批量移动。

穿梭框
源列表
目的列表
查看代码
vue
<div class="hn-transfer">
  <!-- 源列表 -->
  <div class="hn-transfer-panel">
    <div class="hn-transfer-header">源列表</div>
    <div class="hn-transfer-body">
      <label v-for="item in sourceItems" :key="item.id" class="hn-transfer-item hn-checkbox">
        <input type="checkbox" v-model="item.checked" :disabled="item.disabled" />
        <span class="hn-checkbox-label">{{ item.label }}</span>
      </label>
    </div>
  </div>

  <!-- 操作按钮 -->
  <div class="hn-transfer-operations">
    <button class="hn-transfer-button" @click="moveToTarget" title="移至右侧">→</button>
    <button class="hn-transfer-button" @click="moveToSource" title="移至左侧">←</button>
  </div>

  <!-- 目标列表 -->
  <div class="hn-transfer-panel">
    <div class="hn-transfer-header">目的列表</div>
    <div class="hn-transfer-body">
      <label v-for="item in targetItems" :key="item.id" class="hn-transfer-item hn-checkbox">
        <input type="checkbox" v-model="item.checked" :disabled="item.disabled" />
        <span class="hn-checkbox-label">{{ item.label }}</span>
      </label>
    </div>
  </div>
</div>

统一UI

Copyright © 2024