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

161
src/pages/home/components/PoiCompareCard/index.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<div class="poi-compare-card w-full">
<div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-24 overflow-hidden">
<div class="poi-compare-card__head flex flex-items-center">
<div class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
{{ data.icon }}
</div>
<div class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</div>
</div>
<div class="poi-compare-card__columns grid grid-cols-2 gap-16">
<div v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
<div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
<div class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
{{ field.label }}
</div>
<div v-if="field.tone" class="poi-compare-card__chip font-size-12 font-900"
:class="getToneClass(field.tone)">
{{ field.value }}
</div>
<div v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
{{ field.value }}
</div>
</div>
</div>
</div>
<div
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
:class="{ 'is-disabled': disabled }" @click="openDetail">
{{ data.detailButtonText }}
</div>
</div>
<div v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
<div class="poi-compare-card__detail-head flex flex-items-center">
<div class="poi-compare-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="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
{{ detail.title }}
</div>
<div class="poi-compare-card__compare-label color-94A3B8 font-size-12 font-900">
{{ detail.compareLabel }}
</div>
</div>
<div class="poi-compare-card__table">
<div class="poi-compare-card__table-head poi-compare-card__table-row">
<div></div>
<div v-for="item in items" :key="item.id || item.name"
class="poi-compare-card__table-title color-1E293B font-size-14 font-900">
{{ item.name }}
</div>
</div>
<div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
<div class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
{{ row.label }}
</div>
<div v-for="cell in row.values" :key="row.label + '-' + cell.text"
class="poi-compare-card__cell color-1E293B font-size-14 font-900" :class="getCellClass(cell.tone)">
{{ cell.text }}
</div>
</div>
</div>
<div class="poi-compare-card__recommend">
<div class="poi-compare-card__recommend-title color-94A3B8 font-size-12 font-900">
{{ detail.recommendTitle }}
</div>
<div class="poi-compare-card__tips">
<div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
<div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
<div class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
{{ tip.text }}
</div>
</div>
</div>
</div>
<div class="poi-compare-card__actions grid grid-cols-2 gap-14">
<div v-for="action in detail.actions" :key="action.id || action.text"
class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
@click="handleAction(action)">
<span class="poi-compare-card__action-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>
</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 isDetail = ref(false);
const items = computed(() => props.data.items || []);
const detail = computed(() => props.data.detail || {});
const getToneClass = (tone) => {
const toneMap = {
green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
};
return toneMap[tone] || "";
};
const getCellClass = (tone) => {
if (tone === "green") return "poi-compare-card__cell--green";
return "";
};
const getDotClass = (tone) => {
if (tone === "blue") return "poi-compare-card__dot--blue";
return "poi-compare-card__dot--green";
};
const handleSelect = (item) => {
if (props.disabled) return;
emit("select", item);
};
const openDetail = () => {
if (props.disabled) return;
isDetail.value = true;
emit("select", { type: "detail", items: items.value });
};
const closeDetail = () => {
isDetail.value = false;
emit("back");
};
const handleAction = (action) => {
if (props.disabled) return;
emit("action", action);
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

115
src/pages/home/components/PoiCompareCard/mocks.js Normal file
View File

@@ -0,0 +1,115 @@
export default {
icon: "✧",
title: "小七对比：卧龙潭 vs 鸳鸯湖",
detailButtonText: "查看详细对比",
items: [
{
id: "wolongtan",
name: "卧龙潭",
image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=700&q=80",
fields: [
{
label: "景观类型",
value: "深潭观景",
},
{
label: "额外付费",
value: "免费",
tone: "green",
},
{
label: "开放时间",
value: "08:00–18:00",
},
],
},
{
id: "yuanyanghu",
name: "鸳鸯湖",
image: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=700&q=80",
fields: [
{
label: "景观类型",
value: "湖泊划船",
},
{
label: "额外付费",
value: "需付费",
tone: "amber",
},
{
label: "开放时间",
value: "08:00–17:30",
},
],
},
],
detail: {
title: "详细对比",
compareLabel: "卧龙潭 vs 鸳鸯湖",
rows: [
{
label: "景观类型",
values: [
{
text: "深潭观景",
},
{
text: "湖泊划船",
tone: "green",
},
],
},
{
label: "额外付费",
values: [
{
text: "免费",
},
{
text: "需付费",
tone: "green",
},
],
},
{
label: "开放时间",
values: [
{
text: "08:00–18:00",
},
{
text: "08:00–17:30",
tone: "green",
},
],
},
],
recommendTitle: "小七推荐",
tips: [
{
tone: "green",
text: "拍照 / 打卡 → 选卧龙潭，碧绿深潭配青山，随手出片。",
},
{
tone: "blue",
text: "带小孩 / 慢玩 → 选鸳鸯湖，划船探险，时间充裕不赶路。",
},
],
actions: [
{
id: "go-wolongtan",
text: "去卧龙潭",
icon: "↗",
targetId: "wolongtan",
primary: true,
},
{
id: "go-yuanyanghu",
text: "去鸳鸯湖",
icon: "↗",
targetId: "yuanyanghu",
},
],
},
};

234
src/pages/home/components/PoiCompareCard/styles/index.scss Normal file
View File

@@ -0,0 +1,234 @@
.poi-compare-card {
width: 100%;
}
.poi-compare-card__overdiv,
.poi-compare-card__detail-card {
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}
.poi-compare-card__overdiv {
padding: 24px 26px;
box-sizing: border-box;
}
.poi-compare-card__head {
min-width: 0;
}
.poi-compare-card__mark {
width: 34px;
height: 34px;
margin-right: 12px;
border: 1px solid #fde68a;
color: #f59e0b;
font-size: 22px;
line-height: 1;
background: #fffbeb;
box-sizing: border-box;
}
.poi-compare-card__title {
min-width: 0;
line-height: 24px;
}
.poi-compare-card__columns {
margin-top: 28px;
}
.poi-compare-card__place {
min-width: 0;
}
.poi-compare-card__place:active,
.poi-compare-card__primary:active,
.poi-compare-card__action:active {
opacity: 0.86;
}
.poi-compare-card__place.is-disabled,
.poi-compare-card__primary.is-disabled,
.poi-compare-card__action.is-disabled {
opacity: 0.55;
}
.poi-compare-card__image {
height: 140px;
border-radius: 18px;
}
.poi-compare-card__field {
margin-top: 12px;
}
.poi-compare-card__field-label {
line-height: 16px;
}
.poi-compare-card__field-value {
margin-top: 5px;
line-height: 18px;
}
.poi-compare-card__chip {
display: inline-flex;
align-items: center;
min-height: 22px;
margin-top: 5px;
padding: 0 10px;
border-radius: 999px;
line-height: 22px;
}
.poi-compare-card__chip--green {
box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.02);
}
.poi-compare-card__chip--amber {
box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.02);
}
.poi-compare-card__primary {
height: 52px;
margin-top: 28px;
border-radius: 16px;
}
.poi-compare-card__detail-head {
min-width: 0;
height: 70px;
padding: 0 28px;
border-bottom: 1px solid #f1f5f9;
box-sizing: border-box;
}
.poi-compare-card__back {
width: 34px;
height: 34px;
margin-right: 14px;
color: #64748b;
font-size: 28px;
line-height: 1;
background: #f8fafc;
}
.poi-compare-card__detail-title {
min-width: 0;
line-height: 24px;
}
.poi-compare-card__compare-label {
max-width: 142px;
text-align: right;
line-height: 16px;
}
.poi-compare-card__table {
padding: 18px 12px 0;
}
.poi-compare-card__table-row {
display: grid;
grid-template-columns: 29% 35.5% 35.5%;
align-items: stretch;
}
.poi-compare-card__table-head {
min-height: 36px;
}
.poi-compare-card__table-title {
display: flex;
align-items: center;
justify-content: center;
line-height: 18px;
}
.poi-compare-card__data-row {
border-top: 1px solid #f1f5f9;
}
.poi-compare-card__row-label {
display: flex;
align-items: center;
min-height: 52px;
padding-left: 14px;
background: #fff;
line-height: 18px;
box-sizing: border-box;
}
.poi-compare-card__cell {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
text-align: center;
line-height: 18px;
background: #f8fafc;
}
.poi-compare-card__cell--green {
background: #ecfdf5;
}
.poi-compare-card__recommend {
padding: 20px 30px 0;
}
.poi-compare-card__recommend-title {
line-height: 16px;
}
.poi-compare-card__tips {
margin-top: 20px;
padding: 18px 16px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #f8fafc;
}
.poi-compare-card__tip + .poi-compare-card__tip {
margin-top: 14px;
}
.poi-compare-card__dot {
width: 8px;
height: 8px;
margin-top: 8px;
}
.poi-compare-card__dot--green {
background: #10b981;
}
.poi-compare-card__dot--blue {
background: #3b82f6;
}
.poi-compare-card__tip-text {
line-height: 22px;
}
.poi-compare-card__actions {
padding: 26px 30px 26px;
}
.poi-compare-card__action {
height: 54px;
border-radius: 16px;
box-sizing: border-box;
}
.poi-compare-card__action--secondary {
border: 1px solid #e2e8f0;
background: #fff;
}
.poi-compare-card__action-icon {
margin-right: 8px;
font-size: 18px;
line-height: 18px;
}