// layouts.less 使用示例
// 这个文件展示了如何在页面中使用 common/layouts.less 中的布局方法

// 示例1: 使用Flex布局
.example-flex {
  .flex-between; // 使用两端对齐布局
  padding: 20px;
  background-color: #f5f5f5;
  
  .item {
    .flex-center; // 使用居中布局
    width: 100px;
    height: 100px;
    background-color: #007aff;
    color: white;
    border-radius: 8px;
  }
}

// 示例2: 使用Grid布局
.example-grid {
  .grid-responsive(4, 16px); // 使用响应式网格，4列，间距16px
  padding: 20px;
  
  .item {
    height: 120px;
    background-color: #ff9500;
    border-radius: 8px;
    
    &:nth-child(1) {
      .grid-col(2); // 占据2列
    }
  }
}

// 示例3: 使用卡片布局
.example-card {
  max-width: 400px;
  margin: 20px auto;
  
  .card(); // 使用基础卡片样式
  
  .card-header {
    font-size: 18px;
    font-weight: bold;
  }
  
  .card-body {
    .flex-column;
    gap: 16px;
  }
  
  .card-footer {
    .flex-between;
  }
}

// 示例4: 使用响应式布局
.example-responsive {
  display: flex;
  gap: 20px;
  padding: 20px;
  
  .desktop-only {
    .hidden-sm; // 在小屏幕上隐藏
    width: 200px;
    height: 200px;
    background-color: #4cd964;
  }
  
  .mobile-only {
    .visible-sm; // 只在小屏幕上显示
    width: 100%;
    height: 100px;
    background-color: #ff3b30;
  }
}

// 示例5: 使用间距工具类
.example-spacing {
  .m-4; // margin: 16px
  .p-6; // padding: 24px
  background-color: #e9e9eb;
  
  .child {
    .mt-3; // margin-top: 12px
    .mb-3; // margin-bottom: 12px
    .px-4; // padding-left: 16px; padding-right: 16px
    background-color: #ffffff;
  }
}

// 示例6: 使用页面布局
.example-page {
  .page-with-header-footer;
  
  .page-header {
    .navbar-top;
  }
  
  .page-content {
    .container-responsive;
  }
  
  .page-footer {
    .navbar-bottom;
  }
}