更换主页的按钮图片

src/views/AiEmotion.vue

@@ -413,6 +413,8 @@ onMounted(() => {
 .rotating-image {
   animation: rotate 5s linear;
   /* 5 秒完成一次旋转，线性速度*/
+  will-change: transform;
+  /* 优化动画性能 */
 }
 
 .bk-image {

src/views/homePage.vue

@@ -20,6 +20,10 @@ import announcementBtn from "../assets/img/homePage/announcement.png";
 import thinkActive from "../assets/img/homePage/tail/think-active.png";
 import thinkNoActive from "../assets/img/homePage/tail/think-no-active.png";
 import languageBtn from "../assets/img/homePage/tail/language.png";
+import dbqbButton01 from "../assets/img/AiEmotion/dbqb-button01.png";
+import dbqbButton02 from "../assets/img/AiEmotion/dbqb-button02.png";
+import emotionButton01 from "../assets/img/AiEmotion/emotion-button01.png";
+import emotionButton02 from "../assets/img/AiEmotion/emotion-button02.png"; 
 import voice from "../assets/img/homePage/tail/voice.png";
 import voiceNoActive from "../assets/img/homePage/tail/voice-no-active.png";
 import sendBtn from "../assets/img/homePage/tail/send.png";
@@ -27,6 +31,7 @@ import msgBtn from "../assets/img/homePage/tail/msg.png";
 import feedbackBtn from "../assets/img/Feedback/feedbackBtn.png";
 import AiEmotion from "./AiEmotion.vue";
 
+
 // import VConsole from 'vconsole';
 
 // const vConsole = new VConsole();
@@ -531,16 +536,20 @@ onMounted(async () => {
             <!-- <img v-if="isThinking" :src="thinkActive" @click="toggleThink" class="action-btn" />
             <img v-else :src="thinkNoActive" @click="toggleThink" class="action-btn" />
             <img :src="languageBtn" @click="changeLanguage" class="action-btn" /> -->
-            <div class="action-btn" :class="{ active: activeTab === 'AIchat' }" @click="setActiveTab('AIchat', 0)">
-              <img src="@/assets/img/homePage/夺宝奇兵大模型小图标.png" alt="夺宝奇兵大模型小图标" class="action-btn-icon" />
-              <span>夺宝奇兵大模型</span>
-            </div>
+            <!-- 夺宝奇兵大模型按钮 -->
+            <img 
+              :src="activeTab === 'AIchat' ? dbqbButton02 : dbqbButton01" 
+              @click="setActiveTab('AIchat', 0)" 
+              class="action-btn model-btn" 
+              alt="夺宝奇兵大模型" 
+            />
             <!-- AI情绪大模型按钮 -->
-            <div class="action-btn" :class="{ active: activeTab === 'AiEmotion' }"
-              @click="setActiveTab('AiEmotion', 2)">
-              <img src="@/assets/img/homePage/AI情绪大模型小图标.png" alt="夺宝奇兵大模型小图标" class="action-btn-icon" />
-              <span>AI情绪大模型</span>
-            </div>
+            <img 
+              :src="activeTab === 'AiEmotion' ? emotionButton02 : emotionButton01" 
+              @click="setActiveTab('AiEmotion', 1)" 
+              class="action-btn model-btn" 
+              alt="AI情绪大模型" 
+            />
             <img v-if="isVoice" :src="voice" @click="toggleVoice" class="action-btn" />
             <img v-else :src="voiceNoActive" @click="toggleVoice" class="action-btn" />
           </div>
@@ -912,6 +921,14 @@ body {
   transform: scale(1.05);
 }
 
+.model-btn {
+  height: 32px;
+  transition: all 0.3s ease;
+}
+
+.model-btn:hover {
+  transform: scale(1.1);
+}
 
 .send-btn {
   margin-left: auto;
@@ -967,7 +984,7 @@ body {
 
 @media (max-width: 768px) {
   .action-btn {
-    height: 28px;
+    height: 21px;
   }
 
   .footer-second-line {