1 week ago · d82f4143da
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,11 @@
 
				     <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				     <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				     <link rel="icon" href="<%= BASE_URL %>logo.png">
			
 
				-    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
			
 
				+    <title>飞鸟有味</title>
			
 
				+    <meta name="description" content="在低空AI+技术加持下，中山大学飞鸟智慧农业团队创建了种植标准化、标准数字化、产品优质化的革新式现代农业技术，建立了种植全过程溯源体系，通过“3好6维”认证，确保每一颗荔枝吃得安心，吃得健康。">
			
 
				+    <meta name="keywords" content="飞鸟有味,智慧农业,溯源认证">
			
 
				+    <meta name="robots" content="index,follow">
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
--- a/src/assets/font/jiangxizhuokai.ttf
+++ b/src/assets/font/jiangxizhuokai.ttf
--- a/src/assets/images/content/card1.png
+++ b/src/assets/images/content/card1.png
--- a/src/assets/images/content/card2.png
+++ b/src/assets/images/content/card2.png
--- a/src/assets/images/content/card3.png
+++ b/src/assets/images/content/card3.png
--- a/src/assets/images/content/certification.png
+++ b/src/assets/images/content/certification.png
--- a/src/assets/images/content/certification2.png
+++ b/src/assets/images/content/certification2.png
--- a/src/assets/images/content/certification3.png
+++ b/src/assets/images/content/certification3.png
--- a/src/assets/images/content/certification4.png
+++ b/src/assets/images/content/certification4.png
--- a/src/assets/images/content/certification5.png
+++ b/src/assets/images/content/certification5.png
--- a/src/assets/images/content/defend1.png
+++ b/src/assets/images/content/defend1.png
--- a/src/assets/images/content/defend2.png
+++ b/src/assets/images/content/defend2.png
--- a/src/assets/images/content/honor.png
+++ b/src/assets/images/content/honor.png
--- a/src/assets/images/content/league1.png
+++ b/src/assets/images/content/league1.png
--- a/src/assets/images/content/league2.png
+++ b/src/assets/images/content/league2.png
--- a/src/assets/images/content/league3.png
+++ b/src/assets/images/content/league3.png
--- a/src/assets/images/content/lichi.png
+++ b/src/assets/images/content/lichi.png
--- a/src/assets/images/content/lichi2.png
+++ b/src/assets/images/content/lichi2.png
--- a/src/assets/images/content/lichi3.png
+++ b/src/assets/images/content/lichi3.png
--- a/src/assets/images/content/lichi4.png
+++ b/src/assets/images/content/lichi4.png
--- a/src/assets/images/content/number.png
+++ b/src/assets/images/content/number.png
--- a/src/assets/images/content/number2.png
+++ b/src/assets/images/content/number2.png
--- a/src/assets/images/content/source1.png
+++ b/src/assets/images/content/source1.png
--- a/src/assets/images/content/source2.png
+++ b/src/assets/images/content/source2.png
--- a/src/assets/images/content/source3.png
+++ b/src/assets/images/content/source3.png
--- a/src/assets/images/content/sun.png
+++ b/src/assets/images/content/sun.png
--- a/src/assets/images/content/trace1.png
+++ b/src/assets/images/content/trace1.png
--- a/src/assets/images/content/trace2.png
+++ b/src/assets/images/content/trace2.png
--- a/src/assets/images/content/trace3.png
+++ b/src/assets/images/content/trace3.png
--- a/src/assets/images/home/banner.png
+++ b/src/assets/images/home/banner.png
--- a/src/assets/images/home/banner1.png
+++ b/src/assets/images/home/banner1.png
--- a/src/assets/images/home/banner2.png
+++ b/src/assets/images/home/banner2.png
--- a/src/assets/images/home/bird.png
+++ b/src/assets/images/home/bird.png
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,29 +1,23 @@
 
				 <template>
			
 
				-  <div class="header">
			
 
				-    <div class="bg"></div>
			
 
				-    <div class="logo center">
			
 
				-      <img src="@/assets/images/delicious/logo.png" alt="" />
			
 
				-      <span>飞鸟有味</span>
			
 
				+    <div class="header">
			
 
				+        <div class="logo center">
			
 
				+            <img src="@/assets/logo.png" alt="" />
			
 
				+            <span>飞鸟有味</span>
			
 
				+        </div>
			
 
				+        <div class="center-menu">
			
 
				+            <div class="tabs center">
			
 
				+                <div
			
 
				+                    :class="['tab-item center', { active: index === active }]"
			
 
				+                    @click="handleActive(item, index)"
			
 
				+                    v-for="(item, index) in tabs"
			
 
				+                    :key="index"
			
 
				+                >
			
 
				+                    {{ item.name }}
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div class="header-btn">我要认证</div>
			
 
				     </div>
			
 
				-    <div class="tabs center">
			
 
				-      <div
			
 
				-        :class="['tab-item center', { active: index === active }]"
			
 
				-        @click="handleActive(item,index)"
			
 
				-        v-for="(item, index) in tabs"
			
 
				-        :key="index"
			
 
				-      >
			
 
				-        {{ item.name }}
			
 
				-      </div>
			
 
				-    </div>
			
 
				-    <div class="search">
			
 
				-      <el-input
			
 
				-        v-model="input"
			
 
				-        prefix-icon="Search"
			
 
				-        style="width: 340px"
			
 
				-        placeholder="搜索水果名称/地区"
			
 
				-      />
			
 
				-    </div>
			
 
				-  </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup>
			
