Appearance
Border 边框
数据大屏边框规范，定义边框粗细和圆角半径的标准。
CSS样式
全部 border 样式代码：
查看代码
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
/* 边框表格 */
.border-table {
display: flex;
flex-direction: column;
gap: 12px;
}
.border-header,
.border-row {
display: grid;
grid-template-columns: 80px 80px 1fr;
gap: 24px;
align-items: center;
}
.border-header {
color: var(--hn-text-level-3);
font-size: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(67, 159, 255, 0.2);
}
.border-row {
padding: 12px 0;
}
.border-name {
color: var(--hn-text-level-2);
font-size: 14px;
}
.border-spec {
color: var(--hn-text-level-2);
font-size: 14px;
font-family: var(--hn-font-family-num), 'Courier New', monospace;
}
.border-example {
width: 100%;
max-width: 400px;
height: 1px;
}
/* 圆角展示 */
.radius-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.radius-item {
display: flex;
flex-direction: column;
}
.radius-box {
width: 100%;
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(149, 195, 255, 0.1);
box-shadow: inset 0px 0px 16px 0px #63a7ff;
}
.radius-label {
color: var(--hn-color-text-white);
font-size: 14px;
}
.radius-value {
color: var(--hn-text-level-3);
font-size: 12px;
font-family: var(--hn-font-family-num), 'Courier New', monospace;
}边框
定义边框的粗细和样式。实线用于实体边界，虚线用于辅助分割。
边框
名称
粗细
举例
实线
1px
虚线
2px
查看代码
html
<div class="border-table">
<div class="border-header">
<div>名称</div>
<div>粗细</div>
<div>举例</div>
</div>
<div v-for="item in borderStyles" :key="item.name" class="border-row">
<div class="border-name">{{ item.name }}</div>
<div class="border-spec">{{ item.width }}</div>
<div>
<div
class="border-example"
:style="{
borderTop: `${item.width} ${item.style} var(--hn-color-primary)`
}"
></div>
</div>
</div>
</div>圆角
定义边框圆角半径的规范。根据组件大小和视觉需求选择合适的圆角。
圆角
无圆角
0px
小圆角
2px
中圆角
4px
大圆角
8px
查看代码
html
<div class="radius-grid">
<div v-for="item in radiusStyles" :key="item.name" class="radius-item">
<div class="radius-box" :style="{ borderRadius: item.radius }">
<div class="radius-label">{{ item.name }}</div>
<div class="radius-value">{{ item.radius }}</div>
</div>
</div>
</div>