首页布局

src/pages/Home/index.vue

@@ -37,8 +37,8 @@
     <!-- Main Content Container -->
     <div class="container mx-auto flex flex-col">
       <main class="pt-10">
-        <!--    module1    -->
-        <div class="mb-[80px] flex">
+        <!--    module0    -->
+        <div class="mb-[80px] flex justify-between">
           <div class="flex flex-col items-center">
             <div class="mb-[20px] ml-[42px] md:ml-[17px]">
               <h2 class="mb-2 text-2xl font-black md:text-8xl">
@@ -49,6 +49,11 @@
             <img src="./Group%20133.png" alt="" class="mt-[52px] h-[287px] w-[182px]" />
           </div>
           <!-- video           -->
+          <div class="h-[450px] w-[800px] bg-[url('@/pages/Home/modules1/Group-236.png')]"></div>
+        </div>
+        <!-- modules1       -->
+        <div class="mb-[80px] w-full">
+          <img src="./modules1/Group%20235.png" alt="邀请规则" class="mx-auto w-[1024px]" />
         </div>
         <!-- modules2       -->
         <div class="mb-[80px] w-full rounded-[40px] bg-[#ADFF5B] p-8 pb-2 text-black">
@@ -71,7 +76,22 @@
           </div>
           <div class="text-center text-[#999999]">给您的客户提供专业视角的建议</div>
           <div class="mt-[20px] flex justify-center">
-            <div class="size-[600px] rounded-[40px] border-8 border-[#ADFF5B]"></div>
+            <Carousel class="relative w-full max-w-[700px]" :opts="{ loop: true }">
+              <div class="size-[700px] overflow-hidden rounded-[40px]">
+                <CarouselContent>
+                  <CarouselItem v-for="(img, index) in modules4Images" :key="index">
+                    <img
+                      :src="img"
+                      alt=""
+                      class="h-[700px] w-[700px] object-cover select-none"
+                      draggable="false"
+                    />
+                  </CarouselItem>
+                </CarouselContent>
+              </div>
+              <CarouselPrevious class="-left-[100px]" />
+              <CarouselNext class="-right-[100px]" />
+            </Carousel>
           </div>
         </div>
       </main>
@@ -97,6 +117,13 @@ import { useLocalStorage } from '@vueuse/core'
 import LoginFormModal from './components/LoginFormModal.vue'
 import Logo from './logo.svg?component'
 import Group215Icon from './modules3/Group 215.svg?component'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel'
 import request from '@/utils/request'
 import Frame98 from './modules2/Frame 98.png'
 import Frame99 from './modules2/Frame 99.png'
@@ -105,7 +132,15 @@ import Frame101 from './modules2/Frame 101.png'
 import Frame104 from './modules2/Frame 104.png'
 import Frame105 from './modules2/Frame 105.png'
 
+import image1 from './modules4/image1.png'
+import image2 from './modules4/image2.png'
+import image3 from './modules4/image3.png'
+import image4 from './modules4/image4.png'
+import image5 from './modules4/image5.png'
+import image6 from './modules4/image6.png'
+
 const modules2Image = [Frame98, Frame99, Frame100, Frame101, Frame104, Frame105]
+const modules4Images = [image1, image2, image3, image4, image5, image6]
 
 const route = useRoute()
 const router = useRouter()

src/pages/Home/modules4/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="120" viewBox="0 0 48 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 59.9033L37.5049 0L47.4883 4.35156L12.8008 59.9033L47.4883 115.456L37.5049 119.808L0 59.9033Z" fill="#ADFF5B"/>
+</svg>