毛玻璃底部操作区

贴一个最近比较喜欢的毛玻璃样式嘻嘻

<div class="text-center footer-opt">
        <el-button @click="preValid('styleForm', 'preview')" :loading="submitLoading" :disabled="submitLoading" v-prevent-re-click
          >预览效果</el-button
        >
        <el-popconfirm
          @confirm="preValid('styleForm', 'updasteStyle')"
          confirm-button-text='提交'
          title="请谨慎操作！"
        >
           <el-button type="primary" slot="reference" :disabled="submitLoading" v-prevent-re-click
          >保存</el-button
        >
        </el-popconfirm>

      </div>

样式

.text-center {
  text-align: center;
}

.footer-opt {
  position: fixed;
  bottom: 0; /* 固定在页面底部 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100%;
  padding: 10px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 给操作区域加上阴影 */
  z-index: 1000; /* 保证按钮在最上面 */

  background: rgba(255, 255, 255, 0.3); /* 半透明的白色背景 */
  backdrop-filter: blur(10px); /* 毛玻璃效果，模糊背景 */
  border-radius: 10px; /* 圆角效果，增加美观 */
  backdrop-filter: blur(15px) saturate(180%) contrast(90%);
}