1208-1

src/views/home/Header.vue

@@ -25,7 +25,7 @@
           <i class="btn-fulls" @click="handleFullExtent"></i>
           <i class="btn-tools" @click="changeToolsShow()"></i>
           <div class="tool-box" v-show="toolsShow">
-            <i class="tb-icon-close" @click="changeToolsShow(false)"></i>
+            <!-- <i class="tb-icon-close" @click="changeToolsShow(false)"></i> -->
             <div class="search-wrapper">
               <input type="text" class="tools-search"/>
               <i class="search-btn"></i>
@@ -231,6 +231,7 @@ export default {
     { name: '水位情况', icon: require('@/assets/imgs/tool/tool-swqk.png'), iconOn: require('@/assets/imgs/tool/tool-swqk-h.png'), status: false },
     { name: '视频融合', icon: require('@/assets/imgs/tool/tool-sprh.png'), iconOn: require('@/assets/imgs/tool/tool-sprh-h.png'), status: false },
     { name: '中燃船舶', icon: require('@/assets/imgs/tool/tool-zrcb.png'), iconOn: require('@/assets/imgs/tool/tool-zrcb-h.png'), status: false },
+    { name: '杭申线', icon: require('@/assets/imgs/tool/tool-hsx.png'), iconOn: require('@/assets/imgs/tool/tool-hsx-h.png'), status: false },
   ])
 
   const toolsShow = ref(true)
@@ -325,6 +326,9 @@ export default {
           toolList[index].status = !toolList[index].status
         }, 200);
         break;
+      case 9:
+        if(status) { hsxOn() } else { hsxOff() }
+        break;
     }
 
   }
@@ -471,6 +475,22 @@ export default {
     callUIInteractionFormat(action);
   }
 
+  function hsxOn() {
+    let action = {
+      "ActionName":"hangshenxian",
+      "Parameters":{ "show":"true" }
+    }
+    callUIInteractionFormat(action);
+  }
+
+  function hsxOff() {
+    let action = {
+      "ActionName":"hangshenxian",
+      "Parameters":{ "show":"false" }
+    }
+    callUIInteractionFormat(action);
+  }
+
   bus.on('hideToolBox', () => { toolsShow.value = false});
 
   onBeforeUnmount(() => {
@@ -614,29 +634,29 @@ export default {
       right: 360px;
       display: inline-block;
       width: 33.8vh;
-      height: 40vh;
+      height: 44vh;
       background: url('@/assets/imgs/tool/toolbox-bg.png') no-repeat;
-      background-size: contain;
+      background-size: 100% 100%;
       box-sizing: border-box;
       padding-top: 28px;
 
-      .tb-icon-close {
-        position: absolute;
-        display: block;
-        right: 13px;
-        top: 33px;
-        width: 20px;
-        height: 20px;
-        background: url('@/assets/imgs/tool/toolbox-close.png') no-repeat;
-        background-size: contain;
-        cursor: pointer;
-      }
+      // .tb-icon-close {
+      //   position: absolute;
+      //   display: block;
+      //   right: 10px;
+      //   top: 40px;
+      //   width: 20px;
+      //   height: 20px;
+      //   background: url('@/assets/imgs/tool/toolbox-close.png') no-repeat;
+      //   background-size: contain;
+      //   cursor: pointer;
+      // }
 
       .search-wrapper {
         position: relative;
         width: 100%;
-        height: 8.2%;
-        margin-top: 26px;
+        height: 8%;
+        margin-top: 24px;
         text-align: center;
         .tools-search {
           box-sizing: border-box;
@@ -665,9 +685,9 @@ export default {
 
       .tool-items-wrapper {
         box-sizing: border-box;
-        padding: 4% 6% 6%;
-        width: 100%;
-        height: 84%;
+        padding: 2% 6% 3%;
+        width: 99%;
+        height: 86%;
         display: flex;
         justify-content: flex-start;
         align-items: stretch;
@@ -686,6 +706,8 @@ export default {
           }
           .tool-label {
             font-size: 12px;
+            width: 50px;
+            text-align-last: justify;
           }
           .tool-label-highlight {
             color: yellow;
@@ -790,7 +812,7 @@ export default {
 
     .water-level {
       position: absolute;
-      bottom: -77vh;
+      bottom: -79vh;
       right: 19vw;
       width: 360px;
       height: 370px;