Appearance
DataEntry 数据录入1
数据大屏数据录入组件规范，采用纯 HTML+CSS 实现。
CSS样式
全部 data-entry 样式代码：
查看代码
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-input,
.hn-select,
.hn-date-picker,
.hn-time-picker {
width: 100%;
height: 32px;
padding: 0 12px;
background: transparent;
border: 1px solid rgba(67, 159, 255, 0.3);
border-radius: 2px;
color: var(--hn-color-text-white);
font-size: 14px;
line-height: 30px;
outline: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
.hn-input::placeholder,
.hn-select::placeholder,
.hn-date-picker::placeholder,
.hn-time-picker::placeholder {
color: var(--hn-text-level-4);
}
.hn-input:hover,
.hn-select:hover,
.hn-date-picker:hover,
.hn-time-picker:hover {
border-color: var(--hn-color-primary);
}
.hn-input:focus,
.hn-select:focus,
.hn-date-picker:focus,
.hn-time-picker:focus {
border-color: var(--hn-color-primary);
box-shadow: 0 0 8px rgba(67, 159, 255, 0.3);
}
/* 选择器特殊样式 */
.hn-select {
appearance: none;
cursor: pointer;
/* padding-right: 32px; */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A3C0E5' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* 日期和时间选择器 */
.hn-date-picker,
.hn-time-picker {
cursor: pointer;
/* padding-right: 32px; */
position: relative;
}
.hn-date-picker::after,
.hn-time-picker::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
pointer-events: none;
}
/* .hn-date-picker::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23A3C0E5'%3E%3Cpath d='M14 2h-1V1a1 1 0 0 0-2 0v1H5V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM2 14V6h12v8H2z'/%3E%3C/svg%3E");
} */
/* .hn-time-picker::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23A3C0E5'%3E%3Cpath d='M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm0 14a6 6 0 1 1 6-6 6 6 0 0 1-6 6z'/%3E%3Cpath d='M9 4H7v5h5V7H9V4z'/%3E%3C/svg%3E");
} */
/* 表单项容器 */
.hn-form-item {
margin-bottom: 16px;
}
.hn-form-label {
display: block;
color: var(--hn-text-level-2);
font-size: 14px;
margin-bottom: 8px;
}
/* 选项样式 */
.hn-select option {
background: var(--hn-bg-center);
color: var(--hn-color-text-white);
padding: 8px;
}输入框
文本输入组件，支持占位符提示和实时输入。具有聚焦发光效果。
输入框
查看代码
vue
<div class="demo-grid">
<div class="hn-form-item">
<label class="hn-form-label">未输入</label>
<input
v-model="emptyInput"
class="hn-input"
type="text"
placeholder="请输入"
/>
</div>
<div class="hn-form-item">
<label class="hn-form-label">已输入</label>
<input
v-model="filledInput"
class="hn-input"
type="text"
/>
</div>
</div>选择器
下拉选择组件，适用于从预定义选项中选择。支持未选择、选择中、已选择三种状态。
选择器
查看代码
vue
<div class="demo-grid">
<div class="hn-form-item">
<label class="hn-form-label">未选择</label>
<select v-model="emptySelect" class="hn-select">
<option value="" disabled>请选择</option>
<option value="option1">选项一</option>
<option value="option2">选项二</option>
<option value="option3">选项三</option>
</select>
</div>
<div class="hn-form-item">
<label class="hn-form-label">选择中</label>
<select v-model="activeSelect" class="hn-select">
<option value="option1">选项一</option>
<option value="option2">选项二</option>
<option value="option3">选项三</option>
</select>
</div>
<div class="hn-form-item">
<label class="hn-form-label">已选择</label>
<select v-model="filledSelect" class="hn-select">
<option value="option1">选项一</option>
<option value="option2">选项二</option>
<option value="option3">选项三</option>
</select>
</div>
</div>日期选择框
日期选择组件，支持日历面板选择。具有日期图标指示器。
日期选择框
查看代码
vue
<div class="demo-grid">
<div class="hn-form-item">
<label class="hn-form-label">未选择</label>
<div class="date-picker-wrapper">
<input
v-model="emptyDate"
class="hn-date-picker"
type="date"
placeholder="开始日期"
/>
</div>
</div>
<div class="hn-form-item">
<label class="hn-form-label">已选择</label>
<div class="date-picker-wrapper">
<input
v-model="filledDate"
class="hn-date-picker"
type="date"
/>
</div>
</div>
</div>时间选择框
时间选择组件，支持精确到秒的时间选择。具有时钟图标指示器。
时间选择框
查看代码
vue
<div class="demo-grid">
<div class="hn-form-item">
<label class="hn-form-label">未选择</label>
<div class="time-picker-wrapper">
<input
v-model="emptyTime"
class="hn-time-picker"
type="time"
step="1"
placeholder="选择时间"
/>
</div>
</div>
<div class="hn-form-item">
<label class="hn-form-label">已择</label>
<div class="time-picker-wrapper">
<input
v-model="filledTime"
class="hn-time-picker"
type="time"
step="1"
/>
</div>
</div>
</div>