diff --git a/src/assets/css/components/views/entityExplorer/entity-graph.scss b/src/assets/css/components/views/entityExplorer/entity-graph.scss
index d1d2b805..8cf9f93d 100644
--- a/src/assets/css/components/views/entityExplorer/entity-graph.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-graph.scss
@@ -1,3 +1,6 @@
+$color-business: var(--el-color-business);
+$color-primary: var(--el-text-color-primary);
+$color-regular: var(--el-text-color-regular);
 .graph-toolbar {
   position: fixed;
   top: 100px;
@@ -15,12 +18,13 @@
       cursor: pointer;
 
       i {
-        color: #575757;
+        color: $color-regular;
         font-size: 18px;
       }
 
       &.toolbar--unactivated {
         cursor: default;
+
         i {
           opacity: .4;
         }
@@ -28,6 +32,7 @@
     }
   }
 }
+
 .entity-graph {
   display: flex;
 
@@ -44,7 +49,7 @@
       .graph-node__text {
         width: 120px;
         font-size: 12px;
-        color: #353636;
+        color: $color-primary;
       }
 
       &.graph-node--root {
@@ -57,30 +62,38 @@
           box-shadow: none;
           animation: none;
         }
+
         &.graph-node--ip {
-          border-color: #CBD9BB !important;
-          box-shadow: 0 0 0 8px rgba(126,159,84,0.14);
+          border-color: var(--el-color-success-light-5) !important;
+          box-shadow: 0 0 0 8px rgba(126, 159, 84, 0.14);
+
           i {
-            color: #7E9F54;
+            color: var(--el-color-success);
           }
         }
+
         &.graph-node--domain {
-          border-color: #AFDEED !important;
-          box-shadow: 0 0 0 8px rgba(56,172,210,0.14);
+          border-color: var(--el-color-primary-light-7) !important;
+          box-shadow: 0 0 0 8px rgba(56, 172, 210, 0.14);
+
           i {
-            color: #38ACD2;
+            color: $color-business;
           }
         }
+
         &.graph-node--app {
-          border-color: #F5DAA3 !important;
-          box-shadow: 0 0 0 8px rgba(229,162,25,0.14);
+          border-color: var(--el-color-warning-light-5) !important;
+          box-shadow: 0 0 0 8px rgba(229, 162, 25, 0.14);
+
           i {
-            color: #E5A219;
+            color: var(--el-color-warning);
           }
         }
+
         i {
           font-size: 36px;
         }
+
         .graph-node__text {
           padding-top: 30px;
         }
@@ -90,19 +103,21 @@
         padding-top: 20px;
         width: 66px;
         height: 66px;
-        border: 1px solid #A7B0B9 !important;
+        border: 1px solid #A7B0B9 !important; // 该class并未使用到
         box-shadow: none;
 
         // 覆盖自带的node点击效果
         &.rel-node-checked {
-          box-shadow: 0 0 0 5px rgba(151,151,151,0.21);
+          box-shadow: 0 0 0 5px rgba(151, 151, 151, 0.21);
           animation: none;
-          border-color: #778391 !important;
+          border-color: $color-regular !important;
         }
+
         i {
           font-size: 24px;
-          color: #778391;
+          color: $color-regular;
         }
+
         .graph-node__text {
           padding-top: 24px;
         }
@@ -116,19 +131,22 @@
 
         &.graph-node--ip {
           i {
-            color: #7E9F54;
+            color: var(--el-color-success);
           }
         }
+
         &.graph-node--domain {
           i {
-            color: #38ACD2;
+            color: $color-business;
           }
         }
+
         &.graph-node--app {
           i {
-            color: #E5A219;
+            color: var(--el-color-warning);
           }
         }
+
         i {
           font-size: 21px;
         }
@@ -141,6 +159,7 @@
       left: unset !important;
       right: 0 !important;
     }
+
     .entity-graph__detail {
       height: calc(100% - 100px) !important;
       top: 100px !important;
@@ -151,7 +170,7 @@
   }
 
   .g6-component-tooltip {
-    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
 
     .primary-node-tooltip {
       padding: 5px;
@@ -161,19 +180,21 @@
         align-items: center;
 
         i {
-          color: #717171;
+          color: $color-regular;
           font-size: 14px;
         }
+
         .tooltip__title {
           padding-left: 6px;
           font-size: 15px;
           line-height: 15px;
-          color: #111;
+          color: $color-primary;
         }
       }
+
       .tooltip__content {
         padding-top: 10px;
-        color: #222;
+        color: $color-primary;
         font-size: 12px;
 
         span:first-of-type {
@@ -181,6 +202,7 @@
         }
       }
     }
+
     .entity-node-tooltip {
       width: 300px;
       padding: 5px;
@@ -193,7 +215,7 @@
         .tooltip__title {
           font-size: 15px;
           line-height: 15px;
-          color: #111;
+          color: $color-primary;
         }
       }
 
@@ -208,11 +230,12 @@
           .header-icon {
             width: 3px !important;
             height: 12px !important;
-            background: #38ACD2;
+            background: $color-business;
             border-radius: 1px;
             margin-right: 6px;
           }
         }
