1

server_admin/src/App.vue

@@ -91,4 +91,43 @@ function logout() {
 .app-main {
   background: #f0f2f5;
 }
+
+/* 手机竖屏：侧栏收为顶部横向菜单，页面自然滚动 */
+@media (max-width: 767px) {
+  .app-layout {
+    display: block;
+    height: auto;
+  }
+  .app-aside {
+    width: 100% !important;
+  }
+  .app-logo {
+    height: 48px;
+    line-height: 48px;
+    font-size: 15px;
+  }
+  .app-aside :deep(.el-menu) {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: none;
+  }
+  .app-aside :deep(.el-menu-item) {
+    flex: 1;
+    justify-content: center;
+    height: 44px;
+    line-height: 44px;
+    min-width: 96px;
+  }
+  .app-header {
+    height: 48px;
+    padding: 0 12px;
+  }
+  .app-main {
+    overflow: visible;
+    padding: 10px;
+  }
+  .app-main :deep(.el-card) {
+    overflow-x: auto;
+  }
+}
 </style>

server_admin/src/style.css

@@ -15,3 +15,25 @@ body {
   color: #303133;
   background: #f0f2f5;
 }
+
+/* 手机竖屏适配：筛选表单换行、控件全宽、分页换行居中 */
+@media (max-width: 767px) {
+  .el-form--inline {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .el-form--inline .el-form-item {
+    margin-right: 0;
+    flex: 1 1 100%;
+  }
+  .el-form--inline .el-input,
+  .el-form--inline .el-select,
+  .el-form--inline .el-date-editor {
+    width: 100% !important;
+  }
+  .el-pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 8px;
+  }
+}

server_admin/src/views/AppVersions.vue

@@ -117,7 +117,7 @@ onMounted(load)
       @change="load"
     />
 
-    <el-dialog v-model="addVisible" title="下发新版本（Android）" width="480px">
+    <el-dialog v-model="addVisible" title="下发新版本（Android）" width="min(480px, 92vw)">
       <el-form label-width="90px">
         <el-form-item label="更新说明">
           <el-input
@@ -184,4 +184,12 @@ onMounted(load)
   font-size: 12px;
   margin-top: 6px;
 }
+
+@media (max-width: 767px) {
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: flex-start;
+  }
+}
 </style>

server_admin/src/views/Licenses.vue

@@ -161,7 +161,7 @@ onMounted(load)
       @change="load"
     />
 
-    <el-dialog v-model="grantVisible" title="手动授权" width="420px">
+    <el-dialog v-model="grantVisible" title="手动授权" width="min(420px, 92vw)">
       <el-form label-width="80px">
         <el-form-item label="手机号">
           <el-input :model-value="grantForm.phoneNum" disabled />
@@ -178,7 +178,7 @@ onMounted(load)
       </template>
     </el-dialog>
 
-    <el-dialog v-model="remarkVisible" title="账号备注" width="420px">
+    <el-dialog v-model="remarkVisible" title="账号备注" width="min(420px, 92vw)">
       <el-form label-width="80px">
         <el-form-item label="手机号">
           <el-input :model-value="remarkForm.phoneNum" disabled />

server_admin/src/views/Login.vue

@@ -64,7 +64,7 @@ function login() {
   background: #001529;
 }
 .login-card {
-  width: 380px;
+  width: min(380px, 92vw);
   padding: 12px 8px;
 }
 .login-title {