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 = `
-
+ `
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 {