148 lines
2.9 KiB
CSS
148 lines
2.9 KiB
CSS
/**
|
|
* 导航组件样式
|
|
*/
|
|
|
|
@layer components {
|
|
/* 顶部导航栏 */
|
|
.navbar {
|
|
@apply bg-white border-b border-gray-200 h-16 fixed top-0 right-0 left-0 z-20 flex items-center px-5;
|
|
}
|
|
|
|
.navbar-container {
|
|
@apply flex items-center justify-between w-full;
|
|
}
|
|
|
|
.navbar-brand {
|
|
@apply flex items-center space-x-2;
|
|
}
|
|
|
|
.navbar-brand-logo {
|
|
@apply h-8 w-auto;
|
|
}
|
|
|
|
.navbar-brand-text {
|
|
@apply font-medium text-lg text-gray-900;
|
|
}
|
|
|
|
.navbar-menu {
|
|
@apply flex items-center space-x-4;
|
|
}
|
|
|
|
.navbar-item {
|
|
@apply relative px-3 py-2 text-sm text-gray-600 hover:text-[#00684a] transition-colors;
|
|
}
|
|
|
|
.navbar-item.active {
|
|
@apply text-[#00684a] font-medium;
|
|
}
|
|
|
|
.navbar-item.active::after {
|
|
content: '';
|
|
@apply absolute bottom-0 left-0 w-full h-0.5 bg-[#00684a];
|
|
}
|
|
|
|
/* 标签页导航 */
|
|
.tabs {
|
|
@apply border-b border-gray-200;
|
|
}
|
|
|
|
.tabs-list {
|
|
@apply flex -mb-px space-x-6;
|
|
}
|
|
|
|
.tab-item {
|
|
@apply py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500
|
|
hover:text-gray-700 hover:border-gray-300 cursor-pointer;
|
|
}
|
|
|
|
.tab-item.active {
|
|
@apply border-[#00684a] text-[#00684a];
|
|
}
|
|
|
|
/* 面包屑导航 */
|
|
.breadcrumbs {
|
|
@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-800 font-medium;
|
|
}
|
|
|
|
/* 步骤导航 */
|
|
.steps {
|
|
@apply flex justify-between items-center;
|
|
}
|
|
|
|
.step-item {
|
|
@apply flex-1 relative;
|
|
}
|
|
|
|
.step-item:not(:last-child)::after {
|
|
content: '';
|
|
@apply absolute top-1/2 right-0 w-full h-0.5 bg-gray-200 -translate-y-1/2 z-0;
|
|
}
|
|
|
|
.step-item.active:not(:last-child)::after {
|
|
@apply bg-[#00684a];
|
|
}
|
|
|
|
.step-item.completed:not(:last-child)::after {
|
|
@apply bg-[#00684a];
|
|
}
|
|
|
|
.step-circle {
|
|
@apply h-8 w-8 rounded-full bg-white border-2 border-gray-300 flex items-center justify-center
|
|
text-xs font-medium text-gray-500 relative z-10;
|
|
}
|
|
|
|
.step-item.active .step-circle {
|
|
@apply border-[#00684a] text-[#00684a];
|
|
}
|
|
|
|
.step-item.completed .step-circle {
|
|
@apply bg-[#00684a] border-[#00684a] text-white;
|
|
}
|
|
|
|
.step-label {
|
|
@apply mt-2 text-xs font-medium text-gray-500 text-center;
|
|
}
|
|
|
|
.step-item.active .step-label {
|
|
@apply text-[#00684a];
|
|
}
|
|
|
|
.step-item.completed .step-label {
|
|
@apply text-[#00684a];
|
|
}
|
|
|
|
/* 下拉菜单 */
|
|
.dropdown {
|
|
@apply relative inline-block;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
@apply absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white rounded-md shadow-lg
|
|
ring-1 ring-black ring-opacity-5 focus:outline-none py-1;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
@apply my-1 border-t border-gray-100;
|
|
}
|
|
} |