xiaozhiyong/safePower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码更新

Browse Source
This commit is contained in:
kongduo
2026-06-12 09:29:42 +08:00
parent 06dfe98cb6
commit 2c816a13df
28 changed files with 506 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/style/element_visiable.scss
View File

@@ -2,6 +2,7 @@
@use '@/style/reset';
@use '@/style/table-tech.scss';
@use '@/style/loading-tech.scss';
@use '@/style/setting-tech.scss';
.el-button {
font-weight: 600;
@@ -329,7 +330,8 @@ body:not(.login-light-mode) {
justify-content: flex-start;
}
html.dark {
html.dark,
html.light {
--el-bg-color: rgb(7, 17, 31);
--el-bg-color-overlay: rgb(8, 27, 54);
--el-fill-color-light: rgb(15, 23, 42);
@@ -344,7 +346,8 @@ html.dark {
--el-mask-color: rgba(2, 6, 23, 0.72);
}
html.dark.login-light-mode {
#userLayout.login-light-mode,
html.login-light-mode {
--el-bg-color: #ffffff !important;
--el-bg-color-overlay: #ffffff !important;
--el-text-color-primary: #303133 !important;

125
src/style/loading-tech.scss
View File

@@ -1,130 +1,11 @@
@keyframes gvaLoadingFadeIn {
from {
opacity: 0;
}
@import '../../public/gva-loading-boot.css';
to {
opacity: 1;
}
}
@keyframes gvaLoadingSpin {
to {
transform: rotate(360deg);
}
}
@keyframes gvaLoadingPulse {
0%,
100% {
opacity: 0.72;
}
50% {
opacity: 1;
}
}
@keyframes gvaLoadingOrbit {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.el-loading-mask.gva-tech-loading,
.gva-tech-app .el-loading-mask {
.el-loading-mask.gva-tech-loading {
animation: gvaLoadingFadeIn 0.22s ease;
background:
radial-gradient(circle at 50% 40%, rgba(0, 212, 255, 0.1), transparent 38%),
rgba(2, 8, 23, 0.42) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.el-loading-mask.gva-tech-loading.gva-tech-loading--fullscreen {
background:
radial-gradient(circle at 50% 38%, rgba(0, 212, 255, 0.14), transparent 40%),
rgba(2, 8, 23, 0.58) !important;
}
.el-loading-mask.gva-tech-loading .el-loading-spinner,
.gva-tech-app .el-loading-mask .el-loading-spinner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 148px;
padding: 24px 28px 20px;
margin-top: 0;
border: 1px solid rgba(0, 212, 255, 0.22);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(10, 28, 54, 0.96), rgba(4, 14, 30, 0.92));
box-shadow:
0 22px 48px rgba(0, 0, 0, 0.34),
0 0 28px rgba(0, 212, 255, 0.1),
inset 0 0 28px rgba(0, 212, 255, 0.05);
.circular {
display: none !important;
}
&::before {
content: '';
width: 44px;
height: 44px;
border: 2px solid rgba(0, 212, 255, 0.12);
border-top-color: #00d4ff;
border-right-color: rgba(103, 232, 249, 0.55);
border-radius: 50%;
animation: gvaLoadingSpin 0.85s linear infinite;
box-shadow: 0 0 18px rgba(0, 212, 255, 0.22);
}
&::after {
position: absolute;
top: 18px;
left: 50%;
width: 56px;
height: 56px;
margin-left: -28px;
content: '';
border: 1px dashed rgba(0, 212, 255, 0.16);
border-radius: 50%;
animation: gvaLoadingOrbit 2.4s linear infinite;
pointer-events: none;
}
.el-loading-text {
position: relative;
z-index: 1;
margin: 0 !important;
padding-top: 2px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: #dceeff !important;
letter-spacing: 0.1em;
text-shadow: none;
animation: gvaLoadingPulse 1.6s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.el-loading-mask.gva-tech-loading,
.gva-tech-app .el-loading-mask {
.el-loading-mask.gva-tech-loading {
animation: none;
}
.el-loading-mask.gva-tech-loading .el-loading-spinner::before,
.el-loading-mask.gva-tech-loading .el-loading-spinner::after,
.el-loading-mask.gva-tech-loading .el-loading-spinner .el-loading-text {
animation: none !important;
}
}

3
src/style/main.scss
View File

@@ -32,7 +32,8 @@ body {
min-height: 100%;
}
html.dark {
html.dark,
html.light {
--tech-bg: #07111f;
--tech-bg-deep: #020617;
--tech-panel: rgba(8, 27, 54, 0.92);

19
src/style/page-tech-compat.scss
View File

@@ -2,14 +2,18 @@
.gva-tech-layout {
.text-slate-700,
.text-gray-700,
.text-gray-600 {
.text-gray-600,
.text-gray-900,
.text-gray-800,
.text-black {
color: var(--tech-text) !important;
}
.text-slate-500,
.text-slate-400,
.text-slate-300,
.text-gray-500 {
.text-gray-500,
.text-gray-400 {
color: var(--tech-text-muted) !important;
}
@@ -130,12 +134,21 @@
.device-grid .device-card,
.profile-container > .bg-white,
.profile-card {
.profile-card,
.detail-card,
.chart-card,
.trend-toolbar {
color: var(--tech-text) !important;
border-color: rgba(0, 212, 255, 0.22) !important;
background:
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%) !important;
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24) !important;
h3,
h4 {
color: var(--tech-text-strong) !important;
border-bottom-color: rgba(0, 212, 255, 0.18) !important;
}
}
}

123
src/style/setting-tech.scss Normal file
View File

@@ -0,0 +1,123 @@
.theme-config-drawer.el-drawer,
.theme-config-drawer .el-drawer {
color: var(--tech-text);
background:
radial-gradient(circle at 12% 10%, rgba(0, 212, 255, 0.12), transparent 28%),
linear-gradient(180deg, rgba(7, 17, 31, 0.98), rgba(2, 8, 23, 0.98)) !important;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.42), 0 0 28px rgba(0, 212, 255, 0.08);
}
.theme-config-drawer {
.gva-setting-header,
.gva-setting-body,
.gva-setting-tabs-wrap,
.gva-setting-section,
.gva-setting-card,
.gva-setting-tab-bar {
color: var(--tech-text);
border-color: rgba(0, 212, 255, 0.18) !important;
background:
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%) !important;
}
.gva-setting-header {
border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
background: rgba(2, 8, 23, 0.72) !important;
}
.gva-setting-title,
.gva-setting-section-title,
.gva-setting-card-title {
color: var(--tech-text-strong) !important;
}
.gva-setting-subtitle,
.gva-setting-hint,
.gva-setting-tab-item:not(.is-active) {
color: var(--tech-text-muted) !important;
}
.gva-setting-tab-bar {
padding: 6px;
border-radius: 14px;
background: rgba(2, 8, 23, 0.72) !important;
box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.05);
}
.gva-setting-tab-item {
min-width: 80px;
padding: 10px 18px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
&:not(.is-active):hover {
color: var(--tech-text-strong) !important;
background: rgba(0, 212, 255, 0.1) !important;
}
&.is-active {
color: #031424 !important;
box-shadow: 0 0 18px rgba(0, 212, 255, 0.24);
}
}
.gva-setting-divider {
background: rgba(0, 212, 255, 0.18) !important;
}
.gva-setting-color-item,
.gva-setting-color-panel {
border-color: rgba(0, 212, 255, 0.18) !important;
background: rgba(2, 8, 23, 0.62) !important;
&:hover {
border-color: rgba(0, 212, 255, 0.42) !important;
background: rgba(0, 212, 255, 0.08) !important;
}
}
.gva-setting-color-code {
color: var(--tech-text) !important;
border-color: rgba(0, 212, 255, 0.18) !important;
background: rgba(2, 8, 23, 0.72) !important;
}
::-webkit-scrollbar-track {
background: rgba(2, 8, 23, 0.72);
}
::-webkit-scrollbar-thumb {
background: rgba(0, 212, 255, 0.24);
&:hover {
background: rgba(0, 212, 255, 0.38);
}
}
}
.gva-tech-tool-btn {
color: var(--tech-text);
border: 1px solid rgba(0, 212, 255, 0.22) !important;
background: rgba(2, 8, 23, 0.62);
box-shadow: inset 0 0 14px rgba(0, 212, 255, 0.05);
&:hover {
color: #67e8f9;
border-color: rgba(0, 212, 255, 0.42) !important;
background: rgba(0, 212, 255, 0.1);
}
}
.gva-tech-cropper {
color: var(--tech-text);
border-color: rgba(0, 212, 255, 0.18) !important;
background: rgba(2, 8, 23, 0.72) !important;
}
.gva-tech-cropper-panel {
border-color: rgba(0, 212, 255, 0.18) !important;
background:
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)) !important;
}