第一次提交2

src/components/AIChatter/AIChatter.module.scss

@@ -0,0 +1,69 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 60%; // 原值：60%
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border-radius: 10px;
+
+  .header {
+    position: relative;
+    padding-bottom: 10px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 10px; /* 控制阴影的高度 */
+      box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.2); /* 自定义阴影的大小和颜色 */
+      z-index: -1; /* 确保阴影在内容下方 */
+    }
+  }
+
+  .message-box {
+    width: 100%;
+    height: 80%;
+    overflow: auto;
+
+    .item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 15px;
+
+      .content {
+        background-color: #f0f0f0;
+        padding: 8px 12px;
+        border-radius: 16px;
+        word-break: break-word;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  .question-box {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+    height: 10%;
+
+    .input-group {
+      display: flex;
+      align-items: center;
+
+      border: 1px solid #d9d9d9;
+      border-radius: 5px;
+
+      .button {
+        width: 20px;
+        &:hover {
+          background-color: #d9d9d9;
+        }
+      }
+    }
+  }
+
+}