feiniao-farm-h5/src/views/old_mini/agri_file/pages/diagnosisReport.vue

<template>
    <div class="diagnosis-report-page">
        <div class="report-header">
            <div class="report-header__title">
                种植报告
                <img src="@/assets/img/report/star.png" alt="" class="report-header__star">
            </div>
            <div class="report-header__desc">梅县区雁洋镇南福村的飞鸟智慧农业</div>
            <div class="report-header__desc">梅州柚子基地</div>
        </div>

        <div class="report-main">
            <div class="base-bg">
                <div class="base-title">
                    <img src="@/assets/img/report/base-title.png" alt="" class="base-title__icon">
                    <span class="base-title__text">基本信息</span>
                </div>
                <div class="base-content">
                    <div class="base-content__row">
                        <span class="base-content__label">种植作物：</span>
                        <span class="base-content__value">柚子—金柚</span>
                    </div>
                    <div class="base-content__row">
                        <span class="base-content__label">品种特质：</span>
                        <span class="base-content__value">晚熟型特色柚类品种，生育周期长、品质形成期较长，能够充分利用成熟前的光温条件，因此对膨果期水分管理和成熟期气候调控要求较高。</span>
                    </div>
                    <div class="base-content__row">
                        <span class="base-content__label">物候信息：</span>
                        <span class="base-content__value">当前处于果实膨大后期至成熟前期，预计11月上中旬采收。</span>
                    </div>
                    <div class="base-content__row">
                        <span class="base-content__label">土壤条件：</span>
                        <span class="base-content__value">土壤类型为赤红壤，表层（0-30 cm）黏粒含量约35%，属于偏黏质地；土壤pH约5.2，有机碳含量约12 g/kg，总氮含量约0.8 g/kg。根据土壤养分评价，该地块氮素供应处于中等偏低水平。</span>
                    </div>
                    <div class="base-content__row">
                        <span class="base-content__label">地形条件：</span>
                        <span class="base-content__value">丘陵缓坡，海拔约150 m，坡度约8°，东南坡。</span>
                    </div>
                </div>
            </div>
            <!-- Tab 切换 -->
            <div class="report-tabs">
                <div
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="report-tabs__item"
                    :class="{ active: activeTab === tab.key }"
                    @click="activeTab = tab.key"
                >
                    <svg class="report-tabs__icon" viewBox="0 0 24 24" fill="none">
                        <path
                            v-for="(d, i) in tab.paths"
                            :key="i"
                            :d="d"
                            stroke="currentColor"
                            stroke-width="1.6"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>
                    <span>{{ tab.label }}</span>
                    <i v-if="activeTab === tab.key" class="report-tabs__arrow"></i>
                </div>
            </div>

            <div class="report-panel">
                <div class="report-panel__title">
                    <span>{{ tabs.find((t) => t.key === activeTab)?.label }}</span>
                </div>

                <div
                    v-for="(section, sIdx) in SECTION_MAP[activeTab]"
                    :key="`${activeTab}-${sIdx}`"
                    class="report-block"
                >
                    <div
                        v-if="section.title"
                        class="report-block__divider"
                        :class="{ 'report-block__divider--plain': section.titlePlain }"
                    >
                        <span class="report-block__title-text">{{ section.title }}</span>
                        <span
                            v-if="section.titleHint"
                            class="report-block__title-hint"
                        >{{ section.titleHint }}</span>
                    </div>

                    <!-- 导语在图表前（品质潜力） -->
                    <p
                        v-if="section.intro && section.introFirst"
                        class="report-block__intro"
                    >{{ section.intro }}</p>

                    <!-- 图例（病虫风险等，图片外单独绘制） -->
                    <ul
                        v-if="section.legend?.length"
                        class="report-block__legend"
                        :class="{ 'report-block__legend--split': section.legendSplit }"
                    >
                        <li
                            v-for="(item, lIdx) in section.legend"
                            :key="lIdx"
                            class="report-block__legend-item"
                        >
                            <i
                                class="report-block__legend-dot"
                                :style="{ background: item.color }"
                            ></i>
                            <span>{{ item.label }}</span>
                        </li>
                    </ul>

                    <!-- 图表占位（后续替换图片） -->
                    <div
                        v-if="section.showChart && !section.chartAfter"
                        class="report-block__chart"
                        :class="{ 'report-block__chart--framed': section.chartFramed }"
                    >
                        <img
                            class="report-block__chart-img"
                            :class="{ 'report-block__chart-img--natural': section.chartNatural }"
                            :src="section.chartSrc || ''"
                            alt=""
                        />
                    </div>

                    <p v-if="section.note" class="report-block__note">{{ section.note }}</p>

                    <!-- 导语在图表后 -->
                    <p
                        v-if="section.intro && !section.introFirst"
                        class="report-block__intro"
                    >{{ section.intro }}</p>

                    <!-- 段落型 -->
                    <div
                        v-if="section.type === 'text'"
                        class="report-block__card"
                    >
                        <p class="report-block__text">{{ section.content }}</p>
                    </div>

                    <!-- 条目型 -->
                    <template v-else-if="section.type === 'list'">
                        <div
                            v-for="(item, iIdx) in section.items"
                            :key="iIdx"
                            class="report-block__card"
                            :class="{
                                'report-block__card--plain': section.plain,
                                'report-block__card--blue': section.cardTone === 'blue',
                            }"
                        >
                            <div class="report-block__item-title">{{ item.title }}</div>
                            <p class="report-block__text">{{ item.content }}</p>
                        </div>
                    </template>

                    <!-- 图表在内容后（农事管理 / 病虫表格） -->
                    <div
                        v-if="section.chartAfterSrc || (section.showChart && section.chartAfter)"
                        class="report-block__chart report-block__chart--after"
                        :class="{
                            'report-block__chart--framed': section.chartFramed,
                            'report-block__chart--table': section.chartAfterTable,
                        }"
                    >
                        <img
                            class="report-block__chart-img"
                            :src="section.chartAfterSrc || section.chartSrc || ''"
                            alt=""
                        />
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="share-btn" @click="handleShare">转发报告</div> -->
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import wx from "weixin-js-sdk";

