ee078b61bc
- 后台全面引入 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>
654 行
15 KiB
Vue
654 行
15 KiB
Vue
<template>
|
||
<div class="page-xiaohongshu">
|
||
<LayoutPageHero
|
||
:title="seo.h1 || '小红书上的呼籁'"
|
||
subtitle="来自真实客户的旅行笔记，点击查看原文"
|
||
:breadcrumbs="[{ text: '小红书游记' }]"
|
||
background-image="/images/seasons/summer-river.jpg"
|
||
/>
|
||
|
||
<!-- TL;DR -->
|
||
<section class="page-tldr" aria-label="小红书摘要">
|
||
<div class="container">
|
||
<div class="page-tldr-inner">
|
||
<p>呼籁旅行小红书官方账号精选笔记：来自真实客户的旅行分享和体验记录，点击可查看原文。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 账号名片 -->
|
||
<section v-if="wallData" class="section section--account">
|
||
<div class="container">
|
||
<div class="account-card">
|
||
<div class="account-card__inner">
|
||
<div class="account-card__left">
|
||
<div class="account-avatar">
|
||
<img src="/images/xiaohongshu/profile.jpg" alt="呼籁旅行小红书头像" />
|
||
<span class="account-avatar__badge">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||
</span>
|
||
</div>
|
||
<div class="account-meta">
|
||
<div class="account-meta__name">
|
||
<h2>{{ wallData.account.name }}</h2>
|
||
<span class="account-meta__verified">蓝V认证 · 旅行社</span>
|
||
</div>
|
||
<div class="account-meta__stats">
|
||
<div class="stat-item">
|
||
<span class="stat-item__value">{{ wallData.account.followers }}</span>
|
||
<span class="stat-item__label">粉丝</span>
|
||
</div>
|
||
<span class="stat-divider"></span>
|
||
<div class="stat-item">
|
||
<span class="stat-item__value">{{ wallData.account.likes }}</span>
|
||
<span class="stat-item__label">获赞与收藏</span>
|
||
</div>
|
||
<span class="stat-divider"></span>
|
||
<div class="stat-item">
|
||
<span class="stat-item__value">{{ wallData.notes.length }}</span>
|
||
<span class="stat-item__label">精选笔记</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a
|
||
:href="wallData.account.url"
|
||
target="_blank"
|
||
rel="noopener nofollow"
|
||
class="follow-btn"
|
||
>
|
||
<svg viewBox="0 0 24 24" width="18" height="18"><circle cx="12" cy="12" r="11" fill="#fff" /><text x="12" y="16" text-anchor="middle" fill="#ff2442" font-size="10" font-weight="bold">书</text></svg>
|
||
关注我们
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 标签筛选 -->
|
||
<section class="section section--tags">
|
||
<div class="container">
|
||
<div class="tag-bar">
|
||
<button
|
||
class="tag-pill"
|
||
:class="{ 'tag-pill--active': activeTag === null }"
|
||
@click="activeTag = null"
|
||
>
|
||
全部
|
||
</button>
|
||
<button
|
||
v-for="tag in allTags"
|
||
:key="tag"
|
||
class="tag-pill"
|
||
:class="{ 'tag-pill--active': activeTag === tag }"
|
||
@click="activeTag = activeTag === tag ? null : tag"
|
||
>
|
||
{{ tag }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 瀑布流照片墙 -->
|
||
<section class="section section--grid">
|
||
<div class="container">
|
||
<div class="masonry">
|
||
<div v-for="(col, ci) in columns" :key="ci" class="masonry__col">
|
||
<NuxtLink
|
||
v-for="note in col"
|
||
:key="note.id"
|
||
:to="`/xiaohongshu/${note.id}`"
|
||
class="note-card"
|
||
>
|
||
<div class="note-card__cover" :class="{ 'note-card__cover--wide': note.ratio === 'horizontal' }">
|
||
<img
|
||
:src="note.cover"
|
||
:alt="note.title"
|
||
loading="lazy"
|
||
@error="handleImageError"
|
||
/>
|
||
<div class="note-card__overlay">
|
||
<span class="note-card__read">查看原文</span>
|
||
</div>
|
||
<div class="note-card__tags">
|
||
<span v-for="tag in note.tags.slice(0, 2)" :key="tag" class="note-card__tag">{{ tag }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="note-card__body">
|
||
<h3 class="note-card__title">{{ note.title }}</h3>
|
||
<div class="note-card__footer">
|
||
<span class="note-card__author">
|
||
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" opacity="0.4"><circle cx="12" cy="8" r="4"/><path d="M12 14c-6 0-8 3-8 3v1h16v-1s-2-3-8-3z"/></svg>
|
||
{{ note.author }}
|
||
</span>
|
||
<span class="note-card__likes">
|
||
<svg viewBox="0 0 24 24" width="13" height="13"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#ff2442"/></svg>
|
||
{{ formatLikes(note.likes) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-footer">
|
||
<p class="grid-footer__notice">以上内容来自小红书平台客户自发分享，点击卡片查看详情并跳转原文</p>
|
||
<a
|
||
:href="wallData.account.url"
|
||
target="_blank"
|
||
rel="noopener nofollow"
|
||
class="grid-footer__more"
|
||
>
|
||
在小红书查看更多
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<CommonSectionCTA
|
||
title="想拥有同款草原体验？"
|
||
description="联系定制师，开始规划您的呼伦贝尔之旅"
|
||
:links="[
|
||
{ to: '/products', text: '查看旅行产品' },
|
||
{ to: '/contact', text: '联系定制师' },
|
||
]"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useBreadcrumbSchema } from '~/composables/useJsonLd'
|
||
|
||
const { data: wallData } = await usePublicApi('xiaohongshu-wall')
|
||
|
||
const seo = useSEO('xiaohongshu')
|
||
|
||
useBreadcrumbSchema([
|
||
{ text: '首页', to: '/' },
|
||
{ text: '小红书游记' },
|
||
])
|
||
|
||
const activeTag = ref(null)
|
||
|
||
// 提取高频标签（按出现次数排序，最多显示8个）
|
||
const allTags = computed(() => {
|
||
const tagCount = {}
|
||
;(wallData.value?.notes || []).forEach(n => n.tags?.forEach(t => {
|
||
tagCount[t] = (tagCount[t] || 0) + 1
|
||
}))
|
||
return Object.entries(tagCount)
|
||
.sort((a, b) => b[1] - a[1])
|
||
.slice(0, 8)
|
||
.map(([tag]) => tag)
|
||
})
|
||
|
||
// 筛选笔记
|
||
const filteredNotes = computed(() => {
|
||
if (!activeTag.value) return wallData.value?.notes || []
|
||
return (wallData.value?.notes || []).filter(n => n.tags?.includes(activeTag.value))
|
||
})
|
||
|
||
// 瀑布流分列 - 移动2列，桌面3列（通过CSS控制第3列显隐）
|
||
const columns = computed(() => {
|
||
const cols = [[], [], []]
|
||
filteredNotes.value.forEach((note, i) => {
|
||
cols[i % 3].push(note)
|
||
})
|
||
return cols
|
||
})
|
||
|
||
function formatLikes(num) {
|
||
if (num >= 10000) return (num / 10000).toFixed(1) + 'w'
|
||
if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
|
||
return num
|
||
}
|
||
|
||
function handleImageError(e) {
|
||
e.target.closest('.note-card__cover').classList.add('note-card__cover--fallback')
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// ===== 账号名片区 =====
|
||
.section--account {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
margin-top: -@space-xl;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.account-card {
|
||
background: @color-bg-white;
|
||
border-radius: @border-radius-xl;
|
||
box-shadow: @shadow-lg;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.account-card__inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: @space-lg @space-xl;
|
||
gap: @space-md;
|
||
flex-wrap: wrap;
|
||
|
||
.respond-md({
|
||
padding: @space-xl @space-2xl;
|
||
});
|
||
}
|
||
|
||
.account-card__left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: @space-md;
|
||
|
||
.respond-md({
|
||
gap: @space-lg;
|
||
});
|
||
}
|
||
|
||
.account-avatar {
|
||
position: relative;
|
||
width: 56px;
|
||
height: 56px;
|
||
flex-shrink: 0;
|
||
|
||
.respond-md({
|
||
width: 72px;
|
||
height: 72px;
|
||
});
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 3px solid @color-bg-white;
|
||
box-shadow: 0 2px 12px rgba(255, 36, 66, 0.15);
|
||
background: @color-bg-white;
|
||
}
|
||
}
|
||
|
||
.account-avatar__badge {
|
||
position: absolute;
|
||
bottom: -2px;
|
||
right: -2px;
|
||
width: 22px;
|
||
height: 22px;
|
||
background: #ff2442;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
border: 2px solid @color-bg-white;
|
||
|
||
.respond-md({
|
||
width: 26px;
|
||
height: 26px;
|
||
});
|
||
}
|
||
|
||
.account-meta__name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
flex-wrap: wrap;
|
||
margin-bottom: @space-xs;
|
||
|
||
h2 {
|
||
font-size: @font-size-md;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0;
|
||
line-height: 1;
|
||
|
||
.respond-md({
|
||
font-size: @font-size-xl;
|
||
});
|
||
}
|
||
}
|
||
|
||
.account-meta__verified {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
background: linear-gradient(135deg, #ff2442 0%, #ff6b81 100%);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
border-radius: @border-radius-full;
|
||
font-weight: @font-weight-medium;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.account-meta__stats {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: @space-md;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.stat-item__value {
|
||
font-size: @font-size-md;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
line-height: 1;
|
||
|
||
.respond-md({
|
||
font-size: @font-size-lg;
|
||
});
|
||
}
|
||
|
||
.stat-item__label {
|
||
font-size: 11px;
|
||
color: @color-text-muted;
|
||
line-height: 1;
|
||
}
|
||
|
||
.stat-divider {
|
||
width: 1px;
|
||
height: 28px;
|
||
background: @color-border;
|
||
}
|
||
|
||
.follow-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
padding: 10px @space-xl;
|
||
background: linear-gradient(135deg, #ff2442 0%, #ff6b81 100%);
|
||
color: #fff;
|
||
border-radius: @border-radius-full;
|
||
text-decoration: none;
|
||
font-size: @font-size-sm;
|
||
font-weight: @font-weight-bold;
|
||
transition: all @transition-base;
|
||
white-space: nowrap;
|
||
box-shadow: 0 4px 16px rgba(255, 36, 66, 0.25);
|
||
letter-spacing: 0.5px;
|
||
|
||
&:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 24px rgba(255, 36, 66, 0.35);
|
||
}
|
||
}
|
||
|
||
// ===== 标签筛选 =====
|
||
.section--tags {
|
||
padding-top: @space-xl;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.tag-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: @space-sm;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tag-pill {
|
||
padding: 6px 18px;
|
||
border: 1.5px solid @color-border;
|
||
border-radius: @border-radius-full;
|
||
background: @color-bg-white;
|
||
color: @color-text-secondary;
|
||
font-size: @font-size-sm;
|
||
cursor: pointer;
|
||
transition: all @transition-fast;
|
||
font-family: inherit;
|
||
line-height: 1.4;
|
||
|
||
&:hover {
|
||
border-color: @color-text-muted;
|
||
color: @color-text-primary;
|
||
}
|
||
|
||
&--active {
|
||
background: @color-primary;
|
||
border-color: @color-primary;
|
||
color: #fff;
|
||
font-weight: @font-weight-medium;
|
||
|
||
&:hover {
|
||
background: @color-primary-dark;
|
||
border-color: @color-primary-dark;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ===== 瀑布流网格 =====
|
||
.section--grid {
|
||
padding-top: @space-xl;
|
||
}
|
||
|
||
.masonry {
|
||
display: flex;
|
||
gap: @space-md;
|
||
|
||
.respond-md({
|
||
gap: @space-lg;
|
||
});
|
||
}
|
||
|
||
.masonry__col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-md;
|
||
|
||
.respond-md({
|
||
gap: @space-lg;
|
||
});
|
||
|
||
// 移动端隐藏第3列
|
||
&:nth-child(3) {
|
||
display: none;
|
||
|
||
.respond-md({
|
||
display: flex;
|
||
});
|
||
}
|
||
}
|
||
|
||
// ===== 笔记卡片（精致版） =====
|
||
.note-card {
|
||
display: block;
|
||
background: @color-bg-white;
|
||
border-radius: @border-radius-lg;
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
box-shadow: @shadow-sm;
|
||
transition: all @transition-base;
|
||
|
||
&:hover {
|
||
box-shadow: @shadow-card-hover;
|
||
transform: translateY(-4px);
|
||
|
||
.note-card__overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.note-card__cover img {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
}
|
||
|
||
.note-card__cover {
|
||
position: relative;
|
||
overflow: hidden;
|
||
aspect-ratio: 3 / 4;
|
||
background: @gradient-cool;
|
||
|
||
&--wide {
|
||
aspect-ratio: 4 / 3;
|
||
}
|
||
|
||
&--fallback {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&::after {
|
||
content: '暂无封面';
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
background: @gradient-cool;
|
||
}
|
||
|
||
img {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
}
|
||
|
||
.note-card__overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
|
||
opacity: 0;
|
||
transition: opacity @transition-base;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding-bottom: @space-xl;
|
||
}
|
||
|
||
.note-card__read {
|
||
padding: 6px 20px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: @border-radius-full;
|
||
font-size: @font-size-xs;
|
||
font-weight: @font-weight-medium;
|
||
color: @color-text-primary;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.note-card__tags {
|
||
position: absolute;
|
||
top: @space-sm;
|
||
left: @space-sm;
|
||
display: flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.note-card__tag {
|
||
padding: 3px 10px;
|
||
background: rgba(255, 255, 255, 0.88);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: @border-radius-full;
|
||
font-size: 11px;
|
||
color: @color-text-secondary;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
.note-card__body {
|
||
padding: 14px @space-md;
|
||
}
|
||
|
||
.note-card__title {
|
||
font-size: @font-size-sm;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 10px;
|
||
line-height: @line-height-tight;
|
||
.text-clamp(2);
|
||
}
|
||
|
||
.note-card__footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.note-card__author {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
color: @color-text-muted;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 60%;
|
||
}
|
||
|
||
.note-card__likes {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 12px;
|
||
color: @color-text-muted;
|
||
|
||
svg {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// ===== 底部 =====
|
||
.grid-footer {
|
||
text-align: center;
|
||
margin-top: @space-3xl;
|
||
padding-top: @space-xl;
|
||
border-top: 1px solid @color-divider;
|
||
}
|
||
|
||
.grid-footer__notice {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
margin-bottom: @space-lg;
|
||
}
|
||
|
||
.grid-footer__more {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
padding: 12px @space-2xl;
|
||
border: 2px solid #ff2442;
|
||
color: #ff2442;
|
||
border-radius: @border-radius-full;
|
||
text-decoration: none;
|
||
font-size: @font-size-sm;
|
||
font-weight: @font-weight-bold;
|
||
transition: all @transition-base;
|
||
letter-spacing: 0.3px;
|
||
|
||
svg {
|
||
transition: transform @transition-fast;
|
||
}
|
||
|
||
&:hover {
|
||
background: #ff2442;
|
||
color: #fff;
|
||
box-shadow: 0 4px 16px rgba(255, 36, 66, 0.25);
|
||
|
||
svg {
|
||
stroke: #fff;
|
||
transform: translateX(3px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|