Home Explore Help
Sign In
lxf
/
youwei-pc-vue
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: 飞鸟有味平台页面

刘秀芳 5 months ago
parent
933681ea78
commit
d82f4143da
41 changed files with 893 additions and 122 deletions
Split View Show Diff Stats
  1. 5 1
      public/index.html
  2. BIN
      src/assets/font/jiangxizhuokai.ttf
  3. BIN
      src/assets/images/content/card1.png
  4. BIN
      src/assets/images/content/card2.png
  5. BIN
      src/assets/images/content/card3.png
  6. BIN
      src/assets/images/content/certification.png
  7. BIN
      src/assets/images/content/certification2.png
  8. BIN
      src/assets/images/content/certification3.png
  9. BIN
      src/assets/images/content/certification4.png
  10. BIN
      src/assets/images/content/certification5.png
  11. BIN
      src/assets/images/content/defend1.png
  12. BIN
      src/assets/images/content/defend2.png
  13. BIN
      src/assets/images/content/honor.png
  14. BIN
      src/assets/images/content/league1.png
  15. BIN
      src/assets/images/content/league2.png
  16. BIN
      src/assets/images/content/league3.png
  17. BIN
      src/assets/images/content/lichi.png
  18. BIN
      src/assets/images/content/lichi2.png
  19. BIN
      src/assets/images/content/lichi3.png
  20. BIN
      src/assets/images/content/lichi4.png
  21. BIN
      src/assets/images/content/number.png
  22. BIN
      src/assets/images/content/number2.png
  23. BIN
      src/assets/images/content/source1.png
  24. BIN
      src/assets/images/content/source2.png
  25. BIN
      src/assets/images/content/source3.png
  26. BIN
      src/assets/images/content/sun.png
  27. BIN
      src/assets/images/content/trace1.png
  28. BIN
      src/assets/images/content/trace2.png
  29. BIN
      src/assets/images/content/trace3.png
  30. BIN
      src/assets/images/home/banner.png
  31. BIN
      src/assets/images/home/banner1.png
  32. BIN
      src/assets/images/home/banner2.png
  33. BIN
      src/assets/images/home/bird.png
  34. 132 106
      src/components/layout/Header.vue
  35. 46 0
      src/styles/common.scss
  36. 102 13
      src/views/Home.vue
  37. 11 2
      src/views/Index.vue
  38. 202 0
      src/views/pages/Certification.vue
  39. 53 0
      src/views/pages/DefendLeague.vue
  40. 195 0
      src/views/pages/ThreeFlavors.vue
  41. 147 0
      src/views/pages/TraceSource.vue

+ 5 - 1
public/index.html
View File 

@@ -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>

BIN
src/assets/font/jiangxizhuokai.ttf
View File


BIN
src/assets/images/content/card1.png
View File


BIN
src/assets/images/content/card2.png
View File


BIN
src/assets/images/content/card3.png
View File


BIN
src/assets/images/content/certification.png
View File


BIN
src/assets/images/content/certification2.png
View File


BIN
src/assets/images/content/certification3.png
View File


BIN
src/assets/images/content/certification4.png
View File


BIN
src/assets/images/content/certification5.png
View File


BIN
src/assets/images/content/defend1.png
View File


BIN
src/assets/images/content/defend2.png
View File


BIN
src/assets/images/content/honor.png
View File


BIN
src/assets/images/content/league1.png
View File


BIN
src/assets/images/content/league2.png
View File


BIN
src/assets/images/content/league3.png
View File


BIN
src/assets/images/content/lichi.png
View File


BIN
src/assets/images/content/lichi2.png
View File


BIN
src/assets/images/content/lichi3.png
View File


BIN
src/assets/images/content/lichi4.png
View File


BIN
src/assets/images/content/number.png
View File


BIN
src/assets/images/content/number2.png
View File


BIN
src/assets/images/content/source1.png
View File


BIN
src/assets/images/content/source2.png
View File


BIN
src/assets/images/content/source3.png
View File


BIN
src/assets/images/content/sun.png
View File


BIN
src/assets/images/content/trace1.png
View File


BIN
src/assets/images/content/trace2.png
View File


BIN
src/assets/images/content/trace3.png
View File


BIN
src/assets/images/home/banner.png
View File


BIN
src/assets/images/home/banner1.png
View File


BIN
src/assets/images/home/banner2.png
View File


BIN
src/assets/images/home/bird.png
View File


+ 132 - 106
src/components/layout/Header.vue
View File 

@@ -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>

+ 46 - 0
src/styles/common.scss
View File 

@@ -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;
 
+  }
 
+}

+ 102 - 13
src/views/Home.vue
View File 

@@ -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);
 
+        }
 
+      }
 
     }
 
   }
 
 }

+ 11 - 2
src/views/Index.vue
View File 

@@ -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;
 
   }
 
 }

+ 202 - 0
src/views/pages/Certification.vue
View File 

@@ -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>

+ 53 - 0
src/views/pages/DefendLeague.vue
View File 

@@ -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>

+ 195 - 0
src/views/pages/ThreeFlavors.vue
View File 

@@ -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>

+ 147 - 0
src/views/pages/TraceSource.vue
View File 

@@ -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>