youwei-pc-vue/src/views/pages/Certification.vue

<template>
    <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>
                <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 id="part1" 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/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/certification/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/certification/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/certification/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/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>
            </div>
        </div>
    </div>
</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>

<style lang="scss" scoped>
.page-wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    .page-top {
        width: 100%;
        height: 740px;
        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 {
                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;
            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;
                    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;
                        text-align: justify;
                    }
                    .text-formula {
                        display: inline-flex;
                        align-items: center;
                    }
                    .pdl-20 {
                        padding-left: 20px;
                    }
                }
                .r-img {
                    
                    transition: all 0.3s;
                }
            }
        }
    }
}
</style>