样式

src/views/web/index.vue

@@ -64,15 +64,6 @@
             <img src="@/assets/images/web/tools-ship.png"/>
           </div>
         </el-tooltip>
-        <el-tooltip
-          effect="light"
-          content="Dasdas"
-          placement="right"
-        >
-          <div class="tools-item __hover" @click="ShipMapStore.mockWarningWS()">
-            <img src="@/assets/images/web/tools-ship.png"/>
-          </div>
-        </el-tooltip>
       </div>
       <configCom ref="ref_config" v-model:show="state.tools.showConfig" :map="state.map" :mapFunc="state.mapFunc"/>
       <archiveCom v-model:show="state.tools.showArchive"/>

src/views/web/warning/index.vue

@@ -52,7 +52,7 @@
                 <div class="info-detail">
                   <div class="info-item">预警名称：<div>{{item.ruleName}}</div></div>
                   <div class="info-item">预警时间：<div>{{$util.YMDHms(item.warnTime)}}</div></div>
-                  <div class="info-item">预警区域：<div>{{item.areaName}}<span class="__hover" style="color: #1CFEFF; margin-left: 10px">查看区域</span></div></div>
+                  <div class="info-item">预警区域：<div>{{item.areaName}}</div><span class="__hover" style="color: #1CFEFF; margin-left: 10px"><SvgIcon name="eye" color="#ffffff"/></span></div>
                 </div>
               </div>
             </div>
@@ -178,7 +178,7 @@ const state: any = reactive({
     formReal: {},
     result: {
       total: 0,
-      data: []
+      data: [{}]
     }
   },
   more: {
@@ -368,6 +368,7 @@ $mapHeight: var(--easy-map-height);
             }
           }
           .info-detail {
+            flex: 1;
             font-weight: 400;
             font-size: 16px;
             color: #FFFFFF;
@@ -379,6 +380,15 @@ $mapHeight: var(--easy-map-height);
               >div {
                 flex: 1;
               }
+              >span {
+                width: 28px;
+                height: 28px;
+                background: rgba(129,175,255,0.4);
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
             }
           }
         }