From 5a0497a6fe3e3a49cd61bfa68c96bab51c2181f0 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 23 Oct 2025 09:13:46 +0800
Subject: [PATCH] single serviceIcon

---
 .../landing/SERVICE_INTRODUCTION.vue          |  23 +-
 app/components/landing/SmartApiaryCard.vue    | 261 ++++++------------
 public/img/index/s1.svg                       |   1 +
 3 files changed, 86 insertions(+), 199 deletions(-)
 create mode 100644 public/img/index/s1.svg

diff --git a/app/components/landing/SERVICE_INTRODUCTION.vue b/app/components/landing/SERVICE_INTRODUCTION.vue
index 71143e6..b90e658 100644
--- a/app/components/landing/SERVICE_INTRODUCTION.vue
+++ b/app/components/landing/SERVICE_INTRODUCTION.vue
@@ -1,16 +1,5 @@
 <script setup>
 import SmartApiaryCard from "~/components/landing/SmartApiaryCard.vue";
-
-defineProps({
-  title: {
-    type: String,
-    default: '智慧蜂场建设'
-  },
-  description: {
-    type: String,
-    default: '提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警'
-  }
-})
 </script>
 
 <template>
@@ -32,11 +21,15 @@ defineProps({
       <!-- 图片作为背景（非内容） -->
     </UPageHero>
 
+    <div class="w-45 h-45">
+      <SmartApiaryCard
+          description="提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务，实现智能化养殖，提高管理效率，节省成本。"
+          icon-src="/img/index/s1.svg"
+          link-url="/product/smart-farm"
+          title="智慧蜂场建设"
+      />
+    </div>
 
-    <SmartApiaryCard
-        :description="description"
-        :title="title"
-    />
 
   </div>
 </template>
diff --git a/app/components/landing/SmartApiaryCard.vue b/app/components/landing/SmartApiaryCard.vue
index b807232..2013e2e 100644
--- a/app/components/landing/SmartApiaryCard.vue
+++ b/app/components/landing/SmartApiaryCard.vue
@@ -1,208 +1,101 @@
-<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="relative w-full h-full perspective-1000">
+    <div
+        :class="{ 'rotate-y-180': isFlipped }"
+        class="relative w-full h-full transition-transform duration-600 transform-style-preserve-3d"
+        @mouseenter="isFlipped = true"
+        @mouseleave="isFlipped = false"
+    >
+      <!-- 正面内容 -->
+      <div
+          class="absolute inset-0 w-full h-full bg-white rounded-lg p-5 flex flex-col justify-center items-center backface-hidden">
+        <div class="h-16 flex justify-center items-center"/>
+        <img :src="iconSrc" alt="" class="w-2/3">
+        <p class="text-black text-xl mt-2.5 font-medium">
+          {{ title }}
+        </p>
+      </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
+          class="absolute inset-0 w-full h-full bg-gradient-to-br from-teal-600 to-teal-800 rounded-lg p-5 backface-hidden transform rotate-y-180">
+        <NuxtLink
+            :to="linkUrl"
+            class="block h-full no-underline text-inherit"
+        >
+          <div class="text-left">
+            <h5 class="text-white text-xl font-bold m-0">{{ title }}</h5>
+            <div class="h-0.5 bg-white w-10 my-4"/>
+          </div>
+          <div class="text-white text-sm leading-relaxed text-left opacity-80 line-clamp-3">
+            {{ description }}
+          </div>
+          <div
+              class="text-white text-sm text-right w-full mt-1 opacity-90 transition-opacity duration-300 group-hover:opacity-100 group-hover:underline">
+            查看详情&nbsp;&nbsp;&gt;
+          </div>
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '智慧蜂设'
+  },
+  description: {
+    type: String,
+    default: '提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务，实现智能化养殖，提高管理效率，节省成本。设备先进，质量和服务双保障。'
+  },
+  iconSrc: {
+    type: String,
+    default: '/img/index/s1.svg'
+  },
+  linkUrl: {
+    type: String,
+    default: '/product/beenFactory'
+  }
+})
+
+const isFlipped = ref(false)
+</script>
+
 <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;
+.perspective-1000 {
+  perspective: 1000px;
 }
 
