From 7aa97eaf2370b14e556e07e3c967be9919b8e640 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 23 Sep 2025 15:29:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A3=A8=E7=A0=82=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/cssDemo.vue | 43 ++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/views/demo/cssDemo.vue b/src/views/demo/cssDemo.vue
index 846b55b..8c0c0e2 100644
--- a/src/views/demo/cssDemo.vue
+++ b/src/views/demo/cssDemo.vue
@@ -1,6 +1,9 @@
 <template>
-    <base-container>
-        <el-card header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色">
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card
+            class="mb-5"
+            header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色"
+        >
             <div class="father">
                 <div class="child1">单个子元素</div>
             </div>
@@ -12,12 +15,24 @@
             </div>
         </el-card>
 
-        <el-card header="border渐变实现">
+        <el-card
+            class="mb-5"
+            header="border渐变实现"
+        >
             <div class="input-box">
                 <div class="input" />
             </div>
         </el-card>
-    </base-container>
+
+        <el-card
+            class="mb-5"
+            header="磨砂玻璃效果"
+        >
+            <div class="blurred-glass-box">
+                <div class="modal flex justify-center items-center"><h1>磨砂玻璃上的内容</h1></div>
+            </div>
+        </el-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
@@ -59,4 +74,24 @@
         linear-gradient(45deg, #f6855c, #e29cf9, #5cacfe) border-box;
     padding-left: 5px;
 }
+
+.blurred-glass-box {
+    width: 100%;
+    height: 300px;
+    background: url('/src/views/demo/tuiImageEditor/img/test.jpg') no-repeat center center;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > .modal {
+        width: 300px;
+        height: 200px;
+        background: rgba($color: #fff, $alpha: 0.4);
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+        overflow: hidden;
+        color: #f00;
+    }
+}
 </style>