diff --git a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
index 0192b360ba..1262eb11d7 100644
--- a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
+++ b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     ref="previewPopDialog"
-    :custom-class="'preview_pop_custom'"
+    modal-class="preview_pop_custom"
     :append-to-body="true"
     :fullscreen="state.fullscreen"
     v-model="state.dialogShow"
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index c8d177259a..ad509cd7d2 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -119,19 +119,44 @@ const btnStyle = computed(() => {
   return style
 })
 
+function rgbaTo16color(color) {
+  let val = color
+    .replace(/rgba?\(/, '')
+    .replace(/\)/, '')
+    .replace(/[\s+]/g, '')
+    .split(',')
+  let a = parseFloat(val[3] || 1),
+    r = Math.floor(a * parseInt(val[0]) + (1 - a) * 255),
+    g = Math.floor(a * parseInt(val[1]) + (1 - a) * 255),
+    b = Math.floor(a * parseInt(val[2]) + (1 - a) * 255)
+  return (
+    '#' +
+    ('0' + r.toString(16)).slice(-2) +
+    ('0' + g.toString(16)).slice(-2) +
+    ('0' + b.toString(16)).slice(-2)
+  )
+}
+
 const btnHoverStyle = computed(() => {
+  let btnColor = customStyle.btnColor
+  if (customStyle.btnColor.startsWith('rgb')) {
+    btnColor = rgbaTo16color(customStyle.btnColor)
+  } else {
+    btnColor = customStyle.btnColor.substr(1)
+  }
+
   return {
     rawColor: customStyle.btnColor ?? '#3370ff',
     hoverColor: customStyle.btnColor
       ? colorFunctions
-          .mix(new colorTree('ffffff'), new colorTree(customStyle.btnColor.substr(1)), {
+          .mix(new colorTree('ffffff'), new colorTree(btnColor), {
             value: 15
           })
           .toRGB()
       : '#5285FF',
     activeColor: customStyle.btnColor
       ? colorFunctions
-          .mix(new colorTree('000000'), new colorTree(customStyle.btnColor.substr(1)), {
+          .mix(new colorTree('000000'), new colorTree(btnColor), {
             value: 15
           })
           .toRGB()
diff --git a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
index 1d3671b9c7..22aa4a4e49 100644
--- a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
+++ b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
@@ -80,7 +80,7 @@ defineExpose({
   <el-dialog
     v-model="dialogVisible"
     width="600"
-    custom-class="tree-field_dialog"
+    modal-class="tree-field_dialog"
     :before-close="handleBeforeClose"
     @mousedown.stop
     @mousedup.stop
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index 7bf54f74a9..c7723c83b0 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -2566,7 +2566,7 @@ const getIconNameCalc = (deType, extField, dimension = false) => {
     ref="creatDsFolder"
   ></creat-ds-group>
   <el-dialog
-    custom-class="calc-field-edit-dialog"
+    modal-class="calc-field-edit-dialog"
     v-model="editCalcField"
     width="1000px"
     :title="calcTitle"