css

src/apps/AppWarningMonitoring/AppWarningMonitoring.vue

@@ -7,10 +7,12 @@
       <div class="search-box">
         <div class="area-select">
           <AiAreaPicker v-model="areaId" :areaId="user.areaId" :name.sync="areaName" @select="areaSelect">
-            <u-icon name="map-fill" size="18px" color="#FFF"></u-icon>
-            <span v-if="areaName" style="color:#FFF;fontSize: 14px;">{{ areaName }}</span>
-            <span v-else :style="{color:areaName? '#FFF': '#E2E8F1'}">请选择</span>
-            <u-icon name="arrow-down" color="#FFF" size="24" style="margin-left: 4px"></u-icon>
+            <div style="display: flex;">
+              <u-icon name="map-fill" size="18px" color="#FFF" style="width:18px;display:inline-block;margin-top: 18px"></u-icon>
+              <span v-if="areaName" style="color:#FFF;fontSize: 14px;" class="areaName">{{ areaName }}</span>
+              <span v-else :style="{color:areaName? '#FFF': '#E2E8F1'}" class="areaName">请选择</span>
+              <u-icon name="arrow-down" color="#FFF" size="24" style="margin-left: 4px;width: 14px;display:inline-block;margin-top:22px"></u-icon>
+            </div>
           </AiAreaPicker>
         </div>
         <div class="search">
@@ -161,7 +163,20 @@ export default {
     .area-select {
       display: flex;
       width: 240px;
-
+      justify-content: space-between;
+      // overflow:hidden;
+      // text-overflow:ellipsis;
+      // white-space:nowrap;
+      ::v-deep .AiAreaPicker  {
+        display: flex;
+       .areaName {
+          display: inline-block;
+          max-width: 160px;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+      }
     }
     .search {
       width: calc(100% - 240px);

src/apps/AppWarningMonitoring/detail.vue

@@ -292,6 +292,9 @@ export default {
         }
         div {
           width: calc(100% - 160px);
+          img {
+            
+          }
         }
       }
     }