diff --git a/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue
index 841f557731..70d325a47b 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue
@@ -148,23 +148,23 @@ export default{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
-      isReloadData:true
+      isReloadData:true,
+      oldColor:"",
+      newColor:""
     }
   },
   methods:{
     getDiff(){
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
-      let oldColor = "";
-      let newColor = "";
       if(this.oldData.createTime>this.newData.createTime){
-        oldColor = "rgb(121, 225, 153,0.3)";
-        newColor = "rgb(241,200,196,0.45)"
+        this.oldColor = "rgb(121, 225, 153,0.3)";
+        this.newColor = "rgb(241,200,196,0.45)"
       }else{
-        oldColor = "rgb(241,200,196,0.45)"
-        newColor = "rgb(121, 225, 153,0.3)";
+        this.oldColor = "rgb(241,200,196,0.45)"
+        this.newColor = "rgb(121, 225, 153,0.3)";
       }
-      diff(oldVnode,vnode,oldColor,newColor);
+      diff(oldVnode,vnode,this.oldColor,this.newColor);
       this.isReloadData = false
     },
     setCount(count) {
@@ -180,7 +180,7 @@ export default{
       let oldVnode = this.$refs.oldDependencies
       let vnode = this.$refs.newDependencies
       if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
-        diff(oldVnode,vnode);
+        diff(oldVnode,vnode,this.oldColor,this.newColor);
       }
     }
   },
diff --git a/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
index a8c81c93ff..9413097669 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
@@ -345,23 +345,23 @@ export default{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
-      isReloadData:true
+      isReloadData:true,
+      oldColor:"",
+      newColor:""
     }
   },
   methods:{
     getDiff(){
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
-      let oldColor = "";
-      let newColor = "";
       if(this.oldData.createTime>this.newData.createTime){
-        oldColor = "rgb(121, 225, 153,0.3)";
-        newColor = "rgb(241,200,196,0.45)"
+        this.oldColor = "rgb(121, 225, 153,0.3)";
+        this.newColor = "rgb(241,200,196,0.45)"
       }else{
-        oldColor = "rgb(241,200,196,0.45)"
-        newColor = "rgb(121, 225, 153,0.3)";
+        this.oldColor = "rgb(241,200,196,0.45)"
+        this.newColor = "rgb(121, 225, 153,0.3)";
       }
-      diff(oldVnode,vnode,oldColor,newColor);
+      diff(oldVnode,vnode,this.oldColor,this.newColor);
       this.isReloadData = false
     },
     setCount(count) {
@@ -377,7 +377,7 @@ export default{
       let oldVnode = this.$refs.oldDependencies
       let vnode = this.$refs.newDependencies
       if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
-        diff(oldVnode,vnode);
+        diff(oldVnode,vnode,this.oldColor,this.newColor);
       }
 
     }
diff --git a/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue
index 53d8872697..b6e32eda89 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue
@@ -149,23 +149,23 @@ export default{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
-      isReloadData:true
+      isReloadData:true,
+      oldColor:"",
+      newColor:""
     }
   },
   methods:{
     getDiff(){
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
-      let oldColor = "";
-      let newColor = "";
       if(this.oldData.createTime>this.newData.createTime){
-        oldColor = "rgb(121, 225, 153,0.3)";
-        newColor = "rgb(241,200,196,0.45)"
+        this.oldColor = "rgb(121, 225, 153,0.3)";
+        this.newColor = "rgb(241,200,196,0.45)"
       }else{
-        oldColor = "rgb(241,200,196,0.45)"
-        newColor = "rgb(121, 225, 153,0.3)";
+        this.oldColor = "rgb(241,200,196,0.45)"
+        this.newColor = "rgb(121, 225, 153,0.3)";
       }
-      diff(oldVnode,vnode,oldColor,newColor);
+      diff(oldVnode,vnode,this.oldColor,this.newColor);
       this.isReloadData = false
     },
     setCount(count) {
@@ -181,7 +181,7 @@ export default{
       let oldVnode = this.$refs.oldDependencies
       let vnode = this.$refs.newDependencies
       if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
-        diff(oldVnode,vnode);
+        diff(oldVnode,vnode,this.oldColor,this.newColor);
       }
     }
   },
diff --git a/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue
index 8ec49ed419..8f5628babf 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue
@@ -221,23 +221,23 @@ export default{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
-      isReloadData:true
+      isReloadData:true,
+      oldColor:"",
+      newColor:""
     }
   },
   methods:{
     getDiff(){
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
-      let oldColor = "";
-      let newColor = "";
       if(this.oldData.createTime>this.newData.createTime){
-        oldColor = "rgb(121, 225, 153,0.3)";
-        newColor = "rgb(241,200,196,0.45)"
+        this.oldColor = "rgb(121, 225, 153,0.3)";
+        this.newColor = "rgb(241,200,196,0.45)"
       }else{
-        oldColor = "rgb(241,200,196,0.45)"
-        newColor = "rgb(121, 225, 153,0.3)";
+        this.oldColor = "rgb(241,200,196,0.45)"
+        this.newColor = "rgb(121, 225, 153,0.3)";
       }
-      diff(oldVnode,vnode,oldColor,newColor);
+      diff(oldVnode,vnode,this.oldColor,this.newColor);
       this.isReloadData = false
     },
     setCount(count) {
@@ -253,7 +253,7 @@ export default{
       let oldVnode = this.$refs.oldDependencies
       let vnode = this.$refs.newDependencies
       if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
-        diff(oldVnode,vnode);
+        diff(oldVnode,vnode,this.oldColor,this.newColor);
       }
     }
   },