diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 240606b2e..cd641e9cf 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -359,7 +359,7 @@ li{
   cursor: default;
 }
 .nz-btn-group {
-  border-radius: 4px;
+  border-radius: 2px;
   display: flex;
 }
 .nz-btn-group-size-small {
@@ -1513,7 +1513,7 @@ li{
 /* start--param*/
 .param-box, .tag-edit-box {
   border: 1px solid #DCDFE6;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .param-box-endpoint {
   height: 325px;
@@ -2302,7 +2302,7 @@ li{
 .right-box-form  .nz-icon-minus-medium{
   padding: 2px 6px;
   background: rgba(236,127,102,.1);
-  border-radius: 4px;
+  border-radius: 2px;
   cursor: pointer;
 }
 .right-box-form .form-row-item .nz-icon-minus-position{
@@ -2323,7 +2323,7 @@ li{
 .right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
   background: rgba(250,144,28,.1);
   padding:4px 6px;
-  border-radius: 4px;
+  border-radius: 2px;
   cursor: pointer;
 }
 .right-box .right-box-form-add .nz-icon-create-square{
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 515eb612a..f44be1fe5 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -352,7 +352,7 @@
                     <!--el-input__inner-->
                   </el-select>
                   <div class="color-show" style="display:inline-block;width: calc(100% - 72px);margin-left: -5px;border-radius: 0 5px 5px 0" @click="colorPickerClick('gradientColor')">
-                    <div class="color-show-left" :style="{background:selection.pen.data.gradientColor,display:'inline-block','margin-top':'5px'}"></div>
+                    <div class="color-show-left" :style="{background:selection.pen.data.gradientColor,display:'inline-block','margin-top':'5px','margin-left':'12px'}"></div>
                     <span class="color-text" style="vertical-align: text-bottom"> {{selection.pen.data.gradientColor}}</span>
                     <span class="color-arrows" style="top: 13px; right: 20px">
                   <i class="nz-icon nz-icon-arrow-down" v-if="$refs['gradientColor']&&!$refs['gradientColor'].showPicker"></i>
@@ -1700,13 +1700,15 @@
     background: rgb(245, 247, 250);
   }
   .color-before-select  .el-input__prefix{
-    background: #fff;
     left: 1px;
-    color: #333;
+    /*color: #333;*/
     width: 30px;
     height: 29px;
     top: 1px;
   }
+  .color-before-select  .el-select-dropdown__item{
+    text-align: center;
+  }
 </style>
 <style lang="scss" scoped>
   .project-title {
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 9eb7a80bb..d2056bc5a 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -375,7 +375,10 @@
       </div>
 
     </el-dialog>
-
+    <div class="right-bottom-zoom">
+      <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+      <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+    </div>
   </div>
 </template>
 
@@ -1474,18 +1477,19 @@
             case 'space':
             case 'scale':
             case 'translate':
-              if(!this.timer2){
-                this.timer2=setTimeout(()=>{
                   this.getNodesArr();
-                  this.timer2=null
-                },300)
-              }else{
-                clearTimeout(this.timer2);
-                this.timer2=setTimeout(()=>{
-                  this.getNodesArr();
-                  this.timer2=null
-                },300)
-              }
+              // if(!this.timer2){
+              //   this.timer2=setTimeout(()=>{
+              //     this.getNodesArr();
+              //     this.timer2=null
+              //   },300)
+              // }else{
+              //   clearTimeout(this.timer2);
+              //   this.timer2=setTimeout(()=>{
+              //     this.getNodesArr();
+              //     this.timer2=null
+              //   },300)
+              // }
               break;
           }
         },0);
@@ -2051,7 +2055,10 @@
         this.uploadPic.unit='';
         this.file=null;
         this.uploadPicShow=true;
-      }
+      },
+      zoomMap(num){
+        getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale+num);
+      },
     },
     destroyed(){
       getTopology(this.topologyIndex).destroy();