优化统一适配手机端页面样式，并加入横屏使用提示遮挡层

.env

@@ -4,9 +4,9 @@ VITE_APP_TITLE=人工智能通识课平台
 # 请求路径
 # VITE_BASE_URL='http://59.110.91.129:8088/admin-api'
 # VITE_BASE_URL='http://8.140.223.94:8088/admin-api'
- VITE_BASE_URL='https://learn-ai.com.cn/admin-api'
+# VITE_BASE_URL='https://learn-ai.com.cn/admin-api'
 # VITE_BASE_URL='https://test.learn-ai.com.cn/admin-api'
-#VITE_BASE_URL='http://192.168.110.8:8080/admin-api'
+VITE_BASE_URL='http://192.168.110.8:8080/admin-api'
 
 # 登录是否强制租户
 VITE_APP_COMPULSORY_TENANT=false

src/App.vue

@@ -1,5 +1,12 @@
 <template>
-      <router-view></router-view>
+  <!-- 移动端横屏提示遮罩（全局统一） -->
+  <div class="mobile-landscape-hint mobile-show">
+    <div class="hint-icon">📱</div>
+    <div class="hint-text">请横屏使用</div>
+    <div class="hint-desc">为获得更好的体验，请将设备横屏放置</div>
+  </div>
+  <!-- 路由视图 -->
+  <router-view></router-view>
 </template>
 
 <script setup>

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
+import './styles/mobile.scss'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
@@ -9,5 +10,4 @@ import router from './router'
 const app = createApp(App)
 app.use(ElementPlus)
 app.use(router)
-app.mount('#app')
-
+app.mount('#app')

src/styles/mobile.scss

@@ -0,0 +1,242 @@
+@use 'sass:math';
+
+// ==================== 工具函数 ====================
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+
+// ==================== 横屏提示组件（基础样式）====================
+.mobile-landscape-hint {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 17, 105, 0.9);
+  z-index: 9999;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  display: none;
+}
+
+@keyframes rotateDevice {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-15deg); }
+  75% { transform: rotate(15deg); }
+}
+
+// ==================== PC端样式 ====================
+@media (min-width: 769px) {
+  .mobile-landscape-hint {
+    display: none;
+  }
+}
+
+// ==================== 移动端样式（max-width: 768px）====================
+@media (max-width: 768px) {
+  // 基础滚动容器
+  .mobile-full-screen {
+    width: 100vw;
+    height: 100vh;
+    overflow-x: auto;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // 横屏提示样式
+  .mobile-landscape-hint .hint-icon {
+    font-size: rpx(60);
+    margin-bottom: rpx(20);
+    animation: rotateDevice 2s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  .mobile-landscape-hint .hint-text {
+    font-size: rpx(28);
+    font-weight: bold;
+    margin-bottom: rpx(15);
+    color: #FFD700;
+  }
+
+  .mobile-landscape-hint .hint-desc {
+    font-size: rpx(18);
+    opacity: 0.9;
+    line-height: 1.8;
+    padding: 0 rpx(25);
+  }
+
+  // 登录页面适配
+  .mobile-login-wrapper {
+    width: 85%;
+    max-width: rpx(400);
+    margin: 0 auto;
+    padding: rpx(30);
+    background: rgba(0, 17, 105, 0.9);
+    border-radius: rpx(20);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 50%;
+    max-height: 80vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    transition: all 0.3s ease;
+  }
+
+  .mobile-login-content {
+    flex-direction: column;
+    position: relative;
+    min-height: 100vh;
+  }
+
+  .mobile-login-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .mobile-login-form {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .mobile-login-form ::v-deep(.el-input) {
+    width: 100%;
+    margin-bottom: rpx(20);
+  }
+
+  .mobile-login-form ::v-deep(.el-input__wrapper) {
+    height: rpx(45);
+    border-radius: rpx(10);
+  }
+
+  .mobile-login-form ::v-deep(.el-input__inner) {
+    height: rpx(45);
+    font-size: rpx(14);
+  }
+
+  .mobile-login-btn {
+    width: 100%;
+    height: rpx(45);
+    font-size: rpx(16);
+    margin: rpx(20) 0;
+    border-radius: rpx(10);
+    transition: all 0.3s ease;
+  }
+
+  .mobile-login-left {
+    display: none;
+  }
+
+  .mobile-login-right {
+    width: 100%;
+  }
+
+  .mobile-sms-row {
+    display: flex;
+    gap: rpx(10);
+  }
+
+  .mobile-sms-input {
+    flex: 1;
+  }
+
+  .mobile-get-code-btn {
+    width: rpx(80);
+    height: rpx(45);
+    font-size: rpx(10);
+    padding: 0;
+    transition: all 0.3s ease;
+  }
+
+  // 通用组件适配
+  .mobile-btn {
+    padding: rpx(8) rpx(16);
+    font-size: rpx(12);
+    transition: all 0.3s ease;
+  }
+
+  .mobile-card {
+    width: 100%;
+    margin: rpx(10) 0;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+  }
+
+  .mobile-img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .mobile-text {
+    font-size: rpx(12);
+  }
+
+  .mobile-margin {
+    margin: rpx(10);
+  }
+
+  .mobile-padding {
+    padding: rpx(10);
+  }
+}
+
+// ==================== 移动端竖屏显示横屏提示 ====================
+@media (max-width: 768px) and (orientation: portrait) {
+  .mobile-landscape-hint.mobile-show {
+    display: flex;
+  }
+}
+
+// ==================== 移动端横屏优化 ====================
+@media (max-width: 768px) and (orientation: landscape) {
+  .mobile-landscape-hint.mobile-show {
+    display: none;
+  }
+
+  .mobile-login-wrapper {
+    min-height: 60%;
+    max-height: 70vh;
+    width: 60%;
+  }
+}
+
+// ==================== 小屏幕优化（480px以下）====================
+@media (max-width: 480px) {
+  .mobile-login-wrapper {
+    width: 90%;
+    padding: rpx(20);
+  }
+
+  .mobile-login-form ::v-deep(.el-input__wrapper) {
+    height: rpx(40);
+  }
+
+  .mobile-login-form ::v-deep(.el-input__inner) {
+    height: rpx(40);
+    font-size: rpx(12);
+  }
+
+  .mobile-login-btn {
+    height: rpx(40);
+    font-size: rpx(14);
+  }
+
+  .mobile-landscape-hint .hint-text {
+    font-size: rpx(22);
+  }
+
+  .mobile-landscape-hint .hint-desc {
+    font-size: rpx(14);
+  }
+}