-.smart-apiary-card:hover {
-  transform: translateY(-8px) scale(1.02);
-  box-shadow: 0 20px 40px rgba(13, 148, 136, 0.4);
+.transform-style-preserve-3d {
+  transform-style: preserve-3d;
 }
 
-/* 背景模糊效果 */
-.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;
+.rotate-y-180 {
+  transform: rotateY(180deg);
 }
 
-/* 齿轮图标样式 */
-.card-icon {
-  position: absolute;
-  top: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  z-index: 2;
+.backface-hidden {
+  backface-visibility: hidden;
 }
 
-.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);
+.rotate-y-180 {
+  transform: rotateY(180deg);
 }
 
-.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;
+  .perspective-1000 {
+    perspective: none;
   }
 
-  .card-content {
-    padding: 20px;
+  .transform-style-preserve-3d {
+    transform-style: flat;
   }
 
-  .card-title {
-    font-size: 20px;
+  .rotate-y-180 {
+    transform: none;
   }
 }
 </style>
\ No newline at end of file
diff --git a/public/img/index/s1.svg b/public/img/index/s1.svg
new file mode 100644
index 0000000..2ef48bb
--- /dev/null
+++ b/public/img/index/s1.svg
@@ -0,0 +1 @@
+<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="66px" height="55px">
<path fill-rule="evenodd"  fill="rgb(0, 166, 97)"
 d="M64.174,14.610 L62.607,14.561 C62.206,15.609 61.600,16.586 60.819,17.423 L61.576,18.830 C61.959,19.543 61.693,20.432 60.980,20.816 L58.491,22.158 C57.778,22.542 56.890,22.275 56.506,21.562 L55.749,20.155 C54.621,20.346 53.480,20.312 52.388,20.076 L51.561,21.414 C51.136,22.102 50.233,22.316 49.545,21.890 L47.134,20.399 C46.448,19.975 46.236,19.074 46.661,18.387 L47.444,17.120 C47.044,16.653 46.687,16.129 46.385,15.568 C46.121,15.077 45.909,14.575 45.749,14.061 L44.314,14.019 C43.505,13.995 42.869,13.319 42.894,12.510 L42.979,9.683 C43.003,8.875 43.677,8.239 44.485,8.262 L45.837,8.302 C46.242,7.168 46.876,6.119 47.713,5.217 L47.084,4.048 C46.701,3.335 46.967,2.447 47.679,2.063 L50.171,0.720 C50.883,0.337 51.770,0.603 52.153,1.315 L52.783,2.485 C53.996,2.281 55.220,2.329 56.392,2.622 L57.105,1.466 C57.531,0.775 58.435,0.560 59.125,0.987 L61.520,2.465 C62.211,2.892 62.425,3.799 61.997,4.490 L61.241,5.713 C61.581,6.129 61.883,6.582 62.147,7.072 C62.449,7.634 62.686,8.214 62.855,8.806 L64.346,8.850 C65.157,8.874 65.795,9.551 65.771,10.362 L65.688,13.184 C65.664,13.996 64.986,14.635 64.174,14.610 ZM58.061,10.874 C58.011,10.409 57.869,9.944 57.633,9.506 C57.456,9.176 57.237,8.878 56.987,8.630 C56.594,8.225 56.120,7.931 55.610,7.740 C54.880,7.467 54.079,7.416 53.302,7.626 C53.012,7.691 52.724,7.804 52.453,7.950 C52.182,8.096 51.929,8.275 51.716,8.481 C51.112,9.015 50.714,9.712 50.540,10.472 C50.412,11.007 50.406,11.568 50.528,12.119 C50.597,12.465 50.722,12.805 50.900,13.134 C51.132,13.567 51.442,13.941 51.801,14.239 C52.135,14.534 52.518,14.752 52.922,14.900 C53.758,15.216 54.699,15.233 55.574,14.911 C55.743,14.854 55.911,14.780 56.079,14.690 C56.246,14.599 56.401,14.499 56.545,14.380 C57.298,13.833 57.795,13.040 57.992,12.168 C58.091,11.749 58.113,11.312 58.061,10.874 ZM43.075,22.247 L40.503,23.728 C40.715,24.819 40.821,25.939 40.821,27.090 C40.821,28.408 40.685,29.695 40.413,30.937 L43.081,32.479 C44.532,33.317 45.030,35.174 44.192,36.626 L41.281,41.676 C40.442,43.130 38.584,43.627 37.133,42.785 L34.330,41.160 C32.575,42.674 30.517,43.855 28.277,44.613 L28.277,47.915 C28.277,49.587 26.923,50.943 25.252,50.943 L19.410,50.943 C17.739,50.943 16.384,49.587 16.384,47.915 L16.384,44.613 C14.145,43.855 12.102,42.674 10.347,41.175 L7.536,42.798 C6.088,43.633 4.238,43.136 3.404,41.688 L0.477,36.612 C-0.356,35.168 0.140,33.322 1.583,32.489 L4.250,30.952 C3.977,29.711 3.841,28.408 3.841,27.090 C3.841,25.939 3.947,24.819 4.159,23.728 L1.590,22.244 C0.143,21.408 -0.353,19.556 0.483,18.108 L3.404,13.049 C4.239,11.603 6.087,11.107 7.533,11.942 L9.954,13.339 C11.800,11.673 13.979,10.386 16.384,9.568 L16.384,6.824 C16.384,5.153 17.738,3.798 19.408,3.798 L25.255,3.798 C26.924,3.798 28.277,5.153 28.277,6.824 L28.277,9.568 C30.683,10.386 32.862,11.673 34.708,13.354 L37.136,11.950 C38.586,11.111 40.441,11.608 41.280,13.060 L44.188,18.096 C45.027,19.550 44.529,21.409 43.075,22.247 ZM29.912,24.864 C29.594,23.743 29.019,22.744 28.277,21.896 C27.218,20.684 25.811,19.806 24.192,19.427 C23.602,19.261 22.967,19.185 22.331,19.185 C21.696,19.185 21.060,19.261 20.470,19.427 C18.851,19.806 17.444,20.684 16.384,21.896 C15.628,22.744 15.068,23.759 14.750,24.879 C14.539,25.576 14.433,26.318 14.433,27.090 C14.433,28.105 14.629,29.090 14.993,29.983 C15.310,30.846 15.795,31.619 16.384,32.285 C17.595,33.678 19.290,34.632 21.196,34.905 C21.559,34.966 21.938,34.996 22.331,34.996 C22.724,34.996 23.103,34.966 23.481,34.890 C25.388,34.632 27.067,33.678 28.277,32.285 C28.868,31.619 29.337,30.846 29.670,29.998 C30.033,29.105 30.229,28.120 30.229,27.090 C30.229,26.318 30.124,25.561 29.912,24.864 ZM44.485,40.228 L45.837,40.268 C46.242,39.133 46.876,38.084 47.713,37.183 L47.084,36.013 C46.701,35.301 46.967,34.412 47.679,34.029 L50.171,32.686 C50.883,32.302 51.770,32.569 52.153,33.281 L52.783,34.451 C53.996,34.247 55.220,34.295 56.392,34.587 L57.105,33.431 C57.531,32.741 58.435,32.526 59.125,32.952 L61.520,34.431 C62.211,34.858 62.425,35.765 61.997,36.456 L61.241,37.678 C61.581,38.094 61.883,38.547 62.147,39.038 C62.449,39.600 62.686,40.180 62.855,40.772 L64.346,40.816 C65.157,40.840 65.795,41.517 65.771,42.328 L65.688,45.150 C65.664,45.962 64.986,46.600 64.174,46.575 L62.607,46.526 C62.206,47.575 61.600,48.551 60.819,49.388 L61.576,50.796 C61.959,51.509 61.693,52.398 60.980,52.782 L58.491,54.124 C57.778,54.508 56.890,54.241 56.506,53.528 L55.749,52.120 C54.621,52.312 53.480,52.278 52.388,52.042 L51.561,53.380 C51.136,54.068 50.233,54.281 49.545,53.856 L47.134,52.364 C46.448,51.940 46.236,51.039 46.661,50.353 L47.444,49.085 C47.044,48.619 46.687,48.095 46.385,47.533 C46.121,47.042 45.909,46.540 45.749,46.027 L44.314,45.985 C43.505,45.961 42.869,45.285 42.894,44.476 L42.979,41.649 C43.003,40.840 43.677,40.205 44.485,40.228 ZM50.528,44.085 C50.597,44.430 50.722,44.771 50.900,45.100 C51.132,45.533 51.442,45.907 51.801,46.204 C52.135,46.499 52.518,46.717 52.922,46.866 C53.758,47.182 54.699,47.199 55.574,46.877 C55.743,46.820 55.911,46.746 56.079,46.655 C56.246,46.565 56.401,46.465 56.545,46.346 C57.298,45.798 57.795,45.006 57.992,44.134 C58.091,43.714 58.113,43.277 58.061,42.839 C58.011,42.375 57.869,41.910 57.633,41.471 C57.456,41.142 57.237,40.843 56.987,40.595 C56.594,40.190 56.120,39.897 55.610,39.706 C54.880,39.433 54.079,39.381 53.302,39.592 C53.012,39.656 52.724,39.770 52.453,39.916 C52.182,40.062 51.929,40.240 51.716,40.447 C51.112,40.980 50.714,41.678 50.540,42.438 C50.412,42.973 50.406,43.534 50.528,44.085 Z"/>
</svg>
\ No newline at end of file