duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add new features, update theme and build config

Browse Source 
- Add 40+ new UI components including chat modules, discovery cards, photo galleries, FAQ and booking tools
- Standardize brand color across all styles by replacing $theme-color-500 SCSS variables with #0ccd58
- Add sass 1.58.3 dependency and update vite config for modern scss compiler support
- Refactor existing components (AddCarCrad, login page) and remove unused /quick/list router route
- Add utility functions for URL parameter handling
- Add static assets including custom znicons font, component images and icons
- Fix scss syntax issues and deprecation warnings
This commit is contained in:
duanshuwen
2026-05-26 22:49:52 +08:00
parent 548df7020c
commit ac8f5b5f64
159 changed files with 12439 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/pages/home/components/LongTextGuideCard/index.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="long-text-guide-card w-full">
<div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<div v-for="item in cards" :key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box" :class="{ 'is-disabled': disabled }"
@click="openDetail(item)">
<div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</div>
<div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
<text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>
</div>
</div>
<div v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
<div class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
<div class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
{{ activeItem.title }}
</div>
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`">
{{ activeItem.badge }}
</div>
</div>
<div class="long-text-guide-card__rich-body">
<div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</span>
<span v-else>{{ segment.text }}</span>
</template>
</div>
<image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image" mode="aspectFill" />
<div class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
{{ activeItem.sectionTitle }}
</div>
<div class="long-text-guide-card__tip-block bg-ECFDF5">
<div v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800">
{{ index + 1 }} {{ tip }}
</div>
</div>
<div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</span>
<span v-else>{{ segment.text }}</span>
</template>
</div>
</div>
<div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__map-card rounded-16 overflow-hidden">
<div class="long-text-guide-card__map-image-wrap relative">
<img class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<div class="long-text-guide-card__map-tag color-white font-size-10 font-900">
{{ activeItem.action.tag }}
</div>
</div>
<div class="long-text-guide-card__map-bar flex flex-items-center bg-white">
<div class="flex-full">
<div class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</div>
<div class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</div>
</div>
<div class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</div>
</div>
</div>
</div>
<div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
<img class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<div
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
↗
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed, ref } from "vue";
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["select", "back", "action"]);
const selected = ref(null);
const cards = computed(() => props.data.cards || []);
const activeItem = computed(() => selected.value || cards.value[0] || {});
const mode = computed(() => (selected.value ? "detail" : "list"));
const paragraphsBeforeImage = computed(() => activeItem.value.paragraphs?.slice(0, 1) || []);
const paragraphsAfterTips = computed(() => activeItem.value.paragraphs?.slice(1) || []);
const openDetail = (item) => {
if (props.disabled) return;
selected.value = item;
emit("select", item);
};
const closeDetail = () => {
selected.value = null;
emit("back");
};
const handleAction = (item) => {
if (props.disabled) return;
emit("action", item);
};
const getSegments = (paragraph) => {
const text = paragraph?.text || "";
const highlights = paragraph?.highlights || [];
if (!highlights.length) return [{ text, highlight: false }];
const segments = [];
let cursor = 0;
highlights.forEach((highlight) => {
const start = text.indexOf(highlight, cursor);
if (start < 0) return;
if (start > cursor) {
segments.push({ text: text.slice(cursor, start), highlight: false });
}
segments.push({ text: highlight, highlight: true });
cursor = start + highlight.length;
});
if (cursor < text.length) {
segments.push({ text: text.slice(cursor), highlight: false });
}
return segments.length ? segments : [{ text, highlight: false }];
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

99
src/pages/home/components/LongTextGuideCard/mocks.js Normal file
View File

@@ -0,0 +1,99 @@
export default {
cards: [
{
id: "rafting",
type: "rafting",
badge: "漂流攻略",
badgeTone: "amber",
title: "漂流必备避坑指南",
summary: "全长约2公里，落差高达15米。经过三段激流区，一定要准备好换洗衣物和防水袋...",
footer: "点击查看完整攻略",
image: "https://images.unsplash.com/photo-1530866495561-507c9faab2ed?w=900&q=80",
paragraphs: [
{
text: "漂流全长约 2 公里，落差高达 15 米，全程约 40 分钟。途中经过三段激流区，水流湍急，体验感极强。",
highlights: ["2 公里"],
},
{
text: "建议选择 上午场（9:00–11:00），水量充足、气温适宜，避开正午阳光暴晒。",
highlights: ["上午场（9:00–11:00）"],
},
],
sectionTitle: "出发前必备清单",
tips: [
"换洗衣物装入防水袋，手机务必密封",
"穿凉鞋或防滑鞋，禁止拖鞋入场",
"贵重物品存入景区寄存柜再下水",
],
action: {
type: "none",
},
},
{
id: "attraction",
type: "attraction",
badge: "景点介绍",
badgeTone: "green",
title: "卧龙潭 · 碧绿深潭",
summary: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点之一...",
footer: "点击查看完整介绍",
image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
paragraphs: [
{
text: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点。潭水终年保持 16–18°C，清澈见底，映出周围青山如镜。",
highlights: ["16–18°C"],
},
{
text: "卧龙潭位于游览线路末段，建议安排为 半日游终点，游览完后就近乘观光车返回入口。",
highlights: ["半日游终点"],
},
],
sectionTitle: "游览小贴士",
tips: [
"雨季水位上涨，观景平台景色最震撼",
"潭边栈道湿滑，请穿防滑鞋慢行",
"禁止下水游泳，潭深超过 20 米",
],
action: {
type: "map",
label: "带我去这里",
tag: "目的地",
title: "卧龙潭",
subtitle: "步行约 680 米",
buttonText: "导航",
image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
},
},
{
id: "photo",
type: "photo",
badge: "拍照攻略",
badgeTone: "blue",
title: "古桥晨雾最佳机位",
summary: "清晨6:30–8:00是拍摄窗口，雾气在桥面漂浮，光线最柔和，推荐用长焦压缩透视...",
footer: "点击查看完整攻略",
image: "",
paragraphs: [
{
text: "清晨 6:30–8:00 是拍摄黄金窗口。雾气在桥面缓缓漂浮，配合柔和侧光，层次感极强。",
highlights: ["6:30–8:00"],
},
{
text: "推荐站在桥下游约 30 米处的石滩，正对桥拱构图，早晨人少，可以从容布局。",
highlights: ["30 米处的石滩"],
},
],
sectionTitle: "机位参数建议",
tips: [
"长焦 85mm+ 压缩透视，桥拱与雾气叠加感更强",
"低角度蹲拍，水面倒影纳入前景",
"光圈 f/5.6–8，保持前后景均清晰",
],
action: {
type: "image",
label: "看机位图",
image: "https://images.unsplash.com/photo-1682687982501-1e5898cb8f4b?w=900&q=80",
},
},
],
};

185
src/pages/home/components/LongTextGuideCard/styles/index.scss Normal file
View File

@@ -0,0 +1,185 @@
.long-text-guide-card__summary-card {
min-height: 178px;
margin-bottom: 16px;
padding: 28px 26px 22px;
border: 1px solid rgba(15, 23, 42, 0.04);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
transition: transform 0.15s ease, opacity 0.15s ease;
}
.long-text-guide-card__summary-card:active {
transform: scale(0.985);
}
.long-text-guide-card__summary-card.is-disabled {
opacity: 0.55;
}
.long-text-guide-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 999px;
line-height: 18px;
}
.long-text-guide-card__badge.is-amber {
color: #d97706;
background: #fffbeb;
border-color: #fde68a;
}
.long-text-guide-card__badge.is-green {
color: #059669;
background: #ecfdf5;
border-color: #a7f3d0;
}
.long-text-guide-card__badge.is-blue {
color: #2563eb;
background: #eff6ff;
border-color: #bfdbfe;
}
.long-text-guide-card__summary-title {
margin-top: 18px;
line-height: 24px;
}
.long-text-guide-card__summary-text {
margin-top: 10px;
line-height: 22px;
}
.long-text-guide-card__summary-footer {
margin-top: 24px;
}
.long-text-guide-card__arrow {
font-size: 26px;
line-height: 1;
}
.long-text-guide-card__detail-card {
border: 1px solid rgba(15, 23, 42, 0.04);
}
.long-text-guide-card__detail-header {
min-height: 70px;
padding: 0 18px 0 20px;
}
.long-text-guide-card__back {
width: 34px;
height: 34px;
margin-right: 12px;
color: #64748b;
background: #f2f4f6;
font-size: 24px;
line-height: 1;
}
.long-text-guide-card__detail-title {
flex: 1;
min-width: 0;
}
.long-text-guide-card__detail-badge {
margin-left: 12px;
}
.long-text-guide-card__rich-body {
padding: 24px 22px 26px;
}
.long-text-guide-card__paragraph {
margin-bottom: 20px;
line-height: 30px;
}
.long-text-guide-card__highlight {
color: #065f46;
background: #ecfdf5;
padding: 1px 6px;
border-radius: 4px;
}
.long-text-guide-card__main-image {
height: 198px;
margin-bottom: 24px;
}
.long-text-guide-card__section-title {
margin-bottom: 12px;
line-height: 22px;
}
.long-text-guide-card__tip-block {
margin-bottom: 22px;
padding: 12px 18px;
border-left: 3px solid #34d399;
border-radius: 12px;
}
.long-text-guide-card__tip {
line-height: 24px;
}
.long-text-guide-card__action-zone {
border-top: 1px solid #f1f5f9;
padding: 16px 20px 20px;
}
.long-text-guide-card__action-label {
margin-bottom: 10px;
letter-spacing: 0.6px;
}
.long-text-guide-card__map-card {
border: 1px solid #f1f5f9;
}
.long-text-guide-card__map-image {
height: 138px;
}
.long-text-guide-card__map-tag {
position: absolute;
left: 14px;
bottom: 12px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
}
.long-text-guide-card__map-bar {
padding: 14px 16px;
}
.long-text-guide-card__nav-btn {
padding: 12px 18px;
border-radius: 14px;
}
.long-text-guide-card__photo-card {
min-height: 178px;
overflow: hidden;
border-radius: 16px;
background: #f8fafc;
}
.long-text-guide-card__photo-image {
height: 178px;
}
.long-text-guide-card__expand {
position: absolute;
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
background: rgba(15, 23, 42, 0.36);
}