样式修改

src/css/knowledgeMap.less

@@ -76,10 +76,10 @@
                     display: inline-block;
                     width: 92px;
                     height: 40px;
-                    text-align: center;
                     line-height: 40px;
                     color: #5A8EEE;
                     position: relative;
+                    padding: 0 10px;
                 }
                 .iconSlide{
                     width: 13px;
@@ -92,12 +92,14 @@
                     display: none;
                     width:90px;
                     line-height: 30px;
-                    text-align: center;
                     background: #fff;
                     color: #333;
                     border: 1px solid #e6e6e6;
                     z-index: 3;
                 }
+                .selectItem{
+                    padding: 0 10px;
+                }
                 .selectItem:hover{
                     background: #E2ECFF;
                 }
@@ -182,13 +184,13 @@
         }
         .bottom{
             background: #fff;
-            padding: 0 10px;
             .tabList{
                 width: 100%;
                 height: 43px;
                 box-sizing: border-box;
                 border-bottom: 1px solid #E6E6E6;
                 position: relative;
+                padding: 0 10px;
                 .tabBox{
                     padding: 0 20px 0 10px;
                 }
@@ -214,7 +216,9 @@
             }
             .tabListShow{
                 border: 1px solid #5A8EEE;
+                // box-shadow:0px 7px 6px -2px #14274B;
                 border-bottom: 1px solid #E6E6E6;
+
             }
             .showTabList{
                 margin-right: 66px;
@@ -223,7 +227,7 @@
             .toggleArrow{
                 width: 11px;
                 position: absolute;
-                top: 19px;
+                top: 18px;
             }
             .toggleTab{
                 display: inline-block;
@@ -231,11 +235,14 @@
                 font-size: 14px ;
                 color: #AAA;
                 line-height: 44px;
-                right: 10px;
+                right: 20px;
                 top: 0;
                 cursor: pointer;
                 padding: 0 10px 0 0;
             }
+            .toggleTabTxt{
+                margin-right: 3px;
+            }
             .hideTabList{
                 position: absolute;
                 background: #fff;
@@ -246,11 +253,12 @@
                 left: -1px;
                 border: 1px solid #5A8EEE;
                 border-top: 0;
-                // box-shadow:0px 14px 22px -6px rgba(20,39,75,0.12);
+                box-shadow:0px 7px 6px -2px rgba(20,39,75,0.2);
             }
             .radioList{
                 height: 60px;
                 line-height: 60px;
+                padding: 0 10px;
             }
             .radioItem{
                 font-size: 14px;
@@ -281,5 +289,6 @@
    }
     .ztree{
         overflow: auto;
+        padding: 0 10px;
     }
 }

src/css/knowledgeTree.less

@@ -79,10 +79,10 @@
                     display: inline-block;
                     width: 92px;
                     height: 40px;
-                    text-align: center;
                     line-height: 40px;
                     color: #5A8EEE;
                     position: relative;
+                    padding: 0 10px;
                 }
                 .iconSlide{
                     width: 13px;
@@ -95,12 +95,14 @@
                     display: none;
                     width:90px;
                     line-height: 30px;
-                    text-align: center;
                     background: #fff;
                     color: #333;
                     border: 1px solid #e6e6e6;
                     z-index: 3;
                 }
+                .selectItem{
+                    padding: 0 10px;
+                }
                 .selectItem:hover{
                     background: #E2ECFF;
                 }
