服务简介

app/app.config.ts

@@ -0,0 +1,29 @@
+export default defineAppConfig({
+    ui: {
+        header: {
+            slots: {
+                root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
+                container: 'flex items-center justify-between gap-3 h-full',
+                left: 'lg:flex-1 flex items-center gap-1.5',
+                center: 'hidden lg:flex',
+                right: 'flex items-center justify-end lg:flex-1 gap-1.5',
+                title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
+                toggle: 'lg:hidden',
+                content: 'lg:hidden',
+                overlay: 'lg:hidden',
+                header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
+                body: 'p-4 sm:p-6 overflow-y-auto'
+            },
+            variants: {
+                toggleSide: {
+                    left: {
+                        toggle: '-ms-1.5'
+                    },
+                    right: {
+                        toggle: '-me-1.5'
+                    }
+                }
+            }
+        }
+    }
+})

app/assets/css/main.css

@@ -10,4 +10,6 @@
 /*    !*    background-color: #c8c8c8;*!*/
 /*    !*}*!*/
 /*}*/
-
+/*:root {*/
+/*    --ui-header-height: --spacing(24);*/
+/*}*/

app/components/AppHeader.vue

@@ -5,9 +5,9 @@ const route = useRoute()
 
 const items = computed<NavigationMenuItem[]>(() => [{
   label: '首页',
-  to: '/docs/getting-started',
+  to: '/',
   icon: 'i-lucide-book-open',
-  active: route.path.startsWith('/docs/getting-started')
+  active: route.path.startsWith('/')
 }, {
   label: '产品与服务',
 
@@ -52,24 +52,37 @@ const items = computed<NavigationMenuItem[]>(() => [{
 
 <template>
   <UHeader>
+    <!-- 标题部分 -->
     <template #title>
-      <view class="h-6 w-auto ">
+      <view class="h-6 w-auto text-primary">
         创特蜂箱
       </view>
-
     </template>
 
-    <UNavigationMenu :items="items"/>
+    <!-- 导航菜单 -->
+    <UNavigationMenu
+        :items="items"
 
+        highlight
+        highlight-color="primary"
+    />
+
+    <!-- 右侧区域 -->
     <template #right>
-      <view>
+      <view class="text-primary">
         商户管理
       </view>
     </template>
 
+    <!-- 移动端菜单 -->
     <template #body>
-      <UNavigationMenu :items="items" class="-mx-2.5" orientation="vertical"/>
+      <UNavigationMenu
+          :items="items"
+          class="-mx-2.5 bg-teal-50/80"
+          orientation="vertical"
+      />
     </template>
   </UHeader>
 </template>
 
+

app/components/landing/D3_INTELLIGENT_APIARY.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <UPageCTA
+      :ui="{  container: 'border-0' }   "
+      description="3D INTELLIGENT APIARY"
+      title="3D智慧蜂场"
+  />
+
+  <div class="hero-fullscreen"/>
+
+
+</template>
+
+<style scoped>
+/* 关键CSS */
+.hero-fullscreen {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.hero-fullscreen::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/img/index/model2.b444287.gif');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: -1; /* 确保内容在前景 */
+}
+
+/* 适配UPageHero内部样式 */
+.hero-fullscreen :deep(.u-page-hero) {
+  background-color: transparent; /* 移除组件默认背景 */
+  height: 100%;
+}
+</style>

app/components/landing/Hero.vue

@@ -20,10 +20,10 @@
   <div class="hero-fullscreen">
     <!--    <UPageHero-->
     <!--        :links="links"-->
-    <!--&lt;!&ndash;        description="A Nuxt/Vue-integrated UI library..."&ndash;&gt;-->
+    <!--        description="A Nuxt/Vue-integrated UI library..."-->
-    <!--&lt;!&ndash;        headline="New release"&ndash;&gt;-->
+    <!--        headline="New release"-->
-    <!--&lt;!&ndash;        orientation="horizontal"&ndash;&gt;-->
+    <!--        orientation="horizontal"-->
-    <!--&lt;!&ndash;        title="Ultimate Vue UI library"&ndash;&gt;-->
+    <!--        title="Ultimate Vue UI library"-->
     <!--    >-->
     <!--      &lt;!&ndash; 图片作为背景（非内容） &ndash;&gt;-->
     <!--    </UPageHero>-->
@@ -53,9 +53,5 @@
   z-index: -1; /* 确保内容在前景 */
 }
 
-/* 适配UPageHero内部样式 */
+
-.hero-fullscreen :deep(.u-page-hero) {
-  background-color: transparent; /* 移除组件默认背景 */
-  height: 100%;
-}
 </style>

app/components/landing/SERVICE_INTRODUCTION.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <!-- 外层容器设置为全屏 -->
+  <div class="hero-fullscreen">
+    <UPageHero
+
+        :ui="{
+          title: 'text-white text-2xl font-bold',
+          headline: 'text-white/90 text-sm uppercase tracking-widest',
+          description: 'text-white/80 text-base leading-relaxed'
+        }"
+        description="以提升蜂产业标准化和自动化水平为目标，综合应用物联网、视频巡航、深度学习、3S技术、无人机、无线通讯等信息技术手段，开展蜂业
+        生产安全产业链智能管控技术研究，研制了智能蜂场、蜂产品质量追溯、智能蜂箱、蜂业知识服务、蜂产业大数据等系列软硬产品，携手共建智能化、生态化、无人化的现代蜂业经营管理模式。"
+        headline="SERVICE INTRODUCTION"
+        title="服务简介"
+
+    >
+      <!-- 图片作为背景（非内容） -->
+    </UPageHero>
+  </div>
+</template>
+
+<style scoped>
+/* 深度选择器确保样式穿透 */
+:deep(.u-page-hero .title),
+:deep(.u-page-hero .headline),
+:deep(.u-page-hero .description) {
+  color: white !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 可选：增加文字阴影提升可读性 */
+}
+
+/* 关键CSS */
+.hero-fullscreen {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.hero-fullscreen::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/img/index/service.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: -1; /* 确保内容在前景 */
+}
+
+/* 适配UPageHero内部样式 */
+.hero-fullscreen :deep(.u-page-hero) {
+  background-color: transparent; /* 移除组件默认背景 */
+  height: 100%;
+}
+</style>

app/pages/index/index.vue

@@ -5,6 +5,8 @@
 <template>
   <UPage>
     <LandingHero/>
+    <LandingD3_INTELLIGENT_APIARY/>
+    <LandingSERVICEINTRODUCTION/>
   </UPage>
 </template>