201 lines
3.6 KiB
CSS
201 lines
3.6 KiB
CSS
/**
|
|
* 全局布局样式
|
|
* 定义应用的主要布局结构
|
|
*/
|
|
|
|
/**
|
|
* 侧边栏基础样式
|
|
*/
|
|
.sidebar {
|
|
@apply w-[280px] h-screen bg-white border-r border-gray-100 flex flex-col
|
|
transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
|
|
shadow-[0_0_15px_rgba(0,0,0,0.05)];
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
@apply w-20;
|
|
}
|
|
|
|
/* 侧边栏头部 */
|
|
.sidebar-header {
|
|
@apply h-16 border-b border-gray-100 flex items-center justify-between px-5;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
@apply flex items-center space-x-2;
|
|
}
|
|
|
|
.sidebar-logo-img {
|
|
@apply h-8 w-auto;
|
|
}
|
|
|
|
.sidebar-logo-text {
|
|
@apply font-medium text-lg text-gray-900 transition-opacity duration-200;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-logo-text {
|
|
@apply opacity-0 invisible;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
@apply bg-transparent border-none text-xl text-gray-500 cursor-pointer p-1
|
|
rounded transition-all duration-200;
|
|
}
|
|
|
|
.sidebar-toggle:hover {
|
|
@apply bg-gray-100;
|
|
}
|
|
|
|
/* 用户资料 */
|
|
.sidebar-user {
|
|
@apply flex items-center px-5 py-3 border-b border-gray-100;
|
|
}
|
|
|
|
.sidebar-user-avatar {
|
|
@apply w-10 h-10 rounded-full overflow-hidden flex-shrink-0;
|
|
}
|
|
|
|
.sidebar-user-info {
|
|
@apply ml-3 transition-opacity duration-200;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-user-info {
|
|
@apply opacity-0 invisible;
|
|
}
|
|
|
|
.sidebar-user-name {
|
|
@apply text-sm font-medium text-gray-900;
|
|
}
|
|
|
|
.sidebar-user-role {
|
|
@apply text-xs text-gray-500;
|
|
}
|
|
|
|
/* 导航菜单 */
|
|
.sidebar-menu {
|
|
@apply flex-1 overflow-y-auto py-4 px-3;
|
|
}
|
|
|
|
.sidebar-menu-item {
|
|
@apply flex items-center py-3 px-4 text-gray-800 no-underline rounded-md
|
|
cursor-pointer transition-all duration-200 mb-1;
|
|
}
|
|
|
|
.sidebar-menu-item i {
|
|
@apply text-base w-6 text-center;
|
|
}
|
|
|
|
.sidebar-menu-icon {
|
|
@apply text-xl opacity-80 w-5 flex-shrink-0;
|
|
}
|
|
|
|
.sidebar-menu-text {
|
|
@apply ml-2.5 transition-opacity duration-200;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-menu-text {
|
|
@apply opacity-0 invisible;
|
|
}
|
|
|
|
.sidebar-menu-badge {
|
|
@apply ml-auto bg-[#00684a] text-white text-xs font-semibold h-5 min-w-[20px] rounded-full
|
|
flex items-center justify-center px-1 transition-opacity duration-200;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-menu-badge {
|
|
@apply opacity-0 invisible;
|
|
}
|
|
|
|
.sidebar-menu-item:hover {
|
|
@apply bg-[rgba(0,104,74,0.05)];
|
|
}
|
|
|
|
.sidebar-menu-item.active {
|
|
@apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
|
|
}
|
|
|
|
.sidebar-submenu {
|
|
@apply pl-7 mt-1 space-y-1 transition-all duration-200 overflow-hidden;
|
|
}
|
|
|
|
.sidebar-submenu-item {
|
|
@apply flex items-center px-3 py-2 rounded-md text-sm text-gray-500
|
|
hover:bg-gray-50 transition-colors duration-100;
|
|
}
|
|
|
|
.sidebar-submenu-item.active {
|
|
@apply text-[#00684a];
|
|
}
|
|
|
|
/* 侧边栏底部 */
|
|
.sidebar-footer {
|
|
@apply border-t border-gray-100 px-5 py-4;
|
|
}
|
|
|
|
/**
|
|
* 主布局容器
|
|
*/
|
|
.layout-container {
|
|
@apply flex min-h-screen bg-gray-50;
|
|
}
|
|
|
|
/**
|
|
* 主内容区域
|
|
*/
|
|
.main-content {
|
|
@apply flex-1 ml-[280px] transition-all duration-300 min-h-screen flex flex-col;
|
|
}
|
|
|
|
.main-content.sidebar-collapsed {
|
|
@apply ml-20;
|
|
}
|
|
|
|
.content-container {
|
|
@apply flex-1 p-5 overflow-auto;
|
|
}
|
|
|
|
/**
|
|
* 面包屑导航
|
|
*/
|
|
.breadcrumb {
|
|
@apply flex items-center text-sm text-gray-500 mb-4;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: "/";
|
|
@apply mx-2;
|
|
}
|
|
|
|
.breadcrumb-item:last-child {
|
|
@apply text-gray-700 font-medium;
|
|
}
|
|
|
|
/**
|
|
* 响应式调整
|
|
*/
|
|
@screen sm {
|
|
.content-container {
|
|
@apply p-6;
|
|
}
|
|
}
|
|
|
|
@screen md {
|
|
.sidebar-toggle {
|
|
@apply block;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 暗色模式
|
|
*/
|
|
.dark .layout-container {
|
|
@apply bg-gray-900;
|
|
}
|
|
|
|
.dark .content-container {
|
|
@apply bg-gray-900 text-gray-200;
|
|
} |