// ---------------------------------------------------------------------------
// 常量
// ---------------------------------------------------------------------------

const TABS = [
    {
        key: "weather",
        label: "气象胁迫",
        paths: ["M13 2L4 14h7l-1 8 9-12h-7l1-8z"],
    },
    {
        key: "pest",
        label: "病虫风险",
        paths: [
            "M8 7l-2-2",
            "M16 7l2-2",
            "M12 5v2",
            "M8.5 10a3.5 3.5 0 0 1 7 0v5a3.5 3.5 0 0 1-7 0v-5z",
            "M5 12h3",
            "M16 12h3",
            "M5 16h3",
            "M16 16h3",
        ],
    },
    {
        key: "quality",
        label: "品质潜力",
        paths: [
            "M12 21c0-6 4-10 9-11-1 6-5 10-9 11z",
            "M12 21c0-6-4-10-9-11 1 6 5 10 9 11z",
            "M12 21V10",
        ],
    },
    {
        key: "input",
        label: "必要投入",
        paths: [
            "M7 3h7l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
            "M14 3v4h4",
            "M9 13h6",
            "M9 17h6",
        ],
    },
    {
        key: "manage",
        label: "农事管理",
        paths: [
            "M6 4h12a1 1 0 0 1 1 1v15H5V5a1 1 0 0 1 1-1z",
            "M9 2v3",
            "M15 2v3",
            "M5 9h14",
            "M9 13h.01",
            "M12 13h.01",
            "M15 13h.01",
            "M9 17h.01",
            "M12 17h.01",
        ],
    },
];

