@charset "utf-8";
|
/* 自定义样式 */
|
:root {
|
--primary-color: #0f3460;
|
--secondary-color: #1a508b;
|
--accent-color: #e94560;
|
--dark-color: #16213e;
|
--success-color: #28a745;
|
--warning-color: #ffc107;
|
--danger-color: #dc3545;
|
--blue-color: #0d6efd;
|
--teal-color: #00bfa5;
|
}
|
|
body {
|
background-color: #f5f5f5;
|
font-family: 'Microsoft YaHei', sans-serif;
|
padding: 10px;
|
}
|
|
.header {
|
background-color: var(--primary-color);
|
color: white;
|
padding: 15px 0;
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
position: sticky;
|
top: 0;
|
z-index: 999;
|
}
|
|
.logo {
|
display: flex;
|
align-items: center;
|
}
|
|
.logo i {
|
font-size: 24px;
|
margin-right: 10px;
|
}
|
|
.logo h1 {
|
font-size: 18px;
|
font-weight: bold;
|
margin: 0;
|
}
|
|
.nav-item {
|
margin-left: 20px;
|
color: rgba(255,255,255,0.8);
|
cursor: pointer;
|
}
|
|
.nav-item:hover {
|
color: white;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
}
|
|
.user-info img {
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
|
.card {
|
background: white;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
margin-bottom: 15px;
|
}
|
.h-card {
|
margin-bottom: 0 !important;
|
}
|
.card-header {
|
padding: 15px;
|
border-bottom: 1px solid #e6e6e6;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.card-header h2 {
|
font-size: 16px;
|
font-weight: bold;
|
margin: 0;
|
}
|
|
.card-body {
|
padding: 15px;
|
}
|
|
.stat-card {
|
display: flex;
|
align-items: center;
|
padding: 20px;
|
}
|
|
.i-container{
|
width: 100%;
|
/* max-width: 1680px;*/
|
min-width: 1340px;
|
margin-left: auto;
|
margin-right: auto;
|
overflow: hidden;
|
}
|
|
.stat-icon {
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 15px;
|
}
|
|
.stat-info {
|
flex: 1;
|
}
|
|
.stat-title {
|
color: #909399;
|
font-size: 14px;
|
}
|
|
.stat-value {
|
font-size: 24px;
|
font-weight: bold;
|
margin: 5px 0;
|
}
|
|
.stat-tag {
|
background-color: #f0f2f5;
|
color: #606266;
|
padding: 3px 8px;
|
border-radius: 10px;
|
font-size: 12px;
|
}
|
|
.video-container {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 15px;
|
}
|
|
.video-box {
|
position: relative;
|
background-color: #333;
|
border-radius: 4px;
|
overflow: hidden;
|
padding-top: 56.25%; /* 16:9比例 */
|
}
|
|
.video-box img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.video-label {
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
background-color: rgba(0,0,0,0.5);
|
color: white;
|
padding: 5px 10px;
|
border-radius: 3px;
|
font-size: 12px;
|
}
|
|
.video-data {
|
position: absolute;
|
bottom: 10px;
|
left: 10px;
|
background-color: rgba(0,0,0,0.5);
|
color: white;
|
padding: 8px;
|
border-radius: 3px;
|
font-size: 12px;
|
}
|
|
.video-controls {
|
position: absolute;
|
bottom: 10px;
|
right: 10px;
|
}
|
|
.video-btn {
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
background-color: rgba(255,255,255,0.2);
|
color: white;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 5px;
|
cursor: pointer;
|
}
|
|
.video-btn:hover {
|
background-color: rgba(255,255,255,0.4);
|
}
|
|
.temp-mark {
|
position: absolute;
|
top: 25%;
|
left: 33%;
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
background-color: rgba(233,69,96,0.8);
|
color: white;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
animation: pulse 2s infinite;
|
cursor: pointer;
|
}
|
|
@keyframes pulse {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.1); }
|
100% { transform: scale(1); }
|
}
|
|
.temp-scale {
|
position: absolute;
|
top: 15px;
|
right: 15px;
|
background-color: rgba(0,0,0,0.5);
|
color: white;
|
padding: 8px;
|
border-radius: 3px;
|
font-size: 12px;
|
}
|
|
.record-grid {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 15px;
|
}
|
|
.record-item {
|
background-color: #f5f5f5;
|
border-radius: 4px;
|
overflow: hidden;
|
cursor: pointer;
|
}
|
|
.record-item:hover {
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
}
|
|
.record-img {
|
width: 100%;
|
height: 120px;
|
position: relative;
|
}
|
|
.record-img img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.record-label {
|
position: absolute;
|
top: 5px;
|
left: 5px;
|
background-color: rgba(0,0,0,0.5);
|
color: white;
|
padding: 3px 8px;
|
border-radius: 3px;
|
font-size: 12px;
|
}
|
|
.record-info {
|
padding: 10px;
|
}
|
|
.record-name {
|
font-size: 14px;
|
font-weight: 500;
|
margin-bottom: 5px;
|
}
|
|
.record-time {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.record-alert {
|
font-size: 12px;
|
color: var(--accent-color);
|
margin-top: 5px;
|
}
|
|
.alert-item {
|
border-left: 4px solid #e6a23c;
|
background-color: #fdf6ec;
|
padding: 10px 15px;
|
margin-bottom: 10px;
|
border-radius: 0 4px 4px 0;
|
}
|
|
.alert-item.accent {
|
border-left-color: var(--accent-color);
|
background-color: #fef0f0;
|
}
|
|
.alert-item.gray {
|
border-left-color: #909399;
|
background-color: #f2f2f2;
|
}
|
|
.alert-header {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 5px;
|
}
|
|
.alert-title {
|
font-weight: 500;
|
font-size: 14px;
|
}
|
|
.alert-time {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.alert-content {
|
font-size: 13px;
|
color: #606266;
|
margin-bottom: 10px;
|
}
|
|
.tool-grid {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 10px;
|
}
|
|
.tool-grid2 {
|
display: grid;
|
grid-template-columns: 1fr 1fr 1fr;
|
gap: 10px;
|
}
|
|
.tool-item {
|
background-color: #f5f5f5;
|
padding: 15px;
|
border-radius: 4px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
cursor: pointer;
|
}
|
|
.tool-item:hover {
|
background-color: #e6e6e6;
|
}
|
|
.tool-icon {
|
font-size: 24px;
|
color: var(--primary-color);
|
margin-bottom: 10px;
|
}
|
|
.tool-name {
|
font-size: 14px;
|
}
|
|
.palette-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 10px;
|
}
|
|
.palette-item {
|
border: 1px solid #e6e6e6;
|
padding: 8px;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
|
.palette-item.active {
|
border-color: var(--primary-color);
|
background-color: rgba(15, 52, 96, 0.05);
|
}
|
|
.palette-color {
|
width: 12px;
|
height: 4px;
|
margin-right: 5px;
|
}
|
|
/* 热成像工具样式调整 */
|
.tool-grid-simple {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 15px;
|
margin-top: 10px;
|
}
|
|
.tool-item-simple {
|
background-color: #f5f5f5;
|
padding: 20px 15px;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
}
|
|
.tool-item-simple:hover {
|
background-color: rgba(15, 52, 96, 0.1);
|
transform: translateY(-2px);
|
}
|
|
.tool-icon-simple {
|
color: var(--primary-color);
|
margin-right: 12px;
|
}
|
|
.tool-icon-simple >i {
|
font-size: 35px;
|
}
|
|
.tool-text {
|
text-align: left;
|
}
|
|
.tool-name-simple {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.tool-desc {
|
font-size: 12px;
|
color: #909399;
|
margin-top: 3px;
|
}
|
|
.palette-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 10px;
|
margin-top: 15px;
|
}
|
|
.palette-item {
|
border: 1px solid #e6e6e6;
|
padding: 8px;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
|
.palette-item.active {
|
border-color: var(--primary-color);
|
background-color: rgba(15, 52, 96, 0.05);
|
}
|
|
.palette-color {
|
width: 12px;
|
height: 4px;
|
margin-right: 5px;
|
}
|
|
/* 温度阈值设置样式 */
|
.threshold-item {
|
margin-bottom: 20px;
|
}
|
|
.threshold-label {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 8px;
|
font-size: 14px;
|
}
|
|
.threshold-name {
|
font-weight: 500;
|
color: #333;
|
}
|
|
.threshold-value {
|
color: var(--primary-color);
|
font-weight: bold;
|
}
|
|
.threshold-slider {
|
width: 100%;
|
}
|
|
.threshold-tips {
|
margin-top: 5px;
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.threshold-footer {
|
margin-top: 25px;
|
text-align: center;
|
padding-top: 15px;
|
border-top: 1px solid #f0f0f0;
|
}
|
|
.w-select {
|
min-width: 150px;
|
min-height: 36px;
|
border-radius: 4px;
|
}
|
.w-select >option {
|
min-height: 36px;
|
line-height: 36px;
|
}
|
|
/* ECharts容器样式 */
|
#temperatureChart {
|
width: 100%;
|
height: 100%;
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 992px) {
|
.video-container {
|
grid-template-columns: 1fr;
|
}
|
|
.record-grid {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media (max-width: 768px) {
|
.record-grid {
|
grid-template-columns: 1fr;
|
}
|
}
|
