fix: 锚点定位，页面内容

src/components/layout/Header.vue

@@ -76,11 +76,12 @@ const input = ref("");
         align-items: center;
     }
     .logo {
-        font-size: 30px;
+        font-size: 24px;
         font-weight: 400;
         letter-spacing: 2px;
         position: relative;
         z-index: 2;
+        color: #FFDA75;
         // margin-right: 70px;
         img {
             width: 30px;

src/styles/common.scss

@@ -40,7 +40,7 @@
     font-size: 38px;
     color: #000000;
     letter-spacing: 4px;
-    line-height: 54px;
+    line-height: 60px;
   }
   .title-line {
     width: 43px;
@@ -50,10 +50,13 @@
   }
   .sub-title {
     font-size: 16px;
-    line-height: 1.4;
+    line-height: 24px;
     color: rgba(0, 0, 0, 0.6);
     letter-spacing: 1px;
     padding: 0 60px;
     text-align: center;
+    .main-text {
+      color: #EE9700;
+    }
   }
 }

src/views/Home.vue

@@ -19,7 +19,7 @@
         <el-carousel-item>
           <div class="item-box">
               <el-image class="image" :src="require('@/assets/images/home/banner1.png')" />
-              <div class="box-text">
+              <div class="box-text two-text">
                 <div class="text-title">
                   飞鸟有味
                   <div class="box-bird">
@@ -39,6 +39,15 @@
               </div>
           </div>
         </el-carousel-item>
+        <el-carousel-item>
+          <div class="item-box">
+              <el-image class="image" :src="require('@/assets/images/home/banner3.png')" />
+              <div class="bottom-text">
+                <div class="bottom-title">飞鸟AI智慧巡园，防好每一只虫，养好每一块地</div>
+                <div class="bottom-two-desc">在低空 AI+技术加持下，中山大学飞岛智慧农业团队为百年荔枝种植经验插上智能科技的翅膀，推动农业数字化转型。 飞鸟创建了种植标准化、标准数字化、产品优质化的革新溯源体系，确保每一颗荔枝吃得安心，吃得健康。式现代农业技术，建立了种植全过程</div>
+              </div>
+          </div>
+        </el-carousel-item>
       </el-carousel>
     </div>
   </div>
@@ -103,10 +112,14 @@ const urls = [
         color: #fff;
         line-height: 98px;
         position: absolute;
-        left: 20%;
-        top: 50%;
-        transform: translateY(-40%);
+        left: 192px;
+        top: 386px;
+        // transform: translateY(-40%);
         letter-spacing: 1.75px;
+        &.two-text {
+          top: 198px;
+          left: 109px;
+        }
         .text-title {
           position: relative;
           font-size: 60px;
@@ -143,6 +156,14 @@ const urls = [
           letter-spacing: 4px;
           text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
         }
+        .bottom-two-desc {
+          font-size: 20px;
+          width: 1260px;
+          margin: 0 auto;
+          text-align: center;
+          color: #fff;
+          line-height: 30px;
+        }
       }
     }
   }

src/views/Index.vue

