123 lines
3.3 KiB
Vue
123 lines
3.3 KiB
Vue
<template>
|
|
<section class="metrics-section" aria-label="교육 성과 지표">
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-icon"><i class="fa-solid fa-star"></i></div>
|
|
<div class="metric-num">{{ satisfactionRate }}%</div>
|
|
<div class="metric-label">{{ regionDong }} 학부모 만족도</div>
|
|
<div class="metric-sub">재수강 의사 압도적 1위</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-icon"><i class="fa-solid fa-arrow-trend-up"></i></div>
|
|
<div class="metric-num">+{{ scoreJump }}점</div>
|
|
<div class="metric-label">평균 내신 성적 상승폭</div>
|
|
<div class="metric-sub">수강 3개월 이내 실측</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-icon"><i class="fa-solid fa-user-graduate"></i></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"><i class="fa-solid fa-trophy"></i></div>
|
|
<div class="metric-num">{{ matchCount }}+</div>
|
|
<div class="metric-label">누적 1:1 맞춤 배정</div>
|
|
<div class="metric-sub">전국 학군별 데이터 기반</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
regionDong: {
|
|
type: String,
|
|
default: '해당 지역'
|
|
}
|
|
})
|
|
|
|
const dongSeed = computed(() => {
|
|
return Array.from(props.regionDong || '기본').reduce((acc, ch, i) => acc + ch.charCodeAt(0) * (i + 1), 0)
|
|
})
|
|
|
|
const satisfactionRate = computed(() => (98.1 + (dongSeed.value % 18) * 0.1).toFixed(1))
|
|
const scoreJump = computed(() => (23.4 + (dongSeed.value % 65) * 0.1).toFixed(1))
|
|
const matchCount = computed(() => (1400 + (dongSeed.value % 28) * 120).toLocaleString())
|
|
</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>
|