refactor: 优化代码格式并添加根路径别名

在vite.config.js中添加了根路径别名@root，以便更好地管理路径引用。同时，对SummerCampCard.vue文件中的代码进行了格式化，提高了代码的可读性。此外，引入了tailwind配置以动态设置Swiper组件的分页颜色。

@@ -7,13 +7,17 @@
           <div
             class="absolute inset-0 z-0 bg-cover bg-center"
             :style="{
-              backgroundImage: `url(${item.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'})`,
-              filter: 'brightness(0.4)'
+              backgroundImage: `url(${
+                item.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'
+              })`,
+              filter: 'brightness(0.4)',
             }"
           ></div>
 
           <!-- Gradient overlay -->
-          <div class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"></div>
+          <div
+            class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"
+          ></div>
 
           <!-- Content -->
           <div class="relative z-10 p-4">
@@ -26,7 +30,11 @@
 
             <div class="mt-4 flex justify-between items-center">
               <div class="text-orange-300 font-bold text-2xl">{{ item.price }}</div>
-              <div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">{{ item.discount }}</div>
+              <div
+                class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full"
+              >
+                {{ item.discount }}
+              </div>
             </div>
 
             <div class="flex justify-between text-xs text-white/80 mt-3">
@@ -43,59 +51,69 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted, ref } from 'vue'
-import Swiper from 'swiper'
-import { Pagination, EffectCards } from 'swiper/modules'
-import 'swiper/css'
-import 'swiper/css/pagination'
-import 'swiper/css/effect-cards'
+import { defineProps, onMounted, ref } from "vue";
+import Swiper from "swiper";
+import { Pagination, EffectCards } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/effect-cards";
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '@root/tailwind.config.js';
 
 const props = defineProps({
   items: {
     type: Array,
-    default: () => [{
-      title: '大国少年-世界正东方',
-      subtitle: '亲子夏令营',
-      badge: '亲子夏令营',
-      price: '¥1280',
-      discount: '限时优惠',
-      episodes: 16,
-      subscribers: 1140,
-      imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'
-    }]
-  }
-})
+    default: () => [
+      {
+        title: "大国少年-世界正东方",
+        subtitle: "亲子夏令营",
+        badge: "亲子夏令营",
+        price: "¥1280",
+        discount: "限时优惠",
+        episodes: 16,
+        subscribers: 1140,
+        imageUrl: "https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg",
+      },
+    ],
+  },
+});
 
-const swiperRef = ref(null)
+const swiperRef = ref(null);
 
 onMounted(() => {
+  const fullConfig = resolveConfig(tailwindConfig);
+  const primaryColor = fullConfig.theme.colors.primary;
+  document.documentElement.style.setProperty('--swiper-pagination-color', primaryColor);
+
   new Swiper(swiperRef.value, {
     modules: [Pagination, EffectCards],
-    effect: 'creative',
+    effect: "creative",
     creativeEffect: {
       prev: {
-        translate: ['-100%', 0, 0],
-        opacity: 0
+        translate: ["-100%", 0, 0],
+        opacity: 0,
       },
       next: {
-        translate: ['100%', 0, 0],
-        opacity: 0
-      }
+        translate: ["100%", 0, 0],
+        opacity: 0,
+      },
     },
     speed: 600,
     pagination: {
-      el: '.swiper-pagination',
-      clickable: true
+      el: ".swiper-pagination",
+      clickable: true,
     },
-    loop: true
-  })
-})
+    loop: true,
+  });
+});
 </script>
 
 <style scoped>
 .swiper-container {
   width: 100%;
   height: 100%;
+  /* --swiper-theme-color: #ff6600; */
+  /* --swiper-pagination-color: #4caf50; */
 }
 
 .swiper-slide {

@@ -47,6 +47,7 @@ export default ({ command, mode }) => {
     // cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。
     resolve: {
       alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
+        "@root": path.resolve(__dirname),
         "@": path.resolve(__dirname, "src"),
         "@components": path.resolve(__dirname, "src/components"),
         "@composables": path.resolve(__dirname, "src/composables"),