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 11:16:10 +08:00
parent 175be2c949
commit e9594b65e4
16 changed files with 912 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/view/masterStation/equipment/components/detail/index.vue
View File

@@ -7,7 +7,7 @@
<div class="tabs-box">
<el-button icon="ArrowLeft" circle @click="handleBack" />
<span class="title">设备信息（{{ device?.gatewayMac }}）</span>
<el-radio-group v-model="activeMenu" size="large" fill="#409eff">
<el-radio-group v-model="activeMenu" size="large" fill="var(--tech-primary)">
<el-radio-button label="设备详情" value="info" />
<el-radio-button label="线路列表" value="line" />
<el-radio-button label="运行趋势" value="trend" />
@@ -51,14 +51,71 @@
.device-detail-page {
// padding: 20px;
.tabs-box {
@apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg;
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
margin: 8px 0 14px;
overflow: hidden;
color: var(--tech-text);
border: 1px solid rgba(0, 212, 255, 0.28);
border-radius: 18px;
background:
linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
&::before {
position: absolute;
top: 0;
left: -36%;
width: 36%;
height: 100%;
content: '';
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
animation: equipmentCardGlint 6s ease-in-out infinite;
}
> * {
position: relative;
z-index: 1;
}
> .title {
margin: 0 15px;
font-size: 18px;
font-weight: 600;
color: var(--el-text-color-primary, #303133);
flex: 1;
margin: 0 15px 0 0;
font-size: 24px;
font-weight: 800;
color: var(--tech-text-strong);
letter-spacing: 0.06em;
text-shadow: 0 0 18px rgba(0, 212, 255, 0.38);
}
:deep(.el-button.is-circle) {
color: #67e8f9;
border-color: rgba(0, 212, 255, 0.36);
background: rgba(15, 23, 42, 0.72);
box-shadow: 0 0 18px rgba(0, 212, 255, 0.14);
}
:deep(.el-radio-button__inner) {
color: var(--tech-text-muted);
border-color: rgba(0, 212, 255, 0.22);
background: rgba(2, 8, 23, 0.42);
}
:deep(.el-radio-button__inner:hover) {
color: var(--tech-text-strong);
background: rgba(0, 212, 255, 0.12);
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
color: #031424;
border-color: rgba(103, 232, 249, 0.74);
background: linear-gradient(135deg, #67e8f9, var(--tech-primary));
box-shadow: 0 0 18px rgba(0, 212, 255, 0.28);
}
}
}