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);
+  }
+}
+