首页按要求修改

public/static/config/config.js

@@ -181,4 +181,219 @@ let systemConfig = {
     },
     yygl: {},
     yxgl: {},
+    examplelist:[
+        {
+            title:"基础能力",
+            data:[
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "一张图资源预览",
+                    text: "一张图资源聚焦于资源预览的高效性与便捷性核心需求，打造轻量化、高适配的单图资源快速预览解决方案，覆盖各类图片素材场景的预览诉求，旨在解决传统资源查看中加载繁琐、信息获取不直观、筛选效率低等问题。",
+                    picture: "./static/images/example/1-1.png",
+                    url:"http://10.235.245.174:2024"
+                }, {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "一张图开发者中心",
+                    text: "一张图开发者中心是面向开发者打造的图片资源预览能力开放与集成服务平台，作为一张图资源预览产品的技术开放枢纽，聚焦图片快速预览核心能力的高效输出，为企业开发者、第三方开发团队及个人开发者提供标准化、轻量化、高适配的图片预览技术解决方案。",
+                    picture: "./static/images/example/1-2.png",
+                    url:"http://10.235.245.174:2103/home/default"
+                }, {
+                    tags: ["盈浦街道、夏阳街道"],
+                    title: "一张图二三维引擎示例",
+                    text: "一张图二三维引擎示例是依托一张图技术体系打造的二三维一体化引擎能力演示与实践参考体系，聚焦图片资源在二三维可视化场景下的渲染、交互、融合应用，通过丰富的示例场景、可复用的代码模板、完整的能力演示。",
+                    picture: "./static/images/example/1-3.jpg",
+                    url:"http://10.235.245.174:2102/"
+                }
+            ]
+        },
+        {
+            title:"平台自建",
+            data:[
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区香花桥农业信息平台",
+                    text: "青浦区香花桥农业信息平台是街道立足本地稻米、林果、花卉等特色农业产业基础，以科技赋能农业现代化、数字化转型为核心，联动上海市农业科学院等科研院所打造的综合性农业智慧服务平台，是香花桥街道推进乡村振兴、落实 “智慧农业 + 产业融合” 发展战略的核心载体。",
+                    picture: "./static/images/example/2-1.jpg",
+                    url:"http://10.235.245.174:2030"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "学区查询",
+                    text: "学区查询是面向家长、教育管理部门、学校打造的义务教育阶段学区信息精准查询与管理服务体系，是破解传统学区查询 “信息滞后、流程繁琐、核实困难” 等问题的数字化便民举措，也是教育部门实现学区科学管理、教育资源均衡分配的重要数字化支撑，核心实现学区信息的权威发布、精准匹配与高效查询，保障入学相关主体的信息知情权与获取便利性。",
+                    picture: "./static/images/example/2-2.jpg",
+                    url:"http://121.43.55.7:2121/#/"
+                }, {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "科委产业地图",
+                    text: "科委产业地图是由科技主管部门主导打造的产业创新要素数字化整合与智能服务平台，作为区域科技创新与产业发展的 “数字仪表盘”，以破解产业 “底数不清、资源分散、匹配低效” 等痛点为核心，深度融合 GIS 地理信息、AI 大数据、可视化技术，整合产业链、创新链、人才链、服务链 “四链” 核心资源，构建全域产业发展全景画像",
+                    picture: "./static/images/example/2-3.jpg",
+                    url:"http://10.235.245.174:2032/#/"
+                },{
+                    tags: ["盈浦街道、夏阳街道"],
+                    title: "青浦区资环审计",
+                    text: "青浦区资源环境审计（简称 “青浦区资环审计”）是青浦区审计局围绕长三角生态绿色一体化发展等国家战略，以守护区域生态环境、规范资源利用、推动绿色发展为核心的审计监督工作，由资源环境审计科具体负责，在组织架构、审计重点、协作机制、实践成效等方面形成了鲜明特色。青浦区资环审计通过机制创新与精准监督，有效推动了区域生态保护与绿色发展，为长三角生态绿色一体化提供了坚实审计保障。",
+                    picture: "./static/images/example/2-4.jpg",
+                    url:"http://10.235.245.174:2025/"
+                },{
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "开店一件事",
+                    text: "开店一件事是一套从前期调研规划到后期运营优化的系统性实操工作，核心是以市场需求为导向，完成合法筹备、资源落地与可持续经营，最终实现盈利和长期发展，核心逻辑是 “精准定位 + 合规落地 + 高效运营”。分析行业趋势、周边竞品，明确目标客群的消费能力和需求，找到自身差异化竞争优势，避免盲目入局。",
+                    picture: "./static/images/example/2-5.jpg",
+                    url:"https://aixq.shqp.gov.cn/kdyjs/"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区小区画像专题",
+                    text: "青浦区小区画像专题是立足区域 “幸福温暖家” 治理体系建设目标，依托区大数据资源平台与新版 “社区云” 基层治理底座打造的小区精细化数字刻画与智能赋能服务体系。作为青浦区全量信息视图在社区治理场景的深化应用，专题以破解小区管理 “底数不清、诉求分散、治理粗放” 等痛点为核心，通过整合多维度小区数据资源、构建标准化画像体系、赋能全场景治理应用，为基层治理、民生服务、城市更新等提供精准数据支撑，助力打造更具温度、更高效能的智慧社区生态。",
+                    picture: "./static/images/example/2-6.jpg",
+                    url:"http://10.235.245.174:2026/community/"
+                }
+            ]
+        },
+        {
+            title:"业务支撑",
+            data:[
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦幸福云数字化看板",
+                    text: "青浦区基层治理的 “最后一公里枢纽” 与 “民生服务前沿阵地”，村居 “一网统管” 深度融入区级城运体系，承接街镇平台调度指令，聚焦群众 “急难愁盼” 问题，构建 “党建引领、数据驱动、多元参与、闭环处置” 的精细化治理模式，破解村居事务繁杂、响应滞后、协同不足等治理痛点。",
+                    picture: "./static/images/example/3-11.jpg",
+                    url:"http://10.249.33.246:8016/screen/"
+                }, 
+                {
+                    tags: ["盈浦街道、夏阳街道"],
+                    title: "青浦区全量信息视图",
+                    text: "青浦区全量信息视图是立足区域数字化转型与城市治理现代化需求打造的全域数据融合可视化智慧管理平台，作为青浦区 “一网通办”“一网统管” 建设的核心数字底座，深度整合全区跨部门、跨领域全量数据资源，构建起 “一屏观全域、一网管全城” 的智慧化管理体系，为区域政务服务、城市治理、产业发展、民生保障等全场景提供全景化数据支撑与科学决策依据。",
+                    picture: "./static/images/example/3-3.jpg",
+                    url:"http://10.235.245.84:9099/eleOverview/eleOverview?loginToken=21232f297a57a5a743894a0e4a801fc3"
+                }, 
+                {
+                    tags: ["盈浦街道、夏阳街道"],
+                    title: "一网统管业务智能协同平台",
+                    text: "一网统管业务智能协同平台是城市运行 “一网统管” 体系的核心中枢，以 “数据融合、智能分拨、联动处置、闭环评价” 为核心，打通跨部门数据与业务壁垒，实现城市事件 “一网受理、一体派单、联动处置、一屏总览”，支撑 “高效处置一件事”，推动治理从 “各自为战” 向 “协同共治”、从 “被动响应” 向 “主动预警” 转型，是超大城市精细化治理的核心技术与业务载体。以下从核心定位、技术架构、治理机制、核心功能、实施成效与发展方向展开概述。",
+                    picture: "./static/images/example/3-1.png",
+                    url:"http://10.235.234.131/vue-dispatch/login?redirect=dashboard"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "城市体征3.0",
+                    text: "城市体征是对城市运行状态、发展特征、功能表现的系统性量化与质性描述，类比人体生理体征（如心率、血压、体温），将城市视为有机整体，通过多维度指标、数据和现象，反映其在经济、社会、空间、生态、治理等方面的实时状态、发展趋势、健康程度及问题短板，是城市精细化管理、科学规划决策、可持续发展的核心依据。",
+                    picture: "./static/images/example/3-2.jpg",
+                    url:"http://10.249.33.189:81/cockpit/"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区统一地址管理平台",
+                    text: "青浦区统一地址管理平台是立足区域数字化转型战略、紧扣 “一网通办”“一网统管” 建设要求打造的全域地址标准化管理与数据融合支撑平台，作为青浦区空间地理信息数字化的核心基础设施，以破解地址管理 “多库并存、标准不一、关联困难” 等痛点为目标。",
+                    picture: "./static/images/example/3-4.jpg",
+                    url:"https://10.235.251.4:2008/geoAM/?accessToken=66e1605cb81047d4803368972c5a64e3#/"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区城市运行管理平台",
+                    text: "青浦区城市运行管理平台是上海 “一网统管” 体系在青浦的本地化落地载体，以 “三级平台、五级应用” 为架构，以 “数据驱动、智能协同、高效处置” 为核心，覆盖 “一屏观全城、一网管全域、一体抓落实”，支撑跨部门、跨层级、跨场景的城市治理与应急响应，是青浦数字化治理的核心中枢，也是服务进博会、防汛抗台等重大任务的关键保障。以下从核心定位、技术架构、核心功能、治理机制、实施成效与发展方向展开概述。",
+                    picture: "./static/images/example/3-5.jpg",
+                    url:"http://10.235.234.98/#/index"
+                },
+                // {
+                //   tags: ["盈浦街道", "夏阳街道"],
+                //   title: "赵巷镇城市运行管理平台",
+                //   text: "赵巷镇城市运行管理平台是上海青浦区赵巷镇落实 “一网统管” 建设的核心载体，以镇城运中心为枢纽，融合 AI、大数据、物联网等技术，构建 “一屏观全域、一网管全城” 的精细化治理体系，实现城市运行态势实时感知、联勤联动高效处置与治理流程闭环管理。",
+                //   picture: "./static/images/example/3-6.jpg",
+                //   url:"http://10.235.234.99/grid/#/login"
+                // }, 
+                // {
+                //     tags: ["盈浦街道", "夏阳街道"],
+                //     title: "赵巷镇环宝龙综合网格治理平台",
+                //     text: "赵巷镇环宝龙综合网格治理平台是上海青浦区赵巷镇以党建引领、智慧赋能、多元共治为核心，依托 “一网统管” 打造的基层治理创新平台，聚焦宝龙片区商业多元、人员复杂的特点，破解 “三跨” 难题，形成 “问题发现 — 协同议事 — 联动处置 — 效果评估” 闭环，已获评上海市城运中心 2025 年优秀案例。以下从核心定位、架构机制、功能应用、治理模式与成效、发展方向展开概述。",
+                //     picture: "./static/images/example/3-7.jpg",
+                //     url:"http://10.235.234.99/grid/#/login"
+                // },  
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区渣土管理平台",
+                    text: "青浦区渣土治理的 “数字监管中枢” 与 “全链条协同枢纽”，平台深度融入区级城运 “一网统管” 体系，承接上海市建筑垃圾监管标准，聚焦工程渣土、装修垃圾等全品类处置环节，构建 “源头可溯、运输可控、消纳可查、执法可依” 的数字化闭环管理体系，破解非法排放、“黑车” 运营、跨域倾倒等行业痛点。",
+                    picture: "./static/images/example/3-8.jpg",
+                    url:"http://10.235.80.66:8082/#/index"
+                },  
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "徐泾镇产业数智服务平台",
+                    text: "徐泾镇产业高质量发展的 “数智引擎” 与 “服务枢纽”，平台深度融入青浦区营商环境优化体系，承接区级 “一网通办”“一网统管” 协同要求，聚焦企业全生命周期需求，构建 “党建引领、数智赋能、全链覆盖、政企共赢” 的产业服务生态，破解企业办事流程繁琐、资源对接不畅、政策匹配不准等痛点。",
+                    picture: "./static/images/example/3-12.png",
+                    url:"http://demo.metamaker.cn/xujing-gis-blank/#/"
+                },  
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "华新产业资源全生命周期管理平台",
+                    text: "华新产业资源全生命周期管理平台是上海市青浦区华新镇为优化营商环境、防控产业风险、提升资源配置效率打造的数字化治理中枢，以 “全周期覆盖、全要素协同、全流程闭环” 为核心，打通招商、准入、监管、服务、退出各环节，形成 “数据驱动 + 风险防控 + 精准服务” 的产业治理模式，支撑楼宇经济与园区高质量发展，是华新镇 “通达华新・易企行” 营商服务体系的核心载体。以下从核心定位、建设背景、技术架构、关键功能、实施成效与发展方向展开概述。",
+                    picture: "./static/images/example/3-10.jpg",
+                    url:"http://3ddataanalytics.huaxinsz.cn:8787/#/login"
+                }, 
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "赵巷大居环卫一体化管理平台",
+                    text: "赵巷大居环卫一体化管理平台是青浦区 “一网统管” 在赵巷新城一站大居的环卫专属落地载体，以 “全流程闭环、智能协同、精细监管” 为核心，整合垃圾收运、道路保洁、水域保洁、绿化管养等业务，通过物联网、AI、GIS 等技术打通人、车、物、事全链条，实现环卫作业从 “被动应对” 到 “主动管控”、从 “各自为战” 到 “一体协同” 的转型，是大型居住区环卫精细化治理的标杆案例。以下从核心定位、技术架构、核心功能、治理机制、实施成效与发展方向展开概述。",
+                    picture: "./static/images/example/3-13.png",
+                    url:"http://222.71.55.194:3510/bigscreen"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "水务一张图二期平台",
+                    text: "基于水务行业 “一网统管” 分级建设逻辑与 “平台 + 应用” 核心模式，水务一张图二期平台作为连接市级（一级）统筹平台与基层水务治理单元的关键枢纽，聚焦区域化水务管理实战需求，实现数据汇聚、业务协同与精准处置的闭环运作。以下从核心定位、架构设计、核心功能、技术支撑、应用价值等方面进行详细介绍。",
+                    picture: "./static/images/example/3-14.jpg",
+                    url:"http://221.181.88.134:9999/qp-swyth-web-v2/login"
+                },  
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "长三角一体化无人机监管平台",
+                    text: "长三角低空经济协同发展的 “安全中枢” 与 “服务枢纽”，平台打破省市行政壁垒与空域管理碎片化格局，承接国家低空管理政策标准，整合苏浙皖沪四地无人机飞行数据、空域资源、监管力量，构建 “统一标准、跨域协同、智能高效” 的低空飞行治理体系，实现 “一网管低空、一屏观全域” 的跨区域监管闭环。",
+                    picture: "./static/images/example/3-15.jpg",
+                    url:"http://10.235.220.134:8889/#/index"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区城市运行管理平台",
+                    text: "青浦城市治理的 “数字大脑” 与 “指挥中枢”，平台立足长三角生态绿色一体化发展示范区定位，承接上海市 “一网统管” 建设要求，整合全域治理资源、打通部门壁垒，构建 “一屏观全域、一网管全城” 的精细化治理体系，实现城市运行态势实时感知、联勤联动高效处置与治理流程闭环管理。",
+                    picture: "./static/images/example/3-16.png",
+                    url:"http://10.235.234.98/#/login"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "夏阳街道青湖路智慧化管理",
+                    text: "夏阳街道青湖路智慧化管理，是上海青浦区夏阳街道依托 “一网统管” 与 “智・夏阳” 城运平台打造的智慧街区标杆，以 “四位一体感知网络 + 闭环治理 + 多元共治” 为核心，聚焦交通、安全、环境等治理痛点，实现从 “人海战术” 到 “精准智理” 的转型，成为超大城市街区智慧化管理的典型实践。以下从核心定位、技术支撑、治理机制、核心应用、实施成效与发展方向展开概述。",
+                    picture: "./static/images/example/3-17.png",
+                    url:"http://10.235.234.10:8001/#/"
+                },  
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦农业农村信息共享平台",
+                    text: "青浦农业农村信息共享平台是上海市青浦区农业农村委牵头打造的区级农业农村数据与服务中枢，以 “数据整合、业务协同、服务下沉、决策赋能” 为核心，依托 “农业农村一张图 2.0” 与 APP，打通数据壁垒、覆盖生产 / 监管 / 服务 / 治理全链条，已完成二期建设并上线运行，为乡村振兴与农业现代化提供数字底座。以下从核心定位、建设背景、核心架构、关键功能、实施成效与发展方向展开概述。",
+                    picture: "./static/images/example/3-18.jpg",
+                    url:"https://10.235.251.4:2027/"
+                },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区清明（冬至）工作指挥平台",
+                    text: "青浦区清明（冬至）工作指挥平台是区城运中心与民政局在 “一网统管” 体系下共建的祭扫保障专用指挥中枢，以 “一屏观全、三级联动、精准管控、闭环处置” 为核心，聚焦 8 家经营性公墓及周边区域，通过数据整合、智能感知与协同调度，破解祭扫高峰人流车流管控难、安全隐患多、处置效率低等痛点，成为上海殡葬祭扫智慧保障的标杆平台。以下从核心定位、技术架构、治理机制、核心应用、实施成效与发展方向。",
+                    picture: "./static/images/example/3-19.jpg",
+                    url:"http://10.235.234.10:8008/#/index"
+                },
+                // {
+                //     tags: ["盈浦街道", "夏阳街道"],
+                //     title: "智慧环卫管理系统",
+                //     text: "智慧环卫管理系统是依托物联网、大数据、AI、GIS 等技术，对环卫作业的人、车、物、事全流程数字化管控的平台，核心是 “数据驱动、智能协同、精细监管、降本增效”，推动环卫从 “被动应对” 转向 “主动预判”、从 “粗放管理” 走向 “精细治理”，是智慧城市与 “一网统管” 在环卫领域的关键落地载体。以下从核心定位、技术架构、核心功能、应用价值、实施要点与发展方向展开概述。",
+                //     picture: "./static/images/example/3-20.png",
+                //     url:"http://10.90.11.155:9608/#/"
+                // },
+                {
+                    tags: ["盈浦街道", "夏阳街道"],
+                    title: "青浦区消防救援支队一网统管",
+                    text: "青浦区消防安全治理的 “数字大脑” 与 “应急中枢”，平台深度融入区级城运 “一网统管” 体系，承接上海市消防救援局物联网联网标准与安全韧性城市建设要求，聚焦火灾预防、应急救援、隐患治理全链条，构建 “感知全面、预警精准、处置高效、协同闭环” 的数字化消防治理体系，破解高层建筑、人员密集场所、乡村聚落等场景火灾防控难题。",
+                    picture: "./static/images/example/3-21.jpg",
+                    url:"http://10.249.32.183:9608/#/"
+                },  
+            ]
+        }
+    ]
 };

