Appearance
Feedback 反馈2
数据大屏警告提示组件规范，包含简洁和详细两种样式的 Alert 组件。
CSS样式
全部 alert 样式代码：
查看代码
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-alert {
position: relative;
padding: 0 16px;
min-height: 48px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
box-sizing: border-box;
}
/* 警告提示图标 */
.hn-alert-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
}
/* 警告提示内容 */
.hn-alert-content {
flex: 1;
min-width: 0;
}
.hn-alert-title {
font-size: 14px;
font-weight: 500;
line-height: 20px;
margin: 0 0 4px 0;
color: #ffffff;
}
.hn-alert-description {
font-size: 14px;
line-height: 22px;
margin: 0;
color: rgba(255, 255, 255, 0.85);
}
/* 警告提示操作区 */
.hn-alert-action {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
}
.hn-alert-link {
background: none;
border: none;
color: var(--hn-color-auxiliary-cyan);
font-size: 14px;
cursor: pointer;
padding: 0;
text-decoration: none;
}
.hn-alert-link:hover {
opacity: 0.8;
}
.hn-alert-close {
width: 20px;
height: 20px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
transition: color 0.3s;
}
.hn-alert-close:hover {
color: rgba(255, 255, 255, 1);
}
/* 成功样式 */
.hn-alert--success {
background: rgba(0, 128, 64, 0.15);
border: 1px solid rgba(0, 255, 77, 0.5);
}
.hn-alert--success .hn-alert-icon {
color: var(--hn-color-success);
}
.hn-alert--success .hn-alert-title,
.hn-alert--success .hn-alert-description {
color: rgba(255, 255, 255, 0.85);
}
/* 警告样式 */
.hn-alert--warning {
background: rgba(102, 85, 0, 0.3);
border: 1px solid rgba(255, 195, 0, 0.5);
}
.hn-alert--warning .hn-alert-icon {
color: var(--hn-color-warning);
}
.hn-alert--warning .hn-alert-title,
.hn-alert--warning .hn-alert-description {
color: rgba(255, 255, 255, 0.85);
}
/* 信息样式 */
.hn-alert--info {
background: rgba(33, 79, 127, 0.3);
border: 1px solid rgba(67, 159, 255, 0.5);
}
.hn-alert--info .hn-alert-icon {
color: var(--hn-color-primary);
}
.hn-alert--info .hn-alert-title,
.hn-alert--info .hn-alert-description {
color: rgba(255, 255, 255, 0.85);
}
/* 错误样式 */
.hn-alert--error {
background: rgba(128, 16, 36, 0.3);
border: 1px solid rgba(255, 31, 71, 0.5);
}
.hn-alert--error .hn-alert-icon {
color: var(--hn-color-danger);
}
.hn-alert--error .hn-alert-title,
.hn-alert--error .hn-alert-description {
color: rgba(255, 255, 255, 0.85);
}
/* 大尺寸样式（用于详细提示） */
.hn-alert--large {
padding: 16px 20px;
min-height: auto;
align-items: flex-start;
}
.hn-alert--large .hn-alert-icon {
width: 20px;
height: 20px;
font-size: 18px;
margin-top: 2px;
}
.hn-alert--large .hn-alert-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
color: #ffffff;
}
.hn-alert--large .hn-alert-description {
font-size: 14px;
line-height: 22px;
}简洁警告提示
用于页面中的即时反馈信息，支持成功、警告、信息、错误四种状态。可配置关闭按钮或操作链接。
简洁警告提示
恭喜！你所提交的信息已经被接收，如有问题请联系客服。
系统将于 15:00-17:00 进行升级，请及时保存你的资料！
恭喜！你所提交的信息已经被接收，如有问题请联系客服。
你好！欢迎使用，你可以通过自身需求来选择业务板块。
系统错误，请稍后重试。
查看代码
vue
<div class="demo-container">
<!-- 成功提示 - 带关闭按钮 -->
<div class="hn-alert hn-alert--success">
<span class="hn-alert-icon">✓</span>
<div class="hn-alert-content">
<div class="hn-alert-description">
恭喜！你所提交的信息已经被接收，如有问题请联系客服。
</div>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('success')">
×
</button>
</div>
</div>
<!-- 警告提示 - 带关闭按钮 -->
<div class="hn-alert hn-alert--warning">
<span class="hn-alert-icon">⚠</span>
<div class="hn-alert-content">
<div class="hn-alert-description">
系统将于 15:00-17:00 进行升级，请及时保存你的资料！
</div>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('warning')">
×
</button>
</div>
</div>
<!-- 成功提示 - 带查看详情 -->
<div class="hn-alert hn-alert--success">
<span class="hn-alert-icon">✓</span>
<div class="hn-alert-content">
<div class="hn-alert-description">
恭喜！你所提交的信息已经被接收，如有问题请联系客服。
</div>
</div>
<div class="hn-alert-action">
<button class="hn-alert-link" @click="() => console.log('查看详情')">
查看详情
</button>
</div>
</div>
<!-- 信息提示 - 带查看详情 -->
<div class="hn-alert hn-alert--info">
<span class="hn-alert-icon">ⓘ</span>
<div class="hn-alert-content">
<div class="hn-alert-description">
你好！欢迎使用，你可以通过自身需求来选择业务板块。
</div>
</div>
<div class="hn-alert-action">
<button class="hn-alert-link" @click="() => console.log('查看详情')">
查看详情
</button>
</div>
</div>
<!-- 错误提示 - 带关闭按钮 -->
<div class="hn-alert hn-alert--error">
<span class="hn-alert-icon">✕</span>
<div class="hn-alert-content">
<div class="hn-alert-description">系统错误，请稍后重试。</div>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('error')">
×
</button>
</div>
</div>
</div>详细警告提示
带标题和详细描述的警告提示，适用于需要更多说明的场景。同样支持四种状态类型。
详细警告提示
已成功!
你所提交的信息已经被接收，请及时查看申请状态。如有疑问，请联系相关人员在线咨询。
请注意
你所提交的信息已经被接收，可以进入个人信息查看页面，如有疑问，请联系客服人员。
帮助信息
你好，由于你的良好信用，我们决定提高你的允许这笔交易的会员账号金额，欢迎再次使用自助存款与会员资格查看。
出错了！
你的账户余额使用权限在关天后到期，请及时提进行申请续。如有问题，请联系相关人员。
查看代码
vue
<div class="demo-container">
<!-- 成功提示 -->
<div class="hn-alert hn-alert--success hn-alert--large">
<span class="hn-alert-icon">✓</span>
<div class="hn-alert-content">
<h5 class="hn-alert-title">已成功!</h5>
<p class="hn-alert-description">
你所提交的信息已经被接收，请及时查看申请状态。如有疑问，请联系相关人员在线咨询。
</p>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('success')">×</button>
</div>
</div>
<!-- 警告提示 -->
<div class="hn-alert hn-alert--warning hn-alert--large">
<span class="hn-alert-icon">⚠</span>
<div class="hn-alert-content">
<h5 class="hn-alert-title">请注意</h5>
<p class="hn-alert-description">
你所提交的信息已经被接收，可以进入个人信息查看页面，如有疑问，请联系客服人员。
</p>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('warning')">×</button>
</div>
</div>
<!-- 信息提示 -->
<div class="hn-alert hn-alert--info hn-alert--large">
<span class="hn-alert-icon">ⓘ</span>
<div class="hn-alert-content">
<h5 class="hn-alert-title">帮助信息</h5>
<p class="hn-alert-description">
你好，由于你的良好信用，我们决定提高你的允许这笔交易的会员账号金额，欢迎再次使用自助存款与会员资格查看。
</p>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('info')">×</button>
</div>
</div>
<!-- 错误提示 -->
<div class="hn-alert hn-alert--error hn-alert--large">
<span class="hn-alert-icon">✕</span>
<div class="hn-alert-content">
<h5 class="hn-alert-title">出错了！</h5>
<p class="hn-alert-description">
你的账户余额使用权限在关天后到期，请及时提进行申请续。如有问题，请联系相关人员。
</p>
</div>
<div class="hn-alert-action">
<button class="hn-alert-close" @click="handleClose('error')">×</button>
</div>
</div>
</div>