Button/Tag 按钮/标签

数据大屏按钮与标签组件规范，采用纯 CSS 实现。

CSS样式

全部 tag 样式代码：

查看代码

vars.csstag.css

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-button {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}

/* 主按钮 */
.hn-button--primary {
  background: linear-gradient(180deg, #0F1F51 0%, #004891 100%);
  border: 1px solid;
  border-image: linear-gradient(142deg, #62CEFF 34%, #A8D5FF 77%) 1;
  border-radius: 2px;
  color: var(--hn-color-text-white);
  box-shadow: inset 0px -4px 6px 0px #2EAFFF;
}

.hn-button--primary:hover {
  background: var(--hn-brand-level-1);
  border-color: var(--hn-brand-level-1);
  box-shadow: 0 0 12px rgba(67, 159, 255, 0.7);
}

.hn-button--primary.is-plain {
  background: #0D255A;
  box-sizing: border-box;
  border: 1px solid #3B5DA8;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

.hn-button--primary.is-plain:hover {
  background: rgba(67, 159, 255, 0.1);
  border-color: var(--hn-brand-level-1);
  color: var(--hn-brand-level-1);
}

/* 次按钮 */
.hn-button--secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #34547F;
  color: #B5CAE6;
}

.hn-button--secondary:hover {
  border-color: var(--hn-color-primary);
  color: var(--hn-color-primary);
}

.hn-button--secondary.is-active {
  border: 1px solid #79C2FF;
  background: #1D3350;
  color: #B3D4FF;
}

/* 文字按钮 */
.hn-button--text {
  background: transparent;
  border-color: transparent;
  color: var(--hn-color-primary);
  padding: 0 8px;
}

.hn-button--text:hover {
  color: var(--hn-brand-level-1);
}

/* 尺寸变体 */
.hn-button--small {
  height: 24px;
  font-size: 12px;
}

.hn-button--medium {
  height: 28px;
  font-size: 14px;
}

.hn-button--large {
  height: 32px;
  font-size: 14px;
}

/* 标签页 */
.hn-tabs {
  display: flex;
  gap: 0;
}

.hn-tab-item {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--hn-text-level-3);
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.hn-tab-item:hover {
  color: var(--hn-color-primary);
}

.hn-tab-item.is-active {
  color: var(--hn-color-text-white);
  background: linear-gradient(180deg, rgba(18, 34, 53, 0) 0%, #2F74CE 100%);
  box-sizing: border-box;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  border-color: #6DB4FF;
}

.hn-tab-item.is-disabled {
  color: var(--hn-text-level-5);
  cursor: not-allowed;
  opacity: 0.5;
}

.hn-tab-item.is-disabled:hover {
  color: var(--hn-text-level-5);
}

主按钮

主要操作按钮，具有明显的视觉强调。支持两种状态（已激活/未激活）和三种尺寸（24px/28px/32px）。

已激活状态具有发光效果，未激活状态为镂空样式。

主按钮

已激活状态

H:24px

H:28px

H:32px

未激活状态

H:24px

H:28px

H:32px

查看代码

vue

  <div class="button-demo">
  <div class="demo-section">
    <h4 class="demo-title">已激活状态</h4>
    <div class="button-group">
      <button class="hn-button hn-button--primary hn-button--small">已激活状态</button>
      <span class="size-label">H:24px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--primary hn-button--medium">已激活状态</button>
      <span class="size-label">H:28px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--primary hn-button--large">已激活状态</button>
      <span class="size-label">H:32px</span>
    </div>
  </div>

  <div class="demo-section">
    <h4 class="demo-title">未激活状态</h4>
    <div class="button-group">
      <button class="hn-button hn-button--primary is-plain hn-button--small">未激活状态</button>
      <span class="size-label">H:24px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--primary is-plain hn-button--medium">未激活状态</button>
      <span class="size-label">H:28px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--primary is-plain hn-button--large">未激活状态</button>
      <span class="size-label">H:32px</span>
    </div>
  </div>
</div>

文字按钮

轻量级文字按钮，适用于次要操作或文本链接场景。支持三种尺寸（24px/28px/32px）。

文字按钮

H:24px

H:28px

H:32px

查看代码

vue

  <div class="button-demo">
  <div class="demo-section">
    <h4 class="demo-title">文字按钮</h4>
    <div class="button-group">
      <button class="hn-button hn-button--text hn-button--small">输入文本</button>
      <span class="size-label">H:24px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--text hn-button--medium">输入文本</button>
      <span class="size-label">H:28px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--text hn-button--large">输入文本</button>
      <span class="size-label">H:32px</span>
    </div>
  </div>
</div>

次按钮

次要操作按钮，视觉强调程度低于主按钮。支持两种状态（已激活/未激活）和三种尺寸（24px/28px/32px）。

次按钮

已激活

H:24px

H:28px

H:32px

未激活

H:24px

H:28px

H:32px

查看代码

vue

  <div class="button-demo">
  <div class="demo-section">
    <h4 class="demo-title">已激活</h4>
    <div class="button-group">
      <button class="hn-button hn-button--secondary is-active hn-button--small">已激活</button>
      <span class="size-label">H:24px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--secondary is-active hn-button--medium">已激活</button>
      <span class="size-label">H:28px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--secondary is-active hn-button--large">已激活</button>
      <span class="size-label">H:32px</span>
    </div>
  </div>

  <div class="demo-section">
    <h4 class="demo-title">未激活</h4>
    <div class="button-group">
      <button class="hn-button hn-button--secondary hn-button--small">未激活</button>
      <span class="size-label">H:24px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--secondary hn-button--medium">未激活</button>
      <span class="size-label">H:28px</span>
    </div>
    <div class="button-group">
      <button class="hn-button hn-button--secondary hn-button--large">未激活</button>
      <span class="size-label">H:32px</span>
    </div>
  </div>
</div>

标签页

用于内容区域的分组切换。支持选中、可选、不可选三种状态。

标签页

选中标签

可选标签

不可选标签

查看代码

vue

  <div class="tabs-demo">
  <div class="demo-section">
    <h4 class="demo-title">标签页</h4>
    <div class="hn-tabs">
      <div
        class="hn-tab-item"
        :class="{ 'is-active': activeTab === 'tab1' }"
        @click="handleTabClick('tab1')"
      >
        选中标签
      </div>
      <div
        class="hn-tab-item"
        :class="{ 'is-active': activeTab === 'tab2' }"
        @click="handleTabClick('tab2')"
      >
        可选标签
      </div>
      <div
        class="hn-tab-item"
        :class="{ 'is-active': activeTab === 'tab3' }"
        @click="handleTabClick('tab3')"
      >
        可选标签
      </div>
      <div
        class="hn-tab-item"
        :class="{ 'is-active': activeTab === 'tab4' }"
        @click="handleTabClick('tab4')"
      >
        可选标签
      </div>
      <div
        class="hn-tab-item is-disabled"
        @click="handleTabClick('tab5')"
      >
        不可选标签
      </div>
    </div>
  </div>
</div>

Button/Tag 按钮/标签 ​

CSS样式 ​

主按钮 ​

已激活状态

未激活状态

文字按钮 ​

文字按钮

次按钮 ​

已激活

未激活

标签页 ​

标签页

Button/Tag 按钮/标签

CSS样式

主按钮

文字按钮

次按钮

标签页