样式更换修改

src/views/AIchat.vue

@@ -30,8 +30,6 @@ import title3 from "@/assets/img/AIchat/攻防三维.png";
 import title4 from "@/assets/img/AIchat/综合作战.png";
 import logo1 from "@/assets/img/AIchat/夺宝奇兵logo.png";
 import logo2 from "@/assets/img/AIchat/开启无限财富.png";
-import bgc from "@/assets/img/AIchat/圈.png";
-import bgc1 from "@/assets/img/AIchat/圈1.png";
 const chatStore = useChatStore();
 const audioStore = useAudioStore();
 const dataStore = useDataStore();
@@ -451,7 +449,7 @@ const createTypingEffect = (message, content, speed) => {
               content: "工作流返回出错，请稍后重试",
             });
             chatStore.isLoading = false;
-              emit('enableInput');
+            emit("enableInput");
             if (message.error == "2") {
               apiStatus.two.isError = true;
             } else if (message.error == "3") {
@@ -463,7 +461,7 @@ const createTypingEffect = (message, content, speed) => {
           if (message.end) {
             chatStore.getUserCount();
             chatStore.isLoading = false;
-            emit('enableInput');
+            emit("enableInput");
           }
           message.isTyping = false;
           nextTick(() => {
@@ -582,7 +580,7 @@ const createTypingEffect = (message, content, speed) => {
             content: "工作流返回出错，请稍后重试",
           });
           chatStore.isLoading = false;
-          emit('enableInput');
+          emit("enableInput");
           if (message.error == "2") {
             apiStatus.two.isError = true;
           } else if (message.error == "3") {
@@ -615,7 +613,7 @@ const createTypingEffect = (message, content, speed) => {
             content: "工作流返回出错，请稍后重试",
           });
           chatStore.isLoading = false;
-          emit('enableInput');
+          emit("enableInput");
           if (message.error == "2") {
             apiStatus.two.isError = true;
           } else if (message.error == "3") {
@@ -742,7 +740,7 @@ watch(
           });
 
           chatStore.isLoading = false;
-          emit('enableInput');
+          emit("enableInput");
         }
       } catch (e) {
         console.log(e, "意图识别失败");
@@ -753,7 +751,7 @@ watch(
           content: "工作流返回出错，请稍后重试",
         });
         chatStore.isLoading = false;
-        emit('enableInput');
+        emit("enableInput");
       }
 
       if (flag) {
@@ -794,7 +792,7 @@ watch(
             // aibullPrivilegeState: userStore.aibullPerssion,
             // aigoldBullPrivilegeState: userStore.aiGnbullPerssion,
             // airadarPrivilegeState: userStore.airadarPerssion,
-            marketList: 'usa,sg,my,hk,cn,can,vi,th,in,gb',
+            marketList: "usa,sg,my,hk,cn,can,vi,th,in,gb",
           });
 
           // 添加空值检查防止访问null对象的属性
@@ -1578,7 +1576,7 @@ watch(
                   content: "工作流返回出错，请稍后重试",
                 });
                 chatStore.isLoading = false;
-                emit('enableInput');
+                emit("enableInput");
               }
             }
 
@@ -1678,7 +1676,7 @@ watch(
                     content: "工作流返回出错，请稍后重试",
                   });
                   chatStore.isLoading = false;
-                  emit('enableInput');
+                  emit("enableInput");
                 }
               }
             }
@@ -1864,7 +1862,7 @@ watch(
                     content: "工作流返回出错，请稍后重试1111",
                   });
                   chatStore.isLoading = false;
-                  emit('enableInput');
+                  emit("enableInput");
                 }
               }
             }
@@ -1999,7 +1997,7 @@ watch(
                     content: "工作流返回出错，请稍后重试",
                   });
                   chatStore.isLoading = false;
-                  emit('enableInput');
+                  emit("enableInput");
                 }
               }
             }
@@ -2176,7 +2174,7 @@ watch(
               content: "数据缺失，请稍后重试",
             });
             chatStore.isLoading = false;
-            emit('enableInput');
+            emit("enableInput");
           }
 
           // 同时发起所有API调用
