From 66464685fe17280a7ceeb6a9a9af58f40856890b Mon Sep 17 00:00:00 2001 From: liuwei Date: Fri, 13 Jun 2025 18:20:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B0=9D=E8=AF=95=E4=BC=98?= =?UTF-8?q?=E5=8C=96=EF=BC=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/dashboard/templates/base.html | 72 +++++++++++-- admin/dashboard/templates/index.html | 152 ++++++++++++++++++++++----- 2 files changed, 189 insertions(+), 35 deletions(-) diff --git a/admin/dashboard/templates/base.html b/admin/dashboard/templates/base.html index 6001681..03c5c14 100644 --- a/admin/dashboard/templates/base.html +++ b/admin/dashboard/templates/base.html @@ -23,6 +23,7 @@ margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; + background-color: #f5f7fa; } .app-container { height: 100vh; @@ -30,13 +31,14 @@ flex-direction: column; } .header { - background-color: #006af5; + background: linear-gradient(135deg, #1890ff 0%, #006af5 100%); color: white; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .header-left { display: flex; @@ -46,6 +48,8 @@ width: 40px; height: 40px; margin-right: 10px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .main-container { display: flex; @@ -53,36 +57,67 @@ overflow: hidden; } .sidebar { - width: 180px; - background-color: #545c64; + width: 200px; + background-color: #fff; height: 100%; overflow-y: auto; + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); } .content { flex: 1; - padding: 20px; + padding: 24px; overflow-y: auto; - background-color: #f0f2f5; + background-color: #f5f7fa; display: flex; flex-direction: column; } .el-menu { border-right: none; } + .el-menu-item { + height: 50px; + line-height: 50px; + margin: 4px 0; + border-radius: 4px; + margin: 4px 8px; + } + .el-menu-item:hover { + background-color: #f5f7fa !important; + } + .el-menu-item.is-active { + background-color: #e6f7ff !important; + color: #1890ff !important; + } .chart-container { background-color: white; - padding: 20px; - border-radius: 4px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - margin-bottom: 20px; + padding: 24px; + border-radius: 8px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); + margin-bottom: 24px; + transition: all 0.3s ease; + } + .chart-container:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); } .stats-card { - margin-bottom: 20px; + margin-bottom: 24px; + transition: all 0.3s ease; + } + .stats-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .logout-btn { color: white; cursor: pointer; margin-left: 15px; + padding: 8px 16px; + border-radius: 4px; + transition: all 0.3s ease; + } + .logout-btn:hover { + background-color: rgba(255, 255, 255, 0.1); } .header-right { display: flex; @@ -90,6 +125,23 @@ } .user-info { margin-right: 10px; + font-weight: 500; + } + /* 自定义滚动条样式 */ + ::-webkit-scrollbar { + width: 6px; + height: 6px; + } + ::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; + } + ::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 3px; + } + ::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; } diff --git a/admin/dashboard/templates/index.html b/admin/dashboard/templates/index.html index 610930b..6d31004 100644 --- a/admin/dashboard/templates/index.html +++ b/admin/dashboard/templates/index.html @@ -694,26 +694,67 @@ .stats-card { margin-bottom: 15px; height: 120px; + border-radius: 8px; + transition: all 0.3s ease; + } + + .stats-card .el-card__header { + padding: 15px 20px; + border-bottom: 1px solid #ebeef5; + font-weight: 500; + color: #606266; + } + + .stats-card .el-card__body { + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .stats-card .el-card__body > div { + font-size: 28px; + font-weight: 600; + color: #303133; + text-align: center; } .chart-container { - margin-bottom: 20px; - padding: 10px; + margin-bottom: 24px; + padding: 24px; background-color: #fff; - border-radius: 4px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 8px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; + } + + .chart-container:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); } .chart-container h3 { - margin-top: 0; - margin-bottom: 10px; - font-size: 16px; - color: #606266; + margin: 0 0 20px 0; + font-size: 18px; + font-weight: 500; + color: #303133; + display: flex; + align-items: center; + } + + .chart-container h3::before { + content: ''; + display: inline-block; + width: 4px; + height: 16px; + background: #1890ff; + margin-right: 8px; + border-radius: 2px; } /* 用户信息卡片样式 */ .user-info-container { - padding: 5px 0; + padding: 20px; } .user-avatar-column { @@ -724,39 +765,46 @@ } .user-avatar-container { - width: 30px !important; - height: 30px !important; + width: 82px !important; + height: 82px !important; border-radius: 50%; overflow: hidden; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; + border: 3px solid #fff; + transition: all 0.3s ease; + } + + .user-avatar-container:hover { + transform: scale(1.05); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .user-avatar-container img { - width: 15px !important; - height: 15px !important; - object-fit: contain; + width: 100% !important; + height: 100% !important; + object-fit: cover; } .user-info-column { - padding-left: 5px; + padding-left: 20px; } .user-info-item { display: flex; align-items: center; - font-size: 12px; - line-height: 1.4; - margin-bottom: 4px; + font-size: 14px; + line-height: 1.6; + margin-bottom: 8px; } .user-info-label { - color: #606266; - width: 45px; + color: #909399; + width: 60px; flex-shrink: 0; - font-weight: bold; + font-weight: 500; } .user-info-value { @@ -765,14 +813,68 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-weight: bold; + font-weight: 500; } .user-info-empty { text-align: center; color: #909399; - padding: 10px 0; + padding: 30px 0; + font-size: 14px; + } + + .user-info-empty i { + font-size: 24px; + margin-bottom: 8px; + color: #dcdfe6; + } + + /* 表格样式优化 */ + .el-table { + border-radius: 8px; + overflow: hidden; + } + + .el-table th { + background-color: #f5f7fa !important; + font-weight: 500; + } + + .el-table td, .el-table th { + padding: 12px 0; + } + + /* 时间范围选择器样式 */ + .el-form--inline .el-form-item { + margin-right: 20px; + } + + .el-select { + width: 160px; + } + + /* 图表容器样式 */ + .chart-container canvas { + max-height: 300px; + } + + /* 响应式布局调整 */ + @media screen and (max-width: 1400px) { + .el-col-6 { + width: 33.33%; + } + .el-col-3 { + width: 25%; + } + } + + @media screen and (max-width: 1200px) { + .el-col-6 { + width: 50%; + } + .el-col-3 { + width: 33.33%; + } } - {% endblock %} \ No newline at end of file