+
+
+
+
+
+
+
-
+
-
+
{{ 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;
}