ac8f5b5f64
- 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
60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<template>
|
|
<div class="recommendation-list-card w-full">
|
|
<div class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x :show-scrollbar="false"
|
|
enhanced>
|
|
<div v-for="item in items" :key="item.id || item.title"
|
|
class="recommendation-list-card__item inline-block bg-white rounded-20 overflow-hidden"
|
|
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
|
|
<img class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
|
|
<div class="recommendation-list-card__body p-16">
|
|
<div class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
|
|
{{ item.title }}
|
|
</div>
|
|
<div
|
|
class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
|
|
<span class="recommendation-list-card__pin">⌖</span>
|
|
<span>{{ item.distance }}</span>
|
|
</div>
|
|
<div
|
|
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
|
|
@click.stop="handleSelect(item)">
|
|
{{ getActionText(item) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["select"]);
|
|
|
|
const items = computed(() => props.data.items || []);
|
|
|
|
const getActionText = (item) => {
|
|
return (item.action && item.action.text) || "";
|
|
};
|
|
|
|
const handleSelect = (item) => {
|
|
if (props.disabled) return;
|
|
emit("select", item);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|