447 lines
7.1 KiB
Plaintext
447 lines
7.1 KiB
Plaintext
// 布局专用LESS文件
|
||
// 包含常用的布局混合宏和样式
|
||
|
||
// ------------------------------
|
||
// 容器布局
|
||
// ------------------------------
|
||
|
||
// 全屏容器
|
||
.full-screen {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
// 固定宽度容器
|
||
.container-fixed(@width: 1200px) {
|
||
width: @width;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
// 响应式容器
|
||
.container-responsive {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
// ------------------------------
|
||
// Flex布局混合宏
|
||
// ------------------------------
|
||
|
||
// 基础Flex布局
|
||
.flex(@direction: row; @wrap: nowrap; @justify: flex-start; @align: stretch) {
|
||
display: flex;
|
||
flex-direction: @direction;
|
||
flex-wrap: @wrap;
|
||
justify-content: @justify;
|
||
align-items: @align;
|
||
}
|
||
|
||
// 居中布局
|
||
.flex-center {
|
||
.flex(row, nowrap, center, center);
|
||
}
|
||
|
||
// 两端对齐
|
||
.flex-between {
|
||
.flex(row, nowrap, space-between, center);
|
||
}
|
||
|
||
// 顶部对齐
|
||
.flex-start {
|
||
.flex(row, nowrap, flex-start, flex-start);
|
||
}
|
||
|
||
// 底部对齐
|
||
.flex-end {
|
||
.flex(row, nowrap, flex-end, flex-end);
|
||
}
|
||
|
||
// 垂直居中
|
||
.flex-middle {
|
||
.flex(row, nowrap, flex-start, center);
|
||
}
|
||
|
||
// 垂直布局
|
||
.flex-column {
|
||
.flex(column, nowrap, flex-start, stretch);
|
||
}
|
||
|
||
// 垂直居中布局
|
||
.flex-column-center {
|
||
.flex(column, nowrap, center, center);
|
||
}
|
||
|
||
// 垂直两端对齐
|
||
.flex-column-between {
|
||
.flex(column, nowrap, space-between, stretch);
|
||
}
|
||
|
||
// ------------------------------
|
||
// 网格布局
|
||
// ------------------------------
|
||
|
||
// 基础网格容器
|
||
.grid(@columns: 12; @gap: 20px) {
|
||
display: grid;
|
||
grid-template-columns: repeat(@columns, 1fr);
|
||
grid-gap: @gap;
|
||
gap: @gap;
|
||
}
|
||
|
||
// 响应式网格
|
||
.grid-responsive(@columns: 12; @gap: 20px) {
|
||
.grid(@columns, @gap);
|
||
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
// 网格列宽
|
||
.grid-col(@span: 1) {
|
||
grid-column: span @span;
|
||
}
|
||
|
||
// 网格行高
|
||
.grid-row(@span: 1) {
|
||
grid-row: span @span;
|
||
}
|
||
|
||
// ------------------------------
|
||
// 定位布局
|
||
// ------------------------------
|
||
|
||
// 绝对定位
|
||
.position-absolute(@top: auto; @right: auto; @bottom: auto; @left: auto) {
|
||
position: absolute;
|
||
top: @top;
|
||
right: @right;
|
||
bottom: @bottom;
|
||
left: @left;
|
||
}
|
||
|
||
// 固定定位
|
||
.position-fixed(@top: auto; @right: auto; @bottom: auto; @left: auto) {
|
||
position: fixed;
|
||
top: @top;
|
||
right: @right;
|
||
bottom: @bottom;
|
||
left: @left;
|
||
}
|
||
|
||
// 粘性定位
|
||
.position-sticky(@top: 0; @z-index: 10) {
|
||
position: sticky;
|
||
top: @top;
|
||
z-index: @z-index;
|
||
}
|
||
|
||
// 居中定位（基于父容器）
|
||
.position-center {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
// 水平居中定位
|
||
.position-center-x {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
// 垂直居中定位
|
||
.position-center-y {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
// ------------------------------
|
||
// 间距布局
|
||
// ------------------------------
|
||
|
||
// 外边距
|
||
.margin(@top: 0; @right: @top; @bottom: @top; @left: @right) {
|
||
margin: @top @right @bottom @left;
|
||
}
|
||
|
||
// 内边距
|
||
.padding(@top: 0; @right: @top; @bottom: @top; @left: @right) {
|
||
padding: @top @right @bottom @left;
|
||
}
|
||
|
||
// 间距工具类（基于4px网格系统）
|
||
.spacing-utilities(@prefix: m; @property: margin) {
|
||
.loop(@i) when (@i <= 12) {
|
||
.@{prefix}-@{i} {
|
||
@{property}: @i * 4px;
|
||
}
|
||
|
||
.@{prefix}t-@{i} {
|
||
@{property}-top: @i * 4px;
|
||
}
|
||
|
||
.@{prefix}r-@{i} {
|
||
@{property}-right: @i * 4px;
|
||
}
|
||
|
||
.@{prefix}b-@{i} {
|
||
@{property}-bottom: @i * 4px;
|
||
}
|
||
|
||
.@{prefix}l-@{i} {
|
||
@{property}-left: @i * 4px;
|
||
}
|
||
|
||
.loop(@i + 1);
|
||
}
|
||
|
||
.loop(0);
|
||
}
|
||
|
||
// 生成外边距工具类
|
||
.spacing-utilities(m, margin);
|
||
|
||
// 生成内边距工具类
|
||
.spacing-utilities(p, padding);
|
||
|
||
// ------------------------------
|
||
// 卡片布局
|
||
// ------------------------------
|
||
|
||
// 基础卡片
|
||
.card(@radius: 8px; @shadow: 0 2px 8px rgba(0, 0, 0, 0.1); @bg: #fff) {
|
||
background-color: @bg;
|
||
border-radius: @radius;
|
||
box-shadow: @shadow;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 带边框的卡片
|
||
.card-bordered(@radius: 8px; @border-color: #e5e5e5; @bg: #fff) {
|
||
.card(@radius, none, @bg);
|
||
border: 1px solid @border-color;
|
||
}
|
||
|
||
// 卡片头部
|
||
.card-header {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
// 卡片主体
|
||
.card-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
// 卡片底部
|
||
.card-footer {
|
||
padding: 16px 20px;
|
||
border-top: 1px solid #e5e5e5;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
// ------------------------------
|
||
// 导航栏布局
|
||
// ------------------------------
|
||
|
||
// 基础导航栏
|
||
.navbar(@height: 60px; @bg-color: #fff; @text-color: #333) {
|
||
height: @height;
|
||
background-color: @bg-color;
|
||
color: @text-color;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
// 顶部导航栏
|
||
.navbar-top {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
.navbar();
|
||
}
|
||
|
||
// 底部导航栏
|
||
.navbar-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
.navbar();
|
||
border-top: 1px solid #e5e5e5;
|
||
}
|
||
|
||
// ------------------------------
|
||
// 页面布局
|
||
// ------------------------------
|
||
|
||
// 基础页面布局
|
||
.page-layout {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 带头部和底部的页面布局
|
||
.page-with-header-footer {
|
||
.page-layout();
|
||
|
||
.page-header {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.page-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.page-footer {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// ------------------------------
|
||
// 响应式布局
|
||
// ------------------------------
|
||
|
||
// 断点定义
|
||
@breakpoint-sm: 480px;
|
||
@breakpoint-md: 768px;
|
||
@breakpoint-lg: 1024px;
|
||
@breakpoint-xl: 1200px;
|
||
|
||
// 媒体查询混合宏
|
||
.media-sm(@rules) {
|
||
@media (max-width: @breakpoint-sm) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
.media-md(@rules) {
|
||
@media (max-width: @breakpoint-md) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
.media-lg(@rules) {
|
||
@media (max-width: @breakpoint-lg) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
.media-xl(@rules) {
|
||
@media (max-width: @breakpoint-xl) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
// 响应式显示/隐藏
|
||
.hidden-sm {
|
||
.media-sm({
|
||
display: none;
|
||
});
|
||
}
|
||
|
||
.visible-sm {
|
||
display: none;
|
||
.media-sm({
|
||
display: block;
|
||
});
|
||
}
|
||
|
||
.hidden-md {
|
||
.media-md({
|
||
display: none;
|
||
});
|
||
}
|
||
|
||
.visible-md {
|
||
display: none;
|
||
.media-md({
|
||
display: block;
|
||
});
|
||
}
|
||
|
||
// ------------------------------
|
||
// 其他布局工具
|
||
// ------------------------------
|
||
|
||
// 清除浮动
|
||
.clearfix {
|
||
&::after {
|
||
content: '';
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
}
|
||
|
||
// 相对定位
|
||
.relative {
|
||
position: relative;
|
||
}
|
||
|
||
// 绝对定位
|
||
.absolute {
|
||
position: absolute;
|
||
}
|
||
|
||
// 固定定位
|
||
.fixed {
|
||
position: fixed;
|
||
}
|
||
|
||
// 粘性定位
|
||
.sticky {
|
||
position: sticky;
|
||
}
|
||
|
||
// 隐藏溢出
|
||
.overflow-hidden {
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 自动溢出
|
||
.overflow-auto {
|
||
overflow: auto;
|
||
}
|
||
|
||
// 水平滚动
|
||
.overflow-x-auto {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
// 垂直滚动
|
||
.overflow-y-auto {
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
// 全屏高度
|
||
.full-height {
|
||
height: 100%;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
// 全屏宽度
|
||
.full-width {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|