@@ -28,7 +28,8 @@ const components = {
 const currentComponent = ref('Home');
 
 const handleActive = (e) =>{
-    currentComponent.value = e
+  window.scrollTo(0, 0);
+  currentComponent.value = e
 }
 onMounted(()=>{
 })

src/views/pages/Certification.vue

@@ -1,6 +1,24 @@
 <template>
-    <div class="page-wrap">
+    <div class="page-wrap" ref="containerRef">
         <div class="page-top"></div>
+        <div class="page-affix">
+            <el-affix :offset="80">
+                <div class="affix-button">
+                    <el-anchor
+                        :container="containerRef"
+                        direction="vertical"
+                        type="default"
+                        @click="handleClick"
+                        >
+                        <el-anchor-link href="#part1" title="区域环境认证" />
+                        <el-anchor-link href="#part2" title="气象适宜认证" />
+                        <el-anchor-link href="#part3" title="农事体系认证" />
+                        <el-anchor-link href="#part4" title="生态园相认证" />
+                        <el-anchor-link href="#part5" title="过程表型认证" />
+                    </el-anchor>
+                </div>
+            </el-affix>
+        </div>
         <div class="page-content">
             <div class="content-title">
                 <div class="main-title">3体6维认证</div>
@@ -32,11 +50,13 @@
                     </el-col>
                 </el-row>
             </div>
+            <!-- 区域环境认证 -->
             <div class="text-img">
+                <div id="part1" class="part-position"></div>
                 <div class="content-title">
                     <div class="main-title">区域环境认证</div>
                     <div class="title-line"></div>
-                    <div class="sub-title">水果的滋味、风味与回味，源于糖分、有机酸等物质在整个生长期的合成积累，依赖生境、地理区位、光照、水源、土壤等环境因子协同调控。飞鸟有味的区域环境认证体系，从上述五大关键指标出发，对果园所处环境进行多维度、全周期的系统评估，确保每一份风味都烙印着自然生境的独特禀赋。</div>
+                    <div class="sub-title">水果的滋味、风味与回味，源于糖分、有机酸等物质在整个生长期的合成积累，依赖 <span class="main-text">生境、地理区位、光照、水源、土壤</span> 等环境因子协同调控。飞鸟有味的区域环境认证体系，从上述五大关键指标出发，对果园所处环境进行多维度、全周期的系统评估，确保每一份风味都烙印着自然生境的独特禀赋。</div>
                 </div>
                 <div class="text-content">
                     <div class="content-item">
@@ -45,7 +65,7 @@
                             <div class="text-desc">森林覆盖率高的区域常具丰富土壤微生物与健康空气循环。微生物分泌的激素类物质可激活果树根系对铁、锌等矿物质的吸收，这些元素不仅调节糖酸平衡，更是黄酮、多酚等风味物质合成的催化因子。飞鸟通过遥感影像识别果园周边森林区域，计算森林覆盖度，衡量果园所在区域的生境水平。</div>
                         </div>
                         <div class="r-img">
-                            <img src="@/assets/images/content/certification.png" alt="">
+                            <img src="@/assets/images/certification/certification.png" alt="">
                         </div>
                     </div>
                     <div class="content-item">
@@ -54,7 +74,7 @@
                             <div class="text-desc">地理区位直接决定果园的水汽循环与温湿环境：地势开阔处通风良好，可降低病虫害；水体环绕、背风区域能稳定温湿条件，利于果树代谢。飞鸟通过遥感数据与数字高程模型（DEM），分析果园周边地势特征与山水空间格局，获取果园的地理区位评分指数。</div>
                         </div>
                         <div class="r-img">
-                            <img src="@/assets/images/content/certification2.png" alt="">
+                            <img src="@/assets/images/certification/certification2.png" alt="">
                         </div>
                     </div>
                     <div class="content-item">
@@ -63,7 +83,7 @@
                             <div class="text-desc">持续、稳定的光照可以提升光合作用效率，促进糖类、萜类、酚类等物质转化，形成饱满甜味与浓郁果香。光照不足则导致风味扁平、留香短。飞鸟通过气象卫星数据统计果园所在地的年均日照时长，并结合地理高程模型分析果园坡度、坡向，以分析果园的有效光照时长与照射均匀度，从而综合评估果园的光照适宜度。</div>
                         </div>
                         <div class="r-img">
-                            <img src="@/assets/images/content/certification3.png" alt="">
+                            <img src="@/assets/images/certification/certification3.png" alt="">
                         </div>
                     </div>
                     <div class="content-item">
@@ -72,7 +92,7 @@
                             <div class="text-desc">土壤理化条件影响养分吸收与风味合成。疏松壤土有利于有机酸与芳香物质合成，高有机质土壤可提升风味复杂性，微酸性环境增强微量元素活性。土壤板结、pH 失衡或重金属污染则损害风味。飞鸟结合作物长势和土壤理化数据，综合评估果园土壤的营养供给能力。</div>
                         </div>
                         <div class="r-img">
-                            <img src="@/assets/images/content/certification4.png" alt="">
+                            <img src="@/assets/images/certification/certification4.png" alt="">
                         </div>
                     </div>
                     <div class="content-item">
@@ -81,7 +101,168 @@
                             <div class="text-desc">水源洁净程度直接关系到植物体内的营养输送效率和代谢通畅度。清洁水源维持根系活力，促进等风味物质合成转运；污染水源迫使果树防御代谢，累积苦味、涩味物质，破坏口感。飞鸟结合遥感影像与地面水质监测数据，分析悬浮物浓度、氨氮含量、营养状态指数等指标，评估果园周边水源洁净程度。 失衡或重金属污染则损害风味。飞鸟结合作物长势和土壤理化数据，综合评估果园土壤的营养供给能力。</div>
                         </div>
                         <div class="r-img">
-                            <img src="@/assets/images/content/certification5.png" alt="">
+                            <img src="@/assets/images/certification/certification5.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 气象适宜认证 -->
+            <div class="text-img">
+                <div id="part2" class="part-position"></div>
+                <div class="content-title">
+                    <div class="main-title">气象适宜认证</div>
+                    <div class="title-line"></div>
+                    <div class="sub-title" style="padding: 0 50px">每一类作物都有其适配的气象节律。飞鸟以光照、水分、温度等多维气象数据为基础，构建气象适宜认证体系，既涵盖基于气候本底的 <span class="main-text">天然好环境</span> 认证，也包含应对气候扰动的 <span class="main-text">后天好环境</span> 认证，通过双重维度将抽象气象参数转化为可感知的风味品质指标，让消费者直观理解 “顺天时、应物候” 的农耕智慧。</div>
+                </div>
+                <div class="text-content formula-content">
+                    <div class="content-item">
+                        <div class="l-text">
+                            <div class="text-title">天然好环境（气候节律共鸣度）</div>
+                            <div class="text-desc">依托多源遥感与气象数据融合技术，构建作物全生育期气候需求模型，计算作物原生气候需求与种植园气象条件的匹配度。消费者可通过可视化 “气候 - 作物” 匹配度玫瑰图，直观获取产区积温、日照等关键要素与作物生长需求的契合程度，见证阳光雨露如何通过科学量化转化为果实的本真风味。</div>
+                            <div class="text-desc">
+                                <div class="text-formula">
+                                    天然好环境认证公式（气候节律共鸣度）：
+                                    <img src="@/assets/images/certification/formula1.png" alt="">
+                                </div>
+                            </div>
+                            <div class="text-desc">公式释义：</div>
+                            <div class="text-desc">
+                                <div class="text-formula">
+                                    <img src="@/assets/images/certification/formula2.png" alt="">
+                                    作物原生适宜条件需求的气候参数
+                                    <img class="pdl-20" src="@/assets/images/certification/formula3.png" alt="">
+                                    种植园多源遥感反演的时机气象参数
+                                </div>
+                            </div>
+                        </div>
+                        <div class="r-img">
+                            <img src="@/assets/images/certification/certification2-1.png" alt="">
+                        </div>
+                    </div>
+                    <div class="content-item">
+                        <div class="l-text">
+                            <div class="text-title">后天好环境（逆境风味转化率）</div>
+                            <div class="text-desc">面对倒春寒、阴雨、寡照等气候异常，飞鸟启动"逆境风味评估"系统。基于多源气象数据与田间物候监测，精准捕捉逆境发生时段、强度及持续周期，同步追踪果园应对气候异常的关键干预措施的实施记录，计算逆境风味转化率指数。让消费者直观感受逆境淬炼下的生长轨迹，解码气候胁迫与果香层次塑造的内在关联。</div>
+                            <div class="text-desc">
+                                <div class="text-formula">
+                                    后天好环境认证公式（逆境风味转化率）：
+                                    <img src="@/assets/images/certification/formula4.png" alt="">
+                                </div>
+                            </div>
+                            <div class="text-desc">公式释义：</div>
+                            <div class="text-desc">
+                                <div class="text-formula">
+                                    <img src="@/assets/images/certification/formula5.png" alt="">
+                                    智能预警系统监测的风险暴露时长比
+                                    <img class="pdl-20" src="@/assets/images/certification/formula6.png" alt="">
+                                    逆境管理后风味相关性物质理论浓度比
+                                </div>
+                            </div>
+                            <div class="text-desc">
+                                <div class="text-formula">
+                                    <img src="@/assets/images/certification/formula7.png" alt="">
+                                    农事干预认证记录的气候干预措施有效性验证值
+                                    <img class="pdl-20" src="@/assets/images/certification/formula8.png" alt="">
+                                    不同技术抗逆技术强化系数
+                                </div>
+                            </div>
+                        </div>
+                        <div class="r-img">
+                            <img src="@/assets/images/certification/certification2-2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 农事体系认证 -->
+            <div class="text-img">
+                <div id="part3" class="part-position"></div>
+                <div class="content-title">
+                    <div class="main-title">农事体系认证</div>
+                    <div class="title-line"></div>
+                    <div class="sub-title">营养充足与病害防控是糖分、香气及风味物质形成的核心要素。在飞鸟的农事管理数字化认证体系中，<span class="main-text">病虫害防治指数与营养供给度指数</span> 构成品质管控的双核心因子，通过全周期数据追踪与智能决策模型，实现对两大关键要素的精准量化与动态优化。</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/certification/certification3-1.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/certification/certification3-2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 生态园相认证 -->
+            <div class="text-img">
+                <div id="part4" class="part-position"></div>
+                <div class="content-title">
+                    <div class="main-title">生态园相认证</div>
+                    <div class="title-line"></div>
+                </div>
+                <div class="text-content">
+                    <div class="content-item">
+                        <div class="l-text">
+                            <div class="text-title">通风率</div>
+                            <div class="text-desc">1.通风率越高病虫害爆发风险越低。飞鸟运用无人机航飞获取果园正射影像、数字高程模型等，对果园进行厘米级信息化建模，计算果树间距、树高、冠幅形态等空间参数，计算不同果树自身枝条的通风情况以及果树与果树之间的遮挡程度，量化生成果园整体通风率指标。</div>
+                        </div>
+                        <div class="r-img">
+                            <img src="@/assets/images/certification/certification4-1.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/certification/certification4-2.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/certification/certification4-3.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 过程表型认证 -->
+            <div class="text-img">
+                <div id="part5" class="part-position"></div>
+                <div class="content-title">
+                    <div class="main-title">过程表型认证</div>
+                    <div class="title-line"></div>
+                </div>
+                <div class="text-content">
+                    <div class="content-item">
+                        <div class="l-text">
+                            <div class="text-title">作物时间累积度指数</div>
+                            <div class="text-desc">飞鸟依托多源遥感影像（如无人机 RGB 影像、卫星多光谱数据）与田间物联网传感器，构建覆盖作物全生长周期的数字化表型监测体系。通过深度学习算法自动识别作物萌芽期、展叶期、花期、坐果期、膨大期、转色期等关键物候节点，结合逐日气象数据（积温、光照时长），精确计算各物候期的持续天数，并与该品种历史平均数据及优质果实形成的最佳物候时长模型对比，生成时间累积度指数。该指数不仅用于评估作物是否遵循自然生长周期，还可通过分析积温不足或过长对次生代谢物积累的影响，为农事操作提供科学依据，确保风味物质在充足时间维度上完成积累。</div>
+                        </div>
+                        <div class="r-img">
+                            <img src="@/assets/images/certification/certification5-1.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/certification/certification5-2.png" alt="">
                         </div>
                     </div>
                 </div>
@@ -91,6 +272,19 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+
+const containerRef = ref(null)
+const handleClick = (e) => {
+  e.preventDefault()
+  const href = e.target.getAttribute('href'); // 获取目标 hash（如 #part1）
+  if (href) {
+    const target = document.querySelector(href); // 找到目标元素
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动
+    }
+  }
+}
 
 </script>
 
