113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<template>
|
||
<section class="metrics-section" aria-label="교육 성과 지표">
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="metric-icon">⭐</div>
|
||
<div class="metric-num">98.7%</div>
|
||
<div class="metric-label">{{ regionDong }} 학부모 만족도</div>
|
||
<div class="metric-sub">재수강 의사 압도적 1위</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📈</div>
|
||
<div class="metric-num">+26.8점</div>
|
||
<div class="metric-label">평균 내신 성적 상승폭</div>
|
||
<div class="metric-sub">수강 3개월 이내 실측</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">👨🏫</div>
|
||
<div class="metric-num">100%</div>
|
||
<div class="metric-label">전담 강사 신원 검증</div>
|
||
<div class="metric-sub">SKY 및 명문대 출신 4단계 심사</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🏆</div>
|
||
<div class="metric-num">12,500+</div>
|
||
<div class="metric-label">누적 1:1 맞춤 배정</div>
|
||
<div class="metric-sub">전국 학군별 데이터 기반</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
regionDong: {
|
||
type: String,
|
||
default: '해당 지역'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.metrics-section {
|
||
max-width: 1080px;
|
||
margin: -24px auto 40px;
|
||
padding: 0 16px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.metrics-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.metric-card {
|
||
background: var(--bg-card, #ffffff);
|
||
border: 1px solid var(--border-color, #e2e8f0);
|
||
border-radius: var(--card-radius, 12px);
|
||
padding: clamp(14px, 2.5vw, 20px) 10px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.metric-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.metric-icon {
|
||
font-size: clamp(1.2rem, 3vw, 1.6rem);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.metric-num {
|
||
font-size: clamp(1.15rem, 3.2vw, 1.8rem);
|
||
font-weight: 900;
|
||
color: var(--primary-color, #1e3a8a);
|
||
letter-spacing: -0.5px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: clamp(0.75rem, 2vw, 0.88rem);
|
||
font-weight: 700;
|
||
color: var(--text-color, #1e293b);
|
||
margin-top: 4px;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.metric-sub {
|
||
font-size: clamp(0.68rem, 1.7vw, 0.78rem);
|
||
color: #64748b;
|
||
margin-top: 2px;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.metrics-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.metrics-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
</style>
|