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-tag-text">POINT 01</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-tag-text">POINT 02</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-tag-text">POINT 03</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-tag-text">POINT 04</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-tag {
|
|
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>
|