fix: course pack scroll bug

Author: yaolifeng0629

apps/client/pages/course-pack/index.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="flex w-full flex-col">
-    <h2 class="my-10 text-2xl font-bold">多课程包</h2>
+    <h2 class="mb-4 text-2xl font-bold">多课程包</h2>
     <template v-if="isLoading">
       <Loading></Loading>
     </template>
     <template v-else>
-      <div
-        class="grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
-      >
-        <template v-for="coursePack in coursePackStore.coursePacks">
-          <CoursePackCard :coursePack="coursePack"></CoursePackCard>
-        </template>
+      <div class="h-[79vh] overflow-y-auto overflow-x-hidden scrollbar-hide">
+        <div
+          class="grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+        >
+          <template v-for="coursePack in coursePackStore.coursePacks">
+            <CoursePackCard :coursePack="coursePack"></CoursePackCard>
+          </template>
+        </div>
       </div>
     </template>
   </div>

apps/client/tailwind.config.js

@@ -56,7 +56,7 @@ export default {
       // 来这里找 https://icones.js.org/
       collections: getIconCollections(["ph", "simple-icons"]),
     }),
-    function ({ addComponents }) {
+    function ({ addComponents, addUtilities }) {
       const buttons = {
         ".tw-btn-blue": {
           backgroundColor: "#4e80ee",
@@ -69,6 +69,18 @@ export default {
       };
 
       addComponents(buttons);
+
+      const scrollbar = {
+        ".scrollbar-hide": {
+          "-ms-overflow-style": "none" /* 适用于 IE 和 Edge */,
+          "scrollbar-width": "none" /* 适用于 Firefox */,
+        },
+        ".scrollbar-hide::-webkit-scrollbar": {
+          display: "none",
+        },
+      };
+
+      addUtilities(scrollbar, ["responsive"]);
     },
   ],
 };