ruoyi-vue/src/assets/styles/mobile.scss

/**
 * 移动端专用样式
 */

// 移动端全局优化
@media (max-width: 768px) {
  // 页面容器
  .app-container {
    padding: 12px !important;
    background: #f5f7fa;
    min-height: calc(100vh - 48px - 60px); // 减去头部和底部导航
  }

  // 卡片样式
  .el-card {
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
    border: none;
    
    .el-card__header {
      padding: 16px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .el-card__body {
      padding: 16px;
    }
  }

  // 列表项优化
  .el-list-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
  }

  // 分割线优化
  .el-divider {
    margin: 16px 0;
  }

  // 标签优化
  .el-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    margin: 2px;
  }

  // 徽章优化
  .el-badge {
    .el-badge__content {
      font-size: 10px;
      padding: 0 4px;
      height: 16px;
      line-height: 16px;
      min-width: 16px;
    }
  }

  // 步骤条优化
  .el-steps {
    .el-step__title {
      font-size: 12px;
    }
    
    .el-step__description {
      font-size: 11px;
    }
  }

  // 时间线优化
  .el-timeline {
    padding-left: 20px;
    
    .el-timeline-item__node {
      width: 12px;
      height: 12px;
    }
    
    .el-timeline-item__content {
      font-size: 13px;
    }
  }

  // 描述列表优化
  .el-descriptions {
    .el-descriptions__label {
      width: 35%;
      font-size: 13px;
      color: #909399;
    }
    
    .el-descriptions__content {
      font-size: 13px;
      color: #303133;
    }
  }

  // 空状态优化
  .el-empty {
    padding: 40px 20px;
    
    .el-empty__image {
      width: 120px;
      height: 120px;
    }
    
    .el-empty__description {
      font-size: 14px;
      color: #909399;
      margin-top: 16px;
    }
  }

  // 骨架屏优化
  .el-skeleton {
    padding: 16px;
    
    .el-skeleton__item {
      margin-bottom: 12px;
      border-radius: 4px;
    }
  }

  // 结果页优化
  .el-result {
    padding: 30px 20px;
    
    .el-result__icon {
      font-size: 60px;
    }
    
    .el-result__title {
      font-size: 18px;
      margin-top: 20px;
    }
    
    .el-result__subtitle {
      font-size: 14px;
      margin-top: 12px;
    }
  }

  // 加载优化
  .el-loading-mask {
    border-radius: 8px;
  }

  // 消息提示优化
  .el-message {
    min-width: auto;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    padding: 12px 16px;
    
    .el-message__content {
      font-size: 14px;
    }
  }

  // 通知优化
  .el-notification {
    width: 90%;
    border-radius: 8px;
    padding: 16px;
    
    .el-notification__title {
      font-size: 15px;
    }
    
    .el-notification__content {
      font-size: 13px;
      margin-top: 8px;
    }
  }

  // 弹出层优化
  .el-popover {
    border-radius: 8px;
    padding: 12px;
    max-width: 90vw;
  }

  // 工具提示优化
  .el-tooltip__popper {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
  }

  // 下拉菜单优化
  .el-dropdown-menu {
    border-radius: 8px;
    padding: 8px 0;
    
    .el-dropdown-menu__item {
      padding: 12px 20px;
      font-size: 14px;
      
      &:hover {
        background: #f5f7fa;
      }
    }
  }

  // 选择器下拉优化
  .el-select-dropdown {
    border-radius: 8px;
    
    .el-select-dropdown__item {
      padding: 12px 20px;
      font-size: 14px;
    }
  }

  // 日期选择器优化
  .el-picker-panel {
    width: 95%;
    left: 2.5% !important;
    border-radius: 8px;
    
    .el-date-picker__header {
      padding: 12px 16px;
    }
    
    .el-picker-panel__content {
      padding: 8px;
    }
  }

  // 级联选择器优化
  .el-cascader-menus {
    border-radius: 8px;
    
    .el-cascader-menu {
      min-width: 120px;
    }
  }

  // 穿梭框优化
  .el-transfer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .el-transfer-panel {
      width: 100%;
      border-radius: 8px;
    }
  }

  // 树形控件优化
  .el-tree {
    .el-tree-node__content {
      height: 44px;
      padding: 0 12px;
      
      &:hover {
        background: #f5f7fa;
      }
    }
    
    .el-tree-node__label {
      font-size: 14px;
    }
  }

  // 折叠面板优化
  .el-collapse {
    border: none;
    
    .el-collapse-item {
      margin-bottom: 12px;
      border: 1px solid #e4e7ed;
      border-radius: 8px;
      overflow: hidden;
      
      .el-collapse-item__header {
        padding: 16px;
        font-size: 15px;
        font-weight: 500;
      }
      
      .el-collapse-item__content {
        padding: 16px;
        font-size: 14px;
      }
    }
  }

  // 进度条优化
  .el-progress {
    .el-progress__text {
      font-size: 12px;
    }
  }

  // 滑块优化
  .el-slider {
    margin: 20px 0;
    
    .el-slider__button {
      width: 20px;
      height: 20px;
      border: 2px solid #409eff;
    }
  }

  // 评分优化
  .el-rate {
    .el-rate__item {
      font-size: 24px;
      margin-right: 8px;
    }
  }

  // 颜色选择器优化
  .el-color-picker {
    .el-color-picker__trigger {
      width: 50px;
      height: 50px;
      border-radius: 8px;
    }
  }

  // 上传组件优化
  .el-upload {
    width: 100%;
    
    .el-upload-dragger {
      width: 100%;
      padding: 30px;
      border-radius: 8px;
    }
  }

  // 图片预览优化
  .el-image-viewer__wrapper {
    .el-image-viewer__canvas {
      img {
        max-width: 90vw;
        max-height: 90vh;
      }
    }
  }

  // 抽屉优化
  .el-drawer {
    .el-drawer__header {
      padding: 20px;
      border-bottom: 1px solid #e4e7ed;
      
      .el-drawer__title {
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .el-drawer__body {
      padding: 20px;
    }
  }

  // 固定定位元素优化（适配安全区域）
  .fixed-bottom {
    bottom: env(safe-area-inset-bottom);
  }
  
  .fixed-top {
    top: env(safe-area-inset-top);
  }
}

// 平板设备优化
@media (min-width: 769px) and (max-width: 1024px) {
  .app-container {
    padding: 16px !important;
  }
  
  .el-card {
    border-radius: 10px;
    margin-bottom: 16px;
  }
}