From 32dc6a1510b306ac22932081719f4d8746dbc634 Mon Sep 17 00:00:00 2001
From: Immerse <y15829485647@163.com>
Date: Sat, 22 Jun 2024 17:36:48 +0800
Subject: [PATCH] fix: course pack scroll bug

---
 apps/client/pages/course-pack/index.vue | 16 +++++++++-------
 apps/client/tailwind.config.js          | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/client/pages/course-pack/index.vue b/apps/client/pages/course-pack/index.vue
index 4239826db..f6cd09ce1 100644
--- a/apps/client/pages/course-pack/index.vue
+++ b/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>
diff --git a/apps/client/tailwind.config.js b/apps/client/tailwind.config.js
index f0eda5d38..d8dab8d42 100644
--- a/apps/client/tailwind.config.js
+++ b/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"]);
     },
   ],
 };