/** 各模块演示内容（后续接接口解析结果） */
const SECTION_MAP = {
    weather: [
        {
            title: "气候条件",
            type: "text",
            content:
                "梅州属亚热带季风气候，年平均气温约21～23℃，年降雨量约1470～1800 mm，无霜期300天以上，光热水资源总体充足，能够较好满足金柚生长需求（适宜年均温约18～21℃，≥10℃积温约6000℃以上，年降雨量约1500 mm左右或以上）。",
        },
        {
            title: "异常气象导致的营养胁迫风险",
            type: "text",
            content:
                "2026年春季金柚开花、谢花阶段经历持续春旱，随后出现旱涝急转过程。与常年同期相比，春季干旱持续时间明显增加，随后降雨快速集中，导致土壤水分和根系吸收环境发生明显变化，树体营养供应受到影响，重点表现为钙、硼等元素吸收障碍。",
        },
        {
            title: "气象指标10年统计值",
            titleHint: "(柱顶标注原始值)",
            titlePlain: true,
            chartFramed: true,
            showChart: true,
            chartSrc: require("@/assets/img/report/p1.png"),
            legendSplit: true,
            legend: [
                { color: "linear-gradient(180deg, #41ABFF 0%, #2199F8 100%)", label: "累计降水量(mm)" },
                { color: "linear-gradient(180deg, #FEC99D 0%, #FF9843 100%)", label: "平均气温(°C)" },
                { color: "linear-gradient(180deg, #A1D8AB 0%, #71C280 100%)", label: "平均相对湿度(%)" },
                { color: "linear-gradient(180deg, #FCD993 0%, #FCCB6C 100%)", label: "累计日照时数(h)" },
                { color: "linear-gradient(180deg, #DB95FF 0%, #D27AFF 100%)", label: "连续干旱时长(d)" },
                { color: "linear-gradient(180deg, #FAB6BE 0%, #FA9AA6 100%)", label: "连续寡照时长(d)" },
                { color: "linear-gradient(90deg, #9EDFE2 0%, #6ACFD4 100%)", label: "旱涝急转频次(次)" },
            ],
        },
        {
            type: "list",
            items: [
                {
                    title: "谢花期持续干旱，降低钙硼吸收与果实供应能力",
                    content:
                        "2026年开花—谢花期出现超过10天的持续干旱，较常年同期干旱持续时间增加约4天（约50%）。土壤水分不足会降低根系吸收能力，限制钙、硼等元素供应；同时干旱增强叶片蒸腾，使吸收的钙更多向叶片分配，进一步减少果实获得量。钙硼不足会影响果皮细胞壁形成和组织稳定性，增加后期裂果、落果风险。",
                },
                {
                    title: "旱涝急转削弱根系功能，加剧营养胁迫",
                    content:
                        "2026年干旱后快速转入强降雨，形成明显旱涝急转。该点位坐果—幼果期旱涝急转频次达到全年最高的3次，较常年偏多；同期累计降水量达到656 mm，较常年增加约15%。前期干旱降低根系活力，后期强降雨又易造成养分淋失和根区缺氧；同时酸性土壤条件下铝毒胁迫可能进一步限制根系吸收，加剧钙硼供应不足。",
                },
            ],
        },
    ],
    pest: [
        {
            title: "异常气象诱发的病虫害风险",
            type: "text",
            content:
                "2026年春季干旱和后续旱涝急转过程，在影响树体营养状态的同时，也增加了病虫害发生风险。其中，重点关注蓟马危害及后期病害风险。",
        },
        {
            title: "各物候期病虫害风险等级",
            titlePlain: true,
            chartFramed: true,
            showChart: true,
            chartSrc: require("@/assets/img/report/p4.png"),
            legend: [
                { color: "linear-gradient(180deg, #41ABFF 0%, #2199F8 100%)", label: "真菌型病害" },
                { color: "linear-gradient(180deg, #FEC99D 0%, #FF9843 100%)", label: "蓟马" },
                { color: "linear-gradient(180deg, #A1D8AB 0%, #71C280 100%)", label: "刺吸式害虫" },
                { color: "linear-gradient(180deg, #FCD993 0%, #FCCB6C 100%)", label: "细菌型病害" },
            ],
            note: "注:图一因指标量纲不同，采用标准化直方图对比阶段差异;病虫害风险等级为1低、2中、3高。",
        },
        {
            type: "list",
            items: [
                {
                    title: "春季持续干旱，增加蓟马发生风险",
                    content:
                        "2026年春梢—开花期连续干旱超过10天，较常年同期明显偏长。温暖偏干环境有利于蓟马繁殖，而此时金柚处于嫩花和花器发育阶段，组织幼嫩，易受蓟马危害，影响授粉和坐果稳定。该年气象过程与2020—2021年蓟马风险较高年份较为相似，均表现为春季干旱偏重，因此需重点关注花期防控。",
                },
                {
                    title: "前期钙硼不足叠加高温高湿，增加后期溃疡病风险",
                    content:
                        "2026年果实膨大期平均气温达到26.8℃，较常年同期偏高约0.5℃；累计降水量达到804 mm，较常年增加约10%，并出现2次旱涝急转过程。前期干旱造成钙硼供应不足，削弱果皮细胞壁结构和组织抗性；进入膨果—成熟阶段后，高温高湿和持续湿润环境有利于病原菌扩散，叠加风雨伤口，易诱发溃疡病、炭疽病、疫霉褐腐病等病害。",
                },
            ],
        },
    ],
    quality: [
        {
            type: "list",
            introFirst: true,
            intro: "注：橙色表示高于平均水平，蓝色表示低于平均水平;单元格内上方为偏离幅度，下方为原始值(点位/平均水下)",
            showChart: true,
            chartNatural: true,
            chartSrc: require("@/assets/img/report/p2.png"),
            note: "注：橙色表示高于平均水平，蓝色表示低于平均水平；单元格内上方为偏离幅度，下方为原始值（点位/平均水平）",
            items: [
                {
                    title: "生长环境条件总体适宜，为金柚生长提供基础保障",
                    content:
                        "重点关注温度和水分条件。该点位各物候阶段平均气温整体与梅州平均水平接近，秋梢生长期、春梢—开花期和果实膨大期平均气温分别为27.1℃、17.0℃和26.8℃，能够满足金柚正常生长和果实发育需求。对应累计降水量分别为537 mm、353 mm和804 mm，水分条件总体充足，但膨果期降水偏多，需关注高湿环境带来的病害风险。",
                },
                {
                    title: "光合积累条件整体较好，有利于品质形成",
                    content:
                        "重点关注日照条件。该点位春梢—开花期累计日照时数达到420 h，高于梅州平均水平（380 h），有利于花期前后树体营养积累；果实膨大期和转色—成熟期累计日照时数分别为650 h和450 h，均高于平均水平（620 h、420 h），能够促进果实干物质积累和糖分形成。",
                },
                {
                    title: "果实发育期温差优势明显，有利于糖分积累和品质提升",
                    content:
                        "重点关注膨果期和成熟期温光条件。果实膨大期平均昼夜温差达到9.1℃，高于梅州平均水平（7.5℃），同时高温日数仅为22天，低于平均水平（35天），较大的昼夜温差和较低的高温胁迫有利于果实稳定膨大和品质形成。进入转色—成熟期后，平均昼夜温差达到9.8℃，高于平均水平（8.8℃），有利于糖分积累和风味形成。",
                },
                {
                    title: "成熟期水分偏多，是品质稳定的主要限制因素",
                    content:
                        "重点关注成熟期降水条件。该点位转色—成熟期累计降水量为88 mm，低于梅州平均水平（120 mm），整体水分条件较适宜，有利于果实成熟；但若叠加短期强降雨过程，仍可能造成果实吸水波动，增加裂果和品质不稳定风险。",
                },
            ],
        },
    ],
    input: [
        {
            type: "list",
            cardTone: "blue",
            items: [
                {
                    title: "必须投入",
                    content:
                        "排灌设施：当前处于果实膨大后期至成熟前期，果实对水分稳定性要求较高。该点位土壤偏黏，雨后排水压力较大，建议配置蓄水、滴灌/微喷及排水沟，实现旱时补水、雨时排涝。",
                },
                {
                    title: "建议投入",
                    content:
                        "防风防灾设施：该点位位于丘陵缓坡区域，成熟前期果实负载增加，强风和强降雨可能造成落果、枝条损伤及坡面冲刷。建议加强树体支撑、防风加固和坡面排水措施。",
                },
                {
                    title: "优化投入",
                    content:
                        "水肥一体化与墒情监测：土壤保肥保水能力一般，且养分供应存在不足风险。建议配置墒情监测和水肥一体化设备，根据果实膨大和成熟需求精准调控水肥，提高果实品质和投入效率。",
                },
            ],
        },
    ],
    manage: [
        {
            type: "text",
            content: "结合金柚生长发育特点，将风险防控措施与关键农事目标相结合，形成全年动态管理方案。",
            showChart: true,
            chartAfter: true,
            chartSrc: require("@/assets/img/report/p3.png"),
        },
    ],
};

