forked from SmartBench/CMVR-IOT-UI
feat: 增强系统身份标识和登录注册界面的视觉效果，优化用户体验
This commit is contained in:
parent
84568d5cd8
commit
cd4754cba5
@ -351,3 +351,602 @@ html.dark {
|
||||
html.dark .el-badge__content.is-dot,
|
||||
html.dark .control-point { animation: none; }
|
||||
}
|
||||
|
||||
/* Global CMVR NEXUS shell. These selectors intentionally live outside the
|
||||
* dark-mode scope so a stored light-mode preference still receives the same
|
||||
* cyberpunk product language. */
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--main-fill-bg: #070b14;
|
||||
--surface-0: rgba(16, 23, 39, 0.9);
|
||||
--surface-1: rgba(21, 31, 52, 0.92);
|
||||
--surface-2: rgba(29, 42, 68, 0.94);
|
||||
--line-subtle: rgba(34, 211, 238, 0.2);
|
||||
--el-bg-color-page: #070b14;
|
||||
--el-bg-color: #101727;
|
||||
--el-bg-color-overlay: #151f34;
|
||||
--el-fill-color-blank: #101727;
|
||||
--el-fill-color: rgba(25, 38, 62, 0.92);
|
||||
--el-fill-color-light: rgba(35, 52, 82, 0.82);
|
||||
--el-fill-color-lighter: rgba(41, 60, 92, 0.62);
|
||||
--el-color-primary: #22d3ee;
|
||||
--el-color-primary-light-3: #67e8f9;
|
||||
--el-color-primary-light-5: #a5f3fc;
|
||||
--el-color-primary-light-9: rgba(34, 211, 238, 0.12);
|
||||
--el-color-success: #34d399;
|
||||
--el-color-warning: #fbbf24;
|
||||
--el-color-danger: #fb7185;
|
||||
--el-text-color-primary: rgba(241, 248, 255, 0.94);
|
||||
--el-text-color-regular: rgba(211, 225, 242, 0.78);
|
||||
--el-text-color-secondary: rgba(170, 192, 219, 0.62);
|
||||
--el-text-color-placeholder: rgba(143, 169, 200, 0.5);
|
||||
--el-border-color: rgba(34, 211, 238, 0.28);
|
||||
--el-border-color-light: rgba(34, 211, 238, 0.2);
|
||||
--el-border-color-lighter: rgba(109, 139, 177, 0.2);
|
||||
--el-border-color-extra-light: rgba(109, 139, 177, 0.14);
|
||||
--el-box-shadow-light: 0 14px 36px rgba(0, 0, 0, 0.34), 0 0 18px rgba(34, 211, 238, 0.08);
|
||||
--sidebar-bg: rgba(7, 11, 20, 0.94);
|
||||
--sidebar-text: rgba(211, 225, 242, 0.72);
|
||||
--sidebar-logo-text: rgba(241, 248, 255, 0.95);
|
||||
--navbar-bg: rgba(7, 11, 20, 0.78);
|
||||
--navbar-text: rgba(211, 225, 242, 0.76);
|
||||
--tags-bg: rgba(7, 11, 20, 0.72);
|
||||
--tags-item-bg: rgba(16, 23, 39, 0.88);
|
||||
--tags-item-border: rgba(34, 211, 238, 0.2);
|
||||
--tags-item-text: rgba(211, 225, 242, 0.7);
|
||||
--tags-item-hover: rgba(34, 211, 238, 0.12);
|
||||
--tags-close-hover: rgba(244, 114, 182, 0.6);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--main-fill-bg: #070b14;
|
||||
--el-bg-color-page: #070b14;
|
||||
--el-bg-color: #101727;
|
||||
--el-bg-color-overlay: #151f34;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
background: #070b14;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--el-text-color-primary);
|
||||
background-image:
|
||||
linear-gradient(rgba(34, 211, 238, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(34, 211, 238, 0.025) 1px, transparent 1px),
|
||||
radial-gradient(circle at 82% 4%, rgba(168, 85, 247, 0.12), transparent 32%),
|
||||
radial-gradient(circle at 5% 90%, rgba(34, 211, 238, 0.07), transparent 28%);
|
||||
background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
.app-wrapper {
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.app-wrapper::before {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background: linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px), linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px);
|
||||
background-size: 88px 88px;
|
||||
mask-image: linear-gradient(to bottom, black, transparent 90%);
|
||||
}
|
||||
|
||||
.cyber-scanline {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1200;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), rgba(244, 114, 182, 0.45), transparent);
|
||||
box-shadow: 0 0 14px rgba(34, 211, 238, 0.42);
|
||||
animation: cyber-scanline 12s linear infinite;
|
||||
}
|
||||
|
||||
.cyber-corner {
|
||||
position: fixed;
|
||||
z-index: 1100;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
pointer-events: none;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.cyber-corner::before,
|
||||
.cyber-corner::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #22d3ee;
|
||||
box-shadow: 0 0 10px rgba(34, 211, 238, 0.65);
|
||||
}
|
||||
|
||||
.cyber-corner--top { top: 16px; right: 18px; border-top: 1px solid rgba(34, 211, 238, 0.25); border-right: 1px solid rgba(34, 211, 238, 0.25); }
|
||||
.cyber-corner--top::before { top: -1px; right: 0; width: 28px; height: 2px; }
|
||||
.cyber-corner--top::after { top: 0; right: -1px; width: 2px; height: 28px; }
|
||||
.cyber-corner--bottom { right: 18px; bottom: 16px; border-right: 1px solid rgba(244, 114, 182, 0.26); border-bottom: 1px solid rgba(244, 114, 182, 0.26); }
|
||||
.cyber-corner--bottom::before { right: -1px; bottom: 0; width: 28px; height: 2px; background: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, 0.65); }
|
||||
.cyber-corner--bottom::after { right: -1px; bottom: 0; width: 2px; height: 28px; background: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, 0.65); }
|
||||
|
||||
.main-container { background: transparent !important; }
|
||||
|
||||
.app-main {
|
||||
background: transparent !important;
|
||||
padding: 26px 30px 30px !important;
|
||||
}
|
||||
|
||||
.fixed-header + .app-main { padding-top: 78px !important; }
|
||||
.hasTagsView .fixed-header + .app-main { padding-top: 118px !important; }
|
||||
|
||||
.app-container {
|
||||
position: relative;
|
||||
padding: 22px !important;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(145deg, rgba(16, 23, 39, 0.92), rgba(12, 19, 34, 0.84)) !important;
|
||||
border: 1px solid rgba(34, 211, 238, 0.2) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.app-container::before,
|
||||
.el-card::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
width: 46px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background: #22d3ee;
|
||||
box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
|
||||
}
|
||||
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer,
|
||||
.el-popover,
|
||||
.el-dropdown-menu {
|
||||
position: relative;
|
||||
color: var(--el-text-color-primary);
|
||||
background: linear-gradient(145deg, rgba(19, 29, 48, 0.96), rgba(14, 22, 38, 0.94)) !important;
|
||||
border: 1px solid rgba(34, 211, 238, 0.2) !important;
|
||||
border-radius: 7px !important;
|
||||
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), 0 0 20px rgba(34, 211, 238, 0.06) !important;
|
||||
}
|
||||
|
||||
.el-card__header,
|
||||
.el-dialog__header,
|
||||
.el-drawer__header {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
background: rgba(34, 211, 238, 0.035) !important;
|
||||
border-bottom-color: rgba(34, 211, 238, 0.16) !important;
|
||||
}
|
||||
|
||||
.el-card__body { color: var(--el-text-color-regular); }
|
||||
|
||||
.el-button {
|
||||
border-radius: 4px !important;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
color: #06131a !important;
|
||||
background: linear-gradient(105deg, #22d3ee, #a78bfa) !important;
|
||||
border-color: #67e8f9 !important;
|
||||
box-shadow: 0 0 18px rgba(34, 211, 238, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
|
||||
}
|
||||
|
||||
.el-button--primary:hover,
|
||||
.el-button--primary:focus { background: linear-gradient(105deg, #67e8f9, #c4b5fd) !important; box-shadow: 0 0 24px rgba(34, 211, 238, 0.34) !important; }
|
||||
.el-button:not([class*="el-button--"]) { color: var(--el-text-color-regular); background: rgba(26, 41, 66, 0.58); border-color: rgba(109, 139, 177, 0.3); }
|
||||
.el-button:not([class*="el-button--"]):hover { color: var(--el-color-primary-light-3); border-color: rgba(34, 211, 238, 0.55); background: rgba(34, 211, 238, 0.1); }
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select .el-input__wrapper,
|
||||
.el-date-editor.el-input__wrapper {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
background: rgba(8, 15, 28, 0.72) !important;
|
||||
border: 1px solid rgba(109, 139, 177, 0.28) !important;
|
||||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 transparent !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover,
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-textarea__inner:focus { border-color: rgba(34, 211, 238, 0.68) !important; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 0 16px rgba(34, 211, 238, 0.1) !important; }
|
||||
.el-input__inner,
|
||||
.el-textarea__inner { color: var(--el-text-color-primary) !important; }
|
||||
|
||||
.el-table {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
background: rgba(10, 17, 30, 0.5) !important;
|
||||
--el-table-header-bg-color: rgba(34, 211, 238, 0.07);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgba(34, 211, 238, 0.08);
|
||||
--el-table-border-color: rgba(109, 139, 177, 0.18);
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell { color: #a5f3fc !important; background: rgba(34, 211, 238, 0.08) !important; border-bottom-color: rgba(34, 211, 238, 0.24) !important; font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
|
||||
.el-table td.el-table__cell { border-bottom-color: rgba(109, 139, 177, 0.14) !important; }
|
||||
.el-table__body tr:hover > td.el-table__cell { background: rgba(34, 211, 238, 0.08) !important; }
|
||||
|
||||
.el-tag { border-radius: 3px !important; font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; }
|
||||
.el-tabs__item { color: var(--el-text-color-secondary); }
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover { color: var(--el-color-primary-light-3); }
|
||||
.el-tabs__active-bar { background: linear-gradient(90deg, #22d3ee, #f472b6) !important; box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); }
|
||||
|
||||
.el-pagination { --el-pagination-bg-color: transparent; --el-pagination-text-color: var(--el-text-color-secondary); --el-pagination-button-bg-color: rgba(16, 26, 44, 0.8); --el-pagination-hover-color: #67e8f9; }
|
||||
.el-pagination button,
|
||||
.el-pagination .el-pager li { border: 1px solid rgba(109, 139, 177, 0.2); border-radius: 3px; }
|
||||
.el-pagination .el-pager li.is-active { color: #06131a; background: #22d3ee; border-color: #67e8f9; box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); }
|
||||
|
||||
.el-form-item__label { color: var(--el-text-color-secondary) !important; }
|
||||
.el-checkbox__label,
|
||||
.el-radio__label { color: var(--el-text-color-regular) !important; }
|
||||
.el-switch.is-checked .el-switch__core { background: #22d3ee !important; border-color: #67e8f9 !important; box-shadow: 0 0 12px rgba(34, 211, 238, 0.45); }
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__separator { color: var(--el-text-color-secondary) !important; }
|
||||
.el-breadcrumb__inner.is-link:hover { color: var(--el-color-primary-light-3) !important; }
|
||||
|
||||
.navbar {
|
||||
border-bottom: 1px solid rgba(34, 211, 238, 0.22) !important;
|
||||
background: rgba(7, 11, 20, 0.78) !important;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), 0 1px 18px rgba(34, 211, 238, 0.08) !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
border-right: 1px solid rgba(34, 211, 238, 0.22) !important;
|
||||
background: rgba(7, 11, 20, 0.94) !important;
|
||||
box-shadow: 10px 0 40px rgba(0, 0, 0, 0.32), 1px 0 18px rgba(34, 211, 238, 0.08) !important;
|
||||
}
|
||||
|
||||
.sidebar-container .el-menu-item,
|
||||
.sidebar-container .el-sub-menu__title {
|
||||
min-height: 46px !important;
|
||||
margin: 4px 10px !important;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px !important;
|
||||
color: var(--sidebar-text) !important;
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.sidebar-container .el-menu-item:hover,
|
||||
.sidebar-container .el-sub-menu__title:hover {
|
||||
color: #a5f3fc !important;
|
||||
background: rgba(34, 211, 238, 0.08) !important;
|
||||
border-color: rgba(34, 211, 238, 0.22) !important;
|
||||
}
|
||||
|
||||
.sidebar-container .el-menu-item.is-active {
|
||||
color: #06131a !important;
|
||||
background: linear-gradient(100deg, #22d3ee, #a78bfa) !important;
|
||||
border-color: rgba(103, 232, 249, 0.8) !important;
|
||||
box-shadow: 0 0 18px rgba(34, 211, 238, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.sidebar-container .el-menu-item.is-active .svg-icon,
|
||||
.sidebar-container .el-menu-item.is-active .menu-title { color: #06131a !important; }
|
||||
|
||||
.sidebar-logo-container {
|
||||
height: 78px !important;
|
||||
line-height: 78px !important;
|
||||
text-align: left !important;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid rgba(34, 211, 238, 0.2) !important;
|
||||
background: linear-gradient(140deg, rgba(34, 211, 238, 0.08), transparent 72%) !important;
|
||||
}
|
||||
|
||||
.sidebar-container.has-logo .el-scrollbar { height: calc(100% - 78px) !important; }
|
||||
|
||||
.sidebar-logo-container .sidebar-logo-link { display: flex !important; align-items: center; }
|
||||
.sidebar-logo-container .sidebar-logo { width: 36px !important; height: 36px !important; margin-right: 12px !important; filter: drop-shadow(0 0 9px rgba(34, 211, 238, 0.6)); }
|
||||
.sidebar-logo-container .sidebar-title { color: var(--el-text-color-primary) !important; font-family: "JetBrains Mono", Consolas, monospace !important; font-size: 13px !important; letter-spacing: 0.08em; }
|
||||
.hideSidebar .sidebar-logo-container { padding: 0 !important; }
|
||||
.hideSidebar .sidebar-logo-container .sidebar-logo-link { justify-content: center; }
|
||||
.hideSidebar .sidebar-logo-container .sidebar-logo { margin-right: 0 !important; }
|
||||
|
||||
.tags-view-container {
|
||||
height: 42px !important;
|
||||
background: rgba(7, 11, 20, 0.72) !important;
|
||||
border-bottom-color: rgba(34, 211, 238, 0.17) !important;
|
||||
}
|
||||
|
||||
.tags-view-container .tags-view-item { height: 28px !important; line-height: 26px !important; color: var(--el-text-color-secondary) !important; background: rgba(16, 26, 44, 0.82) !important; border-color: rgba(109, 139, 177, 0.22) !important; border-radius: 3px !important; }
|
||||
.tags-view-container .tags-view-item.active { color: #06131a !important; background: linear-gradient(100deg, #22d3ee, #a78bfa) !important; border-color: #67e8f9 !important; box-shadow: 0 0 14px rgba(34, 211, 238, 0.28); }
|
||||
|
||||
.home-dashboard .hero-panel {
|
||||
border: 1px solid rgba(34, 211, 238, 0.42);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), 0 0 30px rgba(34, 211, 238, 0.12);
|
||||
}
|
||||
|
||||
.home-dashboard .hero-panel::after {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: 18px;
|
||||
width: 180px;
|
||||
height: 42px;
|
||||
content: "01 // READY 02 // SYNC 03 // DEPLOY";
|
||||
color: rgba(165, 243, 252, 0.5);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.5;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.home-dashboard .hero-content h1 { text-shadow: 0 0 22px rgba(34, 211, 238, 0.22); }
|
||||
.home-dashboard .section-kicker { font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.14em; text-shadow: 0 0 12px rgba(34, 211, 238, 0.44); }
|
||||
.home-dashboard .metric-card,
|
||||
.home-dashboard .dashboard-panel { border-color: rgba(34, 211, 238, 0.22) !important; background: linear-gradient(145deg, rgba(20, 31, 52, 0.94), rgba(13, 22, 38, 0.9)) !important; }
|
||||
.home-dashboard .metric-card:hover,
|
||||
.home-dashboard .dashboard-panel:hover { border-color: rgba(103, 232, 249, 0.58) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 22px rgba(34, 211, 238, 0.12) !important; }
|
||||
.home-dashboard .metric-icon { border: 1px solid rgba(34, 211, 238, 0.24); box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.08); }
|
||||
.home-dashboard .task-list { padding: 0 !important; background: transparent !important; border: 0 !important; }
|
||||
|
||||
.contextmenu { color: var(--el-text-color-regular) !important; background: #111b2e !important; border-color: rgba(34, 211, 238, 0.3) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4) !important; }
|
||||
.contextmenu li:hover { color: #67e8f9; background: rgba(34, 211, 238, 0.1) !important; }
|
||||
|
||||
.login,
|
||||
.register {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
background-color: #070b14 !important;
|
||||
background-image: linear-gradient(105deg, rgba(5, 10, 20, 0.88), rgba(7, 11, 20, 0.72) 50%, rgba(37, 16, 63, 0.72)), repeating-linear-gradient(180deg, rgba(103, 232, 249, 0.02) 0, rgba(103, 232, 249, 0.02) 1px, transparent 1px, transparent 5px), url("../images/login-background.jpg") !important;
|
||||
background-size: cover, auto, cover;
|
||||
justify-content: flex-end !important;
|
||||
padding: 42px clamp(42px, 9vw, 150px) 42px 48px;
|
||||
}
|
||||
|
||||
.login::before,
|
||||
.register::before { display: none !important; }
|
||||
|
||||
.login::after,
|
||||
.register::after {
|
||||
position: absolute;
|
||||
inset: 24px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
content: "SYSTEM ACCESS // AUTHORIZATION REQUIRED";
|
||||
color: rgba(103, 232, 249, 0.3);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.login .login-form,
|
||||
.register .register-form {
|
||||
width: min(410px, calc(100% - 32px)) !important;
|
||||
padding: 34px 34px 18px !important;
|
||||
background: linear-gradient(145deg, rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.06)), rgba(10, 17, 30, 0.9) !important;
|
||||
border: 1px solid rgba(34, 211, 238, 0.42) !important;
|
||||
border-radius: 7px !important;
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.6), 0 0 34px rgba(34, 211, 238, 0.14) !important;
|
||||
}
|
||||
|
||||
.access-brand {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: clamp(48px, 8vw, 136px);
|
||||
width: min(560px, 44vw);
|
||||
transform: translateY(-50%);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.access-state,
|
||||
.access-code,
|
||||
.access-metrics,
|
||||
.form-kicker {
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.access-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 32px;
|
||||
color: #34d399;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.access-state span {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 14px rgba(52, 211, 153, 0.8);
|
||||
animation: cyber-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.access-code { margin: 0 0 12px; color: #67e8f9; font-size: 11px; }
|
||||
.access-brand h1 { margin: 0; color: rgba(241, 248, 255, 0.96); font-size: clamp(48px, 6.2vw, 88px); font-weight: 300; line-height: 0.9; text-shadow: 0 0 30px rgba(34, 211, 238, 0.16); }
|
||||
.access-brand h1 strong { color: transparent; font-weight: 800; -webkit-text-stroke: 1px rgba(165, 243, 252, 0.9); text-shadow: 0 0 24px rgba(34, 211, 238, 0.18); }
|
||||
.access-description { max-width: 520px; margin: 28px 0; color: rgba(211, 225, 242, 0.64); font-size: 14px; line-height: 1.8; }
|
||||
.access-metrics { display: flex; gap: 22px; color: rgba(165, 243, 252, 0.42); font-size: 9px; }
|
||||
.form-kicker { margin-bottom: 12px; color: rgba(103, 232, 249, 0.62); font-size: 9px; }
|
||||
|
||||
.login .title,
|
||||
.register .title { color: var(--el-text-color-primary) !important; font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.05em; text-shadow: 0 0 18px rgba(34, 211, 238, 0.38); }
|
||||
.login .el-login-footer,
|
||||
.register .el-register-footer { color: rgba(170, 192, 219, 0.56) !important; font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.08em !important; }
|
||||
|
||||
@keyframes cyber-scanline {
|
||||
0% { transform: translateY(0); opacity: 0; }
|
||||
10% { opacity: 0.72; }
|
||||
90% { opacity: 0.2; }
|
||||
100% { transform: translateY(100vh); opacity: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.login,
|
||||
.register { justify-content: center !important; padding: 28px; }
|
||||
.access-brand { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-main { padding: 18px !important; }
|
||||
.fixed-header + .app-main,
|
||||
.hasTagsView .fixed-header + .app-main { padding-top: 72px !important; }
|
||||
.cyber-corner { display: none; }
|
||||
.login,
|
||||
.register { justify-content: center !important; padding: 20px; }
|
||||
.access-brand { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cyber-scanline,
|
||||
.access-state span { animation: none; }
|
||||
}
|
||||
|
||||
/* Legacy business surfaces that still carry light-mode literals in their
|
||||
* scoped component styles. Keep their data and interaction untouched while
|
||||
* bringing the rendered surfaces into the NEXUS shell. */
|
||||
.tree-sidebar,
|
||||
.tree-panel,
|
||||
.tree-container,
|
||||
.category-tree,
|
||||
.corpus-list,
|
||||
.task-list,
|
||||
.right-panel,
|
||||
.left-panel,
|
||||
.status-strip,
|
||||
.robot-container,
|
||||
.head-control,
|
||||
.microphone-container,
|
||||
.audio-player,
|
||||
.page-container > .left,
|
||||
.page-container > .right,
|
||||
.evaluation-metrics > .left,
|
||||
.evaluation-metrics > .right,
|
||||
.schemaList,
|
||||
.info,
|
||||
.btn-container {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
background: linear-gradient(145deg, rgba(19, 29, 48, 0.94), rgba(12, 20, 35, 0.9)) !important;
|
||||
border-color: rgba(34, 211, 238, 0.2) !important;
|
||||
}
|
||||
|
||||
.tree-header,
|
||||
.collapse-button-container,
|
||||
.task-item,
|
||||
.task,
|
||||
.schema,
|
||||
.preset-panel,
|
||||
.current-display,
|
||||
.speaker-container,
|
||||
.audioItem,
|
||||
.audio-item,
|
||||
.voice-btn,
|
||||
.output-row,
|
||||
.queue-step,
|
||||
.input__container,
|
||||
.condition-summary,
|
||||
.condition-summary__item {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
background: rgba(21, 31, 52, 0.92) !important;
|
||||
border-color: rgba(109, 139, 177, 0.22) !important;
|
||||
}
|
||||
|
||||
.tree-node,
|
||||
.node-label,
|
||||
.task-title,
|
||||
.notice-title,
|
||||
.notice-item-title,
|
||||
.flow-heading__name,
|
||||
.node-name,
|
||||
.title_container,
|
||||
.subTitle { color: var(--el-text-color-primary) !important; }
|
||||
|
||||
.tree-wrap .el-tree-node__content:hover,
|
||||
.task-item:hover,
|
||||
.task:hover,
|
||||
.schema:hover,
|
||||
.audio-item:hover,
|
||||
.notice-item:hover { background: rgba(34, 211, 238, 0.1) !important; }
|
||||
|
||||
.flow-node-card,
|
||||
.node__container,
|
||||
.node__box,
|
||||
.group__container,
|
||||
.outer-node,
|
||||
.component-library,
|
||||
.library-header,
|
||||
.single-node-station-tools,
|
||||
.custom-table,
|
||||
.popup-main,
|
||||
.popup-result {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
background: rgba(16, 25, 43, 0.94) !important;
|
||||
border-color: rgba(34, 211, 238, 0.2) !important;
|
||||
}
|
||||
|
||||
.flow-node-card input,
|
||||
.flow-node-card textarea,
|
||||
.node__box input,
|
||||
.node__box textarea,
|
||||
.custom-table input,
|
||||
.custom-table textarea { color: var(--el-text-color-primary) !important; background: rgba(7, 14, 26, 0.72) !important; border-color: rgba(109, 139, 177, 0.28) !important; }
|
||||
|
||||
.notice-popover .notice-header,
|
||||
.notice-popover .notice-item { background: rgba(16, 25, 43, 0.96) !important; border-color: rgba(34, 211, 238, 0.16) !important; color: var(--el-text-color-primary) !important; }
|
||||
.notice-popover .notice-item-title { color: var(--el-text-color-primary) !important; }
|
||||
.notice-popover .notice-item-date,
|
||||
.notice-popover .notice-loading,
|
||||
.notice-popover .notice-empty { color: var(--el-text-color-secondary) !important; }
|
||||
|
||||
/* Flow designer chrome uses a self-contained Element layout and therefore
|
||||
* needs an explicit shell treatment in addition to the generic card rules. */
|
||||
.page .page__container,
|
||||
.page .page__container .container,
|
||||
.page .page__container .el-main { background: #080f1d !important; }
|
||||
.page .page__container .el-header {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
background: linear-gradient(100deg, rgba(16, 28, 48, 0.98), rgba(10, 18, 33, 0.96)) !important;
|
||||
border-bottom-color: rgba(34, 211, 238, 0.28) !important;
|
||||
}
|
||||
.page .page__container .el-aside {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
background: rgba(12, 21, 37, 0.98) !important;
|
||||
border-right-color: rgba(34, 211, 238, 0.2) !important;
|
||||
}
|
||||
.page .page__container .canvas-toolbar,
|
||||
.page .page__container .vue-flow__controls {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
background: rgba(13, 23, 40, 0.94) !important;
|
||||
border-color: rgba(34, 211, 238, 0.32) !important;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), 0 0 18px rgba(34, 211, 238, 0.1) !important;
|
||||
}
|
||||
.page .page__container .canvas-toolbar .el-button { color: var(--el-text-color-regular) !important; }
|
||||
.page .page__container .canvas-toolbar .el-button:hover { color: #67e8f9 !important; background: rgba(34, 211, 238, 0.12) !important; }
|
||||
.page .page__container .flow__container .vue-flow__background { background: #080f1d !important; }
|
||||
.page .page__container .flow__container .vue-flow__edge-path,
|
||||
.page .page__container .flow__container .vue-flow__connection-path { stroke: #22d3ee !important; filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.58)); }
|
||||
|
||||
::-webkit-scrollbar { width: 7px; height: 7px; }
|
||||
::-webkit-scrollbar-track { background: rgba(7, 11, 20, 0.72); }
|
||||
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(34, 211, 238, 0.72), rgba(167, 139, 250, 0.72)); border: 2px solid rgba(7, 11, 20, 0.82); border-radius: 4px; }
|
||||
|
||||
.el-loading-mask { background: rgba(7, 11, 20, 0.78) !important; }
|
||||
.el-loading-spinner .path { stroke: #22d3ee !important; }
|
||||
.el-message-box { background: #111b2e !important; border-color: rgba(34, 211, 238, 0.34) !important; }
|
||||
.el-message-box__title,
|
||||
.el-message-box__message { color: var(--el-text-color-primary) !important; }
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.sidebar-logo-container { padding: 0 14px; }
|
||||
.sidebar-logo-container .sidebar-copy small { display: none; }
|
||||
}
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="navbar" :class="'nav' + settingsStore.navType">
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<div v-if="settingsStore.navType == 1" class="system-identity" aria-label="CMVR system identity">
|
||||
<span class="identity-mark">CMVR</span>
|
||||
<span class="identity-divider">//</span>
|
||||
<span class="identity-name">NEXUS CONTROL</span>
|
||||
<span class="identity-status"><i></i> ONLINE</span>
|
||||
</div>
|
||||
<breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
|
||||
<template v-if="settingsStore.navType == 3">
|
||||
@ -194,6 +200,47 @@ async function toggleTheme(event) {
|
||||
}
|
||||
}
|
||||
|
||||
.system-identity {
|
||||
float: left;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 8px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
|
||||
.identity-mark {
|
||||
color: var(--el-color-primary-light-3);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.16em;
|
||||
text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
|
||||
}
|
||||
|
||||
.identity-divider { color: var(--el-color-primary); opacity: 0.65; }
|
||||
.identity-name { color: var(--el-text-color-regular); }
|
||||
|
||||
.identity-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 8px;
|
||||
color: #34d399;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.identity-status i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
@ -274,4 +321,13 @@ async function toggleTheme(event) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.system-identity { display: none !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.system-identity .identity-name,
|
||||
.system-identity .identity-divider { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,7 +7,10 @@
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 class="sidebar-title">{{ title }}</h1>
|
||||
<span class="sidebar-copy">
|
||||
<h1 class="sidebar-title">{{ title }}</h1>
|
||||
<small>NEURAL OPERATIONS GRID</small>
|
||||
</span>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
@ -94,6 +97,24 @@ const getLogoTextColor = computed(() => {
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& .sidebar-copy {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
& .sidebar-copy small {
|
||||
margin-top: 6px;
|
||||
color: rgba(103, 232, 249, 0.58);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33' }">
|
||||
<div class="cyber-corner cyber-corner--top" aria-hidden="true"></div>
|
||||
<div class="cyber-corner cyber-corner--bottom" aria-hidden="true"></div>
|
||||
<div class="cyber-scanline" aria-hidden="true"></div>
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader: false,
|
||||
fixedHeader: true,
|
||||
|
||||
/**
|
||||
* 是否显示logo
|
||||
|
||||
@ -1,6 +1,18 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<section class="access-brand" aria-hidden="true">
|
||||
<div class="access-state"><span></span> SYSTEM ONLINE</div>
|
||||
<p class="access-code">CMVR // ROBOT INTELLIGENCE PLATFORM</p>
|
||||
<h1>MISSION<br><strong>CONTROL</strong></h1>
|
||||
<p class="access-description">Unified device orchestration, autonomous inspection and intelligent evaluation.</p>
|
||||
<div class="access-metrics">
|
||||
<span>NODE 01</span>
|
||||
<span>LINK SECURE</span>
|
||||
<span>LAT 22.533</span>
|
||||
</div>
|
||||
</section>
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div class="form-kicker">AUTHORIZATION GATEWAY // 01</div>
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
|
||||
@ -1,6 +1,18 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<section class="access-brand" aria-hidden="true">
|
||||
<div class="access-state"><span></span> ENROLLMENT CHANNEL</div>
|
||||
<p class="access-code">CMVR // IDENTITY PROVISIONING</p>
|
||||
<h1>CREATE<br><strong>ACCESS</strong></h1>
|
||||
<p class="access-description">Register a verified operator identity for the intelligent test network.</p>
|
||||
<div class="access-metrics">
|
||||
<span>NODE 01</span>
|
||||
<span>CHANNEL SECURE</span>
|
||||
<span>AUTH READY</span>
|
||||
</div>
|
||||
</section>
|
||||
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
||||
<div class="form-kicker">IDENTITY ENROLLMENT // 02</div>
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
|
||||
Loading…
Reference in New Issue
Block a user