diff --git a/pages/home/index/index.vue b/pages/home/index/index.vue
index 6112032..a3ad4a6 100644
--- a/pages/home/index/index.vue
+++ b/pages/home/index/index.vue
@@ -1,128 +1,897 @@
 <template>
-	<view class="home-container">
-		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-		<view class="header">
-			<text class="title">应行AI</text>
-		</view>
-		
-		<view class="content">
-			<text class="welcome-text">欢迎使用应行AI平台</text>
-			<!-- 这里可以添加首页内容 -->
-			<view class="feature-grid">
-				<view class="feature-item" v-for="(item, index) in features" :key="index">
-					<image :src="item.icon" class="feature-icon"></image>
-					<text class="feature-text">{{ item.title }}</text>
-				</view>
-			</view>
-		</view>
-		
-		<!-- 使用自定义TabBar -->
-		<custom-tab-bar></custom-tab-bar>
-	</view>
+  <view class="home-container">
+    <view class="header">
+      <div class="header-left">
+        <u-icon
+          class="header-left-icon"
+          name="list"
+          @click="handleLeftClick"
+        ></u-icon>
+      </div>
+      <text class="header-title">源小新</text>
+      <div></div>
+    </view>
+
+    <!-- 首页 -->
+    <view class="content" v-if="!isChat">
+      <view class="welcome-message">
+        <image class="avatar" src="/static/common/icon/ai-avatar.png"></image>
+
+        <text class="message-text"
+          >Hi~我是小小新，您的AI聊天伙伴，未来高效认知助手，我们可尽量互相解惑。</text
+        >
+      </view>
+
+      <view class="qa-section">
+        <view class="qa-header">
+          <text class="qa-title">大家都在问</text>
+          <view class="more-link">
+            <text class="more-text">换一批</text>
+          </view>
+        </view>
+
+        <view class="qa-list">
+          <view
+            class="qa-item"
+            v-for="(item, index) in questionList"
+            :key="index"
+          >
+            <text class="qa-question">{{ item }}</text>
+          </view>
+        </view>
+
+        <button class="chat-button" @click="isChat = true">
+          <image
+            class="chat-icon"
+            src="/static/common/icon/chat-icon.png"
+          ></image>
+          <text class="chat-text">开启对话</text>
+        </button>
+      </view>
+
+      <view class="feature-grid">
+        <view
+          class="feature-item"
+          v-for="(item, index) in features"
+          :key="index"
+        >
+          <image :src="item.icon" class="feature-icon"></image>
+          <text class="feature-text">{{ item.title }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 对话 -->
+    <view class="chat-container" v-if="isChat">
+      <scroll-view
+        class="chat-scroll"
+        scroll-y
+        :scroll-into-view="scrollToView"
+        scroll-with-animation
+        :scroll-top="scrollTop"
+        :show-scrollbar="true"
+        @scrolltoupper="loadMoreMessages"
+        @scroll="onScroll"
+      >
+        <!-- 头部卡片 -->
+        <view class="chat-card">
+          <view class="chat-card-title">源小新AI校园小助手</view>
+          <view class="chat-card-desc"
+            >我是你们的AI校园助手，我可以为您答疑解惑。</view
+          >
+          <view class="chat-card-questions">
+            <view class="question-item">学校哪些专业比较好?</view>
+            <view class="question-item">如何报考学校综合素质评价招生?</view>
+            <view class="question-item">学校有那些专业?</view>
+            <view class="question-item"
+              >学校在录取时有没有一些专业会有特殊...</view
+            >
+            <view class="question-item">我什么时候能够知道自己是否被录取?</view>
+          </view>
+        </view>
+
+        <!-- 对话内容区域 -->
+        <view class="chat-content">
+          <!-- 消息循环渲染 -->
+          <block
+            v-for="(group, groupIndex) in messageGroups"
+            :key="'group-' + groupIndex"
+          >
+            <!-- 时间 -->
+            <view class="message-time" v-if="group.time">{{ group.time }}</view>
+
+            <!-- 消息列表 -->
+            <block
+              v-for="(message, messageIndex) in group.messages"
+              :key="'msg-' + groupIndex + '-' + messageIndex"
+            >
+              <!-- 用户消息 -->
+              <view
+                class="message-right"
+                v-if="message.isUser"
+                :id="'msg-' + message.id"
+              >
+                <view class="message-content">
+                  <text>{{ message.content }}</text>
+                </view>
+                <view class="user-avatar"></view>
+              </view>
+
+              <!-- AI消息 -->
+              <view class="message-left" v-else :id="'msg-' + message.id">
+                <view class="ai-avatar"></view>
+                <view class="message-content">
+                  <text space="nbsp" decode>{{ message.content }}</text>
+                </view>
+              </view>
+            </block>
+          </block>
+        </view>
+      </scroll-view>
+
+      <!-- 底部工具栏 -->
+      <view class="chat-footer">
+        <!-- 悬浮工具栏 -->
+        <view class="floating-tabs">
+          <view class="tab-item">
+            <view class="tab-icon icon-people"></view>
+            <text>招生在线</text>
+          </view>
+          <view class="tab-item">
+            <view class="tab-icon icon-board"></view>
+            <text>留言板</text>
+          </view>
+          <view class="tab-item">
+            <view class="tab-icon icon-phone"></view>
+            <text>电话咨询</text>
+          </view>
+        </view>
+
+        <view class="input-container">
+          <view class="input-area">
+            <input
+              type="text"
+              class="chat-input"
+              placeholder="请输入内容"
+              placeholder-style="color: #adadad;"
+            />
+            <view class="send-btn">
+              <view class="send-icon"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 对话弹出层 -->
+    <u-popup v-model="popupShow" width="550rpx">
+      <view class="drawer-container">
+        <scroll-view scroll-y class="chat-history-list">
+          <view class="chat-day">
+            <text class="day-text">周三</text>
+          </view>
+          <view
+            class="chat-item"
+            v-for="(item, index) in chatHistoryList"
+            :key="index"
+            :class="{ 'chat-item-active': index === activeIndex }"
+            @click="selectChatItem(index)"
+          >
+            <text class="chat-text">{{ item.content }}</text>
+          </view>
+          <view class="chat-day">
+            <text class="day-text">6/27</text>
+          </view>
+          <view
+            class="chat-item"
+            v-for="(item, index) in chatHistoryList2"
+            :key="'history2-' + index"
+            :class="{
+              'chat-item-active':
+                index + chatHistoryList.length === activeIndex,
+            }"
+            @click="selectChatItem(index + chatHistoryList.length)"
+          >
+            <text class="chat-text">{{ item.content }}</text>
+          </view>
+        </scroll-view>
+
+        <view class="drawer-footer">
+          <view class="user-info">
+            <image
+              class="user-avatar"
+              src="/static/common/avatar/male.png"
+            ></image>
+            <!-- <u-avatar
+              class="user-avatar"
+              src="/static/common/avatar/user-avatar.png"
+            ></u-avatar> -->
+            <text class="user-name">晓德塔，</text>
+          </view>
+          <view class="settings">
+            <u-icon name="setting" size="40rpx" color="#999"></u-icon>
+          </view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
 </template>
 
 <script>
