完成评查点分组列表和评查点列表的页面,封装部分组件,重新构造样式文件结构
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
/**
|
||||
* 主样式文件
|
||||
* 包含应用所有样式
|
||||
*/
|
||||
|
||||
/* Tailwind 基础指令 */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 全局变量和基础样式 */
|
||||
@layer base {
|
||||
:root {
|
||||
/* 主题颜色变量 */
|
||||
--color-primary: #00684a;
|
||||
--color-primary-hover: #005a3f;
|
||||
--color-primary-light: rgba(0, 104, 74, 0.1);
|
||||
|
||||
/* 成功、警告、错误颜色 */
|
||||
--color-success: #52c41a;
|
||||
--color-warning: #faad14;
|
||||
--color-error: #f5222d;
|
||||
|
||||
/* 中性色 */
|
||||
--color-gray-50: #f8f9fa;
|
||||
--color-gray-100: #f1f3f5;
|
||||
--color-gray-200: #e9ecef;
|
||||
--color-gray-300: #dee2e6;
|
||||
--color-gray-400: #ced4da;
|
||||
--color-gray-500: #adb5bd;
|
||||
--color-gray-600: #868e96;
|
||||
--color-gray-700: #495057;
|
||||
--color-gray-800: #343a40;
|
||||
--color-gray-900: #212529;
|
||||
}
|
||||
|
||||
/* 基本元素样式 */
|
||||
html, body {
|
||||
@apply text-gray-800 antialiased;
|
||||
font-smooth: always;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 文字选择颜色 */
|
||||
::selection {
|
||||
@apply bg-[rgba(0,104,74,0.2)] text-[#00684a];
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full hover:bg-gray-400;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
@apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
/* 组件相关样式 */
|
||||
@layer components {
|
||||
/* 文本颜色工具类 */
|
||||
.text-primary {
|
||||
@apply text-[#00684a];
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
@apply bg-[#00684a];
|
||||
}
|
||||
|
||||
.transition-all-ease {
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
/* === 布局组件 === */
|
||||
.layout-container {
|
||||
@apply flex min-h-screen bg-gray-50;
|
||||
}
|
||||
|
||||
/* 用户资料 */
|
||||
.user-profile {
|
||||
@apply p-4 border-b border-gray-100 flex items-center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center;
|
||||
}
|
||||
|
||||
/* === 侧边栏 === */
|
||||
.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-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 relative
|
||||
hover:bg-[rgba(0,104,74,0.05)];
|
||||
/* 确保点击事件可以正常工作 */
|
||||
pointer-events: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-menu-item i {
|
||||
@apply text-base w-6 text-center;
|
||||
}
|
||||
|
||||
.sidebar-menu-text {
|
||||
@apply ml-2.5 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-menu-text {
|
||||
@apply opacity-0 invisible;
|
||||
}
|
||||
|
||||
.sidebar-menu-item.active {
|
||||
@apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
|
||||
}
|
||||
|
||||
.submenu-container {
|
||||
@apply mt-1 mb-2 space-y-1 overflow-hidden border-l border-gray-100 ml-4 pl-3 relative;
|
||||
/* 确保子菜单在父菜单之上 */
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .submenu-container {
|
||||
@apply border-l-0 pl-0;
|
||||
}
|
||||
|
||||
.submenu-container .sidebar-menu-item {
|
||||
@apply py-2 pl-2 text-sm;
|
||||
}
|
||||
|
||||
.sidebar-menu-item:hover {
|
||||
@apply bg-[rgba(0,104,74,0.05)];
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* === 主内容区域 === */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* === UI组件 === */
|
||||
|
||||
/* 按钮样式 */
|
||||
.ant-btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2
|
||||
border border-transparent rounded-md font-medium text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
@apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
@apply bg-[#f5222d] text-white hover:bg-[#cf1f29] focus:ring-[#f5222d];
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
@apply px-3 py-1.5 text-sm;
|
||||
}
|
||||
|
||||
/* 卡片组件 */
|
||||
.card {
|
||||
@apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
|
||||
}
|
||||
|
||||
/* === 响应式调整 === */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user