u

code/app/base-app/test.html

@@ -1,84 +1,91 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Curved TabBar</title>
-<style>
-  body {
-    margin: 0;
-    padding: 0;
-    background: #f5f5f5;
-  }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TabBar 毛玻璃示例</title>
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      font-family: Arial, sans-serif;
+      background:red; /* 浅灰渐变背景 */
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end; /* TabBar 固定底部 */
+    }
 
-  /* TabBar 容器 */
-  .tabbar-container {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: 80px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    z-index: 10;
-  }
+    .content {
+      flex: 1;
+      padding: 20px;
+    }
 
-  /* TabBar 背景弧形 */
-  .tabbar-bg {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 60px;
-    background: white;
-    border-top-left-radius: 30px;
-    border-top-right-radius: 30px;
-    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
-  }
+    .tabbar {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 70px;
+      backdrop-filter: blur(12px); /* 毛玻璃效果 */
+      -webkit-backdrop-filter: blur(12px);
+      background-color: rgba(255, 255, 255, 0.4); /* 半透明叠加色，让白色背景可见毛玻璃 */
+      border-top: 1px solid rgba(200, 200, 200, 0.3);
+      border-radius: 20px 20px 0 0;
+      padding-bottom: 10px;
+      padding-top: 10px;
+    }
 
-  /* Tab 按钮 */
-  .tab-item {
-    flex: 1;
-    text-align: center;
-    line-height: 60px;
-    font-size: 24px;
-    color: #9ca3af;
-    transition: transform 0.2s;
-    position: relative;
-    z-index: 20;
-  }
+    .tabbar-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #333;
+      font-size: 12px;
+      text-decoration: none;
+    }
 
-  .tab-item.active {
-    color: #333333;
-  }
+    .tabbar-item.active {
+      color: #007aff;
+    }
 
-  .tab-item:hover {
-    transform: scale(1.2);
-  }
-
-  /* 中间凸起按钮 */
-  .tab-item.center {
-    width: 70px;
-    height: 70px;
-    background: #4f46e5;
-    border-radius: 50%;
-    color: white;
-    line-height: 70px;
-    margin-top: -20px; /* 嵌入凹槽 */
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-    font-size: 28px;
-  }
-</style>
+    /* 图标示例，用圆圈代替 */
+    .icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color: currentColor;
+      margin-bottom: 4px;
+    }
+  </style>
 </head>
 <body>
+  <div class="content">
+    <p>这里是页面内容，TabBar 放在底部。</p>
+    <p>背景是浅灰渐变，所以毛玻璃效果会明显。</p>
+  </div>
 
-<div class="tabbar-container">
-  <div class="tabbar-bg"></div>
-  <div class="tab-item">💰</div>
-  <div class="tab-item">❤️</div>
-  <div class="tab-item center">🗂</div>
-  <div class="tab-item">💬</div>
-  <div class="tab-item">👤</div>
-</div>
-
+  <div class="tabbar">
+    <a href="#" class="tabbar-item active">
+      <div class="icon"></div>
+      Finance
+    </a>
+    <a href="#" class="tabbar-item">
+      <div class="icon"></div>
+      Dating
+    </a>
+    <a href="#" class="tabbar-item">
+      <div class="icon"></div>
+      App
+    </a>
+    <a href="#" class="tabbar-item">
+      <div class="icon"></div>
+      Chat
+    </a>
+    <a href="#" class="tabbar-item">
+      <div class="icon"></div>
+      Profile
+    </a>
+  </div>
 </body>
 </html>