-	import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
-	
-	export default {
-		components: {
-			CustomTabBar
-		},
-		data() {
-			return {
-				statusBarHeight: 0,
-				features: [
-					{
-						title: '功能一',
-						icon: '/static/common/feature/feature1.png'
-					},
-					{
-						title: '功能二',
-						icon: '/static/common/feature/feature1.png'
-					},
-					{
-						title: '功能三',
-						icon: '/static/common/feature/feature1.png'
-					},
-					{
-						title: '功能四',
-						icon: '/static/common/feature/feature1.png'
-					}
-				]
-			}
-		},
-		onLoad() {
-			// 获取状态栏高度
-			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
-		},
-		methods: {
-			
-		}
-	}
+import CustomTabBar from "@/components/custom-tab-bar/custom-tab-bar.vue";
+
+export default {
+  components: {
+    CustomTabBar,
+  },
+  data() {
+    return {
+      isChat: false,
+
+      questionList: [
+        "学习哪些专业比较好?",
+        "处于香港学校综合录取的城市招生?",
+        "学校有新华专业?",
+        "学校录取科目与有一些专业会有特殊...",
+        "我什么时候能推知道自己是否被录取?",
+      ],
+      features: [
+        {
+          title: "招办在线",
+          icon: "/static/common/feature/zhaobao.png",
+        },
+        {
+          title: "留言板",
+          icon: "/static/common/feature/zhiyin.png",
+        },
+        {
+          title: "电话咨询",
+          icon: "/static/common/feature/phone.png",
+        },
+      ],
+      popupShow: false,
+      chatHistoryList: [
+        { content: "学校哪些专业比较好?" },
+        { content: "如何报考学校综合合录取评澳市评招生?" },
+        { content: "学校有新华专业?" },
+      ],
+      chatHistoryList2: [
+        { content: "学校哪些专业比较好?" },
+        { content: "如何报考学校综合合录取评澳市评招生?" },
+        { content: "如何报考学校综合合录取评澳市评招生?" },
+        { content: "如何报考学校综合合录取评澳市评招生?" },
+        { content: "如何报考学校综合合录取评澳市评招生?" },
+        { content: "学校有新华专业?" },
+        { content: "学校有新华专业?" },
+        { content: "学校有新华专业?" },
+        { content: "学校有新华专业?" },
+        { content: "学校有新华专业?" },
+      ],
+      activeIndex: 0,
+      commonQuestions: [
+        "新生报到流程",
+        "如何报考学校综合合录取评澳市评招生?",
+        "学校有新华专业?",
+        "学校录取科目与有一些专业会有特殊...",
+        "我什么时候能推知道自己是否被录取?",
+      ],
+      scrollToView: "",
+      messageGroups: [
+        {
+          time: "2025-07-01 10:00:00",
+          messages: [
+            { id: 1, content: "学校哪些专业比较好?", isUser: true },
+            {
+              id: 2,
+              content:
+                "我校有多个优势学科，包括计算机科学与技术、电子信息工程、机械工程、生物医学工程等。这些专业在国内都有较高的学术声誉和就业率。如果您对某个具体专业感兴趣，可以进一步咨询更多详情。",
+              isUser: false,
+            },
+            { id: 3, content: "计算机科学专业就业前景如何？", isUser: true },
+            {
+              id: 4,
+              content:
+                "计算机科学专业的就业前景非常好。根据最新数据，我校计算机专业毕业生就业率超过95%，平均起薪在全校名列前茅。主要就业方向包括互联网公司、IT企业、金融科技等领域，担任软件工程师、数据分析师、产品经理等职位。",
+              isUser: false,
+            },
+          ],
+        },
+        {
+          time: "2025-07-02 09:15:36",
+          messages: [
+            { id: 5, content: "新生报到流程", isUser: true },
+            {
+              id: 6,
+              content:
+                "新生报到流程：个人信息完善 --预报到 -- 照片信息采集 --缴费 --入校验审 -- 人脸识别 --打印报到单",
+              isUser: false,
+            },
+            { id: 7, content: "预报到需要准备哪些材料？", isUser: true },
+            {
+              id: 8,
+              content:
+                "预报到需要准备以下材料：\n1. 身份证原件及复印件\n2. 录取通知书原件\n3. 2寸蓝底证件照4张\n4. 学籍档案(密封)\n5. 党团关系材料(如有)\n\n建议提前准备齐全，以便快速完成报到流程。",
+              isUser: false,
+            },
+          ],
+        },
+      ],
+      scrollTop: 0,
+    };
+  },
+  watch: {
+    // 确保消息更新后自动滚动到底部
+    messageGroups: {
+      handler() {
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      },
+      deep: true,
+    },
+  },
+  onLoad() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.scrollToBottom();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.scrollToBottom();
+    });
+  },
+  methods: {
+    handleLeftClick() {
+      this.popupShow = true;
+    },
+    selectChatItem(index) {
+      this.activeIndex = index;
+    },
+    loadMoreMessages() {
+      // 加载更多历史消息的实现
+      console.log("加载更多历史消息");
+    },
+    onScroll(event) {
+      // 滚动事件处理
+    },
+    scrollToBottom() {
+      // 使用nextTick确保DOM已更新
+      this.$nextTick(() => {
+        // 获取滚动区域的高度
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(".chat-content")
+          .boundingClientRect((data) => {
+            if (data) {
+              // 计算滚动到底部的位置
+              const scrollHeight = data.height;
+              // 设置滚动位置，加100px确保滚动到底部
+              this.scrollTop = scrollHeight + 100;
+            }
+          })
+          .exec();
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.home-container {
-		min-height: 100vh;
-		background-color: #f8f8f8;
-		padding-bottom: calc(56px + env(safe-area-inset-bottom)); /* 为自定义tabBar预留空间 */
-		
-		.status-bar {
-			background-color: #ffffff;
-		}
-		
-		.header {
-			background-color: #ffffff;
-			height: 44px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: 0 15px;
-			
-			.title {
-				font-size: 18px;
-				font-weight: bold;
-				color: #333333;
-			}
-		}
-		
-		.content {
-			padding: 20px;
-			
-			.welcome-text {
-				font-size: 16px;
-				color: #333333;
-				text-align: center;
-				margin-bottom: 30px;
-			}
-			
-			.feature-grid {
-				display: flex;
-				flex-wrap: wrap;
-				margin: 0 -10px;
-				
-				.feature-item {
-					width: 50%;
-					padding: 10px;
-					box-sizing: border-box;
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					
-					.feature-icon {
-						width: 60px;
-						height: 60px;
-						margin-bottom: 10px;
-						background-color: #e1f1ff;
-						border-radius: 15px;
-					}
-					
-					.feature-text {
-						font-size: 14px;
-						color: #333333;
-					}
-				}
-			}
-		}
-	}
-</style> 
\ No newline at end of file
+.home-container {
+  min-height: 100vh;
+  background-color: #f5f7fc;
+  padding-bottom: calc(
+    112rpx + env(safe-area-inset-bottom)
+  ); /* 为自定义tabBar预留空间 */
+  padding-top: 88rpx;
+
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffffff;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 30rpx;
+    z-index: 99;
+
+    .header-left {
+      font-size: 36rpx;
+    }
+
+    .header-title {
+      font-size: 36rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+
+  .content {
+    padding: 30rpx;
+
+    .welcome-message {
+      //   display: inline-block;
+      //   flex-wrap: wrap;
+      background-color: rgba(255, 255, 255, 0.8);
+      border-radius: 16rpx;
+      padding: 24rpx;
+      margin-bottom: 30rpx;
+
+      .avatar {
+        display: inline-block;
+        width: 42rpx;
+        height: 34rpx;
+        margin-right: 12rpx;
+        background-color: #4377fe;
+      }
+
+      .message-text {
+        font-size: 24rpx;
+        color: #333333;
+        font-family: PingFang SC;
+        vertical-align: super;
+      }
+    }
+
+    .qa-section {
+      background-color: #ffffff;
+      border-radius: 16rpx;
+      padding: 30rpx;
+      margin-bottom: 30rpx;
+
+      .qa-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 30rpx;
+
+        .qa-title {
+          font-size: 32rpx;
+          font-weight: 500;
+          color: #333;
+        }
+
+        .more-link {
+          .more-text {
+            font-size: 26rpx;
+            color: #999;
+          }
+        }
+      }
+
+      .qa-list {
+        .qa-item {
+          margin-bottom: 24rpx;
+
+          .qa-question {
+            font-size: 28rpx;
+            color: #333;
+            line-height: 1.5;
+          }
+        }
+      }
+
+      .chat-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #4377fe;
+        border-radius: 16rpx;
+        height: 88rpx;
+        width: 100%;
+        margin-top: 30rpx;
+        border: none;
+
+        .chat-icon {
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 12rpx;
+        }
+
+        .chat-text {
+          color: #ffffff;
+          font-size: 30rpx;
+        }
+      }
+    }
+
+    .feature-grid {
+      background-color: #ffffff;
+      border-radius: 16rpx;
+      padding: 30rpx;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 40rpx;
+      gap: 30rpx;
+
+      .feature-item {
+        height: 210rpx;
+        border-radius: 16rpx;
+        background-color: #fafafc;
+        // background-color: #4377fe;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        // gap: 20rpx;
+        flex: 1;
+
+        .feature-icon {
+          width: 80rpx;
+          height: 80rpx;
+          margin-bottom: 16rpx;
+          background-color: #e1e5f2;
+          border-radius: 50%;
+        }
+
+        .feature-text {
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+
+.drawer-container {
+  padding: 32rpx;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #ffffff;
+
+  .chat-history-list {
+    flex: 1;
+    // padding: 30rpx 40rpx;
+    height: calc(100vh - 200rpx);
+
+    .chat-day {
+      display: flex;
+      margin: 20rpx 0 20rpx 30rpx;
+
+      .day-text {
+        font-size: 24rpx;
+        color: #999999;
+        font-family: PingFang SC;
+        margin-bottom: 10rpx;
+      }
+    }
+
+    .chat-item {
+      padding: 24rpx 30rpx;
+      border-radius: 16rpx;
+      // margin-bottom: 30rpx;
+
+      .chat-text {
+        font-size: 28rpx;
+        color: #303030;
+        font-family: PingFang SC;
+      }
+
+      &-active {
+        background-color: #4f6aff;
+
+        .chat-text {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .drawer-footer {
+    height: 130rpx;
+    border: 1rpx solid #eeeeee;
+    border-radius: 12rpx;
+    padding: 0 30rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .user-info {
+      display: flex;
+      align-items: center;
+
+      .user-avatar {
+        width: 56rpx;
+        height: 56rpx;
+        border-radius: 50%;
+        margin-right: 30rpx;
+      }
+
+      .user-name {
+        font-size: 28rpx;
+        font-weight: bold;
+        font-family: DouyinSans;
+        color: #333;
+      }
+    }
+
+    .settings {
+      padding: 10rpx;
+    }
+  }
+}
+
+/* 响应式布局 - PC端样式 */
+@media screen and (min-width: 768px) {
+  .home-container {
+    .content {
+      max-width: 1200rpx;
+      margin: 0 auto;
+
+      .qa-section {
+        .qa-list {
+          display: flex;
+          flex-wrap: wrap;
+
+          .qa-item {
+            width: 48%;
+            margin-right: 2%;
+          }
+        }
+      }
+
+      .feature-grid {
+        max-width: 1200rpx;
+        margin: 40rpx auto 0;
+      }
+    }
+  }
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 300rpx);
+  background-color: #f5f8ff;
+  padding: 30rpx;
+  //   padding-bottom: 200rpx; /* 为底部工具栏和输入框留出空间 */
+  box-sizing: border-box;
+
+  .chat-scroll {
+    flex: 1;
+    flex-shrink: 0;
+    // overflow-y: auto; /* 使用auto而不是scroll */ // 添加这行会导致滚动条不见
+  }
+
+  .chat-card {
+    background-color: #ffffff;
+    border-radius: 16rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+
+    .chat-card-title {
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #333333;
+      margin-bottom: 10rpx;
+    }
+
+    .chat-card-desc {
+      font-size: 24rpx;
+      color: #666666;
+      margin-bottom: 20rpx;
+    }
+
+    .chat-card-questions {
+      display: flex;
+      flex-direction: column;
+      gap: 16rpx;
+
+      .question-item {
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .chat-content {
+    flex: 1;
+    padding: 20rpx 0;
+    margin-bottom: 150rpx;
+
+    .message-time {
+      text-align: center;
+      font-size: 24rpx;
+      color: #999999;
+      padding: 20rpx;
+    }
+
+    .message-left,
+    .message-right {
+      display: flex;
+      margin-bottom: 30rpx;
+      align-items: flex-start;
+    }
+
+    .message-left {
+      .ai-avatar {
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 50%;
+        margin-right: 16rpx;
+        background-color: #4370fe;
+        flex-shrink: 0;
+      }
+
+      .message-content {
+        background-color: #ffffff;
+        color: #333333;
+        max-width: 70%;
+        padding: 20rpx 24rpx;
+        border-radius: 0 16rpx 16rpx 16rpx;
+        font-size: 28rpx;
+        line-height: 1.5;
+      }
+    }
+
+    .message-right {
+      justify-content: flex-end;
+
+      .user-avatar {
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 50%;
+        margin-left: 16rpx;
+        background-color: #f0f0f0;
+        flex-shrink: 0;
+      }
+
+      .message-content {
+        background-color: #4370fe;
+        color: #ffffff;
+        max-width: 70%;
+        padding: 20rpx 24rpx;
+        border-radius: 16rpx 0 16rpx 16rpx;
+        font-size: 28rpx;
+        line-height: 1.5;
+        text-align: right;
+      }
+    }
+  }
+
+  .chat-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .floating-tabs {
+      display: flex;
+      justify-content: flex-start;
+      margin: 0 0 20rpx 20rpx;
+
+      .tab-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        background-color: #ffffff;
+        padding: 8rpx 24rpx;
+        border-radius: 50rpx;
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+        margin-right: 12rpx;
+
+        .tab-icon {
+          width: 32rpx;
+          height: 32rpx;
+          border-radius: 50%;
+          margin-right: 10rpx;
+          position: relative;
+
+          &.icon-people {
+            background-color: #4370fe;
+            &:before {
+              content: "";
+              position: absolute;
+              width: 15rpx;
+              height: 15rpx;
+              border-radius: 50%;
+              background-color: white;
+              top: 8rpx;
+              left: 12rpx;
+            }
+            &:after {
+              content: "";
+              position: absolute;
+              width: 24rpx;
+              height: 12rpx;
+              border: 2rpx solid white;
+              border-radius: 12rpx 12rpx 0 0;
+              border-bottom: none;
+              background-color: transparent;
+              bottom: 6rpx;
+              left: 7rpx;
+            }
+          }
+
+          &.icon-board {
+            background-color: #d0d0d0;
+            &:before {
+              content: "";
+              position: absolute;
+              width: 22rpx;
+              height: 15rpx;
+              background-color: white;
+              top: 12rpx;
+              left: 9rpx;
+            }
+            &:after {
+              content: "";
+              position: absolute;
+              width: 10rpx;
+              height: 5rpx;
+              border-radius: 0 0 10rpx 10rpx;
+              background-color: white;
+              top: 7rpx;
+              left: 15rpx;
+            }
+          }
+
+          &.icon-phone {
+            background-color: #d0d0d0;
+            &:before {
+              content: "";
+              position: absolute;
+              width: 20rpx;
+              height: 20rpx;
+              border: 2rpx solid white;
+              border-radius: 50%;
+              top: 8rpx;
+              left: 8rpx;
+            }
+          }
+        }
+
+        text {
+          font-size: 28rpx;
+          color: #333333;
+        }
+      }
+    }
+
+    .input-container {
+      padding: 32rpx;
+      background-color: #fff;
+      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+      .input-area {
+        display: flex;
+        align-items: center;
+        background-color: #f2f4f9;
+        border-radius: 20rpx;
+        padding: 16rpx 24rpx;
+        box-sizing: border-box;
+
+        .chat-input {
+          flex: 1;
+          height: 40rpx;
+          font-size: 28rpx;
+          color: #333;
+          background-color: transparent;
+        }
+
+        .send-btn {
+          width: 50rpx;
+          height: 50rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .send-icon {
+            width: 30rpx;
+            height: 30rpx;
+            background-color: #4370fe;
+            clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/static/common/avatar/male.png b/static/common/avatar/male.png
new file mode 100644
index 0000000..68db854
Binary files /dev/null and b/static/common/avatar/male.png differ
diff --git a/static/common/avatar/user.png b/static/common/avatar/user.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/avatar/user.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/common/feature/phone.png b/static/common/feature/phone.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/feature/phone.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/common/icon/ai-avatar.png b/static/common/icon/ai-avatar.png
new file mode 100644
index 0000000..60fed09
--- /dev/null
+++ b/static/common/icon/ai-avatar.png
@@ -0,0 +1 @@
+// 这是一个占位文件，需要替换为实际的AI头像图标 
\ No newline at end of file
diff --git a/static/common/icon/board-icon.png b/static/common/icon/board-icon.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/icon/board-icon.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/common/icon/chat-icon.png b/static/common/icon/chat-icon.png
new file mode 100644
index 0000000..de5fb4f
--- /dev/null
+++ b/static/common/icon/chat-icon.png
@@ -0,0 +1 @@
+// 这是一个占位文件，需要替换为实际的聊天图标 
\ No newline at end of file
diff --git a/static/common/icon/menu-icon.png b/static/common/icon/menu-icon.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/icon/menu-icon.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/common/icon/phone-icon.png b/static/common/icon/phone-icon.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/icon/phone-icon.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/common/icon/recruit-icon.png b/static/common/icon/recruit-icon.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/icon/recruit-icon.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/common/icon/send-icon.png b/static/common/icon/send-icon.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/common/icon/send-icon.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file