fix+style: 修复中文乱码，主题改为深色侧边栏+浅灰内容区
- application.yml 强制 UTF-8 响应编码 - 前端主题：深钢蓝侧边栏 + 浅灰(#f0f2f5)内容区 + 工业蓝主色 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,6 +20,10 @@ server:
|
||||
servlet:
|
||||
# 应用的访问路径
|
||||
context-path: /
|
||||
encoding:
|
||||
charset: UTF-8
|
||||
force: true
|
||||
enabled: true
|
||||
tomcat:
|
||||
# tomcat的URI编码
|
||||
uri-encoding: UTF-8
|
||||
@@ -68,13 +72,13 @@ spring:
|
||||
# redis 配置
|
||||
redis:
|
||||
# 地址
|
||||
host: localhost
|
||||
host: 140.143.206.120
|
||||
# 端口，默认为6379
|
||||
port: 6379
|
||||
# 数据库索引
|
||||
database: 0
|
||||
# 密码
|
||||
password:
|
||||
password: KeLunPu123!
|
||||
# 连接超时时间
|
||||
timeout: 10s
|
||||
lettuce:
|
||||
|
||||
@@ -1,121 +1,26 @@
|
||||
/**
|
||||
* 冷轧二级控制系统 — Element-UI 主题覆盖（工业风格）
|
||||
* 冷轧二级控制系统 — Element-UI 主题（工业蓝）
|
||||
*/
|
||||
|
||||
/* 主题色：工业青蓝 */
|
||||
$--color-primary: #0099cc;
|
||||
$--color-success: #00c853;
|
||||
$--color-warning: #ff8c00;
|
||||
$--color-danger: #ff3d00;
|
||||
$--color-info: #546e8a;
|
||||
/* 主色：工业蓝 */
|
||||
$--color-primary: #1565c0;
|
||||
$--color-success: #52c41a;
|
||||
$--color-warning: #faad14;
|
||||
$--color-danger: #f5222d;
|
||||
$--color-info: #909399;
|
||||
|
||||
$--button-font-weight: 500;
|
||||
|
||||
/* 边框 */
|
||||
$--border-color-light: #1a3a5c;
|
||||
$--border-color-lighter: #152e4a;
|
||||
$--border-color-light: #dde1e7;
|
||||
$--border-color-lighter: #ebeef5;
|
||||
|
||||
$--table-border: 1px solid #1a3a5c;
|
||||
$--table-border: 1px solid #e8eaec;
|
||||
|
||||
/* icon font path */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
// 深色背景下全局 Element 样式覆盖
|
||||
.el-table {
|
||||
background-color: #0e2137 !important;
|
||||
color: #c8d8e8 !important;
|
||||
|
||||
th.el-table__cell {
|
||||
background-color: #0a1e35 !important;
|
||||
color: #00d4ff !important;
|
||||
border-bottom: 1px solid #1a3a5c !important;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
td.el-table__cell {
|
||||
border-bottom: 1px solid #132030 !important;
|
||||
}
|
||||
|
||||
tr:hover > td {
|
||||
background-color: #122840 !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #1a3a5c;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card {
|
||||
background-color: #0e2137 !important;
|
||||
border: 1px solid #1a3a5c !important;
|
||||
border-radius: 4px;
|
||||
color: #c8d8e8;
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 1px solid #1a3a5c;
|
||||
color: #00d4ff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: #071120 !important;
|
||||
border-color: #1a3a5c !important;
|
||||
color: #c8d8e8 !important;
|
||||
&::placeholder { color: #4a6a8a; }
|
||||
&:focus { border-color: #00d4ff !important; }
|
||||
}
|
||||
|
||||
.el-select .el-input__inner { background-color: #071120 !important; }
|
||||
|
||||
.el-dropdown-menu,
|
||||
.el-select-dropdown {
|
||||
background-color: #0e2137 !important;
|
||||
border: 1px solid #1a3a5c !important;
|
||||
.el-select-dropdown__item { color: #c8d8e8 !important; }
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover { background-color: #0a2545 !important; }
|
||||
.el-select-dropdown__item.selected { color: #00d4ff !important; }
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
color: #8ab0cc !important;
|
||||
.btn-prev, .btn-next, .el-pager li {
|
||||
background-color: #0e2137 !important;
|
||||
color: #8ab0cc !important;
|
||||
border: 1px solid #1a3a5c !important;
|
||||
}
|
||||
.el-pager li.active { color: #00d4ff !important; border-color: #00d4ff !important; }
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
background-color: #0e2137 !important;
|
||||
border: 1px solid #1a3a5c;
|
||||
.el-dialog__title { color: #00d4ff !important; }
|
||||
.el-dialog__body { color: #c8d8e8 !important; }
|
||||
}
|
||||
|
||||
.el-form-item__label { color: #8ab0cc !important; }
|
||||
|
||||
.el-tag {
|
||||
&.el-tag--success { background-color: rgba(0,200,83,.15); border-color: #00c853; color: #00c853; }
|
||||
&.el-tag--danger { background-color: rgba(255,61,0,.15); border-color: #ff3d00; color: #ff3d00; }
|
||||
&.el-tag--warning { background-color: rgba(255,140,0,.15); border-color: #ff8c00; color: #ff8c00; }
|
||||
&.el-tag--info { background-color: rgba(84,110,138,.15);border-color: #546e8a; color: #8ab0cc; }
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background-color: #0077aa !important;
|
||||
border-color: #0099cc !important;
|
||||
&:hover { background-color: #0099cc !important; }
|
||||
}
|
||||
|
||||
// webpack JS/SCSS 变量共享
|
||||
:export {
|
||||
theme: $--color-primary;
|
||||
|
||||
@@ -5,21 +5,20 @@
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
|
||||
// 工业风全局字体与背景
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: #071120;
|
||||
color: $industrial-text;
|
||||
background-color: #f0f2f5;
|
||||
color: #303133;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei',
|
||||
'Source Han Sans CN', Arial, monospace;
|
||||
'Source Han Sans CN', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label { font-weight: 600; color: #8ab0cc; }
|
||||
label { font-weight: 600; }
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@@ -33,13 +32,12 @@ html {
|
||||
a:focus, a:active { outline: none; }
|
||||
a, a:focus, a:hover {
|
||||
cursor: pointer;
|
||||
color: $industrial-cyan;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus { outline: none; }
|
||||
|
||||
// 工具类
|
||||
.fr { float: right; }
|
||||
.fl { float: left; }
|
||||
.pr-5 { padding-right: 5px; }
|
||||
@@ -63,17 +61,15 @@ div:focus { outline: none; }
|
||||
// 页面内容容器
|
||||
.app-container {
|
||||
padding: 16px 20px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// 搜索/过滤栏
|
||||
// 搜索过滤栏
|
||||
.filter-container {
|
||||
padding-bottom: 12px;
|
||||
background-color: $industrial-surface;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid $industrial-border;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 4px;
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
@@ -83,7 +79,7 @@ div:focus { outline: none; }
|
||||
}
|
||||
}
|
||||
|
||||
// 状态徽标 — 机组运行状态
|
||||
// 机组运行状态点
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
@@ -91,24 +87,24 @@ div:focus { outline: none; }
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
|
||||
&.running { background-color: $industrial-green; box-shadow: 0 0 6px $industrial-green; }
|
||||
&.stopped { background-color: $industrial-red; box-shadow: 0 0 6px $industrial-red; }
|
||||
&.standby { background-color: $industrial-amber; box-shadow: 0 0 6px $industrial-amber; }
|
||||
&.offline { background-color: $industrial-text-muted; }
|
||||
&.running { background-color: #52c41a; box-shadow: 0 0 5px #52c41a; }
|
||||
&.stopped { background-color: #f5222d; box-shadow: 0 0 5px #f5222d; }
|
||||
&.standby { background-color: #faad14; box-shadow: 0 0 5px #faad14; }
|
||||
&.offline { background-color: #909399; }
|
||||
}
|
||||
|
||||
// 数据看板 — 工艺参数数值框
|
||||
// 工艺参数数值
|
||||
.param-value {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: $industrial-cyan;
|
||||
color: #1565c0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.param-unit {
|
||||
font-size: 11px;
|
||||
color: $industrial-text-muted;
|
||||
color: #909399;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@@ -117,80 +113,28 @@ div:focus { outline: none; }
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.alarm-blink {
|
||||
animation: alarmBlink 1s ease-in-out infinite;
|
||||
color: $industrial-red;
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
// 顶部导航栏
|
||||
.navbar {
|
||||
background-color: #091628 !important;
|
||||
border-bottom: 1px solid #00d4ff33 !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 212, 255, 0.08) !important;
|
||||
.link-type, .link-type:focus {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
&:hover { color: #40a9ff; }
|
||||
}
|
||||
|
||||
// 面包屑
|
||||
.el-breadcrumb__inner { color: #6b8aaa !important; }
|
||||
.el-breadcrumb__inner.is-link:hover { color: #00d4ff !important; }
|
||||
.el-breadcrumb__separator { color: #1a3a5c !important; }
|
||||
|
||||
// 标签页(tab-view)
|
||||
.tags-view-container {
|
||||
background-color: #071120 !important;
|
||||
border-bottom: 1px solid #1a3a5c !important;
|
||||
|
||||
.tags-view-wrapper .tags-view-item {
|
||||
background-color: #0e2137 !important;
|
||||
border: 1px solid #1a3a5c !important;
|
||||
color: #8ab0cc !important;
|
||||
|
||||
&.active {
|
||||
background-color: #0077aa !important;
|
||||
border-color: #00d4ff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边栏 Logo 区域
|
||||
.sidebar-logo-container {
|
||||
background-color: #060f1e !important;
|
||||
border-bottom: 1px solid #1a3a5c !important;
|
||||
|
||||
.sidebar-title {
|
||||
color: #00d4ff !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条工业风格
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: #071120; }
|
||||
::-webkit-scrollbar-thumb { background: #1a3a5c; border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #00d4ff55; }
|
||||
|
||||
// 提示/备注区域
|
||||
aside {
|
||||
background: #0e2137;
|
||||
background: #e8f4ff;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-left: 3px solid #00d4ff;
|
||||
border-left: 3px solid #1890ff;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
color: #8ab0cc;
|
||||
|
||||
a { color: #00d4ff; &:hover { color: #40e0ff; } }
|
||||
}
|
||||
|
||||
.link-type, .link-type:focus {
|
||||
color: #00d4ff;
|
||||
cursor: pointer;
|
||||
&:hover { color: #40e0ff; }
|
||||
color: #606266;
|
||||
a { color: #1890ff; &:hover { color: #40a9ff; } }
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
@@ -200,8 +144,7 @@ aside {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
background: linear-gradient(90deg, #0a1e35 0%, #0077aa 100%);
|
||||
border-bottom: 1px solid #00d4ff44;
|
||||
background: linear-gradient(90deg, #1565c0 0%, #1890ff 100%);
|
||||
|
||||
.subtitle { font-size: 16px; color: #fff; letter-spacing: 1px; }
|
||||
}
|
||||
@@ -211,6 +154,5 @@ aside {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 多选
|
||||
.multiselect { line-height: 16px; }
|
||||
.multiselect--active { z-index: 1000 !important; }
|
||||
|
||||
@@ -76,12 +76,11 @@
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
// menu hover — 工业风高亮
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 212, 255, 0.08) !important;
|
||||
border-left: 2px solid #00d4ff;
|
||||
background-color: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,9 +89,8 @@
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-color: rgba(0, 119, 170, 0.30) !important;
|
||||
border-left: 3px solid #00d4ff !important;
|
||||
color: #00d4ff !important;
|
||||
background-color: #1565c0 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-submenu>.el-submenu__title,
|
||||
@@ -100,7 +98,7 @@
|
||||
min-width: $base-sidebar-width !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 212, 255, 0.08) !important;
|
||||
background-color: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,53 +1,43 @@
|
||||
// ============================================================
|
||||
// 冷轧双机架二级控制系统 — 工业深色主题色板
|
||||
// 冷轧双机架二级控制系统 — 工业标准配色
|
||||
// 深色侧边栏 + 浅灰内容区（工业管理系统经典布局）
|
||||
// ============================================================
|
||||
|
||||
// btn.scss 依赖的旧变量（映射到工业色板）
|
||||
$blue: #0099cc;
|
||||
$light-blue:#00d4ff;
|
||||
$red: #ff3d00;
|
||||
$pink: #ff6b6b;
|
||||
$green: #00c853;
|
||||
$tiffany: #00b4d8;
|
||||
$yellow: #ff8c00;
|
||||
$panGreen: #00c853;
|
||||
// btn.scss 依赖变量
|
||||
$blue: #1565c0;
|
||||
$light-blue:#1890ff;
|
||||
$red: #f5222d;
|
||||
$pink: #eb2f96;
|
||||
$green: #52c41a;
|
||||
$tiffany: #13c2c2;
|
||||
$yellow: #faad14;
|
||||
$panGreen: #52c41a;
|
||||
|
||||
// 工业色调
|
||||
$industrial-bg: #0a1628; // 深海军蓝，主背景
|
||||
$industrial-surface: #0e2137; // 卡片/面板背景
|
||||
$industrial-border: #1a3a5c; // 边框色
|
||||
$industrial-cyan: #00d4ff; // 工业青色，主高亮
|
||||
$industrial-amber: #ff8c00; // 琥珀橙，警告/重点
|
||||
$industrial-green: #00e676; // 状态绿，正常/运行
|
||||
$industrial-red: #ff3d00; // 告警红
|
||||
$industrial-text: #c8d8e8; // 主文字
|
||||
$industrial-text-muted: #6b8aaa; // 次要文字
|
||||
// 侧边栏（深钢蓝）
|
||||
$base-menu-color: #b8cce4;
|
||||
$base-menu-color-active: #ffffff;
|
||||
$base-menu-background: #1b2a3b;
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
// 默认侧边栏主题（工业深色）
|
||||
$base-menu-color: #8ab0cc;
|
||||
$base-menu-color-active: #00d4ff;
|
||||
$base-menu-background: #0a1628;
|
||||
$base-logo-title-color: #e0f0ff;
|
||||
|
||||
$base-menu-light-color: rgba(0,0,0,.70);
|
||||
$base-menu-light-color: rgba(0,0,0,.65);
|
||||
$base-menu-light-background: #ffffff;
|
||||
$base-logo-light-title-color:#001529;
|
||||
|
||||
$base-sub-menu-background: #071120;
|
||||
$base-sub-menu-hover: #0d2040;
|
||||
$base-sub-menu-background: #132233;
|
||||
$base-sub-menu-hover: #0d1e2e;
|
||||
|
||||
$base-sidebar-width: 210px;
|
||||
|
||||
// webpack JS/SCSS 变量共享
|
||||
:export {
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
menuColorActive: $base-menu-color-active;
|
||||
menuBackground: $base-menu-background;
|
||||
menuLightBackground: $base-menu-light-background;
|
||||
subMenuBackground: $base-sub-menu-background;
|
||||
subMenuHover: $base-sub-menu-hover;
|
||||
sideBarWidth: $base-sidebar-width;
|
||||
logoTitleColor: $base-logo-title-color;
|
||||
logoLightTitleColor: $base-logo-light-title-color;
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
menuColorActive: $base-menu-color-active;
|
||||
menuBackground: $base-menu-background;
|
||||
menuLightBackground: $base-menu-light-background;
|
||||
subMenuBackground: $base-sub-menu-background;
|
||||
subMenuHover: $base-sub-menu-hover;
|
||||
sideBarWidth: $base-sidebar-width;
|
||||
logoTitleColor: $base-logo-title-color;
|
||||
logoLightTitleColor: $base-logo-light-title-color;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user