From 7bbb1be2a28a2fa0f08bbb8be8cb83c31706b414 Mon Sep 17 00:00:00 2001 From: MichaelWin Date: Fri, 31 Oct 2025 10:12:31 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/assets/css/main.css | 283 ++++++++++++++++++ 1 file changed, 283 insertions(+) create mode 100644 src/main/resources/static/assets/css/main.css diff --git a/src/main/resources/static/assets/css/main.css b/src/main/resources/static/assets/css/main.css new file mode 100644 index 0000000..24285c3 --- /dev/null +++ b/src/main/resources/static/assets/css/main.css @@ -0,0 +1,283 @@ +:root { + --primary-color: #5B5FDE; + --secondary-color: #0EA5E9; + --accent-color: #FF6B6B; + --error-color: #F43F5E; + --success-color: #10B981; + --warning-color: #F59E0B; + --info-color: #3B82F6; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #F3F4F6; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +/* 侧边栏样式 */ +.sidebar { + min-height: 100vh; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: white; + padding: 0; + position: fixed; + left: 0; + top: 0; + width: 180px; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); +} + +.sidebar-header { + padding: 18px 12px; + text-align: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.sidebar-header h4 { + font-size: 16px; + font-weight: 700; + margin: 0; +} + +.sidebar-header i { + margin-right: 5px; + font-size: 16px; +} + +.sidebar-menu { + padding: 12px 8px; +} + +.sidebar .nav-link { + color: rgba(255, 255, 255, 0.85); + padding: 9px 10px; + border-radius: 8px; + margin: 3px 0; + transition: all 0.3s; + font-weight: 500; + font-size: 13px; + display: flex; + align-items: center; +} + +.sidebar .nav-link i { + width: 18px; + font-size: 15px; +} + +.sidebar .nav-link:hover { + background-color: rgba(255, 255, 255, 0.15); + color: white; + transform: translateX(5px); +} + +.sidebar .nav-link.active { + background-color: rgba(255, 255, 255, 0.25); + color: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.sidebar-footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 12px 8px; +} + +.btn-logout { + width: 100%; + padding: 9px; + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + color: white; + border-radius: 8px; + font-weight: 600; + font-size: 13px; + transition: all 0.3s; +} + +.btn-logout:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-2px); +} + +/* 顶部导航栏 */ +.navbar { + background-color: white; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + padding: 12px 25px; +} + +.navbar-brand { + font-size: 18px; + font-weight: 700; + color: #1F2937; +} + +.user-info { + display: flex; + align-items: center; + gap: 8px; + color: #4B5563; + font-weight: 500; + font-size: 14px; +} + +.user-info i { + font-size: 20px; + color: var(--primary-color); +} + +/* 主内容区 */ +.main-content { + margin-left: 180px; +} + +/* 内容区域 */ +.content-wrapper { + padding: 25px; +} + +/* 欢迎卡片 */ +.welcome-card { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: white; + border-radius: 16px; + padding: 35px; + margin-bottom: 25px; + box-shadow: 0 10px 30px rgba(91, 95, 222, 0.2); + position: relative; + overflow: hidden; +} + +.welcome-card::before { + content: ''; + position: absolute; + width: 250px; + height: 250px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + top: -80px; + right: -80px; +} + +.welcome-card h2 { + font-size: 26px; + font-weight: 700; + margin-bottom: 10px; + position: relative; + z-index: 1; +} + +.welcome-card p { + font-size: 15px; + opacity: 0.95; + position: relative; + z-index: 1; +} + +/* 统计卡片 */ +.stat-card { + background: white; + border-radius: 12px; + padding: 25px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + transition: all 0.3s; + border: 1px solid #E5E7EB; +} + +.stat-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); +} + +.stat-card i { + font-size: 40px; + opacity: 0.9; + margin-bottom: 12px; +} + +.stat-card h3 { + font-size: 30px; + font-weight: 700; + margin: 12px 0 6px; + color: #1F2937; +} + +.stat-card p { + color: #6B7280; + font-size: 13px; + margin: 0; +} + +.stat-card.primary i { + color: var(--primary-color); +} + +.stat-card.success i { + color: var(--success-color); +} + +.stat-card.warning i { + color: var(--warning-color); +} + +.stat-card.info i { + color: var(--info-color); +} + +/* 页面标题 */ +.page-title { + font-size: 24px; + font-weight: 700; + color: #1F2937; + margin-bottom: 20px; +} + +/* 卡片容器 */ +.card { + background: white; + border-radius: 12px; + border: 1px solid #E5E7EB; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.card-body { + padding: 25px; +} + +/* 响应式 */ +@media (max-width: 768px) { + .sidebar { + width: 100%; + position: relative; + min-height: auto; + } + + .main-content { + margin-left: 0; + } + + .sidebar-footer { + position: static; + margin-top: 15px; + } + + .welcome-card { + padding: 25px; + } + + .welcome-card h2 { + font-size: 20px; + } + + .content-wrapper { + padding: 20px; + } +} \ No newline at end of file