refactor(页面样式): 调整首页产品展示样式和布局

- 修改了产品展示部分的样式，调整了底部位置和图片尺寸，提升了视觉效果。
- 更新了分类链接的生成方式，去掉了多余的homepagePath，简化了代码。
- 优化了文本样式，增加了最大宽度和行数限制，确保信息展示更加清晰。

这些修改旨在提升用户体验和页面的可读性，确保在不同设备上均能良好展示。

pages/index.vue

@@ -244,7 +244,7 @@
           </div>
 
           <div
-            class="bg-zinc-900/60 backdrop-blur-[120px] right-0 bottom-[-20%] static xl:absolute"
+            class="bg-zinc-900/60 backdrop-blur-[120px] right-0 bottom-[-30%] static xl:absolute"
           >
             <div class="w-full h-full grid grid-cols-2">
               <nuxt-link
@@ -252,16 +252,19 @@
                 :key="category.id"
                 class="flex flex-col gap-4 items-center p-4 md:p-12 hover:bg-zinc-900/50 hover:scale-95 transition-all duration-300"
                 v-show="category.audiences === 1"
-                :to="`${homepagePath}${category.link}`"
+                :to="`${category.link}`"
               >
-                <img class="w-2/1" :src="category.image" />
+                <img
+                  class="w-[200px] h-[200px] object-contain"
+                  :src="category.image"
+                />
                 <div
                   class="text-center flex justify-center text-white text-base font-bold"
                 >
                   {{ category.title }}
                 </div>
                 <div
-                  class="text-center flex justify-center text-white/50 text-sm"
+                  class="text-center text-white/50 text-sm max-w-[280px] line-clamp-2"
                 >
                   {{ category.description }}
                 </div>
@@ -345,7 +348,7 @@
           </div>
 
           <div
-            class="bg-zinc-900/60 backdrop-blur-[120px] static left-0 bottom-[-15%] xl:absolute z-2"
+            class="bg-zinc-900/60 backdrop-blur-[120px] static left-0 bottom-[-30%] xl:absolute z-2"
           >
             <div class="w-full h-full grid grid-cols-2 lg:grid-cols-3">
               <nuxt-link
@@ -353,16 +356,19 @@
                 :key="category.id"
                 class="flex flex-col gap-4 items-center py-4 px-4 md:py-12 md:px-6 hover:bg-zinc-900/50 hover:scale-95 transition-all duration-300"
                 v-show="category.audiences === 0"
-                :to="`${homepagePath}${category.link}`"
+                :to="`${category.link}`"
               >
-                <img class="w-2/1" :src="category.image" />
+                <img
+                  class="w-[200px] h-[200px] object-contain"
+                  :src="category.image"
+                />
                 <div
                   class="text-center flex justify-center text-white text-base font-bold"
                 >
                   {{ category.title }}
                 </div>
                 <div
-                  class="text-center flex justify-center text-white/50 text-sm"
+                  class="text-center text-white/50 text-sm max-w-[280px] line-clamp-2"
                 >
                   {{ category.description }}
                 </div>
@@ -374,7 +380,10 @@
     </section>
 
     <!-- 按用途产品展示 -->
-    <section v-if="false" class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
+    <section
+      v-if="false"
+      class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4"
+    >
       <div class="max-w-screen-2xl mx-auto relative">
         <div
           class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
@@ -1230,12 +1239,15 @@ useHead({
 @keyframes gradient-bg {
   0% {
     background-position: 0% 50%;
+    opacity: 1;
   }
   50% {
     background-position: 100% 50%;
+    opacity: 0.9;
   }
   100% {
     background-position: 0% 50%;
+    opacity: 1;
   }
 }