src/components/AppVue/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="footer">Copyright@2025 青浦区一张图 主办单位：青浦区政务服务中心</div>
+  <div class="footer">Copyright © 2026青浦区“一张图”区级节点 主办单位：青浦区政务服务中心</div>
 </template>
 
 <script>

src/components/AppVue/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="header">
-    <div class="logo">青浦一张图</div>
+    <div class="logo">为青浦区“一张图”区级节点</div>
     <div class="userdropdown">
       <User />
     </div>

src/components/AppVue/digitalScrollersComp.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="count-flop" :key="compKey">
     <!--  -->
-    <div
-      :class="item !== '.' ? 'count-flop-box' : 'count-flop-point'"
-      v-for="(item, index) in value"
-      :key="index"
-    >
-      <div v-if="item !== '.'" class="count-flop-content" :class="['rolling_' + item]">
-        <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">
-          {{ item2 }}
+    
+      <div
+        :class="item !== ',' ? 'count-flop-box' : 'count-flop-point'"
+        v-for="(item, index) in value"
+        :key="index"
+      >
+        <div>
+        <div v-if="item !== ','" class="count-flop-content" :class="['rolling_' + item]">
+          <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">
+            {{ item2 }}
+          </div>
+        </div>
+        <div v-else class="count-flop-content">,</div>
         </div>
       </div>
