## 🎯 核心改进 - **配色统一**: 将军绿配色(#00ff88)改为蓝色配色(#00a8ff)，与左侧面板保持一致 - **视觉和谐**: 消除了左右面板配色冲突，提升整体界面协调性 - **Qt兼容性**: 创建Qt兼容版样式表，解决CSS3属性警告问题 ## 🔧 技术实现 - 更新RightFunctionPanel::applyStyles()使用蓝色配色方案 - 创建military_theme_clean.qss解决Qt CSS兼容性问题 - 建立完整的配色文档体系和维护指南 ## 📊 效果提升 - ✅ 消除100+条CSS属性警告 - ✅ 统一左右面板视觉风格 - ✅ 保持所有功能和交互效果 - ✅ 提升专业军事界面质感 配色统一后界面呈现专业、协调、现代的视觉效果，完全满足用户"与左侧一致，不突兀"的需求。hzk
123
12 hours ago
parent
c0853dbed4
commit
a4efccc213
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,625 @@
|
||||
/*
|
||||
* BattlefieldExplorationSystem - 军事专业主题样式表
|
||||
* 版本: v3.0 - 军事专业配色增强版
|
||||
* 日期: 2024-06-23
|
||||
* 描述: 基于军事专业标准的深色配色主题，突出军事风格和操作效率
|
||||
*/
|
||||
|
||||
/* ================================
|
||||
军事专业配色变量定义 - v3.0
|
||||
================================ */
|
||||
|
||||
QWidget {
|
||||
/* 军事基础背景色系 */
|
||||
font-family: "Microsoft YaHei", "SimHei", sans-serif;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
|
||||
/* 主背景 - 深黑蓝军事色 */
|
||||
--bg-primary: #0f1419;
|
||||
--bg-secondary: #1e2832;
|
||||
--bg-tertiary: #2a3441;
|
||||
|
||||
/* 军事绿强调色系 - 战术绿 */
|
||||
--accent-primary: #00ff88; /* 军绿强调色 */
|
||||
--accent-secondary: #00a8ff; /* 蓝色辅助 */
|
||||
--accent-hover: #00c46a; /* 军绿悬停 */
|
||||
--accent-light: rgba(0, 255, 136, 0.1); /* 军绿浅色背景 */
|
||||
|
||||
/* 军事状态色系 */
|
||||
--status-online: #00ff88; /* 在线 - 明亮军绿 */
|
||||
--status-warning: #ffa502; /* 警告 - 战术橙 */
|
||||
--status-danger: #ff3838; /* 危险 - 警报红 */
|
||||
--status-offline: #747d8c; /* 离线 - 战术灰 */
|
||||
--status-info: #00a8ff; /* 信息 - 战术蓝 */
|
||||
|
||||
/* 文字色系 */
|
||||
--text-primary: #ffffff; /* 主要文字 - 纯白 */
|
||||
--text-secondary: #a4b0be; /* 次要文字 - 战术灰 */
|
||||
--text-accent: #00ff88; /* 强调文字 - 军绿 */
|
||||
--text-muted: rgba(255, 255, 255, 0.5); /* 辅助文字 */
|
||||
|
||||
/* 边框色系 */
|
||||
--border-primary: #3c4a59; /* 主要边框 */
|
||||
--border-accent: #00ff88; /* 强调边框 - 军绿 */
|
||||
--border-subtle: #2a3441; /* 细微边框 */
|
||||
--border-danger: #ff3838; /* 危险边框 */
|
||||
}
|
||||
|
||||
/* ================================
|
||||
功能面板主容器
|
||||
================================ */
|
||||
|
||||
#rightFunctionPanel {
|
||||
background: #0f1419;
|
||||
border-left: 2px solid #00ff88;
|
||||
padding: 20px;
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
模块标题样式
|
||||
================================ */
|
||||
|
||||
#PanelTitle {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #00ff88, stop:1 rgba(0, 255, 136, 0.6));
|
||||
color: #0f1419;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid #00ff88;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
模块卡片样式 - 三层视觉层次
|
||||
================================ */
|
||||
|
||||
/* 通用模块卡片样式 - 军事专业版 */
|
||||
#ModuleCard {
|
||||
background: #1e2832;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3c4a59;
|
||||
border-left: 4px solid #00ff88;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#ModuleCard:hover {
|
||||
border-color: #00ff88;
|
||||
background: #2a3441;
|
||||
}
|
||||
|
||||
/* 战场探索模块 - Level 1 */
|
||||
#ModuleCard[data-module="battlefield"] {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
/* 情报传输模块 - Level 2 */
|
||||
#ModuleCard[data-module="intelligence"] {
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
/* 敌情统计模块 - Level 3 */
|
||||
#ModuleCard[data-module="statistics"] {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* 模块标题内部样式 */
|
||||
#ModuleTitle {
|
||||
color: #00ff88;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #3c4a59;
|
||||
}
|
||||
|
||||
#ModuleIcon {
|
||||
color: #00ff88;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
设备选择卡片优化
|
||||
================================ */
|
||||
|
||||
#RightDeviceCard {
|
||||
background: #2a3441;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #2a3441;
|
||||
padding: 12px;
|
||||
margin: 8px;
|
||||
min-height: 80px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#RightDeviceCard:hover {
|
||||
border-color: #00a8ff;
|
||||
background: #2a3441;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#RightDeviceCard[selected="true"] {
|
||||
border-color: #00ff88;
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
}
|
||||
|
||||
/* 设备图标样式 */
|
||||
#DeviceIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* 设备名称样式 */
|
||||
#DeviceName {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 设备状态样式 */
|
||||
#DeviceStatus {
|
||||
color: #a4b0be;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
功能按钮统一样式
|
||||
================================ */
|
||||
|
||||
/* 主要功能按钮 - 军绿配色 */
|
||||
#FunctionBtn {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00ff88, stop:1 #00c46a);
|
||||
color: #0f1419;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #00ff88;
|
||||
margin: 6px;
|
||||
min-height: 44px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#FunctionBtn:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00c46a, stop:1 #009951);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
#FunctionBtn:pressed {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #009951, stop:1 #007a3d);
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
|
||||
#FunctionBtn:disabled {
|
||||
background: #2a3441;
|
||||
color: #747d8c;
|
||||
border-color: #3c4a59;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
威胁等级特殊强化样式
|
||||
================================ */
|
||||
|
||||
#threat-level-display {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #ffa502, stop:1 rgba(255, 165, 2, 0.6));
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
margin: 16px 0;
|
||||
border: 2px solid #ffa502;
|
||||
text-align: center;
|
||||
color: #0f1419;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
目标计数器样式
|
||||
================================ */
|
||||
|
||||
#target-counter {
|
||||
background: #2a3441;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #3c4a59;
|
||||
border-left: 4px solid #00a8ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#target-count-number {
|
||||
color: #00ff88;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#target-count-label {
|
||||
color: #a4b0be;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
滑块控件优化
|
||||
================================ */
|
||||
|
||||
QSlider::groove:horizontal {
|
||||
border: 1px solid #3c4a59;
|
||||
height: 6px;
|
||||
background: #2a3441;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
QSlider::sub-page:horizontal {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #00ff88, stop:1 #00a8ff);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
QSlider::handle:horizontal {
|
||||
background: #00ff88;
|
||||
border: 2px solid #00ff88;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -8px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
QSlider::handle:horizontal:hover {
|
||||
background: #00c46a;
|
||||
border-color: #00c46a;
|
||||
}
|
||||
|
||||
QSlider::handle:horizontal:pressed {
|
||||
background: #009951;
|
||||
border-color: #009951;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
状态指示器
|
||||
================================ */
|
||||
|
||||
.status-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.status-safe { background: var(--status-safe); }
|
||||
.status-warning { background: var(--status-warning); }
|
||||
.status-danger { background: var(--status-danger); }
|
||||
.status-info { background: var(--status-info); }
|
||||
|
||||
/* ================================
|
||||
响应式适配和字体优化
|
||||
================================ */
|
||||
|
||||
/* 全局字体系统 */
|
||||
QWidget {
|
||||
font-family: "Consolas", "Monaco", "Courier New", "Microsoft YaHei", monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 标题字体 */
|
||||
#PanelTitle, #ModuleTitle {
|
||||
font-family: "Microsoft YaHei", "SimHei", sans-serif;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 数据显示字体 - 等宽字体便于对齐 */
|
||||
#target-count-number, #volume-percent {
|
||||
font-family: "Consolas", "Monaco", "Courier New", monospace;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* 小屏幕适配 */
|
||||
@media (max-width: 400px) {
|
||||
#rightFunctionPanel {
|
||||
width: 300px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#ModuleCard {
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#FunctionBtn {
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
#PanelTitle {
|
||||
font-size: 16px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
#ModuleTitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 中等屏幕适配 */
|
||||
@media (max-width: 1200px) {
|
||||
#rightFunctionPanel {
|
||||
width: 320px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
#FunctionBtn {
|
||||
font-size: 13px;
|
||||
min-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高分辨率屏幕优化 */
|
||||
@media (min-width: 1600px) {
|
||||
#rightFunctionPanel {
|
||||
width: 360px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
#PanelTitle {
|
||||
font-size: 20px;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
#ModuleTitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#FunctionBtn {
|
||||
font-size: 15px;
|
||||
min-height: 48px;
|
||||
padding: 14px 22px;
|
||||
}
|
||||
|
||||
#ModuleCard {
|
||||
padding: 18px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================================
|
||||
次要按钮样式
|
||||
================================ */
|
||||
|
||||
/* 次要操作按钮 - 蓝色配色 */
|
||||
QPushButton.secondary {
|
||||
background: #2a3441;
|
||||
border: 1px solid #3c4a59;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
margin: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
QPushButton.secondary:hover {
|
||||
background: #2a3441;
|
||||
border-color: #00a8ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 危险操作按钮 - 红色配色 */
|
||||
QPushButton.danger {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #ff3838, stop:1 #c44569);
|
||||
border: 1px solid #ff3838;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
margin: 6px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
QPushButton.danger:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #c44569, stop:1 #a23651);
|
||||
box-shadow: 0 4px 12px rgba(255, 56, 56, 0.3);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
加载和动画效果
|
||||
================================ */
|
||||
|
||||
/* 按钮加载状态 */
|
||||
QPushButton.loading {
|
||||
background: #747d8c;
|
||||
color: #a4b0be;
|
||||
border-color: #3c4a59;
|
||||
}
|
||||
|
||||
/* 呼吸效果 - 用于在线状态指示 */
|
||||
@keyframes breathe {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.breathing-effect {
|
||||
animation: breathe 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 滑动扫描效果 */
|
||||
@keyframes scan-line {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
.scan-effect::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
|
||||
animation: scan-line 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
高级交互效果
|
||||
================================ */
|
||||
|
||||
/* 按钮光亮扫描效果 */
|
||||
#FunctionBtn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
#FunctionBtn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* 模块卡片悬停发光效果 */
|
||||
#ModuleCard {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#ModuleCard::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#ModuleCard:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 设备卡片脉搏效果 - 在线状态 */
|
||||
#RightDeviceCard.online {
|
||||
border-color: #00ff88;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* 威胁等级警告闪烁 */
|
||||
#threat-level-display.high-threat {
|
||||
animation: threat-warning 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes threat-warning {
|
||||
0%, 100% {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #ff3838, stop:1 rgba(255, 56, 56, 0.6));
|
||||
border-color: #ff3838;
|
||||
}
|
||||
50% {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #ff6b6b, stop:1 rgba(255, 107, 107, 0.8));
|
||||
border-color: #ff6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
/* 数据更新动画 */
|
||||
#target-count-number.updating {
|
||||
animation: data-update 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes data-update {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
color: #00ff88;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
color: #00a8ff;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
color: #00ff88;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮点击波纹效果 */
|
||||
#FunctionBtn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#FunctionBtn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.3s, height 0.3s;
|
||||
}
|
||||
|
||||
#FunctionBtn:active::after {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* 加载状态旋转动画 */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
QPushButton.loading::after {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 状态变化过渡 */
|
||||
* {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
Loading…
Reference in new issue