shared-dg04-Won/smarketing-frontend
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

release

Browse Source
This commit is contained in:
SeoJHeasdw 2025-06-12 17:38:32 +09:00
parent e5dc18117a
commit b15f6363f9
1 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/DashboardView.vue
View File

@ -3,7 +3,7 @@
<div> <div>
<!-- 메인 컨텐츠 --> <!-- 메인 컨텐츠 -->
<v-container fluid class="pa-4"> <v-container fluid class="pa-4">
<!-- 주요 지표 카드 - 제목과 증감율 위치 변경 --> <!-- 주요 지표 카드 - 아이콘을 카드 맨 오른쪽으로 이동 -->
<v-row class="mb-6"> <v-row class="mb-6">
<v-col <v-col
v-for="(metric, index) in dashboardMetrics" v-for="(metric, index) in dashboardMetrics"
@ -18,18 +18,20 @@
elevation="0" elevation="0"
border border
> >
<v-card-text class="pa-6"> <v-card-text class="pa-6 position-relative">
<!-- 제목 먼저 표시 --> <!-- 아이콘을 카드 맨 오른쪽 상단에 절대 위치로 배치 -->
<div class="d-flex align-center justify-between mb-2"> <div class="metric-icon-wrapper-absolute" :class="`bg-${metric.color}`">
<v-icon :icon="metric.icon" size="20" :color="`${metric.color}-darken-2`" />
</div>
<!-- 제목 -->
<div class="mb-2">
<h4 class="metric-title text-subtitle-1 font-weight-bold"> <h4 class="metric-title text-subtitle-1 font-weight-bold">
{{ metric.title }} {{ metric.title }}
</h4> </h4>
<div class="metric-icon-wrapper" :class="`bg-${metric.color}`">
<v-icon :icon="metric.icon" size="20" :color="`${metric.color}-darken-2`" />
</div>
</div> </div>
<!-- 증감율 두 번째로 표시 --> <!-- 증감율 -->
<div class="mb-3"> <div class="mb-3">
<v-chip <v-chip
:color=" :color="
@ -52,7 +54,7 @@
</v-chip> </v-chip>
</div> </div>
<!-- 메트릭 값 세 번째로 표시 --> <!-- 메트릭 값 -->
<div class="metric-value-wrapper mb-2"> <div class="metric-value-wrapper mb-2">
<span <span
class="metric-value text-h4 font-weight-bold" class="metric-value text-h4 font-weight-bold"
@ -63,7 +65,7 @@
</span> </span>
</div> </div>
<!-- 추가 정보 마지막에 표시 --> <!-- 추가 정보 -->
<div class="metric-detail"> <div class="metric-detail">
<span class="text-caption text-grey"> <span class="text-caption text-grey">
{{ metric.detail || '전월 대비' }} {{ metric.detail || '전월 대비' }}
@ -693,7 +695,11 @@ onBeforeUnmount(() => {
background: linear-gradient(90deg, var(--v-theme-warning), var(--v-theme-warning-lighten-1)); 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; width: 40px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
@ -701,11 +707,13 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.15; opacity: 0.15;
z-index: 1;
} }
.metric-title { .metric-title {
color: var(--v-theme-on-surface); color: var(--v-theme-on-surface);
font-weight: 600; font-weight: 600;
padding-right: 48px; /* 아이콘 공간 확보 */
} }
.metric-value { .metric-value {
@ -912,9 +920,15 @@ onBeforeUnmount(() => {
font-size: 1.75rem !important; font-size: 1.75rem !important;
} }
.metric-icon-wrapper { .metric-icon-wrapper-absolute {
width: 36px; width: 36px;
height: 36px; height: 36px;
top: 12px;
right: 12px;
}
.metric-title {
padding-right: 44px;
} }
.chart-area { .chart-area {
@ -927,6 +941,17 @@ onBeforeUnmount(() => {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
.metric-icon-wrapper-absolute {
width: 32px;
height: 32px;
top: 10px;
right: 10px;
}
.metric-title {
padding-right: 40px;
}
.chart-area { .chart-area {
height: 200px !important; height: 200px !important;
} }