首页

app/components/AppFooter.vue

@@ -1,24 +1,67 @@
-<script setup lang="ts">
+<script lang="ts" setup>
-const { footer } = useAppConfig()
+import type {NavigationMenuItem} from '@nuxt/ui'
+
+const items: NavigationMenuItem[] = [
+  {
+    label: '电话:15280659990',
+
+
+  },
+  {
+    label: '邮箱:564737095@qq.com',
+
+
+  },
+  {
+    label: '地址:福建省福鼎市太姥山镇海埕路13号',
+    // to: 'https://github.com/nuxt/ui/releases',
+    // target: '_blank'
+  }
+]
 </script>
 
 <template>
-  <UFooter
+  <div
-    class="z-10 bg-default"
+      :style="{ backgroundImage: `url('/img/index/footer_bg.png')` ,    }"
-    :ui="{ left: 'text-muted text-xs' }"
+      class="bg-cover bg-no-repeat bg-center w-full mt-5">
-  >
+    <UFooter>
-    <template #left>
+      <template #left>
-      {{ footer.credits }}
+        <p class="text-bold text-sm">Copyright © 闽ICP备2023022186号-2</p>
-    </template>
+      </template>
 
-    <template #right>
+      <UNavigationMenu
-      <template v-if="footer?.links">
+          :items="items" :ui="{
+    link: 'text-gray-800 ', // 默认/悬停颜色
+
+  }" variant="link"/>
+
+      <template #right>
+        <!--        <UButton-->
+        <!--            aria-label="Discord"-->
+        <!--            color="neutral"-->
+        <!--            icon="i-simple-icons-discord"-->
+        <!--            target="_blank"-->
+        <!--            to="https://go.nuxt.com/discord"-->
+        <!--            variant="ghost"-->
+        <!--        />-->
         <UButton
-          v-for="(link, index) of footer?.links"
+
-          :key="index"
+            color="neutral"
-          v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
+            icon="simple-icons-alibabadotcom"
+            target="_blank"
+            to="https://chuangtewulian.1688.com/page/index.html"
+
+        />
+        <UButton
+
+            color="neutral"
+            icon="i-simple-icons-tiktok"
+            target="_blank"
+            to="https://www.douyin.com/user/MS4wLjABAAAAdPkGyADnJFLrZBwDM9U7faUJs-wmmyEU9L34SS0CKhs"
+
         />
       </template>
-    </template>
+    </UFooter>
-  </UFooter>
+  </div>
+
 </template>

app/components/ScrollToTop.vue

@@ -0,0 +1,107 @@
+<!-- components/ScrollToTop.vue -->
+<template>
+  <UButton
+      v-show="isVisible"
+      :aria-label="ariaLabel"
+      :class="buttonClasses"
+
+      :icon="icon"
+
+      :variant="variant"
+      @click="handleClick"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+  >
+    <!-- 插槽支持自定义内容 -->
+    <slot>
+      <span v-if="showText && isHovered" class="ml-2 text-xs font-medium">
+        {{ text }}
+      </span>
+    </slot>
+  </UButton>
+</template>
+
+<script lang="ts" setup>
+import {useThrottleFn} from '@vueuse/core'
+
+interface Props {
+  threshold?: number
+  position?: 'br' | 'bl' | 'tr' | 'tl' // bottom-right, bottom-left, etc.
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'primary' | 'green' | 'blue' | 'gray'
+  variant?: 'solid' | 'outline' | 'soft'
+  icon?: string
+  showText?: boolean
+  text?: string
+  ariaLabel?: string
+  smoothScroll?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  threshold: 300,
+  position: 'br',
+  size: 'lg',
+  color: 'green',
+  variant: 'solid',
+  icon: 'i-heroicons-arrow-up',
+  showText: false,
+  text: '回到顶部',
+  ariaLabel: '回到页面顶部',
+  smoothScroll: true
+})
+
+const isVisible = ref(false)
+const isHovered = ref(false)
+
+// 计算位置类名
+const positionClasses = computed(() => {
+  const map = {
+    br: 'bottom-6 right-6',
+    bl: 'bottom-6 left-6',
+    tr: 'top-6 right-6',
+    tl: 'top-6 left-6'
+  }
+  return map[props.position] || map.br
+})
+
+// 计算尺寸类名
+
+
+const buttonClasses = computed(() => [
+  'fixed z-50 rounded-full transition-all duration-300 ease-in-out',
+  positionClasses.value,
+  {
+    'opacity-100': isVisible.value,
+    'opacity-0': !isVisible.value,
+    'hover:scale-110': isVisible.value,
+    'px-4': props.showText && isHovered.value
+  }
+])
+
+const handleScroll = useThrottleFn(() => {
+  isVisible.value = window.scrollY > props.threshold
+}, 100)
+
+const handleClick = () => {
+  if (props.smoothScroll) {
+    window.scrollTo({top: 0, behavior: 'smooth'})
+  } else {
+    window.scrollTo(0, 0)
+  }
+
+  // 触发自定义事件
+  emit('click')
+}
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, {passive: true})
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>

