diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index 78df592..ae1fb52 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -1,5 +1,5 @@ @@ -129,6 +214,79 @@ const roleLabel = computed(() => { overflow: auto; } +/* 欢迎区:不带面板边框;占用剩余空间并垂直居中(原生欢迎页即整屏居中,而非贴顶) */ +.welcome-panel { + flex: 1 1 auto; + /* 保底高度:面板内容较高时仍保证欢迎区有足够留白,不被压扁 */ + min-height: 320px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 24px 20px; +} + +.welcome-logo { + width: 80px; + height: 80px; + object-fit: contain; +} + +.welcome-title { + margin: 12px 0 0; + font-size: 28px; + font-weight: 700; + line-height: 1.3; + color: var(--el-text-color-primary); +} + +.welcome-subtitle { + margin: 6px 0 0; + font-size: 13px; + color: var(--el-text-color-secondary); +} + +/* 每日一言:可点击换一条,切换走透明度过渡 */ +.welcome-quote { + margin-top: 18px; + max-width: 640px; + cursor: pointer; + user-select: none; +} + +.quote-text, +.quote-author { + transition: opacity 0.3s ease; +} + +.quote-text { + font-size: 16px; + line-height: 1.8; + color: var(--el-text-color-regular); +} + +.quote-author { + margin-top: 6px; + font-size: 12px; + color: var(--el-text-color-secondary); +} + +.quote-fade-in { + opacity: 1; +} + +.quote-fade-out { + opacity: 0; +} + +.welcome-actions { + display: flex; + align-items: center; + gap: 8px; + margin-top: 20px; +} + /* 关键指标:KPI 数值区(无卡片、无装饰渐变,靠分隔线分区) */ .stat-grid { display: grid; @@ -138,6 +296,11 @@ const roleLabel = computed(() => { .stat-cell { padding: 4px 20px; + /* 首个单元去掉左内边距,与面板标题左对齐(其余靠 20px 内边距形成分区留白) */ + &:first-child { + padding-left: 0; + } + & + .stat-cell { border-left: 1px solid var(--el-border-color-lighter); } @@ -157,7 +320,11 @@ const roleLabel = computed(() => { color: var(--el-text-color-secondary); } -/* 快捷入口:图标宫格 */ +/* 快捷入口:图标宫格(面板与欢迎区共用纵向空间,禁止被压缩) */ +.dashboard > .gerp-panel { + flex-shrink: 0; +} + .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); @@ -196,4 +363,18 @@ const roleLabel = computed(() => { text-overflow: ellipsis; max-width: 100%; } + +/* 折叠开关:虚线描边与彩色图标区分"可展开",不参与跳转 */ +.quick-item-toggle { + border-color: var(--el-border-color); + border-style: dashed; + + &:hover { + border-color: var(--el-color-primary-light-5); + } + + .quick-item-icon { + color: var(--el-text-color-secondary); + } +}