diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue index 2c03427..4a69dc1 100644 --- a/src/views/DashboardView.vue +++ b/src/views/DashboardView.vue @@ -3,7 +3,7 @@
- + - - -
+ + +
+ +
+ + +

{{ metric.title }}

-
- -
- +
- +
{{ metric.detail || '전월 대비' }} @@ -693,7 +695,11 @@ onBeforeUnmount(() => { background: linear-gradient(90deg, var(--v-theme-warning), var(--v-theme-warning-lighten-1)); } -.metric-icon-wrapper { +/* 아이콘을 카드 맨 오른쪽 상단에 절대 위치로 배치 */ +.metric-icon-wrapper-absolute { + position: absolute; + top: 16px; + right: 16px; width: 40px; height: 40px; border-radius: 10px; @@ -701,11 +707,13 @@ onBeforeUnmount(() => { align-items: center; justify-content: center; opacity: 0.15; + z-index: 1; } .metric-title { color: var(--v-theme-on-surface); font-weight: 600; + padding-right: 48px; /* 아이콘 공간 확보 */ } .metric-value { @@ -912,9 +920,15 @@ onBeforeUnmount(() => { font-size: 1.75rem !important; } - .metric-icon-wrapper { + .metric-icon-wrapper-absolute { width: 36px; height: 36px; + top: 12px; + right: 12px; + } + + .metric-title { + padding-right: 44px; } .chart-area { @@ -927,6 +941,17 @@ onBeforeUnmount(() => { font-size: 1.5rem !important; } + .metric-icon-wrapper-absolute { + width: 32px; + height: 32px; + top: 10px; + right: 10px; + } + + .metric-title { + padding-right: 40px; + } + .chart-area { height: 200px !important; }