app/components/landing/CaseFacts.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+const cardItems = ref([
+  {
+    title: "蜜蜂大世界",
+    description: "北京最大的蜜蜂文化产业园，世界蜜蜂日承办点",
+    image: "/img/index/c1.png"
+  },
+  {
+    title: "竹山县智慧蜂场",
+    description: "受国家烟草专卖局和竹山县政府委托建立的高标准示范蜂场",
+    image: "/img/index/c2.png"
+  },
+  {
+    title: "雪慧峰业研究",
+    description: "蜂产品质量安全追溯系统的研究与应用探索",
+    image: "/img/index/c3.png"
+  },
+  {
+    title: "智能蜂箱监测",
+    description: "中国农业科学院蜜蜂研究所研发，已在全国多地示范应用",
+    image: "/img/index/c4.png"
+  }
+])
+</script>
+
+<template>
+  <div
+      :style="{ backgroundImage: `url('/img/index/3d_bg.png')` ,    }"
+      class="bg-cover bg-no-repeat bg-center w-full ">
+    <TitleSection
+        subtitle="CASE FACTS"
+        title="案例实况"
+    />
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 px-40">
+      <UPageCard
+          v-for="(item, index) in cardItems"
+          :key="index"
+          :description="item.description"
+          :title="item.title"
+          :ui="{
+                title: 'font-semibold text-lg',
+                description: 'text-gray-600 leading-relaxed',
+
+              }"
+          reverse
+      >
+        <img
+            :alt="item.title"
+            :src="item.image"
+            class="w-full"
+        >
+      </UPageCard>
+    </div>
+
+
+  </div>
+</template>

app/components/landing/D3_INTELLIGENT_APIARY.vue

@@ -3,9 +3,14 @@
 </script>
 
 <template>
-  <TitleSection
+  <div
-      subtitle="3D INTELLIGENT APIARY"
+      :style="{ backgroundImage: `url('/img/index/3d_bg.png')` ,    }"
-      title="3D智慧蜂场"
+      class="bg-cover bg-no-repeat bg-center w-full ">
-  />
+    <TitleSection
-  <img alt="" class="w-full  lg:px-40" src="/img/index/model2.b444287.gif">
+        subtitle="3D INTELLIGENT APIARY"
+        title="3D智慧蜂场"
+    />
+    <img alt="" class="w-full  lg:px-40 " src="/img/index/model2.b444287.gif">
+  </div>
+
 </template>

app/layouts/default.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <AppHeader />
+    <AppHeader/>
-    <slot />
+    <slot/>
-<!--    <AppFooter />-->
+    <AppFooter/>
   </div>
 </template>
 

app/pages/index/index.vue

@@ -9,6 +9,13 @@
     <LandingSERVICEINTRODUCTION/>
     <LandingOURSTRENGTHS/>
     <LandingPRODUCT_INTRODUCTION/>
+    <LandingCaseFacts/>
+    <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50">
+      <button class="bg-green-500 text-white px-4 py-3 rounded-l-lg shadow-lg writing-mode-vertical">
+        <span class="font-medium">联系客服</span>
+      </button>
+    </div>
+
   </UPage>
 </template>
 

package.json

@@ -13,6 +13,7 @@
     "@nuxt/eslint": "1.9.0",
     "@nuxt/image": "1.11.0",
     "@nuxt/ui": "4.0.1",
+    "@vueuse/core": "^14.0.0",
     "eslint": "^9.38.0",
     "nuxt": "^4.1.3",
     "typescript": "^5.9.3",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@nuxt/ui':
         specifier: 4.0.1
         version: 4.0.1(@babel/parser@7.28.4)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.1)(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.11(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))(zod@4.1.12)
+      '@vueuse/core':
+        specifier: ^14.0.0
+        version: 14.0.0(vue@3.5.22(typescript@5.9.3))
       eslint:
         specifier: ^9.38.0
         version: 9.38.0(jiti@2.6.1)
@@ -1696,6 +1699,11 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@vueuse/core@14.0.0':
+    resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/integrations@13.9.0':
     resolution: {integrity: sha512-SDobKBbPIOe0cVL7QxMzGkuUGHvWTdihi9zOrrWaWUgFKe15cwEcwfWmgrcNzjT6kHnNmWuTajPHoIzUjYNYYQ==}
     peerDependencies:
@@ -1747,6 +1755,9 @@ packages:
   '@vueuse/metadata@13.9.0':
     resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
 
+  '@vueuse/metadata@14.0.0':
+    resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==}
+
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
@@ -1758,6 +1769,11 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@vueuse/shared@14.0.0':
+    resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==}
+    peerDependencies:
+      vue: ^3.5.0
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -6686,6 +6702,13 @@ snapshots:
       '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
 
+  '@vueuse/core@14.0.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.0.0
+      '@vueuse/shared': 14.0.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vueuse/integrations@13.9.0(change-case@5.4.4)(fuse.js@7.1.0)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -6701,6 +6724,8 @@ snapshots:
 
   '@vueuse/metadata@13.9.0': {}
 
+  '@vueuse/metadata@14.0.0': {}
+
   '@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
@@ -6718,6 +6743,10 @@ snapshots:
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
 
+  '@vueuse/shared@14.0.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0: