80 行
2.1 KiB
Vue
80 行
2.1 KiB
Vue
<template>
|
|
<section class="section section--warm">
|
|
<div class="container">
|
|
<CommonSectionTitle :title="st('products.evolutionStats', '产品进化')" :subtitle="st('products.evolutionStats', '从V1到V9，每一次更新都是客户反馈驱动', 'subtitle')" />
|
|
<div class="evo-stats">
|
|
<div class="evo-stat">
|
|
<span class="evo-stat-num">{{ stats.iterations }}</span>
|
|
<span class="evo-stat-label">次迭代</span>
|
|
</div>
|
|
<div class="evo-stat">
|
|
<span class="evo-stat-num">{{ stats.years }}</span>
|
|
<span class="evo-stat-label">年打磨</span>
|
|
</div>
|
|
<div class="evo-stat">
|
|
<span class="evo-stat-num">{{ stats.guests }}</span>
|
|
<span class="evo-stat-label">人次体验</span>
|
|
</div>
|
|
</div>
|
|
<p class="evo-intro">2023年3月，呼籁做了一个"反常识"的决定——只做一条路线。不铺量、不贪多，把所有精力集中在打磨一个产品上。三年9次迭代，每一次版本更新背后，都有真实的客户反馈和一线体验数据。</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
stats: { type: Object, required: true }
|
|
})
|
|
const st = await useSectionTitles()
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.evo-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: @space-2xl;
|
|
margin-bottom: @space-xl;
|
|
}
|
|
|
|
.evo-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.evo-stat-num {
|
|
display: inline-block;
|
|
font-size: @font-size-3xl;
|
|
font-weight: @font-weight-bold;
|
|
color: @color-primary;
|
|
line-height: @line-height-tight;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 10%;
|
|
right: 10%;
|
|
height: 3px;
|
|
background: @color-primary-lighter;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.evo-stat-label {
|
|
display: block;
|
|
margin-top: @space-sm;
|
|
font-size: @font-size-sm;
|
|
color: @color-text-muted;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.evo-intro {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
font-size: @font-size-base;
|
|
color: @color-text-secondary;
|
|
line-height: @line-height-loose;
|
|
}
|
|
</style>
|