yiqiuyang/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: yiqiuyang:1
Branches Tags
yiqiuyang:main yiqiuyang:new yiqiuyang:1
...
pull from: yiqiuyang:new
Branches Tags
yiqiuyang:new yiqiuyang:main yiqiuyang:1

17 Commits
1 ... new

Author SHA1 Message Date
yiqiuyang
61602a736b 1 2026-05-17 23:25:42 +08:00
yiqiuyang
e9a34e3599 修改公司地址 2026-05-17 14:43:40 +08:00
yiqiuyang
017f5255ef 修改设备图片 2025-10-16 18:16:23 +08:00
yiqiuyang
5e74fa2196 gitigonre 2025-10-16 17:44:21 +08:00
yiqiuyang
e912175871 删除多余视频文件 2025-10-16 17:42:32 +08:00
yiqiuyang
281d0015aa gitignore 2025-10-16 17:39:38 +08:00
yiqiuyang
bdca181855 修改配置文件 2025-10-16 17:38:45 +08:00
yiqiuyang
168748eb18 Merge branch 'main' of https://git.rangutech.com/yiqiuyang/portal 2025-10-16 17:36:31 +08:00
yiqiuyang
3f5f76946d news 2025-10-16 17:36:27 +08:00
zhaoke
b9719c22cd 修改富文本 2025-10-16 17:35:59 +08:00
zhaoke
a5d1de0e23 修改管理页面 2025-10-16 16:50:46 +08:00
yiqiuyang
5d93a81ec6 Merge branch 'main' of https://git.rangutech.com/yiqiuyang/portal 2025-10-16 15:50:48 +08:00
yiqiuyang
e5569b37a1 1 2025-10-16 15:48:14 +08:00
zhaoke
23ad5d6f6d 管理页面 2025-10-16 15:45:55 +08:00
yiqiuyang
05da1f7fbb 创建富文本 2025-10-15 16:47:09 +08:00
yiqiuyang
502eaff488 提交代码 2025-10-15 16:46:35 +08:00
zhaoke
9a01223fc9 修改 2025-10-13 18:41:08 +08:00
72 changed files with 5179 additions and 528 deletions
Expand all files Collapse all files

2
.gitignore vendored
View File

@ -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

3
.prettierrc
View File

@ -5,5 +5,6 @@
"singleQuote": true, "singleQuote": true,
"trailingComma": "es5", "trailingComma": "es5",
"bracketSpacing": false, "bracketSpacing": false,
"htmlWhitespaceSensitivity": "ignore" "htmlWhitespaceSensitivity": "ignore",
"printWidth": 120
} }

8
index.html
View File

@ -5,7 +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>
<script src="/nav/index.js"></script> <meta name="keywords" content="燃谷,万谷硅巷,低空经济,低空监管,远程识别,RemoteID,RID" />
<meta
name="description"
content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
/>
<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>

6
package.json
View File

@ -9,14 +9,18 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@vueup/vue-quill": "^1.2.0",
"@vueuse/core": "^13.8.0", "@vueuse/core": "^13.8.0",
"axios": "^1.11.0", "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",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.5.0", "pinia-plugin-persistedstate": "^4.5.0",
"quill": "^2.0.3",
"terser": "^5.43.1", "terser": "^5.43.1",
"v-viewer": "^3.0.11",
"vue": "^3.5.18", "vue": "^3.5.18",
"vue-router": "^4.5.1" "vue-router": "^4.5.1"
}, },

8
public/config.js
View File

@ -1,5 +1,3 @@
window.GD_KEYS = [ window.config = {
'348d477ba83826e46b32d3ff10fffe82', baseUrl: 'http://192.168.3.10:9121/',
'ed2ea36f8564541569c370254845d93d', }
'c1da03827f956a215311c0f5229bddc3',
]

44
public/nav/index.js → public/config/nav.js
View File

@ -3,25 +3,25 @@ window.nav = {
{id: 1, label: '首页', url: '/', hasChildren: false}, {id: 1, label: '首页', url: '/', hasChildren: false},
{ {
id: 2, id: 2,
label: '产品中心', label: '解决方案',
url: '/product', url: '/product',
hasChildren: true, hasChildren: true,
children: [ children: [
{ {
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,
}, },
], ],
}, },
{id: 3, label: '服务与支撑', url: '/services', hasChildren: false}, // {id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
{id: 4, label: '新闻中心', url: '/news', hasChildren: false}, {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
{id: 5, label: '关于我们', url: '/about', hasChildren: false}, {id: 5, label: '关于我们', url: '/about', hasChildren: false},
{id: 6, label: '联系我们', url: '/link', hasChildren: false}, {id: 6, label: '联系我们', url: '/link', hasChildren: false},
@ -29,28 +29,26 @@ window.nav = {
footer: [ footer: [
{ {
id: 1, id: 1,
label: '产品中心', label: '解决方案',
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'},
{id: 1.3, label: '智能加载服务', url: '/product'},
{id: 1.4, label: '智能加载服务', url: '/product'},
], ],
}, },
{ // {
id: 2, // id: 2,
label: '服务与支撑', // label: '服务与支撑',
url: '/services', // url: '/services',
hasChildren: false, // hasChildren: false,
}, // },
{ // {
id: 3, // id: 3,
label: '软件下载', // label: '软件下载',
url: '/download', // url: '/download',
hasChildren: false, // hasChildren: false,
}, // },
{id: 4, label: '新闻中心', url: '/news', hasChildren: false}, {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
{ {
id: 5, id: 5,

177
public/config/product.js Normal file
View 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>`,
},
]

BIN
public/static/images/main/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/static/images/news/1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 878 KiB

BIN
public/static/images/news/2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/static/images/news/3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/static/images/news/4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 714 KiB

BIN
public/static/images/product/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
public/static/images/product/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 356 KiB

BIN
public/static/images/product/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

BIN
public/static/images/product/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/static/images/product/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/static/images/product/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 436 KiB

BIN
public/static/images/product/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 884 KiB

BIN
public/static/images/product/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

BIN
public/static/images/product/detail/m1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/static/images/product/detail/m2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
public/static/images/product/detail/m3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
public/static/images/product/detail/r1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
public/static/images/product/detail/r2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

BIN
public/static/images/product/detail/r3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
public/static/images/product/detail/r4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 KiB

BIN
public/static/images/product/detail/r5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
public/static/video/2.mp4 Normal file
View File

Binary file not shown.

BIN
public/static/video/3.mp4 Normal file
View File

Binary file not shown.

BIN
public/static/video/4.mp4 Normal file
View File

Binary file not shown.

BIN
public/static/video/5.mp4 Normal file
View File

Binary file not shown.

BIN
public/static/video/display.mp4 Normal file
View File

Binary file not shown.

19
src/api/device.js
View File

@ -1,19 +0,0 @@
import request from '@/utils/request'
// 设备设置
export function deviceSet(data) {
return request({
url: '/rangu/rid/setting',
method: 'post',
data,
})
}
// 设备设置
export function deviceGet(params) {
return request({
url: '/rangu/rid/getting',
method: 'get',
params,
})
}

46
src/api/index.js Normal file
View File

@ -0,0 +1,46 @@
import request from '@/utils/request'
// 获取访问接口
export function visit(data) {
return request({
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',
data,
})
}

2
src/assets/styles/variable.scss
View File

@ -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;

26
src/components/meta/index.vue Normal file
View File

@ -0,0 +1,26 @@
<script setup>
import {ref, onMounted} from 'vue'
onMounted(() => {})
</script>
<template>
<div>
<p>ID/无人机低空监管设备 无人机定位设备/无人机飞手定位设备/无人机侦测设备/software ID无人机远程识别模块 software</p>
<p>software ID无人机识别设备/符合GB-42590-2023/无人机远程识别发射模块 无人机远程识别设备/无人机RID/software</p>
<p>ID无人机远程识别广播模块/RID无人机识别/无人机飞手远程定位设备</p>
<p>无人机测距模块/无人机侦测监管设备/RID无人机识别/无人机定位器/无人机飞手定位器</p>
<p>无人机侦测定位设备/迷你无人机识别模块/低空经济无人机识别设备/单兵无人机侦测识别设备</p>
<p>无人机探测器/防撞机无人机定位设备/software ID无人机预警仪</p>
<p>全向无人机探测设备/无人机定位飞手定位设备/安防安保无人机监测设备/RID无人机识别/software ID远程识别模块</p>
<p>无人机侦测设备飞手定位飞行轨迹/UAV无线电侦测设备/无人机GPS GNSS定位设备</p>
<p>无人机RID广播识别模块/无人机探测飞手定位飞行轨迹/专业级无人机预警侦测设备 无人机航拍防撞设备/无人机Remote</p>
<p>ID国标定位侦测设备/低空安防无人机监管 无人机识别跟踪设备/RID无人机定位模块/software</p>
<p>ID无人机定位跟踪设备带飞手定位飞行轨迹 自主研发无人机侦测定位模块/software</p>
<p>ID无人机远程识别设备/飞机定位飞行轨迹飞手定位无人机识别模块源头厂家 无人机标签识别设备/software</p>
<p>
ID无人机侦测定位设备/远程广播模块识别 无人机远程识别地面站/RID无人机识别/无人机巡检智能识别模块/无人机定位飞手定位
</p>
</div>
</template>
<style lang="scss" scoped></style>

72
src/components/swiper/index.vue
View File

@ -1,12 +1,5 @@
<script setup> <script setup>
import { import {ref, computed, watch, nextTick, getCurrentInstance, onUnmounted} from 'vue'
ref,
computed,
watch,
nextTick,
getCurrentInstance,
onUnmounted,
} from 'vue'
/* -------------------- 组件接口定义 -------------------- */ /* -------------------- 组件接口定义 -------------------- */
const currentPage = defineModel({type: [Number, String], default: 1}) const currentPage = defineModel({type: [Number, String], default: 1})
@ -26,7 +19,7 @@ const props = defineProps({
sourceGap: {type: Number, default: 20}, sourceGap: {type: Number, default: 20},
}) })
const emit = defineEmits(['page-change', 'item-click', 'item-hover']) const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
/* -------------------- 响应式变量 -------------------- */ /* -------------------- 响应式变量 -------------------- */
const instance = getCurrentInstance() const instance = getCurrentInstance()
@ -38,19 +31,20 @@ 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( const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
() => const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
props.pageSize * itemWidth.value +
(props.pageSize - 1) * itemGap.value +
'px'
)
const trackWidth = computed(
() => props.data.length * itemTotalWidth.value - itemGap.value + 'px'
)
const totalPages = computed(() => props.data.length - props.pageSize + 1) const totalPages = computed(() => props.data.length - props.pageSize + 1)
/* -------------------- 方法 -------------------- */ /* -------------------- 方法 -------------------- */
/**
* 标题点击事件
*/
const clickTitle = () => {
emit('title-click')
}
/** /**
* 执行平移动画 * 执行平移动画
* @param {number} page - 目标页码 * @param {number} page - 目标页码
@ -58,9 +52,7 @@ const totalPages = computed(() => props.data.length - props.pageSize + 1)
const translate = (page) => { const translate = (page) => {
if (!trackRef.value) return if (!trackRef.value) return
trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease` trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
trackRef.value.style.transform = `translateX(-${ trackRef.value.style.transform = `translateX(-${itemTotalWidth.value * (page - 1)}px)`
itemTotalWidth.value * (page - 1)
}px)`
} }
/** /**
@ -75,8 +67,7 @@ const goToPage = (page) => {
* 切换到下一页，循环播放 * 切换到下一页，循环播放
*/ */
const nextPage = () => { const nextPage = () => {
const nextPage = const nextPage = currentPage.value < totalPages.value ? currentPage.value + 1 : 1
currentPage.value < totalPages.value ? currentPage.value + 1 : 1
goToPage(nextPage) goToPage(nextPage)
} }
@ -84,8 +75,7 @@ const nextPage = () => {
* 切换到上一页，循环播放 * 切换到上一页，循环播放
*/ */
const prevPage = () => { const prevPage = () => {
const prevPage = const prevPage = currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
goToPage(prevPage) goToPage(prevPage)
} }
@ -175,7 +165,10 @@ onUnmounted(stopAutoPlay)
<template> <template>
<section :id="id" class="generic-carousel"> <section :id="id" class="generic-carousel">
<!-- 标题 --> <!-- 标题 -->
<h2 v-if="title" class="carousel-title">{{ title }}</h2> <slot name="title">
<h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
</slot>
<!-- <h2 v-if="title" class="carousel-title">{{ title }}</h2> -->
<!-- 分页指示器 --> <!-- 分页指示器 -->
<div v-if="showDot" class="carousel-pagination"> <div v-if="showDot" class="carousel-pagination">
@ -189,16 +182,9 @@ onUnmounted(stopAutoPlay)
</div> </div>
<!-- 导航按钮 --> <!-- 导航按钮 -->
<div <div v-if="showPagination && totalPages > 1" class="carousel-navigation flex j-s">
v-if="showPagination && totalPages > 1" <button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">&lt;</button>
class="carousel-navigation flex j-s" <button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">&gt;</button>
>
<button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">
&lt;
</button>
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">
&gt;
</button>
</div> </div>
<!-- 轮播内容区域 --> <!-- 轮播内容区域 -->
@ -224,11 +210,7 @@ onUnmounted(stopAutoPlay)
@mouseenter="handleItemHover(item, index)" @mouseenter="handleItemHover(item, index)"
@mouseleave="handleItemHoverLeave(item, index)" @mouseleave="handleItemHoverLeave(item, index)"
> >
<slot <slot :item="item" :index="index" :isActive="currentPage === Math.ceil((index + 1) / pageSize)" />
:item="item"
:index="index"
:isActive="currentPage === Math.ceil((index + 1) / pageSize)"
/>
</div> </div>
</div> </div>
</div> </div>
@ -247,6 +229,10 @@ onUnmounted(stopAutoPlay)
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: 24px;
color: #333333; color: #333333;
&:hover {
cursor: pointer;
color: #0389ff;
}
} }
.carousel-pagination { .carousel-pagination {
@ -336,5 +322,9 @@ onUnmounted(stopAutoPlay)
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} }
} }
.item-title {
margin-bottom: 5px;
}
} }
</style> </style>

