diff --git a/frontend/my-app/src/App.jsx b/frontend/my-app/src/App.jsx
index a8de6c0..214e127 100644
--- a/frontend/my-app/src/App.jsx
+++ b/frontend/my-app/src/App.jsx
@@ -7,7 +7,7 @@
 import Home from './pages/Home';
 import UserProfile from './pages/UserProfile';
 import UserContextProvider from './contexts/UserContext';
-
+import TorrentUploadPage from './pages/UploadTorrent';
 function App() {
   return (
     <UserContextProvider>
@@ -17,6 +17,7 @@
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/user/:id" element={<UserProfile />} />
+             <Route path="/Upload" element={<TorrentUploadPage />} />
           </Routes>
         </div>
       </ThemeProvider>
diff --git a/frontend/my-app/src/pages/Home.jsx b/frontend/my-app/src/pages/Home.jsx
index 1764f5c..6bca4b8 100644
--- a/frontend/my-app/src/pages/Home.jsx
+++ b/frontend/my-app/src/pages/Home.jsx
@@ -1,190 +1,205 @@
-// src/pages/Home.jsx
 import React, { useState, useEffect } from 'react';
 import {
-  Table, TableHead, TableRow, TableCell, TableBody,
-  Typography, Box, Container, Paper, Tooltip, IconButton, Chip
+  Box, Container, Typography, Paper,
+  List, ListItem, ListItemText, Chip, Stack, CircularProgress, Alert
 } from '@mui/material';
-import DownloadIcon from '@mui/icons-material/Download';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { Link } from 'react-router-dom'; // 假设你已经配置了 React Router
+
+// import '../styles/base/base.css'; // ✅ 引入统一样式 - 我们将尝试用 sx prop 替代
+
+// 模拟从API获取数据
+const fetchTorrents = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          title: 'Ubuntu ISO 镜像',
+          tags: ['Linux', '操作系统', 'ISO'],
+          size: '2.1 GB',
+          uploader: 'admin',
+          description: '最新的 Ubuntu Desktop 长期支持版。适用于开发者和普通用户。'
+        },
+        {
+          id: 2,
+          title: '开源电影素材包 - Blender "Sintel"',
+          tags: ['视频', '素材', '开源', 'Blender'],
+          size: '800 MB',
+          uploader: 'user001',
+          description: '来自 Blender Foundation 的开源电影 "Sintel" 的原始素材，可用于学习和创作。'
+        },
+        {
+          id: 3,
+          title: 'React 学习资料大全',
+          tags: ['React', 'JavaScript', '前端开发', '教程'],
+          size: '150 MB',
+          uploader: 'dev_guru',
+          description: '包含 React 官方文档、优秀教程链接和项目示例。'
+        }
+      ]);
+    }, 1500); // 模拟网络延迟
+  });
+};
+
 
 function Home() {
   const [torrents, setTorrents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
-    setTorrents([
-      { title: 'Ubuntu 22.04 LTS', size: '3.2 GB', seeders: 1200, leechers: 300, date: '2025-04-01', tags: ['Linux', 'ISO'] },
-      { title: 'LibreOffice 7.5.2', size: '320 MB', seeders: 450, leechers: 50, date: '2025-03-28', tags: ['办公'] },
-      { title: 'Movie.Title.1080p.BluRay', size: '2.5 GB', seeders: 900, leechers: 200, date: '2025-04-05', tags: ['电影', '高清'] },
-    ]);
+    setLoading(true);
+    fetchTorrents()
+      .then(data => {
+        setTorrents(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error("Failed to fetch torrents:", err);
+        setError("加载资源失败，请稍后再试。");
+        setLoading(false);
+      });
   }, []);
 
   return (
-    <Box sx={styles.mainContainer}>
-      <Container maxWidth="lg">
-        <Typography variant="h4" sx={styles.title}>
-          🎬 资源列表 · Mini-Tracker
+    <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}>
+      <Container maxWidth="md" sx={{ position: 'relative', zIndex: 10 }}> {/* Changed to md for wider content */}
+        <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}>
+          🌐 首页 · Mini-Tracker
         </Typography>
 