@@ -4018,7 +4016,11 @@ onUnmounted(() => {
   <div class="chat-container">
     <!-- GIF区域 -->
     <div class="gif-area">
-      <img :src="bgc1" alt="夺宝奇兵大模型logo" class="bgc" />
+      <img
+        src="https://d31zlh4on95l9h.cloudfront.net/images/03ddbbbee489f29dc6a1427f9ed4f389.png"
+        alt="夺宝奇兵大模型logo"
+        class="bgc"
+      />
       <img :src="logo1" alt="夺宝奇兵大模型logo" class="logo1" />
       <img :src="logo2" alt="夺宝奇兵大模型logo" class="logo2" />
     </div>
@@ -4109,12 +4111,23 @@ p {
 .bgc {
   position: absolute;
   z-index: -1;
-  max-width: 530px;
-  min-width: 340px;
+  max-width: 440px;
+  min-width: 300px;
+  top: -15px;
   width: 40%;
   height: auto;
-  /* right: 30px; */
-  /* top: -30px; */
+  /* 添加旋转动画 */
+  animation: rotate 10s linear infinite reverse;
+}
+
+/* 定义旋转动画 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .logo1 {
@@ -4150,19 +4163,6 @@ p {
   /* 防止GIF区域被压缩 */
 }
 
-.gif-area img {
-  /* width: 30%; */
-  /* 改为百分比单位 */
-  /* min-width: 200px; */
-  /* 最小尺寸 */
-  /* max-width: 400px; */
-  /* 最大尺寸 */
-  /* height: auto; */
-  /* left: 50%; */
-  /* transition: all 0.3s; */
-  /* 添加过渡效果 */
-}
-
 .message-area {
   margin-top: 2%;
   flex: 1;

src/views/components/HistoryRecord.vue

@@ -1,11 +1,8 @@
 <template>
   <div
+    v-if="!isMobile"
     class="history-record-container"
     :class="{
-      containerNoMobile: !isMobile && isCollapsed,
-
-      containerIsMobile: isMobile && isCollapsed,
-
       collapsed: !isCollapsed,
     }"
   >
@@ -13,22 +10,39 @@
     <div v-if="isCollapsed" class="collapsed-container">
       <img
         class="collapsed-icon"
-        src="src/assets/img/Selectmodel/机器人手机.png"
+        src="https://d31zlh4on95l9h.cloudfront.net/images/74430a4ebbb67aefc713bf694147fb2a.png"
+        alt="icon"
+      />
+      <img
+        class="collapsed-toggle-btn"
+        @click="openHistory"
+        src="	https://d31zlh4on95l9h.cloudfront.net/images/b2d784f8607ab65081f5289459581bfe.png"
+        alt="icon"
+      />
+    </div>
+
+    <div v-if="isCollapsed" class="collapsed-bottom-container">
+      <div class="collapsed-bottom-btn" @click="handleFeedbackClick">
+        <img
+          class="collapsed-bottom-feedback"
+          src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png"
+          alt="icon"
+        />
+      </div>
+      <div class="collapsed-bottom-btn" @click="handleAnnouncementClick">
+        <img
+          class="collapsed-bottom-announcement"
+          @click="openHistory"
+          src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png"
           alt="icon"
         />
-      <div class="collapsed-toggle-btn" @click="openHistory">
-        <el-icon><ArrowRight /></el-icon>
       </div>
     </div>
 
     <!-- 历史记录内容 -->
     <div class="history-content" v-show="!isCollapsed">
-      <!-- 折叠/展开按钮 -->
-      <div class="toggle-btn" @click="closeHistory">
-        <el-icon><ArrowLeft /></el-icon>
-      </div>
+      <div class="head-container">
         <!-- 标题 -->
-      <div class="history-header">
         <div class="history-actions">
           <img
             src="/src/assets/img/homePage/logo.png"
@@ -36,8 +50,14 @@
             class="logo-img"
           />
         </div>
+        <!-- 折叠/展开按钮 -->
+        <img
+          class="toggle-btn"
+          @click="closeHistory"
+          src="	https://d31zlh4on95l9h.cloudfront.net/images/b2d784f8607ab65081f5289459581bfe.png"
+          alt="icon"
+        />
       </div>
-
       <!-- 历史记录列表 -->
       <div class="history-list">
         <div
@@ -80,7 +100,118 @@
             </button>
           </div>
         </div>
+        <!-- 空状态 -->
+        <div v-if="filteredHistory.length === 0" class="empty-state">
+          <div class="empty-icon">
+            <el-icon class="documentDelete"><DocumentDelete /></el-icon>
+            <!-- <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.89 23 5 23H19C20.1 23 21 22.1 21 21V9M19 9H14V4"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg> -->
+          </div>
+          <p class="empty-text">暂无历史记录</p>
+        </div>
+      </div>
+
+      <div class="bottom-container">
+        <div class="bottom-btn" @click="handleFeedbackClick">
+          <img
+            class="bottom-feedback"
+            src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png"
+            alt="icon"
+          />
+        </div>
+        <div class="bottom-btn" @click="handleAnnouncementClick">
+          <img
+            class="bottom-announcement"
+            @click="openHistory"
+            src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png"
+            alt="icon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 
+  <div
+    v-else
+    class="mobile-history-record-container"
+    :class="{
+      mobileCollapsed: !isCollapsed,
+    }"
+  >
+    <!-- 历史记录内容 -->
+    <div class="history-content" v-show="!isCollapsed">
+      <div class="mobile-head-container">
+        <!-- 折叠/展开按钮 -->
+        <img
+          class="mobile-toggle-btn"
+          @click="closeHistory"
+          src="https://d31zlh4on95l9h.cloudfront.net/images/37fe3d79a8a700f6c674c9f0e7af066b.png"
+          alt="icon"
+        />
+        <!-- 标题 -->
+        <div class="mobile-history-actions">
+          <img
+            src="/src/assets/img/homePage/logo.png"
+            alt="Logo"
+            class="logo-img"
+          />
+        </div>
+      </div>
+      <!-- 历史记录列表 -->
+      <div class="history-list">
+        <div
+          v-for="record in filteredHistory"
+          :key="record.id"
+          class="history-item"
+          @click="selectRecord(record)"
+          :class="{ active: selectedRecordId === record.id }"
+        >
+          <div class="record-content">
+            <div class="record-type">
+              <span class="type-badge" :class="record.type">
+                {{ record.type === "AIchat" ? "夺宝奇兵" : "AI情绪" }}
+              </span>
+            </div>
+            <div class="record-text">{{ record.question }}</div>
+            <div class="record-time">{{ formatTime(record.timestamp) }}</div>
+          </div>
+          <div class="record-actions">
+            <button
+              class="delete-btn"
+              @click.stop="deleteRecord(record.id)"
+              title="删除"
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18 6L6 18M6 6L18 18"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
         <!-- 空状态 -->
         <div v-if="filteredHistory.length === 0" class="empty-state">
           <div class="empty-icon">
@@ -104,6 +235,26 @@
           <p class="empty-text">暂无历史记录</p>
         </div>
       </div>
+
+      <div class="mobile-bottom-container">
+        <div class="mobile-bottom-btn" @click="handleFeedbackClick">
+          <img
+            class="mobile-bottom-feedback"
+            src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png"
+            alt="icon"
+          />
+          <div class="mobile-bottom-text">用户反馈</div>
+        </div>
+        <div class="mobile-bottom-btn" @click="handleAnnouncementClick">
+          <img
+            class="mobile-bottom-announcement"
+            @click="openHistory"
+            src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png"
+            alt="icon"
+          />
+          <div class="mobile-bottom-text">公告</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -124,7 +275,13 @@ const props = defineProps({
 });
 
 // Emits
-const emit = defineEmits(["selectRecord", "recordAdded", "startNewChat"]);
+const emit = defineEmits([
+  "selectRecord",
+  "recordAdded",
+  "startNewChat",
+  "showAnnouncement",
+  "showFeedback",
+]);
 
 // 响应式数据
 const isCollapsed = ref(false);
@@ -145,13 +302,11 @@ const toggleCollapse = () => {
 
 const openHistory = () => {
   isCollapsed.value = false;
-}
+};
 
 const closeHistory = () => {
   isCollapsed.value = true;
-}
-
-
+};
 
 const selectRecord = (record) => {
   selectedRecordId.value = record.id;
@@ -240,6 +395,16 @@ const loadFromLocalStorage = () => {
   }
 };
 
