/*!
* ============================================================================
* happiness.css —— 幸福宝（Happiness Box）全站统一 UI 规范
* ----------------------------------------------------------------------------
* 设计基准：首页 /index/index/index.html + /assets/css/index.css
* 包含内容：配色变量、布局栅格、边框圆角、阴影、图标、导航、卡片、按钮、
* 标签、表格、表单、分页等全部基础组件
*
* 使用方式：
* 1) 在页面 中引入（放在页面自有 CSS 之前）：
*
* 2) 页面 加上 hx-page 类：
*
* （带 hx-page 才会启用本文件里的统一导航外观，
* 旧页面没有加，因此完全不受影响）
*
* 图标规范：统一使用 Font Awesome 6
*
* 尺寸/颜色见「图标规范」章节
* ============================================================================
*/
/* ==========================================================================
1. 设计变量（配色 / 圆角 / 阴影 / 布局）
========================================================================== */
:root {
/* —— 主色 —— */
--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-light: rgba(37, 99, 235, .08);
--gradient: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
--gradient-hover: linear-gradient(135deg, #5a0eb3 0%, #1d6efd 100%);
--gradient-topbar: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* —— 语义色 —— */
--success: #2ecc71;
--success-deep: #10b981;
--warning: #ffa500;
--warning-deep: #f59e0b;
--danger: #ff4757;
--danger-deep: #ef4444;
--purple: #6a11cb;
--info: #12adff;
/* —— 文字 —— */
--text-primary: #1e293b;
--text-title: #2c3e50;
--text-secondary: #64748b;
--text-muted: #7f8c8d;
--text-light: #94a3b8;
/* —— 背景 / 边框 —— */
--bg-body: #f1f5f9;
--bg-header: #ffffff;
--bg-soft: #f8fafc;
--bg-hover: #f1f5f9;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
--border-strong: #cbd5e1;
/* —— 圆角 —— */
--radius-sm: 4px;
--radius: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 20px;
--radius-circle: 50%;
/* —— 阴影 —— */
--shadow-card: 0 8px 24px rgba(0, 0, 0, .08);
--shadow-soft: 0 2px 8px rgba(0, 0, 0, .04);
--shadow-pop: 0 10px 40px rgba(0, 0, 0, .15);
--shadow-hover: 0 8px 20px rgba(106, 17, 203, .3);
/* —— 布局 —— */
--container: 1400px;
--header-max: 1800px;
--nav-height: 56px;
}
/* ==========================================================================
2. 基础重置与排版
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background: var(--bg-body);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
a {
color: var(--primary);
text-decoration: none;
transition: color .2s ease;
}
a:hover {
color: var(--primary-hover);
}
img {
max-width: 100%;
vertical-align: middle;
}
/* ==========================================================================
3. 布局：容器与主内容栅格
========================================================================== */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
/* 主内容：左内容 + 右侧栏（7 : 2） */
.main-content {
display: grid;
grid-template-columns: 7fr 2fr;
gap: 30px;
margin-bottom: 20px;
align-items: start;
}
.content {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
/* ==========================================================================
4. 顶部信息条 topbar
========================================================================== */
.topbar {
position: relative;
/* 必须高于下方 header / 导航，否则语言、地区下拉菜单会被盖住 */
z-index: 1200;
width: 100%;
background: var(--gradient-topbar);
font-size: 12px;
}
.topbar-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
/* 允许换行：窄屏时左右两组分开排，避免互相挤在一起 */
flex-wrap: wrap;
gap: 4px 10px;
min-height: 35px;
position: relative;
}
.topbar-left,
.topbar-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px;
min-width: 0;
}
.topbar-location {
color: #fff;
cursor: pointer;
font-weight: 500;
opacity: .95;
}
.topbar-location i {
margin-right: 5px;
}
.topbar-link {
color: rgba(255, 255, 255, .9);
text-decoration: none;
padding: 5px 10px;
border-radius: var(--radius-sm);
transition: all .2s;
font-size: 12px;
}
.topbar-link:hover {
color: #fff;
background: rgba(255, 255, 255, .2);
}
.topbar-link.highlight {
color: #ffd700;
font-weight: 600;
}
.topbar-link.highlight:hover {
background: rgba(255, 215, 0, .2);
}
.topbar-link i {
margin-right: 4px;
}
.topbar-divider {
color: rgba(255, 255, 255, .4);
margin: 0 3px;
}
/* 语言切换器 */
.language-switcher {
position: relative;
z-index: 1000;
}
.language-btn {
color: rgba(255, 255, 255, .9);
cursor: pointer;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .1);
display: flex;
align-items: center;
gap: 6px;
transition: all .2s;
font-size: 12px;
}
.language-btn:hover {
background: rgba(255, 255, 255, .25);
color: #fff;
}
.language-btn i {
font-size: 11px;
}
.language-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
min-width: 120px;
padding: 8px 0;
margin-top: 5px;
}
.language-menu.show {
display: block;
animation: fadeIn .2s ease;
}
.language-item {
position: relative;
color: #333;
padding: 8px 16px 8px 32px;
cursor: pointer;
transition: all .15s;
font-size: 13px;
white-space: nowrap;
}
.language-item:hover,
.language-item.active {
background: #f0f4ff;
color: #667eea;
}
.language-item.active {
font-weight: 500;
}
/* 选中项前面显示 √（与地区切换器一致） */
.language-item.active::before {
content: "√";
position: absolute;
left: 14px;
color: #667eea;
font-weight: bold;
}
.language-divider {
height: 1px;
background: #eee;
margin: 6px 0;
}
/* 地区切换器（与语言切换器共用风格） */
.location-switcher {
position: relative;
z-index: 1000;
}
.location-btn {
color: rgba(255, 255, 255, .9);
cursor: pointer;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .1);
display: flex;
align-items: center;
gap: 6px;
transition: all .2s;
font-size: 12px;
}
.location-btn:hover {
background: rgba(255, 255, 255, .25);
color: #fff;
}
.location-btn i {
font-size: 11px;
}
.location-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 170px;
max-height: 400px;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
padding: 8px 0;
margin-top: 5px;
}
.location-menu.show {
display: block;
animation: fadeIn .2s ease;
}
/* 细滚动条，避免长国家列表出现粗条 */
.location-menu::-webkit-scrollbar {
width: 6px;
}
.location-menu::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .15);
border-radius: 3px;
}
.location-item {
position: relative;
color: #333;
padding: 8px 16px 8px 32px;
cursor: pointer;
transition: all .15s;
font-size: 13px;
white-space: nowrap;
}
.location-item:hover,
.location-item.active {
background: #f0f4ff;
color: #667eea;
}
.location-item.active {
font-weight: 500;
}
/* 选中项前面显示 √ */
.location-item.active::before {
content: "√";
position: absolute;
left: 14px;
color: #667eea;
font-weight: bold;
}
.location-divider {
height: 1px;
background: #eee;
margin: 6px 0;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
5. 站点头部 header（Logo / 工具栏 / 用户信息）
========================================================================== */
header {
width: 100%;
background: var(--bg-header);
border-bottom: 1px solid var(--border-color);
}
.header-inner {
max-width: var(--header-max);
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}
.logo-section {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 120px;
height: 120px;
background: var(--primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
overflow: hidden;
margin-top: 25px;
margin-left: 10px;
}
.logo-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.logo-text {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
/* 右上角工具栏 */
.tools-section {
display: flex;
align-items: center;
gap: 4px;
}
.tool-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--radius);
color: var(--text-secondary);
cursor: pointer;
transition: all .2s ease;
position: relative;
}
.tool-btn:hover {
background: var(--bg-hover);
color: var(--primary);
}
.tool-btn.has-badge::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--danger-deep);
border-radius: var(--radius-circle);
}
/* 用户信息 */
.user-section {
display: flex;
align-items: center;
gap: 12px;
margin-left: 12px;
padding-left: 12px;
border-left: 1px solid var(--border-color);
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-circle);
background: var(--gradient-topbar);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.user-role {
font-size: 11px;
color: var(--text-light);
}
/* ==========================================================================
6. 主导航（统一规范）★
--------------------------------------------------------------------------
结构由 application/index/view/common/nav.html 输出（hxnav* 类名），
外观在带 .hx-page 的页面上生效（首页 + 以后新建的页面）。
设计取自首页 .nav-section / .nav-item：
白底 + 通栏 + 56px 高 + 底部 2px 主色下划线高亮 + 浅灰 hover
========================================================================== */
.hx-page .hxnav-wrap {
max-width: none;
margin: 0 0 24px;
padding: 0;
}
.hx-page .hxnav {
display: flex;
align-items: center;
gap: 8px;
height: var(--nav-height);
padding: 0 8px;
background: var(--bg-header);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hx-page .hxnav::-webkit-scrollbar {
height: 0;
}
.hx-page .hxnav-item {
display: flex;
align-items: center;
gap: 8px;
height: 100%;
padding: 0 16px;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hx-page .hxnav-item i {
font-size: 14px;
opacity: 1;
}
.hx-page .hxnav-item:hover {
background: var(--bg-soft);
color: var(--primary);
border-bottom-color: transparent;
transform: none;
}
.hx-page .hxnav-item.active {
background: var(--primary-light);
color: var(--primary);
border-bottom-color: var(--primary);
box-shadow: none;
}
.hx-page .hxnav-spacer {
flex: 1 1 auto;
min-width: 6px;
}
.hx-page .hxnav-back {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: #fff;
color: #475569;
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: all .2s ease;
}
.hx-page .hxnav-back:hover {
background: var(--bg-hover);
border-color: var(--border-strong);
color: var(--primary);
}
/* ==========================================================================
7. 卡片
========================================================================== */
.card {
background: #fff;
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow-card);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: var(--text-title);
}
.card-actions {
display: flex;
gap: 12px;
}
.card-action {
color: var(--text-muted);
cursor: pointer;
transition: color .3s;
}
.card-action:hover {
color: #2575fc;
}
/* 发布项目按钮：带背景色的主操作按钮效果 */
.card-action.btn-publish {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
font-size: 13px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(37, 117, 252, .25);
transition: transform .2s, box-shadow .2s, background .3s;
}
.card-action.btn-publish:hover {
color: #fff;
background: linear-gradient(135deg, #7a1fd6 0%, #3a86ff 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(37, 117, 252, .35);
}
/* 侧栏卡片 */
.sidebar {
background: #fff;
border-radius: var(--radius-md);
padding: 24px;
box-shadow: var(--shadow-card);
}
.sidebar-title {
font-size: 18px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f3f8;
color: var(--text-title);
}
.sidebar-menu {
list-style: none;
}
.sidebar-menu li {
margin-bottom: 12px;
}
.sidebar-menu a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #5e697c;
padding: 10px 14px;
border-radius: var(--radius-md);
transition: all .3s ease;
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
background: var(--info);
color: #fff;
border-radius: var(--radius-sm);
}
.sidebar-menu i {
width: 20px;
text-align: center;
}
/* ==========================================================================
8. 数据统计卡
========================================================================== */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stat-card {
background: #fff;
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 20px;
}
.icon-red { background: rgba(255, 71, 87, .15); color: var(--danger); }
.icon-purple { background: rgba(106, 17, 203, .15); color: var(--purple); }
.icon-green { background: rgba(46, 204, 113, .15); color: var(--success); }
.icon-orange { background: rgba(255, 165, 0, .15); color: var(--warning); }
.icon-blue { background: rgba(37, 99, 235, .12); color: var(--primary); }
.icon-teal { background: rgba(0, 210, 211, .15); color: #00b8b8; }
.icon-pink { background: rgba(255, 107, 129, .15); color: #ff6b81; }
.icon-gold { background: rgba(255, 193, 7, .15); color: #e0a800; }
.stat-value {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-label {
color: var(--text-muted);
font-size: 14px;
}
/* ==========================================================================
9. 按钮
========================================================================== */
.btn {
padding: 10px 20px;
border-radius: var(--radius-md);
border: none;
font-weight: 600;
cursor: pointer;
transition: all .3s ease;
}
.btn-primary {
background: var(--gradient);
color: #fff;
}
.btn-outline {
background: transparent;
border: 1px solid var(--purple);
color: var(--purple);
}
.btn-danger {
background: var(--danger-deep);
color: #fff;
}
.btn-success {
background: var(--success-deep);
color: #fff;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.btn-sm {
padding: 6px 14px;
font-size: 13px;
}
/* ==========================================================================
10. 标签 / 徽章 / 进度条
========================================================================== */
.project-tag {
padding: 4px 10px;
background: var(--gradient);
color: #fff;
border-radius: var(--radius-lg);
font-size: 11px;
font-weight: 500;
}
.project-tag.ongoing { background: linear-gradient(135deg, #2575fc, #1d6efd); }
.project-tag.pending { background: linear-gradient(135deg, #ffa500, #ff8c00); }
.project-tag.completed { background: linear-gradient(135deg, #2ecc71, #10b981); }
.project-tag.ended,
.project-tag.offline { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }
.project-tag-item {
padding: 3px 8px;
border: 1px solid;
border-radius: var(--radius-lg);
font-size: 12px;
background: transparent;
}
.project-progress {
margin-bottom: 12px;
}
.progress-bar {
height: 8px;
background: #e8ecef;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 6px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #6a11cb, #2575fc);
border-radius: var(--radius-sm);
transition: width .5s ease;
}
.progress-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-muted);
}
.progress-info .amount {
color: var(--danger);
font-weight: 600;
}
/* ==========================================================================
11. 筛选标签页
========================================================================== */
.filter-tabs {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.filter-tab {
padding: 8px 20px;
border-radius: var(--radius-pill);
background: var(--bg-hover);
color: #5e697c;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all .3s ease;
border: none;
}
.filter-tab:hover {
background: #e8ecef;
}
.filter-tab.active {
background: var(--gradient);
color: #fff;
}
/* ==========================================================================
12. 列表：排行 / 热门 / 分类 / 新闻
========================================================================== */
.ranking-list,
.hot-list,
.news-list,
.topic-list,
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.ranking-item,
.category-item,
.hot-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-md);
background: #f9fafc;
transition: all .3s ease;
}
.ranking-item:hover,
.category-item:hover,
.hot-item:hover {
background: #f0f5ff;
}
.category-item {
justify-content: space-between;
padding: 12px 16px;
text-decoration: none;
color: var(--text-title);
}
.category-item:hover {
transform: translateX(4px);
}
.category-item .name {
font-weight: 500;
}
.category-item .count {
background: var(--gradient);
color: #fff;
padding: 2px 10px;
border-radius: var(--radius-lg);
font-size: 12px;
font-weight: 600;
}
.ranking-rank {
width: 24px;
height: 24px;
border-radius: var(--radius);
background: #e0e0e0;
color: #666;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.ranking-rank.top,
.hot-rank.top {
background: linear-gradient(135deg, #ffa500, #ff8c00);
color: #fff;
}
.ranking-title {
flex: 1;
font-size: 13px;
color: var(--text-title);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ranking-value {
font-size: 12px;
color: var(--danger);
font-weight: 600;
flex-shrink: 0;
}
.hot-rank {
width: 28px;
height: 28px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, #ff4757, #ff6b81);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.hot-info { flex: 1; }
.hot-title { font-size: 14px; font-weight: 600; color: var(--text-title); margin-bottom: 4px; }
.hot-amount { font-size: 13px; color: var(--danger); font-weight: 600; }
.news-list li {
padding: 8px 10px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: background .2s;
border-radius: var(--radius);
}
.news-list li:hover { background: var(--bg-soft); }
.news-list li:last-child { border-bottom: none; }
.news-dot {
width: 8px;
height: 8px;
background: var(--primary);
border-radius: var(--radius-circle);
flex-shrink: 0;
}
.news-list li span:not(.news-dot) {
font-size: 13px;
color: #475569;
line-height: 1.4;
}
.topic-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
border-radius: var(--radius);
cursor: pointer;
transition: background .2s;
}
.topic-list li:hover { background: var(--bg-soft); }
.topic-rank {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-hover);
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.topic-list li:first-child .topic-rank { background: linear-gradient(135deg, #ef4444, #f87171); color: #fff; }
.topic-list li:nth-child(2) .topic-rank { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; }
.topic-list li:nth-child(3) .topic-rank { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; }
.topic-name {
font-size: 13px;
color: #475569;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-sm);
border: 1px solid;
display: inline-block;
}
.topic-value {
font-size: 13px;
font-weight: 600;
color: var(--danger-deep);
margin-left: auto;
white-space: nowrap;
}
/* 快捷操作按钮组 */
.quick-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px;
border: none;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
color: #475569;
cursor: pointer;
transition: all .3s ease;
font-size: 14px;
font-weight: 500;
}
.action-btn:hover {
background: var(--gradient);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.action-btn i {
font-size: 24px;
}
/* ==========================================================================
13. 项目卡片网格
========================================================================== */
.project-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.project-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-md);
background: #f9fafc;
overflow: hidden;
transition: all .3s ease;
border-left: 3px solid transparent;
}
.project-card:hover {
background: #f0f5ff;
border-left-color: #2575fc;
transform: translateX(4px);
}
.project-card.project-disabled {
opacity: .6;
filter: grayscale(60%);
}
.project-card.project-disabled:hover {
background: #f9fafc;
border-left-color: transparent;
transform: none;
}
.project-cover {
width: 100%;
height: 160px;
object-fit: cover;
}
.project-body {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.project-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-title); }
.project-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; flex: 1; }
.project-meta {
display: flex;
gap: 16px;
font-size: 12px;
color: #95a5a6;
margin-bottom: 12px;
}
.project-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.project-tags-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.project-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid #e8ecef;
}
.project-author {
display: flex;
align-items: center;
gap: 8px;
}
.author-avatar {
width: 30px;
height: 30px;
border-radius: var(--radius-circle);
background: var(--gradient);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.author-name {
font-size: 13px;
color: #5e697c;
}
.project-tags {
display: flex;
gap: 8px;
}
/* ==========================================================================
14. 表格
========================================================================== */
.hx-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
}
.hx-table th,
.hx-table td {
padding: 12px 16px;
text-align: left;
font-size: 13px;
border-bottom: 1px solid var(--border-light);
}
.hx-table th {
background: var(--bg-soft);
color: var(--text-secondary);
font-weight: 600;
white-space: nowrap;
border-bottom: 1px solid var(--border-color);
}
.hx-table tbody tr {
transition: background .2s ease;
}
.hx-table tbody tr:hover {
background: #f8fafc;
}
.hx-table tbody tr:last-child td {
border-bottom: none;
}
/* ==========================================================================
15. 表单
========================================================================== */
.hx-form-item {
margin-bottom: 18px;
}
.hx-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-title);
margin-bottom: 8px;
}
.hx-label .required {
color: var(--danger);
margin-left: 4px;
}
.hx-input,
.hx-select,
.hx-textarea {
width: 100%;
padding: 10px 12px;
font-size: 14px;
color: var(--text-primary);
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: border-color .2s ease, box-shadow .2s ease;
}
.hx-input:focus,
.hx-select:focus,
.hx-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-light);
}
.hx-input::placeholder,
.hx-textarea::placeholder {
color: var(--text-light);
}
.hx-textarea {
min-height: 100px;
resize: vertical;
}
.hx-help {
font-size: 12px;
color: var(--text-light);
margin-top: 6px;
}
/* ==========================================================================
16. 面包屑 / 分页 / 空状态 / 提示条
========================================================================== */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
margin-bottom: 24px;
font-size: 14px;
color: var(--text-muted);
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
.breadcrumb a {
color: var(--text-muted);
}
.breadcrumb a:hover {
color: #2575fc;
}
.breadcrumb .current {
color: var(--text-title);
font-weight: 500;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px 0;
list-style: none;
}
.pagination li a,
.pagination li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
font-size: 13px;
color: var(--text-secondary);
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: all .2s ease;
}
.pagination li a:hover {
color: var(--primary);
border-color: var(--primary);
}
.pagination li.active span {
color: #fff;
background: var(--gradient);
border-color: transparent;
}
.pagination li.disabled span {
color: var(--text-light);
background: var(--bg-soft);
cursor: not-allowed;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-state i {
font-size: 48px;
margin-bottom: 16px;
color: #d1d5db;
}
.empty-state p {
margin-bottom: 20px;
}
.hx-alert {
padding: 12px 16px;
border-radius: var(--radius);
font-size: 13px;
border: 1px solid;
margin-bottom: 16px;
}
.hx-alert-info { background: var(--primary-light); border-color: rgba(37, 99, 235, .25); color: var(--primary-hover); }
.hx-alert-success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .25); color: #047857; }
.hx-alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .28); color: #b45309; }
.hx-alert-danger { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .25); color: #b91c1c; }
/* ==========================================================================
17. 图片展示区 / 返回顶部
========================================================================== */
.gallery-section {
background: #f8f9fa;
padding: 20px;
margin-top: 20px;
}
.gallery-container {
max-width: var(--container);
margin: 0 auto;
}
.gallery-grid {
display: flex;
justify-content: space-around;
gap: 12px;
align-items: center;
}
.gallery-item {
flex: 1;
max-width: 150px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.gallery-img {
width: 100%;
height: auto;
display: block;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--gradient);
color: #fff;
border: none;
border-radius: var(--radius-circle);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(106, 17, 203, .4);
transition: all .3s ease;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(106, 17, 203, .5);
}
/* ==========================================================================
18. 页脚
========================================================================== */
.footer {
background: #fff;
margin-top: 40px;
padding: 40px 0;
border-top: 1px solid #e8eef5;
}
.footer-service {
padding: 30px 0;
margin-bottom: 30px;
}
.service-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.service-item {
display: flex;
align-items: center;
gap: 15px;
}
.service-icon {
width: 45px;
height: 45px;
background: rgba(102, 126, 234, .08);
border: 1px solid rgba(102, 126, 234, .2);
border-radius: var(--radius-circle);
display: flex;
align-items: center;
justify-content: center;
color: #667eea;
font-size: 20px;
transition: all .3s ease;
}
.service-item:hover .service-icon {
background: rgba(102, 126, 234, .15);
border-color: #667eea;
box-shadow: 0 0 20px rgba(102, 126, 234, .3);
}
.service-text h4 {
color: #333;
font-size: 15px;
margin: 0 0 5px;
font-weight: 500;
}
.service-text p {
color: #999;
font-size: 13px;
margin: 0;
}
.footer-nav {
max-width: 1200px;
margin: 0 auto;
padding: 0 0 30px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
border-bottom: 1px solid #f0f4f8;
}
.footer-nav-col {
min-width: 120px;
}
.footer-nav-col h4 {
font-size: 14px;
color: #667eea;
margin-bottom: 15px;
font-weight: 600;
letter-spacing: 1px;
}
.footer-nav-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav-col ul li {
margin-bottom: 10px;
}
.footer-nav-col ul li a {
font-size: 13px;
color: #666;
text-decoration: none;
transition: all .3s ease;
display: inline-block;
}
.footer-nav-col ul li a:hover {
color: #667eea;
text-shadow: 0 0 8px rgba(102, 126, 234, .5);
transform: translateX(3px);
}
.footer-contact {
min-width: 150px;
text-align: center;
}
.footer-phone {
font-size: 18px;
color: #667eea;
font-weight: 600;
margin-bottom: 8px;
}
.footer-time {
font-size: 13px;
color: #999;
margin-bottom: 15px;
}
.footer-copyright {
padding: 20px 0;
text-align: center;
background: #f8fafc;
}
.footer-copyright p {
font-size: 13px;
color: #999;
margin: 0;
}
/* ==========================================================================
18.1 暗色页脚（首页 footer-dark，仿图片效果）
-------------------------------------------------------------------------- */
.footer-dark {
background: #111418;
border-top: 1px solid rgba(255, 255, 255, .06);
color: #b5bcc6;
padding: 0;
}
.footer-dark .footer-service {
padding: 28px 0;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.footer-dark .service-inner {
justify-content: space-between;
}
.footer-dark .service-item {
gap: 14px;
}
.footer-dark .service-icon {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1);
color: #8ab4ff;
}
.footer-dark .service-item:hover .service-icon {
background: rgba(138, 180, 255, .12);
border-color: #8ab4ff;
box-shadow: 0 0 18px rgba(138, 180, 255, .35);
}
.footer-dark .service-text h4 {
color: #f1f3f5;
}
.footer-dark .service-text p {
color: #8b929c;
}
.footer-dark .footer-main {
max-width: 1200px;
margin: 0 auto;
padding: 44px 0 32px;
display: grid;
grid-template-columns: 1.2fr 2fr;
gap: 40px;
}
.footer-dark .footer-brand {
max-width: 340px;
}
.footer-dark .footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
margin-bottom: 16px;
}
.footer-dark .footer-logo-mark {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #5b8cff, #7c5cff);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
}
.footer-dark .footer-logo-name {
color: #fff;
font-size: 18px;
font-weight: 700;
letter-spacing: .5px;
}
.footer-dark .footer-desc {
font-size: 13px;
color: #8b929c;
line-height: 1.7;
margin: 0 0 18px;
}
.footer-dark .footer-contact-inline {
margin-bottom: 16px;
}
.footer-dark .footer-phone {
font-size: 20px;
color: #fff;
font-weight: 700;
margin-bottom: 4px;
}
.footer-dark .footer-time {
font-size: 13px;
color: #8b929c;
}
.footer-dark .footer-social {
display: flex;
gap: 12px;
}
.footer-dark .footer-social a {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .1);
color: #b5bcc6;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
}
.footer-dark .footer-social a:hover {
background: #5b8cff;
border-color: #5b8cff;
color: #fff;
}
.footer-dark .footer-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.footer-dark .footer-nav-col {
min-width: 0;
}
.footer-dark .footer-nav-col h4 {
font-size: 13px;
color: #fff;
margin-bottom: 16px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
}
.footer-dark .footer-nav-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-dark .footer-nav-col ul li {
margin-bottom: 10px;
}
.footer-dark .footer-nav-col ul li a {
font-size: 13px;
color: #8b929c;
text-decoration: none;
transition: color .3s ease;
}
.footer-dark .footer-nav-col ul li a:hover {
color: #8ab4ff;
}
.footer-dark .footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, .06);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.footer-dark .footer-copy {
font-size: 12px;
color: #7c828c;
margin: 0;
text-align: left;
background: transparent;
padding: 0;
}
.footer-dark .footer-tagline {
font-size: 12px;
color: #7c828c;
margin: 0;
}
@media (max-width: 768px) {
.footer-dark .footer-main {
grid-template-columns: 1fr;
gap: 28px;
}
.footer-dark .footer-links {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.footer-dark .footer-bottom {
flex-direction: column;
text-align: center;
}
}
/* ==========================================================================
19. 图标规范
--------------------------------------------------------------------------
统一使用 Font Awesome 6 的 fa 前缀（本地文件：/assets/libs/font-awesome6）
基础图标，跟随父级字号
常用尺寸：.hx-i-sm 12px / 默认 14px / .hx-i-md 16px / .hx-i-lg 20px
常用色 ：.hx-i-primary / -muted / -danger / -success / -warning
卡片标题图标建议与文字间距 8px（卡片标题已内置 mr-2 图标间距）
========================================================================== */
.hx-i-sm { font-size: 12px; }
.hx-i-md { font-size: 16px; }
.hx-i-lg { font-size: 20px; }
.hx-i-2x { font-size: 24px; }
.hx-i-primary { color: var(--primary); }
.hx-i-muted { color: var(--text-muted); }
.hx-i-light { color: var(--text-light); }
.hx-i-danger { color: var(--danger); }
.hx-i-success { color: var(--success-deep); }
.hx-i-warning { color: var(--warning); }
.hx-i-purple { color: var(--purple); }
.hx-i-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--primary-light);
color: var(--primary);
font-size: 16px;
flex-shrink: 0;
}
/* 图标与文字的标准间距 */
.mr-2 { margin-right: 8px; }
.ml-2 { margin-left: 8px; }
/* ==========================================================================
20. 通用工具类
========================================================================== */
.hx-flex { display: flex; align-items: center; }
.hx-flex-between { display: flex; align-items: center; justify-content: space-between; }
.hx-gap-sm { gap: 8px; }
.hx-gap { gap: 12px; }
.hx-gap-lg { gap: 20px; }
.hx-mb-0 { margin-bottom: 0; }
.hx-mb-sm { margin-bottom: 8px; }
.hx-mb { margin-bottom: 16px; }
.hx-mb-lg { margin-bottom: 24px; }
.hx-mt { margin-top: 16px; }
.hx-mt-lg { margin-top: 30px; }
.hx-text-muted { color: var(--text-muted); }
.hx-text-primary { color: var(--primary); }
.hx-text-danger { color: var(--danger); }
.hx-text-success { color: var(--success-deep); }
.hx-text-sm { font-size: 13px; }
.hx-text-xs { font-size: 12px; }
.hx-text-bold { font-weight: 600; }
.hx-text-center { text-align: center; }
.hx-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hx-divider {
height: 1px;
background: var(--border-color);
margin: 16px 0;
border: none;
}
/* ==========================================================================
21. 响应式
========================================================================== */
@media (max-width: 1200px) {
.main-content {
grid-template-columns: 1fr;
gap: 24px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.container {
padding: 0 12px;
}
.logo-icon {
width: 64px;
height: 64px;
margin-top: 10px;
margin-left: 0;
}
.logo-text {
font-size: 17px;
}
/* 导航：移动端保留图标，压缩文字 */
.hx-page .hxnav {
height: 48px;
padding: 0 4px;
gap: 2px;
border-radius: var(--radius);
}
.hx-page .hxnav-item {
padding: 0 10px;
font-size: 13px;
gap: 6px;
}
.hx-page .hxnav-item i {
font-size: 13px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.project-grid {
grid-template-columns: 1fr;
}
.quick-actions {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid {
flex-wrap: wrap;
}
.gallery-item {
max-width: calc(50% - 6px);
}
.footer-nav,
.service-inner {
flex-direction: column;
gap: 18px;
}
}
@media (max-width: 480px) {
.hx-page .hxnav-item span {
display: none;
}
.hx-page .hxnav-item.active span {
display: inline;
}
.hx-page .hxnav-back span {
display: none;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
22. 首页增强（借鉴 Arcfun：Hero 主张前置 + 三步原理卡 + 卡片微交互）
--------------------------------------------------------------------------
配色沿用全站紫色系 #667eea → #764ba2，与 topbar / 进度条一致
========================================================================== */
/* —— Hero 主张区 —— */
.hx-hero {
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: var(--radius-lg);
padding: 56px 48px;
margin-bottom: 24px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(102, 126, 234, .25);
}
.hx-hero::after {
content: "";
position: absolute;
right: -70px;
top: -70px;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hx-hero-inner {
position: relative;
z-index: 1;
max-width: 780px;
}
.hx-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #fff;
background: rgba(255, 255, 255, .16);
padding: 6px 14px;
border-radius: 20px;
margin-bottom: 18px;
}
.hx-hero-title {
font-size: 36px;
font-weight: 800;
color: #fff;
line-height: 1.3;
margin: 0 0 16px;
text-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.hx-hero-sub {
font-size: 16px;
color: rgba(255, 255, 255, .9);
line-height: 1.7;
margin: 0 0 28px;
}
.hx-hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.hx-hero-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .25s ease;
}
.hx-hero-btn-primary {
background: #fff;
color: #5a4bdc;
box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}
.hx-hero-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}
.hx-hero-btn-ghost {
background: rgba(255, 255, 255, .12);
color: #fff;
border: 1px solid rgba(255, 255, 255, .5);
}
.hx-hero-btn-ghost:hover {
background: rgba(255, 255, 255, .22);
transform: translateY(-2px);
}
.hx-hero-feats {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.hx-hero-feats span {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: rgba(255, 255, 255, .92);
}
.hx-hero-feats i {
color: #ffd700;
}
/* —— 三步原理卡（How it works） —— */
.hx-steps {
margin-bottom: 24px;
}
.hx-steps-inner {
max-width: var(--container);
margin: 0 auto;
}
.hx-section-h2 {
font-size: 22px;
font-weight: 700;
color: var(--text-title);
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 10px;
}
.hx-section-h2 i {
color: #667eea;
}
.hx-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.hx-step-card {
position: relative;
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 28px 24px 24px;
box-shadow: var(--shadow-card);
transition: all .25s ease;
overflow: hidden;
}
.hx-step-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #667eea, #764ba2);
opacity: 0;
transition: opacity .25s;
}
.hx-step-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(102, 126, 234, .18);
border-color: #c7cdfb;
}
.hx-step-card:hover::before {
opacity: 1;
}
.hx-step-no {
position: absolute;
right: 16px;
top: 12px;
font-size: 42px;
font-weight: 800;
color: rgba(102, 126, 234, .12);
line-height: 1;
}
.hx-step-icon {
width: 54px;
height: 54px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
font-size: 22px;
margin-bottom: 16px;
box-shadow: 0 8px 18px rgba(102, 126, 234, .3);
}
.hx-step-card h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-title);
margin: 0 0 8px;
}
.hx-step-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
/* —— 卡片微交互增强：抬升 + 主色阴影（覆盖默认 translateX） —— */
.hx-page .project-card {
border-left: 3px solid transparent;
}
.hx-page .project-card:hover {
background: #fff;
border-left-color: #667eea;
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(102, 126, 234, .16);
}
.hx-page .project-card.project-disabled:hover {
background: #f9fafc;
border-left-color: transparent;
transform: none;
box-shadow: none;
}
.hx-page .news-card {
transition: transform .25s ease, box-shadow .25s ease;
}
.hx-page .news-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}
.hx-page .shared-search-card {
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hx-page .shared-search-card:hover {
transform: translateY(-4px);
border-color: #cdbff5;
box-shadow: 0 14px 30px rgba(106, 17, 203, .16);
}
/* —— 响应式 —— */
@media (max-width: 768px) {
.hx-hero {
padding: 36px 22px;
}
.hx-hero-title {
font-size: 26px;
}
.hx-steps-grid {
grid-template-columns: 1fr;
}
}