feat: 增加pc banner屏幕适配

components/pageLayout/abuot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
+  <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px] overflow-hidden">
     <div class="max-w-[1920px] m-auto relative">
       <NuxtImg
         src="/images/about/mapBg.png"
@@ -46,7 +46,7 @@
               alt="电话图标"
               format="webp"
             />
-            <span class="block sm:hidden">联系电话</span> 4000996200
+            <span class="block sm:hidden">联系电话：</span> 4000996200
           </div>
         </div>
       </div>

components/pageLayout/device.vue

@@ -59,14 +59,14 @@
               <img
                 src="/images/deviceInterface/bk2000a.png"
                 loading="eager"
-                class="tabs-content-img"
+                class="tabs-content-img w-[calc(50%-42px)] md:w-[700px] sm:w-[274px]"
                 format="webp"
               />
 
               <img
                 src="/images/deviceInterface/bk2000b.png"
                 loading="eager"
-                class="tabs-content-img"
+                class="tabs-content-img w-[calc(50%-42px)] md:w-[700px] sm:w-[274px]"
                 format="webp"
               />
             </div>
@@ -91,9 +91,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
   @apply w-[446px] h-[50px] bg-cover bg-no-repeat flex items-center pl-15 mt-13 md:pl-10 sm:pl-5 md:w-[350px] md:h-[44px] md:mt-6 sm:w-[176px] sm:h-[22px] sm:mt-3;
 }
 .tabs-content-devices {
-  @apply flex gap-21 justify-center mt-17 md:items-center md:mt-[1.8rem] sm:gap-24 sm:mt-10 md:flex-col sm:flex-col md:gap-32;
+  @apply flex gap-21 justify-center mt-17 md:items-center md:mt-[1.8rem] sm:gap-24 sm:mt-10 md:flex-col sm:flex-col md:gap-32 relative;
 }
 .tabs-content-img {
-  @apply object-cover w-[700px] sm:w-[274px] mx-auto;
+  @apply object-cover mx-auto;
 }
 </style>

components/pageLayout/serce.vue

@@ -1,6 +1,8 @@
 <template>
   <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px]">服务矩阵</h2>
-  <div class="grid grid-cols-8 gap-[24px] max-w-[1440px] mx-auto sm:hidden md:hidden">
+  <div
+    class="grid grid-cols-8 gap-[24px] p-5 md:p-5 sm:p-2 max-w-[1440px] mx-auto sm:hidden md:hidden"
+  >
     <div v-for="(item, idx) in serveList" :key="idx" :class="item.clx">
       <GlowingEffect
         :spread="40"

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="w-full bg-[#0C0C16] lg:min-w-[1200px]">
     <div
-      class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#080809] lg:h-[888px]"
+      class="relative h-[428px] md:h-[400px] max-w-[3000px] m-auto w-full bg-gradient-to-b from-[#0C0C16] to-[#080809] lg:h-[888px] xg:h-[638px] mg:h-[560px]"
     >
       <div class="size-full mx-auto overflow-hidden relative" ref="emblaNode">
         <div class="size-full flex">
@@ -22,7 +22,7 @@
                 :fetchpriority="idx === 0 ? 'high' : 'low'"
               />
               <div
-                class="w-[1440px] md:w-[870px] sm:w-[258px] sm:top-19 absolute inset-0 mx-auto flex overflow-hidden items-center sm:items-start"
+                class="w-[1440px] xg:w-[1200px] mg:w-[1000px] md:w-[720px] sm:w-[258px] sm:top-19 absolute inset-0 mx-auto flex overflow-hidden items-center sm:items-start"
               >
                 <div class="swiper-banner-info">
                   <h6 class="text-2xl md:text-lg lg:text-xl sm:text-xs font-bold">
@@ -202,8 +202,7 @@ function createAutoplay(delay = 4000) {
 
 <style>
 .swiper-banner-info {
-  @apply relative flex flex-col justify-center sm:justify-normal gap-16  md:gap-4 sm:gap-2
-           text-white;
+  @apply relative flex flex-col justify-center sm:justify-normal gap-16 xg:gap-14 mg:gap-10 md:gap-8 sm:gap-2 text-white xg:w-[540px] mg:w-[480px] md:w-[300px];
 }
 .title-font {
   @apply text-5xl md:text-4xl sm:text-lg font-bold text-center text-white;

tailwind.config.js

@@ -19,6 +19,8 @@ export default {
         sm: { max: '479px' },
         md: { min: '480px', max: '1024px' },
         lg: { min: '1025px' },
+        mg: { min: '1025px', max: '1440px' }, // 为设置banner增加的断点
+        xg: { min: '1441px', max: '1600px' }, // 为设置banner增加的断点
         xl: { min: '1920px' },
       },
       spacing: {