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/ScenicImageCard/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="scenic-image-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
+    @click="handleSelect">
+    <img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
+
+    <div
+      class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900"
+      @click.stop="handleAction">
+      {{ action.icon }}
+    </div>
+
+    <div v-if="hasCaption" class="scenic-image-card__caption">
+      <div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
+        {{ caption.title }}
+      </div>
+      <div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white font-size-14 font-900 ellipsis-1">
+        {{ caption.subtitle }}
+      </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", "action"]);
+
+const caption = computed(() => props.data.caption || {});
+const action = computed(() => props.data.action || {});
+const hasCaption = computed(() => Boolean(caption.value.title || caption.value.subtitle));
+
+const handleSelect = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+};
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

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

@@ -0,0 +1,19 @@
+export const scenicImageWithoutCaption = {
+  id: "bridge-mist-plain",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  action: {
+    icon: "↗",
+  },
+};
+
+export default {
+  id: "bridge-mist",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  caption: {
+    title: "古桥晨雾机位",
+    subtitle: "清晨 6:30 雾气最浓，长焦压缩效果极佳",
+  },
+  action: {
+    icon: "↗",
+  },
+};

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

@@ -0,0 +1,48 @@
+.scenic-image-card {
+  height: 324px;
+  background: #e2e8f0;
+}
+
+.scenic-image-card:active,
+.scenic-image-card__expand:active {
+  opacity: 0.86;
+}
+
+.scenic-image-card.is-disabled {
+  opacity: 0.55;
+}
+
+.scenic-image-card__image {
+  height: 100%;
+}
+
+.scenic-image-card__expand {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  width: 40px;
+  height: 40px;
+  background: rgba(15, 23, 42, 0.36);
+  line-height: 40px;
+}
+
+.scenic-image-card__caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 72px 22px 20px;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
+}
+
+.scenic-image-card__title {
+  line-height: 24px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+}
+
+.scenic-image-card__subtitle {
+  margin-top: 4px;
+  line-height: 18px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+}