.system-control-panel {
|
position: absolute;
|
top: 15px;
|
left: 50%;
|
transform: translateX(-50%);
|
background: rgba(240, 248, 255, 0.7);
|
border-radius: 16px;
|
padding: 8px 20px;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
backdrop-filter: blur(6px);
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
z-index: 100;
|
display: flex;
|
align-items: center;
|
min-width: 260px;
|
justify-content: center;
|
transition: all 0.3s ease;
|
}
|
|
.system-control-panel:hover {
|
background: rgba(240, 248, 255, 0.85);
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
}
|
|
.system-status {
|
display: flex;
|
align-items: center;
|
margin-right: 12px;
|
}
|
|
.status-indicator {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 8px;
|
}
|
|
.status-running {
|
background-color: #13ce66;
|
box-shadow: 0 0 6px rgba(19, 206, 102, 0.8);
|
animation: pulse-green 2s infinite;
|
}
|
|
.status-stopped {
|
background-color: #A64036;
|
box-shadow: 0 0 6px rgba(166, 64, 54, 0.6);
|
}
|
|
.status-text {
|
font-weight: 600;
|
font-size: 13px;
|
color: #2c3e50;
|
}
|
|
.custom-switch {
|
display: flex;
|
align-items: center;
|
}
|
|
.el-switch {
|
transform: scale(0.9);
|
}
|
|
@keyframes pulse-green {
|
0% { box-shadow: 0 0 0 0 rgba(19, 206, 102, 0.5); }
|
70% { box-shadow: 0 0 0 6px rgba(19, 206, 102, 0); }
|
100% { box-shadow: 0 0 0 0 rgba(19, 206, 102, 0); }
|
}
|
|
.license-info {
|
position: absolute;
|
top: 60px;
|
left: 50%;
|
transform: translateX(-50%);
|
background: rgba(255, 255, 255, 0.85);
|
padding: 8px 18px;
|
border-radius: 6px;
|
font-size: 22px;
|
font-weight: 600;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
backdrop-filter: blur(4px);
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
z-index: 99;
|
display: flex;
|
align-items: center;
|
transition: all 0.3s ease;
|
max-width: 80%;
|
text-align: center;
|
}
|
|
.license-info.normal {
|
color: #13ce66;
|
background: rgba(255, 255, 255, 0.85);
|
display: none; /* 大于30天时隐藏 */
|
}
|
|
.license-info.warning {
|
color: #e6a23c;
|
background: rgba(255, 247, 230, 0.85);
|
border: 1px solid rgba(230, 162, 60, 0.3);
|
}
|
|
.license-info.expired {
|
color: #f56c6c;
|
background: rgba(255, 235, 235, 0.85);
|
border: 1px solid rgba(245, 108, 108, 0.3);
|
animation: pulse-red 2s infinite;
|
}
|
|
.license-icon {
|
margin-right: 8px;
|
font-size: 14px;
|
}
|
|
@keyframes pulse-red {
|
0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.3); }
|
70% { box-shadow: 0 0 0 6px rgba(245, 108, 108, 0); }
|
100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); }
|
}
|
|
body {
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
margin: 0;
|
padding: 0;
|
background-color: #a0d2eb;
|
color: #ffffff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100vh;
|
|
background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
|
overflow: hidden;
|
position: relative;
|
}
|
.tech-background {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: -1;
|
pointer-events: none;
|
opacity: 0.6;
|
}
|
|
.grid-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-image:
|
linear-gradient(rgba(66, 134, 244, 0.08) 1px, transparent 1px),
|
linear-gradient(90deg, rgba(66, 134, 244, 0.08) 1px, transparent 1px);
|
background-size: 40px 40px;
|
perspective: 1000px;
|
transform-style: preserve-3d;
|
transform: perspective(500px) rotateX(60deg);
|
}
|
|
.glow-effect {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
background:
|
radial-gradient(circle at 20% 30%, rgba(41, 128, 185, 0.3) 0%, transparent 40%),
|
radial-gradient(circle at 80% 70%, rgba(46, 204, 113, 0.3) 0%, transparent 40%);
|
filter: blur(10px);
|
}
|
|
.particles-container {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
}
|
|
.particle {
|
position: absolute;
|
background-color: rgba(255, 255, 255, 0.5);
|
border-radius: 50%;
|
animation: float 15s infinite ease-in-out;
|
}
|
|
@keyframes float {
|
0%, 100% {
|
transform: translateY(0) translateX(0);
|
opacity: 0.2;
|
}
|
50% {
|
transform: translateY(-20px) translateX(20px);
|
opacity: 0.6;
|
}
|
}
|
|
header {
|
background-color: #2196F3;
|
color: white;
|
padding: 15px 20px;
|
text-align: center;
|
font-size: 24px;
|
letter-spacing: 1px;
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
}
|
.map {
|
position: relative;
|
width: 52vw;
|
height: 72vh;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.inner-ring, .outer-ring {
|
position: absolute;
|
border-radius: 50%;
|
}
|
.inner-ring {
|
width: 72vh;
|
height: 72vh;
|
border: 4px solid #00E676;
|
box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5);
|
}
|
.outer-ring {
|
width: 80vh;
|
height: 80vh;
|
border: 4px solid #00E676;
|
box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5);
|
}
|
.station {
|
position: absolute;
|
width: 20px;
|
height: 14px;
|
text-align: center;
|
line-height: 1.5; /* 调整行高与字体大小的比值 */
|
font-size: 10px; /* 设置更小的字体 */
|
font-weight: bold;
|
transition: transform 0.3s ease;
|
background-color: #ab1839;
|
transform: scale(1); /* 可选：如果不需要放大效果 */
|
}
|
.bus {
|
font-size: 10px;
|
background-color: #2196F3;
|
/*border: 10px solid #ffffff;*/
|
position: absolute;
|
width: 15px;
|
height: 15px;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 15px;
|
font-weight: bold;
|
transition: transform 0.3s ease;
|
/* 3D效果 */
|
transform: translateZ(0);
|
border: 10px solid rgba(255, 255, 255, 0.8);
|
}
|
|
@keyframes pulse {
|
0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
|
70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); }
|
100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
|
}
|
.station:hover, .bus:hover {
|
transform: scale(1.4);
|
z-index: 999;
|
}
|
|
.task-bar-left {
|
position: fixed;
|
top: 1%;
|
/*transform: translateY(-50%);*/
|
width: 25%; /* 设置宽度 */
|
background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
|
|
border-radius: 5px;
|
padding: 10px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
|
z-index: 1000; /* 确保在其他元素之上 */
|
}
|
|
.task-bar-left1 {
|
position: fixed;
|
top: 8%;
|
/*transform: translateY(-50%);*/
|
width: 25%; /* 设置宽度 */
|
background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
|
|
border-radius: 5px;
|
padding: 10px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
|
z-index: 1000; /* 确保在其他元素之上 */
|
}
|
|
.task-bar-right {
|
position: fixed;
|
top: 1%;
|
/*transform: translateY(-50%);*/
|
width: 25%; /* 设置宽度 */
|
background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
|
|
border-radius: 5px;
|
padding: 10px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
|
z-index: 1000; /* 确保在其他元素之上 */
|
}
|
|
.task-bar-right1 {
|
position: fixed;
|
top: 5%;
|
/*transform: translateY(-50%);*/
|
width: 25%; /* 设置宽度 */
|
background-color: rgba(255, 255, 255, 0);
|
|
border-radius: 5px;
|
padding: 10px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
|
z-index: 1000;
|
}
|
|
.task-bar-div1 {
|
/*width: 100%; !* 设置宽度 *!*/
|
background-color: rgba(255, 255, 255, 0.8);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
}
|
|
.left-task-bar {
|
left: 20px;
|
/*bottom: 100px;*/
|
}
|
|
.right-task-bar {
|
/*bottom: 100px;*/
|
right: 20px;
|
}
|
|
.el-table .warning-row {
|
background: oldlace;
|
}
|
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
.container {
|
width: 52vw;
|
height: 72vh;
|
position: absolute;
|
/*background: #8c939d;*/
|
}
|
.bus-station {
|
width: 100vh;
|
height: 72vh;
|
position: absolute;
|
display: flex;
|
/*background: #8c939d;*/
|
}
|
.bus-item-top {
|
background: red;
|
position: relative;
|
width: 40px;
|
height: 60px;
|
line-height: 60px;
|
top: 880px;
|
text-align: center;
|
}
|
.bus-item-left {
|
background: red;
|
position: relative;
|
width: 60px;
|
height: 40px;
|
line-height: 40px;
|
left: 1230px;
|
text-align: center;
|
}
|
.bus-item-left2 {
|
background: red;
|
position: relative;
|
width: 60px;
|
height: 40px;
|
line-height: 40px;
|
left: 1000px;
|
text-align: center;
|
}
|
|
.station {
|
position: absolute;
|
width: 24px;
|
height: 24px;
|
text-align: center;
|
line-height: 24px;
|
font-size: 10px;
|
font-weight: bold;
|
transition: all 0.3s ease;
|
background-color: #ab1839;
|
border-radius: 4px;
|
color: white;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
transform: scale(1);
|
z-index: 10;
|
/* 嵌套效果 */
|
border: 2px solid white;
|
}
|
|
.station::before {
|
content: '';
|
position: absolute;
|
top: 3px;
|
left: 3px;
|
right: 3px;
|
bottom: 3px;
|
/*border: 1px solid rgba(255, 255, 255, 0.8);*/
|
border-radius: 2px;
|
pointer-events: none;
|
}
|
|
.station::after {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
pointer-events: none;
|
}
|
|
.station .corner {
|
position: absolute;
|
width: 0;
|
height: 0;
|
border-style: solid;
|
border-width: 0 4px 4px 0;
|
border-color: transparent #ffffff transparent transparent;
|
}
|
|
.station .corner-tl {
|
top: -2px;
|
left: -2px;
|
transform: rotate(0deg);
|
}
|
|
.station .corner-tr {
|
top: -2px;
|
right: -2px;
|
transform: rotate(90deg);
|
}
|
|
.station .corner-bl {
|
bottom: -2px;
|
left: -2px;
|
transform: rotate(270deg);
|
}
|
|
.station .corner-br {
|
bottom: -2px;
|
right: -2px;
|
transform: rotate(180deg);
|
}
|
|
.station:hover {
|
transform: scale(1.6);
|
z-index: 999;
|
box-shadow: 0 0 15px rgba(171, 24, 57, 0.8);
|
}
|