@@ -31,33 +25,33 @@ import { ref, defineEmits } from "vue";
 
				 
			
 
				 const active = ref(0);
			
 
				 const tabs = [
			
 
				-  {
			
 
				-    name: "首页",
			
 
				-    component: "Home",
			
 
				-  },
			
 
				-  {
			
 
				-    name: "有味介绍",
			
 
				-    component: "Exponent",
			
 
				-  },
			
 
				-  {
			
 
				-    name: "有味指数",
			
 
				-    component: "Exponent",
			
 
				-  },
			
 
				-  {
			
 
				-    name: "地理风物",
			
 
				-    component: "Exponent",
			
 
				-  },
			
 
				-  {
			
 
				-    name: "关于我们",
			
 
				-    component: "Exponent",
			
 
				-  },
			
 
				+    {
			
 
				+        name: "首页",
			
 
				+        component: "Home",
			
 
				+    },
			
 
				+    {
			
 
				+        name: "飞鸟三味",
			
 
				+        component: "ThreeFlavors",
			
 
				+    },
			
 
				+    {
			
 
				+        name: "3体6维认证",
			
 
				+        component: "Certification",
			
 
				+    },
			
 
				+    {
			
 
				+        name: "飞鸟溯源",
			
 
				+        component: "TraceSource",
			
 
				+    },
			
 
				+    {
			
 
				+        name: "生态守护者联盟",
			
 
				+        component: "DefendLeague",
			
 
				+    },
			
 
				 ];
			
 
				 
			
 
				 const emit = defineEmits(["handleActive"]);
			
 
				 
			
 
				-const handleActive = (value,index) => {
			
 
				-  active.value = index;
			
 
				-  emit("handleActive", value.component);
			
 
				+const handleActive = (value, index) => {
			
 
				+    active.value = index;
			
 
				+    emit("handleActive", value.component);
			
 
				 };
			
 
				 
			
 
				 const input = ref("");
			
@@ -65,70 +59,102 @@ const input = ref("");
 
				 
			
 
				 <style lang="scss" scoped>
			
 
				 .header {
			
 
				-  width: 100%;
			
 
				-  height: 70px;
			
 
				-  box-sizing: border-box;
			
 
				-  background: linear-gradient(90deg, #eb8e8e 0%, #ffeeef 80%);
			
 
				-  display: flex;
			
 
				-  align-items: center;
			
 
				-  color: #fff;
			
 
				-  position: relative;
			
 
				-  .center {
			
 
				+    width: 100%;
			
 
				+    height: 70px;
			
 
				+    box-sizing: border-box;
			
 
				+    background: rgba(0, 0, 0, 0.34);
			
 
				+    backdrop-filter: blur(20px);
			
 
				     display: flex;
			
 
				     align-items: center;
			
 
				-  }
			
 
				-  .logo {
			
 
				-    font-size: 30px;
			
 
				-    font-weight: 400;
			
 
				-    letter-spacing: 2px;
			
 
				-    position: relative;
			
 
				+    color: #fff;
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				     z-index: 2;
			
 
				-    margin-right: 70px;
			
 
				-    img {
			
 
				-      width: 30px;
			
 
				-      height: 30px;
			
 
				-      margin: 0 20px 0 30px;
			
 
				+    .center {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				     }
			
 
				-    span {
			
 
				-      font-family: "PangMenZhengDao";
			
 
				+    .logo {
			
 
				+        font-size: 30px;
			
 
				+        font-weight: 400;
			
 
				+        letter-spacing: 2px;
			
 
				+        position: relative;
			
 
				+        z-index: 2;
			
 
				+        // margin-right: 70px;
			
 
				+        img {
			
 
				+            width: 30px;
			
 
				+            height: 30px;
			
 
				+            margin: 0 20px 0 30px;
			
 
				+        }
			
 
				+        span {
			
 
				+            // font-family: "PangMenZhengDao";
			
 
				+        }
			
 
				     }
			
 
				-  }
			
 
				-  .tabs {
			
 
				-    height: 100%;
			
 
				-    position: relative;
			
 
				-    z-index: 2;
			
 
				-    margin-right: 30px;
			
 
				-    .tab-item {
			
 
				-      font-weight: 400;
			
 
				-      font-size: 20px;
			
 
				-      width: 110px;
			
 
				-      height: 100%;
			
 
				-      justify-content: center;
			
 
				-      text-align: center;
			
 
				-      margin-right: 33px;
			
 
				-      cursor: pointer;
			
 
				-      font-family: "PangMenZhengDao";
			
 
				-      &.active {
			
 
				-        background: #fff;
			
 
				-        color: #f56d83;
			
 
				-      }
			
 
				+    .center-menu {
			
 
				+        height: 100%;
			
 
				+        position: relative;
			
 
				+        flex: 1;
			
 
				+        // width: calc(100% - 500px);
			
 
				     }
			
 
				-  }
			
 
				-  .search {
			
 
				-    ::v-deep {
			
 
				-      .el-input__wrapper {
			
 
				-        box-shadow: none;
			
 
				-        border-radius: 20px;
			
 
				-      }
			
 
				+    .tabs {
			
 
				+        // width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: absolute;
			
 
				+        left: 384px;
			
 
				+        // left: 20%;
			
 
				+        // transform: translateX(-50%);
			
 
				+        z-index: 2;
			
 
				+        margin-right: 30px;
			
 
				+        .tab-item {
			
 
				+            font-weight: 400;
			
 
				+            font-size: 18px;
			
 
				+            // width: 110px;
			
 
				+            height: 100%;
			
 
				+            justify-content: center;
			
 
				+            text-align: center;
			
 
				+            margin-right: 70px;
			
 
				+            cursor: pointer;
			
 
				+            position: relative;
			
 
				+            transform: perspective(1px) translateZ(0);
			
 
				+            overflow: hidden;
			
 
				+            // font-family: "PangMenZhengDao";
			
 
				+            &::before {
			
 
				+                  content: "";
			
 
				+                  position: absolute;
			
 
				+                  z-index: -1;
			
 
				+                  // left: 100%;
			
 
				+                  left: -100%;
			
 
				+                  // right: 51%;
			
 
				+                  bottom: 0;
			
 
				+                  width: 100%;
			
 
				+                  background: #ffda75;
			
 
				+                  border-radius: 20px;
			
 
				+                  height: 4px;
			
 
				+                  transition-property: left, right;
			
 
				+                  transition-duration: 0.3s;
			
 
				+                  transition-timing-function: ease-out;
			
 
				+                  opacity: 0;
			
 
				+              }
			
 
				+            &.active {
			
 
				+                font-weight: bold;
			
 
				+                color: #ffda75;
			
 
				+                &::before {
			
 
				+                    left: 0;
			
 
				+                    right: 0;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .header-btn {
			
 
				+      margin-right: 71px;
			
 
				+      font-size: 18px;
			
 
				+      color: #FFDA75;
			
 
				+      padding: 10px 20px;
			
 
				+      border-radius: 5px;
			
 
				+      background: rgba(255, 218, 117, 0.08);
			
 
				+      border: 1px solid #FFDA75;
			
 
				     }
			
 
				-  }
			
 
				-  .bg {
			
 
				-    width: 100%;
			
 
				-    height: 100%;
			
 
				-    position: absolute;
			
 
				-    z-index: 0;
			
 
				-    background: url("@/assets/images/delicious/header-bg.png") no-repeat center
			
 
				-      center / 100% 100%;
			
 
				-  }
			
 
				 }
			
 
				-</style>
			
 
				+</style>
			
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -11,3 +11,49 @@
 
				   font-weight: normal; /* 字体粗细 */
			
 
				   font-style: normal; /* 字体风格 */
			
 
				 }
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: "JXZK"; /* 定义字体名称 */
			
 
				+  src: url("@/assets/font/jiangxizhuokai.ttf") format("truetype");
			
 
				+  font-weight: normal; /* 字体粗细 */
			
 
				+  font-style: normal; /* 字体风格 */
			
 
				+}
			
 
				+
			
 
				+
			
 
				+//滚动条的宽度
			
 
				+::-webkit-scrollbar {
			
 
				+    width: 6px;
			
 
				+    height: 6px;
			
 
				+}
			
 
				+//滚动条的滑块
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+    background-color: rgba(144, 147, 153, 0.3);
			
 
				+    border-radius: 3px;
			
 
				+}
			
 
				+
			
 
				+.content-title {
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+  .main-title {
			
 
				+    font-size: 38px;
			
 
				+    color: #000000;
			
 
				+    letter-spacing: 4px;
			
 
				+    line-height: 54px;
			
 
				+  }
			
 
				+  .title-line {
			
 
				+    width: 43px;
			
 
				+    height: 3px;
			
 
				+    background-color: #FFC258;
			
 
				+    margin: 4px 0 8px 0;
			
 
				+  }
			
 
				+  .sub-title {
			
 
				+    font-size: 16px;
			
 
				+    line-height: 1.4;
			
 
				+    color: rgba(0, 0, 0, 0.6);
			
 
				+    letter-spacing: 1px;
			
 
				+    padding: 0 60px;
			
 
				+    text-align: center;
			
 
				+  }
			
 
				+}
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,9 +1,43 @@
 
				 <template>
			
 
				   <div class="base-container">
			
 
				     <div class="banner">
			
 
				-      <el-carousel class="carousel" height="654px" :autoplay="false">
			
 
				-        <el-carousel-item v-for="item in urls" :key="item">
			
 
				-          <el-image class="image" :src="item" />
			
 
				+      <el-carousel class="carousel" height="100vh" :autoplay="false">
			
 
				+        <el-carousel-item>
			
 
				+          <div class="item-box">
			
 
				+              <el-image class="image" :src="require('@/assets/images/home/banner.png')" />
			
 
				+              <div class="box-text">
			
 
				+                <div class="text-title">
			
 
				+                  飞鸟有味
			
 
				+                  <div class="box-bird">
			
 
				+                    <img src="@/assets/images/home/bird.png" alt="">
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div class="text-desc">科学定义好吃，数字评估生态</div>
			
 
				+              </div>
			
 
				+          </div>
			
 
				+        </el-carousel-item>
			
 
				+        <el-carousel-item>
			
 
				+          <div class="item-box">
			
 
				+              <el-image class="image" :src="require('@/assets/images/home/banner1.png')" />
			
 
				+              <div class="box-text">
			
 
				+                <div class="text-title">
			
 
				+                  飞鸟有味
			
 
				+                  <div class="box-bird">
			
 
				+                    <img src="@/assets/images/home/bird.png" alt="">
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div class="text-desc">有滋味、有风味、有回味</div>
			
 
				+              </div>
			
 
				+          </div>
			
 
				+        </el-carousel-item>
			
 
				+        <el-carousel-item>
			
 
				+          <div class="item-box">
			
 
				+              <el-image class="image" :src="require('@/assets/images/home/banner2.png')" />
			
 
				+              <div class="bottom-text">
			
 
				+                <div class="bottom-title">用脚步丈量世界，用味蕾收藏地图</div>
			
 
				+                <div class="bottom-desc">每个果子都有自己专署的地理身份证</div>
			
 
				+              </div>
			
 
				+          </div>
			
 
				         </el-carousel-item>
			
 
				       </el-carousel>
			
 
				     </div>
			
@@ -12,13 +46,9 @@
 
				 
			
 
				 <script setup>
			
 
				 const urls = [
			
 
				-  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
			
 
				-  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
			
 
				-  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
			
 
				-  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
			
 
				-  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
			
 
				-  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
			
 
				-  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
			
 
				+  require("@/assets/images/home/banner.png"),
			
 
				+  require("@/assets/images/home/banner1.png"),
			
 
				+  require("@/assets/images/home/banner2.png"),
			
 
				 ];
			
 
				 </script>
			
 
				 
			
@@ -30,16 +60,21 @@ const urls = [
 
				   overflow-y: auto;
			
 
				   .banner {
			
 
				     width: 100%;
			
 
				-    height: 654px;
			
 
				+    height: 100%;
			
 
				     .carousel {
			
 
				       ::v-deep {
			
 
				+        .el-carousel {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+        }
			
 
				         .el-carousel__indicators--horizontal {
			
 
				           bottom: 36px;
			
 
				           .el-carousel__button {
			
 
				             width: 14px;
			
 
				             height: 14px;
			
 
				             border-radius: 50%;
			
 
				-            background: #d9d9d9;
			
 
				+            background: #FFFFFF;
			
 
				+            opacity: 1;
			
 
				           }
			
 
				         }
			
 
				 
			
@@ -48,13 +83,67 @@ const urls = [
 
				             width: 30px;
			
 
				             height: 14px;
			
 
				             border-radius: 14px;
			
 
				-            background: rgba(53, 225, 149, 0.86);
			
 
				+            background: #FFD489;
			
 
				           }
			
 
				         }
			
 
				+        .el-image__inner {
			
 
				+          object-fit: fill;
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				     .image {
			
 
				       width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+    .item-box {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      position: relative;
			
 
				+      .box-text {
			
 
				+        color: #fff;
			
 
				+        line-height: 98px;
			
 
				+        position: absolute;
			
 
				+        left: 20%;
			
 
				+        top: 50%;
			
 
				+        transform: translateY(-40%);
			
 
				+        letter-spacing: 1.75px;
			
 
				+        .text-title {
			
 
				+          position: relative;
			
 
				+          font-size: 60px;
			
 
				+          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
			
 
				+        }
			
 
				+        .text-desc {
			
 
				+          font-size: 50px;
			
 
				+          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
			
 
				+        }
			
 
				+      }
			
 
				+      .box-bird {
			
 
				+        position: absolute;
			
 
				+        left: 160px;
			
 
				+        top: 50%;
			
 
				+        transform: translateY(-32%);
			
 
				+      }
			
 
				+      .bottom-text {
			
 
				+        position: absolute;
			
 
				+        bottom: 106px;
			
 
				+        left: 0;
			
 
				+        right: 0;
			
 
				+        text-align: center;
			
 
				+        margin: 0 auto;
			
 
				+        color: #fff;
			
 
				+        .bottom-title {
			
 
				+          font-size: 78px;
			
 
				+          letter-spacing: 4px;
			
 
				+          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
			
 
				+          padding-bottom: 16px;
			
 
				+          line-height: 98px;
			
 
				+        }
			
 
				+        .bottom-desc {
			
 
				+          font-size: 28px;
			
 
				+          letter-spacing: 4px;
			
 
				+          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
			
 
				+        }
			
 
				+      }
			
 
				     }
			
 
				   }
			
 
				 }
			
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -12,9 +12,17 @@ import { onMounted, ref } from "vue";
 
				 import Header from "@/components/layout/Header.vue";
			
 
				 import Home from "./Home.vue";
			
 
				 import Exponent from "./Exponent.vue";
			
 
				+import ThreeFlavors from "./pages/ThreeFlavors.vue";
			
 
				+import Certification from "./pages/Certification.vue"
			
 
				+import TraceSource from "./pages/TraceSource.vue";
			
 
				+import DefendLeague from "./pages/DefendLeague.vue"
			
 
				 const components = {  
			
 
				   Home,  
			
 
				-  Exponent  
			
 
				+  Exponent,
			
 
				+  ThreeFlavors,
			
 
				+  Certification,
			
 
				+  TraceSource,
			
 
				+  DefendLeague,
			
 
				 };  
			
 
				 
			
 
				 const currentComponent = ref('Home');
			
@@ -32,9 +40,10 @@ onMounted(()=>{
 
				   height: 100vh;
			
 
				   background: #fff;
			
 
				   box-sizing: border-box;
			
 
				+  overflow: auto;
			
 
				   .container {
			
 
				     width: 100%;
			
 
				-    height: calc(100% - 70px);
			
 
				+    height: 100%;
			
 
				     position: relative;
			
 
				   }
			
 
				 }
			
--- a/src/views/pages/Certification.vue
+++ b/src/views/pages/Certification.vue
@@ -0,0 +1,202 @@
 
				+<template>
			
 
				+    <div class="page-wrap">
			
 
				+        <div class="page-top"></div>
			
 
				+        <div class="page-content">
			
 
				+            <div class="content-title">
			
 
				+                <div class="main-title">3体6维认证</div>
			
 
				+                <div class="title-line"></div>
			
 
				+                <div class="sub-title">IT HAS FLAVOR</div>
			
 
				+            </div>
			
 
				+            <div class="card-box">
			
 
				+                 <el-row :gutter="40">
			
 
				+                    <el-col :span="8">
			
 
				+                        <div class="card-item">
			
 
				+                            <img src="@/assets/images/content/card1.png" alt="">
			
 
				+                            <div class="center-text">好环境</div>
			
 
				+                            <div class="bottom-text">{区域环境+气象适宜}</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                    <el-col :span="8">
			
 
				+                        <div class="card-item">
			
 
				+                            <img src="@/assets/images/content/card2.png" alt="">
			
 
				+                            <div class="center-text">好果园</div>
			
 
				+                            <div class="bottom-text">{生态园相+农事体系}</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                    <el-col :span="8">
			
 
				+                        <div class="card-item">
			
 
				+                            <img src="@/assets/images/content/card3.png" alt="">
			
 
				+                            <div class="center-text">好果树</div>
			
 
				+                            <div class="bottom-text">{生长周期+生长过程}</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                </el-row>
			
 
				+            </div>
			
 
				+            <div class="text-img">
			
 
				+                <div class="content-title">
			
 
				+                    <div class="main-title">区域环境认证</div>
			
 
				+                    <div class="title-line"></div>
			
 
				+                    <div class="sub-title">水果的滋味、风味与回味，源于糖分、有机酸等物质在整个生长期的合成积累，依赖生境、地理区位、光照、水源、土壤等环境因子协同调控。飞鸟有味的区域环境认证体系，从上述五大关键指标出发，对果园所处环境进行多维度、全周期的系统评估，确保每一份风味都烙印着自然生境的独特禀赋。</div>
			
 
				+                </div>
			
 
				+                <div class="text-content">
			
 
				+                    <div class="content-item">
			
 
				+                        <div class="l-text">
			
 
				+                            <div class="text-title">生境</div>
			
 
				+                            <div class="text-desc">森林覆盖率高的区域常具丰富土壤微生物与健康空气循环。微生物分泌的激素类物质可激活果树根系对铁、锌等矿物质的吸收，这些元素不仅调节糖酸平衡，更是黄酮、多酚等风味物质合成的催化因子。飞鸟通过遥感影像识别果园周边森林区域，计算森林覆盖度，衡量果园所在区域的生境水平。</div>
			
 
				+                        </div>
			
 
				+                        <div class="r-img">
			
 
				+                            <img src="@/assets/images/content/certification.png" alt="">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="content-item">
			
 
				+                        <div class="l-text">
			
 
				+                            <div class="text-title">地理区位</div>
			
 
				+                            <div class="text-desc">地理区位直接决定果园的水汽循环与温湿环境：地势开阔处通风良好，可降低病虫害；水体环绕、背风区域能稳定温湿条件，利于果树代谢。飞鸟通过遥感数据与数字高程模型（DEM），分析果园周边地势特征与山水空间格局，获取果园的地理区位评分指数。</div>
			
 
				+                        </div>
			
 
				+                        <div class="r-img">
			
 
				+                            <img src="@/assets/images/content/certification2.png" alt="">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="content-item">
			
 
				+                        <div class="l-text">
			
 
				+                            <div class="text-title">光照</div>
			
 
				+                            <div class="text-desc">持续、稳定的光照可以提升光合作用效率，促进糖类、萜类、酚类等物质转化，形成饱满甜味与浓郁果香。光照不足则导致风味扁平、留香短。飞鸟通过气象卫星数据统计果园所在地的年均日照时长，并结合地理高程模型分析果园坡度、坡向，以分析果园的有效光照时长与照射均匀度，从而综合评估果园的光照适宜度。</div>
			
 
				+                        </div>
			
 
				+                        <div class="r-img">
			
 
				+                            <img src="@/assets/images/content/certification3.png" alt="">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="content-item">
			
 
				+                        <div class="l-text">
			
 
				+                            <div class="text-title">土壤</div>
			
 
				+                            <div class="text-desc">土壤理化条件影响养分吸收与风味合成。疏松壤土有利于有机酸与芳香物质合成，高有机质土壤可提升风味复杂性，微酸性环境增强微量元素活性。土壤板结、pH 失衡或重金属污染则损害风味。飞鸟结合作物长势和土壤理化数据，综合评估果园土壤的营养供给能力。</div>
			
 
				+                        </div>
			
 
				+                        <div class="r-img">
			
 
				+                            <img src="@/assets/images/content/certification4.png" alt="">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="content-item">
			
 
				+                        <div class="l-text">
			
 
				+                            <div class="text-title">水源</div>
			
 
				+                            <div class="text-desc">水源洁净程度直接关系到植物体内的营养输送效率和代谢通畅度。清洁水源维持根系活力，促进等风味物质合成转运；污染水源迫使果树防御代谢，累积苦味、涩味物质，破坏口感。飞鸟结合遥感影像与地面水质监测数据，分析悬浮物浓度、氨氮含量、营养状态指数等指标，评估果园周边水源洁净程度。 失衡或重金属污染则损害风味。飞鸟结合作物长势和土壤理化数据，综合评估果园土壤的营养供给能力。</div>
			
 
				+                        </div>
			
 
				+                        <div class="r-img">
			
 
				+                            <img src="@/assets/images/content/certification5.png" alt="">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.page-wrap {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    .page-top {
			
 
				+        width: 100%;
			
 
				+        height: 740px;
			
 
				+        background: url("@/assets/images/home/banner.png") no-repeat;
			
 
				+        background-position: right bottom;
			
 
				+    }
			
 
				+    .page-content {
			
 
				+        padding: 80px 0 40px 0;
			
 
				+        width: 1280px;
			
 
				+        margin: 0 auto;
			
 
				+        .card-box {
			
 
				+            padding-top: 78px;
			
 
				+            .card-item {
			
 
				+                position: relative;
			
 
				+                color: #FFFFFF;
			
 
				+                cursor: pointer;
			
 
				+                &:hover {
			
 
				+                    .center-text {
			
 
				+                        scale: 1.2;
			
 
				+                    }
			
 
				+                    .bottom-text {
			
 
				+                        // scale: 1.1;
			
 
				+                    }
			
 
				+                }
			
 
				+                .center-text {
			
 
				+                    transition: all 0.3s;
			
 
				+                    font-family: "JXZK";
			
 
				+                    position: absolute;
			
 
				+                    top: 82px;
			
 
				+                    left: 50%;
			
 
				+                    transform: translateX(-50%);
			
 
				+                    width: 50px;
			
 
				+                    line-height: 1.2;
			
 
				+                    font-size: 50px;
			
 
				+                    letter-spacing: 4px;
			
 
				+                    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
			
 
				+                }
			
 
				+                .bottom-text {
			
 
				+                    transition: all 0.3s;
			
 
				+                    font-family: "JXZK";
			
 
				+                    position: absolute;
			
 
				+                    bottom: 24px;
			
 
				+                    left: 50%;
			
 
				+                    transform: translateX(-50%);
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        .text-img {
			
 
				+            padding-top: 100px;
			
 
				+            .text-content {
			
 
				+                margin-top: 60px;
			
 
				+                .content-item {
			
 
				+                    display: flex;
			
 
				+                    align-items: center;
			
 
				+                    padding: 26px 26px 26px 60px;
			
 
				+                    background: #F6F6F6;
			
 
				+                    transition: all 0.3s;
			
 
				+                    &:hover {
			
 
				+                        .r-img {
			
 
				+                            // transform: rotate(4deg);
			
 
				+                            scale: 1.05;
			
 
				+                        }
			
 
				+                    }
			
 
				+                }
			
 
				+                .content-item + .content-item {
			
 
				+                    margin-top: 20px;
			
 
				+                }
			
 
				+                .l-text {
			
 
				+                    flex: 1;
			
 
				+                    padding-right: 135px;
			
 
				+                    .text-title {
			
 
				+                        font-size: 22px;
			
 
				+                        color: #000000;
			
 
				+                        line-height: 28px;
			
 
				+                        width: fit-content;
			
 
				+                        position: relative;
			
 
				+                        &::after {
			
 
				+                            content: "";
			
 
				+                            position: absolute;
			
 
				+                            right: -10px;
			
 
				+                            top: 0;
			
 
				+                            width: 17px;
			
 
				+                            height: 17px;
			
 
				+                            background: url("@/assets/images/content/sun.png") no-repeat center;
			
 
				+                        }
			
 
				+                    }
			
 
				+                    .text-desc {
			
 
				+                        padding-top: 12px;
			
 
				+                        font-size: 16px;
			
 
				+                        color: rgba(0, 0, 0, 0.6);
			
 
				+                        line-height: 28px;
			
 
				+                    }
			
 
				+                }
			
 
				+                .r-img {
			
 
				+                    
			
 
				+                    transition: all 0.3s;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/pages/DefendLeague.vue
+++ b/src/views/pages/DefendLeague.vue
@@ -0,0 +1,53 @@
 
				+<template>
			
 
				+    <div class="page-wrap">
			
 
				+        <div class="page-top"></div>
			
 
				+        <div class="page-content">
			
 
				+            <div class="trace-box">
			
 
				+                <div class="content-title">
			
 
				+                    <div class="main-title">生态守护者联盟：您的选择，滋养未来</div>
			
 
				+                    <div class="title-line"></div>
			
 
				+                    <div class="sub-title" style="padding: 0 98px">加入联盟，您收获的不仅是清甜果实，更是一份与土地的守护契约。每一颗果实都凝结着人与自然的共生智慧，见证着青山碧水间的善意循环。 当订单生成，专属果树ID即刻与您的小程序能量池绑定——您消费的每一分力量，都将转化为果树的守护能量。农户根据能量积累值，逐步将化学农药替换为生物防治，把合成肥料升级为天然有机肥。</div>
			
 
				+                </div>
			
 
				+                <div class="source-img">
			
 
				+                    <img src="@/assets/images/content/defend1.png" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="league-box">
			
 
				+                <div class="content-title">
			
 
				+                    <div class="main-title">您的每一次选择都在书写未来</div>
			
 
				+                    <div class="title-line"></div>
			
 
				+                    <div class="sub-title">YOUR CHOICES SHAPE THE FUTURE</div>
			
 
				+                </div>
			
 
				+
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.page-wrap {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    .page-top {
			
 
				+        width: 100%;
			
 
				+        height: 740px;
			
 
				+        background: url("@/assets/images/home/banner.png") no-repeat;
			
 
				+        background-position: right bottom;
			
 
				+    }
			
 
				+    .page-content {
			
 
				+        padding: 0px 0 40px 0;
			
 
				+        width: 1280px;
			
 
				+        margin: 0 auto;
			
 
				+        .trace-box {
			
 
				+            padding-top: 70px;
			
 
				+        }
			
 
				+        .source-img {
			
 
				+            padding: 60px 0 40px 0;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/pages/ThreeFlavors.vue
+++ b/src/views/pages/ThreeFlavors.vue
@@ -0,0 +1,195 @@
 
				+<template>
			
 
				+    <div class="page-wrap">
			
 
				+        <div class="page-top"></div>
			
 
				+        <div class="page-content">
			
 
				+            <div class="content-title">
			
 
				+                <div class="main-title">有滋味</div>
			
 
				+                <div class="title-line"></div>
			
 
				+                <div class="sub-title">DELICIOUS</div>
			
 
				+            </div>
			
 
				+            <div class="text-img">
			
 
				+                 <el-row :gutter="44">
			
 
				+                    <el-col :span="12">
			
 
				+                        <div class="l-text">
			
 
				+                            <div class="text-title">有滋味的果子，必须不急不躁，经历时光的反复打磨，才能将每日的雨露阳光，酿成醇厚的芬芳。</div>
			
 
				+                            <div class="text-line"></div>
			
 
				+                            <div class="text-desc">科学解释：有滋味的果子不仅仅是甜味，而是糖分、酸度、香气物质达到完美融合所呈现出来的滋味。而香气物质的积累最为关键，也是很多重要药材是否有药效的关键。决定香气最重要的两个因子就是足够长时间的积累和足够全面的营养供给。</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                    <el-col :span="12">
			
 
				+                        <div class="r-img">
			
 
				+                            <img src="@/assets/images/content/lichi.png" alt="">
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                </el-row>
			
 
				+                
			
 
				+                <div class="img-img">
			
 
				+                 <el-row :gutter="44">
			
 
				+                        <el-col :span="12">
			
 
				+                            <div class="item-box">
			
 
				+                                <div class="item-img">
			
 
				+                                    <img src="@/assets/images/content/lichi2.png" alt="">
			
 
				+                                </div>
			
 
				+                                <div class="item-text">
			
 
				+                                    <div class="item-num">
			
 
				+                                        <img src="@/assets/images/content/number.png" alt="">
			
 
				+                                    </div>
			
 
				+                                    <div class="item-title">
			
 
				+                                        足够长时间的积累
			
 
				+                                    </div>
			
 
				+                                    <div class="item-desc">
			
 
				+                                        要求在种植过程中，遵循作物的自然生长周期，依靠堆肥、绿肥、轮作、覆盖作物等方式缓慢释放养分，有更充足的时间通过光合作用合成并积累复杂的碳水化合物、氨基酸、有机酸、挥发性芳香物质（如酯类、醛类、酮类）以及次生代谢产物。期间，尽可能不使用或极少使用高溶解度的化学合成化肥，避免植物快速生长和细胞膨大，导致单位体积内积累的干物质（包括风味物质和营养物质）被稀释）。
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </el-col>
			
 
				+                        <el-col :span="12">
			
 
				+                            <div class="item-box">
			
 
				+                                <div class="item-img">
			
 
				+                                    <img src="@/assets/images/content/lichi3.png" alt="">
			
 
				+                                </div>
			
 
				+                                <div class="item-text">
			
 
				+                                    <div class="item-num">
			
 
				+                                        <img src="@/assets/images/content/number2.png" alt="">
			
 
				+                                    </div>
			
 
				+                                    <div class="item-title">
			
 
				+                                        全面的营养供给
			
 
				+                                    </div>
			
 
				+                                    <div class="item-desc">
			
 
				+                                        通过施用富含多种矿物质的有机肥料（如腐熟的粪肥、矿物岩石粉、海藻肥等）和维持健康的土壤pH值，能更全面地提供植物生长所需的所有矿物质和微量元素。）
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </el-col>
			
 
				+                    </el-row>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="text-img-one">
			
 
				+                    <div class="one-bg">
			
 
				+                        <div class="one-text">
			
 
				+                            <div class="one-title">
			
 
				+                                <img class="honor" src="@/assets/images/content/honor.png" alt="">
			
 
				+                                有味指数
			
 
				+                            </div>
			
 
				+                            <div class="one-desc">
			
 
				+                                飞鸟通过数字化呈现种植过程的植被表型变化，计算作物在不同物候期生长的总天数，客观评判 <span>作物时间累积度指数</span> ；通过有机肥认证农事和作物在气候胁迫下的韧性表现，综合判断 <span>营养供给度指数</span>。
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="one-img">
			
 
				+                            <!-- <img src="@/assets/images/content/lichi4.png" alt=""> -->
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.page-wrap {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    .page-top {
			
 
				+        width: 100%;
			
 
				+        height: 740px;
			
 
				+        background: url("@/assets/images/home/banner.png") no-repeat;
			
 
				+        background-position: right bottom;
			
 
				+    }
			
 
				+    .page-content {
			
 
				+        padding: 80px 0 40px 0;
			
 
				+        width: 1280px;
			
 
				+        margin: 0 auto;
			
 
				+        .text-img {
			
 
				+            padding-top: 80px;
			
 
				+            .l-text {
			
 
				+                padding: 24px 32px 24px 0;
			
 
				+                .text-title {
			
 
				+                    font-size: 30px;
			
 
				+                    line-height: 1.5;
			
 
				+                    color: #000000;
			
 
				+                }
			
 
				+                .text-line {
			
 
				+                    width: 84px;
			
 
				+                    height: 1px;
			
 
				+                    background: #666666;
			
 
				+                    margin: 58px 0 54px 0;
			
 
				+                }
			
 
				+                .text-desc {
			
 
				+                    font-size: 14px;
			
 
				+                    line-height: 28px;
			
 
				+                    color: #666666;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        .img-img {
			
 
				+            padding-top: 60px;
			
 
				+            .item-box {
			
 
				+                height: 100%;
			
 
				+                background: #F8F8F8;
			
 
				+                .item-text {
			
 
				+                    padding: 30px 20px 25px 20px;
			
 
				+                    position: relative;
			
 
				+                    .item-num {
			
 
				+                        position: absolute;
			
 
				+                        left: 20px;
			
 
				+                        top: 18px;
			
 
				+                    }
			
 
				+                    .item-title {
			
 
				+                        font-size: 22px;
			
 
				+                        color: #000000;
			
 
				+                        line-height: 28px;
			
 
				+                    }
			
 
				+                    .item-desc {
			
 
				+                        padding-top: 12px;
			
 
				+                        color: #666666;
			
 
				+                        font-size: 14px;
			
 
				+                        line-height: 24px;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        .text-img-one {
			
 
				+            padding-left: 20px;
			
 
				+            background: #F8F8F8;
			
 
				+            margin-top: 35px;
			
 
				+            .one-bg {
			
 
				+                height: 181px;
			
 
				+                display: flex;
			
 
				+                align-items: center;
			
 
				+                background: url("@/assets/images/content/lichi4.png") no-repeat top right;
			
 
				+            }
			
 
				+            .one-text {
			
 
				+                .one-title {
			
 
				+                    display: inline-flex;
			
 
				+                    align-items: center;
			
 
				+                    font-size: 22px;
			
 
				+                    line-height: 28px;
			
 
				+                    color: #000000;
			
 
				+                    .honor {
			
 
				+                        padding-right: 10px;
			
 
				+                    }
			
 
				+                }
			
 
				+                .one-desc {
			
 
				+                    padding-top: 10px;
			
 
				+                    font-size: 16px;
			
 
				+                    line-height: 28px;
			
 
				+                    color: #666666;
			
 
				+                    span {
			
 
				+                        color: #DCA443;
			
 
				+                        border-bottom: 1px solid #DCA443;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+            .one-img {
			
 
				+                height: 1px;
			
 
				+                width: 410px;
			
 
				+                flex: none;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/pages/TraceSource.vue
+++ b/src/views/pages/TraceSource.vue
@@ -0,0 +1,147 @@
 
				+<template>
			
 
				+    <div class="page-wrap">
			
 
				+        <div class="page-top"></div>
			
 
				+        <div class="page-content">
			
 
				+            <div class="content-title">
			
 
				+                <div class="main-title">飞鸟溯源</div>
			
 
				+                <div class="title-line"></div>
			
 
				+                <div class="sub-title">IT HAS FLAVOR</div>
			
 
				+            </div>
			
 
				+            <div class="card-box">
			
 
				+                 <el-row :gutter="40">
			
 
				+                    <el-col :span="8">
			
 
				+                        <div class="card-item">
			
 
				+                            <img src="@/assets/images/content/trace1.png" alt="">
			
 
				+                            <div class="center-text text-l">一 树 一 码</div>
			
 
				+                            <div class="center-text text-r">知 产 地</div>
			
 
				+                            <div class="bottom-text">{锁定真实产地，见证自然风土}</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                    <el-col :span="8">
			
 
				+                        <div class="card-item">
			
 
				+                            <img src="@/assets/images/content/trace2.png" alt="">
			
 
				+                            <div class="center-text text-l">一 事 一 记</div>
			
 
				+                            <div class="center-text text-r">见 匠 心</div>
			
 
				+                            <div class="bottom-text">{全程农事记录，透明成长日记}</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                    <el-col :span="8">
			
 
				+                        <div class="card-item">
			
 
				+                            <img src="@/assets/images/content/trace3.png" alt="">
			
 
				+                            <div class="center-text text-l">一 人 一 责</div>
			
 
				+                            <div class="center-text text-r">筑 信 任</div>
			
 
				+                            <div class="bottom-text">{主体信息追溯，田间责任闭环}</div>
			
 
				+                        </div>
			
 
				+                    </el-col>
			
 
				+                </el-row>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="trace-box">
			
 
				+                <div class="content-title">
			
 
				+                    <div class="main-title">地理位置溯源：每颗果实都有“出生坐标”</div>
			
 
				+                    <div class="title-line"></div>
			
 
				+                    <div class="sub-title" style="padding: 0 16px">您可知手中的水果来自哪片土地？飞鸟通过卫星定位和低空无人机为每棵果树标记专属“身份证”，精确记录其生长的经度、纬度及海拔高度。扫描溯源二维码，即可在地图上看到这棵果树的具体位置，了解它生长的土壤酸碱度、灌溉水源质量及周边生态环境，品尝到的不仅是甘甜，更是山川湖海孕育的风味密码。</div>
			
 
				+                </div>
			
 
				+                <div class="source-img">
			
 
				+                    <img src="@/assets/images/content/source1.png" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div class="bg-page-content">
			
 
				+            <div class="page-content">
			
 
				+                <div class="content-title">
			
 
				+                    <div class="main-title">标准农事溯源：从施肥到采摘的安心承诺</div>
			
 
				+                    <div class="title-line"></div>
			
 
				+                    <div class="sub-title" style="padding: 0 16px">飞鸟为果园的每项农事操作建立可视化档案：施用有机肥的日期与供应商、生物病虫害防治的详细记录，全部数字化存证不可篡改，让标准化种植清晰可见，让生态种植不再是抽象概念，而是看得见的用心守护。</div>
			
 
				+                </div>
			
 
				+                <div class="source-img">
			
 
				+                    <img src="@/assets/images/content/source2.png" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div class="page-content">
			
 
				+            <div class="content-title">
			
 
				+                <div class="main-title">责任主体溯源：每个环节都值得托付</div>
			
 
				+                <div class="title-line"></div>
			
 
				+                <div class="sub-title" style="padding: 0 16px">每一颗果实背后，是完整的责任网络溯源 专家智库，资深专家全程指导，指导记录与资质证书随时可查；溯源 种植匠人，果园主种植经验全记录，匠人淳朴笑容守护您的每棵果实；溯源 品质联盟，有机肥供应商检测报告、生物农药合规证书全程公开，形成“专家指导-果农执行-农资保障”的完整责任链。</div>
			
 
				+            </div>
			
 
				+            <div class="source-img">
			
 
				+                <img src="@/assets/images/content/source3.png" alt="">
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.page-wrap {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    .page-top {
			
 
				+        width: 100%;
			
 
				+        height: 740px;
			
 
				+        background: url("@/assets/images/home/banner.png") no-repeat;
			
 
				+        background-position: right bottom;
			
 
				+    }
			
 
				+    .page-content {
			
 
				+        padding: 80px 0 40px 0;
			
 
				+        width: 1280px;
			
 
				+        margin: 0 auto;
			
 
				+        .card-box {
			
 
				+            padding-top: 78px;
			
 
				+            .card-item {
			
 
				+                position: relative;
			
 
				+                color: #FFFFFF;
			
 
				+                cursor: pointer;
			
 
				+                &:hover {
			
 
				+                    .center-text {
			
 
				+                        scale: 1.04;
			
 
				+                    }
			
 
				+                    .bottom-text {
			
 
				+                        // scale: 1.1;
			
 
				+                    }
			
 
				+                }
			
 
				+                .center-text {
			
 
				+                    transition: all 0.3s;
			
 
				+                    font-family: "JXZK";
			
 
				+                    width: 50px;
			
 
				+                    line-height: 1.2;
			
 
				+                    font-size: 50px;
			
 
				+                    letter-spacing: 4px;
			
 
				+                    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
			
 
				+                }
			
 
				+                .text-l {
			
 
				+                    position: absolute;
			
 
				+                    top: 52px;
			
 
				+                    left: 142px;
			
 
				+                }
			
 
				+                .text-r {
			
 
				+                    position: absolute;
			
 
				+                    top: 182px;
			
 
				+                    right: 137px;
			
 
				+                }
			
 
				+                .bottom-text {
			
 
				+                    transition: all 0.3s;
			
 
				+                    font-family: "JXZK";
			
 
				+                    position: absolute;
			
 
				+                    bottom: 29px;
			
 
				+                    text-align: center;
			
 
				+                    width: 100%;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        .trace-box {
			
 
				+            padding-top: 140px;
			
 
				+        }
			
 
				+        .source-img {
			
 
				+            padding: 60px 0 40px 0;
			
 
				+        }
			
 
				+    }
			
 
				+    .bg-page-content {
			
 
				+        background: #F6F6F6;
			
 
				+    }
			
 
				+}
			
 
				+</style>