+
         .content-tag-list {
           display: flex;
           align-items: flex-start;
@@ -226,22 +249,25 @@
             border: 1px solid;
             border-radius: 2px;
 
-            $normal-color: #778391;
-            $normal-light-color: #F7F8F9;
-            $negative-color: #E26154;
-            $negative-light-color: #FEF6F5;
-            $positive-color: #749F4D;
-            $positive-light-color: #F7FAF5;
+            $normal-color: $color-regular;
+            $normal-light-color: var(--el-fill-color-light);
+            $negative-color: var(--el-color-danger);
+            $negative-light-color: var(--el-color-danger-light-9);
+            $positive-color: var(--el-color-success);
+            $positive-light-color: var(--el-color-success-light-9);
+
             &.entity-tag--level-two-normal {
               border-color: $normal-color;
               color: $normal-color;
               background-color: $normal-light-color;
             }
+
             &.entity-tag--level-two-negative {
               border-color: $negative-color;
               color: $negative-color;
               background-color: $negative-light-color;
             }
+
             &.entity-tag--level-two-positive {
               border-color: $positive-color;
               color: $positive-color;
diff --git a/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
index 41ab1046..d5c9ebee 100644
--- a/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
@@ -1,4 +1,6 @@
 $font-size: 12px;
+$color-regular: var(--el-text-color-regular);
+$color-primary: var(--el-text-color-primary);
 .graph-detail-basic-info {
   position: relative;
   padding-bottom: 12px;
@@ -6,19 +8,23 @@ $font-size: 12px;
   justify-content: space-between;
   //height: 100%;
 
+  .graph-detail-basic-info__block {
+    display: flex;
+  }
+
   .graph-detail-header {
     display: flex;
     flex-direction: column;
 
     .entity-graph-type {
       font-size: 12px;
-      color: #717171;
+      color: $color-regular;
       font-weight: 400;
     }
   }
 
   .entity-type {
-    color: #717171;
+    color: $color-regular;
   }
 
   .graph-basic-info {
@@ -34,7 +40,7 @@ $font-size: 12px;
         padding-right: 10px;
         max-width: 260px;
         font-size: 20px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 700;
         white-space: nowrap;
         overflow: hidden;
@@ -48,12 +54,12 @@ $font-size: 12px;
         height: 18px;
         width: 18px;
         border-radius: 50%;
-        background-color: #EFF1F4;
+        background-color: var(--el-bg-color-page);
         cursor: pointer;
         flex-shrink: 0;
 
         i {
-          color: #717171;
+          color: $color-regular;
           font-size: 10px;
           -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
         }
@@ -71,17 +77,17 @@ $font-size: 12px;
     align-items: center;
     margin-right: 10px;
     border-radius: 50%;
-    background-color: #F3F7FA;
+    background-color: var(--el-fill-color-light);
 
     i {
       font-size: 26px;
-      color: #4E84B4;
+      color: #4E84B4; // todo 待确定
     }
   }
 }
 
 .graph-close {
-  color: #575757;
+  color: $color-regular;
   font-size: 8px;
   cursor: pointer;
 }
@@ -108,7 +114,7 @@ $font-size: 12px;
         width: 130px;
         font-family: NotoSansSChineseRegular;
         font-size: $font-size;
-        color: #717171;
+        color: $color-regular;
         font-weight: 400;
         padding-right: 10px;
         flex-shrink: 0;
@@ -116,7 +122,7 @@ $font-size: 12px;
 
       .graph-content-item-value {
         width: 230px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         overflow-wrap: break-word;
         line-height: normal;
@@ -130,7 +136,7 @@ $font-size: 12px;
 
       .graph-relationship-item-label, .graph-relationship-item-value {
         font-size: $font-size;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         //height: 40px;
         display: flex;
@@ -143,7 +149,7 @@ $font-size: 12px;
       }
 
       .graph-relationship-item-value {
-        color: #717171;
+        color: $color-regular;
 
         i {
           cursor: pointer;
@@ -152,6 +158,10 @@ $font-size: 12px;
     }
   }
 
+  .margin-t--4 {
+    margin-top: -4px;
+  }
+
   .graph-tag-list {
     display: flex;
     align-items: flex-start;
@@ -184,14 +194,14 @@ $font-size: 12px;
 //修改popover样式
 .graph-popover {
   width: auto !important;
-  background: #303133 !important;
-  color: #fff !important;
+  background: $color-primary !important;
+  color: var(--el-color-white) !important;
   font-size: 12px !important;
   padding: 10px !important;
 }
 
 .graph-popover .el-popper__arrow::before {
-  background: #303133 !important;
+  background: $color-primary !important;
 }
 
 .graph-expand-relationship__icon {
@@ -200,6 +210,6 @@ $font-size: 12px;
 
 .graph-basic-info__block-title {
   font-size: 13px;
-  color: #353636;
+  color: $color-primary;
   font-weight: 600;
 }
diff --git a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
index 5d448ed4..ed895195 100644
--- a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
@@ -1,4 +1,6 @@
 $font-size: 12px;
+$color-primary: var(--el-text-color-primary);
+$color-regular: var(--el-text-color-regular);
 .graph-list-header {
   display: flex;
   justify-content: space-between;
@@ -10,21 +12,21 @@ $font-size: 12px;
 
     span {
       font-size: 16px;
-      color: #353636;
+      color: $color-primary;
       line-height: 21px;
       font-weight: 600;
     }
 
     .graph-list-header-icon {
       font-size: 21px;
-      color: #717171;
+      color: $color-regular;
       margin-right: 9px;
     }
   }
 
   .graph-list-header-number {
     font-size: 12px;
-    color: #717171;
+    color: $color-regular;
     font-weight: 400;
 
     span {
@@ -37,20 +39,24 @@ $font-size: 12px;
   margin-top: 16px;
   margin-bottom: 24px;
 
+  .graph-list-expand-btn__display {
+    display: inline-flex;
+  }
+
   .graph-list-expand-btn {
     height: 28px;
     line-height: 28px;
-    background: #38ACD2;
+    background: var(--el-color-business);
     border-radius: 3px;
     font-size: 12px;
-    color: #FFFFFF;
+    color: var(--el-color-white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 500;
     padding: 14px 10px;
     cursor: pointer;
-    border: 1px solid rgba(46,136,166,0.85);
+    border: 1px solid rgba(46, 136, 166, 0.85);
 
     i {
       font-size: 16px;
@@ -66,7 +72,7 @@ $font-size: 12px;
 
 .graph-list-content-header {
   font-size: 14px;
-  color: #353636;
+  color: $color-primary;
   font-weight: 500;
 }
 
@@ -76,14 +82,14 @@ $font-size: 12px;
   .graph-list-item-ip {
     margin-bottom: 10px;
     font-size: $font-size;
-    color: #353636;
+    color: $color-primary;
     font-weight: 400;
   }
 
   .graph-list-item-block {
     width: 100%;
-    background: rgba(247, 247, 247, 1);
-    border: 1px solid rgba(226, 229, 236, 1);
+    background: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-light);
     border-radius: 2px;
     padding: 10px 15px;
 
@@ -94,7 +100,7 @@ $font-size: 12px;
         width: 72px;
         //margin-right: 15px;
         font-size: $font-size;
-        color: #717171;
+        color: $color-regular;
         font-weight: 400;
         flex-shrink: 0;
       }
@@ -110,12 +116,12 @@ $font-size: 12px;
         width: 14px;
         height: 10px;
         margin-right: 5px;
-        border: 1px solid #E8E8E8;
+        border: 1px solid var(--el-color-info-light-8);
       }
 
       .graph-list-item-value {
         font-size: $font-size;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         line-height: 18px;
         display: flex;
@@ -125,7 +131,12 @@ $font-size: 12px;
 
       .graph-list-item-value1 {
         display: flex;
-        align-content: center;
+        align-items: center;
+        line-height: 14px;
+
+        div {
+          line-height: 10px;
+        }
       }
     }
 
@@ -150,6 +161,6 @@ $font-size: 12px;
 .graph-list-dividing-line {
   width: 300px;
   height: 1px;
-  background: #ECECEC;
+  background: var(--el-color-info-light-8);
   margin: 11px 0;
 }
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
index 4d9ddd4a..dff3acbc 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <!--title-->
   <div class="graph-detail-basic-info">
-    <div style="display: flex">
+    <div class="graph-detail-basic-info__block">
       <div class="graph-detail__icon"><i :class="iconClass"></i></div>
 
       <div class="graph-detail-header">
@@ -47,7 +47,7 @@
       </div>
     </div>
 
-    <div class="graph-basic-info__block-content" style="margin-top: -4px;">
+    <div class="graph-basic-info__block-content margin-t--4">
       <div v-for="item in relationList" :key="item.name">
         <div class="graph-content-item graph-content-relationship-item" v-if="item.value === item.total">
           <div class="graph-relationship-item-label">
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityList.vue b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
index c478843a..1d377e7a 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityList.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
@@ -16,7 +16,7 @@
     </div>
 
     <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
+      <div class="graph-list-expand-btn graph-list-expand-btn__display" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" @click="expandList">
           <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
         {{ $t('entity.graph.continueToExpand') }}
       </div>
@@ -39,8 +39,8 @@
               <div class="graph-list-item-block">
                 <div class="graph-list-item padding-b-4">
                   <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
-                  <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;line-height: 14px;">
-                    <div style="line-height: 10px">
+                  <div class="graph-list-item-value graph-list-item-value1">
+                    <div>
                       <img v-if="getCountry(item.detail)===countryNameIdMapping.Unknown || !countryNameIdMapping[getCountry(item.detail)]" src="../../../../public/images/flag/Unknown.svg" class="graph-list-country-flag">
                       <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[getCountry(item.detail)]}.png`)" class="graph-list-country-flag" >
                     </div>