换电脑先推一下，飘屏暂停做完了，每日复盘的demo没好，弹窗背景颜色换不动

src/views/AIchat.vue

@@ -62,6 +62,28 @@ const showQuestions = async (questions) => {
   // emit("sendMessage");
 };
 
+// 飘屏控制
+const floatingTopMouseEnter = function () {
+  console.log("鼠标指上去");
+  const floatTop = document.getElementById("top");
+  floatTop.style.animationPlayState = "paused";
+}
+const floatingTopMouseLeave = function () {
+  console.log("鼠标指下去");
+  const floatTop = document.getElementById("top");
+  floatTop.style.animationPlayState = "running"
+}
+const floatingBottomMouseEnter = function () {
+  console.log("鼠标指上去");
+  const floatBottom = document.getElementById("bottom");
+  floatBottom.style.animationPlayState = "paused";
+}
+const floatingBottomMouseLeave = function () {
+  console.log("鼠标指下去");
+  const floatBottom = document.getElementById("bottom");
+  floatBottom.style.animationPlayState = "running"
+}
+
 // 音频播放方法
 const playAudio = (url) => {
 
@@ -944,13 +966,13 @@ onUnmounted(() => {
       <img :src="currentGif" alt="AI动画" />
 
       <div class="marquee-container">
-        <div class="marquee-row top">
+        <div id="top" class="marquee-row top" @mouseenter="floatingTopMouseEnter" @mouseleave="floatingTopMouseLeave">
           <div v-for="(questions, index) in questionsList.slice(0, 5)" :key="'top' + index" class="marquee-item"
             @click="showQuestions(questions)">
             {{ questions.title }}
           </div>
         </div>
-        <div class="marquee-row bottom">
+        <div id="bottom" class="marquee-row bottom" @mouseenter="floatingBottomMouseEnter" @mouseleave="floatingBottomMouseLeave">
           <div v-for="(questions, index) in questionsList.slice(5, 10)" :key="'bottom' + index" class="marquee-item"
             @click="showQuestions(questions)">
             {{ questions.title }}
@@ -1065,10 +1087,14 @@ onUnmounted(() => {
 
 .top {
   animation: marquee 25s linear infinite;
+  /* 默认动画是运行状态 */
+  animation-play-state: running;
 }
 
 .bottom {
   animation: marquee 15s linear infinite reverse;
+  /* 默认动画是运行状态 */
+  animation-play-state: running;
 }
 
 /* 添加PC端专用速度 */

src/views/AIfind.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { getNewsAPI,newsClickAPI } from "../api/AIxiaocaishen"
+import { getNewsAPI, newsClickAPI } from "../api/AIxiaocaishen"
 import { marked } from 'marked'; // 引入marked库
 import katex from 'katex'; // 引入 KaTeX 库
 
@@ -14,7 +14,7 @@ const getNewsList = async () => {
 // 弹窗控制
 const dialogVisible = ref(false)
 const currentNews = ref('')
-const showNews = async(news) => {
+const showNews = async (news) => {
 
     // 点击新闻记录
     const result = await newsClickAPI({
@@ -38,6 +38,12 @@ const showNews = async(news) => {
     });
     dialogVisible.value = true
 }
+// 每日复盘样本弹窗
+const dailyReplayDialogVisible = ref(false)
+const dailyReplay = () => {
+    dailyReplayDialogVisible.value = true
+}
+
 
 onMounted(() => {
     getNewsList()
@@ -52,7 +58,7 @@ onMounted(() => {
 
         <el-text class="daily-item">
             <span>【</span>
-            <span class="purple-text">每日复盘</span>
+            <span class="purple-text" @click="dailyReplay">每日复盘</span>
             <span>】 即将上线，</span>
             <br>
             <span>敬请期待！</span>
@@ -64,6 +70,12 @@ onMounted(() => {
         <!-- <img :src="currentNews.img" alt="加载失败" class="newsDialogImg"> -->
         <div v-html="currentNews.description"></div>
     </el-dialog>
+
+    <!-- 每日复盘样本弹窗 -->
+    <el-dialog v-model="dailyReplayDialogVisible" title="每日复盘" width="80%" class="dailyReplayClass">
+        <img src="/images/dailyReplay.png" alt="每日复盘" class="newsDialogImg">
+        <img src="/images/dailyReplay.png" alt="每日复盘" class="newsDialogImg">
+    </el-dialog>
 </template>
 
 <style scoped>
@@ -100,6 +112,7 @@ onMounted(() => {
 
 .purple-text {
     color: #7315df !important;
+    cursor: pointer;
 }
 
 .daily-item {
@@ -128,4 +141,8 @@ onMounted(() => {
     height: auto;
     margin: 0 auto;
 }
+
+.el-dialog {
+    background-color: #5583d3 !important;
+}
 </style>