From 1842b49fe2b2842b623768e72716dad6ea98f7ef Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 22 Oct 2025 18:02:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=AE=80=E4=BB=8B=20?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landing/D3_INTELLIGENT_APIARY.vue         |  33 +--
 app/components/landing/Hero.vue               |  55 +----
 .../landing/SERVICE_INTRODUCTION.vue          |  20 +-
 app/components/landing/SmartApiaryCard.vue    | 208 ++++++++++++++++++
 4 files changed, 230 insertions(+), 86 deletions(-)
 create mode 100644 app/components/landing/SmartApiaryCard.vue

diff --git a/app/components/landing/D3_INTELLIGENT_APIARY.vue b/app/components/landing/D3_INTELLIGENT_APIARY.vue
index 7d0f6de..66a7df3 100644
--- a/app/components/landing/D3_INTELLIGENT_APIARY.vue
+++ b/app/components/landing/D3_INTELLIGENT_APIARY.vue
@@ -8,38 +8,7 @@
       description="3D INTELLIGENT APIARY"
       title="3D智慧蜂场"
   />
-
-  <div class="hero-fullscreen"/>
+  <img alt="" class="w-max" src="/img/index/model2.b444287.gif">
 
 
 </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>
\ No newline at end of file
diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 0e0e2f1..caef713 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -1,57 +1,6 @@
-<script lang="ts" setup>
-// const links = ref([
-//   {
-//     label: 'Get started',
-//     to: '/docs/getting-started',
-//     icon: 'i-lucide-square-play'
-//   },
-//   {
-//     label: 'Learn more',
-//     to: '/docs/getting-started/theme/design-system',
-//     color: 'neutral',
-//     variant: 'subtle',
-//     trailingIcon: 'i-lucide-arrow-right'
-//   }
-// ])
-</script>
-
 <template>
-  <!-- 外层容器设置为全屏 -->
-  <div class="hero-fullscreen">
-    <!--    <UPageHero-->
-    <!--        :links="links"-->
-    <!--        description="A Nuxt/Vue-integrated UI library..."-->
-    <!--        headline="New release"-->
-    <!--        orientation="horizontal"-->
-    <!--        title="Ultimate Vue UI library"-->
-    <!--    >-->
-    <!--      &lt;!&ndash; 图片作为背景（非内容） &ndash;&gt;-->
-    <!--    </UPageHero>-->
-  </div>
+
+  <img alt="" class="w-max" src="/img/img_1.png">
 </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/img_1.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  z-index: -1; /* 确保内容在前景 */
-}
-
-
-</style>
\ No newline at end of file
diff --git a/app/components/landing/SERVICE_INTRODUCTION.vue b/app/components/landing/SERVICE_INTRODUCTION.vue
index 24d24a7..71143e6 100644
--- a/app/components/landing/SERVICE_INTRODUCTION.vue
+++ b/app/components/landing/SERVICE_INTRODUCTION.vue
@@ -1,5 +1,16 @@
-<script lang="ts" setup>
+<script setup>
+import SmartApiaryCard from "~/components/landing/SmartApiaryCard.vue";
 
+defineProps({
+  title: {
+    type: String,
+    default: '智慧蜂场建设'
+  },
+  description: {
+    type: String,
+    default: '提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警'
+  }
+})
 </script>
 
 <template>
@@ -20,6 +31,13 @@
     >
       <!-- 图片作为背景（非内容） -->
     </UPageHero>
+
+
+    <SmartApiaryCard
+        :description="description"
+        :title="title"
+    />
+
   </div>
 </template>
 
diff --git a/app/components/landing/SmartApiaryCard.vue b/app/components/landing/SmartApiaryCard.vue
new file mode 100644
index 0000000..b807232
--- /dev/null
+++ b/app/components/landing/SmartApiaryCard.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="smart-apiary-card">
+    <div class="card-icon">
+      <!-- 齿轮图标组 -->
+      <div class="gear large"/>
+      <div class="gear medium"/>
+      <div class="gear small"/>
+    </div>
+
+    <div class="card-content">
+      <h3 class="card-title">智慧蜂场建设</h3>
+      <div class="divider"/>
+      <p class="card-description">
+        提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警
+      </p>
+      <button class="view-details-btn">
+        查看详情 &gt;
+      </button>
+    </div>
+  </div>
+</template>
+<style scoped>
+/* 卡片容器 */
+.smart-apiary-card {
+  position: relative;
+  width: 320px;
+  height: 380px;
+  background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.3);
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  cursor: pointer;
+}
+
+.smart-apiary-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 40px rgba(13, 148, 136, 0.4);
+}
+
+/* 背景模糊效果 */
+.smart-apiary-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><rect width="100" height="100" fill="%230d9488" filter="url(%23blur)"/></svg>');
+  opacity: 0.1;
+}
+
+/* 齿轮图标样式 */
+.card-icon {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  z-index: 2;
+}
+
+.gear {
+  background: conic-gradient(from 0deg, #ffffff 0%, #e6fffa 25%, #ffffff 50%, #e6fffa 75%, #ffffff 100%);
+  border-radius: 50%;
+  animation: rotate 8s linear infinite;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.gear.large {
+  width: 60px;
+  height: 60px;
+  animation-duration: 12s;
+}
+
+.gear.medium {
+  width: 45px;
+  height: 45px;
+  margin-top: 15px;
+  animation-duration: 8s;
+  animation-direction: reverse;
+}
+
+.gear.small {
+  width: 30px;
+  height: 30px;
+  margin-top: 25px;
+  animation-duration: 6s;
+}
+
+/* 齿轮齿效果 */
+.gear::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+  height: 70%;
+  background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.gear::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 50% 50%, transparent 30%, #ffffff 30%, #ffffff 35%, transparent 35%),
+  repeating-conic-gradient(#ffffff 0% 10%, transparent 10% 20%);
+}
+
+/* 内容区域 */
+.card-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 30px 25px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px 20px 20px 20px;
+  transform: translateY(70%);
+  transition: transform 0.4s ease;
+}
+
+.smart-apiary-card:hover .card-content {
+  transform: translateY(0);
+}
+
+.card-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #115e59;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.divider {
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #0d9488, #34d399);
+  margin: 0 auto 15px;
+  border-radius: 2px;
+}
+
+.card-description {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #4b5563;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.view-details-btn {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(90deg, #0d9488, #10b981);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.view-details-btn:hover {
+  background: linear-gradient(90deg, #115e59, #0d9488);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(13, 148, 136, 0.3);
+}
+
+/* 动画 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .smart-apiary-card {
+    width: 280px;
+    height: 350px;
+  }
+
+  .card-content {
+    padding: 20px;
+  }
+
+  .card-title {
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file