@@ -185,13 +187,13 @@
         }
         .bottom{
             background: #fff;
-            padding: 0 10px;
             .tabList{
                 width: 100%;
                 height: 43px;
                 box-sizing: border-box;
                 border-bottom: 1px solid #E6E6E6;
                 position: relative;
+                padding: 0 10px;
                 .tabBox{
                     padding: 0 20px 0 10px;
                 }
@@ -225,7 +227,7 @@
             .toggleArrow{
                 width: 11px;
                 position: absolute;
-                top: 19px;
+                top: 18px;
             }
             .toggleTab{
                 display: inline-block;
@@ -233,11 +235,14 @@
                 font-size: 14px ;
                 color: #AAA;
                 line-height: 44px;
-                right: 10px;
+                right: 20px;
                 top: 0;
                 cursor: pointer;
                 padding: 0 10px 0 0;
             }
+            .toggleTabTxt{
+                margin-right: 3px;
+            }
             .hideTabList{
                 position: absolute;
                 background: #fff;
@@ -252,6 +257,7 @@
             .radioList{
                 height: 60px;
                 line-height: 60px;
+                padding: 0 10px;
             }
             .radioItem{
                 font-size: 14px;
@@ -282,5 +288,6 @@
     }
     .ztree{
         overflow: auto;
+        padding: 0 10px;
     }
 }

src/js/graphMap.js

@@ -469,6 +469,10 @@ function renderTab(data){
     for(let i = 0; i < hideList.length; i++){
         hidetabStr +=`<span class="tab " data-id="${hideList[i]}">${hideList[i]}</span>`
     }
+    hidetabStr += `<div class="toggleTab">
+    <span class="toggleTabTxt">收起</span>
+    <img class="toggleArrow" src="./images/iconUp.png" alt="">
+</div>`
     // console.log('showtabStr',showtabStr)
     
     $('.showTabList').html(showtabStr)
@@ -490,17 +494,21 @@ function ToggleTab(){
 function showHideTab(){
     $(".hideTabList").slideDown()
     $(".tabList").addClass("tabListShow")
-    $(".toggleTabTxt").html("收起")
-    $(".toggleArrow").attr("src",iconUp)
+    $(".toggleTab").css("display","none")
+    $(".hideTabList .toggleTab").css("display","inline-block")
+    // $(".toggleTabTxt").html("收起")
+    // $(".toggleArrow").attr("src",iconUp)
 }
 function hideHideTab(e){
     $(".hideTabList").slideUp()
-    $(".toggleTabTxt").html("展开")
-    $(".toggleArrow").attr("src",iconDown)
+    // $(".toggleTabTxt").html("展开")
+    // $(".toggleArrow").attr("src",iconDown)
     setTimeout(function(){
         $(".tabList").removeClass("tabListShow")
+        $(".toggleTab").css("display","block")
     },500)
     
+    
 }
 bindTabClick()
 //切换tab
@@ -586,8 +594,8 @@ function setTabBottomHei(type){
     }else{
         $('.selectedName').attr('title', name)
         $("#searchInp").attr("placeholder",`请输入${name}名称`)
-        if(name.length > 3){
-            $('.selectedName').html(name.slice(0,2)+'...')
+        if(name.length > 4){
+            $('.selectedName').html(name.slice(0,4)+'...')
         }else{
             $('.selectedName').html(name)
         }

src/js/schemaMap.js

@@ -374,6 +374,10 @@ function renderTab(data){
     for(let i = 0; i < hideList.length; i++){
         hidetabStr +=`<span class="tab " data-id="${hideList[i]}">${hideList[i]}</span>`
     }
+    hidetabStr += `<div class="toggleTab">
+        <span class="toggleTabTxt">收起</span>
+        <img class="toggleArrow" src="./images/iconUp.png" alt="">
+    </div>`
     // console.log('showtabStr',showtabStr)
     
     $('.showTabList').html(showtabStr)
@@ -395,16 +399,21 @@ function ToggleTab(){
 function showHideTab(){
     $(".hideTabList").slideDown()
     $(".tabList").addClass("tabListShow")
-    $(".toggleTabTxt").html("收起")
-    $(".toggleArrow").attr("src",iconUp)
+    $(".toggleTab").css("display","none")
+    $(".hideTabList .toggleTab").css("display","inline-block")
+    // $(".toggleTabTxt").html("收起")
+    // $(".toggleArrow").attr("src",iconUp)
 }
-function hideHideTab(){
+function hideHideTab(e){
     $(".hideTabList").slideUp()
-    $(".toggleTabTxt").html("展开")
-    $(".toggleArrow").attr("src",iconDown)
+    // $(".toggleTabTxt").html("展开")
+    // $(".toggleArrow").attr("src",iconDown)
     setTimeout(function(){
         $(".tabList").removeClass("tabListShow")
+        $(".toggleTab").css("display","block")
     },500)
+    
+    
 }
 bindTabClick()
 //切换tab
@@ -489,8 +498,8 @@ function setTabBottomHei(type){
     }else{
         $('.selectedName').attr('title', name)
         $("#searchInp").attr("placeholder",`请输入${name}名称`)
-        if(name.length > 3){
-            $('.selectedName').html(name.slice(0,2)+'...')
+        if(name.length > 4){
+            $('.selectedName').html(name.slice(0,4)+'...')
         }else{
             $('.selectedName').html(name)
         }