64
src/home.vue
View File

@ -1,14 +1,68 @@
<script setup> <script setup>
import Header from './views/layout/pc/header/index.vue' import Header from './views/layout/pc/header/index.vue'
import Footer from './views/layout/pc/footer/index.vue' import Footer from './views/layout/pc/footer/index.vue'
import MobileLayout from './views/layout/mobile/index.vue'
import {onMounted, ref, watch, computed} from 'vue'
import {visit} from '@/api/index'
import axios from 'axios'
import {useResponsive} from '@/utils/responsive'
const {isMobile, windowWidth} = useResponsive()
console.log('isMobile===>', isMobile.value)
const referrer = ref(document.referrer || '')
const ipUrl = ref('')
const CACHE_KEY = 'ip'
const TIME_KEY = 'ipFetchTime'
const CACHE_MIN = 60 * 60 * 1000 // 1h
async function getUrl() {
const now = Date.now()
const cachedIp = sessionStorage.getItem(CACHE_KEY)
const cachedTime = sessionStorage.getItem(TIME_KEY)
if (cachedIp && cachedTime && now - Number(cachedTime) < CACHE_MIN) {
ipUrl.value = cachedIp
return cachedIp
}
try {
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(),
url: window.location.href,
referrer: referrer.value,
real_ip: ipUrl.value,
}
visit(params).then((res) => {})
}
onMounted(async () => {
await getUrl()
})
</script> </script>
<template> <template>
<div id="app"> <!-- APP端布局 -->
<Header id="header" /> <MobileLayout v-if="isMobile" />
<!-- include 对应组件的 name --> <!-- PC端布局（保持不变） -->
<router-view id="main" v-slot="{Component}"> <div v-else id="app">
<Header id="header" />
<router-view id="main" v-slot="{Component, title}">
<keep-alive include="New"> <keep-alive include="New">
<component :is="Component" /> <component :is="Component" />
</keep-alive> </keep-alive>
@ -37,7 +91,7 @@ import Footer from './views/layout/pc/footer/index.vue'
} }
#footer { #footer {
width: 100%; width: 100%;
height: 500px; height: 380px;
} }
} }
</style> </style>

2
src/main.js
View File

@ -16,7 +16,7 @@ import '@/assets/styles/index.scss'
// ====================== 工具和组件 ====================== // ====================== 工具和组件 ======================
import {initRem, fontSize} from '@/utils/rem' import {initRem, fontSize} from '@/utils/rem'
import IconSvg from '_c/icon/svgIcon.vue' import IconSvg from '@/components/Icon/svgIcon.vue'
// SVG图标注册 // SVG图标注册
import 'virtual:svg-icons-register' import 'virtual:svg-icons-register'

144
src/router/index.js
View File

@ -1,77 +1,140 @@
import {createWebHashHistory, createRouter} from 'vue-router' import {createWebHashHistory, createRouter} from 'vue-router'
import {isMobile} from '@/utils/responsive'
import HomeView from '@/views/homepage/index.vue' // 动态加载首页组件
const HomeView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/homepage/mobile.vue').then(resolve)
} else {
import('@/views/homepage/index.vue').then(resolve)
}
})
}
// 动态加载新闻中心组件
const NewsView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/news/mobile.vue').then(resolve)
} else {
import('@/views/news/index.vue').then(resolve)
}
})
}
// 动态加载联系我们组件
const LinkView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/link/mobile.vue').then(resolve)
} else {
import('@/views/link/index.vue').then(resolve)
}
})
}
// 动态加载关于我们组件
const AboutView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/about/mobile.vue').then(resolve)
} else {
import('@/views/about/index.vue').then(resolve)
}
})
}
// 动态加载硬件系统组件
const HardwareSystemView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/product/hardwareSystem/mobile.vue').then(resolve)
} else {
import('@/views/product/hardwareSystem.vue').then(resolve)
}
})
}
// 动态加载软件系统组件
const SoftwareSystemView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/product/softwareSystem/mobile.vue').then(resolve)
} else {
import('@/views/product/softwareSystem.vue').then(resolve)
}
})
}
// 动态加载产品详情组件
const ProductDetailView = () => {
return new Promise((resolve) => {
if (isMobile.value) {
import('@/views/product/detail/mobile.vue').then(resolve)
} else {
import('@/views/product/detail.vue').then(resolve)
}
})
}
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: HardwareSystemView,
meta: { meta: {
title: '低空监管体系', title: '低空监管体系',
}, },
}, },
{ {
path: '/product/remoteDevice', path: '/product/softwareSystem',
name: 'remoteDevice', name: 'SoftwareSystem',
component: () => import('@/views/product/remoteDevice.vue'), component: SoftwareSystemView,
meta: { meta: {
title: '低空远程识别设备', title: '低空远程识别设备',
}, },
}, },
// ============================================ 服务与支撑 ============================================
{ {
path: '/services', path: '/product/detail',
name: 'Services', name: 'ProductDetail',
component: () => import('@/views/services/index.vue'), component: ProductDetailView,
meta: { meta: {
title: '服务与支撑', title: '产品详情',
}, },
}, },
// ============================================ 新闻中心 ============================================ // ============================================ 新闻中心 ============================================
{ {
path: '/news', path: '/news',
name: 'News', name: 'News',
component: () => import('@/views/news/index.vue'), component: NewsView,
meta: { meta: {
title: '新闻中心', title: '新闻中心',
}, },
}, },
{
path: '/news/detail',
name: 'Detail',
component: () => import('@/views/news/detail.vue'),
meta: {
title: '新闻详情',
},
},
// ============================================ 关于我们 ============================================
{
path: '/about',
name: 'About',
component: () => import('@/views/about/index.vue'),
meta: {
title: '关于我们',
},
},
// ============================================ 联系我们 ============================================ // ============================================ 联系我们 ============================================
{ {
path: '/link', path: '/link',
name: 'Link', name: 'Link',
component: () => import('@/views/link/index.vue'), component: LinkView,
meta: { meta: {
title: '联系我们', title: '联系我们',
}, },
}, },
// ============================================ 下载中心 ============================================
// ============================================ 关于我们 ============================================
{ {
path: '/download', path: '/about',
name: 'Download', name: 'About',
component: () => import('@/views/download/index.vue'), component: AboutView,
meta: { meta: {
title: '下载中心', title: '关于我们',
}, },
}, },
] ]
@ -81,13 +144,4 @@ const router = createRouter({
routes, routes,
}) })
router.afterEach((to, from) => {
// 只有路径变化时才滚动到顶部
if (to.path !== from.path) {
requestAnimationFrame(() => {
window.scrollTo({top: 0, behavior: 'instant'})
})
}
})
export default router export default router

8
src/store/nav.js
View File

@ -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
View 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()
}

47
src/utils/index.js
View File

@ -4,10 +4,7 @@
* @returns {number} 自适应后的尺寸 * @returns {number} 自适应后的尺寸
*/ */
export function fontSize(res) { export function fontSize(res) {
let clientWidth = let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
if (!clientWidth) return if (!clientWidth) return
let fontSize = clientWidth / 1920 let fontSize = clientWidth / 1920
return res * fontSize return res * fontSize
@ -34,3 +31,45 @@ export function randomBgColor(type = 'hex') {
.padStart(6, '0') .padStart(6, '0')
) )
} }
/**
* 根据 url 递归查找对应的 label
* @param {Array} tree - header 数组
* @param {String} path - 要匹配的 url
* @returns {String|undefined} 找到返回 label，否则 undefined
*/
export function findLabelByUrl(tree, path) {
for (const node of tree) {
if (node.url === path) return node.label
if (node.hasChildren && node.children) {
const child = findLabelByUrl(node.children, path)
if (child) return child
}
}
}
/**
* get参数处理
* @param {*} params 参数
*/
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName]
const part = `${encodeURIComponent(propName)}=`
if (value !== null && typeof value !== 'undefined') {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && typeof value[key] !== 'undefined') {
const params = `${propName}[${key}]`
const subPart = `${encodeURIComponent(params)}=`
result += `${subPart + encodeURIComponent(value[key])}&`
}
}
} else {
result += `${part + encodeURIComponent(value)}&`
}
}
}
return result
}

128
src/utils/rem.js
View File

