diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index 5d636e4037..33c8cb8433 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -3,22 +3,21 @@
     ref="canvasCacheDialogRef"
     :append-to-body="true"
     v-model="dialogShow"
-    width="360px"
+    width="420px"
     :show-close="false"
     trigger="click"
+    modal-class="canvasCacheDialog-modal"
+    class="canvasCacheDialog"
   >
-    <el-row style="height: 20px">
-      <el-col :span="3">
-        <Icon name="warn-tree"
-          ><warnTree style="width: 20px; height: 20px; float: right" class="svg-icon"
-        /></Icon>
-      </el-col>
-      <el-col :span="21">
-        <span style="font-size: 13px; margin-left: 10px; font-weight: bold; line-height: 20px">
-          {{ dialogInfo.tips }}
-        </span>
-      </el-col>
-    </el-row>
+    <div style="display: flex; flex-direction: row; align-items: flex-start">
+      <Icon name="warn-tree">
+        <warnTree class="svg-icon warn-tree" />
+      </Icon>
+      <span class="tips">
+        {{ dialogInfo.tips }}
+      </span>
+    </div>
+
     <template #footer>
       <div class="dialog-footer">
         <el-button size="mini" @click="doUseCache(false)">{{ t('visualization.no') }}</el-button>
@@ -67,4 +66,26 @@ defineExpose({
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less">
+.canvasCacheDialog-modal {
+  background: rgba(31, 35, 41, 0.4);
+}
+.canvasCacheDialog {
+  .warn-tree {
+    width: 24px;
+    height: 24px;
+  }
+  .tips {
+    margin-left: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .ed-dialog__header {
+    display: none;
+  }
+  :deep(.ed-dialog__header) {
+    display: none;
+  }
+}
+</style>