点位信息样式更详细

src/components/Map/index.vue

@@ -55,7 +55,6 @@ const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
 
-
 const mapState = reactive({
   center: [110.93154257997, 21.669064031332],
   zoom: 7.9,
@@ -122,14 +121,14 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
         tableBox.className = 'table-box';
         let table = document.createElement('div');
         table.className = 'table';
-        table.innerHTML = '<div class="point-item"><div class="td1">主题</div><div class="td1">名称</div></div>';
+        table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
         data2.forEach((item) => {
           item.longitude = data.longitude;
           item.latitude = data.latitude;
           const div = document.createElement('div');
-          div.className = 'point-item';
+          div.className = 'point-item point-item-hover';
           div.innerHTML =
-            '<div class="td2">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td2">' + item.name + '</div>';
+            '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
           div.addEventListener('click', () => {
             handlePointDetails(item);
           });
@@ -261,7 +260,7 @@ const filterTd = (obj, dataType) => {
         i = 0;
       }
       const value = !!obj[key] ? obj[key] : '';
-      if (value && value.length > 6) {
+      if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });
           i = 0;
@@ -286,7 +285,6 @@ const filterTd = (obj, dataType) => {
   if (!!tempData && JSON.stringify(tempData) !== '{}') {
     data.push(tempData);
   }
-  debugger
   if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
     data[data.length - 1].data[1] = { label: '', value: '' };
   }

src/components/Map/map.scss

@@ -11,23 +11,26 @@ $vh_base: 2520;
 }
 
 :deep(.point-info) {
-  border: 4px solid #2a81fc;
-  padding: 5px 15px 15px;
-  width: 570px;
-  font-size: 16px;
+  border: vw(7) solid #2a81fc;
+  padding: vw(5) vw(32) vw(32);
+  width: vw(1569);
+  font-size: vw(38);
   display: flex;
   flex-wrap: wrap;
   background-color: #1c294c;
   color: #d5dde3;
   position: relative;
   .table-box {
-    max-height: 250px;
+    max-height: vw(800);
     overflow-y: auto;
     width: 100%;
+    &::-webkit-scrollbar {
+      width: vw(6);
+    }
   }
   .table {
-    border-top: 1px solid #3d66ae;
-    border-right: 1px solid #3d66ae;
+    border-top: vw(2) solid #3d66ae;
+    border-right: vw(2) solid #3d66ae;
     display: flex;
     flex-wrap: wrap;
     width: 100%;
@@ -39,111 +42,111 @@ $vh_base: 2520;
   .point-item {
     display: flex;
     width: 100%;
-    .td1 {
-      width: 132.75px;
-    }
-    .td2 {
-      width: 132.75px;
+  }
+  .point-item-hover {
+    cursor: pointer;
+    &:hover {
+      background-color: #1a326e;
     }
   }
   .point-item2 {
     display: flex;
     width: 100%;
-    .td1 {
-      width: 132.75px;
-    }
-    .td2 {
-      width: 398.25px;
-    }
   }
-  .td1 {
+  .td1, {
+    width: vw(369);
+  }
+  .td1, .td3 {
     background-color: #1a326e;
-    padding: 5px 10px;
+    padding: vw(15) vw(20);
     color: #c6d1e6;
-    border-bottom: 1px solid #3d66ae;
-    border-left: 1px solid #3d66ae;
+    border-bottom: vw(2) solid #3d66ae;
+    border-left: vw(2) solid #3d66ae;
+  }
+  .td2, .td4 {
+    padding: vw(15) vw(20);
+    border-bottom: vw(1) solid #3d66ae;
+    border-left: vw(1) solid #3d66ae;
   }
-  .td2 {
-    padding: 5px 10px;
-    border-bottom: 1px solid #3d66ae;
-    border-left: 1px solid #3d66ae;
+  .td2, .td3, .td4 {
+    flex: 1;
   }
   .close {
     position: absolute;
-    top: 8px;
-    right: 12px;
-    width: 10px;
-    height: 10px;
+    top: vw(20);
+    right: vw(60);
+    width: vw(32);
+    height: vw(32);
     background: url('@/assets/images/close.png') no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
   }
   .title-box {
-    width: 550px;
-    height: 40px;
+    width: vw(1354);
+    height: vw(175);
     position: relative;
     background: url('@/assets/images/line.png') no-repeat;
-    background-size: 35px 15px;
+    background-size: vw(163) vw(69);
     background-position: bottom left;
     &::before {
       content: "";
-      width: 500px;
-      height: 2px;
+      width: vw(1309);
+      height: vw(6.9);
       background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
       display: block;
       position: absolute;
-      left: 38px;
-      bottom: 6.5px;
+      left: vw(180);
+      bottom: vw(30);
     }
   }
   .gradient-text {
-    font-size: 24px;
+    font-size: vw(84);
   }
   .icon1, .icon2, .icon3, .icon4 {
     position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 12px;
-    height: 12px;
+    top: vw(10);
+    left: vw(10);
+    width: vw(12);
+    height: vw(12);
     background: url('@/assets/images/inputIcon1.png') no-repeat;
   }
   .icon2 {
     left: unset;
-    right: 2px;
+    right: vw(10);
     transform: rotate(90deg);
   }
   .icon3 {
     left: unset;
     top: unset;
-    right: 2px;
-    bottom: 2px;
+    right: vw(10);
+    bottom: vw(10);
     transform: rotate(180deg);
   }
   .icon4 {
     top: unset;
-    bottom: 2px;
+    bottom: vw(10);
     transform: rotate(-90deg);
   }
   .flex {
     width: 100%;
     display: flex;
     justify-content: flex-end;
+    margin-top: vw(-20);
   }
   .btn {
-    width: 125px;
-    height: 50px;
+    width: vw(300);
+    height:vw(120);
     background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn2.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    margin-left: 20px;
+    margin-left: vw(20);
     color: #edfaff;
-    //font-size: 32px;
     .video-icon {
-      width: 20.5px;
-      height: 19px;
+      width: vw(41);
+      height: vw(38);
       background: url('@/assets/images/map/rightMenu/potentialFloodHazard/video.png') no-repeat;
       background-size: 100% 100%;
       display: flex;