|
|
@@ -0,0 +1,1927 @@
|
|
|
+<template>
|
|
|
+ <div class="home container">
|
|
|
+
|
|
|
+ <div class="darkblue-background">
|
|
|
+
|
|
|
+ <!-- 服务调用趋势 验收版保留，演示版隐藏 start-->
|
|
|
+ <div class="second-title">服务调用趋势(近30天)</div>
|
|
|
+ <div id="echart1"></div>
|
|
|
+
|
|
|
+ <div class="second-title">平台核心运行清单</div>
|
|
|
+ <!--四组统计-->
|
|
|
+ <div class="row">
|
|
|
+ <div class="lighter-container" style="flex: 2">
|
|
|
+ <div class="third-title">
|
|
|
+ <el-icon color="#0071e3" size="30px">
|
|
|
+ <Stopwatch></Stopwatch>
|
|
|
+ </el-icon>
|
|
|
+ <div>基础统计</div>
|
|
|
+ </div>
|
|
|
+ <div class="grid-2x2">
|
|
|
+ <div class="lighter-container middle-container">
|
|
|
+ <div class="strong-data white">
|
|
|
+ <NumberScroll :value="weekCall" :duration="2000" />
|
|
|
+ </div>
|
|
|
+ <div class="title-sub white">近一周总调用</div>
|
|
|
+ </div>
|
|
|
+ <div class="lighter-container middle-container">
|
|
|
+ <div class="strong-data white">
|
|
|
+ <NumberScroll :value="monthCall" :duration="2000" />
|
|
|
+ </div>
|
|
|
+ <div class="title-sub white">近一月总调用</div>
|
|
|
+ </div>
|
|
|
+ <div class="lighter-container middle-container">
|
|
|
+ <div class="strong-data white">
|
|
|
+ <NumberScroll :value="seasonCall" :duration="2000" />
|
|
|
+ </div>
|
|
|
+ <div class="title-sub white">近三月总调用</div>
|
|
|
+ </div>
|
|
|
+ <div class="lighter-container middle-container">
|
|
|
+ <div class="strong-data white">
|
|
|
+ <NumberScroll :value="yearCall" :duration="2000" />
|
|
|
+ </div>
|
|
|
+ <div class="title-sub white">近一年总调用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lighter-container" style="flex: 3">
|
|
|
+ <div class="between-row">
|
|
|
+ <div class="third-title">
|
|
|
+ <el-icon color="#0071e3" size="30px">
|
|
|
+ <Histogram />
|
|
|
+ </el-icon>
|
|
|
+ <div>委办调用情况</div>
|
|
|
+ </div>
|
|
|
+ <span>
|
|
|
+ <el-button
|
|
|
+ v-show="this.chartMluLevel != 'unit'"
|
|
|
+ text
|
|
|
+ size="large"
|
|
|
+ circle
|
|
|
+ @click="chartMluBack()"
|
|
|
+ >
|
|
|
+ <el-icon color="#0071e3" size="30px">
|
|
|
+ <Back />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="chartMluTimeRange"
|
|
|
+ :clearable="false"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="到"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="chartMluFocus()"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div id="echartMultiLevelUse"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="lighter-container" style="flex: 3">
|
|
|
+ <div class="third-title">
|
|
|
+ <!-- <el-icon color="#0071e3" size="30px">
|
|
|
+ <List></List>
|
|
|
+ </el-icon> -->
|
|
|
+ <div>热点资源 TOP10</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="top-list" style="flex-grow: 1">
|
|
|
+ <div v-for="index in 5" :key="index" class="list-item">
|
|
|
+ <template v-if="resourceTop[index - 1] != null">
|
|
|
+ <el-avatar size="small" class="circle-number blue">
|
|
|
+ {{ index }}
|
|
|
+ </el-avatar>
|
|
|
+ <div class="font" style="flex-grow: 100">{{ resourceTop[index - 1].name }}</div>
|
|
|
+ <div class="font number-color">{{ resourceTop[index - 1].value }}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="flex-grow: 0.2"></div>
|
|
|
+ <div class="top-list" style="flex-grow: 0.5">
|
|
|
+ <div v-for="index in 5" :key="index" class="list-item">
|
|
|
+ <template v-if="resourceTop[index + 4] != null">
|
|
|
+ <el-avatar size="small" class="circle-number blue">
|
|
|
+ {{ index + 5 }}
|
|
|
+ </el-avatar>
|
|
|
+ <div class="font" style="flex-grow: 100">{{ resourceTop[index + 4].name }}</div>
|
|
|
+ <div class="font number-color">{{ resourceTop[index + 4].value }}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="lighter-container" style="flex: 2">
|
|
|
+ <div class="third-title">
|
|
|
+ <!-- <el-icon color="#0071e3" size="30px">
|
|
|
+ <School />
|
|
|
+ </el-icon> -->
|
|
|
+ <div>委办调用 TOP5</div>
|
|
|
+ </div>
|
|
|
+ <div class="top-list">
|
|
|
+ <div v-for="index in 5" :key="index" class="list-item">
|
|
|
+ <template v-if="userTop[index - 1] != null">
|
|
|
+ <el-avatar size="small" class="circle-number blue">
|
|
|
+ {{ index }}
|
|
|
+ </el-avatar>
|
|
|
+ <div class="font" style="flex-grow: 100">{{ userTop[index - 1].name }}</div>
|
|
|
+ <div class="font number-color">{{ userTop[index - 1].value }}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 服务调用趋势 验收版保留，演示版隐藏 end-->
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ countAppUseByUnitName,
|
|
|
+ countServiceUseByApp,
|
|
|
+ countUnitUse,
|
|
|
+ countUserData,
|
|
|
+ topService,
|
|
|
+ topUnit,
|
|
|
+ totalCount,
|
|
|
+ totalCountGroupByTime,
|
|
|
+ mapServiceCount,
|
|
|
+} from "@/api/count";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import moment from "moment";
|
|
|
+let chart1 = null;
|
|
|
+let chartMultiLevelUse = null;
|
|
|
+import NumberScroll from "@/components/AppVue/numberScroll.vue";
|
|
|
+import digitalScrollersComp from "@/components/AppVue/digitalScrollersComp.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Home",
|
|
|
+ components: {
|
|
|
+ NumberScroll,
|
|
|
+ digitalScrollersComp,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ lastDayCall: "239566",
|
|
|
+ totalCall: ["0", "0", "0", ",", "0", "0", "0"],
|
|
|
+ totalCallNumber: "18,659,623",
|
|
|
+ // sections: ['top', 'yyal', 'jcnl', 'tjyy', 'yyzc', 'hxgn'],
|
|
|
+ sections: ["top", "jcnl", "tjyy", "yyzc", "hxgn"],
|
|
|
+ affixOptions: [
|
|
|
+ {
|
|
|
+ title: "顶部",
|
|
|
+ type: "top",
|
|
|
+ index: 1,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '应用案例',
|
|
|
+ // type: 'yyal',
|
|
|
+ // index:2,
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: "基础能力",
|
|
|
+ type: "jcnl",
|
|
|
+ index: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "统建应用",
|
|
|
+ type: "tjyy",
|
|
|
+ index: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "应用支撑",
|
|
|
+ type: "yyzc",
|
|
|
+ index: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "六大核心",
|
|
|
+ type: "hxgn",
|
|
|
+ index: 6,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ activeIndex: 0,
|
|
|
+ observer: null,
|
|
|
+ serveNum: 0,
|
|
|
+ userNum: 0,
|
|
|
+ appNum: 0,
|
|
|
+ weekCall: 0,
|
|
|
+ monthCall: 0,
|
|
|
+ seasonCall: 0,
|
|
|
+ yearCall: 0,
|
|
|
+ currentTab: "data-governance", // 初始选中项
|
|
|
+ tabs: [
|
|
|
+ { key: "data-governance", icon: "", title: "平台应用" },
|
|
|
+ { key: "business-app", icon: "", title: "业务应用" },
|
|
|
+ { key: "comprehensive-decision", icon: "", title: "特色场景" },
|
|
|
+ ],
|
|
|
+ resourceTop: [],
|
|
|
+ userTop: [],
|
|
|
+ iframeUrl: systemConfig.iframeUrl + "?token=" + localStorage.getItem("token"),
|
|
|
+ examplelist: systemConfig.examplelist,
|
|
|
+
|
|
|
+ useCase: {
|
|
|
+ dataProcass: [
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "一张图资源预览",
|
|
|
+ text: "一张图资源聚焦于资源预览的高效性与便捷性核心需求，打造轻量化、高适配的单图资源快速预览解决方案，覆盖各类图片素材场景的预览诉求，旨在解决传统资源查看中加载繁琐、信息获取不直观、筛选效率低等问题。",
|
|
|
+ picture: require("@/assets/images/common/u301.png"),
|
|
|
+ url: "http://10.235.245.174:2024",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "一张图开发者中心",
|
|
|
+ text: "一张图开发者中心是面向开发者打造的图片资源预览能力开放与集成服务平台，作为一张图资源预览产品的技术开放枢纽，聚焦图片快速预览核心能力的高效输出，为企业开发者、第三方开发团队及个人开发者提供标准化、轻量化、高适配的图片预览技术解决方案。",
|
|
|
+ picture: require("@/assets/images/common/u301.png"),
|
|
|
+ url: "http://10.235.245.174:2103/home/default",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道、夏阳街道"],
|
|
|
+ title: "一张图二三维引擎示例",
|
|
|
+ text: "一张图二三维引擎示例是依托一张图技术体系打造的二三维一体化引擎能力演示与实践参考体系，聚焦图片资源在二三维可视化场景下的渲染、交互、融合应用，通过丰富的示例场景、可复用的代码模板、完整的能力演示。",
|
|
|
+ picture: require("@/assets/images/common/u661.png"),
|
|
|
+ url: "http://10.235.245.174:2102/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "青浦区香花桥农业信息平台",
|
|
|
+ text: "青浦区香花桥农业信息平台是街道立足本地稻米、林果、花卉等特色农业产业基础，以科技赋能农业现代化、数字化转型为核心，联动上海市农业科学院等科研院所打造的综合性农业智慧服务平台，是香花桥街道推进乡村振兴、落实 “智慧农业 + 产业融合” 发展战略的核心载体。",
|
|
|
+ picture: require("@/assets/images/common/u302.png"),
|
|
|
+ url: "http://10.235.245.174:2030",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ useInService: [
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "学区查询",
|
|
|
+ text: "学区查询是面向家长、教育管理部门、学校打造的义务教育阶段学区信息精准查询与管理服务体系，是破解传统学区查询 “信息滞后、流程繁琐、核实困难” 等问题的数字化便民举措，也是教育部门实现学区科学管理、教育资源均衡分配的重要数字化支撑，核心实现学区信息的权威发布、精准匹配与高效查询，保障入学相关主体的信息知情权与获取便利性。学区查询服务覆盖家长端、管理端、学校端三类核心使用场景：为家长提供孩子入学学区核实、学位状态确认、入学政策了解的便捷渠道，规避择校、购房中的学区信息误差风险；为教育管理部门提供学区划分优化、学位资源统计、招生趋势预判的数据支撑，助力学区动态调整与教育资源科学配置；为学校提供学区范围公示、招生咨询辅助的工具，提升招生工作的透明度与效率。",
|
|
|
+ picture: require("@/assets/images/common/u301.png"),
|
|
|
+ url: "http://121.43.55.7:2121/#/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道、夏阳街道"],
|
|
|
+ title: "青浦区全量信息视图",
|
|
|
+ text: "青浦区全量信息视图是立足区域数字化转型与城市治理现代化需求打造的全域数据融合可视化智慧管理平台，作为青浦区 “一网通办”“一网统管” 建设的核心数字底座，深度整合全区跨部门、跨领域全量数据资源，构建起 “一屏观全域、一网管全城” 的智慧化管理体系，为区域政务服务、城市治理、产业发展、民生保障等全场景提供全景化数据支撑与科学决策依据。推动区域治理从 “分散碎片化” 向 “整体协同化”、从 “被动应对” 向 “主动防控” 转变，既提升了城市治理与政务服务的精细化、科学化水平，也为长三角生态绿色一体化发展示范区建设提供了坚实的数字支撑，助力打造更智慧、更宜居、更韧性的现代化青浦。",
|
|
|
+ picture: require("@/assets/images/common/u661.png"),
|
|
|
+ url: "http://10.235.245.84:9099/eleOverview/eleOverview?loginToken=21232f297a57a5a743894a0e4a801fc3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "青浦区统一地址管理平台",
|
|
|
+ text: "青浦区统一地址管理平台是立足区域数字化转型战略、紧扣 “一网通办”“一网统管” 建设要求打造的全域地址标准化管理与数据融合支撑平台，作为青浦区空间地理信息数字化的核心基础设施，以破解地址管理 “多库并存、标准不一、关联困难” 等痛点为目标，通过地址资源的标准化整合、全生命周期管理与智能化应用，为城市治理、政务服务、产业发展、民生保障等全场景提供权威、精准、统一的地址数据支撑，夯实区域数字孪生城市与智慧治理的底座根基。青浦区统一地址管理平台通过地址标准化打破数据壁垒、以三维可视化提升治理精度、用场景化应用释放数据价值，为长三角生态绿色一体化发展示范区建设提供了高质量的地址数据底座与智慧治理解决方案。",
|
|
|
+ picture: require("@/assets/images/common/u301.png"),
|
|
|
+ url: "https://10.235.251.4:2008/geoAM/?accessToken=66e1605cb81047d4803368972c5a64e3#/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "科委产业地图",
|
|
|
+ text: "科委产业地图是由科技主管部门主导打造的产业创新要素数字化整合与智能服务平台，作为区域科技创新与产业发展的 “数字仪表盘”，以破解产业 “底数不清、资源分散、匹配低效” 等痛点为核心，深度融合 GIS 地理信息、AI 大数据、可视化技术，整合产业链、创新链、人才链、服务链 “四链” 核心资源，构建全域产业发展全景画像，实现从 “静态展示” 到 “动态赋能” 的跨越，为政府产业决策、企业创新发展、要素精准对接提供一站式数字化支撑。它通过打破信息壁垒、强化智能赋能、促进要素集聚，推动产业发展从 “经验驱动” 向 “数据驱动” 转变，为培育先进产业集群、提升区域产业竞争力、加速创新势能向产业动能转化提供坚实支撑，助力打造创新协同、布局合理、发展高效的现代化产业生态",
|
|
|
+ picture: require("@/assets/images/common/u302.png"),
|
|
|
+ url: "http://10.235.245.174:2032/#/",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ decisionHelping: [
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "青浦区小区画像专题",
|
|
|
+ text: "青浦区小区画像专题是立足区域 “幸福温暖家” 治理体系建设目标，依托区大数据资源平台与新版 “社区云” 基层治理底座打造的小区精细化数字刻画与智能赋能服务体系。作为青浦区全量信息视图在社区治理场景的深化应用，专题以破解小区管理 “底数不清、诉求分散、治理粗放” 等痛点为核心，通过整合多维度小区数据资源、构建标准化画像体系、赋能全场景治理应用，为基层治理、民生服务、城市更新等提供精准数据支撑，助力打造更具温度、更高效能的智慧社区生态。",
|
|
|
+ picture: require("@/assets/images/common/u301.png"),
|
|
|
+ url: "http://10.235.245.174:2026/community/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "公共快递资源",
|
|
|
+ text: "公共快递资源项目是政府主导、多方协同，整合快递、电商、交通等资源，以集约化、智能化、共享化为核心，构建覆盖城乡的寄递公共服务网络，解决末端配送低效、成本高、覆盖不足等问题的基础设施与服务体系项目，核心目标是畅通 “农产品进城、工业品下乡” 双向流通，助力民生改善与区域经济发展。",
|
|
|
+ picture: require("@/assets/images/common/u301.png"),
|
|
|
+ url: "http://10.235.245.174:2029/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道、夏阳街道"],
|
|
|
+ title: "青浦区资环审计",
|
|
|
+ text: "青浦区资源环境审计（简称 “青浦区资环审计”）是青浦区审计局围绕长三角生态绿色一体化发展等国家战略，以守护区域生态环境、规范资源利用、推动绿色发展为核心的审计监督工作，由资源环境审计科具体负责，在组织架构、审计重点、协作机制、实践成效等方面形成了鲜明特色。青浦区资环审计通过机制创新与精准监督，有效推动了区域生态保护与绿色发展，为长三角生态绿色一体化提供了坚实审计保障。",
|
|
|
+ picture: require("@/assets/images/common/u661.png"),
|
|
|
+ url: "http://10.235.245.174:2025/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tags: ["盈浦街道", "夏阳街道"],
|
|
|
+ title: "开店一件事",
|
|
|
+ text: "开店一件事是一套从前期调研规划到后期运营优化的系统性实操工作，核心是以市场需求为导向，完成合法筹备、资源落地与可持续经营，最终实现盈利和长期发展，核心逻辑是 “精准定位 + 合规落地 + 高效运营”。分析行业趋势、周边竞品，明确目标客群的消费能力和需求，找到自身差异化竞争优势，避免盲目入局。",
|
|
|
+ picture: require("@/assets/images/common/u302.png"),
|
|
|
+ url: "https://aixq.shqp.gov.cn/kdyjs/",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ activeUseCase: "dataProcass",
|
|
|
+ chartMluLevel: "unit",
|
|
|
+ chartMluUnitName: null,
|
|
|
+ chartMluAppName: null,
|
|
|
+ chartMluTimeRange: null,
|
|
|
+ isOpen: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async beforeMount() {
|
|
|
+ await this.pullTotalCount();
|
|
|
+ await this.pullLastDayCount();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initChart1();
|
|
|
+ this.initchartMultiLevelUse();
|
|
|
+ const nowDate = new Date();
|
|
|
+ nowDate.setHours(0, 0, 0, 0);
|
|
|
+ this.chartMluTimeRange = [
|
|
|
+ new Date(new Date(nowDate).setDate(nowDate.getDate() - 30)),
|
|
|
+ new Date(new Date(nowDate).setDate(nowDate.getDate())),
|
|
|
+ ];
|
|
|
+ // 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.pullMapServiceCount();
|
|
|
+ // 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,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleTabsOpenPage(param) {
|
|
|
+ if (!param.url) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ window.open(param.url, "_blank");
|
|
|
+ },
|
|
|
+ // 处理调用总数数字
|
|
|
+ handleTotalCallNumber(num) {
|
|
|
+ // 667507060
|
|
|
+ let str = num.toString();
|
|
|
+ debugger;
|
|
|
+ this.totalCallNumber = str;
|
|
|
+ let strArr = str.split("").reverse();
|
|
|
+ this.totalCall = [];
|
|
|
+ for (let i = 0; i < strArr.length; i++) {
|
|
|
+ const num = strArr[i];
|
|
|
+ this.totalCall.unshift(num);
|
|
|
+ if (i % 3 == 2 && i != strArr.length - 1) {
|
|
|
+ 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.setDate(nowDate.getDate()));
|
|
|
+ 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);
|
|
|
+ let dataMap = {};
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const e = data[i];
|
|
|
+ dataMap[e.time] = e.count;
|
|
|
+ }
|
|
|
+
|
|
|
+ let times = [];
|
|
|
+ let values = [];
|
|
|
+
|
|
|
+ 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()] ?? parseInt(Math.random() * (150000 - 50000) + 50000));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById("echart1"));
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis", // 坐标轴触发提示
|
|
|
+ axisPointer: { type: "shadow" },
|
|
|
+ backgroundColor: "rgba(0, 25, 50, 0.8)",
|
|
|
+ borderColor: "#1E90FF",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: times,
|
|
|
+ axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
|
|
|
+ axisTick: { show: false }, // 隐藏刻度
|
|
|
+ splitLine: { show: false }, // 隐藏分割线
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLine: { lineStyle: { color: "#fff" } },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed", // 虚线网格
|
|
|
+ color: "#113761",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "调用总数",
|
|
|
+ type: "line",
|
|
|
+ data: values, // 模拟数据
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: "#42a5f5" }, // 蓝色线条
|
|
|
+ itemStyle: {
|
|
|
+ color: "#42a5f5",
|
|
|
+ borderColor: "rgba(66, 165, 245, 0.5)",
|
|
|
+ borderWidth: 12,
|
|
|
+ }, // 节点颜色
|
|
|
+ symbol: "circle", // 节点形状
|
|
|
+ symbolSize: 6, // 节点大小
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#42a5f5",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(15, 52, 96, 0.8)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
+ shadowBlur: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption(option);
|
|
|
+ chart1 = myChart;
|
|
|
+ },
|
|
|
+ initchartMultiLevelUse() {
|
|
|
+ var myChart = echarts.init(document.getElementById("echartMultiLevelUse"));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ show: true,
|
|
|
+ formatter: "{b}: {c}",
|
|
|
+ backgroundColor: "rgba(0, 25, 50, 0.8)",
|
|
|
+ borderColor: "#1E90FF",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: "所有委办",
|
|
|
+ left: "center",
|
|
|
+ top: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ // axisLine: { lineStyle: { color: "red" } },
|
|
|
+ // splitLine: { show: false }, // 隐藏分割线
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255,0.12)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ axisLine: { lineStyle: { color: "#fff" } },
|
|
|
+ inverse: true,
|
|
|
+ data: [""],
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ cursorSize: 20,
|
|
|
+ name: "Direct",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: "60%",
|
|
|
+ data: [0],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: "inside", // 内置型，可以用鼠标滚轮缩放
|
|
|
+ yAxisIndex: 0,
|
|
|
+ zoomOnMouseWheel: false, // 滚轮缩放
|
|
|
+ moveOnMouseWheel: false, // 滚轮移动
|
|
|
+ zoomLock: false,
|
|
|
+ minValueSpan: 12, // 最小显示数据数量
|
|
|
+ maxValueSpan: 12, // 最大显示数据数量
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ myChart.on("click", this.chartMluClick);
|
|
|
+
|
|
|
+ chartMultiLevelUse = myChart;
|
|
|
+ },
|
|
|
+ async chartMluFocus(level, farther) {
|
|
|
+ if (level == null) {
|
|
|
+ level = this.chartMluLevel;
|
|
|
+ }
|
|
|
+ switch (level) {
|
|
|
+ case "unit":
|
|
|
+ default: {
|
|
|
+ await this.chartMluFocusRoot();
|
|
|
+ this.chartMluUpdateTitle("所有委办");
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case "app": {
|
|
|
+ let unit = farther ?? this.chartMluUnitName ?? "";
|
|
|
+ await this.chartMluFocusApp(unit);
|
|
|
+ this.chartMluUpdateTitle("委办：" + unit);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case "service": {
|
|
|
+ let app = farther ?? this.chartMluAppName ?? "";
|
|
|
+ await this.chartMluFocusService(app);
|
|
|
+ this.chartMluUpdateTitle("应用：" + app);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chartMluClick(event) {
|
|
|
+ switch (this.chartMluLevel) {
|
|
|
+ case "unit": {
|
|
|
+ this.chartMluLevel = "app";
|
|
|
+ this.chartMluUnitName = event.name;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case "app": {
|
|
|
+ this.chartMluLevel = "service";
|
|
|
+ this.chartMluAppName = event.name;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case "service":
|
|
|
+ default: {
|
|
|
+ // do nothing
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.chartMluFocus();
|
|
|
+ },
|
|
|
+ chartMluBack(level) {
|
|
|
+ //自动回退
|
|
|
+ if (level == null) {
|
|
|
+ switch (this.chartMluLevel) {
|
|
|
+ default:
|
|
|
+ case "unit":
|
|
|
+ level = "unit";
|
|
|
+ break;
|
|
|
+ case "app":
|
|
|
+ level = "unit";
|
|
|
+ break;
|
|
|
+ case "service":
|
|
|
+ level = "app";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.chartMluLevel = level;
|
|
|
+ this.chartMluFocus();
|
|
|
+ },
|
|
|
+ async chartMluFocusRoot() {
|
|
|
+ let start = this.chartMluTimeRange[0],
|
|
|
+ end = this.chartMluTimeRange[1];
|
|
|
+ start = new Date(moment(start).format("YYYY-MM-DD 00:00:00"));
|
|
|
+ end = new Date(moment(end).format("YYYY-MM-DD 23:59:59"));
|
|
|
+ const data = await countUnitUse(start, end);
|
|
|
+ const names = [];
|
|
|
+ const values = [];
|
|
|
+ for (let index = 0; index < data.length; index++) {
|
|
|
+ const e = data[index];
|
|
|
+ names.push(e.name);
|
|
|
+ values.push(e.count);
|
|
|
+ }
|
|
|
+ this.chartMluUpdateData(names, values);
|
|
|
+ },
|
|
|
+ async chartMluFocusApp(father) {
|
|
|
+ let start = this.chartMluTimeRange[0],
|
|
|
+ end = this.chartMluTimeRange[1];
|
|
|
+ start = new Date(moment(start).format("YYYY-MM-DD 00:00:00"));
|
|
|
+ end = new Date(moment(end).format("YYYY-MM-DD 23:59:59"));
|
|
|
+ const data = await countAppUseByUnitName(start, end, father);
|
|
|
+ const names = [];
|
|
|
+ const values = [];
|
|
|
+ for (let index = 0; index < data.length; index++) {
|
|
|
+ const e = data[index];
|
|
|
+ names.push(e.name);
|
|
|
+ values.push(e.count);
|
|
|
+ }
|
|
|
+ this.chartMluUpdateData(names, values);
|
|
|
+ },
|
|
|
+ async chartMluFocusService(father) {
|
|
|
+ let start = this.chartMluTimeRange[0],
|
|
|
+ end = this.chartMluTimeRange[1];
|
|
|
+ start = new Date(moment(start).format("YYYY-MM-DD 00:00:00"));
|
|
|
+ end = new Date(moment(end).format("YYYY-MM-DD 23:59:59"));
|
|
|
+ const data = await countServiceUseByApp(start, end, father);
|
|
|
+ const names = [];
|
|
|
+ const values = [];
|
|
|
+ for (let index = 0; index < data.length; index++) {
|
|
|
+ const e = data[index];
|
|
|
+ names.push(e.name);
|
|
|
+ values.push(e.count * 10); //临时
|
|
|
+ }
|
|
|
+ this.chartMluUpdateData(names, values);
|
|
|
+ },
|
|
|
+ async pullTopUnit() {
|
|
|
+ let data = await topUnit(5);
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const e = data[i];
|
|
|
+ e.value = this.numberFormatter(e.count);
|
|
|
+ }
|
|
|
+ this.userTop = data;
|
|
|
+ },
|
|
|
+ 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];
|
|
|
+
|
|
|
+ e.value = this.numberFormatter(e.count);
|
|
|
+ }
|
|
|
+ this.resourceTop = data;
|
|
|
+ },
|
|
|
+ async pullTotalCount() {
|
|
|
+ this.handleTotalCallNumber((await totalCount())[0].count);
|
|
|
+ },
|
|
|
+ async pullLastDayCount() {
|
|
|
+ const nowDate = new Date();
|
|
|
+ nowDate.setHours(0, 0, 0, 0);
|
|
|
+ let end = new Date(nowDate);
|
|
|
+ let start = new Date(nowDate.setDate(nowDate.getDate() - 1));
|
|
|
+ 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 = 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 = 1186695;
|
|
|
+ // this.monthCall = 4328556;
|
|
|
+ // this.seasonCall = 6635991;
|
|
|
+ // this.yearCall = 16596630;
|
|
|
+ },
|
|
|
+
|
|
|
+ async pullMapServiceCount() {
|
|
|
+ let start = "2000-01-01 00:00:00"; // 从2000年1月1日开始
|
|
|
+ let end = moment(new Date()).format("YYYY-MM-DD 23:59:59"); // 到当前一天结束时间
|
|
|
+ let data = await mapServiceCount(start, end);
|
|
|
+ // console.log("======pullMapServiceCount====="+data);
|
|
|
+ },
|
|
|
+
|
|
|
+ async pullTotalCountByDays(days) {
|
|
|
+ const nowDate = new Date();
|
|
|
+ nowDate.setHours(0, 0, 0, 0);
|
|
|
+ let end = new Date(nowDate);
|
|
|
+ let start = new Date(nowDate.setDate(nowDate.getDate() - days));
|
|
|
+ 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];
|
|
|
+ return data == null ? 0 : data.count;
|
|
|
+ },
|
|
|
+ async pullUserCount() {
|
|
|
+ let data = await countUserData();
|
|
|
+ this.appNum = data.application;
|
|
|
+ this.unitNum = data.unit;
|
|
|
+ this.userNum = data.username;
|
|
|
+
|
|
|
+ // this.appNum = 37;
|
|
|
+ // this.unitNum = 18;
|
|
|
+ // this.userNum = 46;
|
|
|
+ },
|
|
|
+ chartMluUpdateData(names, values) {
|
|
|
+ chartMultiLevelUse.setOption({
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ data: names,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ this.chartMluCheckChangeToLog(values);
|
|
|
+ },
|
|
|
+ chartMluCheckChangeToLog(values) {
|
|
|
+ let toLog = false;
|
|
|
+ values.sort((a, b) => a - b);
|
|
|
+ let min = values[0];
|
|
|
+ let max = values[values.length - 1];
|
|
|
+ if (max / min > 3000) {
|
|
|
+ toLog = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (toLog) {
|
|
|
+ chartMultiLevelUse.setOption({
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "log",
|
|
|
+ logBase: 10,
|
|
|
+ min: 1,
|
|
|
+
|
|
|
+ axisLine: { lineStyle: { color: "#fff" } },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: this.numberFormatter,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ chartMultiLevelUse.setOption({
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ min: 0,
|
|
|
+
|
|
|
+ axisLine: { lineStyle: { color: "#fff" } },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chartMluUpdateTitle(newTitle) {
|
|
|
+ chartMultiLevelUse.setOption({
|
|
|
+ title: {
|
|
|
+ text: newTitle,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ numberFormatter(num, decimals = 1) {
|
|
|
+ if (num >= 1000000000000) {
|
|
|
+ return parseFloat((num / 1000000000000).toFixed(decimals)).toString() + "亿万";
|
|
|
+ }
|
|
|
+ if (num >= 100000000) {
|
|
|
+ return parseFloat((num / 100000000).toFixed(decimals)).toString() + "亿";
|
|
|
+ }
|
|
|
+ if (num >= 10000) {
|
|
|
+ return parseFloat((num / 10000).toFixed(decimals)).toString() + "万";
|
|
|
+ }
|
|
|
+ return num.toString();
|
|
|
+ },
|
|
|
+ formatDateMMDD(date) {
|
|
|
+ // 月份从0开始，所以要 +1
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
|
+ const day = String(date.getDate()).padStart(2, "0");
|
|
|
+
|
|
|
+ return `${month}/${day}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.font,
|
|
|
+.title,
|
|
|
+.super-title,
|
|
|
+.title-sub,
|
|
|
+.second-title,
|
|
|
+.third-title,
|
|
|
+.strong-data {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ color: #fff;
|
|
|
+ fill: currentColor;
|
|
|
+}
|
|
|
+
|
|
|
+.middle {
|
|
|
+ text-align: center;
|
|
|
+ // margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.darkblue-background,
|
|
|
+.dark-background,
|
|
|
+.bluedark-background,
|
|
|
+.blue-background,
|
|
|
+.image-background {
|
|
|
+ padding-top: 0px;
|
|
|
+ // padding-bottom: 40px;
|
|
|
+ // padding-bottom: 100px;
|
|
|
+ margin-left: 0;
|
|
|
+ // padding-left: 120px;
|
|
|
+ // padding-right: 120px;
|
|
|
+ min-height: 600px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.darkblue-background {
|
|
|
+ background: #00002a;
|
|
|
+ // background: linear-gradient(to bottom, #00002a, #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 {
|
|
|
+ background: #0a0a08;
|
|
|
+}
|
|
|
+
|
|
|
+.blue-background {
|
|
|
+ background: #0f3460;
|
|
|
+}
|
|
|
+
|
|
|
+.bluedark-background {
|
|
|
+ background: linear-gradient(to bottom, #0f3460 0%, #0f3460 60%, #02060c 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.image-background {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100% auto;
|
|
|
+}
|
|
|
+
|
|
|
+.lighter-container {
|
|
|
+ background-color: #eeeeee0b;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 15px;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.affix-container {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ .active {
|
|
|
+ color: #3d9aff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.lightblue-container {
|
|
|
+ margin: 15px;
|
|
|
+ background: linear-gradient(to bottom, #215476 0%, #28638b 66%, #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 {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0;
|
|
|
+ align-items: stretch;
|
|
|
+ border: 2px solid transparent;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-clip: padding-box, border-box;
|
|
|
+ background-origin: padding-box, border-box;
|
|
|
+ background-image:
|
|
|
+ linear-gradient(330deg, #050532, #2220),
|
|
|
+ linear-gradient(330deg, #ffffff, #00000000, #00000000, #00000000);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.row,
|
|
|
+.warp-row,
|
|
|
+.between-row {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 0px;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.warp-row {
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.between-row {
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.col {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.dense-col {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.start-reverse-col {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: start;
|
|
|
+ flex-direction: column-reverse;
|
|
|
+}
|
|
|
+
|
|
|
+.dense-col > *,
|
|
|
+.start-reverse-col > * {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-2x2 {
|
|
|
+ display: grid !important;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 12px;
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+}
|
|
|
+
|
|
|
+.strong-data {
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 36px;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.super-title {
|
|
|
+ font-size: 44px;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.title-sub {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: rgb(192, 192, 192);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.second-title {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 2px solid #3498db;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.third-title {
|
|
|
+ font-size: 18px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ i {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.top-list .list-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 10px 0px;
|
|
|
+ // margin-left: 30px;
|
|
|
+ // margin-right: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.usecase-tabs {
|
|
|
+ width: 60%;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 60px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.usecase-tabs .tab-lab {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.use-case {
|
|
|
+ margin: 20px;
|
|
|
+ width: 45%;
|
|
|
+ height: 500px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ background-size: 100% auto;
|
|
|
+ /* 横向填满，纵向按比例缩放 */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ .use-case-empty {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use-case-text {
|
|
|
+ padding: 15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(to bottom, #377f7f 0%, #377f7f 80%, #205161 100%);
|
|
|
+
|
|
|
+ .third-title {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.six-router {
|
|
|
+ width: 30%;
|
|
|
+ // height: 300px;
|
|
|
+ font-size: 28px;
|
|
|
+
|
|
|
+ .third-title {
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.circle-number {
|
|
|
+ // display: block;
|
|
|
+ margin-right: 10px;
|
|
|
+ background-color: #eeeeee00;
|
|
|
+ // border: 1px solid #2272d4;
|
|
|
+}
|
|
|
+
|
|
|
+.block-page-router {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 30%;
|
|
|
+ height: 240px;
|
|
|
+ border: #2272d4 solid 1px;
|
|
|
+ border-radius: 13px;
|
|
|
+ background-color: #1e3348;
|
|
|
+}
|
|
|
+
|
|
|
+.blue {
|
|
|
+ // color: #3498db;
|
|
|
+ color: #1586ff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.white {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.number-color {
|
|
|
+ color: #ade8fe;
|
|
|
+}
|
|
|
+
|
|
|
+.grey {
|
|
|
+ color: rgb(192, 192, 192);
|
|
|
+ padding: 20px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.lightgrey {
|
|
|
+ color: rgb(229, 229, 229);
|
|
|
+ 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 {
|
|
|
+ width: 100%;
|
|
|
+ height: 450px;
|
|
|
+}
|
|
|
+
|
|
|
+#echartMultiLevelUse {
|
|
|
+ width: 100%;
|
|
|
+ height: 450px;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.home {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .part1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 750px;
|
|
|
+ // height: calc(100vh - 120px);
|
|
|
+ background: url("@static/images/home/bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ 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: 300px;
|
|
|
+ //background: #09284c;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .part1-1-1 {
|
|
|
+ height: 300px;
|
|
|
+ width: fit-content;
|
|
|
+ margin: 0 auto;
|
|
|
+ // margin-top: 30px;
|
|
|
+
|
|
|
+ .number-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ font-size: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number-item {
|
|
|
+ width: 57px;
|
|
|
+ height: 70px;
|
|
|
+ background-color: rgb(10 71 137 / 70%);
|
|
|
+ border: 1px solid #2663a5;
|
|
|
+ box-shadow: 0 4px 20px #2663a5;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 44px;
|
|
|
+ line-height: 70px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .separator {
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 35px;
|
|
|
+ text-align: end;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 100px;
|
|
|
+ padding: 0px 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .part1-1-2 {
|
|
|
+ height: 50px;
|
|
|
+ width: 700px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 30px;
|
|
|
+ background: #8080804d;
|
|
|
+ border-radius: 5px;
|
|
|
+ line-height: 50px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+ &.line {
|
|
|
+ height: 2px;
|
|
|
+ background: #808080;
|
|
|
+ width: 100px;
|
|
|
+ margin: 24px 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 420px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .part2 {
|
|
|
+ background: #08224a;
|
|
|
+ padding-bottom: 1px;
|
|
|
+
|
|
|
+ .part1-2 {
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ // margin-top: 20px;
|
|
|
+ .part1-2-1,
|
|
|
+ .part1-2-2,
|
|
|
+ .part1-2-3 {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ width: calc(100% / 3);
|
|
|
+
|
|
|
+ div:nth-child(1) {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ div:nth-child(2) {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40px;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2px solid gray;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 0 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 90px;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow {
|
|
|
+ color: #f1c40f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow::before {
|
|
|
+ background-color: #f1c40f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray {
|
|
|
+ color: #bdc3c7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray::before {
|
|
|
+ background-color: #bdc3c7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ color: #3498db;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue::before {
|
|
|
+ background-color: #3498db;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orange {
|
|
|
+ color: #e67e22;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orange::before {
|
|
|
+ background-color: #e67e22;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ color: #27ae60;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green::before {
|
|
|
+ background-color: #27ae60;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow-green {
|
|
|
+ color: #b2be2c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow-green::before {
|
|
|
+ background-color: #b2be2c;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 2;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .part3 {
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 940px;
|
|
|
+ background-image: url("~@/assets/images/common/u30.png");
|
|
|
+ /* 替换为实际图片路径 */
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .part4 {
|
|
|
+ background: #08224a;
|
|
|
+ padding-bottom: 1px;
|
|
|
+
|
|
|
+ .chapter {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40px;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ /* border-bottom: 2px solid gray; */
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ padding: 0 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 30px;
|
|
|
+ width: 500px;
|
|
|
+ height: 320px;
|
|
|
+ border: 1px solid gray;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 30px;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ text-indent: 2rem;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 2;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #3498db;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .part5 {
|
|
|
+ background: #08224a;
|
|
|
+ padding-bottom: 1px;
|
|
|
+
|
|
|
+ .chapter {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40px;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ /* border-bottom: 2px solid gray; */
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .part5-1 {
|
|
|
+ color: #ffffff;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .part5-1-1,
|
|
|
+ .part5-1-2,
|
|
|
+ .part5-1-3 {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ width: calc(100% / 3);
|
|
|
+
|
|
|
+ div {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ div:nth-child(2) {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ div p {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .part5-2 {
|
|
|
+ margin-top: 40px;
|
|
|
+ padding-bottom: 1px;
|
|
|
+ height: fit-content;
|
|
|
+
|
|
|
+ .tab-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 40px;
|
|
|
+ /* 选项卡间距 */
|
|
|
+ // border-bottom: 1px solid #eee; /* 可选底部分隔线 */
|
|
|
+ width: fit-content;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-container::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ background: #eeeeee;
|
|
|
+ /* 下划线颜色 */
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ font-size: 30px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item-active {
|
|
|
+ color: #66f;
|
|
|
+ /* 选中文字颜色 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item-active::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 2px;
|
|
|
+ width: 100%;
|
|
|
+ background: #66f;
|
|
|
+ /* 下划线颜色 */
|
|
|
+ margin-top: 5px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ /* 图标与文字间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ padding: 0 120px;
|
|
|
+
|
|
|
+ > :nth-child(1) {
|
|
|
+ background: url(~@/assets/images/common/u301.png) no-repeat 0 0/100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ > :nth-child(2) {
|
|
|
+ background: url(~@/assets/images/common/u302.png) no-repeat 0 0/100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+: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行 */
|
|
|
+ line-clamp: 5; /* 标准属性 */
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.isOpenRightShow {
|
|
|
+ position: fixed;
|
|
|
+ top: 45%;
|
|
|
+ right: 10px;
|
|
|
+ z-index: 2020;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.isOpenLeftShow {
|
|
|
+ position: fixed;
|
|
|
+ top: 45%;
|
|
|
+ left: 10px;
|
|
|
+ z-index: 2020;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.btn_color {
|
|
|
+ color: #fff;
|
|
|
+ background: #1a2a6075;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ &:hover {
|
|
|
+ background: #29558f;
|
|
|
+ color: rgb(0, 247, 255);
|
|
|
+ }
|
|
|
+}
|
|
|
+.win-iframe {
|
|
|
+ width: 100%; /* 使iframe宽度适应父容器 */
|
|
|
+ height: 100%; /* 固定高度 */
|
|
|
+ border: none; /* 移除默认边框 */
|
|
|
+}
|
|
|
+:deep(.el-drawer__body) {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+:deep(.el-overlay) {
|
|
|
+ // height: calc(100vh - 44px);
|
|
|
+ // top: 44px;
|
|
|
+}
|
|
|
+:deep(.el-drawer) {
|
|
|
+ transition: transform 1.5s ease;
|
|
|
+}
|
|
|
+:deep(.el-modal-drawer) {
|
|
|
+ transition: transform 1.5s ease;
|
|
|
+}
|
|
|
+</style>
|
DESKTOP-6LTVLN7\Liumouren