// ---------------------------------------------------------------------------
// 页面状态
// ---------------------------------------------------------------------------
const route = useRoute();
const activeTab = ref("weather");
const tabs = TABS;

const handleShare = () => {
    const query = {
        askInfo: { title: "转发报告", content: "是否分享给好友" },
        shareText: "",
        targetUrl: "diagnosis_report",
        paramsPage: JSON.stringify({
            id: route.query.id,
            zone_id: route.query.zone_id || route.query.zoneId || 42,
            fromShare: 1,
        }),
        imageUrl: "https://birdseye-img.sysuimars.com/temp/field.png",
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};
</script>

<style lang="scss" scoped>
.diagnosis-report-page {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f5f6f8;
    box-sizing: border-box;
    padding-bottom: 60px;

    .report-header {
        width: 100%;
        height: 148px;
        box-sizing: border-box;
        padding: 26px 20px 0;
        background: url("@/assets/img/report/title-bg.png") no-repeat center center;
        background-size: 100% 100%;
        color: #fff;

        &__title {
            position: relative;
            font-size: 35px;
            font-family: 'pangmenzhengdao';
        }

        &__star {
            width: 23px;
            height: 23px;
            margin-top: -8px;
        }

        &__desc {
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            opacity: 0.95;
        }
    }
}

.report-main {
    padding: 0 12px;
    position: relative;
    z-index: 1;

    .base-bg {
        width: 100%;
        height: 380px;
        margin: 12px 0;
        padding: 5px;
        box-sizing: border-box;
        background: url("@/assets/img/report/base-bg.png") no-repeat center center /100% 100%;
        .base-title {
            display: flex;
            gap: 5px;
            .base-title__icon {
                width: 44px;
                height: 44px;
            }
            .base-title__text {
                font-size: 18px;
                font-weight: 500;
                color: #fff;
                margin-top: 5px;
            }
        }
        .base-content {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.79) 0%, #FFFFFF 11.7%, #FFFFFF 100%);
            border-radius: 10px;
            border: 1px solid #FFFFFF;
            padding: 12px 14px;
            margin-top: -10px;
            font-size: 14px;
            line-height: 22px;

            &__row {
                & + & {
                    margin-top: 8px;
                }
            }

            &__label {
                color: #86909c;
            }

            &__value {
                color: #1d2129;
            }
        }
    }
}

