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

src/pages/home/components/RecommendationListCard/index.vue

@@ -0,0 +1,59 @@
+<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>

src/pages/home/components/RecommendationListCard/mocks.js

@@ -0,0 +1,22 @@
+export default {
+  items: [
+    {
+      id: "waterfall",
+      title: "翠谷瀑布",
+      image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=700&q=80",
+      distance: "1.2km",
+      action: {
+        text: "查看详情",
+      },
+    },
+    {
+      id: "forest",
+      title: "水上森林",
+      image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=700&q=80",
+      distance: "2.5km",
+      action: {
+        text: "查看详情",
+      },
+    },
+  ],
+};

src/pages/home/components/RecommendationListCard/styles/index.scss

@@ -0,0 +1,53 @@
+.recommendation-list-card {
+  padding: 4px 0 8px;
+}
+
+.recommendation-list-card__scroll {
+  padding-bottom: 2px;
+}
+
+.recommendation-list-card__item {
+  width: 200px;
+  margin-right: 14px;
+  vertical-align: top;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
+}
+
+.recommendation-list-card__item:active {
+  opacity: 0.86;
+}
+
+.recommendation-list-card__item.is-disabled {
+  opacity: 0.55;
+}
+
+.recommendation-list-card__image {
+  height: 110px;
+}
+
+.recommendation-list-card__body {
+  box-sizing: border-box;
+}
+
+.recommendation-list-card__name {
+  line-height: 22px;
+}
+
+.recommendation-list-card__distance {
+  line-height: 16px;
+}
+
+.recommendation-list-card__pin {
+  font-size: 13px;
+  line-height: 13px;
+}
+
+.recommendation-list-card__button {
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-sizing: border-box;
+}