-        <Paper sx={styles.paper}>
-          <Table size="small">
-            <TableHead>
-              <TableRow>
-                <TableCell sx={styles.header}>名称</TableCell>
-                <TableCell sx={styles.header}>标签</TableCell>
-                <TableCell sx={styles.header}>大小</TableCell>
-                <TableCell sx={styles.header}>做种者</TableCell>
-                <TableCell sx={styles.header}>下载者</TableCell>
-                <TableCell sx={styles.header}>上传时间</TableCell>
-                <TableCell sx={styles.header}>操作</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {torrents.map((t, i) => (
-                <TableRow key={i} sx={styles.row}>
-                  <TableCell sx={styles.cell}>{t.title}</TableCell>
-                  <TableCell sx={styles.cell}>
-                    {t.tags.map(tag => (
-                      <Chip key={tag} label={tag} size="small" sx={styles.chip} />
+        <Paper sx={{ position: 'relative', zIndex: 20, padding: '2rem', backgroundColor: 'rgba(30, 30, 30, 0.9)', borderRadius: '12px' }}>
+          <Typography variant="h6" gutterBottom sx={{ mb: 2, color: '#eee' }}>
+            最新种子资源
+          </Typography>
+
+          {loading && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
+              <CircularProgress color="inherit" />
+            </Box>
+          )}
+
+          {error && (
+            <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>
+          )}
+
+          {!loading && !error && (
+            <List sx={{ '& .MuiListItem-root:hover': { backgroundColor: 'rgba(255, 255, 255, 0.05)' }}}>
+              {torrents.map(torrent => (
+                <ListItem
+                  key={torrent.id}
+                  component={Link} // react-router-dom Link
+                  to={`/detail/${torrent.id}`} // 假设的详情页路由
+                  sx={{ 
+                    color: 'white', 
+                    textDecoration: 'none',
+                    mb: 1.5, // 增加列表项间距
+                    p: 1.5, // 增加列表项内边距
+                    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+                    '&:last-child': {
+                        borderBottom: 'none' // 移除最后一个元素的边框
+                    },
+                    display: 'flex', // 确保内部元素正确对齐
+                    flexDirection: { xs: 'column', sm: 'row' }, // 响应式布局
+                    alignItems: { xs: 'flex-start', sm: 'center' }
+                  }}
+                  divider={false} // 使用自定义边框代替
+                >
+                  <ListItemText
+                    primary={torrent.title}
+                    secondary={`大小: ${torrent.size} · 上传者: ${torrent.uploader}`}
+                    primaryTypographyProps={{ variant: 'h6', component: 'div', sx: { mb: 0.5, color: '#f5f5f5', fontWeight: 500 } }}
+                    secondaryTypographyProps={{ sx: { color: '#bbb', fontSize: '0.85rem' } }}
+                    sx={{ flexGrow: 1, mb: { xs: 1, sm: 0 }, mr: { sm: 2 } }} // 响应式边距
+                  />
+                  <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 0.5 }}> {/* 允许标签换行 */}
+                    {torrent.tags.map(tag => (
+                      <Chip
+                        key={tag}
+                        label={tag}
+                        size="small"
+                        sx={{ 
+                          backgroundColor: 'rgba(255, 255, 255, 0.2)', // upload-chip 样式
+                          color: 'white',
+                          cursor: 'pointer',
+                          '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                          }
+                        }}
+                      />
                     ))}
-                  </TableCell>
-                  <TableCell sx={styles.cell}>{t.size}</TableCell>
-                  <TableCell sx={styles.cell}>{t.seeders}</TableCell>
-                  <TableCell sx={styles.cell}>{t.leechers}</TableCell>
-                  <TableCell sx={styles.cell}>{t.date}</TableCell>
-                  <TableCell sx={styles.cell}>
-                    <Tooltip title="下载种子">
-                      <IconButton color="success" size="small">
-                        <DownloadIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip title="收藏">
-                      <IconButton color="warning" size="small">
-                        <StarBorderIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                  </TableCell>
-                </TableRow>
+                  </Stack>
+                </ListItem>
               ))}
-            </TableBody>
-          </Table>
+            </List>
+          )}
         </Paper>
       </Container>
 
-      {/* 柔和深蓝渐变背景 */}
-      <div style={styles.background}></div>
-
-      {/* 舒缓漂浮的柔和粒子 */}
-      <div style={styles.bubbles}>
+      {/* 背景泡泡动画复用 - 这些类名 (.bubbles, .bubble) 和 @keyframes rise 应该在全局CSS或者下面的 <style> 标签中定义 */}
+      <Box className="bubbles" sx={{
+         pointerEvents: 'none',
+         position: 'fixed',
+         top: 0,
+         left: 0,
+         width: '100%',
+         height: '100%',
+         overflow: 'hidden',
+         zIndex: 1, 
+      }}>
         {[...Array(40)].map((_, i) => (
-          <div key={i} style={{ ...styles.bubble, ...bubbleAnimation(i) }} />
+          <Box
+            key={i}
+            className="bubble"
+            sx={{
+              position: 'absolute',
+              bottom: '-150px', // 确保从屏幕外开始
+              background: `hsla(${Math.random() * 360}, 70%, 80%, 0.15)`, // 增加颜色多样性
+              borderRadius: '50%',
+              animation: 'rise 20s infinite ease-in',
+              width: `${Math.random() * 25 + 10}px`, // 调整大小范围
+              height: `${Math.random() * 25 + 10}px`,
+              left: `${Math.random() * 100}%`,
+              animationDuration: `${15 + Math.random() * 20}s`, // 调整动画时长
+              animationDelay: `${Math.random() * 10}s`, // 调整动画延迟
+              opacity: 0, // 初始透明
+            }}
+          />
         ))}
-      </div>
+      </Box>
+      {/* 定义动画和其他全局可能需要的样式 */}
+      <style>
+        {`
+          body { /* 基本重置 */
+            margin: 0;
+            font-family: 'Roboto', sans-serif; /* 确保字体一致 */
+          }
 
-      {/* 动画 Keyframes */}
-      <style>{animationCSS}</style>
+          @keyframes rise {
+            0% {
+              transform: translateY(0) scale(0.8);
+              opacity: 0; /* 从透明开始 */
+            }
+            10% {
+                opacity: 1; /* 渐显 */
+            }
+            90% {
+                opacity: 1; /* 保持可见 */
+            }
+            100% {
+              transform: translateY(-130vh) scale(0.3); /* 飘得更高更小 */
+              opacity: 0; /* 渐隐 */
+            }
+          }
+
+          /* 如果 .bubbles 和 .bubble 样式没有在 sx 中完全覆盖，可以在这里补充 */
+          /* .bubbles { ... } */
+          /* .bubble { ... } */
+        `}
+      </style>
     </Box>
   );
 }
 
 export default Home;
 
-// 样式对象
-const styles = {
-  mainContainer: {
-    minHeight: '100vh',
-    bgcolor: '#0d1b2a',
-    color: '#e0e0e0',
-    py: 5,
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  title: {
-    mb: 3,
-    fontFamily: '"Fira Code", monospace',
-    color: '#a3cef1',
-    textAlign: 'center',
-    fontSize: '2rem',
-    fontWeight: 'bold',
-  },
-  paper: {
-    bgcolor: '#1b263b',
-    p: 2,
-    borderRadius: 3,
-    boxShadow: 3,
-    backdropFilter: 'blur(6px)',
-    border: '1px solid rgba(255, 255, 255, 0.08)',
-  },
-  header: {
-    fontWeight: 'bold',
-    color: '#b0ccee',
-    fontFamily: '"Fira Code", monospace',
-    borderBottom: '1px solid #3a4a6b',
-  },
-  cell: {
-    fontFamily: '"Fira Code", monospace',
-    color: '#e0e0e0',
-    fontSize: '0.85rem',
-    padding: '8px 12px',
-  },
-  chip: {
-    mr: 0.5,
-    backgroundColor: '#2e3b53',
-    color: '#81c784',
-    fontSize: '0.75rem',
-  },
-  row: {
-    '&:nth-of-type(odd)': { bgcolor: '#19263e' },
-    '&:hover': { bgcolor: '#26354f' },
-  },
-  background: {
-    position: 'absolute',
-    top: 0, left: 0,
-    width: '100%', height: '100%',
-    background: 'linear-gradient(45deg, #0d1b2a, #122b44, rgb(28, 102, 158))',
-    backgroundSize: '400% 400%',
-    animation: 'bgShift 30s ease infinite',    
-    zIndex: -1,
-  },
-  bubbles: {
-    position: 'absolute',
-    top: 0, left: 0,
-    width: '100%', height: '100%',
-    zIndex: 0,
-    overflow: 'hidden',
-  },
-  bubble: {
-    position: 'absolute',
-    width: '6px',
-    height: '6px',
-    borderRadius: '50%',
-    backgroundColor: 'rgba(163, 206, 241, 0.4)',
-    animation: 'bubbleFloat 8s ease-in-out infinite',
-  },
-};
-
-const animationCSS = `
-@keyframes bgShift {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-@keyframes bubbleFloat {
-  0% { transform: translateY(100%); opacity: 0; }
-  50% { opacity: 0.5; }
-  100% { transform: translateY(-100%); opacity: 0; }
-}
-`;
-
-function bubbleAnimation(i) {
-  const delay = Math.random() * 6;
-  const left = Math.random() * 100;
-  const size = 4 + Math.random() * 8;
-  const top = Math.random() * 100;
-  return {
-    left: `${left}%`,
-    top: `${top}%`,
-    width: `${size}px`,
-    height: `${size}px`,
-    animationDelay: `${delay}s`,
-  };
-}
diff --git a/frontend/my-app/src/pages/UploadTorrent.jsx b/frontend/my-app/src/pages/UploadTorrent.jsx
new file mode 100644
index 0000000..493cdce
--- /dev/null
+++ b/frontend/my-app/src/pages/UploadTorrent.jsx
@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import {
+  Box, Container, Typography, Paper,
+  TextField, Button, Stack
+} from '@mui/material';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+// Assuming your base.css is in a relative path like src/styles/base/base.css
+// If your component is in src/components/Upload.js, this path would be ../styles/base/base.css
+// Adjust if your project structure is different.
+// For this example, I'll assume it's correctly linked.
+// import '../styles/base/base.css'; 
+
+function Upload() {
+  const [title, setTitle] = useState('');
+  const [file, setFile] = useState(null);
+
+  const handleUpload = () => {
+    const formData = new FormData();
+    if (file) {
+      formData.append('file', file);
+    }
+    formData.append('title', title);
+
+    // Replace with your actual API endpoint and error handling
+    fetch('/api/torrents/upload', {
+      method: 'POST',
+      body: formData
+    })
+    .then(response => {
+      if (response.ok) {
+        // Use a more modern way to show messages, e.g., a Snackbar
+        console.log('上传成功'); 
+        alert('上传成功 (建议使用Snackbar等UI组件替代alert)');
+      } else {
+        console.error('上传失败');
+        alert('上传失败 (建议使用Snackbar等UI组件替代alert)');
+      }
+    })
+    .catch(error => {
+      console.error('上传出错:', error);
+      alert('上传出错 (建议使用Snackbar等UI组件替代alert)');
+    });
+  };
+
+  return (
+    <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}> {/* Moved body styles here for self-containment */}
+      <Container maxWidth="sm" sx={{ position: 'relative', zIndex: 10 }}>
+        <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}> {/* Replaced className with sx */}
+          ⬆️ 上传种子 · Mini-Tracker
+        </Typography>
+
+        <Paper sx={{ position: 'relative', zIndex: 20, padding: '2rem', backgroundColor: 'rgba(30, 30, 30, 0.9)' }}> {/* Replaced className with sx */}
+          <Stack spacing={3}> {/* Increased spacing a bit */}
+            <TextField
+              label="资源名称"
+              variant="outlined"
+              fullWidth
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              placeholder="请输入资源名称"
+              InputLabelProps={{ 
+                sx: { 
+                  color: '#ccc',
+                  '&.Mui-focused': { // Ensure label color remains consistent when focused
+                    color: '#ccc',
+                  }
+                } 
+              }}
+              sx={{
+                // Root element of the TextField
+                backgroundColor: 'transparent', 
+                
+                // Styles for the HTML input element itself
+                '& .MuiInputBase-input': {
+                  color: 'white', // Text color
+                  backgroundColor: 'transparent', // **** THIS IS THE FIX **** Ensure input background is transparent
+                  caretColor: 'white', // Cursor color
+                  '&::placeholder': {
+                    color: '#bbb',
+                    opacity: 1,
+                  },
+                },
+                // Styles for the outlined border
+                '& .MuiOutlinedInput-root': {
+                  '& fieldset': {
+                    borderColor: '#888', // Default border color
+                  },
+                  '&:hover fieldset': {
+                    borderColor: '#aaa', // Border color on hover
+                  },
+                  '&.Mui-focused fieldset': {
+                    borderColor: '#fff', // Border color when focused
+                  },
+                },
+              }}
+            />
+
+            <Button
+              variant="contained"
+              component="label" // Allows the button to act as a label for a hidden input
+              startIcon={<CloudUploadIcon />}
+              sx={{ backgroundColor: '#00bcd4', color: 'white', '&:hover': { backgroundColor: '#0097a7' } }} // Replaced className with sx
+            >
+              选择种子文件
+              <input
+                hidden
+                type="file"
+                accept=".torrent"
+                onChange={e => {
+                  if (e.target.files && e.target.files[0]) {
+                    setFile(e.target.files[0]);
+                  }
+                }}
+              />
+            </Button>
+            
+            {file && (
+              <Typography variant="body2" sx={{ color: '#eee', textAlign: 'center' }}>
+                已选择文件: {file.name}
+              </Typography>
+            )}
+
+            <Button
+              variant="outlined"
+              onClick={handleUpload}
+              disabled={!file || !title}
+              sx={{ borderColor: 'white', color: 'white', '&:hover': { borderColor: '#ddd', backgroundColor: 'rgba(255,255,255,0.1)'}, '&.Mui-disabled': { borderColor: '#777', color: '#777' } }} // Replaced className with sx
+            >
+              提交上传
+            </Button>
+          </Stack>
+        </Paper>
+      </Container>
+
+      {/* Background bubbles animation - assuming CSS for .bubbles and .bubble is globally available or defined in an imported CSS file */}
+      {/* For self-containment, these styles would ideally be JSS or defined in a <style> tag if not using styled-components or similar */}
+      <Box className="bubbles" sx={{
+         pointerEvents: 'none',
+         position: 'fixed', 
+         top: 0,
+         left: 0,
+         width: '100%',
+         height: '100%',
+         overflow: 'hidden',
+         zIndex: 1, // Ensure it's behind the content paper but above the main background
+      }}>
+        {[...Array(40)].map((_, i) => (
+          <Box
+            key={i}
+            className="bubble" // Assuming .bubble and @keyframes rise are defined in your CSS
+            sx={{
+              position: 'absolute',
+              bottom: '-100px',
+              background: 'rgba(255, 255, 255, 0.15)',
+              borderRadius: '50%',
+              animation: 'rise 20s infinite ease-in', // Make sure @keyframes rise is defined
+              width: `${Math.random() * 20 + 10}px`,
+              height: `${Math.random() * 20 + 10}px`,
+              left: `${Math.random() * 100}%`,
+              animationDuration: `${10 + Math.random() * 20}s`,
+              animationDelay: `${Math.random() * 5}s`
+            }}
+          />
+        ))}
+      </Box>
+      {/* Define keyframes if not in external CSS */}
+      <style>
+        {`
+          @keyframes rise {
+            0% {
+              transform: translateY(0) scale(1);
+              opacity: 0.5;
+            }
+            50% {
+              opacity: 1;
+            }
+            100% {
+              transform: translateY(-120vh) scale(0.5);
+              opacity: 0;
+            }
+          }
+          body { /* Basic reset if base.css is not loaded */
+            margin: 0;
+            font-family: 'Roboto', sans-serif;
+          }
+        `}
+      </style>
+    </Box>
+  );
+}
+
+export default Upload;
diff --git a/frontend/my-app/src/services/torrentService.js b/frontend/my-app/src/services/torrentService.js
new file mode 100644
index 0000000..a50f8ac
--- /dev/null
+++ b/frontend/my-app/src/services/torrentService.js
@@ -0,0 +1,28 @@
+// ./services/torrentService.js
+import axios from 'axios';
+
+// IMPORTANT: Replace with your actual backend API URL
+const API_BASE_URL = 'http://localhost:5000/api';
+
+export const uploadTorrent = async (formData) => {
+    try {
+        const response = await axios.post(`${API_BASE_URL}/torrents/upload`, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data', // Essential for file uploads
+                // Add any authentication tokens here if your backend requires them
+                // 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
+            },
+            onUploadProgress: (progressEvent) => {
+                // You can use this to show upload progress to the user
+                const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                console.log(`Upload progress: ${percentCompleted}%`);
+                // You could pass this percentage back to the component via a callback
+            },
+        });
+        return response.data; // Your backend should return the parsed torrent info here
+    } catch (error) {
+        console.error('Error in uploadTorrent service:', error.response ? error.response.data : error.message);
+        // Throw a more specific error message based on backend response if available
+        throw new Error(error.response?.data?.message || '文件上传失败，请稍后再试。');
+    }
+};
\ No newline at end of file
diff --git a/frontend/my-app/src/styles/base/base.css b/frontend/my-app/src/styles/base/base.css
new file mode 100644
index 0000000..54501ed
--- /dev/null
+++ b/frontend/my-app/src/styles/base/base.css
@@ -0,0 +1,79 @@
+/* base.css */
+
+/* 背景渐变和字体 */
+body {
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  background: linear-gradient(135deg, #2c3e50, #4ca1af);
+  color: white;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* 卡片样式 */
+.upload-paper {
+  position: relative;
+  z-index: 20; /* 高于泡泡背景 */
+  padding: 2rem;
+  background-color: rgba(30, 30, 30, 0.9); /* 半透明深色背景 */
+}
+
+/* 标签样式 */
+.upload-chip {
+  background-color: #ffffff33;
+  color: white;
+}
+
+/* 上传按钮 */
+.upload-button {
+  background-color: #00bcd4;
+  color: white;
+}
+
+.upload-button:hover {
+  background-color: #0097a7;
+}
+
+/* 提交按钮 */
+.submit-button {
+  border-color: white;
+  color: white;
+}
+
+/* 标题样式 */
+.upload-title {
+  text-align: center;
+  margin-bottom: 24px;
+  font-weight: bold;
+}
+
+/* 动画背景容器 */
+.bubbles {
+  pointer-events: none;
+  position: fixed; /* 确保浮在所有内容之下 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1; /* 保证不覆盖前景内容 */
+}
+
+
+.bubble {
+  position: absolute;
+  bottom: -100px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  animation: rise 20s infinite ease-in;
+}
+
+@keyframes rise {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  100% {
+    transform: translateY(-120vh) scale(0.5);
+  }
+}
+