@@ -98,16 +292,52 @@
 .page-wrap {
     width: 100%;
     height: 100%;
+    overflow: auto;
     .page-top {
         width: 100%;
         height: 740px;
-        background: url("@/assets/images/home/banner.png") no-repeat;
+        background: url("@/assets/images/certification/banner.png") no-repeat;
         background-position: right bottom;
+        background-size: cover;
+    }
+    .page-affix {
+        ::v-deep {
+            .el-affix {
+                width: fit-content;
+            }
+            .el-anchor.el-anchor--vertical .el-anchor__list {
+                padding-left: 0;
+            }
+            .el-anchor__item {
+                justify-content: center;
+                align-items: center;
+                margin-top: 12px;
+            }
+            .el-anchor__marker {
+                display: none;
+            }
+            .el-anchor__link {
+                width: 206px;
+                background: #F2F2F2;
+                padding: 8px 0;
+                font-size: 22px;
+                line-height: 2;
+                color: #000;
+                text-align: center;
+                border-radius: 0 20px 0 0;
+                &.is-active {
+                    background: linear-gradient(#FFD489, #FDC25C);
+                }
+            }
+        }
     }
     .page-content {
         padding: 80px 0 40px 0;
         width: 1280px;
         margin: 0 auto;
+        margin-top: -380px;
+        // overflow: auto;
+        // height: calc(100%);
         .card-box {
             padding-top: 78px;
             .card-item {
@@ -147,8 +377,19 @@
         }
         .text-img {
             padding-top: 100px;
+            position: relative;
+            .part-position {
+                position: relative;
+                top: -80px;
+            }
             .text-content {
                 margin-top: 60px;
+                &.formula-content {
+                    .content-item {
+                        background: #fff;
+                        border: 1px solid rgba(0, 0, 0, 0.2);
+                    }
+                }
                 .content-item {
                     display: flex;
                     align-items: center;
@@ -189,6 +430,14 @@
                         font-size: 16px;
                         color: rgba(0, 0, 0, 0.6);
                         line-height: 28px;
+                        text-align: justify;
+                    }
+                    .text-formula {
+                        display: inline-flex;
+                        align-items: center;
+                    }
+                    .pdl-20 {
+                        padding-left: 20px;
                     }
                 }
                 .r-img {

src/views/pages/DefendLeague.vue

@@ -18,7 +18,50 @@
                     <div class="title-line"></div>
                     <div class="sub-title">YOUR CHOICES SHAPE THE FUTURE</div>
                 </div>
+                <div class="league-content">
+                     <el-row :gutter="0">
+                        <el-col :span="8">
+                            <div class="league-item">
+                                <img src="@/assets/images/content/league1.png" alt="">
+                                <div class="item-text">
+                                    <div class="item-title">消费即守护</div>
+                                    <div class="item-sub-title">订单直接驱动农法升级</div>
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="8">
+                            <div class="league-item">
+                                <img src="@/assets/images/content/league2.png" alt="">
+                                <div class="item-text">
+                                    <div class="item-title">能量可视化</div>
+                                    <div class="item-sub-title">小程序实时查看守护成果</div>
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="8">
+                            <div class="league-item">
+                                <img src="@/assets/images/content/league3.png" alt="">
+                                <div class="item-text">
+                                    <div class="item-title">代际可持续</div>
+                                    <div class="item-sub-title">让子孙永远尝得到自然本味</div>
+                                </div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
 
+            <div class="trace-bottom">
+                <img src="@/assets/images/content/defend2.png" alt="">
+                <div class="bottom-title">
+                    <div class="main-title">
+                        <img class="honor" src="@/assets/images/content/honor2.png" alt="">
+                        生态守护者联盟
+                    </div>
+                    <div class="sub-title">
+                        加入生态守护者联盟，让每一颗果实都成为未来生态的种子，从守护一棵树开始，续写人与自然共生共荣的故事——这片土地的未来，正藏在您此刻的选择里。
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -35,8 +78,9 @@
     .page-top {
         width: 100%;
         height: 740px;
-        background: url("@/assets/images/home/banner.png") no-repeat;
+        background: url("@/assets/images/content/defend-banner.png") no-repeat;
         background-position: right bottom;
+        background-size: cover;
     }
     .page-content {
         padding: 0px 0 40px 0;
@@ -48,6 +92,57 @@
         .source-img {
             padding: 60px 0 40px 0;
         }
+        .league-box {
+            padding-top: 50px;
+            .league-content {
+                padding-top: 34px;
+                .league-item {
+                    position: relative;
+                    .item-text {
+                        position: absolute;
+                        bottom: 24px;
+                        left: 24px;
+                        color: #fff;
+                        .item-title {
+                            font-size: 32px;
+                            line-height: 1.5;
+                            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+                        }
+                        .item-sub-title {
+                            padding-top: 2px;
+                            font-size: 20px;
+                            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+                        }
+                    }
+                }
+            }
+        }
+        .trace-bottom {
+            margin: 100px 0 80px 0;
+            position: relative;
+            .bottom-title {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                .honor {
+                    padding-right: 16px;
+                }
+                .main-title {
+                    font-size: 40px;
+                    display: inline-flex;
+                    align-items: center;
+                }
+                .sub-title {
+                    padding-top: 28px;
+                    font-size: 20px;
+                    padding: 28px 174px 0 174px;
+                    line-height: 1.5;
+                }
+            }
+        }
     }
 }
 </style>

src/views/pages/ThreeFlavors.vue

@@ -1,7 +1,25 @@
 <template>
-    <div class="page-wrap">
+    <div class="page-wrap" ref="containerRef">
         <div class="page-top"></div>
-        <div class="page-content">
+        <div class="page-affix">
+            <el-affix :offset="80">
+                <div class="affix-button">
+                    <el-anchor
+                        :container="containerRef"
+                        direction="vertical"
+                        type="default"
+                        @click="handleClick"
+                        >
+                        <el-anchor-link href="#part1" title="有滋味" />
+                        <el-anchor-link href="#part2" title="有风味" />
+                        <el-anchor-link href="#part3" title="有回味" />
+                    </el-anchor>
+                </div>
+            </el-affix>
+        </div>
+        <!-- 有滋味 -->
+        <div class="page-content to-top">
+            <div id="part1" class="part-position"></div>
             <div class="content-title">
                 <div class="main-title">有滋味</div>
                 <div class="title-line"></div>
@@ -18,7 +36,7 @@
                     </el-col>
                     <el-col :span="12">
                         <div class="r-img">
-                            <img src="@/assets/images/content/lichi.png" alt="">
+                            <img src="@/assets/images/flavors/lichi.png" alt="">
                         </div>
                     </el-col>
                 </el-row>
@@ -28,11 +46,11 @@
                         <el-col :span="12">
                             <div class="item-box">
                                 <div class="item-img">
-                                    <img src="@/assets/images/content/lichi2.png" alt="">
+                                    <img src="@/assets/images/flavors/lichi2.png" alt="">
                                 </div>
                                 <div class="item-text">
                                     <div class="item-num">
-                                        <img src="@/assets/images/content/number.png" alt="">
+                                        <img src="@/assets/images/flavors/number.png" alt="">
                                     </div>
                                     <div class="item-title">
                                         足够长时间的积累
@@ -46,11 +64,11 @@
                         <el-col :span="12">
                             <div class="item-box">
                                 <div class="item-img">
-                                    <img src="@/assets/images/content/lichi3.png" alt="">
+                                    <img src="@/assets/images/flavors/lichi3.png" alt="">
                                 </div>
                                 <div class="item-text">
                                     <div class="item-num">
-                                        <img src="@/assets/images/content/number2.png" alt="">
+                                        <img src="@/assets/images/flavors/number2.png" alt="">
                                     </div>
                                     <div class="item-title">
                                         全面的营养供给
@@ -68,7 +86,7 @@
                     <div class="one-bg">
                         <div class="one-text">
                             <div class="one-title">
-                                <img class="honor" src="@/assets/images/content/honor.png" alt="">
+                                <img class="honor" src="@/assets/images/flavors/honor.png" alt="">
                                 有味指数
                             </div>
                             <div class="one-desc">
@@ -76,7 +94,190 @@
                             </div>
                         </div>
                         <div class="one-img">
-                            <!-- <img src="@/assets/images/content/lichi4.png" alt=""> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 有回味 -->
+        <div class="page-content">
+            <div id="part2" class="part-position"></div>
+            <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/flavors/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/flavors/flavors2-2.png" alt="">
+                                </div>
+                                <div class="item-text">
+                                    <div class="item-num">
+                                        <img src="@/assets/images/flavors/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/flavors/flavors2-3.png" alt="">
+                                </div>
+                                <div class="item-text">
+                                    <div class="item-num">
+                                        <img src="@/assets/images/flavors/number2.png" alt="">
+                                    </div>
+                                    <div class="item-title">
+                                        轻微干旱
+                                    </div>
+                                    <div class="item-desc">
+                                        适度的水分胁迫会触发植物的渗透调节与抗氧化防御系统。为了应对轻微干旱，植物会主动积累可溶性糖、氨基酸（如脯氨酸）等渗透调节物质以维持细胞膨压，同时大幅提升抗氧化酶（如SOD、POD）活性及合成具有清除自由基能力的次生代谢物（如酚类、黄酮类、萜烯类），从而显著提升果实糖酸比与芳香物质浓度。
+                                    </div>
+                                </div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+                <div class="img-img last">
+                 <el-row :gutter="44">
+                        <el-col :span="12">
+                            <div class="item-box">
+                                <div class="item-img">
+                                    <img src="@/assets/images/flavors/flavors2-3.png" alt="">
+                                </div>
+                                <div class="item-text">
+                                    <div class="item-num">
+                                        <img src="@/assets/images/flavors/number3.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/flavors/flavors2-5.png" alt="">
+                                </div>
+                                <div class="item-text">
+                                    <div class="item-num">
+                                        <img src="@/assets/images/flavors/number4.png" alt="">
+                                    </div>
+                                    <div class="item-title">
+                                        气候扰动
+                                    </div>
+                                    <div class="item-desc">
+                                        适度的气候波动会激发植物的多维适应与保护机制。如昼夜温差的扩大则能显著提升植物光合产物的积累效率，使果实中葡萄糖、果糖等糖类物质浓度得以浓缩，同时挥发性酯类、醛类等芳香物质的合成代谢也被进一步激活。在种植过程中，提前规划作物种植布局与物候管理，既能将异常气候对产量的潜在风险降至最低，又能充分激发植物在逆境下的次生代谢潜力，最终实现果实风味品质与营养价值的双重提升。
+                                    </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/flavors/honor.png" alt="">
+                                有味指数
+                            </div>
+                            <div class="one-desc">
+                                飞鸟通过无人机高清近景照片与实时气象数据，精准捕捉病虫害迹象，动态追踪作物生长过程，生成 <span>时序病虫指数</span> ；利用低空智能感知技术解析田间水体、作物、伴生植被等生态要素的群落结构，科学评估果园 <span>生物多样性指数</span> ；深度耦合作物关键生育阶段的生长节律与气象波动，量化水分、温度等因子的供需契合度，形成 <span>气候节律共鸣度指数</span> ；系统解析果园在气候扰动下的响应效能，精准量化逆境对果实风味物质的诱导转化能力，构建 <span>逆境风味转化率指数</span> 。
+                            </div>
+                        </div>
+                        <div class="one-img">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 有回味 -->
+        <div class="page-content">
+            <div id="part3" class="part-position"></div>
+            <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/flavors/flavors3-1.png" alt="">
+                        </div>
+                    </el-col>
+                </el-row>
+
+                <div class="text-img-box">
+                    <div class="box-item">
+                        <div class="box-text">当一个记忆以嗅觉形式呈现时，会比语言、视觉或听觉形式更加情绪化。当提示以嗅觉形式出现时，他们会更加有身临其境的感觉，这就是动人的普鲁斯特效应，气味具有独特的能力，可以解锁以前已经遗忘但却生动、饱含情感的回忆。大多数气味提示的记忆位于生命的第一个十年，也就是童年时代。在童年时代，我们被父母无条件地爱着，是我们形成对这个世界的安全感的核心，也是我们对抗世界不确定的最强大的力量。</div>
+                        <div class="box-img">
+                            <img src="@/assets/images/flavors/flavors3-2.png" alt="">
+                        </div>
+                    </div>
+                    <div class="box-item">
+                        <div class="box-text">而最容易唤起这股内在的力量恰恰来自于日常可见的食物。日常的瓜果蔬菜就是现在的我们可以与小时候的回忆相互链接的桥梁，不断地提醒我们被这个世界深深地爱着。</div>
+                        <div class="box-img">
+                            <img src="@/assets/images/flavors/flavors3-3.png" alt="">
+                        </div>
+                    </div>
+                    <div class="box-item">
+                        <div class="box-text">小时候的味道，其实就是食材的自然本味。要复刻这种味道，就需要以同样的自然生态环境，同样的有机种植方式，才能唤起我们记忆中的力量。</div>
+                        <div class="box-img">
+                            <img src="@/assets/images/flavors/flavors3-3.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="text-img-one">
+                    <div class="one-bg">
+                        <div class="one-text">
+                            <div class="one-title">
+                                <img class="honor" src="@/assets/images/flavors/honor.png" alt="">
+                                有味指数
+                            </div>
+                            <div class="one-desc">
+                                飞鸟利用卫星遥感数据，从 <span>生境、地理区位、光照、水源、土壤</span> 五个关键指标出发，综合评估果园的 <span>区域环境指数</span> ；通过关键农事环节的全程追溯与认证，判断果园的 <span>病虫害防治指数</span> 。
+                            </div>
+                        </div>
+                        <div class="one-img">
                         </div>
                     </div>
                 </div>
@@ -86,6 +287,19 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+
+const containerRef = ref(null)
+const handleClick = (e) => {
+  e.preventDefault()
+  const href = e.target.getAttribute('href'); // 获取目标 hash（如 #part1）
+  if (href) {
+    const target = document.querySelector(href); // 找到目标元素
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动
+    }
+  }
+}
 
 </script>
 
@@ -93,16 +307,57 @@
 .page-wrap {
     width: 100%;
     height: 100%;
+    overflow: auto;
     .page-top {
         width: 100%;
         height: 740px;
-        background: url("@/assets/images/home/banner.png") no-repeat;
+        background: url("@/assets/images/flavors/banner.png") no-repeat;
         background-position: right bottom;
+        background-size: cover;
+    }
+    .page-affix {
+        ::v-deep {
+            .el-affix {
+                width: fit-content;
+            }
+            .el-anchor.el-anchor--vertical .el-anchor__list {
+                padding-left: 0;
+            }
+            .el-anchor__item {
+                justify-content: center;
+                align-items: center;
+                margin-top: 12px;
+            }
+            .el-anchor__marker {
+                display: none;
+            }
+            .el-anchor__link {
+                width: 206px;
+                background: #F2F2F2;
+                padding: 8px 0;
+                font-size: 22px;
+                line-height: 2;
+                color: #000;
+                text-align: center;
+                border-radius: 0 20px 0 0;
+                &.is-active {
+                    background: linear-gradient(#FFD489, #FDC25C);
+                }
+            }
+        }
     }
     .page-content {
         padding: 80px 0 40px 0;
         width: 1280px;
         margin: 0 auto;
+        position: relative;
+        &.to-top {
+            margin-top: -204px;
+        }
+        .part-position {
+            position: relative;
+            top: -80px;
+        }
         .text-img {
             padding-top: 80px;
             .l-text {
@@ -127,9 +382,16 @@
         }
         .img-img {
             padding-top: 60px;
+            &.last {
+                padding-top: 11px;
+            }
             .item-box {
                 height: 100%;
                 background: #F8F8F8;
+                transition: all 0.3s;
+                &:hover {
+                    transform: translateY(-10px);
+                }
                 .item-text {
                     padding: 30px 20px 25px 20px;
                     position: relative;
@@ -160,7 +422,7 @@
                 height: 181px;
                 display: flex;
                 align-items: center;
-                background: url("@/assets/images/content/lichi4.png") no-repeat top right;
+                background: url("@/assets/images/flavors/lichi4.png") no-repeat top right;
             }
             .one-text {
                 .one-title {
@@ -190,6 +452,17 @@
                 flex: none;
             }
         }
+        .text-img-box {
+            .box-item {
+                padding-top: 60px;
+                .box-text {
+                    padding-bottom: 60px;
+                    line-height: 30px;
+                    font-size: 20px;
+                    color: #000;
+                }
+            }
+        }
     }
 }
 </style>

src/views/pages/TraceSource.vue

@@ -83,8 +83,9 @@
     .page-top {
         width: 100%;
         height: 740px;
-        background: url("@/assets/images/home/banner.png") no-repeat;
+        background: url("@/assets/images/content/source-banner.png") no-repeat;
         background-position: right bottom;
+        background-size: cover;
     }
     .page-content {
         padding: 80px 0 40px 0;