feat: add new features, update theme and build config
- 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
161
src/pages/home/components/PoiCompareCard/index.vue
Normal file
161
src/pages/home/components/PoiCompareCard/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user