Compare commits
11 Commits
23ad5d6f6d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 017f5255ef | |||
| 5e74fa2196 | |||
| e912175871 | |||
| 281d0015aa | |||
| bdca181855 | |||
| 168748eb18 | |||
| 3f5f76946d | |||
| b9719c22cd | |||
| a5d1de0e23 | |||
| 5d93a81ec6 | |||
| e5569b37a1 |
2
.gitignore
vendored
2
.gitignore
vendored
@ -2,6 +2,7 @@
|
|||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
/situation
|
/situation
|
||||||
|
/protal_dist
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
@ -21,3 +22,4 @@ package-lock.json
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
*.zip
|
||||||
@ -5,12 +5,13 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/rangu.svg" />
|
<link rel="icon" type="image/svg+xml" href="/rangu.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>燃谷科技（南京）有限公司</title>
|
<title>燃谷科技（南京）有限公司</title>
|
||||||
<meta name="keywords" content="低空经济,低空监管,远程识别,RemoteID,RID" />
|
<meta name="keywords" content="燃谷,万谷硅巷,低空经济,低空监管,远程识别,RemoteID,RID" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
|
content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
|
||||||
/>
|
/>
|
||||||
<script src="/nav/index.js"></script>
|
<script src="/config/nav.js"></script>
|
||||||
|
<script src="/config/product.js"></script>
|
||||||
<script src="/config.js"></script>
|
<script src="/config.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
"@vueup/vue-quill": "^1.2.0",
|
"@vueup/vue-quill": "^1.2.0",
|
||||||
"@vueuse/core": "^13.8.0",
|
"@vueuse/core": "^13.8.0",
|
||||||
"axios": "^1.12.2",
|
"axios": "^1.12.2",
|
||||||
|
"crypto-js": "^4.2.0",
|
||||||
"element-plus": "^2.11.1",
|
"element-plus": "^2.11.1",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
|
|||||||
@ -1,9 +1,3 @@
|
|||||||
window.GD_KEYS = [
|
|
||||||
'348d477ba83826e46b32d3ff10fffe82',
|
|
||||||
'ed2ea36f8564541569c370254845d93d',
|
|
||||||
'c1da03827f956a215311c0f5229bddc3',
|
|
||||||
]
|
|
||||||
|
|
||||||
window.config = {
|
window.config = {
|
||||||
baseUrl: 'http://192.168.3.10:9121/',
|
baseUrl: 'http://192.168.3.10:9121/',
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,13 +10,13 @@ window.nav = {
|
|||||||
{
|
{
|
||||||
id: 2.1,
|
id: 2.1,
|
||||||
label: '空域感知矩阵',
|
label: '空域感知矩阵',
|
||||||
url: '/product/monitorSystem',
|
url: '/product/hardwareSystem',
|
||||||
hasChildren: false,
|
hasChildren: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2.2,
|
id: 2.2,
|
||||||
label: '低空智控中枢',
|
label: '低空智控中枢',
|
||||||
url: '/product/remoteDevice',
|
url: '/product/softwareSystem',
|
||||||
hasChildren: false,
|
hasChildren: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -33,8 +33,8 @@ window.nav = {
|
|||||||
url: '',
|
url: '',
|
||||||
hasChildren: true,
|
hasChildren: true,
|
||||||
children: [
|
children: [
|
||||||
{id: 1.1, label: '空域感知矩阵', url: '/product/monitorSystem'},
|
{id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem'},
|
||||||
{id: 1.2, label: '低空智控中枢', url: '/product/remoteDevice'},
|
{id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem'},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
177
public/config/product.js
Normal file
177
public/config/product.js
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
window.advantages = `
|
||||||
|
<div>★ 提供业界领先的性价比解决方案。</div>
|
||||||
|
<div>★ 内置4G全网通，无需外接网络，即装即用。</div>
|
||||||
|
<div>★ 宽电压输入，轻松应对电压不稳等复杂情况。</div>
|
||||||
|
<div>★ 超低功耗设计，极大节约长期用电与运维成本。</div>
|
||||||
|
<div>★ 极致轻量，极大拓宽了安装位置与应用场景。</div>
|
||||||
|
<div>★ 灵活可调的侦测模式，满足从安防到巡检的全场景需求。</div>
|
||||||
|
<div>★ 具备升级能力，当前投资可平滑演进至更高专业层级。</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
window.hardwareSystemList = [
|
||||||
|
{
|
||||||
|
id: 'm1',
|
||||||
|
type: 'hardwareSystem',
|
||||||
|
title: 'RGRID-Lite',
|
||||||
|
subTitle: '无人机Remote ID远程识别设备',
|
||||||
|
imgUrl: 'product/detail/m1.png',
|
||||||
|
description: `
|
||||||
|
<div class="hardware">RGRID-Lite 是一款专为国标无人机远程识别设计的地面监测设备。它能够精准获取低空目标区域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并动态显示与记录无人机及飞手的移动轨迹。所有数据实时上传至后台系统，支持长期存储与便捷回溯，为空域监管提供完整的数据支撑。</div>
|
||||||
|
<div class="hardware">设备采用轻量化与一体化设计，部署灵活，可快速适配多种复杂安装环境。凭借超低功耗特性，可搭配UPS不间断电源或太阳能供电系统，实现长时间稳定运行。同时，内置4G全网通模块，无需依赖外部网络，彻底解决供电与传输难题。</div>
|
||||||
|
<div class="hardware">RGRID-Lite 在具备卓越性能的同时，展现出优异的性价比，广泛适用于各类低空监管场景。设备支持功能定制与二次开发，可根据用户需求灵活扩展，是构建低成本、高效率无人机监管体系的理想之选。</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm2',
|
||||||
|
type: 'hardwareSystem',
|
||||||
|
title: 'RGRID-Ped',
|
||||||
|
subTitle: '无人机Remote ID远程识别模块',
|
||||||
|
imgUrl: 'product/detail/m2.png',
|
||||||
|
description: `
|
||||||
|
<div class="hardware">RGRID-Ped 是一款遵循国标GB42590-2023的便携式无人机远程识别模块。它能够精准监测并获取目标空域内无人机的多项关键数据，包括实时位置、飞手位置、唯一SN识别码、飞行型号、航速与高度等，并实时推送至用户平台。</div>
|
||||||
|
<div class="hardware">该模块采用高度集成化设计，体积小巧、功耗极低，具备完善的接口与通信协议，可快速适配并嵌入各类无人机反制、监管或作业设备中，轻松应对有限的内部空间要求。同时，模块支持全方位的二次开发与功能定制，为各类集成应用提供可靠、灵活的低空感知核心。</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm3',
|
||||||
|
type: 'hardwareSystem',
|
||||||
|
title: 'RGRID-Mob',
|
||||||
|
subTitle: '无人机Remote ID远程识别手持设备',
|
||||||
|
imgUrl: 'product/detail/m3.png',
|
||||||
|
description: `
|
||||||
|
<div class="hardware">RGRID-Mob 是一款符合国标 GB42590-2023 的便携式无人机远程识别设备，专为机动巡检与快速部署场景设计。它可精准监测目标空域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并实时显示与记录无人机与飞手的动态轨迹。所有数据同步上传至后台，支持长期存储与灵活调阅，为空域执法与现场处置提供完整信息支撑。</div>
|
||||||
|
<div class="hardware">设备支持多终端协同管理，用户可通过移动端小程序实时查看数据，指挥中心亦能通过大屏系统统览全局。系统具备分级权限管理功能，支持多级账户与设备组网，实现权限分离与协同指挥。手机端集成一键导航功能，可快速定位飞手位置；指挥平台则全面监管辖区内所有设备状态与每架被侦测无人机的详细数据，真正实现“前端机动侦测—后端统一指挥”的一体化管控闭环。</div>
|
||||||
|
<div class="hardware">RGRID-Mob 重量轻、体积小，可随身挂载，便于野外作业与快速机动。内置4G数据传输模块，开机即用，无需复杂配对，极大提升部署效率与操作便捷性，是应对突发低空监管任务的理想移动侦测终端。</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
window.softwareSystemList = [
|
||||||
|
{
|
||||||
|
id: 'r1',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空综合监管及应用服务平台',
|
||||||
|
imgUrl: 'product/detail/r1.jpg',
|
||||||
|
video: 'display.mp4',
|
||||||
|
card: [
|
||||||
|
{id: 1, title: '三维总览', content: '基于数字孪生技术，通过三维和传感器状态数据，实现对真实状态的数字化呈现。'},
|
||||||
|
{id: 2, title: '实时监管', content: '基于人工智能算法，智能识别判定各类预警，实现全面的智能监测与管理。'},
|
||||||
|
{id: 3, title: '传感器监测', content: '对无人机、机场、反无人机设备、ADS-B设备等各类设备的布署和状态全面监控。'},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '综合审批',
|
||||||
|
content: '对各类申请审批数据的汇总与分类统计，全面了解不同来源、类型和条件的申请和审批情况。',
|
||||||
|
},
|
||||||
|
{id: 5, title: '重点目标', content: '对辖区内的关键目标分类统计和位置呈现，以提供全面的目标信息和空间分布视角。'},
|
||||||
|
{id: 6, title: '辖区信息', content: '操作员情况、备案飞行器信息、相关企业等信息不同维度的综合展示。'},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空全域运营中枢，是构建于数字孪生技术之上的低空管理核心平台。它通过精准的三维建模与全域传感器数据融合，将物理空域完整复现为动态的数字世界，实现对无人机、机场、反制设备等所有单元部署与运行状态的全局洞察。</div>
|
||||||
|
<div class="hardware">平台深度融合人工智能算法，具备实时智能监管与预警研判能力，确保对空域异常事件的精准识别与快速响应。同时，系统集成了从空域申请审批、重点目标管理到辖区人员、航空器及企业信息的多维度综合管理功能，在一个平台上完成了从全景感知、智能决策到协同处置的全流程闭环，真正实现了低空运营的“一图总览、一体指挥、一站服务”。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r2',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空综合态势平台',
|
||||||
|
imgUrl: 'product/detail/r2.jpg',
|
||||||
|
video: '2.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '区域化监管',
|
||||||
|
content: '按地理或行政划分区域，通过数据隔离与协同机制，实现灵活的区域自治或跨域联动管控。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '海量设备接入',
|
||||||
|
content: '基于微服务架构设计，支持万级设备高并发接入与弹性扩展，确保稳定性和可靠性。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '多源数据融合',
|
||||||
|
content: '整合传感器、外部系统及各类数据，构建全域动态分析模型，强化低空态势决策支撑。',
|
||||||
|
},
|
||||||
|
{id: 4, title: '私有化部署', content: '支持本地化安全部署，提供定制化方案与云端协同管控能力，保障数据自主可控。'},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'SaaS服务',
|
||||||
|
content: '云端多租户架构，按需弹性扩展，提供低运维成本标准化服务，支持数据共享与任务协同。',
|
||||||
|
},
|
||||||
|
{id: 6, title: '数据接口服务', content: '开放标准化API与多协议接口，打通跨平台数据交互，推动低空生态互联互通。'},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空综合态势平台，是面向全域低空监管与协同运营的新一代数字化基础设施。平台基于微服务架构设计，具备万级设备高并发接入与弹性扩展能力，确保系统在高负载下的稳定可靠运行。通过整合多源传感器数据与外部系统信息，平台构建起全域动态分析模型，实现从感知到决策的智能闭环，显著提升低空态势的洞察力与响应效率。</div>
|
||||||
|
<div class="hardware">在部署方式上，平台全面支持私有化与SaaS化双模式：既可通过本地化部署保障数据安全与自主可控，也支持云端多租户架构，以标准化服务降低运维成本，促进跨组织数据共享与任务协同。同时，平台引入灵活的区域化监管机制，支持按地理或行政单元进行数据隔离与业务协同，实现从区域自治到跨域联动的精准管控。</div>
|
||||||
|
<div class="hardware">为构建开放的低空数字生态，平台提供标准化API与多协议接口，打通跨系统数据壁垒，推动各类设备、系统与服务的互联互通，为低空产业的规模化发展提供坚实的技术底座。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r3',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空管控系统',
|
||||||
|
imgUrl: 'product/detail/r3.jpg',
|
||||||
|
video: '3.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '黑白名单管理',
|
||||||
|
content: '对无人机的多层次监控，如告警、处置或放行，以确保阵地内空域的安全与可控。',
|
||||||
|
},
|
||||||
|
{id: 2, title: '处置策略执行', content: '自动通过采取入侵警告、拦截或干扰等措施，迅速应对检测到的潜在威胁。'},
|
||||||
|
{id: 3, title: '历史预警管理', content: '审查历史安全事件，提供信息导出功能，以支持分析、报告和决策过程。'},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空管控系统是为核心阵地提供精准化、智能化空域防御的指挥中枢。系统支持对多个分散阵地的统一管理，实时监控所有设备状态，并对空域内目标进行持续跟踪与智能告警。</div>
|
||||||
|
<div class="hardware">通过内置的黑白名单管理机制，系统可对无人机进行精准识别与差异化处置。一旦发现潜在威胁，指挥员可快速下发处置指令，或由系统自动执行预设的反制策略——从入侵警告到主动干扰，实现对空域风险的快速响应与有效化解。</div>
|
||||||
|
<div class="hardware">所有预警与处置记录均被完整保存于系统之中，支持历史数据的查询、导出与深度分析，为优化布防策略、复盘处置流程与生成合规报告提供坚实的数据支撑，全面提升阵地空域的持久安全与管控效能。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r4',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空应用系统',
|
||||||
|
imgUrl: 'product/detail/r4.jpg',
|
||||||
|
video: '4.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '设备信息管理',
|
||||||
|
content: '无人机全生命周期管理，无人机设备的合理调度、机库管理，以及飞行人员的信息记录和培训管理。',
|
||||||
|
},
|
||||||
|
{id: 2, title: '任务航线规划', content: '高效规划无人机的飞行路径，确保全面而准确地覆盖目标区域。'},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '任务调度管理',
|
||||||
|
content:
|
||||||
|
'涵盖规划、调度、执行和监控巡检任务全过程。有效规划和优化无人机的飞行计划，设定巡检区域和时间，监测任务进度，实时获取数据。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空应用系统是面向行业无人机作业的一体化智能调度与管理平台。系统提供从设备、人员到任务的全流程数字化管理，实现对无人机设备的合理调配、全生命周期维护，以及对飞行人员的规范信息管理与培训记录。</div>
|
||||||
|
<div class="hardware">在任务执行层面，系统支持高效规划无人机的飞行路径，通过航线粗细采样点的灵活设置，确保对目标区域实现精准覆盖与高效扫描。用户可便捷完成巡检标注，系统自动整合飞行数据与巡检结果，快速生成结构化报告，为作业分析与决策提供可靠依据。</div>
|
||||||
|
<div class="hardware">平台同时提供完整的任务调度管理功能，覆盖从任务规划、计划优化、过程监控到数据回传的全链路，有效提升无人机在巡检、测绘等场景中的自动化水平与作业效率，推动低空应用的集约化与智能化运营。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r5',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空仿真系统',
|
||||||
|
imgUrl: 'product/detail/r5.jpg',
|
||||||
|
video: '5.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '航空器孪生',
|
||||||
|
content:
|
||||||
|
'航空器孪生是指利用数字化技术和仿真模型创建的虚拟飞行器，与实际飞行器实时同步，并能够模拟其行为、性能和运行情况。帮助飞行员和维护人员进行培训、飞行仿真、性能分析和故障诊断，从而提高飞行器的安全性、效率性和可靠性。为飞行员和运营商提供更好的训练和支持，同时降低了飞行试验和维护成本。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '监管传感器孪生',
|
||||||
|
content:
|
||||||
|
'整合低空监管传感器、环境传感器和支撑传感器等各类传感器的智能系统，旨在实现对低空空域的实时监测和管理。通过监测飞行器活动、环境参数和相关数据，并将其与数字化模型实时同步，该系统能够提供全面的低空环境评估、低空空域监管和飞行器安全保障，为低空飞行提供了可靠的技术支持。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空仿真系统是构建于数字孪生技术之上的专业化模拟推演平台，旨在为低空运行提供高保真、全流程的虚拟仿真环境。</div>
|
||||||
|
<div class="hardware">系统通过构建航空器数字孪生体，实现对真实飞行器的精准映射与行为模拟。虚拟飞行器可与实体设备实时同步，支持飞行仿真、性能分析与故障复现，广泛应用于飞行员训练、维护诊断与运行评估，显著提升飞行安全与运维效率，同时大幅降低实装训练与试验成本。</div>
|
||||||
|
<div class="hardware">同时，系统集成监管传感器孪生网络，对部署于真实环境中的各类监测设备进行数字化建模与数据同步。通过对飞行器活动、环境参数等多源信息的融合分析，系统可实现对低空空域的实时态势复现、运行风险评估与监管策略预演，为低空监管体系的规划部署、效能验证与优化调控提供关键决策支持。</div>`,
|
||||||
|
},
|
||||||
|
]
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 878 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 714 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 529 KiB After Width: | Height: | Size: 356 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 884 KiB |
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
BIN
public/static/images/product/detail/r1.jpg
Normal file
BIN
public/static/images/product/detail/r1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
BIN
public/static/images/product/detail/r2.jpg
Normal file
BIN
public/static/images/product/detail/r2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
BIN
public/static/images/product/detail/r3.jpg
Normal file
BIN
public/static/images/product/detail/r3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
public/static/images/product/detail/r4.jpg
Normal file
BIN
public/static/images/product/detail/r4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
public/static/images/product/detail/r5.jpg
Normal file
BIN
public/static/images/product/detail/r5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
public/static/video/2.mp4
Normal file
BIN
public/static/video/2.mp4
Normal file
Binary file not shown.
BIN
public/static/video/3.mp4
Normal file
BIN
public/static/video/3.mp4
Normal file
Binary file not shown.
BIN
public/static/video/4.mp4
Normal file
BIN
public/static/video/4.mp4
Normal file
Binary file not shown.
BIN
public/static/video/5.mp4
Normal file
BIN
public/static/video/5.mp4
Normal file
Binary file not shown.
BIN
public/static/video/display.mp4
Normal file
BIN
public/static/video/display.mp4
Normal file
Binary file not shown.
@ -3,7 +3,43 @@ import request from '@/utils/request'
|
|||||||
// 获取访问接口
|
// 获取访问接口
|
||||||
export function visit(data) {
|
export function visit(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/tracking',
|
url: '/tracking/',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function getNews(params) {
|
||||||
|
return request({
|
||||||
|
url: '/news',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function getNewsDetail(params) {
|
||||||
|
return request({
|
||||||
|
url: '/news/details',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存新闻
|
||||||
|
export function updateNews(data) {
|
||||||
|
return request({
|
||||||
|
url: '/news/B8fpNxunbxj37x3VRcVz',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function saveDetail(data) {
|
||||||
|
return request({
|
||||||
|
url: '/news/VbxWW8EdJQGyWzJyvSrN',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data,
|
data,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -8,5 +8,7 @@ $nav_font_size: 18px;
|
|||||||
|
|
||||||
$border: 2px solid red;
|
$border: 2px solid red;
|
||||||
|
|
||||||
|
$border_radius: 8px;
|
||||||
|
|
||||||
// header nav
|
// header nav
|
||||||
$header_nav_height: 80px;
|
$header_nav_height: 80px;
|
||||||
|
|||||||
@ -5,18 +5,18 @@ onMounted(() => {})
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<p>ID/无人机低空监管设备 无人机定位设备/无人机飞手定位设备/无人机侦测设备/Remote ID无人机远程识别模块 Remote</p>
|
<p>ID/无人机低空监管设备 无人机定位设备/无人机飞手定位设备/无人机侦测设备/software ID无人机远程识别模块 software</p>
|
||||||
<p>Remote ID无人机识别设备/符合GB-42590-2023/无人机远程识别发射模块 无人机远程识别设备/无人机RID/Remote</p>
|
<p>software ID无人机识别设备/符合GB-42590-2023/无人机远程识别发射模块 无人机远程识别设备/无人机RID/software</p>
|
||||||
<p>ID无人机远程识别广播模块/RID无人机识别/无人机飞手远程定位设备</p>
|
<p>ID无人机远程识别广播模块/RID无人机识别/无人机飞手远程定位设备</p>
|
||||||
<p>无人机测距模块/无人机侦测监管设备/RID无人机识别/无人机定位器/无人机飞手定位器</p>
|
<p>无人机测距模块/无人机侦测监管设备/RID无人机识别/无人机定位器/无人机飞手定位器</p>
|
||||||
<p>无人机侦测定位设备/迷你无人机识别模块/低空经济无人机识别设备/单兵无人机侦测识别设备</p>
|
<p>无人机侦测定位设备/迷你无人机识别模块/低空经济无人机识别设备/单兵无人机侦测识别设备</p>
|
||||||
<p>无人机探测器/防撞机无人机定位设备/Remote ID无人机预警仪</p>
|
<p>无人机探测器/防撞机无人机定位设备/software ID无人机预警仪</p>
|
||||||
<p>全向无人机探测设备/无人机定位飞手定位设备/安防安保无人机监测设备/RID无人机识别/Remote ID远程识别模块</p>
|
<p>全向无人机探测设备/无人机定位飞手定位设备/安防安保无人机监测设备/RID无人机识别/software ID远程识别模块</p>
|
||||||
<p>无人机侦测设备飞手定位飞行轨迹/UAV无线电侦测设备/无人机GPS GNSS定位设备</p>
|
<p>无人机侦测设备飞手定位飞行轨迹/UAV无线电侦测设备/无人机GPS GNSS定位设备</p>
|
||||||
<p>无人机RID广播识别模块/无人机探测飞手定位飞行轨迹/专业级无人机预警侦测设备 无人机航拍防撞设备/无人机Remote</p>
|
<p>无人机RID广播识别模块/无人机探测飞手定位飞行轨迹/专业级无人机预警侦测设备 无人机航拍防撞设备/无人机Remote</p>
|
||||||
<p>ID国标定位侦测设备/低空安防无人机监管 无人机识别跟踪设备/RID无人机定位模块/Remote</p>
|
<p>ID国标定位侦测设备/低空安防无人机监管 无人机识别跟踪设备/RID无人机定位模块/software</p>
|
||||||
<p>ID无人机定位跟踪设备带飞手定位飞行轨迹 自主研发无人机侦测定位模块/Remote</p>
|
<p>ID无人机定位跟踪设备带飞手定位飞行轨迹 自主研发无人机侦测定位模块/software</p>
|
||||||
<p>ID无人机远程识别设备/飞机定位飞行轨迹飞手定位无人机识别模块源头厂家 无人机标签识别设备/Remote</p>
|
<p>ID无人机远程识别设备/飞机定位飞行轨迹飞手定位无人机识别模块源头厂家 无人机标签识别设备/software</p>
|
||||||
<p>
|
<p>
|
||||||
ID无人机侦测定位设备/远程广播模块识别 无人机远程识别地面站/RID无人机识别/无人机巡检智能识别模块/无人机定位飞手定位
|
ID无人机侦测定位设备/远程广播模块识别 无人机远程识别地面站/RID无人机识别/无人机巡检智能识别模块/无人机定位飞手定位
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -31,6 +31,7 @@ let autoPlayTimer = null
|
|||||||
const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
||||||
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
||||||
const itemGap = computed(() => $fontSize(props.sourceGap))
|
const itemGap = computed(() => $fontSize(props.sourceGap))
|
||||||
|
|
||||||
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
||||||
const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
|
const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
|
||||||
const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
|
const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
|
||||||
|
|||||||
59
src/home.vue
59
src/home.vue
@ -5,47 +5,48 @@ import {onMounted, ref, watch} from 'vue'
|
|||||||
import {visit} from '@/api/index'
|
import {visit} from '@/api/index'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
onMounted(() => {
|
const referrer = ref(document.referrer || '')
|
||||||
getUrl()
|
|
||||||
})
|
|
||||||
|
|
||||||
const referrer = ref('')
|
|
||||||
const ipUrl = ref('')
|
const ipUrl = ref('')
|
||||||
|
|
||||||
console.log('11===>', window.location)
|
const CACHE_KEY = 'ip'
|
||||||
function getUrl() {
|
const TIME_KEY = 'ipFetchTime'
|
||||||
referrer.value = document.referrer
|
const CACHE_MIN = 60 * 60 * 1000 // 1h
|
||||||
|
|
||||||
axios
|
async function getUrl() {
|
||||||
.get('https://api64.ipify.org?format=json')
|
const now = Date.now()
|
||||||
.then(({data}) => {
|
const cachedIp = sessionStorage.getItem(CACHE_KEY)
|
||||||
ipUrl.value = data.ip
|
const cachedTime = sessionStorage.getItem(TIME_KEY)
|
||||||
})
|
|
||||||
.catch(console.error)
|
if (cachedIp && cachedTime && now - Number(cachedTime) < CACHE_MIN) {
|
||||||
|
ipUrl.value = cachedIp
|
||||||
|
return cachedIp
|
||||||
}
|
}
|
||||||
|
|
||||||
async function postVisit() {
|
try {
|
||||||
let params = {
|
const {data} = await axios.get('https://api64.ipify.org?format=json')
|
||||||
|
ipUrl.value = data.ip
|
||||||
|
sessionStorage.setItem(CACHE_KEY, data.ip)
|
||||||
|
sessionStorage.setItem(TIME_KEY, now.toString())
|
||||||
|
postVisit()
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取 IP 失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function postVisit() {
|
||||||
|
const params = {
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
url: window.location.href,
|
url: window.location.href,
|
||||||
referrer: referrer.value,
|
referrer: referrer.value,
|
||||||
real_ip: ipUrl.value,
|
real_ip: ipUrl.value,
|
||||||
}
|
}
|
||||||
let {code, msg} = await visit(params)
|
|
||||||
|
visit(params).then((res) => {})
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
onMounted(async () => {
|
||||||
() => [referrer.value, ipUrl.value],
|
await getUrl()
|
||||||
([refer, ipUrl]) => {
|
})
|
||||||
if (refer && ipUrl) {
|
|
||||||
postVisit()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -3,20 +3,22 @@ import { createWebHashHistory, createRouter } from 'vue-router'
|
|||||||
import HomeView from '@/views/homepage/index.vue'
|
import HomeView from '@/views/homepage/index.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
// ============================================ 首页 ============================================
|
||||||
{path: '/', component: HomeView},
|
{path: '/', component: HomeView},
|
||||||
|
|
||||||
// ============================================ 产品中心 ============================================
|
// ============================================ 产品中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/product/monitorSystem',
|
path: '/product/hardwareSystem',
|
||||||
name: 'MonitorSystem',
|
name: 'HardwareSystem',
|
||||||
component: () => import('@/views/product/monitorSystem.vue'),
|
component: () => import('@/views/product/hardwareSystem.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '低空监管体系',
|
title: '低空监管体系',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/product/remoteDevice',
|
path: '/product/softwareSystem',
|
||||||
name: 'RemoteDevice',
|
name: 'SoftwareSystem',
|
||||||
component: () => import('@/views/product/remoteDevice.vue'),
|
component: () => import('@/views/product/softwareSystem.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '低空远程识别设备',
|
title: '低空远程识别设备',
|
||||||
},
|
},
|
||||||
@ -29,6 +31,7 @@ const routes = [
|
|||||||
title: '产品详情',
|
title: '产品详情',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 服务与支撑 ============================================
|
// ============================================ 服务与支撑 ============================================
|
||||||
{
|
{
|
||||||
path: '/services',
|
path: '/services',
|
||||||
@ -38,6 +41,7 @@ const routes = [
|
|||||||
title: '服务与支撑',
|
title: '服务与支撑',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 新闻中心 ============================================
|
// ============================================ 新闻中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/news',
|
path: '/news',
|
||||||
@ -47,6 +51,15 @@ const routes = [
|
|||||||
title: '新闻中心',
|
title: '新闻中心',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/news/detail',
|
||||||
|
name: 'NewsDetail',
|
||||||
|
component: () => import('@/views/news/detail.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '新闻详情',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
// ============================================ 关于我们 ============================================
|
// ============================================ 关于我们 ============================================
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
@ -56,6 +69,7 @@ const routes = [
|
|||||||
title: '关于我们',
|
title: '关于我们',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 联系我们 ============================================
|
// ============================================ 联系我们 ============================================
|
||||||
{
|
{
|
||||||
path: '/link',
|
path: '/link',
|
||||||
@ -65,6 +79,7 @@ const routes = [
|
|||||||
title: '联系我们',
|
title: '联系我们',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 下载中心 ============================================
|
// ============================================ 下载中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/download',
|
path: '/download',
|
||||||
@ -90,6 +105,13 @@ const router = createRouter({
|
|||||||
routes,
|
routes,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// router.beforeEach(async (to, from, next) => {
|
||||||
|
// const {useNavStore} = await import('@/store/nav.js')
|
||||||
|
// const navStore = useNavStore()
|
||||||
|
// navStore.setLoad(true)
|
||||||
|
// next()
|
||||||
|
// })
|
||||||
|
|
||||||
router.afterEach((to, from) => {
|
router.afterEach((to, from) => {
|
||||||
// 只有路径变化时才滚动到顶部
|
// 只有路径变化时才滚动到顶部
|
||||||
if (to.path !== from.path) {
|
if (to.path !== from.path) {
|
||||||
|
|||||||
@ -5,6 +5,7 @@ export const useNavStore = defineStore(
|
|||||||
'nav',
|
'nav',
|
||||||
() => {
|
() => {
|
||||||
const navIndex = ref('/')
|
const navIndex = ref('/')
|
||||||
|
const showLoad = ref(true)
|
||||||
|
|
||||||
const changeNavIndex = (id) => {
|
const changeNavIndex = (id) => {
|
||||||
if (!id) {
|
if (!id) {
|
||||||
@ -14,9 +15,16 @@ export const useNavStore = defineStore(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const setLoad = (status) => {
|
||||||
|
console.log('status===>', status)
|
||||||
|
showLoad.value = status
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
navIndex,
|
navIndex,
|
||||||
|
showLoad,
|
||||||
changeNavIndex,
|
changeNavIndex,
|
||||||
|
setLoad,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
28
src/utils/cryptojs.js
Normal file
28
src/utils/cryptojs.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import CryptoJS from 'crypto-js'
|
||||||
|
|
||||||
|
const key = CryptoJS.enc.Utf8.parse('k+tsU5mZz1BY+P8z')
|
||||||
|
const iv = CryptoJS.enc.Utf8.parse('k+tsU5mZz1BY+P8z')
|
||||||
|
|
||||||
|
// crypto-js加密
|
||||||
|
export function cryptoEncrypt(word) {
|
||||||
|
const srcs = CryptoJS.enc.Utf8.parse(word)
|
||||||
|
const encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
||||||
|
iv,
|
||||||
|
mode: CryptoJS.mode.CBC,
|
||||||
|
padding: CryptoJS.pad.Pkcs7,
|
||||||
|
})
|
||||||
|
return encrypted.ciphertext.toString(CryptoJS.enc.Base64)
|
||||||
|
}
|
||||||
|
|
||||||
|
// crypto-js解密
|
||||||
|
export function cryptoDecrypt(word) {
|
||||||
|
const encryptedHexStr = CryptoJS.enc.Base64.parse(word)
|
||||||
|
const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
|
||||||
|
const decrypt = CryptoJS.AES.decrypt(srcs, key, {
|
||||||
|
iv,
|
||||||
|
mode: CryptoJS.mode.CBC,
|
||||||
|
padding: CryptoJS.pad.Pkcs7,
|
||||||
|
})
|
||||||
|
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
|
||||||
|
return decryptedStr.toString()
|
||||||
|
}
|
||||||
@ -11,16 +11,12 @@ function setRem() {
|
|||||||
// 当前页面宽度相对于设计稿宽度的缩放比例
|
// 当前页面宽度相对于设计稿宽度的缩放比例
|
||||||
const scale = document.documentElement.clientWidth / designWidth
|
const scale = document.documentElement.clientWidth / designWidth
|
||||||
// 设置页面根节点字体大小（最高放大比例为maxScale）
|
// 设置页面根节点字体大小（最高放大比例为maxScale）
|
||||||
document.documentElement.style.fontSize =
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
|
||||||
baseSize * Math.min(scale, maxScale) + 'px'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据设计稿尺寸计算实际尺寸
|
// 根据设计稿尺寸计算实际尺寸
|
||||||
export function fontSize(res) {
|
export function fontSize(res) {
|
||||||
const clientWidth =
|
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||||||
window.innerWidth ||
|
|
||||||
document.documentElement.clientWidth ||
|
|
||||||
document.body.clientWidth
|
|
||||||
if (!clientWidth) return res
|
if (!clientWidth) return res
|
||||||
const scale = clientWidth / designWidth
|
const scale = clientWidth / designWidth
|
||||||
return res * Math.min(scale, maxScale)
|
return res * Math.min(scale, maxScale)
|
||||||
|
|||||||
@ -2,9 +2,7 @@
|
|||||||
* axios 封装
|
* axios 封装
|
||||||
*/
|
*/
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
|
||||||
import {tansParams} from '@/utils/index'
|
import {tansParams} from '@/utils/index'
|
||||||
import {getToken, removeToken, removeUserTenantInfo} from '@/utils/auth'
|
|
||||||
|
|
||||||
// 配置基础URL
|
// 配置基础URL
|
||||||
const baseURL = window.config?.baseUrl || 'http://work.rangutech.cn:9131'
|
const baseURL = window.config?.baseUrl || 'http://work.rangutech.cn:9131'
|
||||||
@ -21,14 +19,6 @@ const service = axios.create({
|
|||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
service.interceptors.request.use(
|
service.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
// 是否需要设置 token
|
|
||||||
const isToken = (config.headers || {}).isToken === false
|
|
||||||
|
|
||||||
// 添加token到请求头
|
|
||||||
if (getToken() && !isToken) {
|
|
||||||
config.headers.Authorization = `Bearer ${getToken()}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// GET请求参数处理
|
// GET请求参数处理
|
||||||
if (config.method?.toLowerCase() === 'get' && config.params) {
|
if (config.method?.toLowerCase() === 'get' && config.params) {
|
||||||
const urlParams = tansParams(config.params)
|
const urlParams = tansParams(config.params)
|
||||||
@ -48,80 +38,22 @@ service.interceptors.request.use(
|
|||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
const {data, config} = response
|
const {data, config} = response
|
||||||
|
|
||||||
// 处理二进制数据响应
|
// 处理二进制数据响应
|
||||||
if (config.responseType === 'blob' || config.responseType === 'arraybuffer') {
|
if (config.responseType === 'blob' || config.responseType === 'arraybuffer') {
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 正常响应处理
|
// 正常响应处理
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 异常响应处理
|
// 异常响应处理
|
||||||
return Promise.reject(response)
|
return Promise.reject(response)
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
const {config, response, message} = error
|
const {config, response, message} = error
|
||||||
|
|
||||||
console.error('Response error:', {config, response, message})
|
console.error('Response error:', {config, response, message})
|
||||||
|
|
||||||
// 处理认证错误
|
|
||||||
if (response && [401, 471, 472].includes(response.status)) {
|
|
||||||
handleAuthError(config, response)
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理网络错误
|
|
||||||
handleNetworkError(message)
|
|
||||||
|
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理认证错误
|
|
||||||
*/
|
|
||||||
function handleAuthError(config, response) {
|
|
||||||
const excludeUrls = ['/Token/Logout', '/Token/Access']
|
|
||||||
|
|
||||||
if (!excludeUrls.includes(config.url)) {
|
|
||||||
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
|
|
||||||
confirmButtonText: '重新登录',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
removeToken()
|
|
||||||
removeUserTenantInfo()
|
|
||||||
// 这里需要导入store
|
|
||||||
// store.dispatch('LogOut').then(() => {});
|
|
||||||
window.location.reload() // 简单重载页面
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
// 用户取消操作
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理网络错误
|
|
||||||
*/
|
|
||||||
function handleNetworkError(message) {
|
|
||||||
let errorMsg = message
|
|
||||||
|
|
||||||
if (message === 'Network Error') {
|
|
||||||
errorMsg = '网络连接异常，请检查网络设置'
|
|
||||||
} else if (message.includes('timeout')) {
|
|
||||||
errorMsg = '请求超时，请稍后重试'
|
|
||||||
}
|
|
||||||
|
|
||||||
ElMessage({
|
|
||||||
message: errorMsg,
|
|
||||||
type: 'error',
|
|
||||||
duration: 1000,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default service
|
export default service
|
||||||
|
|||||||
@ -29,37 +29,19 @@ const imgList = [
|
|||||||
id: 2,
|
id: 2,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: [
|
list: ['main/5.png', 'main/6.png', 'main/7.png', 'main/8.png', 'main/9.png'],
|
||||||
'main/5.png',
|
|
||||||
'main/6.png',
|
|
||||||
'main/7.png',
|
|
||||||
'main/8.png',
|
|
||||||
'main/9.png',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: [
|
list: ['main/10.png', 'main/11.png', 'main/12.png', 'main/13.png', 'main/14.png'],
|
||||||
'main/10.png',
|
|
||||||
'main/11.png',
|
|
||||||
'main/12.png',
|
|
||||||
'main/13.png',
|
|
||||||
'main/14.png',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: [
|
list: ['main/15.png', 'main/16.png', 'main/17.png', 'main/18.png', 'main/19.png'],
|
||||||
'main/15.png',
|
|
||||||
'main/16.png',
|
|
||||||
'main/17.png',
|
|
||||||
'main/18.png',
|
|
||||||
'main/19.png',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
@ -135,9 +117,13 @@ onMounted(() => {})
|
|||||||
.my-card {
|
.my-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
img {
|
||||||
|
width: 40%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
.label {
|
.label {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 532px;
|
width: 40%;
|
||||||
padding-right: 25px;
|
padding-right: 25px;
|
||||||
font-family: 'PingFang SC';
|
font-family: 'PingFang SC';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -1,44 +1,72 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Swiper from '@/components/Swiper/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
|
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const swiperWidth = ref(400)
|
||||||
|
const swiperHeight = ref(400)
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
const videoLoaded = ref(true)
|
||||||
|
const list = [...window.softwareSystemList, ...window.hardwareSystemList]
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|
||||||
|
function onVideoLoaded() {
|
||||||
|
videoLoaded.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function toUrl(item) {
|
||||||
|
router.push({
|
||||||
|
path: '/product/detail',
|
||||||
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page" v-loading="videoLoaded">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<video autoplay muted loop>
|
<video autoplay muted loop @loadeddata="onVideoLoaded">
|
||||||
<source src="/static/images/main/display.mp4" type="video/mp4" />
|
<source src="/static/video/display.mp4" type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
<div class="banner-link"><span>进入演示系统</span></div>
|
<div class="banner-link"><span>进入演示系统</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper">
|
|
||||||
<Swiper
|
<Swiper
|
||||||
id="home_swiper"
|
id="home_swiper"
|
||||||
title="产品体系"
|
title="产品体系"
|
||||||
v-model="currentPage"
|
v-model="currentPage"
|
||||||
:data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
:data="list"
|
||||||
:page-size="4"
|
:page-size="3"
|
||||||
:show-pagination="true"
|
:show-pagination="true"
|
||||||
|
:source-width="swiperWidth"
|
||||||
|
:source-height="swiperHeight"
|
||||||
:auto-play="true"
|
:auto-play="true"
|
||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
<div class="my-card" :class="{active: isActive}">
|
<div class="list" @click="toUrl(item)">
|
||||||
<h2>{{ item }}</h2>
|
<div class="top">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="card flex column a-c j-c" :class="{active: isActive}">
|
||||||
|
<img :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'" :src="`./static/images/${item.imgUrl}`" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Swiper>
|
</Swiper>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page {
|
.page {
|
||||||
.banner {
|
.placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
&-link {
|
&-link {
|
||||||
@ -68,16 +96,31 @@ onMounted(() => {})
|
|||||||
video {
|
video {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.swiper {
|
|
||||||
width: 100%;
|
.list {
|
||||||
height: 800px;
|
|
||||||
.my-card {
|
|
||||||
background: #d9d9d9;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
.top {
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
background-color: #0389ff;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
height: calc(100% - 50px - 30px);
|
||||||
|
}
|
||||||
|
.r-img {
|
||||||
|
width: 90%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.m-img {
|
||||||
|
width: 70%;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
|
|
||||||
|
window.GD_KEYS = [
|
||||||
|
'348d477ba83826e46b32d3ff10fffe82',
|
||||||
|
'ed2ea36f8564541569c370254845d93d',
|
||||||
|
'c1da03827f956a215311c0f5229bddc3',
|
||||||
|
]
|
||||||
|
|
||||||
const map = ref(null)
|
const map = ref(null)
|
||||||
|
|
||||||
const center = [118.762616, 32.068811]
|
const center = [118.762616, 32.068811]
|
||||||
|
|||||||
@ -3,8 +3,9 @@ import axios from 'axios';
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { QuillEditor } from '@vueup/vue-quill'
|
import { QuillEditor } from '@vueup/vue-quill'
|
||||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||||
|
import {getNews,getNewsDetail,updateNews,saveDetail} from '@/api/index'
|
||||||
|
|
||||||
const API_BASE = window.config?.baseUrl
|
const baseURL = window.config?.baseUrl
|
||||||
|
|
||||||
// 新闻列表
|
// 新闻列表
|
||||||
const newsList = ref([]);
|
const newsList = ref([]);
|
||||||
@ -45,14 +46,20 @@ const editorOption= {
|
|||||||
modules:{
|
modules:{
|
||||||
toolbar: {
|
toolbar: {
|
||||||
container: [
|
container: [
|
||||||
['bold', 'italic', 'underline', 'strike'],
|
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
|
||||||
[{ header: 1 }, { header: 2 }],
|
['blockquote', 'code-block'], //引用，代码块
|
||||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
[{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
|
||||||
[{ indent: '-1' }, { indent: '+1' }],
|
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
|
||||||
[{ color: [] }, { background: [] }],
|
[{'script': 'sub'}, {'script': 'super'}], // 上下标
|
||||||
[{ align: [] }],
|
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
|
||||||
['link', 'image'],
|
[{'direction': 'rtl'}], // 文本方向
|
||||||
['clean'],
|
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
|
||||||
|
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
|
||||||
|
[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
|
||||||
|
[{'font': []}], //字体
|
||||||
|
[{'align': []}], //对齐方式
|
||||||
|
['clean'], //清除字体样式
|
||||||
|
['image', 'video'] //上传图片、上传视频
|
||||||
],
|
],
|
||||||
handlers: {
|
handlers: {
|
||||||
image: imageHandler,
|
image: imageHandler,
|
||||||
@ -127,16 +134,15 @@ function imageHandler() {
|
|||||||
// ----------------- 获取新闻 -----------------
|
// ----------------- 获取新闻 -----------------
|
||||||
const fetchNews = async () => {
|
const fetchNews = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`${API_BASE}/news/`, {
|
let query = {
|
||||||
params: {
|
status: statusFilter.value || undefined,
|
||||||
page: page.value,
|
page: page.value,
|
||||||
page_size: pageSize.value,
|
page_size: pageSize.value,
|
||||||
status: statusFilter.value || undefined,
|
}
|
||||||
},
|
let {code, data, pagination} = await getNews(query)
|
||||||
});
|
if (code === 0) {
|
||||||
if (res.data.code === 0) {
|
newsList.value = data;
|
||||||
newsList.value = res.data.data;
|
totalPages.value = pagination.total_pages;
|
||||||
totalPages.value = res.data.pagination.total_pages;
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("获取新闻失败", err);
|
console.error("获取新闻失败", err);
|
||||||
@ -146,10 +152,11 @@ const fetchNews = async () => {
|
|||||||
// ----------------- 添加/编辑 -----------------
|
// ----------------- 添加/编辑 -----------------
|
||||||
const saveNews = async () => {
|
const saveNews = async () => {
|
||||||
try {
|
try {
|
||||||
|
editingNews.content = quillInstance.value.root.innerHTML
|
||||||
if (isEditing.value) {
|
if (isEditing.value) {
|
||||||
await axios.post(`${API_BASE}/news/B8fpNxunbxj37x3VRcVz`, editingNews);
|
await updateNews(editingNews);
|
||||||
} else {
|
} else {
|
||||||
await axios.post(`${API_BASE}/news/VbxWW8EdJQGyWzJyvSrN`, editingNews);
|
await saveDetail(editingNews);
|
||||||
}
|
}
|
||||||
showForm.value = false;
|
showForm.value = false;
|
||||||
fetchNews();
|
fetchNews();
|
||||||
@ -161,16 +168,15 @@ const saveNews = async () => {
|
|||||||
const editNews = async (news) => {
|
const editNews = async (news) => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`${API_BASE}/news/details`, {
|
let query = {
|
||||||
params: { slug: news.slug }
|
slug: news.slug,
|
||||||
});
|
}
|
||||||
|
let {code, data} = await getNewsDetail(query)
|
||||||
console.log(res.data)
|
if (code === 0) {
|
||||||
if (res.data.code === 0) {
|
Object.assign(editingNews, data);
|
||||||
console.log(res.data.data)
|
|
||||||
Object.assign(editingNews, res.data.data);
|
|
||||||
isEditing.value = true;
|
isEditing.value = true;
|
||||||
showForm.value = true;
|
showForm.value = true;
|
||||||
|
quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
@ -185,6 +191,7 @@ const addNews = () => {
|
|||||||
content: "",
|
content: "",
|
||||||
status: "draft",
|
status: "draft",
|
||||||
slug: "",
|
slug: "",
|
||||||
|
datetime: null,
|
||||||
});
|
});
|
||||||
isEditing.value = false;
|
isEditing.value = false;
|
||||||
showForm.value = true;
|
showForm.value = true;
|
||||||
@ -222,7 +229,7 @@ function uploadImage(file) {
|
|||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', file);
|
formData.append('file', file);
|
||||||
|
|
||||||
fetch(`${API_BASE}/update/img`, {
|
fetch(`${baseURL}update/img`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData,
|
body: formData,
|
||||||
})
|
})
|
||||||
@ -230,7 +237,7 @@ function uploadImage(file) {
|
|||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.code === 0) {
|
if (data.code === 0) {
|
||||||
console.log(data)
|
console.log(data)
|
||||||
resolve(`${API_BASE}/download/img/${data.data}`);
|
resolve(`${baseURL}download/img/${data.data}`);
|
||||||
} else {
|
} else {
|
||||||
reject(data.msg);
|
reject(data.msg);
|
||||||
}
|
}
|
||||||
@ -243,6 +250,7 @@ function uploadImage(file) {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchNews();
|
fetchNews();
|
||||||
|
addNews();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -303,7 +311,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
|
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
|
||||||
<label>内容:</label>
|
<label>内容:</label>
|
||||||
<quill-editor v-model:content="editingNews.content" content-type="delta"
|
<quill-editor content-type="html"
|
||||||
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
|
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
|
||||||
<label>状态:
|
<label>状态:
|
||||||
<select v-model="editingNews.status">
|
<select v-model="editingNews.status">
|
||||||
|
|||||||
@ -1,15 +1,49 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {onMounted} from 'vue'
|
import {onMounted, ref} from 'vue'
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
|
|
||||||
import {newsDetail} from './mock'
|
import {getNewsDetail} from '@/api/index'
|
||||||
|
import {ElMessage} from 'element-plus'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const detail = route.query
|
const detail = route.query
|
||||||
detail.artical = newsDetail.find((item) => item.id == route.query.id).article
|
const showLoad = ref(true)
|
||||||
|
|
||||||
|
const newsTitle = ref('')
|
||||||
|
const newsTime = ref('')
|
||||||
|
const newsSubTitle = ref('')
|
||||||
|
const newsCoverImg = ref('')
|
||||||
|
const newsContent = ref(null)
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
onMounted(() => {})
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDetail()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getDetail = () => {
|
||||||
|
let query = {
|
||||||
|
slug: detail.slug,
|
||||||
|
}
|
||||||
|
getNewsDetail(query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
let {content, cover_image, snapshot, datetime, title} = res.data
|
||||||
|
newsTitle.value = title
|
||||||
|
newsTime.value = datetime
|
||||||
|
newsSubTitle.value = snapshot
|
||||||
|
newsCoverImg.value = cover_image
|
||||||
|
newsContent.value = content
|
||||||
|
showLoad.value = false
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
showLoad.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
showLoad.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const toBack = () => {
|
const toBack = () => {
|
||||||
router.back()
|
router.back()
|
||||||
@ -17,25 +51,27 @@ const toBack = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page flex column a-c">
|
<div class="page flex column a-c" v-loading="showLoad">
|
||||||
<div class="label">
|
<div v-if="newsTitle">
|
||||||
{{ detail.label }}
|
<h3 class="label">
|
||||||
</div>
|
{{ newsTitle }}
|
||||||
<div class="time">
|
</h3>
|
||||||
{{ detail.time }}
|
<h3 class="time" v-if="newsTime">
|
||||||
</div>
|
{{ newsTime }}
|
||||||
<div class="img">
|
</h3>
|
||||||
<img :src="`./static/images/${detail.imgUrl}`" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="artical">
|
<div class="artical">
|
||||||
{{ detail.artical }}
|
<div v-html="newsContent"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-content">暂无内容</div>
|
||||||
<div class="back" @click="toBack">返回</div>
|
<div class="back" @click="toBack">返回</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.page {
|
||||||
.label {
|
.label {
|
||||||
|
text-align: center;
|
||||||
margin: 64px 0 20px 0;
|
margin: 64px 0 20px 0;
|
||||||
font-family: 'PingFang SC';
|
font-family: 'PingFang SC';
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -43,29 +79,21 @@ const toBack = () => {
|
|||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
.time {
|
.time {
|
||||||
margin-bottom: 40px;
|
text-align: center;
|
||||||
}
|
font-family: 'PingFang SC';
|
||||||
.img {
|
font-weight: 500;
|
||||||
width: 1200px;
|
font-size: 20px;
|
||||||
height: 600px;
|
margin-bottom: 20px;
|
||||||
margin-bottom: 40px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.artical {
|
.artical {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
font-family: 'PingFang SC';
|
}
|
||||||
font-weight: 400;
|
.no-content {
|
||||||
font-size: 18px;
|
margin-top: 40px;
|
||||||
color: $black;
|
font-size: 32px;
|
||||||
text-indent: 2em;
|
|
||||||
white-space: pre-wrap; /* 保留换行符，同时允许自动折行 */
|
|
||||||
word-break: break-word; /* 长单词截断 */
|
|
||||||
margin-bottom: 300px;
|
|
||||||
}
|
}
|
||||||
.back {
|
.back {
|
||||||
|
margin-top: 40px;
|
||||||
padding: 10px 40px;
|
padding: 10px 40px;
|
||||||
background: #0389ff;
|
background: #0389ff;
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||||
@ -75,4 +103,5 @@ const toBack = () => {
|
|||||||
color: $white;
|
color: $white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,39 +1,72 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
defineOptions({name: 'New'})
|
defineOptions({name: 'New'})
|
||||||
import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
|
import {ref, onMounted, nextTick, onActivated, onDeactivated, computed} from 'vue'
|
||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
import Swiper from '@/components/Swiper/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
import {useRouter} from 'vue-router'
|
import {useRouter} from 'vue-router'
|
||||||
import {onBeforeRouteLeave} from 'vue-router'
|
import {onBeforeRouteLeave} from 'vue-router'
|
||||||
import {list} from './mock'
|
import {getNews} from '@/api/index'
|
||||||
|
import {fontSize} from '@/utils'
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
const showLoad = ref(true)
|
||||||
|
const containerWidth = ref(fontSize(1700))
|
||||||
|
const containerHeight = computed(() => {
|
||||||
|
if (newList.value.length > 0) {
|
||||||
|
return 350 * newList.value.length
|
||||||
|
} else {
|
||||||
|
return 200
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const containerWidth = ref(1700)
|
onMounted(() => {
|
||||||
const containerHeight = ref(1400)
|
getNewList()
|
||||||
|
})
|
||||||
onMounted(() => {})
|
|
||||||
|
|
||||||
let router = useRouter()
|
let router = useRouter()
|
||||||
|
|
||||||
|
let scrollTop = 0
|
||||||
|
|
||||||
|
const newList = ref([])
|
||||||
|
|
||||||
|
const page = ref({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalPages: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
async function getNewList() {
|
||||||
|
let query = {
|
||||||
|
status: 'published',
|
||||||
|
page: page.value.pageNum,
|
||||||
|
page_size: page.value.pageSize,
|
||||||
|
}
|
||||||
|
|
||||||
|
getNews(query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
newList.value = res.data
|
||||||
|
page.value.totalPages = res.pagination.total_pages
|
||||||
|
showLoad.value = false
|
||||||
|
} else {
|
||||||
|
showLoad.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
showLoad.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const toDetail = (item) => {
|
const toDetail = (item) => {
|
||||||
router.push({
|
router.push({
|
||||||
path: '/news/detail',
|
path: '/news/detail',
|
||||||
query: {
|
query: {
|
||||||
id: item.id,
|
id: item.id,
|
||||||
imgUrl: item.imgUrl,
|
slug: item.slug,
|
||||||
label: item.label,
|
|
||||||
time: item.time,
|
|
||||||
subLabel: item?.subLabel,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
let scrollTop = 0
|
|
||||||
|
|
||||||
onDeactivated(() => {
|
|
||||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
|
||||||
})
|
|
||||||
|
|
||||||
onActivated(async () => {
|
onActivated(async () => {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
// 再强制等一帧布局
|
// 再强制等一帧布局
|
||||||
@ -42,20 +75,20 @@ onActivated(async () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onDeactivated(() => {
|
||||||
|
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||||
|
})
|
||||||
|
|
||||||
onBeforeRouteLeave((to) => {
|
onBeforeRouteLeave((to) => {
|
||||||
if (to.name === 'Detail') return
|
if (to.name === 'Detail') return
|
||||||
|
|
||||||
// 去别的顶级菜单 → 销毁
|
|
||||||
const parent = to.matched[0]
|
const parent = to.matched[0]
|
||||||
if (parent?.name !== 'News') {
|
if (parent?.name !== 'News') {
|
||||||
// 通过修改路由 meta 让 keep-alive 排除当前组件
|
|
||||||
// 需要把 keep-alive 写成 :include="cachedNames" 并在 pinia 里维护数组
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page" v-loading="showLoad">
|
||||||
<Banner class="banner" img="banner/news.png" />
|
<Banner class="banner" img="banner/news.png" />
|
||||||
<Swiper
|
<Swiper
|
||||||
id="one"
|
id="one"
|
||||||
@ -69,24 +102,27 @@ onBeforeRouteLeave((to) => {
|
|||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
<div class="my-card">
|
<div class="my-card">
|
||||||
|
<template v-if="newList.length > 0">
|
||||||
<div
|
<div
|
||||||
class="news flex j-s"
|
class="news flex j-s"
|
||||||
:class="{active: isActive}"
|
:class="{active: isActive}"
|
||||||
v-for="item in list"
|
v-for="item in newList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@click="toDetail(item)"
|
@click="toDetail(item)"
|
||||||
>
|
>
|
||||||
<div class="img">
|
<div class="img">
|
||||||
<img :src="`./static/images/${item.imgUrl}`" />
|
<img :src="item.cover_image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="label">{{ item.label }}</div>
|
<div class="label">{{ item.title }}</div>
|
||||||
<div class="time">{{ item.time }}</div>
|
<div class="time">{{ item?.time }}</div>
|
||||||
<div class="sub-label">{{ item?.subLabel }}</div>
|
<div class="sub-label">{{ item?.subLabel }}</div>
|
||||||
<div class="text">{{ item.content }}</div>
|
<div class="text">{{ item.snapshot }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-else class="no-content">暂无内容</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Swiper>
|
</Swiper>
|
||||||
@ -153,5 +189,10 @@ onBeforeRouteLeave((to) => {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-content {
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,63 +0,0 @@
|
|||||||
export const advantages = `
|
|
||||||
<div>★ 提供业界领先的性价比解决方案。</div>
|
|
||||||
<div>★ 内置4G全网通，无需外接网络，即装即用。</div>
|
|
||||||
<div>★ 宽电压输入，轻松应对电压不稳等复杂情况。</div>
|
|
||||||
<div>★ 超低功耗设计，极大节约长期用电与运维成本。</div>
|
|
||||||
<div>★ 极致轻量，极大拓宽了安装位置与应用场景。</div>
|
|
||||||
<div>★ 灵活可调的侦测模式，满足从安防到巡检的全场景需求。</div>
|
|
||||||
<div>★ 具备升级能力，当前投资可平滑演进至更高专业层级。</div>
|
|
||||||
`
|
|
||||||
|
|
||||||
export const monitorSystemList = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
description: `
|
|
||||||
<div class="monitor">RGRID-Lite 是一款专为国标无人机远程识别设计的地面监测设备。它能够精准获取低空目标区域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并动态显示与记录无人机及飞手的移动轨迹。所有数据实时上传至后台系统，支持长期存储与便捷回溯，为空域监管提供完整的数据支撑。</div>
|
|
||||||
<div class="monitor">设备采用轻量化与一体化设计，部署灵活，可快速适配多种复杂安装环境。凭借超低功耗特性，可搭配UPS不间断电源或太阳能供电系统，实现长时间稳定运行。同时，内置4G全网通模块，无需依赖外部网络，彻底解决供电与传输难题。</div>
|
|
||||||
<div class="monitor">RGRID-Lite 在具备卓越性能的同时，展现出优异的性价比，广泛适用于各类低空监管场景。设备支持功能定制与二次开发，可根据用户需求灵活扩展，是构建低成本、高效率无人机监管体系的理想之选。</div>
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
description: `
|
|
||||||
<div class="monitor">RGRID-Ped 是一款遵循国标GB42590-2023的便携式无人机远程识别模块。它能够精准监测并获取目标空域内无人机的多项关键数据，包括实时位置、飞手位置、唯一SN识别码、飞行型号、航速与高度等，并实时推送至用户平台。</div>
|
|
||||||
<div class="monitor">该模块采用高度集成化设计，体积小巧、功耗极低，具备完善的接口与通信协议，可快速适配并嵌入各类无人机反制、监管或作业设备中，轻松应对有限的内部空间要求。同时，模块支持全方位的二次开发与功能定制，为各类集成应用提供可靠、灵活的低空感知核心。</div>
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
description: `
|
|
||||||
<div class="monitor">RGRID-Mob 是一款符合国标 GB42590-2023 的便携式无人机远程识别设备，专为机动巡检与快速部署场景设计。它可精准监测目标空域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并实时显示与记录无人机与飞手的动态轨迹。所有数据同步上传至后台，支持长期存储与灵活调阅，为空域执法与现场处置提供完整信息支撑。</div>
|
|
||||||
<div class="monitor">设备支持多终端协同管理，用户可通过移动端小程序实时查看数据，指挥中心亦能通过大屏系统统览全局。系统具备分级权限管理功能，支持多级账户与设备组网，实现权限分离与协同指挥。手机端集成一键导航功能，可快速定位飞手位置；指挥平台则全面监管辖区内所有设备状态与每架被侦测无人机的详细数据，真正实现“前端机动侦测—后端统一指挥”的一体化管控闭环。</div>
|
|
||||||
<div class="monitor">RGRID-Mob 重量轻、体积小，可随身挂载，便于野外作业与快速机动。内置4G数据传输模块，开机即用，无需复杂配对，极大提升部署效率与操作便捷性，是应对突发低空监管任务的理想移动侦测终端。</div>
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export const remoteDeviceList = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
description: `<div>多模态数据融合：直面不同侦测设备的数据壁垒，凭借自研融合算法，呈现深度可靠的全局态势。</div>
|
|
||||||
<div>体系化平台搭配：作为中枢神经，无缝对接与总览旗下各类专业平台，奠定一站式服务基石。</div>`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
description: ` <div>大量设备接入经验：具备广泛的设备兼容性，确保监管网络覆盖无死角。</div>
|
|
||||||
<div>SAAS化架构：支持多租户权限管理，满足不同区域、不同层级管理单位的独立运营与协同监管需求。</div>`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
description: `<div>大量行业内接入经验：预集成了众多厂商设备接口，极大降低了系统集成难度与成本，体现了卓越的性价比。</div>
|
|
||||||
<div>体系化平台搭配：与监管平台无缝联动，接收预警并执行指令，形成“侦-识-控”一体的完整闭环。</div>`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
description: `<div>多模态数据融合：将飞行数据、视频流与AI识别结果深度融合，输出可直接应用的业务洞察。</div>
|
|
||||||
<div>SAAS化架构：支持多团队、多项目并行作业与数据隔离，轻松管理大规模机队。</div>`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
description: ` <div>体系化平台搭配：与真实监管平台联动，是“一站式服务”中用于模拟、预测与优化的关键一环。</div>
|
|
||||||
<div>多模态数据融合：将真实地理信息、仿真数据与实时监管流融合，在虚拟空间中复现最真实的低空场景。</div>`,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
@ -1,16 +1,24 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted, computed} from 'vue'
|
import {ref, onMounted, shallowRef, watchEffect} from 'vue'
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
import {advantages, monitorSystemList, remoteDeviceList} from './description.js'
|
import {cryptoDecrypt} from '@/utils/cryptojs.js'
|
||||||
|
|
||||||
|
const advantages = window.advantages
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const detail = route.query
|
const query = JSON.parse(cryptoDecrypt(route.query.type))
|
||||||
|
|
||||||
const showMonitor = computed(() => detail.type === 'monitorSystem')
|
const videoLoaded = ref(false)
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {
|
||||||
|
videoLoaded.value = query.type !== 'softwareSystem' ? false : true
|
||||||
|
})
|
||||||
|
|
||||||
|
function onVideoLoaded() {
|
||||||
|
videoLoaded.value = false
|
||||||
|
}
|
||||||
|
|
||||||
const toBack = () => {
|
const toBack = () => {
|
||||||
router.back()
|
router.back()
|
||||||
@ -18,58 +26,76 @@ const toBack = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page flex column a-c">
|
<div class="page flex column a-c" v-loading="videoLoaded">
|
||||||
<div class="label">{{ detail.title }} {{ detail.subTitle }}</div>
|
<h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
|
||||||
<div class="content flex j-s">
|
|
||||||
<div class="img">
|
|
||||||
<img :src="`./static/images/${detail.imgUrl}`" alt="" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 核心优势 -->
|
<!-- 硬件内容 -->
|
||||||
<div class="text" v-if="showMonitor">
|
<template v-if="query.type === 'hardwareSystem'">
|
||||||
<div class="title">核心优势：</div>
|
<div class="content flex j-s hardware">
|
||||||
|
<img class="img" :src="`./static/images/${query.imgUrl}`" alt="" />
|
||||||
|
<div class="text">
|
||||||
|
<h4 class="title">核心优势：</h4>
|
||||||
<div v-html="advantages"></div>
|
<div v-html="advantages"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text" v-if="!showMonitor">
|
|
||||||
<div v-html="remoteDeviceList[detail.id - 1].description"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 介绍 -->
|
<div class="descripition">
|
||||||
<div class="descripition" v-if="showMonitor">
|
<div v-html="query.description"></div>
|
||||||
<div v-html="monitorSystemList[detail.id - 1].description"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 软件 -->
|
||||||
|
<template v-else>
|
||||||
|
<div class="content software flex">
|
||||||
|
<video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
|
||||||
|
<source :src="`./static/video/${query.video}`" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<div class="descripition">
|
||||||
|
<div v-html="query.description"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-list flex j-c a-c wrap">
|
||||||
|
<div class="card" v-for="item in query.card" :key="item.id">
|
||||||
|
<h4 class="title">{{ item.title }}</h4>
|
||||||
|
<div class="content">{{ item.content }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<div class="back" @click="toBack">返回</div>
|
<div class="back" @click="toBack">返回</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.monitor) {
|
:deep(.hardware) {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.8;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin: 64px 0 20px 0;
|
margin: 40px 0 0 0;
|
||||||
font-family: 'PingFang SC';
|
font-family: 'PingFang SC';
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
width: 1300px;
|
|
||||||
height: 550px;
|
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hardware {
|
||||||
|
width: 1300px;
|
||||||
.img {
|
.img {
|
||||||
img {
|
|
||||||
width: 550px;
|
width: 550px;
|
||||||
height: 550px;
|
height: 550px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 5ex;
|
line-height: 5ex;
|
||||||
@ -80,12 +106,59 @@ const toBack = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.software {
|
||||||
|
width: 1700px;
|
||||||
|
align-items: flex-start;
|
||||||
|
video {
|
||||||
|
width: 65%;
|
||||||
|
height: auto;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list {
|
||||||
|
width: 1200px;
|
||||||
|
height: 100%;
|
||||||
|
.card {
|
||||||
|
width: 350px;
|
||||||
|
height: 300px;
|
||||||
|
margin: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: $border_radius;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
background-color: #0389ff;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28px;
|
||||||
|
border-radius: $border_radius $border_radius 0 0;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.descripition {
|
.descripition {
|
||||||
width: 1000px;
|
width: 1000px;
|
||||||
font-size: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.back {
|
.back {
|
||||||
|
margin-top: 40px;
|
||||||
padding: 10px 40px;
|
padding: 10px 40px;
|
||||||
background: #0389ff;
|
background: #0389ff;
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
|||||||
@ -5,10 +5,13 @@ import Banner from '@/components/Banner/index.vue'
|
|||||||
import Project from './project.vue'
|
import Project from './project.vue'
|
||||||
|
|
||||||
import {findLabelByUrl} from '@/utils'
|
import {findLabelByUrl} from '@/utils'
|
||||||
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||||
|
|
||||||
import {useNavStore} from '@/store/nav'
|
import {useNavStore} from '@/store/nav'
|
||||||
const navStore = useNavStore()
|
const navStore = useNavStore()
|
||||||
|
|
||||||
|
const hardwareSystemList = window.hardwareSystemList
|
||||||
|
|
||||||
import {useRouter} from 'vue-router'
|
import {useRouter} from 'vue-router'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@ -18,24 +21,11 @@ onMounted(() => {})
|
|||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
|
||||||
const swiperItem = ref([
|
|
||||||
{id: 1, title: 'RGRID-Lite', subTitle: '无人机Remote ID远程识别设备', imgUrl: 'product/detail/6.png'},
|
|
||||||
{id: 2, title: 'RGRID-Ped', subTitle: '无人机Remote ID远程识别模块', imgUrl: 'product/detail/1.png'},
|
|
||||||
{id: 3, title: 'RGRID-Mob', subTitle: '无人机Remote ID远程识别手持设备', imgUrl: 'product/detail/4.png'},
|
|
||||||
])
|
|
||||||
|
|
||||||
// 点击标题跳转详情页
|
// 点击标题跳转详情页
|
||||||
function titleClick(item) {
|
function titleClick(item) {
|
||||||
console.log('title clicked:', item)
|
|
||||||
router.push({
|
router.push({
|
||||||
path: '/product/detail',
|
path: '/product/detail',
|
||||||
query: {
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||||
type: 'monitorSystem',
|
|
||||||
id: item.id,
|
|
||||||
title: item.title,
|
|
||||||
subTitle: item.subTitle,
|
|
||||||
imgUrl: item.imgUrl,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -47,11 +37,12 @@ function titleClick(item) {
|
|||||||
id="one"
|
id="one"
|
||||||
:title="title"
|
:title="title"
|
||||||
v-model="currentPage"
|
v-model="currentPage"
|
||||||
:data="swiperItem"
|
:data="hardwareSystemList"
|
||||||
:page-size="3"
|
:page-size="3"
|
||||||
:show-pagination="false"
|
:show-pagination="false"
|
||||||
:auto-play="false"
|
:auto-play="false"
|
||||||
:sourceHeight="400"
|
:source-width="300"
|
||||||
|
:source-height="400"
|
||||||
:source-gap="80"
|
:source-gap="80"
|
||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
@ -60,7 +51,6 @@ function titleClick(item) {
|
|||||||
<div class="title">{{ item.title }}</div>
|
<div class="title">{{ item.title }}</div>
|
||||||
<div class="sub-title">{{ item.subTitle }}</div>
|
<div class="sub-title">{{ item.subTitle }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
|
||||||
<img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
|
<img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -74,14 +64,12 @@ function titleClick(item) {
|
|||||||
.content {
|
.content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.top {
|
.top {
|
||||||
background-color: #eee;
|
background-color: #0389ff;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 1px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
.line {
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: $black;
|
|
||||||
}
|
|
||||||
.img {
|
.img {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
@ -5,7 +5,7 @@ onMounted(() => {})
|
|||||||
|
|
||||||
// 资质证书
|
// 资质证书
|
||||||
const certificateWidth = ref(1300)
|
const certificateWidth = ref(1300)
|
||||||
const certificateHeight = ref(500)
|
const certificateHeight = ref(700)
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
|
||||||
@ -20,7 +20,7 @@ const imgList = [
|
|||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
list: [
|
list: [
|
||||||
{id: 2.1, width: 290, height: 188, label: '大型活动保障', img: 'product/2.png'},
|
{id: 2.1, width: 290, height: 188, label: '要地防控', img: 'product/2.png'},
|
||||||
{id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
|
{id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -28,7 +28,7 @@ const imgList = [
|
|||||||
id: 3,
|
id: 3,
|
||||||
list: [
|
list: [
|
||||||
{id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
|
{id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
|
||||||
{id: 3.2, width: 210, height: 280, label: '要地防控', img: 'product/7.png'},
|
{id: 3.2, width: 210, height: 280, label: '大型活动保障', img: 'product/7.png'},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -54,13 +54,8 @@ const imgList = [
|
|||||||
:showHover="false"
|
:showHover="false"
|
||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
<div class="certificate flex j-s a-c" :class="{active: isActive}">
|
<div class="certificate flex j-s" :class="{active: isActive}">
|
||||||
<div
|
<div v-for="list in imgList" :index="list.id" class="flex j-c wrap">
|
||||||
v-for="(list, listIdx) in imgList"
|
|
||||||
:index="list.id"
|
|
||||||
class="flex j-c a-c wrap"
|
|
||||||
:class="{'last-row': listIdx === imgList.length - 1}"
|
|
||||||
>
|
|
||||||
<div v-for="(img, imgIndex) in list.list" :key="imgIndex">
|
<div v-for="(img, imgIndex) in list.list" :key="imgIndex">
|
||||||
<div class="label">{{ img.label }}</div>
|
<div class="label">{{ img.label }}</div>
|
||||||
<img
|
<img
|
||||||
@ -82,9 +77,7 @@ const imgList = [
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#certificate {
|
#certificate {
|
||||||
// margin-top: 60px;
|
|
||||||
.certificate {
|
.certificate {
|
||||||
margin-top: 40px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.label {
|
.label {
|
||||||
|
|||||||
@ -4,7 +4,12 @@ import Swiper from '@/components/Swiper/index.vue'
|
|||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
import {findLabelByUrl} from '@/utils'
|
import {findLabelByUrl} from '@/utils'
|
||||||
|
|
||||||
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||||
|
|
||||||
import {useNavStore} from '@/store/nav'
|
import {useNavStore} from '@/store/nav'
|
||||||
|
|
||||||
|
const softwareSystemList = window.softwareSystemList
|
||||||
|
|
||||||
const navStore = useNavStore()
|
const navStore = useNavStore()
|
||||||
|
|
||||||
import {useRouter} from 'vue-router'
|
import {useRouter} from 'vue-router'
|
||||||
@ -13,31 +18,17 @@ const router = useRouter()
|
|||||||
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
||||||
|
|
||||||
const swiperWidth = ref(1300)
|
const swiperWidth = ref(1300)
|
||||||
const swiperHeight = ref(500)
|
const swiperHeight = ref(800)
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
|
||||||
const swiperItem = ref([
|
|
||||||
{id: 1, img: '', title: '低空全域运营中枢'},
|
|
||||||
{id: 2, img: '', title: '无人机精准识别与管控系统'},
|
|
||||||
{id: 3, img: '', title: '开放式反制协同指挥平台'},
|
|
||||||
{id: 4, img: '', title: '全自动智能巡检作业平台'},
|
|
||||||
{id: 5, img: '', title: '低空数字孪生与推演平台'},
|
|
||||||
])
|
|
||||||
|
|
||||||
// 点击标题跳转详情页
|
// 点击标题跳转详情页
|
||||||
function titleClick(item) {
|
function titleClick(item) {
|
||||||
console.log('title clicked:', item)
|
|
||||||
router.push({
|
router.push({
|
||||||
path: '/product/detail',
|
path: '/product/detail',
|
||||||
query: {
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||||
type: 'remoteDevice',
|
|
||||||
id: item.id,
|
|
||||||
title: item.title,
|
|
||||||
img: item.img,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -55,14 +46,14 @@ function titleClick(item) {
|
|||||||
:source-height="swiperHeight"
|
:source-height="swiperHeight"
|
||||||
:showHover="false"
|
:showHover="false"
|
||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{isActive}">
|
||||||
<div class="content flex j-s a-c wrap" @click="titleClick(item)">
|
<div class="content flex j-c a-c wrap">
|
||||||
<div v-for="list in swiperItem" :key="list.id" class="list">
|
<div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="title">{{ list.title }}</div>
|
<div class="title">{{ list.title }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="my-card" :class="{active: isActive}"></div>
|
<img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -73,19 +64,33 @@ function titleClick(item) {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 1px solid red;
|
.list {
|
||||||
.top {
|
margin-top: 60px;
|
||||||
background-color: #eee;
|
margin: 0 15px;
|
||||||
padding: 10px 0;
|
width: 400px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-50px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
background-color: #0389ff;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
}
|
}
|
||||||
.img {
|
.img {
|
||||||
width: 300px;
|
width: 100%;
|
||||||
height: 300px;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user