Merge branch 'main' of github.com:cuixueshe/earthworm

Author: cuixiaorui

apps/client/components/courses/CourseCard.vue

@@ -57,7 +57,7 @@ onMounted(() => {
 
 <style scoped>
 .course-card {
-  @apply relative h-[160px] w-full rounded-xl border border-gray-400 p-4 pb-6 transition-all duration-300 dark:text-gray-100;
+  @apply relative h-[160px] w-full cursor-pointer rounded-xl border border-gray-400 p-4 pb-6 transition-all duration-300 dark:text-gray-100;
   @apply hover:text-purple-500 hover:shadow-lg hover:shadow-gray-300 hover:dark:text-purple-400 dark:hover:shadow-gray-500;
 }
 

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"]);
     },
   ],
 };