Просмотр исходного кода

调整修改密码弹窗的不透明度

  为 SmartDialog 根节点增加 data-dialog-id 属性,以便按弹窗 id 单独定制样式;
  针对修改密码弹窗(dialog-change-password)单独提高背景不透明度并增强毛玻璃模糊,
  避免背景透出过多,其他弹窗保持原有半透明效果不变。
画安 дней назад: 2
Родитель
Сommit
398b83e550
1 измененных файлов с 8 добавлено и 1 удалено
  1. 8 1
      src/components/ui/SmartDialog.vue

+ 8 - 1
src/components/ui/SmartDialog.vue

@@ -1,5 +1,5 @@
 <template>
 <template>
-  <div v-show="visible" class="smart-dialog" :style="dialogStyle" @mousedown="onRootMousedown" @dblclick="handleDoubleClick" :class="{ 'no-padding': noPadding, 'is-pending-drag': isPendingDrag, 'is-dragging': isDragging }">
+  <div v-show="visible" class="smart-dialog" :data-dialog-id="id" :style="dialogStyle" @mousedown="onRootMousedown" @dblclick="handleDoubleClick" :class="{ 'no-padding': noPadding, 'is-pending-drag': isPendingDrag, 'is-dragging': isDragging }">
     <div class="dialog-header" :class="{ 'is-draggable': draggable }" @mousedown="startDrag" v-if="title">
     <div class="dialog-header" :class="{ 'is-draggable': draggable }" @mousedown="startDrag" v-if="title">
       <div class="title-content">
       <div class="title-content">
         <slot name="header">
         <slot name="header">
@@ -351,6 +351,13 @@ export default {
   padding: clamp(2px, 0.6cqw, 6px);
   padding: clamp(2px, 0.6cqw, 6px);
   container-type: inline-size;
   container-type: inline-size;
 }
 }
+
+/* 单独提高“修改密码”弹窗的不透明度,避免背景透出过多 */
+.smart-dialog[data-dialog-id="dialog-change-password"] {
+  background: radial-gradient(circle at 20% 0%, rgba(28,70,130,0.9) 0%, rgba(14,34,78,0.96) 70%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
 .smart-dialog.no-padding {
 .smart-dialog.no-padding {
   padding: 0;
   padding: 0;
 }
 }