refactor(首页轮播): 优化首页轮播组件结构

pages/index.vue

@@ -35,65 +35,6 @@
         :parallax="true"
         class="h-[320px] sm:h-[320px] md:h-[768px] lg:h-[900px] swiper-container-1"
       >
-        <SwiperSlide>
-          <div
-            class="max-w-screen-2xl mx-auto h-full relative"
-            :style="{
-              backgroundImage: `url(${homeA1Webp})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
-            }"
-          >
-            <div
-              class="w-full h-full flex-col justify-center flex gap-2 select-none relative z-10"
-            >
-              <div
-                class="rounded border border-white w-12 h-8 bg-white/10 backdrop-blur-md leading-none justify-center flex items-center text-white text-sm font-normal"
-              >
-                SSD
-              </div>
-              <div class="justify-center flex flex-col gap-2">
-                <span class="text-white md:text-6xl text-1xl sm:text-2xl font-normal">{{
-                  t("home.carousel.one.title")
-                }}</span>
-                <span class="text-white md:text-6xl text-1xl sm:text-2xl font-normal">{{
-                  t("home.carousel.one.description")
-                }}</span>
-                <span class="text-white md:text-6xl text-1xl sm:text-2xl font-normal">{{
-                  t("home.carousel.one.description2")
-                }}</span>
-                <span class="text-cyan-400 md:text-6xl text-1xl sm:text-2xl font-normal">{{
-                  t("home.carousel.one.description3")
-                }}</span>
-              </div>
-              <div class="md:flex hidden flex-col gap-2 mt-4">
-                <div
-                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
-                >
-                  <div class="w-2 h-2 bg-white rounded-full"></div>
-                  {{ t("home.carousel.one.description4") }}
-                </div>
-                <div
-                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
-                >
-                  <div class="w-2 h-2 bg-white rounded-full"></div>
-                  {{ t("home.carousel.one.description5") }}
-                </div>
-              </div>
-              <div
-                class="md:w-36 w-28 md:h-14 h-10 md:mt-12 mt-2 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
-              >
-                <nuxt-link
-                  :to="`${homepagePath}/products/HE80-2TNLHS`"
-                  class="w-full h-full !flex items-center justify-center text-zinc-900"
-                >
-                  {{ t("products.view_details") }}
-                </nuxt-link>
-              </div>
-            </div>
-          </div>
-        </SwiperSlide>
         <SwiperSlide v-if="!isMobile">
           <div class="max-w-screen-2xl mx-auto h-full relative">
             <video
@@ -150,6 +91,70 @@
             </div>
           </div>
         </SwiperSlide>
+        <SwiperSlide>
+          <div
+            class="max-w-screen-2xl mx-auto h-full relative"
+            :style="{
+              backgroundImage: `url(${homeA1Webp})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+            }"
+          >
+            <div
+              class="w-full h-full flex-col justify-center flex gap-2 select-none relative z-10"
+            >
+              <div
+                class="rounded border border-white w-12 h-8 bg-white/10 backdrop-blur-md leading-none justify-center flex items-center text-white text-sm font-normal"
+              >
+                SSD
+              </div>
+              <div class="justify-center flex flex-col gap-2">
+                <span
+                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
+                  >{{ t("home.carousel.one.title") }}</span
+                >
+                <span
+                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
+                  >{{ t("home.carousel.one.description") }}</span
+                >
+                <span
+                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
+                  >{{ t("home.carousel.one.description2") }}</span
+                >
+                <span
+                  class="text-cyan-400 md:text-6xl text-1xl sm:text-2xl font-normal"
+                  >{{ t("home.carousel.one.description3") }}</span
+                >
+              </div>
+              <div class="md:flex hidden flex-col gap-2 mt-4">
+                <div
+                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
+                >
+                  <div class="w-2 h-2 bg-white rounded-full"></div>
+                  {{ t("home.carousel.one.description4") }}
+                </div>
+                <div
+                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
+                >
+                  <div class="w-2 h-2 bg-white rounded-full"></div>
+                  {{ t("home.carousel.one.description5") }}
+                </div>
+              </div>
+              <div
+                class="md:w-36 w-28 md:h-14 h-10 md:mt-12 mt-2 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
+              >
+                <nuxt-link
+                  :to="`${homepagePath}/products/HE80-2TNLHS`"
+                  class="w-full h-full !flex items-center justify-center text-zinc-900"
+                >
+                  {{ t("products.view_details") }}
+                </nuxt-link>
+              </div>
+            </div>
+          </div>
+        </SwiperSlide>
+
         <div class="max-w-screen-2xl mx-auto relative">
           <div
             class="swiper-pagination swiper-pagination-1 text-left bottom-1 top-0"