TitleSection component

app/components/TitleSection.vue

@@ -0,0 +1,24 @@
+<!-- components/TitleSection.vue -->
+<template>
+  <view class="flex flex-col items-center">
+    <view class="text-sm mt-4 lg:mt-32 text-primary font-bold">
+      {{ subtitle }}
+    </view>
+    <view class="text-4xl my-6 font-bold">
+      {{ title }}
+    </view>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '默认标题'
+  },
+  subtitle: {
+    type: String,
+    default: '默认副标题'
+  }
+})
+</script>

app/components/landing/D3_INTELLIGENT_APIARY.vue

@@ -3,16 +3,8 @@
 </script>
 
 <template>
-  <UPageCTA
-      :ui="{
-      container: 'border-0 shadow-none',  // 移除边框和阴影
-                // 移除焦点环
-      title: 'border-none',               // 标题无边框
-      description: 'border-0'            // 描述无边框
-    }"
-
-      description="3D INTELLIGENT APIARY"
-
+  <TitleSection
+      subtitle="3D INTELLIGENT APIARY"
       title="3D智慧蜂场"
   />
   <img alt="" class="w-full  lg:px-40" src="/img/index/model2.b444287.gif">

app/components/landing/OUR_STRENGTHS.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+const items = [
+  'https://picsum.photos/640/640?random=1',
+  'https://picsum.photos/640/640?random=2',
+
+]
+</script>
+
+<template>
+  <div
+      :style="{ backgroundImage: `url('/img/index/strength_bg.png')` ,    }"
+      class="bg-cover bg-no-repeat bg-center w-full ">
+
+
+    <TitleSection
+        subtitle="OUR STRENGTHS"
+        title="我们的优势"
+    />
+    <view class="flex items-center flex-col lg:px-80 sm:flex-row">
+      <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
+        <UCarousel v-slot="{ item }" :items="items" arrows class="w-full max-w-xs mx-auto">
+          <nuxt-img :src="item" class="rounded-lg" height="320" width="320"/>
+        </UCarousel>
+      </div>
+      <div class="relative w-full max-w-6xl mx-auto aspect-video md:aspect-[16/9]">
+
+        <img class="rounded-lg" height="320" src='/img/index/advantage.png'>
+
+      </div>
+    </view>
+
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/components/landing/PRODUCT_INTRODUCTION.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div
+      :style="{ backgroundImage: `url('/img/index/strength_bg.png')` ,    }"
+      class="bg-cover bg-no-repeat bg-center w-full ">
+
+
+    <TitleSection
+        subtitle="PRODUCT INTRODUCTION"
+        title="产品介绍"
+    />
+
+    <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
+      <video
+
+          class="w-full h-full object-cover rounded-lg shadow-lg"
+          controls
+          loop
+          muted
+          poster="/img/img_1.png"
+          src="https://www.caasbee.com/image/cpjs.mp4"
+      />
+    </div>
+
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/components/landing/SERVICE_INTRODUCTION.vue

@@ -64,12 +64,12 @@ const services = [
     </UPageHero>
 
     <!-- 服务卡片网格布局 -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50 ">
+    <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50  justify-items-center">
       <!-- 外层控制大小的容器 -->
       <div
           v-for="(service, index) in services"
           :key="index"
-          class="w-45 aspect-square justify-center align-center"
+          class="w-45 aspect-square justify-center align-center "
       >
         <SmartApiaryCard
             :description="service.description"

app/pages/index/index.vue

@@ -7,6 +7,8 @@
     <LandingHero/>
     <LandingD3_INTELLIGENT_APIARY/>
     <LandingSERVICEINTRODUCTION/>
+    <LandingOURSTRENGTHS/>
+    <LandingPRODUCT_INTRODUCTION/>
   </UPage>
 </template>