*

dsk-operate-ui/src/layout/components/TagsView/index.vue

 <template>
   <div id="tags-view-container" class="tags-view-container">
     <div class="alltags" v-if="visitedViews.length > 0">
-      <div class="" @click="closeall"><i class="el-icon-arrow-down" v-if="!showall"></i> <i class="el-icon-arrow-up" v-if="showall"></i></div>
+      <div class="imgs" @click="closeall">
+        <img src="@/assets/images/all.png" v-if="!showall"/>
+        <img src="@/assets/images/all_on.png" v-if="showall"/>
+        <!--<i class="el-icon-arrow-down" v-if="!showall"></i> <i class="el-icon-arrow-up" v-if="showall"></i>-->
+        </div>
       <div class="tagslist" v-if="showall">
         <!--<div v-for="(tag, index) in visitedViews"-->
         <!--:key="tag.path"-->
@@ -340,7 +344,7 @@ export default {
         }
       }
       &:first-of-type {
-        margin-left: 24px;
+        margin-left: 64px;
       }
       &:hover {
         .el-icon-close{
@@ -384,43 +388,55 @@ export default {
     }
   }
   .alltags{
-    position: fixed;
+    position: absolute;
     align-items: center;
-    border-radius: 9px;
-    height: 17px;
     justify-content: center;
-    width: 36px;
-    right: 10px;
-    top: 37px;
+    width: 24px;
+    height: 24px;
+    left: 24px;
+    top: 28px;
     cursor: pointer;
     text-align: center;
-    &:hover{
-      background: #EFEFEF;
+    z-index: 10;
+    &::after{
+      content: ' ';
+      position: absolute;
+      border-right: 1px solid #EFEFEF;
+      height: 18px;
+      width: 0;
+      top: 3px;
+      right: -8px;
+    }
+    .imgs>img{
+      width: 24px;
+      height: 24px;
     }
     .tagslist{
       position: absolute;
-      right: 0;
-      top: 20px;
+      left: 0;
+      top: 32px;
       background-color: #fcfcfc;
       color: #141414;
       font-size: 13px;
       line-height: 1em;
       margin-bottom: 0;
       max-height: 450px;
-      overflow-y: auto;
+      /*overflow-y: auto;*/
       overflow-y: overlay;
-      padding: 20px 0 10px;
+      padding: 8px 0 0;
       width: 325px;
       text-align: left;
+      border-radius: 4px;
       box-shadow: 0 2px 9px 2px rgba(0,0,0,.09), 0 1px 2px -2px rgba(0,0,0,.16);
       .tags-view-item{
         display: block;
         position: relative;
         >div{
-          padding: 8px 24px;
+          padding: 8px 8px 8px 32px;
+          line-height: 20px;
         }
         &:hover{
-          color: #0081FF;
+          background: rgba(0, 0, 0, 0.04);
         }
         .el-icon-check{
           display: none;
@@ -429,18 +445,20 @@ export default {
           width: 13px;
         }
         &.active{
-          color: #0081FF;
+          background: rgba(0, 129, 255, 0.04);
           .el-icon-check{
             display: block;
+            color: #0081FF;
           }
         }
       }
       .clasall{
         border-top: 1px solid #EFEFEF;
-        padding: 10px 24px 0;
-        margin-top: 10px;
+        padding: 10px 32px;
+        line-height: 20px;
+        color: #FF3C3C;
         &:hover{
-          color: #0081FF;
+          background: #FFECE8;
         }
       }
     }