@ -1,42 +1,136 @@
// rem等比适配配置 // rem等比适配配置
// 基准大小 // 基准大小
const baseSize = 16 const baseSize = 16
// 设计稿宽度 // PC端设计稿宽度
const designWidth = 1920 const pcDesignWidth = 1920
// 移动端设计稿宽度
const mobileDesignWidth = 375
// 最大缩放比例 // 最大缩放比例
const maxScale = 2 const maxScale = 2
// 移动端断点（与 responsive.js 保持一致）
const MOBILE_BREAKPOINT = 1000
// 判断是否为移动端
function isMobile() {
const result = window.innerWidth < MOBILE_BREAKPOINT
console.log('📱 [rem.js] isMobile() 检测:', {
windowWidth: window.innerWidth,
breakpoint: MOBILE_BREAKPOINT,
isMobile: result,
timestamp: new Date().toLocaleTimeString()
})
return result
}
// 设置 rem 函数 // 设置 rem 函数
function setRem() { function setRem() {
// 当前页面宽度相对于设计稿宽度的缩放比例 const clientWidth = document.documentElement.clientWidth
const scale = document.documentElement.clientWidth / designWidth const mobile = isMobile()
// 设置页面根节点字体大小（最高放大比例为maxScale）
document.documentElement.style.fontSize = let designWidth, scale, minScale, finalFontSize
baseSize * Math.min(scale, maxScale) + 'px'
if (mobile) {
// 移动端：基于 375px 设计稿
designWidth = mobileDesignWidth
// 为了避免字体过小，限制最小缩放比例
minScale = 0.85
scale = Math.max(clientWidth / designWidth, minScale)
console.log('📱 [rem.js] 移动端模式 setRem():', {
clientWidth: `${clientWidth}px`,
designWidth: `${designWidth}px (移动端)`,
rawScale: (clientWidth / designWidth).toFixed(4),
minScale: minScale,
finalScale: scale.toFixed(4),
baseSize: `${baseSize}px`,
calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
timestamp: new Date().toLocaleTimeString()
})
} else {
// PC端：基于 1920px 设计稿
designWidth = pcDesignWidth
scale = Math.min(clientWidth / designWidth, maxScale)
console.log('💻 [rem.js] PC端模式 setRem():', {
clientWidth: `${clientWidth}px`,
designWidth: `${designWidth}px (PC端)`,
rawScale: (clientWidth / designWidth).toFixed(4),
maxScale: maxScale,
finalScale: scale.toFixed(4),
baseSize: `${baseSize}px`,
calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
timestamp: new Date().toLocaleTimeString()
})
}
// 设置页面根节点字体大小
finalFontSize = baseSize * scale
document.documentElement.style.fontSize = finalFontSize + 'px'
console.log('✅ [rem.js] 最终设置:', {
'document.documentElement.style.fontSize': `${finalFontSize.toFixed(2)}px`,
'实际计算值': `1rem = ${finalFontSize.toFixed(2)}px`,
'示例换算': `10rem = ${(10 * finalFontSize).toFixed(2)}px, 20rem = ${(20 * finalFontSize).toFixed(2)}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
return res * Math.min(scale, maxScale) let designWidth
const mobile = isMobile()
if (mobile) {
designWidth = mobileDesignWidth
} else {
designWidth = pcDesignWidth
}
const rawScale = clientWidth / designWidth
const finalScale = mobile ? Math.max(rawScale, 0.85) : Math.min(rawScale, maxScale)
const result = res * finalScale
console.log('📐 [rem.js] fontSize() 计算:', {
input: `${res}px`,
clientWidth: `${clientWidth}px`,
mode: mobile ? '移动端' : 'PC端',
designWidth: `${designWidth}px`,
rawScale: rawScale.toFixed(4),
finalScale: finalScale.toFixed(4),
output: `${result.toFixed(2)}px`
})
return result
} }
// 初始化rem配置 // 初始化rem配置
export function initRem() { export function initRem() {
console.log('🚀 [rem.js] initRem() 初始化:', {
baseSize: `${baseSize}px`,
pcDesignWidth: `${pcDesignWidth}px`,
mobileDesignWidth: `${mobileDesignWidth}px`,
MOBILE_BREAKPOINT: `${MOBILE_BREAKPOINT}px`,
maxScale: maxScale,
currentWindowWidth: `${window.innerWidth}px`,
currentMode: window.innerWidth < MOBILE_BREAKPOINT ? '📱 移动端' : '💻 PC端'
})
setRem() setRem()
// 改变窗口大小时重新设置 rem // 改变窗口大小时重新设置 rem
window.addEventListener('resize', setRem) window.addEventListener('resize', () => {
console.log('🔄 [rem.js] 窗口resize事件触发:', {
newWidth: `${window.innerWidth}px`,
timestamp: new Date().toLocaleTimeString()
})
setRem()
})
} }
// 移除rem监听（可选，用于清理） // 移除rem监听（可选，用于清理）
export function removeRemListener() { export function removeRemListener() {
console.log('❌ [rem.js] removeRemListener() 移除监听')
window.removeEventListener('resize', setRem) window.removeEventListener('resize', setRem)
} }
// 自动初始化（如果需要在导入时自动初始化）
// initRem()

77
src/utils/request.js
View File

@ -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,87 +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 ( if (config.responseType === 'blob' || config.responseType === 'arraybuffer') {
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: 5 * 1000,
})
}
export default service export default service

43
src/utils/responsive.js Normal file
View File

@ -0,0 +1,43 @@
import {ref, onMounted, onUnmounted, computed} from 'vue'
const MOBILE_BREAKPOINT = 1000
const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
console.log('windowWidth===>', windowWidth.value)
const isMobile = computed(() => windowWidth.value < MOBILE_BREAKPOINT)
function updateWindowSize() {
if (typeof window !== 'undefined') {
windowWidth.value = window.innerWidth
}
}
let listenersCount = 0
export function useResponsive() {
onMounted(() => {
if (listenersCount === 0) {
updateWindowSize()
window.addEventListener('resize', updateWindowSize)
}
listenersCount++
})
onUnmounted(() => {
listenersCount--
if (listenersCount <= 0) {
listenersCount = 0
window.removeEventListener('resize', updateWindowSize)
}
})
return {
isMobile,
windowWidth,
MOBILE_BREAKPOINT,
}
}
export {isMobile, windowWidth, MOBILE_BREAKPOINT}

30
src/views/about/index.vue
View File

@ -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;

522
src/views/about/mobile.vue Normal file
View File

@ -0,0 +1,522 @@
<script setup>
import {ref, onMounted} from 'vue'
const loading = ref(true)
// 公司介绍
const companyInfo = {
name: '燃谷科技',
fullName: '燃谷科技（南京）有限公司',
founded: '2023年',
location: '南京鼓楼万谷硅巷',
introduction:
'燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。',
}
// 核心优势
const advantages = [
{
icon: 'DataAnalysis',
title: '低空大数据',
desc: '海量数据采集与分析能力',
color: '#1890ff',
},
{
icon: 'Connection',
title: '低空物联网',
desc: '全方位设备连接与管理',
color: '#52c41a',
},
{
icon: 'Cpu',
title: '智能算法引擎',
desc: 'AI驱动的智能决策系统',
color: '#fa8c16',
},
{
icon: 'Monitor',
title: '空间计算模型',
desc: '高精度空间数据处理',
color: '#722ed1',
},
]
// 资质证书
const certificates = [
{id: 1, name: '营业执照', image: '/static/images/main/1.png'},
{id: 2, name: 'ISO9001认证', image: '/static/images/main/2.png'},
{id: 3, name: '高新技术企业', image: '/static/images/main/3.png'},
{id: 4, name: '软件著作权', image: '/static/images/main/4.png'},
{id: 5, name: '专利证书1', image: '/static/images/main/5.png'},
{id: 6, name: '专利证书2', image: '/static/images/main/6.png'},
{id: 7, name: '专利证书3', image: '/static/images/main/7.png'},
{id: 8, name: '专利证书4', image: '/static/images/main/8.png'},
{id: 9, name: '专利证书5', image: '/static/images/main/9.png'},
{id: 10, name: '荣誉证书1', image: '/static/images/main/10.png'},
{id: 11, name: '荣誉证书2', image: '/static/images/main/11.png'},
{id: 12, name: '荣誉证书3', image: '/static/images/main/12.png'},
]
onMounted(() => {
setTimeout(() => {
loading.value = false
}, 500)
})
</script>
<template>
<div class="mobile-about" v-loading="loading">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">关于我们</h1>
<p class="page-subtitle">了解燃谷科技</p>
</div>
<!-- 公司简介 -->
<div class="intro-section">
<div class="company-card">
<!-- Logo区域 -->
<div class="logo-area">
<img src="/static/images/main/rangu.png" alt="燃谷科技" class="company-logo" />
</div>
<!-- 公司信息 -->
<div class="info-area">
<h2 class="company-name">{{ companyInfo.fullName }}</h2>
<div class="info-tags">
<span class="tag">📅 {{ companyInfo.founded }}成立</span>
<span class="tag">📍 {{ companyInfo.location }}</span>
</div>
<div class="company-intro">
<p>{{ companyInfo.introduction }}</p>
</div>
</div>
</div>
</div>
<!-- 核心优势 -->
<div class="advantages-section">
<div class="section-header">
<h3 class="section-title">核心优势</h3>
<p class="section-desc">四大核心技术组件</p>
</div>
<div class="advantages-grid">
<div
v-for="(item, index) in advantages"
:key="index"
class="advantage-card"
:style="{borderLeftColor: item.color}"
>
<div class="advantage-icon" :style="{backgroundColor: item.color + '15'}">
<el-icon :size="24" :style="{color: item.color}">
<component :is="item.icon" />
</el-icon>
</div>
<div class="advantage-content">
<h4 class="advantage-title">{{ item.title }}</h4>
<p class="advantage-desc">{{ item.desc }}</p>
</div>
</div>
</div>
</div>
<!-- 资质证书 -->
<div class="certificate-section">
<div class="section-header">
<h3 class="section-title">资质证书</h3>
<p class="section-desc">权威认证 · 实力见证</p>
</div>
<div class="certificate-grid">
<div
v-for="cert in certificates"
:key="cert.id"
class="certificate-item"
@click="$viewer.api({images: [cert.image]})"
>
<img :src="cert.image" :alt="cert.name" class="certificate-img" />
<div class="certificate-name">{{ cert.name }}</div>
</div>
</div>
</div>
<!-- 企业文化 -->
<div class="culture-section">
<div class="section-header">
<h3 class="section-title">企业文化</h3>
<p class="section-desc">创新 · 质量 · 合作</p>
</div>
<div class="culture-cards">
<div class="culture-card innovation">
<div class="culture-icon">💡</div>
<h4>创新</h4>
<p>持续技术创新<br />引领行业发展</p>
</div>
<div class="culture-card quality">
<div class="culture-icon">⭐</div>
<h4>质量</h4>
<p>精益求精<br />追求卓越品质</p>
</div>
<div class="culture-card cooperation">
<div class="culture-icon">🤝</div>
<h4>合作</h4>
<p>开放共赢<br />携手共创未来</p>
</div>
</div>
</div>
<!-- 底部CTA -->
<div class="cta-section">
<div class="cta-content">
<h3>携手共进，共创低空经济新未来</h3>
<p>期待与您的合作交流</p>
<el-button type="primary" round size="large" @click="$router.push('/link')">
联系我们
</el-button>
</div>
</div>
</div>
</template>
<script>
import {DataAnalysis, Connection, Cpu, Monitor} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.mobile-about {
min-height: 100%;
background-color: #f5f7fa;
padding-bottom: 20px;
.page-header {
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
padding: 24px 16px;
color: #ffffff;
.page-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: 1px;
}
.page-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
}
// 公司简介
.intro-section {
padding: 16px;
.company-card {
background-color: #ffffff;
border-radius: 12px; /* no */
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
.logo-area {
width: 100%;
height: 200px; /* no */
background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px; /* no */
.company-logo {
max-width: 80%;
max-height: 160px; /* no */
object-fit: contain;
}
}
.info-area {
padding: 20px; /* no */
.company-name {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 12px 0;
text-align: center;
}
.info-tags {
display: flex;
justify-content: center;
gap: 10px; /* no */
margin-bottom: 16px; /* no */
flex-wrap: wrap;
.tag {
display: inline-block;
padding: 4px 12px; /* no */
background-color: #f5f7fa;
color: #666666;
font-size: 12px;
border-radius: 14px; /* no */
}
}
.company-intro {
p {
font-size: 14px;
line-height: 1.8;
color: #555555;
text-indent: 2em;
margin: 0;
text-align: justify;
}
}
}
}
}
// 核心优势
.advantages-section {
padding: 0 16px 16px;
.section-header {
margin-bottom: 16px; /* no */
.section-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.section-desc {
font-size: 13px;
color: #999999;
margin: 0;
}
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px; /* no */
.advantage-card {
background-color: #ffffff;
border-radius: 10px; /* no */
padding: 16px; /* no */
border-left: 3px solid;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
transition: all 0.3s ease;
&:active {
transform: scale(0.97);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
}
.advantage-icon {
width: 48px; /* no */
height: 48px; /* no */
border-radius: 10px; /* no */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px; /* no */
}
.advantage-content {
.advantage-title {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.advantage-desc {
font-size: 12px;
color: #666666;
margin: 0;
line-height: 1.5;
}
}
}
}
}
// 资质证书
.certificate-section {
padding: 0 16px 16px;
.section-header {
margin-bottom: 16px; /* no */
.section-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.section-desc {
font-size: 13px;
color: #999999;
margin: 0;
}
}
.certificate-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px; /* no */
.certificate-item {
background-color: #ffffff;
border-radius: 8px; /* no */
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* no */
cursor: pointer;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* no */
}
.certificate-img {
width: 100%;
height: 200px; /* no */
object-fit: contain;
background-color: #fafafa;
padding: 8px; /* no */
box-sizing: border-box;
}
.certificate-name {
padding: 8px; /* no */
font-size: 11px;
color: #666666;
text-align: center;
background-color: #fafafa;
}
}
}
}
// 企业文化
.culture-section {
padding: 0 16px 16px;
.section-header {
margin-bottom: 16px; /* no */
.section-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.section-desc {
font-size: 13px;
color: #999999;
margin: 0;
}
}
.culture-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* no */
.culture-card {
background-color: #ffffff;
border-radius: 10px; /* no */
padding: 16px 12px; /* no */
text-align: center;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
transition: all 0.3s ease;
&:active {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
}
.culture-icon {
font-size: 32px;
margin-bottom: 8px; /* no */
}
h4 {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
}
p {
font-size: 11px;
color: #666666;
line-height: 1.6;
margin: 0;
}
&.innovation {
border-top: 3px solid #1890ff;
}
&.quality {
border-top: 3px solid #faad14;
}
&.cooperation {
border-top: 3px solid #52c41a;
}
}
}
}
// 底部CTA
.cta-section {
margin: 16px; /* no */
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
border-radius: 12px; /* no */
padding: 32px 20px; /* no */
text-align: center;
.cta-content {
h3 {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin: 0 0 10px 0;
line-height: 1.4;
}
p {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 20px 0;
}
.el-button {
width: 180px; /* no */
height: 44px; /* no */
font-size: 15px;
background-color: #ffffff !important;
color: #081314 !important;
border: none !important;
&:active {
opacity: 0.9;
}
}
}
}
}
</style>

81
src/views/homepage/index.vue
View File

@ -1,45 +1,74 @@
<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 @loadeddata="onVideoLoaded">
<source src="/static/video/display.mp4" type="video/mp4" />
</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 {
.placeholder {
width: 100%;
height: 100%;
}
.banner { .banner {
width: 100%; width: 100%;
height: 800px; height: 800px;
position: relative; position: relative;
background-image: url('/static/images/main/banner.png'); background-color: #333333;
background-size: 100% 100%;
background-repeat: no-repeat;
&-link { &-link {
width: 174px; width: 174px;
height: 48px; height: 48px;
@ -64,14 +93,34 @@ onMounted(() => {})
color: $white; color: $white;
} }
} }
video {
padding: 3px;
width: 100%;
height: auto;
border-radius: 8px;
}
} }
.swiper { .list {
width: 100%;
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;
} }
} }
} }

341
src/views/homepage/mobile.vue Normal file
View File

@ -0,0 +1,341 @@
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {cryptoEncrypt} from '@/utils/cryptojs'
const router = useRouter()
const videoLoaded = ref(true)
const list = [...window.softwareSystemList, ...window.hardwareSystemList]
onMounted(() => {
console.log('当前是手机端===>',)
})
function onVideoLoaded() {
videoLoaded.value = false
}
function toUrl(item) {
router.push({
path: '/product/detail',
query: {type: cryptoEncrypt(JSON.stringify(item))},
})
}
</script>
<template>
<div class="mobile-homepage" v-loading="videoLoaded">
<!-- Banner区域 -->
<div class="banner-section">
<video autoplay muted loop @loadeddata="onVideoLoaded" class="banner-video">
<source src="/static/video/display.mp4" type="video/mp4" />
</video>
<div class="banner-overlay">
<h1 class="banner-title">低空智能监管解决方案</h1>
<p class="banner-subtitle">专业 · 创新 · 可靠</p>
</div>
</div>
<!-- 产品体系 -->
<div class="product-section">
<div class="section-header">
<h2 class="section-title">产品体系</h2>
<p class="section-desc">全方位低空监管产品矩阵</p>
</div>
<div class="product-grid">
<div
v-for="(item, index) in list"
:key="index"
class="product-card"
@click="toUrl(item)"
>
<div class="card-image">
<img
:src="`./static/images/${item.imgUrl}`"
:alt="item.title"
:class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'"
/>
</div>
<div class="card-info">
<h3 class="card-title">{{ item.title }}</h3>
<p class="card-desc">{{ item.desc || '点击查看详情' }}</p>
</div>
</div>
</div>
</div>
<!-- 特色优势 -->
<div class="feature-section">
<div class="section-header">
<h2 class="section-title">核心优势</h2>
<p class="section-desc">技术领先，服务至上</p>
</div>
<div class="feature-grid">
<div class="feature-card" v-for="i in 4" :key="i">
<div class="feature-icon">
<el-icon :size="32"><icon-svg :name="'feature' + i" /></el-icon>
</div>
<h3 class="feature-title">优势 {{ i }}</h3>
<p class="feature-desc">专业的技术团队为您提供优质服务</p>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.mobile-homepage {
min-height: 100%;
background-color: #f0f2f5;
// Banner区域
.banner-section {
position: relative;
width: 100%;
height: 50vh;
min-height: 400px;
overflow: hidden;
.banner-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.6)
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
.banner-title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
line-height: 1.3;
}
.banner-subtitle {
font-size: 16px;
color: #ffffffd9;
margin-bottom: 24px;
letter-spacing: 2px;
}
}
}
// 通用区块标题
.section-header {
text-align: center;
padding: 40px 20px 30px;
.section-title {
font-size: 24px;
font-weight: 700;
color: #262626;
margin-bottom: 8px;
position: relative;
display: inline-block;
&::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(to right, #1890ff, #096dd9);
border-radius: 2px;
}
}
.section-desc {
font-size: 14px;
color: #8c8c8c;
margin-top: 16px;
}
}
// 产品体系
.product-section {
background-color: #ffffff;
margin: 16px;
border-radius: 12px;
padding-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
padding: 0 20px;
.product-card {
background: #fafafa;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
&:active {
transform: scale(0.98);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.card-image {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e6f7ff, #bae7ff);
padding: 20px;
img {
max-width: 90%;
max-height: 100%;
object-fit: contain;
}
.m-img {
width: 70%;
}
.r-img {
width: 85%;
}
}
.card-info {
padding: 16px;
.card-title {
font-size: 16px;
font-weight: 600;
color: #262626;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-desc {
font-size: 13px;
color: #8c8c8c;
line-height: 1.5;
}
}
}
}
}
// 特色优势
.feature-section {
background-color: #ffffff;
margin: 16px;
border-radius: 12px;
padding-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 0 20px;
.feature-card {
padding: 20px 16px;
background: linear-gradient(135deg, #f0f5ff, #e6f7ff);
border-radius: 8px;
text-align: center;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
}
.feature-icon {
width: 56px;
height: 56px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #1890ff, #096dd9);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
.feature-title {
font-size: 15px;
font-weight: 600;
color: #262626;
margin-bottom: 6px;
}
.feature-desc {
font-size: 12px;
color: #8c8c8c;
line-height: 1.5;
}
}
}
}
}
// 响应式优化
@media (max-width: 480px) {
.mobile-homepage {
.banner-section {
height: 45vh;
min-height: 350px;
.banner-overlay {
.banner-title {
font-size: 22px;
}
.banner-subtitle {
font-size: 14px;
}
}
}
.section-header {
.section-title {
font-size: 20px;
}
}
.product-section {
.product-grid {
grid-template-columns: 1fr;
}
}
.feature-section {
.feature-grid {
grid-template-columns: 1fr;
}
}
}
}
</style>

367
src/views/layout/mobile/index.vue Normal file
View File

@ -0,0 +1,367 @@
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useNavStore} from '@/store/nav'
import {storeToRefs} from 'pinia'
import {
HomeFilled,
Grid,
Monitor,
Cpu,
Document,
InfoFilled,
Phone,
Service,
Download,
Expand,
Fold
} from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const navStore = useNavStore()
const {navIndex} = storeToRefs(navStore)
const isCollapse = ref(true)
const navList = ref([])
const activeIndex = ref('/')
// 图标映射表 - 使用Element Plus内置图标
const iconMap = {
'首页': 'HomeFilled',
'解决方案': 'Grid',
'空域感知矩阵': 'Monitor',
'低空智控中枢': 'Cpu',
'新闻中心': 'Document',
'关于我们': 'InfoFilled',
'联系我们': 'Phone',
'服务与支撑': 'Service',
'下载中心': 'Download',
}
// 获取菜单项对应的图标组件
const getIconComponent = (label) => {
const iconName = iconMap[label] || 'Grid'
const iconComponents = {
HomeFilled,
Grid,
Monitor,
Cpu,
Document,
InfoFilled,
Phone,
Service,
Download,
}
return iconComponents[iconName] || Grid
}
const handleSelect = (key) => {
navStore.changeNavIndex(key)
router.push(key)
}
const toggleMenu = () => {
isCollapse.value = !isCollapse.value
// 派发侧边栏状态变化事件，让其他组件（如详情页底部栏）能够响应
window.dispatchEvent(new CustomEvent('sidebar-toggle', {
detail: {
collapsed: isCollapse.value
}
}))
}
onMounted(() => {
navList.value = window.nav?.header || []
activeIndex.value = route.path
})
</script>
<template>
<div class="app-layout">
<div class="sidebar" :class="{collapse: isCollapse}">
<div class="logo" :class="{collapse: isCollapse}">
<img src="/static/images/header/logo.png" alt="logo" />
<span v-show="!isCollapse" class="logo-text">燃谷科技</span>
</div>
<el-menu
:default-active="activeIndex"
:collapse="isCollapse"
class="sidebar-menu"
@select="handleSelect"
background-color="#081314"
text-color="#999999"
active-text-color="#FFFFFF"
:collapse-transition="true"
>
<template v-for="nav in navList" :key="nav.id">
<el-sub-menu
v-if="nav.hasChildren || nav?.children?.length > 0"
:index="nav.url"
>
<template #title>
<el-icon :size="18">
<component :is="getIconComponent(nav.label)" />
</el-icon>
<span>{{ nav.label }}</span>
</template>
<el-menu-item
v-for="child in nav.children"
:key="child.id"
:index="child.url"
>
<el-icon :size="18">
<component :is="getIconComponent(child.label)" />
</el-icon>
<span>{{ child.label }}</span>
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="nav.url">
<el-icon :size="18">
<component :is="getIconComponent(nav.label)" />
</el-icon>
<span>{{ nav.label }}</span>
</el-menu-item>
</template>
</el-menu>
<div class="toggle-btn" @click="toggleMenu">
<el-icon :size="18">
<Expand v-if="isCollapse" />
<Fold v-else />
</el-icon>
</div>
</div>
<div class="main-content" :data-collapsed="isCollapse">
<router-view v-slot="{Component}">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</template>
<style lang="scss" scoped>
.app-layout {
display: flex;
height: 100vh;
width: 100%;
overflow: hidden;
background-color: #f0f2f5;
.sidebar {
width: 160px;
height: 100vh;
height: 100%; /* no */
min-height: 100vh; /* no */
background-color: #081314;
display: flex;
flex-direction: column;
transition: width 0.3s ease;
overflow: hidden;
position: fixed; /* no */
left: 0; /* no */
top: 0; /* no */
bottom: 0; /* no */
z-index: 1000;
&.collapse {
width: 54px;
}
.logo {
height: 54px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
overflow: hidden;
flex-shrink: 0;
img {
width: 30px;
height: 30px;
object-fit: contain;
flex-shrink: 0;
}
.logo-text {
margin-left: 8px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
}
&.collapse {
justify-content: center;
padding: 10px;
}
}
.sidebar-menu {
flex: 1;
border-right: none;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
// 覆盖 Element Plus 默认样式
:deep(.el-menu) {
border-right: none;
background-color: transparent;
}
:deep(.el-menu--collapse) {
width: 54px;
}
:deep(.el-sub-menu__title),
:deep(.el-menu-item) {
height: 42px;
line-height: 42px;
padding: 0 12px !important;
color: #999999 !important;
font-size: 13px !important;
&:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
}
&.is-active {
background-color: rgba(255, 255, 255, 0.15) !important;
color: #FFFFFF !important;
border-right: 3px solid #FFFFFF;
}
.el-icon {
font-size: 18px;
width: 24px;
height: 24px;
margin-right: 8px;
color: inherit;
}
}
:deep(.el-menu--collapse) {
.el-sub-menu__title,
.el-menu-item {
padding: 0 !important;
text-align: center;
.el-icon {
margin-right: 0;
}
span {
display: none;
}
}
}
&:not(.el-menu--collapse) {
width: 160px;
}
// 子菜单展开样式优化
:deep(.el-sub-menu) {
.el-sub-menu__icon {
color: rgba(255, 255, 255, 0.45);
font-size: 12px;
transition: transform 0.3s ease;
}
&.is-opened > .el-sub-menu__title .el-sub-menu__icon {
transform: rotate(180deg);
}
// 子菜单列表
.el-menu {
background-color: rgba(0, 0, 0, 0.2);
.el-menu-item {
padding-left: 36px !important;
position: relative;
&::before {
content: '';
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #666;
transition: all 0.3s ease;
}
&:hover::before,
&.is-active::before {
background-color: #FFFFFF;
width: 6px;
height: 6px;
}
}
}
}
}
.toggle-btn {
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, 0.65);
border-top: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
flex-shrink: 0;
&:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.06);
}
.el-icon {
font-size: 18px;
}
}
}
.main-content {
flex: 1;
margin-left: 160px;
transition: margin-left 0.3s ease;
overflow-y: auto;
overflow-x: hidden;
background-color: #f0f2f5;
min-height: 100vh; /* no */
width: calc(100% - 160px); /* no */
}
}
// 使用 JavaScript 控制主内容区的左边距
.main-content[data-collapsed="true"] {
margin-left: 54px !important;
width: calc(100% - 54px) !important; /* no */
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

19
src/views/layout/pc/footer/components/QRCode.vue
View File

@ -5,10 +5,14 @@ onMounted(() => {})
<template> <template>
<div class="QR-code"> <div class="QR-code">
<div class="QR-dev">
<img class="QR-img" :src="`./static/images/footer/QR_code.png`" /> <img class="QR-img" :src="`./static/images/footer/QR_code.png`" />
<div class="label">企业微信</div> <div class="label">企业微信</div>
<img class="QR-img item" :src="`./static/images/footer/mark.png`" alt="" /> </div>
<div class="label">熊雨翔</div> <div class="QR-dev">
<img class="QR-img" :src="`./static/images/footer/mark.png`" alt="" />
<div class="label">市场联系人</div>
</div>
</div> </div>
</template> </template>
@ -16,7 +20,13 @@ onMounted(() => {})
.QR-code { .QR-code {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $white; display: flex;
justify-content: center;
gap: 20px;
.QR-dev {
width: 150px;
height: 200px;
}
.QR-img { .QR-img {
width: 150px; width: 150px;
height: 150px; height: 150px;
@ -26,8 +36,5 @@ onMounted(() => {})
text-align: center; text-align: center;
color: $white; color: $white;
} }
.item {
margin-top: 20px;
}
} }
</style> </style>

7
src/views/layout/pc/footer/index.vue
View File

@ -26,7 +26,8 @@ const toMIIF = () => {
Copyright © 2023.Rangu Technology Co.,Ltd. All rights reserved. Copyright © 2023.Rangu Technology Co.,Ltd. All rights reserved.
燃谷科技（南京）有限公司 燃谷科技（南京）有限公司
</span> </span>
<span class="url" @click="toMIIF">苏ICP备2023030548号</span> <span class="url" @click="toMIIF">苏ICP备2023030548号-1</span>
<span class="url" @click="toMIIF">苏ICP备2023030548号-5</span>
</div> </div>
</div> </div>
</template> </template>
@ -45,7 +46,7 @@ const toMIIF = () => {
left: 190px; left: 190px;
} }
#nav { #nav {
width: calc(100% - 410px - 380px); width: calc(100% - 410px - 550px);
position: absolute; position: absolute;
left: 410px; left: 410px;
top: $top; top: $top;
@ -53,7 +54,7 @@ const toMIIF = () => {
box-sizing: border-box; box-sizing: border-box;
} }
#QR { #QR {
width: 150px; width: 320px;
height: 150px; height: 150px;
position: absolute; position: absolute;
top: $top; top: $top;

2
src/views/layout/pc/header/nav.vue
View File

@ -9,7 +9,7 @@ const {navIndex} = storeToRefs(navStore)
// 响应式数据 // 响应式数据
const navList = ref([]) const navList = ref([])
const activeIndex = ref(null) const activeIndex = ref('/')
// 处理导航选择 // 处理导航选择
const handleSelect = (key) => { const handleSelect = (key) => {

2
src/views/link/index.vue
View File

@ -34,7 +34,7 @@ onMounted(() => {})
<div class="label">燃谷科技（南京）有限公司</div> <div class="label">燃谷科技（南京）有限公司</div>
<div class="label">电话：13222013393</div> <div class="label">电话：13222013393</div>
<div class="label">邮箱：company@rangutech.com</div> <div class="label">邮箱：company@rangutech.com</div>
<div class="label">地址：江苏省南京市鼓楼区万谷硅巷9F</div> <div class="label">地址：江苏省南京市鼓楼区万谷硅巷5F</div>
</div> </div>
<img class="img" src="/static/images/link/map.png" @click="toCompany"></img> <img class="img" src="/static/images/link/map.png" @click="toCompany"></img>
</div> </div>

6
src/views/link/map.vue
View File

@ -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]

376
src/views/link/mobile.vue Normal file
View File

@ -0,0 +1,376 @@
<script setup>
import {ref} from 'vue'
const loading = ref(false)
// 联系信息
const contactInfo = {
company: '燃谷科技（南京）有限公司',
phone: '13222013393',
email: 'company@rangutech.com',
address: '江苏省南京市鼓楼区万谷硅巷5F',
mapUrl:
'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8',
}
// 快捷操作
const handlePhoneCall = () => {
window.location.href = `tel:${contactInfo.phone}`
}
const handleSendEmail = () => {
window.location.href = `mailto:${contactInfo.email}`
}
const openMap = () => {
window.open(contactInfo.mapUrl)
}
</script>
<template>
<div class="mobile-link">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">联系我们</h1>
<p class="page-subtitle">期待与您的合作交流</p>
</div>
<!-- 公司信息卡片 -->
<div class="info-section">
<div class="company-card">
<div class="company-icon">
<el-icon :size="32" color="#081314"><OfficeBuilding /></el-icon>
</div>
<h2 class="company-name">{{ contactInfo.company }}</h2>
<p class="company-desc">专业低空智能监管解决方案提供商</p>
</div>
<!-- 联系方式列表 -->
<div class="contact-list">
<!-- 电话 -->
<div class="contact-item" @click="handlePhoneCall">
<div class="contact-icon phone">
<el-icon :size="20"><Phone /></el-icon>
</div>
<div class="contact-content">
<div class="contact-label">联系电话</div>
<div class="contact-value">{{ contactInfo.phone }}</div>
</div>
<div class="contact-action">
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<!-- 邮箱 -->
<div class="contact-item" @click="handleSendEmail">
<div class="contact-icon email">
<el-icon :size="20"><Message /></el-icon>
</div>
<div class="contact-content">
<div class="contact-label">电子邮箱</div>
<div class="contact-value">{{ contactInfo.email }}</div>
</div>
<div class="contact-action">
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<!-- 地址 -->
<div class="contact-item" @click="openMap">
<div class="contact-icon location">
<el-icon :size="20"><Location /></el-icon>
</div>
<div class="contact-content">
<div class="contact-label">公司地址</div>
<div class="contact-value">{{ contactInfo.address }}</div>
</div>
<div class="contact-action">
<el-icon><ArrowRight /></el-icon>
</div>
</div>
</div>
</div>
<!-- 地图区域 -->
<div class="map-section">
<div class="section-title">
<el-icon :size="18"><MapLocation /></el-icon>
<span>位置导航</span>
</div>
<div class="map-container" @click="openMap">
<img src="/static/images/link/map.png" alt="地图" class="map-image" />
<div class="map-overlay">
<el-icon :size="24"><Position /></el-icon>
<span>点击查看详细地图</span>
</div>
</div>
</div>
<!-- 快捷操作栏 -->
<div class="action-bar">
<button class="action-btn primary" @click="handlePhoneCall">
<el-icon :size="18"><Phone /></el-icon>
<span>电话咨询</span>
</button>
<button class="action-btn secondary" @click="handleSendEmail">
<el-icon :size="18"><Message /></el-icon>
<span>邮件联系</span>
</button>
</div>
</div>
</template>
<script>
import {
OfficeBuilding,
Phone,
Message,
Location,
ArrowRight,
MapLocation,
Position,
} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.mobile-link {
min-height: 100%;
background-color: #f5f7fa;
padding-bottom: 80px; /* no */
.page-header {
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
padding: 24px 16px;
color: #ffffff;
.page-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: 1px;
}
.page-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
}
.info-section {
padding: 16px;
// 公司信息卡片
.company-card {
background-color: #ffffff;
border-radius: 12px; /* no */
padding: 20px; /* no */
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
margin-bottom: 16px; /* no */
.company-icon {
width: 64px; /* no */
height: 64px; /* no */
border-radius: 50%;
background-color: #f0f5ff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px; /* no */
}
.company-name {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.company-desc {
font-size: 13px;
color: #666666;
margin: 0;
}
}
// 联系方式列表
.contact-list {
display: flex;
flex-direction: column;
gap: 12px; /* no */
.contact-item {
background-color: #ffffff;
border-radius: 10px; /* no */
padding: 16px; /* no */
display: flex;
align-items: center;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
transition: all 0.3s ease;
cursor: pointer;
&:active {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* no */
}
.contact-icon {
width: 44px; /* no */
height: 44px; /* no */
border-radius: 10px; /* no */
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px; /* no */
flex-shrink: 0;
&.phone {
background-color: #e6f7ff;
color: #1890ff;
}
&.email {
background-color: #fff7e6;
color: #fa8c16;
}
&.location {
background-color: #f6ffed;
color: #52c41a;
}
}
.contact-content {
flex: 1;
min-width: 0;
.contact-label {
font-size: 12px;
color: #999999;
margin-bottom: 4px; /* no */
}
.contact-value {
font-size: 14px;
color: #1a1a1a;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.contact-action {
color: #cccccc;
flex-shrink: 0;
margin-left: 8px; /* no */
}
}
}
}
// 地图区域
.map-section {
padding: 0 16px 16px; /* no */
.section-title {
display: flex;
align-items: center;
gap: 6px; /* no */
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px; /* no */
padding-left: 4px; /* no */
}
.map-container {
position: relative;
width: 100%;
height: 220px; /* no */
border-radius: 10px; /* no */
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
cursor: pointer;
.map-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.map-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
padding: 20px 16px 12px; /* no */
display: flex;
align-items: center;
gap: 8px; /* no */
color: #ffffff;
font-size: 13px;
.el-icon {
flex-shrink: 0;
}
}
&:active .map-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
}
}
// 底部快捷操作栏
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
padding: 12px 16px; /* no */
display: flex;
gap: 12px; /* no */
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); /* no */
z-index: 100;
.action-btn {
flex: 1;
height: 48px; /* no */
border: none;
border-radius: 24px; /* no */
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 6px; /* no */
cursor: pointer;
transition: all 0.3s ease;
&:active {
transform: scale(0.96);
}
&.primary {
background: linear-gradient(135deg, #081314, #1a2634);
color: #ffffff;
box-shadow: 0 4px 12px rgba(8, 19, 20, 0.3); /* no */
}
&.secondary {
background-color: #f5f7fa;
color: #081314;
border: 1px solid #e0e0e0;
}
.el-icon {
flex-shrink: 0;
}
}
}
}
</style>

433
src/views/manager/index.vue Normal file
View File

@ -0,0 +1,433 @@
<script setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {getNews,getNewsDetail,updateNews,saveDetail} from '@/api/index'
const baseURL = window.config?.baseUrl
// 新闻列表
const newsList = ref([]);
// 分页与状态过滤
const page = ref(1);
const pageSize = ref(10);
const totalPages = ref(1);
const statusFilter = ref("");
const loading = ref(false);
// 编辑新闻表单
const editingNews = reactive({
title: "",
cover_image: "",
snapshot: "",
content: "",
status: "draft",
slug: "",
datetime: null,
});
const showForm = ref(false);
const isEditing = ref(false);
// 响应式引用 Quill 实例
const quillInstance = ref(null);
// 当编辑器就绪时保存实例
const onEditorReady = (quill) => {
quillInstance.value = quill;
quill.root.addEventListener('paste', handlePaste);
};
// ---------------- Quill 配置 ----------------
const editorOption= {
placeholder: "请在这里输入",
modules:{
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
['blockquote', 'code-block'], //引用，代码块
[{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
[{'script': 'sub'}, {'script': 'super'}], // 上下标
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
[{'direction': 'rtl'}], // 文本方向
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
[{'font': []}], //字体
[{'align': []}], //对齐方式
['clean'], //清除字体样式
['image', 'video'] //上传图片、上传视频
],
handlers: {
image: imageHandler,
}
},
}
};
async function handlePaste(event) {
const clipboardData = event.clipboardData || window.clipboardData;
if (!clipboardData) return;
const items = clipboardData.items;
if (!items) return;
// 检查是否有图片类型
let blob = null;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') === 0) {
blob = items[i].getAsFile();
break;
}
}
if (!blob) return;
// 阻止默认粘贴行为（避免插入 base64）
event.preventDefault();
try {
// 上传图片
const imageUrl = await uploadImage(blob);
// 获取当前光标位置
const quill = quillInstance.value;
const selection = quill.getSelection();
const index = selection ? selection.index : quill.getLength();
// 插入图片 URL
quill.insertEmbed(index, 'image', imageUrl);
// 可选：移动光标到图片后
quill.setSelection(index + 1);
} catch (error) {
console.error('粘贴图片上传失败:', error);
// 可选：提示用户
}
}
function imageHandler() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
// 将图片上传到服务器
uploadImage(file)
.then((imageUrl) => {
// 将图片 URL 插入到编辑器中
const quill = quillInstance.value
const range = quill.getSelection();
quill.insertEmbed(range.index, 'image', imageUrl);
})
.catch((error) => {
console.error('图片上传失败：', error);
});
};
}
// ----------------- 获取新闻 -----------------
const fetchNews = async () => {
try {
let query = {
status: statusFilter.value || undefined,
page: page.value,
page_size: pageSize.value,
}
let {code, data, pagination} = await getNews(query)
if (code === 0) {
newsList.value = data;
totalPages.value = pagination.total_pages;
}
} catch (err) {
console.error("获取新闻失败", err);
}
};
// ----------------- 添加/编辑 -----------------
const saveNews = async () => {
try {
editingNews.content = quillInstance.value.root.innerHTML
if (isEditing.value) {
await updateNews(editingNews);
} else {
await saveDetail(editingNews);
}
showForm.value = false;
fetchNews();
} catch (err) {
console.error("保存新闻失败", err);
}
};
const editNews = async (news) => {
loading.value = true;
try {
let query = {
slug: news.slug,
}
let {code, data} = await getNewsDetail(query)
if (code === 0) {
Object.assign(editingNews, data);
isEditing.value = true;
showForm.value = true;
quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
}
} finally {
loading.value = false;
}
};
const addNews = () => {
Object.assign(editingNews, {
title: "",
cover_image: "",
snapshot: "",
content: "",
status: "draft",
slug: "",
datetime: null,
});
isEditing.value = false;
showForm.value = true;
};
// 分页
const prevPage = () => {
if (page.value > 1) {
page.value--;
fetchNews();
}
};
const nextPage = () => {
if (page.value < totalPages.value) {
page.value++;
fetchNews();
}
};
function handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
uploadImage(file)
.then((imageUrl) => {
editingNews.cover_image = imageUrl;
})
.catch((error) => {
console.error('封面图片上传失败:', error);
});
}
function uploadImage(file) {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', file);
fetch(`${baseURL}update/img`, {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
if (data.code === 0) {
console.log(data)
resolve(`${baseURL}download/img/${data.data}`);
} else {
reject(data.msg);
}
})
.catch((error) => {
reject(error);
});
});
}
onMounted(() => {
fetchNews();
addNews();
});
</script>
<template>
<div class="page">
<!-- 操作栏 -->
<div class="my-card flex j-s a-c toolbar">
<select v-model="statusFilter" @change="fetchNews">
<option value="">全部状态</option>
<option value="draft">草稿</option>
<option value="published">发布</option>
<option value="disable">关闭</option>
</select>
<button @click="addNews">添加新闻</button>
</div>
<!-- 新闻列表 -->
<div class="my-card">
<table>
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="n in newsList" :key="n.slug">
<td>{{ n.id }}</td>
<td>{{ n.title }}</td>
<td>{{ n.status }}</td>
<td>
<button @click="editNews(n)">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="my-card flex j-s a-c pagination">
<button @click="prevPage" :disabled="page === 1">上一页</button>
<span>{{ page }} / {{ totalPages }}</span>
<button @click="nextPage" :disabled="page === totalPages">下一页</button>
</div>
<!-- 添加/编辑表单 -->
<div v-if="showForm" class="my-card news-form">
<h3>{{ isEditing ? "编辑新闻" : "添加新闻" }}</h3>
<label>标题: <input v-model="editingNews.title" /></label><br />
<label>发布时间:<input type="date" v-model="editingNews.datetime" /></label><br />
<label>封面图片:
<input type="file" accept="image/*" @change="handleImageUpload" />
</label>
<div v-if="editingNews.cover_image">
<img :src="editingNews.cover_image" alt="封面预览" style="max-width:200px; margin-top:10px;" />
</div>
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
<label>内容:</label>
<quill-editor content-type="html"
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
<label>状态:
<select v-model="editingNews.status">
<option value="draft">草稿</option>
<option value="published">发布</option>
<option value="disable">关闭</option>
</select>
</label><br />
<button @click="saveNews">{{ isEditing ? "保存修改" : "添加" }}</button>
<button @click="showForm=false">取消</button>
</div>
</div>
</template>
<style lang="scss" scoped>
.my-card {
width: 80%;
padding: 20px;
margin-bottom: 20px;
margin: 20px auto;
border: 1px solid #eee;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.flex {
display: flex;
}
.j-s { justify-content: space-between; }
.a-c { align-items: center; }
.toolbar select,
.toolbar button {
margin-right: 10px;
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #ccc;
background-color: #fafafa;
transition: 0.2s;
}
.toolbar button:hover {
background-color: #007BFF;
color: #fff;
border-color: #007BFF;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
th, td {
padding: 10px 12px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f0f0f0;
font-weight: 600;
}
tbody tr:nth-child(odd) { background-color: #fdfdfd; }
tbody tr:hover { background-color: #f5faff; }
}
button {
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #ccc;
background-color: #fafafa;
transition: 0.2s;
}
button:hover {
background-color: #007BFF;
color: #fff;
border-color: #007BFF;
cursor: pointer;
}
.pagination {
gap: 10px;
button {
min-width: 80px;
text-align: center;
}
}
.snapshot{
height: 100px;
font-size: 14px;
}
.news-form input,
.news-form textarea,
.news-form select {
width: 100%;
margin-bottom: 12px;
padding: 8px 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 14px;
transition: 0.2s;
}
.news-form input:focus,
.news-form textarea:focus,
.news-form select:focus {
border-color: #007BFF;
outline: none;
}
.news-form button {
margin-right: 10px;
min-width: 100px;
}
.news-form h3 {
margin-bottom: 15px;
font-size: 18px;
color: #333;
}
</style>

95
src/views/news/detail.vue
View File

@ -1,17 +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
const showLoad = ref(true)
detail.artical = newsDetail.find((item) => item.id == route.query.id).article 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()
@ -19,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;
@ -45,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);
@ -77,4 +103,5 @@ const toBack = () => {
color: $white; color: $white;
cursor: pointer; cursor: pointer;
} }
}
</style> </style>

93
src/views/news/index.vue
View File

@ -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>

283
src/views/news/mobile.vue Normal file
View File

@ -0,0 +1,283 @@
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const loading = ref(true)
// 假数据 - 新闻列表
const newsList = ref([
{
id: 1,
title: '燃谷科技完成A轮融资，加速低空经济布局',
cover_image: '/static/images/main/1.png',
time: '2025-01-15',
category: '公司动态',
snapshot: '近日，燃谷科技宣布完成数千万元A轮融资，本轮融资将主要用于技术研发和市场拓展...',
},
{
id: 2,
title: '低空智控中枢系统V3.0版本正式发布',
cover_image: '/static/images/main/2.png',
time: '2025-01-10',
category: '产品更新',
snapshot: '燃谷科技正式发布低空智控中枢系统V3.0版本，新增AI智能识别、多源数据融合等核心功能...',
},
{
id: 3,
title: '携手共建智慧城市：燃谷科技与多地政府达成战略合作',
cover_image: '/static/images/main/3.png',
time: '2025-01-05',
category: '行业合作',
snapshot: '燃谷科技先后与深圳、成都、杭州等多地政府签署战略合作协议，共同推进低空经济示范区建设...',
},
{
id: 4,
title: '空域感知矩阵系统荣获技术创新奖',
cover_image: '/static/images/main/4.png',
time: '2024-12-28',
category: '荣誉资质',
snapshot: '在第十届中国航空航天博览会上，燃谷科技的空域感知矩阵系统凭借卓越的技术创新性荣获年度技术创新奖...',
},
{
id: 5,
title: '低空监管解决方案成功应用于多个无人机物流项目',
cover_image: '/static/images/main/5.png',
time: '2024-12-20',
category: '应用案例',
snapshot: '燃谷科技的低空智能监管解决方案已成功应用于京东、顺丰等企业的多个无人机物流配送项目...',
},
{
id: 6,
title: '燃谷科技受邀参加国际低空经济论坛并发表主题演讲',
cover_image: '/static/images/main/6.png',
time: '2024-12-15',
category: '行业活动',
snapshot: '燃谷科技CEO张明受邀参加在新加坡举办的国际低空经济论坛，就"低空安全监管技术趋势"发表主题演讲...',
},
])
onMounted(() => {
setTimeout(() => {
loading.value = false
}, 500)
})
const toDetail = (item) => {
router.push({
path: '/news/detail',
query: {
id: item.id,
},
})
}
</script>
<template>
<div class="mobile-news" v-loading="loading">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">新闻中心</h1>
<p class="page-subtitle">了解燃谷科技最新动态</p>
</div>
<!-- 新闻列表 -->
<div class="news-list">
<div
v-for="item in newsList"
:key="item.id"
class="news-card"
@click="toDetail(item)"
>
<!-- 封面图 -->
<div class="news-image">
<img :src="item.cover_image" :alt="item.title" />
<span class="news-category">{{ item.category }}</span>
</div>
<!-- 内容区 -->
<div class="news-content">
<h3 class="news-title">{{ item.title }}</h3>
<p class="news-desc">{{ item.snapshot }}</p>
<div class="news-meta">
<span class="news-time">
<el-icon><Clock /></el-icon>
{{ item.time }}
</span>
<span class="read-more">
阅读更多
<el-icon><ArrowRight /></el-icon>
</span>
</div>
</div>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && newsList.length === 0" class="empty-state">
<el-icon :size="64" color="#cccccc"><Document /></el-icon>
<p>暂无新闻内容</p>
</div>
</div>
</template>
<script>
import {Clock, ArrowRight, Document} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.mobile-news {
min-height: 100%;
background-color: #f5f7fa;
padding-bottom: 20px;
.page-header {
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
padding: 24px 16px;
color: #ffffff;
.page-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: 1px;
}
.page-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
}
.news-list {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.news-card {
background-color: #ffffff;
border-radius: 8px; /* no */
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* no */
transition: all 0.3s ease;
cursor: pointer;
&:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* no */
}
.news-image {
position: relative;
width: 100%;
height: 180px; /* no */
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
&:active img {
transform: scale(1.05);
}
.news-category {
position: absolute;
top: 12px; /* no */
left: 12px; /* no */
padding: 4px 10px; /* no */
background-color: rgba(8, 19, 20, 0.85);
color: #ffffff;
font-size: 11px;
border-radius: 12px; /* no */
backdrop-filter: blur(4px);
}
}
.news-content {
padding: 14px; /* no */
.news-title {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-desc {
font-size: 13px;
color: #666666;
line-height: 1.6;
margin: 0 0 12px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-meta {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f0f0f0;
padding-top: 10px; /* no */
.news-time {
display: flex;
align-items: center;
gap: 4px; /* no */
font-size: 12px;
color: #999999;
.el-icon {
font-size: 14px;
}
}
.read-more {
display: flex;
align-items: center;
gap: 4px; /* no */
font-size: 12px;
color: #081314;
font-weight: 500;
.el-icon {
font-size: 14px;
transition: transform 0.3s ease;
}
&:active .el-icon {
transform: translateX(3px);
}
}
}
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px; /* no */
color: #999999;
p {
margin-top: 16px; /* no */
font-size: 14px;
}
}
}
</style>

171
src/views/product/detail.vue Normal file
View File

@ -0,0 +1,171 @@
<script setup>
import {ref, onMounted, shallowRef, watchEffect} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {cryptoDecrypt} from '@/utils/cryptojs.js'
const advantages = window.advantages
const route = useRoute()
const router = useRouter()
const query = JSON.parse(cryptoDecrypt(route.query.type))
const videoLoaded = ref(false)
onMounted(() => {
videoLoaded.value = query.type !== 'softwareSystem' ? false : true
})
function onVideoLoaded() {
videoLoaded.value = false
}
const toBack = () => {
router.back()
}
</script>
<template>
<div class="page flex column a-c" v-loading="videoLoaded">
<h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
<!-- 硬件内容 -->
<template v-if="query.type === 'hardwareSystem'">
<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>
</div>
<div class="descripition">
<div v-html="query.description"></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>
</template>
<style lang="scss" scoped>
:deep(.hardware) {
font-size: 20px;
line-height: 1.8;
margin-bottom: 40px;
}
.label {
margin: 40px 0 0 0;
font-family: 'PingFang SC';
font-weight: 500;
font-size: 32px;
font-weight: bold;
color: $black;
}
.time {
margin-bottom: 40px;
}
.content {
margin-top: 40px;
margin-bottom: 40px;
}
.hardware {
width: 1300px;
.img {
width: 550px;
height: 550px;
}
.text {
font-size: 24px;
line-height: 5ex;
.title {
font-size: 32px;
font-weight: bold;
margin-bottom: 10px;
}
}
}
.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 {
width: 1000px;
}
.back {
margin-top: 40px;
padding: 10px 40px;
background: #0389ff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
border-radius: 16px;
margin-bottom: 60px;
font-size: 20px;
color: $white;
cursor: pointer;
}
</style>

774
src/views/product/detail/mobile.vue Normal file
View File

@ -0,0 +1,774 @@
<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {cryptoDecrypt} from '@/utils/cryptojs'
const route = useRoute()
const router = useRouter()
// 解密参数
const query = ref({})
const loading = ref(true)
const isHardware = ref(true) // 是否为硬件类型
const advantages = ref('') // 核心优势内容
const sidebarCollapsed = ref(false) // 侧边栏是否折叠
onMounted(() => {
try {
query.value = JSON.parse(cryptoDecrypt(route.query.type))
isHardware.value = query.value.type === 'hardwareSystem'
// 安全获取核心优势内容（兼容PC端window.advantages）
if (typeof window !== 'undefined' && window.advantages) {
advantages.value = window.advantages
} else if (query.value.advantages) {
advantages.value = query.value.advantages
} else if (query.value.features && query.value.features.length > 0) {
// 如果没有advantages，使用features生成列表
advantages.value = '<ul>' +
query.value.features.map(f => `<li>${f}</li>`).join('') +
'</ul>'
}
} catch (error) {
console.error('参数解析失败:', error)
} finally {
loading.value = false
}
// 监听侧边栏状态变化事件
window.addEventListener('sidebar-toggle', handleSidebarToggle)
// 初始化时检查侧边栏状态
checkSidebarState()
})
onUnmounted(() => {
window.removeEventListener('sidebar-toggle', handleSidebarToggle)
})
// 处理侧边栏折叠/展开事件
const handleSidebarToggle = (event) => {
sidebarCollapsed.value = event.detail?.collapsed || false
updateFooterPosition()
}
// 检查当前侧边栏状态
const checkSidebarState = () => {
const sidebar = document.querySelector('.sidebar')
if (sidebar) {
sidebarCollapsed.value = sidebar.classList.contains('collapse')
}
updateFooterPosition()
}
// 更新底部操作栏位置
const updateFooterPosition = () => {
const footer = document.querySelector('.detail-footer')
if (footer) {
if (sidebarCollapsed.value) {
footer.setAttribute('data-sidebar', 'collapsed')
} else {
footer.removeAttribute('data-sidebar')
}
}
}
// 返回上一页
const goBack = () => {
router.back()
}
</script>
<template>
<div class="mobile-detail" v-loading="loading">
<!-- ==================== 顶部导航栏 ==================== -->
<nav class="detail-nav">
<button class="back-btn" @click="goBack">
<el-icon><ArrowLeft /></el-icon>
<span>返回</span>
</button>
<h1 class="nav-title">{{ query.title }}{{ query.subTitle ? ' - ' + query.subTitle : '' }}</h1>
</nav>
<!-- ==================== 硬件设备详情布局 ==================== -->
<template v-if="isHardware && !loading">
<!-- 产品主图 -->
<section class="product-hero">
<div class="hero-image-wrapper">
<img
:src="`./static/images/${query.imgUrl}`"
:alt="query.title"
class="hero-image"
/>
<span class="image-badge">硬件设备</span>
</div>
</section>
<!-- 核心优势 -->
<section class="advantages-section" v-if="advantages">
<div class="section-header">
<h2 class="section-title">✨ 核心优势</h2>
</div>
<div class="advantages-content" v-html="advantages"></div>
</section>
<!-- 详细描述 -->
<section class="description-section" v-if="query.description">
<div class="section-header">
<h2 class="section-title">📋 产品介绍</h2>
</div>
<div class="description-content" v-html="query.description"></div>
</section>
<!-- 技术规格（如果有） -->
<section class="specs-section" v-if="query.specs || query.features">
<div class="section-header">
<h2 class="section-title">🔧 技术规格</h2>
</div>
<div class="specs-list" v-if="query.features">
<div v-for="(feature, idx) in query.features" :key="idx" class="spec-item">
<el-icon color="#1890ff"><CircleCheck /></el-icon>
<span>{{ feature }}</span>
</div>
</div>
</section>
</template>
<!-- ==================== 软件系统详情布局 ==================== -->
<template v-if="!isHardware && !loading">
<!-- 视频展示区 -->
<section class="video-section" v-if="query.video">
<div class="video-wrapper">
<video
autoplay
muted
loop
playsinline
:src="`./static/video/${query.video}`"
class="demo-video"
></video>
<div class="video-overlay">
<span class="video-badge">系统演示</span>
</div>
</div>
</section>
<!-- 软件截图/图片（如果没有视频） -->
<section class="software-hero" v-if="!query.video && query.imgUrl">
<div class="software-image-wrapper">
<img
:src="`./static/images/${query.imgUrl}`"
:alt="query.title"
class="software-image"
/>
</div>
</section>
<!-- 功能概述 -->
<section class="overview-section" v-if="query.description">
<div class="section-header">
<h2 class="section-title">💡 功能概述</h2>
</div>
<div class="overview-content" v-html="query.description"></div>
</section>
<!-- 功能模块卡片 -->
<section class="modules-section" v-if="query.card && query.card.length > 0">
<div class="section-header">
<h2 class="section-title">🎯 核心功能模块</h2>
<p class="section-desc">共 {{ query.card.length }} 个功能模块</p>
</div>
<div class="module-list">
<div v-for="item in query.card" :key="item.id" class="module-card">
<div class="module-header">
<el-icon :size="20" color="#1890ff"><Grid /></el-icon>
<h3 class="module-title">{{ item.title }}</h3>
</div>
<div class="module-content">{{ item.content }}</div>
</div>
</div>
</section>
<!-- 应用场景 -->
<section class="scenarios-section" v-if="query.scenarios">
<div class="section-header">
<h2 class="section-title">🚀 应用场景</h2>
</div>
<div class="scenario-tags">
<span v-for="(scene, idx) in query.scenarios" :key="idx" class="scenario-tag">
{{ scene }}
</span>
</div>
</section>
</template>
<!-- ==================== 底部操作栏 ==================== -->
<footer class="detail-footer">
<div class="footer-inner">
<button class="footer-btn back-btn" @click="goBack">
<div class="btn-icon-wrapper back">
<el-icon><ArrowLeft /></el-icon>
</div>
<span class="btn-text">返回列表</span>
</button>
<button class="footer-btn contact-btn" @click="$router.push('/link')">
<div class="btn-icon-wrapper contact">
<el-icon><PhoneFilled /></el-icon>
</div>
<span class="btn-text">联系我们</span>
<span class="btn-badge">立即咨询</span>
</button>
</div>
</footer>
</div>
</template>
<script>
import {
ArrowLeft,
CircleCheck,
Grid,
PhoneFilled
} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.mobile-detail {
min-height: 100vh;
background-color: #f5f7fa;
padding-bottom: 80px; /* no */
// ==================== 导航栏 ====================
.detail-nav {
position: sticky;
top: 0; /* no */
z-index: 100;
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
padding: 14px 16px; /* no */
display: flex;
align-items: center;
gap: 12px; /* no */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* no */
.back-btn {
display: flex;
align-items: center;
gap: 4px; /* no */
padding: 8px 12px; /* no */
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 20px; /* no */
color: #ffffff;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
&:active {
background-color: rgba(255, 255, 255, 0.2);
transform: scale(0.95);
}
.el-icon {
font-size: 16px;
}
}
.nav-title {
flex: 1;
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// ==================== 通用区块样式 ====================
section {
margin: 16px; /* no */
background-color: #ffffff;
border-radius: 12px; /* no */
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* no */
}
.section-header {
padding: 16px 16px 12px; /* no */
border-bottom: 1px solid #f0f0f0;
.section-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
}
.section-desc {
font-size: 12px;
color: #999999;
margin: 0;
}
}
// ==================== 硬件详情样式 ====================
.product-hero {
margin: 16px; /* no */
background-color: #ffffff;
border-radius: 12px; /* no */
overflow: hidden;
.hero-image-wrapper {
position: relative;
width: 100%;
background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 50%);
.hero-image {
width: 100%;
height: auto;
min-height: 280px; /* no */
max-height: 400px; /* no */
object-fit: contain;
display: block;
padding: 20px; /* no */
box-sizing: border-box;
}
.image-badge {
position: absolute;
top: 16px; /* no */
right: 16px; /* no */
padding: 6px 14px; /* no */
background: linear-gradient(135deg, #1890ff, #096dd9);
color: #ffffff;
font-size: 12px;
font-weight: 500;
border-radius: 16px; /* no */
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); /* no */
}
}
}
.advantages-section {
.advantages-content {
padding: 16px; /* no */
line-height: 1.8;
font-size: 14px;
color: #333333;
:deep(h4),
:deep(h3),
:deep(h2) {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin: 12px 0 8px 0;
}
:deep(p) {
margin: 8px 0;
line-height: 1.7;
}
:deep(ul),
:deep(ol) {
padding-left: 20px; /* no */
margin: 8px 0;
li {
margin: 6px 0;
line-height: 1.6;
}
}
}
}
.description-section {
.description-content {
padding: 16px; /* no */
font-size: 14px;
line-height: 1.9;
color: #555555;
:deep(p) {
margin: 10px 0;
text-indent: 2em;
text-align: justify;
}
:deep(img) {
max-width: 100%;
height: auto;
border-radius: 8px; /* no */
margin: 10px 0;
}
}
}
.specs-section {
.specs-list {
padding: 16px; /* no */
display: flex;
flex-direction: column;
gap: 12px; /* no */
.spec-item {
display: flex;
align-items: flex-start;
gap: 10px; /* no */
padding: 12px; /* no */
background-color: #fafafa;
border-radius: 8px; /* no */
border-left: 3px solid #1890ff;
.el-icon {
flex-shrink: 0;
margin-top: 2px;
}
span {
font-size: 14px;
color: #333333;
line-height: 1.6;
}
}
}
}
// ==================== 软件详情样式 ====================
.video-section {
margin: 16px; /* no */
background-color: #000000;
border-radius: 12px; /* no */
overflow: hidden;
.video-wrapper {
position: relative;
width: 100%;
height: 220px; /* no */
.demo-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-overlay {
position: absolute;
bottom: 12px; /* no */
right: 12px; /* no */
.video-badge {
padding: 5px 12px; /* no */
background-color: rgba(24, 144, 255, 0.9);
color: #ffffff;
font-size: 11px;
border-radius: 12px; /* no */
}
}
}
}
.software-hero {
margin: 16px; /* no */
background-color: #ffffff;
border-radius: 12px; /* no */
overflow: hidden;
.software-image-wrapper {
width: 100%;
background: linear-gradient(180deg, #e6f7ff 0%, #ffffff 50%);
.software-image {
width: 100%;
height: auto;
min-height: 240px; /* no */
object-fit: contain;
display: block;
padding: 16px; /* no */
box-sizing: border-box;
}
}
}
.overview-section {
.overview-content {
padding: 16px; /* no */
font-size: 14px;
line-height: 1.9;
color: #555555;
:deep(p) {
margin: 10px 0;
text-align: justify;
}
}
}
.modules-section {
.module-list {
padding: 12px; /* no */
display: flex;
flex-direction: column;
gap: 12px; /* no */
.module-card {
background-color: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 10px; /* no */
overflow: hidden;
transition: all 0.3s ease;
&:active {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
}
.module-header {
display: flex;
align-items: center;
gap: 8px; /* no */
padding: 14px 16px; /* no */
background: linear-gradient(135deg, #0389ff, #0066cc);
.module-title {
flex: 1;
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin: 0;
}
}
.module-content {
padding: 14px 16px; /* no */
font-size: 13px;
color: #666666;
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
.scenarios-section {
.scenario-tags {
padding: 16px; /* no */
display: flex;
flex-wrap: wrap;
gap: 10px; /* no */
.scenario-tag {
padding: 8px 16px; /* no */
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
color: #16a34a;
font-size: 13px;
font-weight: 500;
border-radius: 16px; /* no */
border: 1px solid #bbf7d0;
}
}
}
// ==================== 底部操作栏 ====================
.detail-footer {
position: fixed;
bottom: 0;
left: 160px; /* no */ /* 匹配侧边栏展开时的宽度 */
right: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 12px 16px; /* no */
padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* no */
z-index: 99;
border-top: 1px solid rgba(0, 0, 0, 0.05);
transition: left 0.3s ease;
// 当侧边栏折叠时
&[data-sidebar="collapsed"] {
left: 54px; /* no */ /* 匹配侧边栏折叠时的宽度 */
}
.footer-inner {
display: flex;
gap: 12px; /* no */
max-width: 600px; /* no */
margin: 0 auto;
}
.footer-btn {
flex: 1;
height: 52px; /* no */
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px; /* no */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
border-radius: 14px; /* no */
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0; /* no */
height: 0; /* no */
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
pointer-events: none;
z-index: 0;
}
&:active::before {
width: 120px; /* no */
height: 120px; /* no */
}
&:active {
transform: scale(0.96);
}
.btn-icon-wrapper {
width: 36px; /* no */
height: 36px; /* no */
border-radius: 10px; /* no */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
position: relative;
z-index: 1;
.el-icon {
font-size: 20px;
transition: transform 0.3s ease;
}
}
.btn-text {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
position: relative;
z-index: 1;
}
.btn-badge {
position: absolute;
top: -4px; /* no */
right: -2px; /* no */
padding: 2px 8px; /* no */
font-size: 10px;
font-weight: 600;
border-radius: 8px; /* no */
animation: pulse-badge 2s infinite;
z-index: 2;
pointer-events: none;
}
// 返回按钮样式
&.back-btn {
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaed 100%);
color: #555555;
border-radius: 14px; /* no */
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.04), /* no */
inset 0 1px 0 rgba(255, 255, 255, 0.8); /* no */
.btn-icon-wrapper.back {
background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
color: #666666;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* no */
}
&:active {
background: linear-gradient(135deg, #e8eaed 0%, #dcdfe3 100%);
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.06), /* no */
inset 0 1px 0 rgba(255, 255, 255, 0.6); /* no */
.btn-icon-wrapper.back {
transform: scale(0.9);
.el-icon {
transform: translateX(-2px);
}
}
}
}
// 联系我们按钮样式
&.contact-btn {
flex: 1.3; /* 稍微宽一点 */
background: linear-gradient(135deg, #1890ff 0%, #096dd9 50%, #0050b3 100%);
color: #ffffff;
border-radius: 14px; /* no */
box-shadow:
0 4px 16px rgba(24, 144, 255, 0.35), /* no */
0 2px 6px rgba(24, 144, 255, 0.2), /* no */
inset 0 1px 0 rgba(255, 255, 255, 0.2); /* no */
.btn-icon-wrapper.contact {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
backdrop-filter: blur(4px);
}
.btn-badge {
background: linear-gradient(135deg, #ff4d4f, #ff7875);
color: #ffffff;
box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4); /* no */
}
&:active {
background: linear-gradient(135deg, #096dd9 0%, #0050b3 50%, #003a8c 100%);
box-shadow:
0 2px 10px rgba(24, 144, 255, 0.25), /* no */
inset 0 1px 0 rgba(255, 255, 255, 0.15); /* no */
.btn-icon-wrapper.contact {
transform: scale(0.9);
background: rgba(255, 255, 255, 0.15);
.el-icon {
transform: rotate(-15deg) scale(1.1);
}
}
.btn-badge {
animation: none;
transform: scale(0.95);
}
}
}
}
}
// 徽章脉冲动画
@keyframes pulse-badge {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
}
</style>

78
src/views/product/hardwareSystem.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup>
import {ref, onMounted, computed} from 'vue'
import Swiper from '@/components/Swiper/index.vue'
import Banner from '@/components/Banner/index.vue'
import Project from './project.vue'
import {findLabelByUrl} from '@/utils'
import {cryptoEncrypt} from '@/utils/cryptojs'
import {useNavStore} from '@/store/nav'
const navStore = useNavStore()
const hardwareSystemList = window.hardwareSystemList
import {useRouter} from 'vue-router'
const router = useRouter()
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
onMounted(() => {})
const currentPage = ref(1)
// 点击标题跳转详情页
function titleClick(item) {
router.push({
path: '/product/detail',
query: {type: cryptoEncrypt(JSON.stringify(item))},
})
}
</script>
<template>
<div class="page">
<Banner class="banner" img="banner/product.png" />
<Swiper
id="one"
:title="title"
v-model="currentPage"
:data="hardwareSystemList"
:page-size="3"
:show-pagination="false"
:auto-play="false"
:source-width="300"
:source-height="400"
:source-gap="80"
>
<template #default="{item, index, isActive}">
<div class="content" @click="titleClick(item)">
<div class="top">
<div class="title">{{ item.title }}</div>
<div class="sub-title">{{ item.subTitle }}</div>
</div>
<img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
</div>
</template>
</Swiper>
<Project />
</div>
</template>
<style lang="scss" scoped>
.content {
height: 100%;
.top {
background-color: #0389ff;
color: #fff;
letter-spacing: 1px;
padding: 10px 0;
}
.img {
width: 300px;
height: 300px;
}
}
</style>

372
src/views/product/hardwareSystem/mobile.vue Normal file
View File

@ -0,0 +1,372 @@
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {cryptoEncrypt} from '@/utils/cryptojs'
const router = useRouter()
const loading = ref(true)
// 使用PC端真实数据源
const productList = ref([]) // 硬件设备列表
// 应用案例数据（来自PC端project.vue）
const caseList = ref([
{
id: 1,
label: '智慧物流配送',
img: '/static/images/product/1.png',
},
{
id: 2,
label: '要地防控',
img: '/static/images/product/2.png',
},
{
id: 3,
label: '关键基础设施守护',
img: '/static/images/product/3.png',
},
{
id: 4,
label: '规模化无人机巡检',
img: '/static/images/product/4.png',
},
{
id: 5,
label: '城市低空交通管理',
img: '/static/images/product/5.png',
},
{
id: 6,
label: '区域低空监管组网',
img: '/static/images/product/6.png',
},
{
id: 7,
label: '大型活动保障',
img: '/static/images/product/7.png',
},
{
id: 8,
label: '移动式低空安防',
img: '/static/images/product/8.png',
},
])
onMounted(() => {
// 从window对象获取真实数据
productList.value = window.hardwareSystemList || []
setTimeout(() => {
loading.value = false
}, 300)
})
// 跳转详情页（仅硬件设备可用）
const toDetail = (item) => {
router.push({
path: '/product/detail',
query: {type: cryptoEncrypt(JSON.stringify(item))},
})
}
</script>
<template>
<div class="mobile-hardware" v-loading="loading">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">硬件系统</h1>
<p class="page-subtitle">低空监管核心硬件设备</p>
</div>
<!-- 硬件设备列表（可点击） -->
<section class="section" v-if="productList.length > 0">
<div class="section-title-bar">
<span class="title-icon">🔧</span>
<h2>核心设备</h2>
<span class="subtitle">点击查看详细信息</span>
</div>
<div class="product-list">
<div
v-for="product in productList"
:key="product.id"
class="product-card"
@click="toDetail(product)"
>
<!-- 产品图片 -->
<div class="product-image">
<img :src="`./static/images/${product.imgUrl}`" :alt="product.title" />
<span class="click-hint">
<el-icon><View /></el-icon>
</span>
</div>
<!-- 产品信息 -->
<div class="product-info">
<h3 class="product-title">{{ product.title }}</h3>
<p class="product-desc" v-if="product.desc || product.description">
{{ product.desc || product.description }}
</p>
<!-- 查看详情按钮 -->
<div class="action-btn">
<span>查看详情</span>
<el-icon><ArrowRight /></el-icon>
</div>
</div>
</div>
</div>
</section>
<!-- 应用案例板块（不可点击，纯展示） -->
<section class="section case-section" v-if="caseList.length > 0">
<div class="section-title-bar alt">
<span class="title-icon">📋</span>
<h2>应用案例</h2>
<span class="subtitle">典型应用场景展示</span>
</div>
<div class="case-grid">
<div
v-for="caseItem in caseList"
:key="caseItem.id"
class="case-item"
>
<!-- 案例图片 -->
<div class="case-image-wrapper">
<img :src="caseItem.img" :alt="caseItem.label" />
</div>
<!-- 案例名称 -->
<div class="case-label">{{ caseItem.label }}</div>
</div>
</div>
</section>
<!-- 无数据提示 -->
<div v-if="productList.length === 0 && caseList.length === 0" class="empty-state">
<el-icon :size="64" color="#cccccc"><Box /></el-icon>
<p>暂无产品信息</p>
</div>
</div>
</template>
<script>
import {ArrowRight, View, Box} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.mobile-hardware {
min-height: 100%;
background-color: #f5f7fa;
padding-bottom: 20px;
.page-header {
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
padding: 24px 16px;
color: #ffffff;
.page-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: 1px;
}
.page-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
}
.section {
padding: 16px;
&.case-section {
background-color: #ffffff;
margin-top: 12px; /* no */
border-top: 4px solid #081314; /* no */
}
}
.section-title-bar {
display: flex;
align-items: center;
gap: 8px; /* no */
margin-bottom: 16px; /* no */
padding-bottom: 10px; /* no */
border-bottom: 2px solid #e8e8e8;
&.alt {
border-bottom-color: #d6e4ff;
}
.title-icon {
font-size: 20px;
}
h2 {
flex: 1;
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0;
}
.subtitle {
font-size: 11px;
color: #999999;
background-color: #f5f5f5;
padding: 3px 8px; /* no */
border-radius: 10px; /* no */
}
}
// 硬件产品列表样式
.product-list {
display: flex;
flex-direction: column;
gap: 14px; /* no */
}
.product-card {
background-color: #ffffff;
border-radius: 12px; /* no */
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
transition: all 0.3s ease;
cursor: pointer;
&:active {
transform: scale(0.98);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* no */
}
.product-image {
position: relative;
width: 100%;
height: 200px; /* no */
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #fafafa;
padding: 10px; /* no */
box-sizing: border-box;
}
.click-hint {
position: absolute;
top: 10px; /* no */
right: 10px; /* no */
width: 28px; /* no */
height: 28px; /* no */
background-color: rgba(24, 144, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
}
}
.product-info {
padding: 14px; /* no */
.product-title {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.4;
}
.product-desc {
font-size: 12px;
color: #666666;
line-height: 1.6;
margin: 0 0 12px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.action-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px; /* no */
border-top: 1px solid #f0f0f0;
color: #1890ff;
font-size: 13px;
font-weight: 500;
.el-icon {
transition: transform 0.3s ease;
}
&:active .el-icon {
transform: translateX(4px);
}
}
}
}
// 应用案例网格样式（不可点击）
.case-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px; /* no */
.case-item {
background-color: #fafafa;
border-radius: 10px; /* no */
overflow: hidden;
border: 1px solid #e8e8e8;
.case-image-wrapper {
width: 100%;
height: 140px; /* no */
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: #ffffff;
}
}
.case-label {
padding: 10px; /* no */
text-align: center;
font-size: 13px;
font-weight: 500;
color: #333333;
line-height: 1.4;
background-color: #ffffff;
border-top: 1px solid #f0f0f0;
}
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px; /* no */
color: #999999;
p {
margin-top: 16px; /* no */
font-size: 14px;
}
}
}
</style>

67
src/views/product/monitorSystem.vue
View File

@ -1,67 +0,0 @@
<script setup>
import {ref, onMounted} from 'vue'
import Swiper from '@/components/Swiper/index.vue'
import Banner from '@/components/Banner/index.vue'
const currentPage = ref(1)
onMounted(() => {})
</script>
<template>
<div class="page">
<Banner class="banner" img="banner/product.png" />
<Swiper
id="one"
title="产品体系"
v-model="currentPage"
:data="[1, 2, 3, 4]"
:page-size="2"
:show-pagination="false"
:auto-play="false"
>
<template #default="{item, index, isActive}">
<div class="my-card" :class="{active: isActive}">
<h2>{{ item }}</h2>
</div>
</template>
</Swiper>
<Swiper
id="two"
title="软件产品"
v-model="currentPage"
:data="[1, 2, 3, 4]"
:page-size="2"
:show-pagination="false"
:auto-play="false"
>
<template #default="{item, index, isActive}">
<div class="my-card" :class="{active: isActive}">
<h2>{{ item }}</h2>
</div>
</template>
</Swiper>
<Swiper
id="three"
title="硬件产品"
v-model="currentPage"
:data="[1, 2, 3, 4]"
:page-size="2"
:show-pagination="false"
:auto-play="false"
>
<template #default="{item, index, isActive}">
<div class="my-card" :class="{active: isActive}">
<h2>{{ item }}</h2>
</div>
</template>
</Swiper>
</div>
</template>
<style lang="scss" scoped>
.my-card {
background: #d9d9d9;
height: 100%;
}
</style>

88
src/views/product/project.vue Normal file
View File

@ -0,0 +1,88 @@
<script setup>
import Swiper from '@/components/Swiper/index.vue'
import {ref, onMounted} from 'vue'
onMounted(() => {})
// 资质证书
const certificateWidth = ref(1300)
const certificateHeight = ref(700)
const currentPage = ref(1)
const imgList = [
{
id: 1,
list: [
{id: 1, width: 290, height: 188, label: '智慧物流配送', img: 'product/1.png'},
{id: 2, width: 210, height: 280, label: '城市低空交通管理', img: 'product/5.png'},
],
},
{
id: 2,
list: [
{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: 3,
list: [
{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: 4,
list: [
{id: 4.1, width: 290, height: 188, label: '规模化无人机巡检', img: 'product/4.png'},
{id: 4.2, width: 210, height: 280, label: '移动式低空安防', img: 'product/8.png'},
],
},
]
</script>
<template>
<div class="page">
<Swiper
id="certificate"
title="应用案例"
v-model="currentPage"
:source-width="certificateWidth"
:source-height="certificateHeight"
:show-pagination="false"
:auto-play="false"
:showHover="false"
>
<template #default="{item, index, isActive}">
<div class="certificate flex j-s" :class="{active: isActive}">
<div v-for="list in imgList" :index="list.id" class="flex j-c wrap">
<div v-for="(img, imgIndex) in list.list" :key="imgIndex">
<div class="label">{{ img.label }}</div>
<img
:style="{
width: $fontSize(img.width) + 'px',
height: $fontSize(img.height) + 'px',
margin: `5px ${$fontSize(10)}px`,
cursor: 'pointer',
}"
:src="`./static/images/${img.img}`"
/>
</div>
</div>
</div>
</template>
</Swiper>
</div>
</template>
<style lang="scss" scoped>
#certificate {
.certificate {
width: 100%;
height: 100%;
.label {
font-size: 20px;
}
}
}
</style>

67
src/views/product/remoteDevice.vue
View File

@ -1,67 +0,0 @@
<script setup>
import {ref, onMounted} from 'vue'
import Swiper from '@/components/Swiper/index.vue'
import Banner from '@/components/Banner/index.vue'
const currentPage = ref(1)
onMounted(() => {})
</script>
<template>
<div class="page">
<Banner class="banner" img="banner/product.png" />
<Swiper
id="one"
title="产品体系"
v-model="currentPage"
:data="[1, 2, 3, 4]"
:page-size="2"
:show-pagination="false"
:auto-play="false"
>
<template #default="{item, index, isActive}">
<div class="my-card" :class="{active: isActive}">
<h2>{{ item }}</h2>
</div>
</template>
</Swiper>
<Swiper
id="two"
title="软件产品"
v-model="currentPage"
:data="[1, 2, 3, 4]"
:page-size="2"
:show-pagination="false"
:auto-play="false"
>
<template #default="{item, index, isActive}">
<div class="my-card" :class="{active: isActive}">
<h2>{{ item }}</h2>
</div>
</template>
</Swiper>
<Swiper
id="three"
title="硬件产品"
v-model="currentPage"
:data="[1, 2, 3, 4]"
:page-size="2"
:show-pagination="false"
:auto-play="false"
>
<template #default="{item, index, isActive}">
<div class="my-card" :class="{active: isActive}">
<h2>{{ item }}</h2>
</div>
</template>
</Swiper>
</div>
</template>
<style lang="scss" scoped>
.my-card {
background: #d9d9d9;
height: 100%;
}
</style>

96
src/views/product/softwareSystem.vue Normal file
View File

@ -0,0 +1,96 @@
<script setup>
import {ref, onMounted, computed} from 'vue'
import Swiper from '@/components/Swiper/index.vue'
import Banner from '@/components/Banner/index.vue'
import {findLabelByUrl} from '@/utils'
import {cryptoEncrypt} from '@/utils/cryptojs'
import {useNavStore} from '@/store/nav'
const softwareSystemList = window.softwareSystemList
const navStore = useNavStore()
import {useRouter} from 'vue-router'
const router = useRouter()
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
const swiperWidth = ref(1300)
const swiperHeight = ref(800)
onMounted(() => {})
const currentPage = ref(1)
// 点击标题跳转详情页
function titleClick(item) {
router.push({
path: '/product/detail',
query: {type: cryptoEncrypt(JSON.stringify(item))},
})
}
</script>
<template>
<div class="page">
<Banner class="banner" img="banner/product.png" />
<Swiper
id="one"
:title="title"
v-model="currentPage"
:show-pagination="false"
:auto-play="false"
:source-width="swiperWidth"
:source-height="swiperHeight"
:showHover="false"
>
<template #default="{isActive}">
<div class="content flex j-c a-c wrap">
<div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
<div class="top">
<div class="title">{{ list.title }}</div>
</div>
<div class="line"></div>
<img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
</div>
</div>
</template>
</Swiper>
</div>
</template>
<style lang="scss" scoped>
.content {
height: 100%;
.list {
margin-top: 60px;
margin: 0 15px;
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 {
width: 100%;
height: 2px;
background-color: $black;
}
.img {
width: 100%;
height: auto;
}
}
</style>

291
src/views/product/softwareSystem/mobile.vue Normal file
View File

@ -0,0 +1,291 @@
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {cryptoEncrypt} from '@/utils/cryptojs'
const router = useRouter()
const loading = ref(true)
// 使用PC端真实数据源 - 软件系统列表
const softwareList = ref([])
onMounted(() => {
// 从window对象获取真实数据
softwareList.value = window.softwareSystemList || []
setTimeout(() => {
loading.value = false
}, 300)
})
// 点击图片跳转详情页
const toDetail = (item) => {
router.push({
path: '/product/detail',
query: {type: cryptoEncrypt(JSON.stringify(item))},
})
}
</script>
<template>
<div class="mobile-software" v-loading="loading">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">软件系统</h1>
<p class="page-subtitle">智能化低空监管软件平台</p>
</div>
<!-- 软件系统列表 -->
<div class="software-list" v-if="softwareList.length > 0">
<div
v-for="software in softwareList"
:key="software.id"
class="software-card"
>
<!-- 标题栏 -->
<div class="card-header-bar">
<h3 class="software-title">{{ software.title }}</h3>
</div>
<!-- 图片区域（可点击） -->
<div class="image-area" @click="toDetail(software)">
<img :src="`./static/images/${software.imgUrl}`" :alt="software.title" class="software-image" />
<div class="image-overlay">
<span class="view-detail">
<el-icon><View /></el-icon>
查看详情
</span>
</div>
</div>
<!-- 描述信息 -->
<div class="card-body">
<!-- 副标题 -->
<p class="sub-title" v-if="software.subTitle">{{ software.subTitle }}</p>
<!-- 详细描述 -->
<div class="description" v-if="software.desc || software.description">
<p>{{ software.desc || software.description }}</p>
</div>
<!-- 功能特性标签 -->
<div class="features" v-if="software.features && software.features.length > 0">
<span v-for="(feat, idx) in software.features" :key="idx" class="feature-tag">
{{ feat }}
</span>
</div>
<!-- 查看详情按钮 -->
<button class="detail-btn" @click="toDetail(software)">
<span>了解更多</span>
<el-icon><ArrowRight /></el-icon>
</button>
</div>
</div>
</div>
<!-- 无数据提示 -->
<div v-else class="empty-state">
<el-icon :size="64" color="#cccccc"><Monitor /></el-icon>
<p>暂无软件系统信息</p>
</div>
</div>
</template>
<script>
import {View, ArrowRight, Monitor} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.mobile-software {
min-height: 100%;
background-color: #f5f7fa;
padding-bottom: 20px;
.page-header {
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
padding: 24px 16px;
color: #ffffff;
.page-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: 1px;
}
.page-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
}
.software-list {
padding: 16px;
display: flex;
flex-direction: column;
gap: 20px; /* no */
}
.software-card {
background-color: #ffffff;
border-radius: 12px; /* no */
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
.card-header-bar {
background: linear-gradient(135deg, #0389ff, #0066cc);
padding: 14px 16px; /* no */
.software-title {
font-size: 17px;
font-weight: 600;
color: #ffffff;
margin: 0;
letter-spacing: 0.5px;
}
}
.image-area {
position: relative;
width: 100%;
height: 240px; /* no */
overflow: hidden;
cursor: pointer;
.software-image {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #fafafa;
padding: 12px; /* no */
box-sizing: border-box;
transition: transform 0.3s ease;
}
&:active .software-image {
transform: scale(1.02);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
padding: 20px 16px 12px; /* no */
display: flex;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
.view-detail {
display: flex;
align-items: center;
gap: 6px; /* no */
color: #ffffff;
font-size: 13px;
font-weight: 500;
.el-icon {
font-size: 16px;
}
}
}
&:active .image-overlay {
opacity: 1;
}
}
.card-body {
padding: 16px; /* no */
.sub-title {
font-size: 14px;
color: #1890ff;
font-weight: 500;
margin: 0 0 10px 0;
line-height: 1.4;
}
.description {
margin-bottom: 14px; /* no */
p {
font-size: 13px;
color: #666666;
line-height: 1.7;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.features {
display: flex;
flex-wrap: wrap;
gap: 8px; /* no */
margin-bottom: 16px; /* no */
.feature-tag {
padding: 5px 12px; /* no */
background-color: #e6f7ff;
color: #096dd9;
font-size: 11px;
border-radius: 12px; /* no */
border: 1px solid #d6e4ff;
font-weight: 500;
}
}
.detail-btn {
width: 100%;
height: 42px; /* no */
border: none;
border-radius: 21px; /* no */
background: linear-gradient(135deg, #081314, #1a2634);
color: #ffffff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px; /* no */
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(8, 19, 20, 0.25); /* no */
&:active {
transform: scale(0.97);
box-shadow: 0 2px 8px rgba(8, 19, 20, 0.35); /* no */
}
.el-icon {
transition: transform 0.3s ease;
}
&:active .el-icon {
transform: translateX(3px);
}
}
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px; /* no */
color: #999999;
p {
margin-top: 16px; /* no */
font-size: 14px;
}
}
}
</style>