feat(界面): 添加KIRO账号购买链接及样式

在控制台头部添加KIRO账号购买链接,并为其设计渐变背景和悬停效果
This commit is contained in:
hex2077 2026-01-08 13:45:34 +08:00
parent c84ac7df3f
commit e5255a4972
2 changed files with 33 additions and 0 deletions

View file

@ -394,6 +394,36 @@ body {
transition: transform 0.3s ease;
}
/* KIRO 购买链接 */
.kiro-buy-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, var(--warning-color) 0%, #f97316 100%);
color: var(--white);
text-decoration: none;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 2px 8px var(--warning-30);
}
.kiro-buy-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--warning-40);
background: linear-gradient(135deg, #f97316 0%, var(--warning-color) 100%);
}
.kiro-buy-link:active {
transform: translateY(0);
}
.kiro-buy-link i {
font-size: 0.875rem;
}
/* 高亮说明样式 */
.highlight-note {
display: inline-flex;

View file

@ -17,6 +17,9 @@
<div class="header-content">
<h1><i class="fas fa-robot"></i> <span class="header-title" data-i18n="header.title">AIClient2API 管理控制台</span></h1>
<div class="header-controls">
<a href="https://pay.ldxp.cn/shop/N0IK02WR" target="_blank" rel="noopener noreferrer" class="kiro-buy-link" title="KIRO账号购买">
<i class="fas fa-shopping-cart"></i> <span>KIRO账号购买</span>
</a>
<span class="status-badge" id="serverStatus">
<i class="fas fa-circle"></i> <span class="status-text" data-i18n="header.status.connecting">连接中...</span>
</span>