feat: 后台管理系统完整重构 + 前后台数据联通
- 后台全面引入 Naive UI 组件库，统一 UI 规范 - 前台 usePublicApi 切换到 API 调用（GET /api/content/[key]） - 前后台数据源统一（site_content 表） - 产品线统一管理（tour/camp/course 三套编辑器） - 产品数据归一化（itinerary/faq/pricing 格式统一） - 表单提交 API 改写入 submissions 表 - 新增 submissions 标记已读 API - site-content PUT 支持 upsert - 修复前台 bug（stories 路由冲突、占位符警告、selector breadcrumb） - 消除 PageHero 类型警告（useSEO reactive 修复） - 25 个前台页面全部 HTTP 200，展示效果不变 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
这个提交包含在：
Mimingguang
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<section class="section section--warm">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="产品进化" subtitle="从V1到V9，每一次更新都是客户反馈驱动" />
|
||||
<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 }
|
||||
})
|
||||
</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>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="关于价格" subtitle="透明、清晰、不套路" />
|
||||
<div class="pricing-content">
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({ content: { type: String, required: true } })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pricing-content { max-width: 800px; margin: 0 auto; padding: @space-xl; background: @color-bg-warm; border-radius: @border-radius-lg;
|
||||
p { font-size: @font-size-md; line-height: @line-height-loose; color: @color-text-secondary; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<article
|
||||
class="product-card"
|
||||
:class="{ 'product-card--popular': isPopular }"
|
||||
itemscope
|
||||
itemtype="https://schema.org/TouristTrip"
|
||||
>
|
||||
<!-- 头部：天数 + 标签 -->
|
||||
<div class="product-header">
|
||||
<div v-if="isPopular" class="popular-badge">推荐</div>
|
||||
<div class="product-duration">
|
||||
<span class="duration-num">{{ product.days }}</span>
|
||||
<span class="duration-unit">天</span>
|
||||
<span class="duration-num">{{ product.nights }}</span>
|
||||
<span class="duration-unit">晚</span>
|
||||
</div>
|
||||
<span class="product-tag">{{ product.tag }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 主体 -->
|
||||
<div class="product-body">
|
||||
<h3 class="product-name" itemprop="name">
|
||||
<NuxtLink :to="`/products/${product.id}`" class="product-name-link">{{ shortName }}</NuxtLink>
|
||||
</h3>
|
||||
<p class="product-audience">
|
||||
适合：<span itemprop="touristType">{{ product.audience }}</span>
|
||||
</p>
|
||||
<p class="product-desc" itemprop="description">{{ product.description }}</p>
|
||||
<ul class="product-highlights">
|
||||
<li v-for="(h, i) in product.highlights" :key="i">
|
||||
<span class="highlight-check" aria-hidden="true">✓</span>
|
||||
{{ h }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 底部 CTA -->
|
||||
<NuxtLink to="/contact" class="product-cta">
|
||||
咨询该行程 <span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({ product: { type: Object, required: true } })
|
||||
|
||||
const isPopular = computed(() => props.product.id === 'v9-6d5n-family')
|
||||
|
||||
// 去掉"额吉的故乡V9·"前缀，在标题区域已标明系列
|
||||
const shortName = computed(() => {
|
||||
return props.product.name.replace(/^额吉的故乡V9·/, '')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.product-card {
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: @border-radius-lg;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow @transition-base, transform @transition-base;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-lg;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
&--popular {
|
||||
border: 2px solid @color-primary;
|
||||
box-shadow: @shadow-md;
|
||||
|
||||
.product-header {
|
||||
background: @color-primary;
|
||||
}
|
||||
|
||||
.duration-num,
|
||||
.duration-unit,
|
||||
.product-tag {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.product-tag {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 头部
|
||||
.product-header {
|
||||
padding: @space-lg @space-lg @space-md;
|
||||
background: @color-primary-bg;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popular-badge {
|
||||
position: absolute;
|
||||
top: @space-sm;
|
||||
right: @space-sm;
|
||||
padding: @space-xs @space-sm;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: @font-weight-bold;
|
||||
color: #fff;
|
||||
background: @color-accent;
|
||||
border-radius: @border-radius-sm;
|
||||
}
|
||||
|
||||
.product-duration {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.duration-num {
|
||||
font-size: @font-size-3xl;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-primary;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.duration-unit {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-primary;
|
||||
font-weight: @font-weight-medium;
|
||||
}
|
||||
|
||||
.product-tag {
|
||||
display: inline-block;
|
||||
padding: @space-xs @space-md;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @color-primary;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-full;
|
||||
}
|
||||
|
||||
// 主体
|
||||
.product-body {
|
||||
padding: @space-lg;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
.product-name-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
&:hover { color: @color-primary; }
|
||||
}
|
||||
.product-name-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
&:hover { color: @color-primary; }
|
||||
}
|
||||
|
||||
.product-audience {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
margin-bottom: @space-md;
|
||||
.text-clamp(3);
|
||||
}
|
||||
|
||||
.product-highlights {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-sm;
|
||||
margin-top: auto;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: @space-sm;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-check {
|
||||
flex-shrink: 0;
|
||||
color: @color-primary;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: @font-weight-bold;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// 底部 CTA
|
||||
.product-cta {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: @space-md @space-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @color-primary;
|
||||
background: @color-bg-gray;
|
||||
text-decoration: none;
|
||||
transition: all @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section class="section section--warm">
|
||||
<div class="container">
|
||||
<div class="overview-content">
|
||||
<div class="overview-quote-mark" aria-hidden="true">"</div>
|
||||
<p class="overview-text">{{ narrative }}</p>
|
||||
<div class="overview-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({ narrative: { type: String, required: true } })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.overview-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overview-quote-mark {
|
||||
font-size: 80px;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-primary-lighter;
|
||||
line-height: 0.5;
|
||||
margin-bottom: @space-md;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: @font-size-md;
|
||||
line-height: @line-height-loose;
|
||||
color: @color-text-secondary;
|
||||
|
||||
.respond-md({
|
||||
font-size: @font-size-lg;
|
||||
});
|
||||
}
|
||||
|
||||
.overview-line {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: @color-primary;
|
||||
border-radius: 2px;
|
||||
margin: @space-xl auto 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<section id="guide" class="section section--gray">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="不知道选哪个？" subtitle="按您的情况推荐" />
|
||||
<div class="guide-groups">
|
||||
<div v-for="group in guideGroups" :key="group.title" class="guide-group">
|
||||
<h3 class="guide-group-title">{{ group.title }}</h3>
|
||||
<div class="guide-items">
|
||||
<div v-for="item in group.items" :key="item.condition" class="guide-item">
|
||||
<div class="guide-item-top">
|
||||
<span class="guide-condition">{{ item.condition }}</span>
|
||||
<span class="guide-arrow">→</span>
|
||||
<span class="guide-rec">{{ getProductName(item.recommendation) }}</span>
|
||||
</div>
|
||||
<p class="guide-reason">{{ item.reason }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
guide: { type: Object, required: true },
|
||||
versions: { type: Array, required: true },
|
||||
})
|
||||
|
||||
const guideGroups = computed(() => [
|
||||
{ title: '按假期长度', items: props.guide.byVacationLength },
|
||||
{ title: '按孩子年龄', items: props.guide.byChildAge },
|
||||
{ title: '按旅行偏好', items: props.guide.byPreference },
|
||||
])
|
||||
|
||||
function getProductName(id) {
|
||||
if (id === 'summer-camp') return '小蒙马夏令营'
|
||||
const v = props.versions.find(v => v.id === id)
|
||||
return v ? v.name : id
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.guide-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-2xl;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.guide-group-title {
|
||||
font-size: @font-size-lg;
|
||||
color: @color-primary;
|
||||
margin-bottom: @space-md;
|
||||
padding-left: @space-md;
|
||||
border-left: 3px solid @color-primary;
|
||||
}
|
||||
|
||||
.guide-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-md;
|
||||
}
|
||||
|
||||
.guide-item {
|
||||
padding: @space-lg;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-md;
|
||||
border: 1px solid @color-border;
|
||||
transition: border-color @transition-fast, box-shadow @transition-fast;
|
||||
|
||||
&:hover {
|
||||
border-color: @color-primary-lighter;
|
||||
box-shadow: @shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.guide-item-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: @space-sm;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.guide-condition {
|
||||
font-weight: @font-weight-medium;
|
||||
color: @color-text-primary;
|
||||
background: @color-bg-gray;
|
||||
padding: @space-xs @space-sm;
|
||||
border-radius: @border-radius-sm;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
.guide-arrow {
|
||||
color: @color-primary;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
|
||||
.guide-rec {
|
||||
color: @color-primary;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
.guide-reason {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
margin: 0;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<section id="summer-camp" class="section section--green">
|
||||
<div class="container">
|
||||
<CommonSectionTitle :title="camp.name" :subtitle="`适合${camp.ageRange}青少年`" />
|
||||
|
||||
<!-- 团宠+简介 -->
|
||||
<div class="camp-hero">
|
||||
<div class="camp-mascot">
|
||||
<img
|
||||
:src="images.mascot.xiaomengma"
|
||||
alt="小蒙马 - 小蒙马夏令营团宠，一只可爱的蒙古小马形象"
|
||||
width="200"
|
||||
height="200"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="camp-intro">
|
||||
<p class="camp-positioning">{{ camp.positioning }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="camp-content">
|
||||
<div v-if="camp.coreActivities.length" class="camp-activities">
|
||||
<h3>核心活动</h3>
|
||||
<ul>
|
||||
<li v-for="(a, i) in camp.coreActivities" :key="i">{{ a }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="camp-diff">{{ camp.differenceFromV9 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import images from '~/data/images.json'
|
||||
defineProps({ camp: { type: Object, required: true } })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.camp-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: @space-lg;
|
||||
max-width: 800px;
|
||||
margin: 0 auto @space-xl;
|
||||
|
||||
.respond-md({
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
gap: @space-2xl;
|
||||
});
|
||||
}
|
||||
|
||||
.camp-mascot {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
}
|
||||
|
||||
.camp-intro {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.camp-content { max-width: 800px; margin: 0 auto; }
|
||||
.camp-positioning { font-size: @font-size-base; color: @color-text-secondary; line-height: @line-height-loose; }
|
||||
.camp-activities { margin-bottom: @space-lg;
|
||||
h3 { font-size: @font-size-md; margin-bottom: @space-md; }
|
||||
ul { display: flex; flex-direction: column; gap: @space-sm; }
|
||||
li { font-size: @font-size-base; color: @color-text-secondary; padding-left: @space-md; position: relative;
|
||||
&::before { content: '·'; position: absolute; left: 0; color: @color-primary; }
|
||||
}
|
||||
}
|
||||
.camp-diff { font-size: @font-size-base; color: @color-text-muted; padding: @space-md; background: @color-bg-white; border-radius: @border-radius-md; }
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="V8 → V9 升级对比" subtitle="7项关键升级一目了然" />
|
||||
<div class="compare-wrapper">
|
||||
<div class="compare-table">
|
||||
<div class="compare-head">
|
||||
<span class="compare-head-old">{{ compare.headers[0] }}</span>
|
||||
<span class="compare-head-new">{{ compare.headers[1] }}</span>
|
||||
</div>
|
||||
<div v-for="(row, i) in compare.rows" :key="i" class="compare-row">
|
||||
<span class="compare-old">{{ row[0] }}</span>
|
||||
<span class="compare-new">{{ row[1] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
compare: { type: Object, required: true }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.compare-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.compare-table {
|
||||
border-radius: @border-radius-md;
|
||||
overflow: hidden;
|
||||
border: 1px solid @color-border;
|
||||
}
|
||||
|
||||
.compare-head {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.compare-head-old {
|
||||
font-weight: @font-weight-medium;
|
||||
text-align: center;
|
||||
background: @color-bg-gray;
|
||||
color: @color-text-muted;
|
||||
}
|
||||
|
||||
.compare-head-new {
|
||||
font-weight: @font-weight-medium;
|
||||
text-align: center;
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid @color-border;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
.compare-old {
|
||||
color: @color-text-muted;
|
||||
background: @color-bg-white;
|
||||
}
|
||||
|
||||
.compare-new {
|
||||
color: @color-text-primary;
|
||||
background: @color-primary-bg;
|
||||
font-weight: @font-weight-medium;
|
||||
}
|
||||
|
||||
// mobile-first: 小屏紧凑，md 以上舒适
|
||||
.compare-row, .compare-head {
|
||||
font-size: @font-size-xs;
|
||||
|
||||
.respond-md({
|
||||
font-size: @font-size-sm;
|
||||
});
|
||||
}
|
||||
|
||||
.compare-old, .compare-new,
|
||||
.compare-head-old, .compare-head-new {
|
||||
padding: @space-sm @space-md;
|
||||
|
||||
.respond-md({
|
||||
padding: @space-md @space-lg;
|
||||
});
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<section class="section section--gray">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="更多V9亮点" subtitle="独家资源 · 自营服务 · 全程无忧" />
|
||||
<div class="highlights-list">
|
||||
<div v-for="item in highlights" :key="item.text" class="highlight-item">
|
||||
<span class="highlight-label">{{ item.label }}</span>
|
||||
<span class="highlight-text">{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
highlights: { type: Array, required: true }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.highlights-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: @space-md;
|
||||
padding: @space-md 0;
|
||||
border-bottom: 1px solid @color-border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-label {
|
||||
flex-shrink: 0;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-primary;
|
||||
background: @color-primary-bg;
|
||||
padding: @space-xs @space-sm;
|
||||
border-radius: @border-radius-sm;
|
||||
min-width: 42px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
font-size: @font-size-base;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="9次迭代背后的产品哲学" subtitle="不是做加法，而是做取舍" />
|
||||
<div class="philosophy-wrapper">
|
||||
<div class="philosophy-list">
|
||||
<div v-for="item in philosophy" :key="item.label" class="philosophy-item">
|
||||
<h4 class="philosophy-label">{{ item.label }}</h4>
|
||||
<p class="philosophy-text">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quote-block">
|
||||
<p class="quote-text">"{{ quote.text }}"</p>
|
||||
<span class="quote-author">—— {{ quote.author }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
philosophy: { type: Array, required: true },
|
||||
quote: { type: Object, required: true }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.philosophy-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.philosophy-list {
|
||||
margin-bottom: @space-2xl;
|
||||
}
|
||||
|
||||
.philosophy-item {
|
||||
padding: @space-lg 0;
|
||||
border-bottom: 1px solid @color-border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.philosophy-label {
|
||||
font-size: @font-size-base;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
margin: 0 0 @space-xs;
|
||||
}
|
||||
|
||||
.philosophy-text {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quote-block {
|
||||
text-align: center;
|
||||
padding: @space-2xl;
|
||||
background: @color-primary;
|
||||
border-radius: @border-radius-lg;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
font-size: @font-size-md;
|
||||
line-height: @line-height-loose;
|
||||
margin: 0 0 @space-lg;
|
||||
color: #fff;
|
||||
font-weight: @font-weight-medium;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-size: @font-size-sm;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<section class="section section--gray">
|
||||
<div class="container">
|
||||
<CommonSectionTitle :title="title" :subtitle="subtitle" />
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline">
|
||||
<div v-for="v in timeline" :key="v.version" class="version-block">
|
||||
<div class="version-dot" :class="{ 'version-dot--first': v.version === timeline[0].version }"></div>
|
||||
<div class="version-header">
|
||||
<span class="version-tag">{{ v.version }}</span>
|
||||
<span class="version-date">{{ v.date }}</span>
|
||||
</div>
|
||||
<h4 class="version-title">{{ v.title }}</h4>
|
||||
<ul class="change-list">
|
||||
<li
|
||||
v-for="(c, i) in v.changes"
|
||||
:key="i"
|
||||
:class="'change-' + c.type"
|
||||
>{{ c.text }}</li>
|
||||
</ul>
|
||||
<div v-if="expandedVersion === v.version" class="version-reason">
|
||||
{{ v.reason }}
|
||||
</div>
|
||||
<button
|
||||
class="reason-toggle"
|
||||
@click="expandedVersion = expandedVersion === v.version ? '' : v.version"
|
||||
>
|
||||
{{ expandedVersion === v.version ? '收起' : '为什么这样改？' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
timeline: { type: Array, required: true },
|
||||
title: { type: String, default: '历史版本' },
|
||||
subtitle: { type: String, default: 'V1到V8的完整迭代记录' },
|
||||
})
|
||||
|
||||
const expandedVersion = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.timeline-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, @color-primary, @color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.version-block {
|
||||
position: relative;
|
||||
padding-bottom: @space-xl;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.version-dot {
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
top: 6px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: @color-border;
|
||||
}
|
||||
|
||||
.version-dot--first {
|
||||
background: @color-primary;
|
||||
}
|
||||
|
||||
.version-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: @space-sm;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
}
|
||||
|
||||
.version-date {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
}
|
||||
|
||||
.version-title {
|
||||
font-size: @font-size-base;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @color-text-secondary;
|
||||
margin: 0 0 @space-md;
|
||||
}
|
||||
|
||||
.change-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 @space-sm;
|
||||
}
|
||||
|
||||
.change-list li {
|
||||
font-size: @font-size-sm;
|
||||
line-height: @line-height-loose;
|
||||
color: @color-text-secondary;
|
||||
padding-left: 18px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 12px;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.change-add::before {
|
||||
content: '+';
|
||||
color: @color-primary;
|
||||
}
|
||||
|
||||
.change-remove::before {
|
||||
content: '−';
|
||||
color: @color-text-muted;
|
||||
}
|
||||
|
||||
.change-update::before {
|
||||
content: '△';
|
||||
color: @color-accent;
|
||||
}
|
||||
|
||||
.version-reason {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
line-height: @line-height-loose;
|
||||
padding: @space-md @space-lg;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-sm;
|
||||
border-left: 3px solid @color-primary;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.reason-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: @color-primary;
|
||||
font-size: @font-size-xs;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="2026年核心升级" subtitle="基于客户反馈的三大重磅升级" />
|
||||
<div class="upgrades-list">
|
||||
<div v-for="item in upgrades" :key="item.name" class="upgrade-item">
|
||||
<div class="upgrade-header">
|
||||
<span class="upgrade-tag">{{ item.tag }}</span>
|
||||
<h3 class="upgrade-name">{{ item.name }}</h3>
|
||||
</div>
|
||||
<p class="upgrade-desc">{{ item.description }}</p>
|
||||
<div class="upgrade-reason">{{ item.reason }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
upgrades: { type: Array, required: true }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.upgrades-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-xl;
|
||||
}
|
||||
|
||||
.upgrade-item {
|
||||
padding-bottom: @space-xl;
|
||||
border-bottom: 1px solid @color-border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-header {
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.upgrade-tag {
|
||||
display: inline-block;
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: @font-weight-medium;
|
||||
padding: @space-xs @space-md;
|
||||
border-radius: @border-radius-full;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.upgrade-name {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upgrade-desc {
|
||||
font-size: @font-size-base;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-loose;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.upgrade-reason {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
line-height: @line-height-base;
|
||||
padding: @space-md @space-lg;
|
||||
background: @color-bg-gray;
|
||||
border-radius: @border-radius-sm;
|
||||
border-left: 3px solid @color-primary;
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户