diff --git a/src/assets/images/select.png b/src/assets/images/select.png new file mode 100644 index 0000000..209e482 Binary files /dev/null and b/src/assets/images/select.png differ diff --git a/src/assets/images/select_icon.png b/src/assets/images/select_icon.png new file mode 100644 index 0000000..ecae656 Binary files /dev/null and b/src/assets/images/select_icon.png differ diff --git a/src/components/map/controls/VehicleLabelSystem.vue b/src/components/map/controls/VehicleLabelSystem.vue index d645552..9de747c 100644 --- a/src/components/map/controls/VehicleLabelSystem.vue +++ b/src/components/map/controls/VehicleLabelSystem.vue @@ -126,10 +126,6 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) { // 有告警时,显示完整的Tab栏 let html = `
-
- ${vehicleId} - ${formattedSpeed} -
`; - + html+=` +
+ ${vehicleId} + ${formattedSpeed} +
+
+ ` return html; } @@ -336,12 +344,13 @@ defineExpose({ } .label-container { - background-color: rgba(37, 37, 37, 0.7); - border-radius: 4px; + background: linear-gradient(to top,#93B0DB,#497CC9); + border-radius: 6px; color: #fff; padding: 10px; + padding-bottom: 0px; min-width: 170px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + box-shadow: 0 10px 15px rgba(2, 2, 2, 0.25); } /* 简化标签样式 */ @@ -355,7 +364,7 @@ defineExpose({ justify-content: space-between; align-items: center; margin-bottom: 8px; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); + /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */ padding-bottom: 5px; } @@ -367,12 +376,13 @@ defineExpose({ .vehicle-id { font-weight: bold; - font-size: 14px; + font-size: 15px; } .vehicle-speed { - font-size: 12px; - color: #ccc; + font-size: 10px; + color: rgba(255, 255, 255, 0.65); + font-weight: bold; } /* 标签页按钮样式 */ @@ -416,8 +426,8 @@ defineExpose({ /* 标签图标样式 */ .tab-icon { - width: 16px; - height: 16px; + width: 13px; + height: 13px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -449,16 +459,23 @@ defineExpose({ /* 告警消息样式 */ .alert-message { - font-size: 12px; + font-size: 10px; + font-weight: Medium; line-height: 1.4; padding: 5px; - border-radius: 3px; - /* background-color: rgba(255, 255, 255, 0.1); */ + border-radius: 2px; + background-color: rgba(82, 122, 181, 1); +} +/* 具体告警提示 */ +.alert{ + font-size: 10px; + font-weight: bold; + margin: 5px; } /* 超速信息样式 */ .speed-info { - font-size: 12px; + font-size: 8px; line-height: 1.4; } diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue index 1ba88ae..1fe249b 100644 --- a/src/views/platform/index.vue +++ b/src/views/platform/index.vue @@ -301,16 +301,17 @@ watch(() => mapRef.value?.map, (newMap) => { /* 告警统计卡片 */ .alarm-stats-card { position: absolute; - top: 25%; - left: 20px; - width: 240px; - background-color: rgba(41, 44, 56, 0.85); - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + top: 182px; + left: 28px; + width: 246px; + height: 142px; + background: linear-gradient(to top,#94B0DB,#4F81CC,#3D629A); + border-radius: 9px; + box-shadow: 0 10px 15px rgba(2, 2, 2, 0.25); color: #fff; z-index: 1000; backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0.5px solid rgba(222, 213, 213, 0.53); overflow: hidden; } @@ -319,19 +320,20 @@ watch(() => mapRef.value?.map, (newMap) => { justify-content: space-between; align-items: center; padding: 6px 10px; /* 减小内边距 */ - background-color: rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + // background-color: rgba(0, 0, 0, 0.2); + border-bottom: 0.5px solid rgba(222, 213, 213, 0.53); } .stats-title { - font-size: 14px; + font-size: 15px; font-weight: bold; + color: rgba(255, 255, 255, 1); } .stats-time { - font-size: 12px; - color: #A0A8B7; - font-family: 'Courier New', monospace; + font-size: 10px; + color: rgba(255, 255, 255, 0.65); + font-family: 'PingFang SC', monospace; } .stats-content { @@ -358,11 +360,13 @@ watch(() => mapRef.value?.map, (newMap) => { // } &.has-new { - background-color: rgba(255, 77, 79, 0.15); + // background-color: rgba(255, 77, 79, 0.15); + // 线性渐变角度 + background: linear-gradient(135deg,rgba(240, 97, 97, 1) ,rgba(237, 180, 180, 0.48)); animation: pulse 1.5s infinite; .stats-count { - color: #FF4D4F; + color: rgba(204, 14, 14, 1); } } } @@ -370,8 +374,8 @@ watch(() => mapRef.value?.map, (newMap) => { .stats-icon { margin-right: 10px; /* 图标和文字之间的间距 */ - width: 32px; - height: 32px; + width: 39px; + height: 39px; object-fit: contain; // border:1px solid red; } @@ -380,19 +384,24 @@ watch(() => mapRef.value?.map, (newMap) => { .stats-text { display: flex; flex-direction: column; - flex: 1; + width: 40px; + height: 37px; } .stats-count { - font-size: 16px; + font-size: 15px; font-weight: bold; - line-height: 1; + width: 18px; + height: 20px; + color: rgba(255, 255, 255, 1); } .stats-label { - font-size: 12px; - color: #A0A8B7; + font-size: 10px; + color: rgba(255, 255, 255, 1); margin-top: 2px; + width: 40px; + height: 20px; } .new-badge {