Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
774a1704 1 parent 66098eba

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

在vite.config.js中添加了根路径别名@root，以便更好地管理路径引用。同时，对SummerCampCard.vue文件中的代码进行了格式化，提高了代码的可读性。此外，引入了tailwind配置以动态设置Swiper组件的分页颜色。
Inline Side-by-side
Showing 2 changed files with 53 additions and 34 deletions
...@@ -7,13 +7,17 @@ ...@@ -7,13 +7,17 @@
7 <div 7 <div
8 class="absolute inset-0 z-0 bg-cover bg-center" 8 class="absolute inset-0 z-0 bg-cover bg-center"
9 :style="{ 9 :style="{
10 - backgroundImage: `url(${item.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'})`, 10 + backgroundImage: `url(${
11 - filter: 'brightness(0.4)' 11 + item.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'
12 + })`,
13 + filter: 'brightness(0.4)',
12 }" 14 }"
13 ></div> 15 ></div>
14 16
15 <!-- Gradient overlay --> 17 <!-- Gradient overlay -->
16 - <div class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"></div> 18 + <div
19 + class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"
20 + ></div>
17 21
18 <!-- Content --> 22 <!-- Content -->
19 <div class="relative z-10 p-4"> 23 <div class="relative z-10 p-4">
...@@ -26,7 +30,11 @@ ...@@ -26,7 +30,11 @@
26 30
27 <div class="mt-4 flex justify-between items-center"> 31 <div class="mt-4 flex justify-between items-center">
28 <div class="text-orange-300 font-bold text-2xl">{{ item.price }}</div> 32 <div class="text-orange-300 font-bold text-2xl">{{ item.price }}</div>
29 - <div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">{{ item.discount }}</div> 33 + <div
34 + class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full"
35 + >
36 + {{ item.discount }}
37 + </div>
30 </div> 38 </div>
31 39
32 <div class="flex justify-between text-xs text-white/80 mt-3"> 40 <div class="flex justify-between text-xs text-white/80 mt-3">
...@@ -43,59 +51,69 @@ ...@@ -43,59 +51,69 @@
43 </template> 51 </template>
44 52
45 <script setup> 53 <script setup>
46 -import { defineProps, onMounted, ref } from 'vue' 54 +import { defineProps, onMounted, ref } from "vue";
47 -import Swiper from 'swiper' 55 +import Swiper from "swiper";
48 -import { Pagination, EffectCards } from 'swiper/modules' 56 +import { Pagination, EffectCards } from "swiper/modules";
49 -import 'swiper/css' 57 +import "swiper/css";
50 -import 'swiper/css/pagination' 58 +import "swiper/css/pagination";
51 -import 'swiper/css/effect-cards' 59 +import "swiper/css/effect-cards";
60 +import resolveConfig from 'tailwindcss/resolveConfig';
61 +import tailwindConfig from '@root/tailwind.config.js';
52 62
53 const props = defineProps({ 63 const props = defineProps({
54 items: { 64 items: {
55 type: Array, 65 type: Array,
56 - default: () => [{ 66 + default: () => [
57 - title: '大国少年-世界正东方', 67 + {
58 - subtitle: '亲子夏令营', 68 + title: "大国少年-世界正东方",
59 - badge: '亲子夏令营', 69 + subtitle: "亲子夏令营",
60 - price: '¥1280', 70 + badge: "亲子夏令营",
61 - discount: '限时优惠', 71 + price: "¥1280",
62 - episodes: 16, 72 + discount: "限时优惠",
63 - subscribers: 1140, 73 + episodes: 16,
64 - imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg' 74 + subscribers: 1140,
65 - }] 75 + imageUrl: "https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg",
66 - } 76 + },
67 -}) 77 + ],
78 + },
79 +});
68 80
69 -const swiperRef = ref(null) 81 +const swiperRef = ref(null);
70 82
71 onMounted(() => { 83 onMounted(() => {
84 + const fullConfig = resolveConfig(tailwindConfig);
85 + const primaryColor = fullConfig.theme.colors.primary;
86 + document.documentElement.style.setProperty('--swiper-pagination-color', primaryColor);
87 +
72 new Swiper(swiperRef.value, { 88 new Swiper(swiperRef.value, {
73 modules: [Pagination, EffectCards], 89 modules: [Pagination, EffectCards],
74 - effect: 'creative', 90 + effect: "creative",
75 creativeEffect: { 91 creativeEffect: {
76 prev: { 92 prev: {
77 - translate: ['-100%', 0, 0], 93 + translate: ["-100%", 0, 0],
78 - opacity: 0 94 + opacity: 0,
79 }, 95 },
80 next: { 96 next: {
81 - translate: ['100%', 0, 0], 97 + translate: ["100%", 0, 0],
82 - opacity: 0 98 + opacity: 0,
83 - } 99 + },
84 }, 100 },
85 speed: 600, 101 speed: 600,
86 pagination: { 102 pagination: {
87 - el: '.swiper-pagination', 103 + el: ".swiper-pagination",
88 - clickable: true 104 + clickable: true,
89 }, 105 },
90 - loop: true 106 + loop: true,
91 - }) 107 + });
92 -}) 108 +});
93 </script> 109 </script>
94 110
95 <style scoped> 111 <style scoped>
96 .swiper-container { 112 .swiper-container {
97 width: 100%; 113 width: 100%;
98 height: 100%; 114 height: 100%;
115 + /* --swiper-theme-color: #ff6600; */
116 + /* --swiper-pagination-color: #4caf50; */
99 } 117 }
100 118
101 .swiper-slide { 119 .swiper-slide {
......
...@@ -47,6 +47,7 @@ export default ({ command, mode }) => { ...@@ -47,6 +47,7 @@ export default ({ command, mode }) => {
47 // cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。 47 // cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。
48 resolve: { 48 resolve: {
49 alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。 49 alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
50 + "@root": path.resolve(__dirname),
50 "@": path.resolve(__dirname, "src"), 51 "@": path.resolve(__dirname, "src"),
51 "@components": path.resolve(__dirname, "src/components"), 52 "@components": path.resolve(__dirname, "src/components"),
52 "@composables": path.resolve(__dirname, "src/composables"), 53 "@composables": path.resolve(__dirname, "src/composables"),
......