1

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './mobile.scss';
 
 body {
   height: 100%;
@@ -122,6 +123,10 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  
+  @media (max-width: 768px) {
+    padding: 10px;
+  }
 }
 
 .components-container {
@@ -176,3 +181,214 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+// 移动端响应式优化
+@media (max-width: 768px) {
+  // 全局容器优化
+  .app-container {
+    padding: 10px !important;
+  }
+
+  .components-container {
+    margin: 15px 10px !important;
+  }
+
+  // 表单优化
+  .el-form {
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+    
+    .el-form-item__label {
+      font-size: 14px;
+      padding-bottom: 5px;
+    }
+    
+    .el-input,
+    .el-select,
+    .el-date-picker {
+      width: 100% !important;
+    }
+  }
+
+  // 按钮组优化
+  .el-button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    
+    .el-button {
+      flex: 1;
+      min-width: 80px;
+    }
+  }
+
+  // 对话框优化
+  .el-dialog {
+    width: 95% !important;
+    margin: 5vh auto !important;
+    max-height: 90vh;
+    overflow-y: auto;
+    
+    .el-dialog__body {
+      padding: 15px;
+      max-height: calc(90vh - 120px);
+      overflow-y: auto;
+    }
+  }
+
+  // 抽屉优化
+  .el-drawer {
+    width: 85% !important;
+  }
+
+  // 分页优化
+  .pagination-container {
+    padding: 10px 0;
+    
+    .el-pagination {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 5px;
+      
+      .el-pagination__sizes,
+      .el-pagination__total,
+      .el-pagination__jump {
+        display: none; // 移动端隐藏部分分页信息
+      }
+    }
+  }
+
+  // 卡片优化
+  .el-card {
+    margin-bottom: 10px;
+    
+    .el-card__header {
+      padding: 12px 15px;
+      font-size: 14px;
+    }
+    
+    .el-card__body {
+      padding: 15px;
+    }
+  }
+
+  // 标签页优化
+  .el-tabs {
+    .el-tabs__header {
+      margin: 0 0 15px 0;
+    }
+    
+    .el-tabs__item {
+      padding: 0 12px;
+      font-size: 14px;
+    }
+  }
+
+  // 表格容器优化
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    
+    .el-table {
+      min-width: 600px; // 保持最小宽度，允许横向滚动
+    }
+  }
+
+  // 搜索表单优化
+  .search-form {
+    .el-form-item {
+      width: 100% !important;
+      margin-right: 0 !important;
+    }
+  }
+
+  // 操作按钮区域优化
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+    
+    .el-button {
+      flex: 1;
+      min-width: 80px;
+    }
+  }
+
+  // 文本溢出处理
+  .text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 触摸优化
+  * {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+  }
+  
+  // 移动端卡片列表优化
+  .mobile-card-list {
+    background: #f5f7fa;
+    padding: 12px;
+  }
+  
+  // 移动端搜索表单优化
+  .mobile-search-form {
+    .search-bar {
+      background: #fff;
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+  }
+  
+  // 移动端按钮组优化
+  .mobile-button-group {
+    .mobile-buttons {
+      background: #fff;
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+  }
+  
+  // 移动端表格容器优化
+  .table-container {
+    @media (max-width: 768px) {
+      .el-table {
+        display: none; // 移动端隐藏表格，使用卡片视图
+      }
+    }
+  }
+
+  // 输入框优化（防止iOS自动缩放）
+  input[type="text"],
+  input[type="password"],
+  input[type="number"],
+  input[type="email"],
+  input[type="tel"],
+  textarea,
+  select {
+    font-size: 16px !important;
+  }
+
+  // 禁用文本选择（移动端长按优化）
+  .no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}
+
+// 平板设备优化
+@media (min-width: 769px) and (max-width: 1024px) {
+  .app-container {
+    padding: 15px !important;
+  }
+
+  .components-container {
+    margin: 20px 30px !important;
+  }
+}