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>