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

133
src/pages/home/components/RoutePlanCard/index.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<div class="route-plan-card w-full">
<div v-if="!detailOpen"
class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
:class="{ 'is-disabled': disabled }" @click="openDetail">
<img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
<div class="route-plan-card__body flex-full">
<div class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</div>
<div class="route-plan-card__tags flex flex-items-center">
<div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
:class="getTagClass(tag.tone)">
{{ tag.text }}
</div>
</div>
</div>
<div class="flex-shrink-0">
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>
</div>
<div v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
<div class="route-plan-card__detail-head flex flex-items-center">
<div class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
{{ detail.badge }}
</div>
</div>
<div class="route-plan-card__timeline">
<template v-for="(node, index) in nodes" :key="node.id || node.title">
<div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
<div
class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
{{ index + 1 }}
</div>
<div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
<div class="route-plan-card__node-body flex-full">
<div class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
{{ node.title }}
</div>
<div class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
{{ node.description }}
</div>
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900">
{{ node.tag }}
</div>
</div>
</div>
</div>
<div v-if="connectors[index]" class="route-plan-card__connector">
<div class="route-plan-card__connector-line"></div>
<div class="route-plan-card__connector-arrow"></div>
<div
class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
<span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
<span>{{ connectors[index].text }}</span>
</div>
</div>
</template>
</div>
<div v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
<div class="route-plan-card__tips-title color-64748B font-size-14 font-900">
{{ detail.tipsTitle }}
</div>
<div v-for="tip in tips" :key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900">
<div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
<div>{{ tip }}</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"]);
const detailOpen = ref(false);
const detail = computed(() => props.data.detail || {});
const summaryTags = computed(() => props.data.summaryTags || []);
const nodes = computed(() => detail.value.nodes || []);
const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);
const getTagClass = (tone) => {
if (tone === "green") return "color-047857 bg-ECFDF5";
return "color-64748B bg-F1F5F9";
};
const openDetail = () => {
if (props.disabled) return;
detailOpen.value = true;
emit("select", props.data);
};
const closeDetail = () => {
detailOpen.value = false;
emit("back");
};
const handleSelect = (node) => {
if (props.disabled) return;
emit("select", node);
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

74
src/pages/home/components/RoutePlanCard/mocks.js Normal file
View File

@@ -0,0 +1,74 @@
export default {
id: "east-in-west-out",
title: "经典东进西出",
image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
summaryTags: [
{
id: "spots",
text: "4 个景点",
tone: "green",
},
{
id: "duration",
text: "5–6 小时",
tone: "gray",
},
{
id: "direction",
text: "东进西出",
tone: "gray",
},
],
detail: {
badge: "4 个景点",
tipsTitle: "出行贴士",
nodes: [
{
id: "xiaoqikong-bridge",
title: "小七孔古桥",
description: "清代古桥，景区得名之处",
image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&q=80",
},
{
id: "cuigu-waterfall",
title: "翠谷瀑布",
description: "落差110米，国内罕见跌水群",
image: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=400&q=80",
},
{
id: "water-forest",
title: "水上森林",
description: "水中有树，绝无仅有",
image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
tag: "可竹筏游览",
},
{
id: "wolongtan",
title: "卧龙潭",
description: "蓝柔深潭，漂流终点",
image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=400&q=80",
tag: "可卧龙潭漂流",
},
],
connectors: [
{
icon: "👣",
text: "步行 · 约5分钟",
},
{
icon: "🚌",
text: "观光车 · 约6分钟",
},
{
icon: "🚣",
text: "漂流 · 约40分钟",
},
],
tips: [
"旺季9点前入园，避开团客高峰",
"中午在翠谷小吃摊补给",
"下午2点后拍翠谷瀑布最出片",
"观光车票50元，建议入园即购",
],
},
};

227
src/pages/home/components/RoutePlanCard/styles/index.scss Normal file
View File

@@ -0,0 +1,227 @@
.route-plan-card {
width: 100%;
}
.route-plan-card__summary,
.route-plan-card__detail {
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.route-plan-card__summary {
min-height: 108px;
padding: 16px 20px;
}
.route-plan-card__summary:active,
.route-plan-card__node-wrap:active {
opacity: 0.86;
}
.route-plan-card__summary.is-disabled,
.route-plan-card__node-wrap.is-disabled {
opacity: 0.55;
}
.route-plan-card__cover {
width: 76px;
height: 76px;
border-radius: 10px;
}
.route-plan-card__body {
min-width: 0;
margin-left: 18px;
}
.route-plan-card__title {
line-height: 24px;
}
.route-plan-card__tags {
min-width: 0;
margin-top: 10px;
}
.route-plan-card__tag {
height: 24px;
padding: 0 11px;
border-radius: 999px;
line-height: 24px;
white-space: nowrap;
}
.route-plan-card__tag + .route-plan-card__tag {
margin-left: 8px;
}
.route-plan-card__arrow {
width: 12px;
height: 12px;
margin-left: 14px;
border-top: 2px solid #cbd5e1;
border-right: 2px solid #cbd5e1;
transform: rotate(45deg);
}
.route-plan-card__detail {
padding-bottom: 26px;
}
.route-plan-card__detail-head {
min-width: 0;
height: 70px;
padding: 0 22px;
border-bottom: 1px solid #f1f5f9;
box-sizing: border-box;
}
.route-plan-card__back {
width: 34px;
height: 34px;
margin-right: 14px;
color: #64748b;
font-size: 28px;
line-height: 1;
background: #f8fafc;
}
.route-plan-card__detail-title {
min-width: 0;
line-height: 24px;
}
.route-plan-card__detail-badge {
height: 26px;
margin-left: 12px;
padding: 0 12px;
border-radius: 999px;
line-height: 26px;
white-space: nowrap;
}
.route-plan-card__timeline {
padding: 26px 18px 0;
}
.route-plan-card__node-wrap {
position: relative;
}
.route-plan-card__node-number {
position: absolute;
left: 20px;
top: 50%;
z-index: 2;
width: 26px;
height: 26px;
transform: translateY(-50%);
}
.route-plan-card__node {
min-height: 88px;
padding: 12px 16px 12px 56px;
border: 1px solid #e5e7eb;
box-sizing: border-box;
}
.route-plan-card__node-image {
width: 64px;
height: 64px;
margin-right: 14px;
border-radius: 10px;
}
.route-plan-card__node-body {
min-width: 0;
}
.route-plan-card__node-title {
line-height: 22px;
}
.route-plan-card__node-desc {
margin-top: 4px;
line-height: 18px;
}
.route-plan-card__node-tag {
display: inline-flex;
align-items: center;
height: 22px;
margin-top: 6px;
padding: 0 9px;
border: 1px solid #fde68a;
border-radius: 999px;
line-height: 22px;
}
.route-plan-card__connector {
position: relative;
height: 56px;
}
.route-plan-card__connector-line {
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 52px;
border-radius: 2px;
background: #bbf7d0;
}
.route-plan-card__connector-arrow {
position: absolute;
left: 50%;
top: 42px;
width: 10px;
height: 10px;
border-right: 2px solid #86efac;
border-bottom: 2px solid #86efac;
transform: translateX(-4px) rotate(45deg);
}
.route-plan-card__connector-chip {
position: absolute;
right: 0;
top: 14px;
height: 28px;
padding: 0 12px;
border: 1px solid #e5e7eb;
line-height: 28px;
box-sizing: border-box;
}
.route-plan-card__connector-icon {
margin-right: 5px;
}
.route-plan-card__tips {
margin: 26px 20px 0;
padding: 18px 18px 18px 20px;
border: 1px solid #e2e8f0;
box-sizing: border-box;
}
.route-plan-card__tips-title {
margin-bottom: 14px;
line-height: 18px;
}
.route-plan-card__tip {
min-height: 22px;
line-height: 22px;
}
.route-plan-card__tip + .route-plan-card__tip {
margin-top: 4px;
}
.route-plan-card__tip-dot {
width: 5px;
height: 5px;
margin-right: 12px;
background: #cbd5e1;
}