强制横屏使用调整：3秒倒计时自动关闭，给主动按钮关闭，关闭后不再主动跳出，刷新重新加载后弹出

src/App.vue

@@ -4,17 +4,21 @@
     <div class="hint-icon">📱</div>
     <div class="hint-text">请横屏使用</div>
     <div class="hint-desc">为获得更好的体验，请将设备横屏放置</div>
+    <button class="hint-close-btn" @click="closeLandscapeHint">知道了({{ countdown }}秒)</button>
   </div>
   <!-- 路由视图 -->
   <router-view></router-view>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const showLandscapeHint = ref(true)
+const showLandscapeHint = ref(false) // 修改默认值为false
+const countdown = ref(3) // 倒计时初始值
+let countdownTimer = null
+let hasShownHint = false // 标记是否已经显示过提示
 
 // 检测是否为移动设备
 const isMobileDevice = () => {
@@ -24,7 +28,6 @@ const isMobileDevice = () => {
 
 // 检测设备是否为横屏
 const isLandscape = () => {
-  // 通过屏幕宽高比判断
   return window.innerWidth > window.innerHeight
 }
 
@@ -35,30 +38,57 @@ const isNewCoursePage = () => {
          route.path.includes('/ai-general-course')
 }
 
-// 更新横屏提示显示状态
-const updateLandscapeHint = () => {
-  if (isMobileDevice() && !isLandscape() && !isNewCoursePage()) {
-    // 如果是移动设备、竖屏且不是新课程页面，显示横屏提示
-    showLandscapeHint.value = true
-  } else {
-    // 否则不显示横屏提示
-    showLandscapeHint.value = false
+// 关闭横屏提示
+const closeLandscapeHint = () => {
+  showLandscapeHint.value = false
+  hasShownHint = true // 设置标记，表示已经显示过提示
+  // 清理倒计时定时器
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
   }
 }
 
-// 监听路由变化
-watch(() => route.path, () => {
-  updateLandscapeHint()
-})
+// 开始倒计时
+const startCountdown = () => {
+  // 重置倒计时
+  countdown.value = 3
+  
+  // 清理之前的定时器
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+  }
+  
+  // 开始新的倒计时
+  countdownTimer = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      closeLandscapeHint()
+    }
+  }, 1000)
+}
+
+// 检查是否应该显示横屏提示（仅在页面首次加载时检查）
+const checkLandscapeHint = () => {
+  if (!hasShownHint && isMobileDevice() && !isLandscape() && !isNewCoursePage()) {
+    // 如果是移动设备、竖屏、不是新课程页面，且尚未显示过提示，则显示横屏提示
+    showLandscapeHint.value = true
+    // 开始倒计时
+    startCountdown()
+  }
+}
 
-// 监听窗口大小变化
+// 监听窗口大小变化（仅处理屏幕旋转）
 const handleResize = () => {
-  updateLandscapeHint()
+  // 如果是由于旋转导致的横屏，则关闭提示
+  if (isLandscape()) {
+    closeLandscapeHint()
+  }
 }
 
 // 组件挂载时更新状态
 onMounted(() => {
-  updateLandscapeHint()
+  checkLandscapeHint() // 仅在页面加载时检查一次
   window.addEventListener('resize', handleResize)
   
   // 监听设备方向变化（如果支持的话）
@@ -73,6 +103,10 @@ onUnmounted(() => {
   if (window.screen && window.screen.orientation) {
     window.screen.orientation.removeEventListener('change', handleResize)
   }
+  // 清理定时器
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+  }
 })
 </script>
 
@@ -112,6 +146,22 @@ onUnmounted(() => {
 .hint-desc {
   font-size: 16px;
   opacity: 0.8;
+  margin-bottom: 15px;
+}
+
+.hint-close-btn {
+  background-color: #409eff;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.hint-close-btn:hover {
+  background-color: #66b1ff;
 }
 
 /* 移动端样式 - 屏幕宽度小于 768px */