+// 处理公告按钮点击
+const handleAnnouncementClick = () => {
+  emit("showAnnouncement");
+};
+
+// 处理用户反馈按钮点击
+const handleFeedbackClick = () => {
+  emit("showFeedback");
+};
+
 // 暴露方法和状态给父组件
 defineExpose({
   clearHistory,
@@ -264,40 +429,64 @@ watch(
 
 <style scoped>
 .history-record-container {
+  min-width: 40px;
+  width: 3%;
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
-
-  background: rgb(4, 47, 144);
+  background: rgba(0, 0, 0, 0.5);
   border-right: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   z-index: 1000;
   transition: width 0.3s ease;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
 }
 
-.containerNoMobile {
-  width: 40px;
-}
-
-.containerIsMobile {
+.mobile-history-record-container {
   width: 0px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  transition: width 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.history-record-container.collapsed {
+.collapsed {
   width: 300px;
 }
 
+.mobileCollapsed {
+  width: 80vw;
+}
+
 .toggle-btn {
-  position: absolute;
-  right: 15px;
-  top: 20px;
   width: 32px;
   height: 32px;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  transform: rotate(180deg);
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.mobile-toggle-btn {
+  width: 10%;
+  height: auto;
   border-radius: 6px;
   color: white;
   cursor: pointer;
@@ -314,28 +503,24 @@ watch(
 }
 
 .collapsed-container {
-  position: fixed;
-  right: 4px;
-  top: 5%;
-  transform: translateY(-50%);
+  width: 100%;
+  margin-top: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 20px;
   z-index: 1000;
 }
 
 .collapsed-icon {
-  width: 24px;
-  height: 24px;
+  width: 80%;
+  height: auto;
   object-fit: contain;
 }
 
 .collapsed-toggle-btn {
-  width: 32px;
-  height: 32px;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  width: 80%;
+  height: auto;
   border-radius: 6px;
   display: flex;
   align-items: center;
@@ -350,14 +535,69 @@ watch(
   border-color: rgba(255, 255, 255, 0.3);
 }
 
+.collapsed-bottom-container {
+  width: 100%;
+  height: 16%;
+  margin-top: auto;
+  background-color: rgba(106, 0, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 30px;
+  z-index: 1000;
+}
+
+.collapsed-bottom-btn {
+  width: 100%;
+  /* height: 50%; */
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+}
+
+.collapsed-bottom-feedback {
+  width: 60%;
+  height: auto;
+}
+.collapsed-bottom-feedback:hover {
+  transform: scale(1.1);
+}
+.collapsed-bottom-announcement {
+  width: 60%;
+  height: auto;
+}
+.collapsed-bottom-announcement:hover {
+  transform: scale(1.1);
+}
 .history-content {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 20px;
+  width: 100%;
+  /* padding: 20px; */
   overflow: hidden;
 }
 
+.head-container {
+  margin-top: 20%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-head-container {
+  padding: 5px 0px 5px 20px;
+  /* margin-left: 20px; */
+  /* width: 100%; */
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #414141;
+  /* justify-content: center; */
+}
+
 .history-header {
   display: flex;
   justify-content: space-between;
@@ -369,12 +609,20 @@ watch(
 
 .history-actions {
   display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-history-actions {
+  margin-left: auto;
+  display: flex;
+  justify-content: center;
   align-items: center;
 }
 
 .logo-img {
   height: auto;
-  width: 80%;
+  width: 70%;
   object-fit: contain;
 }
 
@@ -550,11 +798,82 @@ watch(
   margin: 0;
 }
 
+.bottom-container {
+  width: 100%;
+  height: 16%;
+  margin-top: auto;
+  background-color: rgba(106, 0, 255, 0.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mobile-bottom-container {
+  border-top: 2px solid #414141;
+  width: 100%;
+  height: 16%;
+  margin-top: auto;
+  background-color: rgba(106, 0, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bottom-btn {
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-bottom-btn {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  align-items: center;
+}
+
+.bottom-feedback {
+  width: 30%;
+  height: auto;
+}
+
+.mobile-bottom-feedback {
+  margin-left: 20px;
+  height: 60%;
+  width: auto;
+}
+
+.bottom-feedback:hover {
+  transform: scale(1.2);
+}
+
+.bottom-announcement {
+  width: 30%;
+  height: auto;
+}
+
+.mobile-bottom-announcement {
+  margin-left: 20px;
+  height: 60%;
+  width: auto;
+}
+
+.mobile-bottom-text {
+  color: white;
+  margin-left: 10px;
+  font-size: 1.1rem;
+}
+
+.bottom-announcement:hover {
+  transform: scale(1.2);
+}
+
 /* 移动端适配 */
 @media (max-width: 768px) {
-
   .history-content {
-    padding: 15px;
+    /* padding: 15px; */
   }
 }
 </style>

src/views/homePage.vue

@@ -604,6 +604,8 @@ onUnmounted(() => {
       :current-type="activeTab"
       @selectRecord="handleHistorySelect"
       :is-mobile="isMobile"
+      @showAnnouncement="showAnnouncement"
+      @showFeedback="showFeedback"
     />
 
     <div
@@ -623,21 +625,27 @@ onUnmounted(() => {
       <!-- AI小财神头部： logo  次数  公告 -->
       <el-header class="homepage-head">
         <!-- logo -->
-        <div class="homepage-logo">
-          <el-icon v-if="isMobile" class="expand" @click="expandHistory"
-            ><Expand
-          /></el-icon>
-
-          <!-- <img :src="logo" alt="图片加载失败" class="logo1" /> -->
+        <div class="homepage-logo" v-if="isMobile">
+          <img
+            class="expand"
+            @click="expandHistory"
+            src="https://d31zlh4on95l9h.cloudfront.net/images/37fe3d79a8a700f6c674c9f0e7af066b.png"
+            alt="icon"
+          />
+          <img :src="logo" alt="图片加载失败" class="logo1" />
           <!-- <img :src="madeInHL" alt="图片加载失败" class="logo2" /> -->
         </div>
 
-        <div class="homepage-right-group">
+        <div class="homepage-right-group" v-if="isMobile">
           <div class="count-badge" @click="showCount">
-            <img :src="getCountAll" class="action-btn" />
+            <img
+              src="https://d31zlh4on95l9h.cloudfront.net/images/74e20c65c9ef2526477c63ad68698a50.png"
+              class="action-btn"
+            />
             <div class="count-number">{{ UserCount }}次</div>
+            <div class="clickGetCount">点击获取次数</div>
           </div>
-          <img
+          <!-- <img
             :src="announcementBtn"
             class="announcement-btn action-btn"
             @click="showAnnouncement"
@@ -646,7 +654,7 @@ onUnmounted(() => {
             :src="feedbackBtn"
             class="announcement-btn action-btn"
             @click="showFeedback"
-          />
+          /> -->
         </div>
       </el-header>
 
@@ -654,7 +662,12 @@ onUnmounted(() => {
       <el-main class="homepage-body">
         <div class="main-wrapper">
           <section class="tab-section">
-            <div class="tab-container">
+            <div
+              class="tab-container"
+              :class="{
+                pcTabContainer: !isMobile,
+              }"
+            >
               <div
                 v-for="(tab, index) in tabs"
                 :key="tab.name"
@@ -666,6 +679,13 @@ onUnmounted(() => {
               >
                 <span>{{ tab.label }}</span>
               </div>
+              <div v-if="!isMobile" class="pc-count-badge" @click="showCount">
+                <div class="pc-action-btn">
+                  <div class="pc-count-number">{{ UserCount }}次</div>
+                </div>
+
+                <div class="pc-clickGetCount">点击获取次数</div>
+              </div>
             </div>
           </section>
           <div class="tab-content" ref="tabContent">
@@ -780,10 +800,14 @@ onUnmounted(() => {
 
         <div class="homepage-right-group">
           <div class="count-badge" @click="showCount">
-            <img :src="getCountAll" class="action-btn" />
+            <img
+              src="https://d31zlh4on95l9h.cloudfront.net/images/74e20c65c9ef2526477c63ad68698a50.png"
+              class="action-btn"
+            />
             <div class="count-number">{{ UserCount }}次</div>
+            <div class="clickGetCount">点击获取次数</div>
           </div>
-          <img
+          <!-- <img
             :src="announcementBtn"
             class="announcement-btn action-btn"
             @click="showAnnouncement"
@@ -792,7 +816,7 @@ onUnmounted(() => {
             :src="feedbackBtn"
             class="announcement-btn action-btn"
             @click="showFeedback"
-          />
+          /> -->
         </div>
       </el-header>
 
@@ -833,15 +857,20 @@ onUnmounted(() => {
 .tab-container {
   display: flex;
   gap: 30px;
-  margin-right: 40px;
-  margin-left: 40px;
+
   margin-bottom: 10px;
-  padding: 0 20px;
-  justify-content: space-between;
   height: 100%;
+  position: relative;
   /* 新增右对齐 */
 }
 
+.pcTabContainer {
+  margin-left: 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 25vw;
+}
+
 .tab-item {
   cursor: pointer;
   padding: 8px 12px;
@@ -921,7 +950,7 @@ body {
   /* height: var(--app-height, 100vh); */
   height: var(--app-height, 100vh);
   margin: 0 auto;
-  background-image: url(/src/assets/img/homePage/bk01.jpg);
+  background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/2dc3c13a74100b906e809d26b66db211.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -962,6 +991,9 @@ body {
 
 /* 移动端适配 */
 @media (max-width: 768px) {
+  .homepage {
+    background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/90d31d7052e729c63acb9e2cb94d1307.png");
+  }
   .main-container {
     /* margin-left: 280px; */
   }
@@ -1043,20 +1075,72 @@ body {
   height: 40px;
 }
 
-.homepage-right-group .count-badge {
+.count-badge {
   position: relative;
   cursor: pointer;
 }
 
-.homepage-right-group .count-badge .count-number {
+.count-badge:hover {
+  transform: scale(1.05);
+}
+
+.count-number {
   position: absolute;
-  top: 6px;
-  right: 20px;
-  color: #573dfc;
+  top: 16px;
+  right: 0px;
+  width: 68%;
+  text-align: center;
+  color: #6a00ff;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.clickGetCount {
+  width: 100%;
+  text-align: center;
+  color: white;
   font-size: 12px;
+}
+
+.pc-count-badge {
+  width: 120px;
+  height: 100%;
+  margin-left: auto;
+  margin-right: 20px;
+  position: absolute;
+  right: 20px;
+}
+
+.pc-count-badge:hover {
+  transform: scale(1.05);
+}
+
+.pc-action-btn {
+  width: 100%;
+  height: 70%;
+  background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/74e20c65c9ef2526477c63ad68698a50.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.pc-count-number {
+  position: absolute;
+  top: 15px;
+  right: 4px;
+  width: 68%;
+  text-align: center;
+  color: #6a00ff;
+  font-size: 15px;
   font-weight: bold;
 }
 
+.pc-clickGetCount {
+  width: 100%;
+  text-align: center;
+  color: white;
+  font-size: 12px;
+}
+
 .homepage-right-group .announcement-btn {
   cursor: pointer;
   transition: transform 0.3s;
@@ -1101,12 +1185,13 @@ body {
   height: 100%;
   width: fit-content;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   align-items: center;
   justify-content: center;
   margin-left: 20px;
   margin-right: auto;
   position: relative;
+  gap: 10px;
 }
 
 .expand {
@@ -1115,15 +1200,8 @@ body {
   color: white;
 }
 
-@media (max-width: 768px) {
-  .homepage-logo {
-    margin-left: 10px;
-    left: 0;
-  }
-}
-
 .logo1 {
-  width: 120px;
+  width: 110px;
   height: auto;
   margin-bottom: 8px;
 }
@@ -1162,10 +1240,6 @@ body {
   height: 28px;
 }
 
-.action-btn:hover {
-  transform: scale(1.05);
-}
-
 .model-btn {
   height: 32px;
   transition: all 0.3s ease;