.report-tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    &__item {
        position: relative;
        flex: 0 0 auto;
        min-width: 76px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 64px;
        border-radius: 10px;
        background: #eef0f3;
        color: #86909c;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid transparent;
        white-space: nowrap;

        &.active {
            background: #fff;
            border-color: rgba(33, 153, 248, 0.45);
            color: #1d2129;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(33, 153, 248, 0.08);

            .report-tabs__icon {
                color: #2199f8;
            }
        }
    }

    &__icon {
        width: 22px;
        height: 22px;
        color: #86909c;
    }

    &__arrow {
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 0;
        height: 0;
        margin-left: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
        filter: drop-shadow(0 1px 0 rgba(33, 153, 248, 0.25));
    }
}

.report-panel {
    margin-top: 12px;
    padding: 16px 12px 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

    &__title {
        position: relative;
        display: inline-block;
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: #1d2129;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 2px;
            width: 36px;
            height: 8px;
            border-radius: 4px;
            background: rgba(33, 153, 248, 0.35);
            z-index: -1;
        }
    }
}

.report-block {
    & + & {
        margin-top: 16px;
    }

    &__divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        color: #1d2129;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;

        &::before,
        &::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e5e6eb;
        }

        &--plain {
            display: block;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            color: #1d2129;

            &::before,
            &::after {
                display: none;
            }
        }
    }

    &__title-hint {
        margin-left: 4px;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: #86909c;
    }

    &__legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;

        &--split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 100px;
            row-gap: 8px;

            .report-block__legend-dot {
                width: 20px;
            }
        }
    }

    &__legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        font-size: 12px;
        line-height: 16px;
        color: #4e5969;
    }

    &__legend-dot {
        display: block;
        width: 15px;
        height: 6px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    &__chart {
        margin-bottom: 10px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;

        &--framed {
            // border: 1px solid #e5e6eb;
            background: #fff;
            padding: 8px 4px 4px;
        }

        &--after {
            margin-top: 10px;
            margin-bottom: 0;

            .report-block__chart-img {
                height: 550px;
            }
        }

        &--table {
            .report-block__chart-img {
                height: 410px;
            }
        }
    }

    &__chart-img {
        display: block;
        width: auto;
        max-width: none;
        height: 175px;

        &--natural {
            height: 440px;
        }
    }

    &__intro {
        margin: 0 0 10px;
        font-size: 14px;
        line-height: 20px;
        color: #1d2129;
    }

    &__note {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 18px;
        color: #86909c;
    }

    &__plain {
        & + & {
            margin-top: 12px;
        }
    }

    &__card {
        padding: 12px;
        border-radius: 8px;
        background: #f7f8fa;
        box-sizing: border-box;

        & + & {
            margin-top: 10px;
        }

        &--blue {
            background: #edf6ff;

            .report-block__item-title {
                color: #2199f8;
            }

            .report-block__text {
                color: #1d2129;
            }
        }
    }

    &__item-title {
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        color: #1d2129;
    }

    &__text {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        color: #4e5969;
    }
}

.share-btn {
    position: fixed;
    left: 50%;
    bottom: 64px;
    z-index: 10;
    transform: translateX(-50%);
    min-width: 120px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 30px;
    border-radius: 22px;
    background: linear-gradient(180deg, #72c1ff 0%, #2199f8 100%);
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
</style>