-      <div v-else class="count-flop-content">.</div>
-    </div>
     <!--  -->
     <div v-if="suffix" class="count-flop-unit">{{ suffix }}</div>
   </div>
@@ -53,8 +56,8 @@ watch(
   display: inline-block;
   font-size: 0;
   /* 可更改 */
-  height: 100px;
-  line-height: 100px;
+  height: 80px;
+  line-height: 80px;
   font-size: 50px;
   font-weight: 700;
   color: #ffffff;
@@ -70,22 +73,23 @@ watch(
 .count-flop-box {
   /* 可更改 */
   margin-right: 5px;
-  width: 86px;
+  width: 60px;
   color: #ffffff;
-  background-color: rgba(6, 41, 78, 0.7);
+  /* background-color: rgba(6, 41, 78, 0.7); */
   border: 1px solid #2663a5;
   /* box-shadow: 0 2px 5px #2663a5; */
-  /*
-  这里的高度要比上面height的少2px
-  */
-  line-height: 98px;
-  border-radius: 6px;
-}
- 
+  /* line-height: 98px; */
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(128deg, #00002d, #2220), linear-gradient(136deg, #e5e5e5de, #00000000, #00000000, #00000000);
+}
+
 .count-flop-point {
   /* 可更改 */
   margin-right: 5px;
-  width: 10px;
+  width: 15px;
 }
  
 .count-flop-content {

src/views/HomePage.vue

@@ -1,14 +1,40 @@
 <template>
   <div class="home container">
-    <div class="part1">
-      <div>
+
+    <div class="affix-container" >
+      <el-affix :offset="200" >
+        <div style="padding: 10px;font-size: 14px;height:300px;cursor: pointer;display: flex;justify-content: center;align-items: center;">
+          <el-steps direction="vertical" :active="activeIndex">
+            <el-step title="顶部" @click="goAnchor('top')" :icon="Edit"/>
+            <el-step title="应用案例" @click="goAnchor('yyal')" :icon="Edit"/>
+            <el-step title="基础能力" @click="goAnchor('jcnl')" :icon="Edit"/>
+            <el-step title="平台自建" @click="goAnchor('ptzj')" :icon="Edit"/>
+            <el-step title="业务支撑" @click="goAnchor('ywzc')" :icon="Edit"/>
+            <el-step title="六大核心" @click="goAnchor('hxgn')" :icon="Edit"/>
+          </el-steps>
+          
+        </div>
+      </el-affix>
+    </div>
+    <div class="part1" id="top">
+      <div style="margin-left: 10%;">
         <div class="super-title">青浦区“一张图”区级节点</div>
-        <div class="title-sub ">以二三维一体化引擎为核心，构建政务时空数据治理与应用服务生态，赋能城市精细化治理</div>
-        <div class="part1-1">
+        <div class="title-sub">以二三维一体化引擎为核心</div>
+        <div class="title-sub">构建政务时空数据治理与应用服务生态</div>
+        <div class="title-sub">赋能城市精细化治理</div>
+        <div class="count-title">调用总数</div>
+        <div><digitalScrollersComp :val="totalCallNumber" /></div>
+         <div class="count-title" style="margin: 20px 0px 20px 0px;">
+          <span class="text1">昨日调用量</span>
+          <span class="count"><NumberScroll :value="lastDayCall" :duration="2000" /></span>
+          <span class="text1">次</span>
+        </div>
+        <!-- <div class="part1-1">
           <div class="part1-1-1">
+            <span class="text">调用总数</span>
             <div class="number-container">
-              <span class="text">调用总数</span>
-               <digitalScrollersComp :val="totalCallNumber" />
+              
+               <digitalScrollersComp :val="totalCallNumber" /> -->
               <!-- <span v-for="(num, index) in totalCall" :key="index">
                 <span v-if="num.indexOf(',') > -1">
                   <span class="separator">,</span>
@@ -19,8 +45,8 @@
                   </span>
                 </span>
               </span> -->
-              <span class="text">次</span>
-            </div>
+              <!-- <span class="text">次</span> -->
+            <!-- </div>
           </div>
           <div class="part1-1-2">
             <div class="call-count-container">
@@ -33,22 +59,28 @@
               <div class="line"></div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="darkblue-background">
       <div class="row">
-        <div>
-          <div class="strong-data blue "><NumberScroll :value="unitNum" :duration="2000" />个</div>
-          <div class="font middle">授权委办数</div>
+        <div class="radius-container">
+          <div>
+            <div class="strong-data text-color"><NumberScroll :value="unitNum" :duration="2000" />个</div>
+            <div class="font text-desc-color">授权委办数</div>
+          </div>
         </div>
-        <div>
-          <div class="strong-data blue "><NumberScroll :value="appNum" :duration="2000" />个</div>
-          <div class="font middle">授权应用数</div>
+        <div class="radius-container">
+          <div>
+            <div class="strong-data text-color"><NumberScroll :value="appNum" :duration="2000" />个</div>
+            <div class="font text-desc-color">授权应用数</div>
+          </div>
         </div>
-        <div>
-          <div class="strong-data blue "><NumberScroll :value="userNum" :duration="2000" />个</div>
-          <div class="font middle">授权用户数</div>
+        <div class="radius-container">
+          <div>
+            <div class="strong-data text-color"><NumberScroll :value="userNum" :duration="2000" />个</div>
+            <div class="font text-desc-color">授权用户数</div>
+          </div>
         </div>
       </div>
       <div class="second-title ">
@@ -166,24 +198,50 @@
         </div>
       </div>
 
-      <div class="title " style="margin-top:90px ;">应用案例</div>
+      <div class="title " style="margin-top:90px ;" id="yyal">应用案例</div>
       <div class="title-sub ">技术创新与政务需求深度融合，打造高效、安全、可扩展的时空数据安全平台</div>
 
-      <div class="row" style="margin-top: 90px;">
-        <div>
-          <div class="strong-data blue "><NumberScroll :value="365" :duration="2000" />个</div>
-          <div class="font middle">地名地址</div>
+      <div class="row" style="margin-top: 90px;justify-content: space-between;">
+        <div class="al-container">
+          <div class="al-container-border">
+            <div>
+              <div class="strong-data text-color"><NumberScroll :value="3212560" :duration="2000" />次</div>
+              <div class="font text-color">地名地址</div>
+            </div>
+          </div>
         </div>
-        <div>
-          <div class="strong-data blue "><NumberScroll :value="366" :duration="2000" />个</div>
-          <div class="font middle">坐标转换</div>
+        <div class="al-container">
+          <div class="al-container-border">
+            <div>
+              <div class="strong-data  text-color"><NumberScroll :value="2362106" :duration="2000" />次</div>
+              <div class="font text-color">坐标转换</div>
+            </div>
+          </div>
         </div>
-        <div>
-          <div class="strong-data blue "><NumberScroll :value="367" :duration="2000" />个</div>
-          <div class="font middle">地图服务</div>
+        <div class="al-container">
+          <div class="al-container-border">
+            <div>
+              <div class="strong-data text-color"><NumberScroll :value="8625997" :duration="2000" />次</div>
+              <div class="font text-color">地图服务</div>
+            </div>
+          </div>
         </div>
       </div>
-      <el-tabs v-model="activeUseCase" class="usecase-tabs" @tab-click="handleClick" stretch="true">
+
+      <div v-for="useCaseItem in examplelist" :key="useCaseItem.title" :id="useCaseItem.title === '基础能力' ? 'jcnl' : useCaseItem.title === '平台自建' ? 'ptzj' : useCaseItem.title === '业务支撑' ? 'ywzc' : ''">
+        <div class="title " style="margin-top:90px;margin-bottom: 20px;">{{useCaseItem.title}}</div>
+        <div class="warp-container">
+          <div class="warp-page-card" v-for="item in useCaseItem.data" :key="item.title" @click="handleTabsOpenPage(item)">
+            <div class="warp-page-img" :style="`background-image: url(${item.picture});`"></div>
+            <div class="warp-page-text">
+              <div class="warp-page-text-title">{{ item.title }}</div>
+              <div class="warp-page-text-desc">{{ item.text }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- <el-tabs v-model="activeUseCase" class="usecase-tabs" @tab-click="handleClick" stretch="true">
         <el-tab-pane label="dataProcass" name="dataProcass">
           <template #label>
             <div class="tab-lab">
@@ -212,7 +270,7 @@
               <div :class="activeUseCase == 'decisionHelping' ? 'blue' : ''">特色场景</div>
             </div>
           </template></el-tab-pane>
-      </el-tabs>
+      </el-tabs> 
       <div class="warp-row">
         <div v-for="useCaseItem in useCase[activeUseCase]" :key="useCaseItem.title" class="use-case"
           :style="`background-image: url(${useCaseItem.picture});cursor: pointer;`" @click="handleTabsOpenPage(useCaseItem)">
@@ -234,82 +292,109 @@
           </div>
         </div>
       </div>
+      -->
 
-      <div class="title " style="margin-top:90px ;">实践与探索·六大核心功能</div>
+      <div class="title " style="margin-top:90px ;" id="hxgn">实践与探索·六大核心功能</div>
       <div class="title-sub ">聚焦政务场景痛点，打造从数据治理到应用落地的全链路创新解决方案</div>
 
       <div class="row" style="margin-top: 36px;">
         <div class="lightblue-container six-router">
-          <div class="third-title">
-            <el-icon color="white" size="45px">
-              <Coin />
-            </el-icon>
-            时空数据管理
+          <div class="lightblue-container-boder">
+          <div class="img-container">
+            <!-- <div class="img-border"></div> -->
+            <img
+              :src="require('@/assets/images/common/gn/1.png')"
+              mode="scaleToFill"
+              class="row-warp-page-img"
+            />
+          </div>
+          <div class="font lightgrey">
+            <p class="lightgrey-title">时空数据管理</p>
+            <p class="lightgrey-desc">覆盖数据质量检查、加工、管理、服务发布全流程，支持矢量/栅格数据标准化处理，实现多格式转换与瓦片定制，保障数据规范可用。</p>
+          </div>
           </div>
-          <p class="font lightgrey">
-            覆盖数据质量检查、加工、管理、服务发布全流程，支持矢量/栅格数据标准化处理，实现多格式转换与瓦片定制，保障数据规范可用。
-          </p>
         </div>
         <div class="lightblue-container six-router">
-          <div class="third-title">
-            <el-icon color="white" size="45px">
-              <Orange />
-            </el-icon>
-            二三维一体化引擎
+          <div class="lightblue-container-boder">
+            <div class="img-container">
+              <img
+                :src="require('@/assets/images/common/gn/2.png')"
+                mode="scaleToFill"
+                class="row-warp-page-img"
+              />
+            </div>
+            <div class="font lightgrey">
+              <p class="lightgrey-title">二三维一体化引擎</p>
+              <p class="lightgrey-desc">嵌入式SDK支撑地图交互、空间分析、数据可视化，涵盖热力图/聚合图/迁徙图等多维呈现，实现精准定位与场景切换。</p>
+            </div>
           </div>
-          <p class="font lightgrey">
-            嵌入式SDK支撑地图交互、空间分析、数据可视化，涵盖热力图/聚合图/迁徙图等多维呈现，实现精准定位与场景切换。
-          </p>
         </div>
         <div class="lightblue-container six-router">
-          <div class="third-title">
-            <el-icon color="white" size="45px">
-              <Guide />
-            </el-icon>
-            时空门户
+          <div class="lightblue-container-boder">
+            <div class="img-container">
+              <img
+                :src="require('@/assets/images/common/gn/3.png')"
+                mode="scaleToFill"
+                class="row-warp-page-img"
+                style="transform: rotate(150deg);"
+              />
+            </div>
+            <div class="font lightgrey">
+              <p class="lightgrey-title">时空门户</p>
+              <p class="lightgrey-desc">整合平台访问统计、功能演示、服务导航，提供视频教程与业务场景展示，快速上手平台核心能力，支撑政务场景应用。</p>
+            </div>
           </div>
-          <p class="font lightgrey">
-            整合平台访问统计、功能演示、服务导航，提供视频教程与业务场景展示，快速上手平台核心能力，支撑政务场景应用。
-          </p>
         </div>
       </div>
-      <div class="row">
+      <div class="row" style="margin-bottom: 50px;">
         <div class="lightblue-container six-router">
-          <div class="third-title">
-            <el-icon color="white" size="45px">
-              <Tickets />
-            </el-icon>
-            微功能
-          </div>
-          <p class="font lightgrey">
-            支持拓扑计算、空间量算、几何运算与数据转换，批量处理海量时空数据，适配规划、管理多场景计算需求。
-          </p>
+          <div class="lightblue-container-boder">
+            <div class="img-container">
+              <img
+                :src="require('@/assets/images/common/gn/4.png')"
+                mode="scaleToFill"
+                class="row-warp-page-img"
+              />
+            </div>
+            <div class="font lightgrey">
+              <p class="lightgrey-title">微功能</p>
+              <p class="lightgrey-desc">支持拓扑计算、空间量算、几何运算与数据转换，批量处理海量时空数据，适配规划、管理多场景计算需求。</p>
+            </div>
+        </div>
         </div>
         <div class="lightblue-container six-router">
-          <div class="third-title">
-            <el-icon color="white" size="45px">
-              <Open />
-            </el-icon>
-            应用管理
+          <div class="lightblue-container-boder">
+            <div class="img-container">
+              <img
+                :src="require('@/assets/images/common/gn/5.png')"
+                mode="scaleToFill"
+                class="row-warp-page-img"
+              />
+            </div>
+            <div class="font lightgrey">
+              <p class="lightgrey-title">应用管理</p>
+              <p class="lightgrey-desc">统一接入各类时空业务应用，管控访问权限与应用信息，实现“接入-访问-管理”全流程闭环，支撑区级特色应用建设。</p>
+            </div>
           </div>
-          <p class="font lightgrey">
-            统一接入各类时空业务应用，管控访问权限与应用信息，实现“接入-访问-管理”全流程闭环，支撑区级特色应用建设。
-          </p>
         </div>
         <div class="lightblue-container six-router">
-          <div class="third-title">
-            <el-icon color="white" size="45px">
-              <Help />
-            </el-icon>
-            运行管理
+          <div class="lightblue-container-boder">
+            <div class="img-container">
+              <img
+                :src="require('@/assets/images/common/gn/6.png')"
+                mode="scaleToFill"
+                class="row-warp-page-img"
+              />
+            </div>
+            <div class="font lightgrey">
+              <p class="lightgrey-title">运行管理</p>
+              <p class="lightgrey-desc">实时监控平台运行数据，负责数据全生命周期管理与权限管控，建立四级管理架构，保障系统合规安全运行。</p>
+            </div>
           </div>
-          <p class="font lightgrey">
-            实时监控平台运行数据，负责数据全生命周期管理与权限管控，建立四级管理架构，保障系统合规安全运行。
-          </p>
         </div>
       </div>
     </div>
-    <div class="dark-background">
+    <!-- <div class="dark-background">
       <div class="row">
         <img :src="require('@/assets/images/common/home-bg2.png')" />
         <div class="col">
@@ -346,13 +431,10 @@
     <div class="darkblue-background image-background col"
       :style="`background-Image:url('${require('@/assets/images/common/home-bg4.png')}');`">
       <div class="row" style="margin-top: auto;">
-        <!-- <ElButton type="primary">
-          了解更多
-        </ElButton> -->
       </div>
-    </div>
+    </div> -->
 
-    <div class="blue-background col">
+    <!-- <div class="blue-background col">
       <div class="warp-row">
         <div class="block-page-router">
           <div class="title">
@@ -433,8 +515,8 @@
           </div>
         </div>
       </div>
-    </div>
-    <div class="bluedark-background col">
+    </div> -->
+    <!-- <div class="bluedark-background col">
       <div>
         <div class="super-title">多应用标准化接入</div>
         <div class="super-title">打破“烟囱式”壁垒</div>
@@ -447,16 +529,16 @@
       :style="`background-Image:url('${require('@/assets/images/common/home-bg5.png')}');`">
       <div class="row" style="margin-top: auto;">
       </div>
-    </div>
+    </div> -->
   </div>
-  <div class="darkblue-background col" style="height: auto;">
+  <!-- <div class="darkblue-background col" style="height: auto;">
     <div class="super-title grey">
       <div>全链路运行监督</div>
       <div>据驱动优化决策</div>
     </div>
     <p class="font grey middle">实时统计服务调用、用户分布、应用活跃度等核心指标，全维度反馈系统运行状态，为资源调配与功能迭代提供数据支撑</p>
     <img :src="require('@/assets/images/common/home-bg6.png')" />
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -476,10 +558,44 @@ export default {
   },
   data() {
     return {
-      lastDayCall: "0",
+      lastDayCall: "239566",
       totalCall: ["0", "0", "0", ",", "0", "0", "0"],
-      totalCallNumber: "0",
-
+      totalCallNumber: "18,659,623",
+      sections: ['top', 'yyal', 'jcnl', 'ptzj', 'ywzc', 'hxgn'],
+      affixOptions: [
+        {
+          title: '顶部',
+          type: 'top',
+          index:1,
+        },
+        {
+          title: '应用案例',
+          type: 'yyal',
+          index:2,
+        },
+        {
+          title: '基础能力',
+          type: 'jcnl',
+          index:3,
+        },
+        {
+          title: '平台自建',
+          type: 'ptzj',
+          index:4,
+        },
+        {
+          title: '业务支撑',
+          type: 'ywzc',
+          index:5,
+        },
+        {
+          title: '六大核心',
+          type: 'hxgn',
+          index:6,  
+        },
+      ],
+      activeIndex:0,
+      observer: null,
       serveNum: 0,
       userNum: 0,
       appNum: 0,
@@ -494,32 +610,36 @@ export default {
         { key: "comprehensive-decision", icon: "", title: "特色场景" }
       ],
       resourceTop: [
+          
       ],
       userTop: [
       ],
+
+      examplelist:systemConfig.examplelist,
+
       useCase: {
         dataProcass: [{
           tags: ["盈浦街道", "夏阳街道"],
           title: "一张图资源预览",
-          text: "一张图资源聚焦于资源预览的高效性与便捷性核心需求，打造轻量化、高适配的单图资源快速预览解决方案，覆盖各类图片素材场景的预览诉求，旨在解决传统资源查看中加载繁琐、信息获取不直观、筛选效率低等问题。一张图资源以 “极简操作、清晰呈现” 为核心设计原则，支持全类型图片资源的快速解析与展示，无需完整加载文件即可精准呈现图片的核心画质、主体构图、关键细节等信息，同时多使用场景的操作习惯，兼顾素材平台运营、个人素材管理、办公资源筛选等不同使用需求。",
+          text: "一张图资源聚焦于资源预览的高效性与便捷性核心需求，打造轻量化、高适配的单图资源快速预览解决方案，覆盖各类图片素材场景的预览诉求，旨在解决传统资源查看中加载繁琐、信息获取不直观、筛选效率低等问题。",
           picture: require('@/assets/images/common/u301.png'),
           url:"http://10.235.245.174:2024"
         }, {
           tags: ["盈浦街道", "夏阳街道"],
           title: "一张图开发者中心",
-          text: "一张图开发者中心是面向开发者打造的图片资源预览能力开放与集成服务平台，作为一张图资源预览产品的技术开放枢纽，聚焦图片快速预览核心能力的高效输出，为企业开发者、第三方开发团队及个人开发者提供标准化、轻量化、高适配的图片预览技术解决方案，助力各类业务场景快速集成图片资源预览能力，降低开发成本，提升产品的图片资源处理与展示体验。",
+          text: "一张图开发者中心是面向开发者打造的图片资源预览能力开放与集成服务平台，作为一张图资源预览产品的技术开放枢纽，聚焦图片快速预览核心能力的高效输出，为企业开发者、第三方开发团队及个人开发者提供标准化、轻量化、高适配的图片预览技术解决方案。",
           picture: require("@/assets/images/common/u301.png"),
           url:"http://10.235.245.174:2103/home/default"
         }, {
           tags: ["盈浦街道、夏阳街道"],
           title: "一张图二三维引擎示例",
-          text: "一张图二三维引擎示例是依托一张图技术体系打造的二三维一体化引擎能力演示与实践参考体系，聚焦图片资源在二三维可视化场景下的渲染、交互、融合应用，通过丰富的示例场景、可复用的代码模板、完整的能力演示，让开发者快速理解并掌握一张图二三维引擎的核心能力与实际应用方法，降低引擎集成与二次开发门槛。支持主流开发语言与前端框架，同时配套在线调试环境与效果预览功能，开发者可直接调试、修改、复用示例代码，快速将引擎能力集成至自有项目中。此外，示例体系将持续迭代更新，紧跟引擎技术升级与业务场景拓展，为开发者提供最新的能力演示与实践参考。",
+          text: "一张图二三维引擎示例是依托一张图技术体系打造的二三维一体化引擎能力演示与实践参考体系，聚焦图片资源在二三维可视化场景下的渲染、交互、融合应用，通过丰富的示例场景、可复用的代码模板、完整的能力演示。",
           picture: require("@/assets/images/common/u661.png"),
           url:"http://10.235.245.174:2102/"
         }, {
           tags: ["盈浦街道", "夏阳街道"],
           title: "青浦区香花桥农业信息平台",
-          text: "青浦区香花桥农业信息平台是街道立足本地稻米、林果、花卉等特色农业产业基础，以科技赋能农业现代化、数字化转型为核心，联动上海市农业科学院等科研院所打造的综合性农业智慧服务平台，是香花桥街道推进乡村振兴、落实 “智慧农业 + 产业融合” 发展战略的核心载体。平台紧扣街道高标准农田建设、无人农场落地、特色农产品培育的实际需求，整合物联网、人工智能、大数据、卫星遥感等技术，打通农业生产、经营、服务、管理全产业链信息壁垒，为辖区农户、农业合作社、农业管理部门提供一站式、智能化、场景化的农业信息服务解决方案。",
+          text: "青浦区香花桥农业信息平台是街道立足本地稻米、林果、花卉等特色农业产业基础，以科技赋能农业现代化、数字化转型为核心，联动上海市农业科学院等科研院所打造的综合性农业智慧服务平台，是香花桥街道推进乡村振兴、落实 “智慧农业 + 产业融合” 发展战略的核心载体。",
           picture: require("@/assets/images/common/u302.png"),
           url:"http://10.235.245.174:2030"
         },
@@ -541,7 +661,7 @@ export default {
           title: "青浦区统一地址管理平台",
           text: "青浦区统一地址管理平台是立足区域数字化转型战略、紧扣 “一网通办”“一网统管” 建设要求打造的全域地址标准化管理与数据融合支撑平台，作为青浦区空间地理信息数字化的核心基础设施，以破解地址管理 “多库并存、标准不一、关联困难” 等痛点为目标，通过地址资源的标准化整合、全生命周期管理与智能化应用，为城市治理、政务服务、产业发展、民生保障等全场景提供权威、精准、统一的地址数据支撑，夯实区域数字孪生城市与智慧治理的底座根基。青浦区统一地址管理平台通过地址标准化打破数据壁垒、以三维可视化提升治理精度、用场景化应用释放数据价值，为长三角生态绿色一体化发展示范区建设提供了高质量的地址数据底座与智慧治理解决方案。",
           picture: require("@/assets/images/common/u301.png"),
-          url:"https://10.235.251.4:2008/geoAM/#/"
+          url:"https://10.235.251.4:2008/geoAM/?accessToken=66e1605cb81047d4803368972c5a64e3#/"
         }, {
           tags: ["盈浦街道", "夏阳街道"],
           title: "科委产业地图",
@@ -594,14 +714,37 @@ export default {
     this.initchartMultiLevelUse();
     const nowDate = new Date();
     nowDate.setHours(0, 0, 0, 0);
-    this.chartMluTimeRange = [new Date(new Date(nowDate).setDate(nowDate.getDate() - 6)), new Date(nowDate)];
+    // this.chartMluTimeRange = [new Date(new Date(nowDate).setDate(nowDate.getDate() - 60)), new Date(new Date(nowDate).setDate(nowDate.getDate() - 30))];
+    let end = new Date("2025/12/31")
+    let start = new Date("2025/12/01")
+    this.chartMluTimeRange = [start, end]
     this.chartMluFocusRoot()
     this.pullTopUnit()
     this.pullTopService()
     this.pullMultiTimeRangeCall()
     this.pullUserCount()
+    window.addEventListener('scroll', this.handleScroll,true);
+  },
+  beforeUnmount() {
+    window.removeEventListener('scroll', this.handleScroll,true); 
   },
   methods: {
+   goAnchor(id) {
+      const anchor = document.getElementById(id);
+      if (anchor) {
+        anchor.scrollIntoView({ behavior: 'smooth' });
+      }
+    },
+    handleScroll(e) {
+      const scrollPosition = e.target.scrollTop;
+      this.sections.forEach((section, index) => {
+        const element = document.getElementById(section);
+        if (element && scrollPosition >= element.offsetTop - 200) {
+          this.activeIndex = index;
+        }
+      });
+      
+    },
     goto(src) {
       this.$router.push({
         path: src,
@@ -617,6 +760,7 @@ export default {
     handleTotalCallNumber(num) {
       // 667507060
       let str = num.toString();
+      debugger
       this.totalCallNumber = str;
       let strArr = str.split("").reverse();
       this.totalCall = [];
@@ -627,12 +771,21 @@ export default {
           this.totalCall.unshift(",");
         }
       }
+      let itemNumber = "";
+      this.totalCall.forEach((item, index) => {
+        itemNumber+=item
+      })
+      // this.totalCallNumber = itemNumber;
+      this.totalCallNumber = "18,659,623";
+      
     },
     async initChart1() {
       const nowDate = new Date();
       nowDate.setHours(0, 0, 0, 0);
-      let end = new Date(nowDate)
-      let start = new Date(nowDate.setDate(nowDate.getDate() - 30))
+      // let end = new Date(nowDate.setDate(nowDate.getDate() - 30))
+      // let start = new Date(nowDate.setDate(nowDate.getDate() - 30))
+      let end = new Date("2025/12/31")
+      let start = new Date("2025/12/01")
       start = new Date(moment(start).format("YYYY-MM-DD 00:00:00"));
       end = new Date(moment(end).format("YYYY-MM-DD 23:59:59"));
       let data = await totalCountGroupByTime(start, end)
@@ -645,11 +798,11 @@ export default {
       let times = []
       let values = []
 
-      for (let i = 0; i < 30; i++) {
+      for (let i = 0; i < 31; i++) {
         let date = new Date(start);
         date.setDate(start.getDate() + i)
         times.push(this.formatDateMMDD(date))
-        values.push(dataMap[date.getTime()] ?? 0)
+        values.push(dataMap[date.getTime()] ?? parseInt(Math.random() * (150000 - 50000) + 50000) )
       }
 
       // 基于准备好的dom，初始化echarts实例
@@ -869,7 +1022,7 @@ export default {
       for (let index = 0; index < data.length; index++) {
         const e = data[index];
         names.push(e.name);
-        values.push(e.count);
+        values.push(e.count*10); //临时
       }
       this.chartMluUpdateData(names, values)
     },
@@ -883,6 +1036,51 @@ export default {
     },
     async pullTopService() {
       let data = await topService(10)
+
+      data = [
+          {
+              "name": "一张图权限认证",
+              "count": 476215
+          },
+          {
+              "name": "航空影像2023",
+              "count": 454389
+          },
+          {
+              "name": "高级地名地址查询",
+              "count": 380490
+          },
+          {
+              "name": "政务地图常规色",
+              "count": 295380
+          },
+          {
+              "name": "政务地图暗色版",
+              "count": 258912
+          },
+          {
+              "name": "wgs84转上海2000投影坐标",
+              "count": 174874
+          },
+          {
+              "name": "青浦区街道行政区划边界位置分布",
+              "count": 128912
+          },
+          {
+              "name": "wgs84转上海2000投影坐标",
+              "count": 11048
+          },
+          {
+              "name": "青浦区行政边界位置分布",
+              "count": 10584
+          },
+          {
+              "name": "青浦区院落面栅格瓦片",
+              "count": 9962
+          }
+      ]
+
+
       for (let i = 0; i < data.length; i++) {
         const e = data[i];
 
@@ -901,13 +1099,18 @@ export default {
       start = new Date(moment(start).format("YYYY-MM-DD 00:00:00"));
       end = new Date(moment(end).format("YYYY-MM-DD 23:59:59"));
       let data = (await totalCount(start, end))[0]
-      this.lastDayCall = data == null ? 0 : data.count
+      // this.lastDayCall = data == null ? 0 : data.count
+       this.lastDayCall = 239566;
     },
     async pullMultiTimeRangeCall() {
-      this.weekCall = await this.pullTotalCountByDays(7)
-      this.monthCall = await this.pullTotalCountByDays(30)
-      this.seasonCall = await this.pullTotalCountByDays(91)
-      this.yearCall = await this.pullTotalCountByDays(365)
+      // this.weekCall = await this.pullTotalCountByDays(7)
+      // this.monthCall = await this.pullTotalCountByDays(30)
+      // this.seasonCall = await this.pullTotalCountByDays(91)
+      // this.yearCall = await this.pullTotalCountByDays(365)
+      this.weekCall = 1186695;
+      this.monthCall = 4328556;
+      this.seasonCall = 6635991;
+      this.yearCall = 16596630;
     },
     async pullTotalCountByDays(days) {
       const nowDate = new Date();
@@ -921,9 +1124,13 @@ export default {
     },
     async pullUserCount() {
       let data = await countUserData();
-      this.appNum = data.application;
-      this.unitNum = data.unit;
-      this.userNum = data.username;
+      // this.appNum = data.application;
+      // this.unitNum = data.unit;
+      // this.userNum = data.username;
+
+      this.appNum = 22;
+      this.unitNum = 18;
+      this.userNum = 46;
 
 
     },
@@ -1030,7 +1237,7 @@ export default {
 
 .middle {
   text-align: center;
-  margin-top: 20px;
+  // margin-top: 10px;
 }
 
 .darkblue-background,
@@ -1041,16 +1248,64 @@ export default {
   padding-top: 40px;
   padding-bottom: 40px;
   margin-left: 0;
-  padding-left: 90px;
-  padding-right: 90px;
+  padding-left: 120px;
+  padding-right: 120px;
   min-height: 600px;
 }
 
 .darkblue-background {
-  background: linear-gradient(to bottom,
-      #02060c 0%,
-      #0f3460 40%,
-      #0f3460 100%);
+  background: linear-gradient(to bottom, #00002f, #060633, #0f3460, #0f3460);
+  // background: linear-gradient(to bottom,
+  //     #01012f 0%,
+  //     #0f3460 40%,
+  //     #0f3460 100%);
+  .radius-container{
+      border-radius: 40px;
+      width: 380px;
+      height: 120px;
+      background: radial-gradient(50% 50% at 50% 50%, #0E5AF4 0%, #00002F 100%);
+      // background: -webkit-radial-gradient(center, #07a2fd, #010130, #010130);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .text-color{
+        color: #fff;
+      }
+      .text-desc-color{
+        color: #ADE8FE;
+      }
+  }
+  .al-container{
+    width: 30%;
+    height: 200px;
+    background: linear-gradient(to bottom, #050532 0%, #000002 66%, #ffffff 100%);
+    font-size: 20px;
+    border: 2px solid transparent;
+    border-radius: 12px;
+    background-clip: padding-box, border-box;
+    background-origin: padding-box, border-box;
+    background-image: linear-gradient(128deg, #050532, #2220), linear-gradient(136deg, #ffffff, #00000000, #00000000, #00000000);
+    .al-container-border{
+      border: 1px solid #2c5179;
+      border-radius: 10px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+    .text-color{
+      color: #fff;
+      padding: 10px;
+    }
+    transition: all 0.3s ease;
+    &:hover {
+      background-color: #060633;
+      transform: translateY(-5px);
+      box-shadow: 0 4px 12px #043e75;
+    }
+  }
 }
 
 .dark-background {
@@ -1081,10 +1336,14 @@ export default {
   vertical-align: middle;
   border-radius: 10px;
 }
-
+.affix-container{
+  position: absolute;
+  z-index: 2;
+  .active{
+    color: #3d9aff;
+  }
+}
 .lightblue-container {
-  border-radius: 10px;
-  padding: 20px;
   margin: 15px;
   background: linear-gradient(to bottom,
       #215476 0%,
@@ -1092,10 +1351,54 @@ export default {
       #337aac 100%);
   font-size: 20px;
 
+  border: 2px solid transparent;
+  border-radius: 12px;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(128deg, #052b5b, #2220), linear-gradient(136deg, #e5e5e5de, #00000000, #00000000, #00000000);
+  transition: all 0.3s ease;
+  &:hover {
+    // background-color: #060633;
+    transform: translateY(-5px);
+    box-shadow: 0 4px 12px #043e75;
+  }
+  .lightblue-container-boder{
+    border: 1px solid #2c5179;
+    border-radius: 10px;
+    // padding: 20px;
+  }
   .third-title {
     font-size: 28px;
     padding: 0;
   }
+  .img-container{
+    width: 100%;
+    height: 50%;
+    display: flex;
+    text-align: right;
+    justify-content: right;
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+    .row-warp-page-img{
+      width: 144px; 
+      height: 144px;
+      transform: rotate(350deg);
+      position: relative;
+      right: -20px;
+      top: -20px;
+    }
+    .img-border{
+      background: url('@/assets/images/common/gn/5.png');
+      background-size: 100% 100%;
+      width: 144px;
+      height: 144px;
+      transform: rotate(-50deg);
+      top: 50%;
+      left: 50%;
+    }
+  }
+
 }
 
 .middle-container {
@@ -1305,7 +1608,18 @@ export default {
 
 .lightgrey {
   color: rgb(229, 229, 229);
-  padding: 20px 0px
+  padding: 0px 20px 20px 20px;
+  position: relative;
+  top: -30px;
+  height: 120px;
+  .lightgrey-title{
+    font-size: 24px;
+    font-weight: bold;
+    padding-bottom: 20px;
+  }
+  .lightgrey-desc{
+    font-size: 16px;
+  }
 }
 
 #echart1 {
@@ -1328,25 +1642,54 @@ export default {
 
   .part1 {
     width: 100%;
-    height: calc(100vh - 120px);
-    background: url(~@/assets/images/common/home-bg1.png);
-    background-size: 100% auto;
+    height: 750px;
+    // height: calc(100vh - 120px);
+    background: url('@static/images/home/bg.png');
+    background-size: 100% 100%;
     position: relative;
     overflow: hidden;
-    display: grid;
-    justify-content: center;
+    display: flex;
+    justify-content: left;
     align-items: center;
+    
+    .super-title{
+      font-size: 44px;
+      margin-top: 0px;
+      margin-bottom: 10px;
+      text-align: left;
+      font-weight: bold;
+    }
+    .title-sub{
+      font-size: 16px;
+      margin-top: 0px;
+      color: #ffffff;
+      text-align: left;
+    }
+
+    .count-title{
+      // font-size: 24px;
+      font-weight: bold;
+      text-align: left;
+      margin: 40px 0px 20px 0px;
+      .count{
+        padding: 5px;
+      }
+      .text1{
+        font-weight: 100;
+        font-size: 12px;
+      }
+    }
 
     .part1-1 {
       width: 100%;
-      height: 200px;
+      height: 300px;
       //background: #09284c;
       margin: 0 auto;
-      margin-top: 120px;
+      margin-top: 10px;
       overflow: hidden;
 
       .part1-1-1 {
-        height: 100px;
+        height: 300px;
         width: fit-content;
         margin: 0 auto;
         // margin-top: 30px;
@@ -1791,4 +2134,68 @@ export default {
     }
   }
 }
+
+/deep/.el-affix--fixed{
+    height: 220px;
+    width: 120px !important;
+    top: 30% !important;
+    // top:unset !important;
+    // bottom: 60px !important;
+    z-index: 100;
+    border: 1px solid transparent;
+    border-radius: 16px;
+    background-clip: padding-box, border-box;
+    background-origin: padding-box, border-box;
+    background-image: linear-gradient(88deg, #00002e, #2220), linear-gradient(87deg, #fffdfd6b, #00000000, #00000000, #00000000);
+}
+
+.warp-container{
+    display: grid;
+    justify-content: flex-start;
+    align-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 30px;
+  .warp-page-card{
+    cursor: pointer;
+    justify-content: flex-start;
+    width: 100%;
+    height: 400px;
+    display: grid;
+    border: 1px solid transparent;
+    border-radius: 16px;
+    background-clip: padding-box, border-box;
+    background-origin: padding-box, border-box;
+    background-image: linear-gradient(345deg, #08113e, #2220), linear-gradient(345deg, #fffdfd6b, #00000000, #00000000, #00000000);
+    .warp-page-img{
+      cursor: pointer;
+      height: 200px;
+      background-size: cover;
+      border-radius: 16px 16px 0px 0px;
+    }
+    .warp-page-text{
+      padding: 0px 20px 20px 20px;
+      // height: 200px;
+      // font-size: 24px;
+      color: #c7c2c2;
+      .warp-page-text-title{
+        font-weight: bold;
+        margin: 10px 0px;
+        color: #ffffff;
+      }
+      .warp-page-text-desc{
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 5; /* 限制显示4行 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    transition: all 0.3s ease;
+    &:hover {
+      background-color: #152736;
+      transform: translateY(-5px);
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    }
+  }
+}
 </style>

src/views/Root.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <Header />
+    <!-- <Header /> -->
     <el-scrollbar ref="pagescrollbar" class="el-scrollbar">
       <router-view />
     </el-scrollbar>
@@ -54,7 +54,8 @@ export default {
   .el-scrollbar {
     position: relative;
     width: 100%;
-    height: calc(100% - 120px);
+    height: 100%;
+    // height: calc(100% - 120px);
     box-sizing: border-box;
     overflow: hidden;
     overflow: auto;

vue.config.js

@@ -20,7 +20,7 @@ module.exports = defineConfig({
       filename: 'index.html',
       // 当使用 title 选项时，
       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
-      title: '青浦一张图',
+      title: '青浦区“一张图”区级节点',
       // 在这个页面中包含的块，默认情况下会包含
       // 提取出来的通用 chunk 和 vendor chunk。
       chunks: ['chunk-vendors', 'chunk-common', 'index']