Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1195a34c6 |
2
.gitignore
vendored
2
.gitignore
vendored
@ -2,7 +2,6 @@
|
|||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
/situation
|
/situation
|
||||||
/protal_dist
|
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
@ -22,4 +21,3 @@ package-lock.json
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
*.zip
|
|
||||||
10
index.html
10
index.html
@ -1,18 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/rangu.svg" />
|
<link rel="icon" type="image/svg+xml" href="/rangu.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>燃谷科技（南京）有限公司</title>
|
<title>燃谷科技（南京）有限公司</title>
|
||||||
<meta name="keywords" content="燃谷,万谷硅巷,低空经济,低空监管,远程识别,RemoteID,RID" />
|
<script src="/nav/index.js"></script>
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
|
|
||||||
/>
|
|
||||||
<script src="/config.js"></script>
|
<script src="/config.js"></script>
|
||||||
<script src="/config/nav.js"></script>
|
|
||||||
<script src="/config/product.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -9,20 +9,14 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.3.2",
|
|
||||||
"@vueup/vue-quill": "^1.2.0",
|
|
||||||
"@vueuse/core": "^13.8.0",
|
"@vueuse/core": "^13.8.0",
|
||||||
"axios": "^1.12.2",
|
"axios": "^1.11.0",
|
||||||
"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",
|
|
||||||
"vant": "^4.10.0",
|
|
||||||
"vue": "^3.5.18",
|
"vue": "^3.5.18",
|
||||||
"vue-router": "^4.5.1"
|
"vue-router": "^4.5.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,10 +1,2 @@
|
|||||||
window.config = {
|
window.GD_url =
|
||||||
// 新闻中心
|
'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'
|
||||||
baseUrl: 'http://192.168.3.10:9121/',
|
|
||||||
// 文件下载
|
|
||||||
downloadUrl: 'https://work.rangutech.cn:1001/',
|
|
||||||
// 静态图片
|
|
||||||
assetsUrl: 'https://insider.rangutech.com/app_static_data/images/',
|
|
||||||
// 演示系统
|
|
||||||
featureUrl: 'http://192.168.3.32:5174/#/',
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,77 +0,0 @@
|
|||||||
window.nav = {
|
|
||||||
header: [
|
|
||||||
{id: 1, label: '首页', url: '/', mobileUrl: '/m/homepage', hasChildren: false},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
label: '解决方案',
|
|
||||||
url: '/product',
|
|
||||||
mobileUrl: '/m/product',
|
|
||||||
hasChildren: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 2.1,
|
|
||||||
label: '空域感知矩阵',
|
|
||||||
url: '/product/hardwareSystem',
|
|
||||||
mobileUrl: '/m/product/hardwareSystem',
|
|
||||||
hasChildren: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2.2,
|
|
||||||
label: '低空智控中枢',
|
|
||||||
url: '/product/softwareSystem',
|
|
||||||
mobileUrl: '/m/product/softwareSystem',
|
|
||||||
hasChildren: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// {id: 3, label: '服务与支撑', url: '/services', mobileUrl: '/m/services', hasChildren: false},
|
|
||||||
{id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
|
|
||||||
{id: 5, label: '关于我们', url: '/about', mobileUrl: '/m/about', hasChildren: false},
|
|
||||||
{id: 6, label: '联系我们', url: '/link', mobileUrl: '/m/link', hasChildren: false},
|
|
||||||
{id: 7, label: '资源下载', url: '/download', mobileUrl: '/m/download', hasChildren: false},
|
|
||||||
{id: 8, label: '演示系统', url: window.config.featureUrl, hasChildren: false, open: true},
|
|
||||||
],
|
|
||||||
|
|
||||||
footer: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
label: '解决方案',
|
|
||||||
url: '',
|
|
||||||
hasChildren: true,
|
|
||||||
children: [
|
|
||||||
{id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem', mobileUrl: '/m/product/hardwareSystem'},
|
|
||||||
{id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem', mobileUrl: '/m/product/softwareSystem'},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// id: 2,
|
|
||||||
// label: '服务与支撑',
|
|
||||||
// url: '/services',
|
|
||||||
// mobileUrl: '/m/services',
|
|
||||||
// hasChildren: false,
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
label: '资源下载',
|
|
||||||
url: '/download',
|
|
||||||
hasChildren: true,
|
|
||||||
children: [
|
|
||||||
{id: 3.1, label: '资源下载', url: '/download', mobileUrl: '/m/download'},
|
|
||||||
{id: 3.2, label: 'Android', url: '', downloadType: 'android'},
|
|
||||||
{id: 3.3, label: 'iOS', url: '', downloadType: 'ios'},
|
|
||||||
{id: 3.4, label: '客户端', url: '', downloadType: 'pc'},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
label: '关于燃谷',
|
|
||||||
url: '',
|
|
||||||
hasChildren: true,
|
|
||||||
children: [
|
|
||||||
{id: 5.1, label: '公司简介', url: '/about', mobileUrl: '/m/about'},
|
|
||||||
{id: 5.2, label: '联系我们', url: '/link', mobileUrl: '/m/link'},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
@ -1,177 +0,0 @@
|
|||||||
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>`,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
66
public/nav/index.js
Normal file
66
public/nav/index.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
window.nav = {
|
||||||
|
header: [
|
||||||
|
{id: 1, label: '首页', url: '/', hasChildren: false},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '产品中心',
|
||||||
|
url: '/product',
|
||||||
|
hasChildren: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 2.1,
|
||||||
|
label: '低空监管体系',
|
||||||
|
url: '/product/monitorSystem',
|
||||||
|
hasChildren: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2.2,
|
||||||
|
label: '低空远程识别设备',
|
||||||
|
url: '/product/remoteDevice',
|
||||||
|
hasChildren: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
|
||||||
|
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
||||||
|
{id: 5, label: '关于我们', url: '/about', hasChildren: false},
|
||||||
|
{id: 6, label: '联系我们', url: '/link', hasChildren: false},
|
||||||
|
],
|
||||||
|
footer: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '产品中心',
|
||||||
|
url: '',
|
||||||
|
hasChildren: true,
|
||||||
|
children: [
|
||||||
|
{id: 1.1, label: '低空监管体系', url: '/product/monitorSystem'},
|
||||||
|
{id: 1.2, label: '低空远程识别设备', url: '/product/remoteDevice'},
|
||||||
|
{id: 1.3, label: '智能加载服务', url: '/product'},
|
||||||
|
{id: 1.4, label: '智能加载服务', url: '/product'},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '服务与支撑',
|
||||||
|
url: '/services',
|
||||||
|
hasChildren: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '软件下载',
|
||||||
|
url: '/download',
|
||||||
|
hasChildren: false,
|
||||||
|
},
|
||||||
|
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '关于燃谷',
|
||||||
|
url: '',
|
||||||
|
hasChildren: true,
|
||||||
|
children: [
|
||||||
|
{id: 5.1, label: '公司简介', url: '/about'},
|
||||||
|
{id: 5.2, label: '联系我们', url: '/link'},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 MiB After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 690 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 MiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 MiB After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
BIN
public/static/images/main/banner.png
Normal file
BIN
public/static/images/main/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/static/images/news/1.png
Normal file
BIN
public/static/images/news/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
BIN
public/static/images/news/2.png
Normal file
BIN
public/static/images/news/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
public/static/images/news/3.png
Normal file
BIN
public/static/images/news/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/static/images/news/4.png
Normal file
BIN
public/static/images/news/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 356 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 436 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 884 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 562 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 278 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
19
src/api/device.js
Normal file
19
src/api/device.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
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,
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,63 +0,0 @@
|
|||||||
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,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取下载资源
|
|
||||||
export function downloadList(params) {
|
|
||||||
return request({
|
|
||||||
url: `${window.config.downloadUrl}api/minio/Object/list`,
|
|
||||||
method: 'get',
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function downloadFile(params) {
|
|
||||||
return request({
|
|
||||||
url: `${window.config.downloadUrl}api/minio/Object/url`,
|
|
||||||
method: 'get',
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -20,14 +20,6 @@ body {
|
|||||||
height: 600px;
|
height: 600px;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端 Banner 自适应高度 */
|
|
||||||
@media screen and (max-width: 999px) {
|
|
||||||
.banner {
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.page {
|
.page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -8,7 +8,5 @@ $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;
|
||||||
|
|||||||
@ -19,7 +19,6 @@ const props = defineProps({
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.logo {
|
.logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: 100%;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,125 +0,0 @@
|
|||||||
import {ref, computed, watch, nextTick, getCurrentInstance, onUnmounted} from 'vue'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Swiper 公用逻辑 composable
|
|
||||||
* @param {object} props - 组件 props
|
|
||||||
* @param {object} model - v-model ref (currentPage)
|
|
||||||
* @param {function} emit - emit 函数
|
|
||||||
*/
|
|
||||||
export function useSwiper(props, model, emit) {
|
|
||||||
const instance = getCurrentInstance()
|
|
||||||
const $fontSize = instance.appContext.config.globalProperties.$fontSize
|
|
||||||
const trackRef = ref(null)
|
|
||||||
let autoPlayTimer = null
|
|
||||||
|
|
||||||
/* ---------- 计算属性 ---------- */
|
|
||||||
const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
|
||||||
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
|
||||||
const itemGap = computed(() => $fontSize(props.sourceGap))
|
|
||||||
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
|
||||||
const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
|
|
||||||
const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
|
|
||||||
const totalPages = computed(() => props.data.length - props.pageSize + 1)
|
|
||||||
|
|
||||||
/* ---------- 方法 ---------- */
|
|
||||||
function clickTitle() {
|
|
||||||
emit('title-click')
|
|
||||||
}
|
|
||||||
|
|
||||||
function translate(page) {
|
|
||||||
if (!trackRef.value) return
|
|
||||||
trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
|
|
||||||
trackRef.value.style.transform = `translateX(-${itemTotalWidth.value * (page - 1)}px)`
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToPage(page) {
|
|
||||||
model.value = Number(page)
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextPage() {
|
|
||||||
const next = model.value < totalPages.value ? model.value + 1 : 1
|
|
||||||
goToPage(next)
|
|
||||||
}
|
|
||||||
|
|
||||||
function prevPage() {
|
|
||||||
const prev = model.value > 1 ? model.value - 1 : totalPages.value
|
|
||||||
goToPage(prev)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleItemClick(item, index) {
|
|
||||||
emit('item-click', item, index)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleItemHover(item, index) {
|
|
||||||
clearInterval(autoPlayTimer)
|
|
||||||
autoPlayTimer = null
|
|
||||||
emit('item-hover', item, index)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleItemHoverLeave() {
|
|
||||||
startAutoPlay()
|
|
||||||
}
|
|
||||||
|
|
||||||
function startAutoPlay() {
|
|
||||||
if (!props.autoPlay) return
|
|
||||||
stopAutoPlay()
|
|
||||||
autoPlayTimer = setInterval(nextPage, 3000)
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopAutoPlay() {
|
|
||||||
if (autoPlayTimer) {
|
|
||||||
clearInterval(autoPlayTimer)
|
|
||||||
autoPlayTimer = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 移动端触摸事件 */
|
|
||||||
function handleItemTouchStart(item, index) {
|
|
||||||
clearInterval(autoPlayTimer)
|
|
||||||
autoPlayTimer = null
|
|
||||||
emit('item-hover', item, index)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleItemTouchEnd() {
|
|
||||||
startAutoPlay()
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- 监听器 ---------- */
|
|
||||||
watch(model, (newVal, oldVal) => {
|
|
||||||
if (newVal !== oldVal) {
|
|
||||||
nextTick(() => translate(newVal))
|
|
||||||
}
|
|
||||||
}, {immediate: true})
|
|
||||||
|
|
||||||
watch(() => props.autoPlay, (autoPlay) => {
|
|
||||||
autoPlay ? startAutoPlay() : stopAutoPlay()
|
|
||||||
}, {immediate: true})
|
|
||||||
|
|
||||||
watch(() => props.data.length, (newLen, oldLen) => {
|
|
||||||
if (newLen !== oldLen && model.value !== 1) {
|
|
||||||
model.value = 1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(stopAutoPlay)
|
|
||||||
|
|
||||||
return {
|
|
||||||
trackRef,
|
|
||||||
itemWidth,
|
|
||||||
itemHeight,
|
|
||||||
itemGap,
|
|
||||||
itemTotalWidth,
|
|
||||||
viewPortWidth,
|
|
||||||
trackWidth,
|
|
||||||
totalPages,
|
|
||||||
clickTitle,
|
|
||||||
goToPage,
|
|
||||||
nextPage,
|
|
||||||
prevPage,
|
|
||||||
handleItemClick,
|
|
||||||
handleItemHover,
|
|
||||||
handleItemHoverLeave,
|
|
||||||
handleItemTouchStart,
|
|
||||||
handleItemTouchEnd,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {useSwiper} from '../composable.js'
|
|
||||||
|
|
||||||
const currentPage = defineModel({type: [Number, String], default: 1})
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
id: {type: String, required: true},
|
|
||||||
title: {type: String, default: ''},
|
|
||||||
data: {type: Array, default: () => [1]},
|
|
||||||
pageSize: {type: [Number, String], default: 1},
|
|
||||||
showDot: {type: Boolean, default: true},
|
|
||||||
showPagination: {type: Boolean, default: true},
|
|
||||||
showHover: {type: Boolean, default: false},
|
|
||||||
autoPlay: {type: Boolean, default: false},
|
|
||||||
transitionDuration: {type: Number, default: 300},
|
|
||||||
sourceWidth: {type: Number, default: 276},
|
|
||||||
sourceHeight: {type: Number, default: 355},
|
|
||||||
sourceGap: {type: Number, default: 20},
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
|
|
||||||
|
|
||||||
const {
|
|
||||||
trackRef,
|
|
||||||
itemWidth,
|
|
||||||
itemHeight,
|
|
||||||
itemGap,
|
|
||||||
itemTotalWidth,
|
|
||||||
viewPortWidth,
|
|
||||||
trackWidth,
|
|
||||||
totalPages,
|
|
||||||
clickTitle,
|
|
||||||
goToPage,
|
|
||||||
nextPage,
|
|
||||||
prevPage,
|
|
||||||
handleItemClick,
|
|
||||||
handleItemHover,
|
|
||||||
handleItemHoverLeave,
|
|
||||||
handleItemTouchStart,
|
|
||||||
handleItemTouchEnd,
|
|
||||||
} = useSwiper(props, currentPage, emit)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section :id="id" class="generic-carousel">
|
|
||||||
<!-- 标题 -->
|
|
||||||
<slot name="title">
|
|
||||||
<h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
|
|
||||||
</slot>
|
|
||||||
|
|
||||||
<!-- 分页指示器 -->
|
|
||||||
<div v-if="showDot" class="carousel-pagination">
|
|
||||||
<button
|
|
||||||
v-for="page in totalPages"
|
|
||||||
:key="page"
|
|
||||||
:class="['pagination-dot', {'is-active': page === currentPage}]"
|
|
||||||
@click="goToPage(page)"
|
|
||||||
:aria-label="`切换到第${page}页`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 导航按钮 -->
|
|
||||||
<div v-if="showPagination && totalPages > 1" class="carousel-navigation flex j-s">
|
|
||||||
<button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页"><</button>
|
|
||||||
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 轮播内容区域 -->
|
|
||||||
<div class="carousel-content">
|
|
||||||
<div class="carousel-viewport" :style="{width: viewPortWidth}">
|
|
||||||
<div
|
|
||||||
ref="trackRef"
|
|
||||||
class="carousel-track"
|
|
||||||
:style="{width: trackWidth}"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in data"
|
|
||||||
:key="index"
|
|
||||||
class="carousel-item"
|
|
||||||
:style="{
|
|
||||||
width: itemWidth + 'px',
|
|
||||||
height: itemHeight + 'px',
|
|
||||||
marginRight: index < data.length - 1 ? itemGap + 'px' : '0',
|
|
||||||
}"
|
|
||||||
@click="handleItemClick(item, index)"
|
|
||||||
@mouseenter="handleItemHover(item, index)"
|
|
||||||
@mouseleave="handleItemHoverLeave(item, index)"
|
|
||||||
@touchstart="handleItemTouchStart(item, index)"
|
|
||||||
@touchend="handleItemTouchEnd"
|
|
||||||
>
|
|
||||||
<slot :item="item" :index="index" :isActive="currentPage === Math.ceil((index + 1) / pageSize)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.generic-carousel {
|
|
||||||
padding: 20px 0;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.carousel-title {
|
|
||||||
font-family: 'PingFang SC';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-pagination {
|
|
||||||
width: 64px;
|
|
||||||
height: 4px;
|
|
||||||
margin: 12px auto 20px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.pagination-dot {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
background: #d9d9d9;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
|
|
||||||
&.is-active {
|
|
||||||
background: #0389ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-navigation {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 0 8px; /* no */
|
|
||||||
z-index: 10;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
.nav-btn {
|
|
||||||
pointer-events: auto;
|
|
||||||
width: 32px; /* no */
|
|
||||||
height: 32px; /* no */
|
|
||||||
border: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
color: #333;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-content {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-viewport {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-track {
|
|
||||||
display: flex;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
will-change: transform;
|
|
||||||
padding-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
defineProps({
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const visible = defineModel({default: false})
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
ios: {label: 'iOS', img: `${window.config.assetsUrl}app/ios.png`},
|
|
||||||
android: {label: 'Android', img: `${window.config.assetsUrl}app/android.png`},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-dialog v-model="visible" title="扫码下载" width="500px" :close-on-click-modal="true">
|
|
||||||
<div class="dialog-body flex j-c a-c">
|
|
||||||
<div class="download-option">
|
|
||||||
<img :src="options[type]?.img" :alt="type" />
|
|
||||||
<span class="label">{{ options[type]?.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog-body {
|
|
||||||
gap: 40px;
|
|
||||||
padding: 20px 0;
|
|
||||||
|
|
||||||
.download-option {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 140px;
|
|
||||||
height: 140px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
使用：<icon-svg name="icon-微信" class="icon" />
|
使用：<icon-svg name="icon-微信" class="icon" />
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script setup>
|
<script setup >
|
||||||
defineProps({
|
defineProps({
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,6 +1,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {useSwiper} from '../composable.js'
|
import {
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
watch,
|
||||||
|
nextTick,
|
||||||
|
getCurrentInstance,
|
||||||
|
onUnmounted,
|
||||||
|
} from 'vue'
|
||||||
|
|
||||||
|
/* -------------------- 组件接口定义 -------------------- */
|
||||||
const currentPage = defineModel({type: [Number, String], default: 1})
|
const currentPage = defineModel({type: [Number, String], default: 1})
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -18,33 +26,156 @@ const props = defineProps({
|
|||||||
sourceGap: {type: Number, default: 20},
|
sourceGap: {type: Number, default: 20},
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
|
const emit = defineEmits(['page-change', 'item-click', 'item-hover'])
|
||||||
|
|
||||||
const {
|
/* -------------------- 响应式变量 -------------------- */
|
||||||
trackRef,
|
const instance = getCurrentInstance()
|
||||||
itemWidth,
|
const $fontSize = instance.appContext.config.globalProperties.$fontSize
|
||||||
itemHeight,
|
const trackRef = ref(null)
|
||||||
itemGap,
|
let autoPlayTimer = null
|
||||||
itemTotalWidth,
|
|
||||||
viewPortWidth,
|
/* -------------------- 计算属性 -------------------- */
|
||||||
trackWidth,
|
const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
||||||
totalPages,
|
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
||||||
clickTitle,
|
const itemGap = computed(() => $fontSize(props.sourceGap))
|
||||||
goToPage,
|
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
||||||
nextPage,
|
const viewPortWidth = computed(
|
||||||
prevPage,
|
() =>
|
||||||
handleItemClick,
|
props.pageSize * itemWidth.value +
|
||||||
handleItemHover,
|
(props.pageSize - 1) * itemGap.value +
|
||||||
handleItemHoverLeave,
|
'px'
|
||||||
} = useSwiper(props, currentPage, emit)
|
)
|
||||||
|
const trackWidth = computed(
|
||||||
|
() => props.data.length * itemTotalWidth.value - itemGap.value + 'px'
|
||||||
|
)
|
||||||
|
const totalPages = computed(() => props.data.length - props.pageSize + 1)
|
||||||
|
|
||||||
|
/* -------------------- 方法 -------------------- */
|
||||||
|
/**
|
||||||
|
* 执行平移动画
|
||||||
|
* @param {number} page - 目标页码
|
||||||
|
*/
|
||||||
|
const translate = (page) => {
|
||||||
|
if (!trackRef.value) return
|
||||||
|
trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
|
||||||
|
trackRef.value.style.transform = `translateX(-${
|
||||||
|
itemTotalWidth.value * (page - 1)
|
||||||
|
}px)`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换到指定页码
|
||||||
|
* @param {number} page - 目标页码
|
||||||
|
*/
|
||||||
|
const goToPage = (page) => {
|
||||||
|
currentPage.value = Number(page)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换到下一页，循环播放
|
||||||
|
*/
|
||||||
|
const nextPage = () => {
|
||||||
|
const nextPage =
|
||||||
|
currentPage.value < totalPages.value ? currentPage.value + 1 : 1
|
||||||
|
goToPage(nextPage)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换到上一页，循环播放
|
||||||
|
*/
|
||||||
|
const prevPage = () => {
|
||||||
|
const prevPage =
|
||||||
|
currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
|
||||||
|
goToPage(prevPage)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理项目点击事件
|
||||||
|
* @param {Object} item - 项目数据
|
||||||
|
* @param {number} index - 项目索引
|
||||||
|
*/
|
||||||
|
const handleItemClick = (item, index) => {
|
||||||
|
emit('item-click', item, index)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理项目悬停事件
|
||||||
|
* @param {Object} item - 项目数据
|
||||||
|
* @param {number} index - 项目索引
|
||||||
|
*/
|
||||||
|
const handleItemHover = (item, index) => {
|
||||||
|
clearInterval(autoPlayTimer)
|
||||||
|
autoPlayTimer = null
|
||||||
|
emit('item-hover', item, index)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理项目鼠标移出事件
|
||||||
|
* @param {Object} item - 项目数据
|
||||||
|
* @param {number} index - 项目索引
|
||||||
|
*/
|
||||||
|
const handleItemHoverLeave = () => {
|
||||||
|
startAutoPlay()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 启动自动播放
|
||||||
|
*/
|
||||||
|
const startAutoPlay = () => {
|
||||||
|
if (!props.autoPlay) return
|
||||||
|
stopAutoPlay()
|
||||||
|
autoPlayTimer = setInterval(nextPage, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止自动播放
|
||||||
|
*/
|
||||||
|
const stopAutoPlay = () => {
|
||||||
|
if (autoPlayTimer) {
|
||||||
|
clearInterval(autoPlayTimer)
|
||||||
|
autoPlayTimer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- 监听器 -------------------- */
|
||||||
|
// 监听页码变化，执行平移动画
|
||||||
|
watch(
|
||||||
|
currentPage,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if (newVal !== oldVal) {
|
||||||
|
nextTick(() => translate(newVal))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{immediate: true}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 监听自动播放设置变化
|
||||||
|
watch(
|
||||||
|
() => props.autoPlay,
|
||||||
|
(autoPlay) => {
|
||||||
|
autoPlay ? startAutoPlay() : stopAutoPlay()
|
||||||
|
},
|
||||||
|
{immediate: true}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 监听数据变化，重置到第一页
|
||||||
|
watch(
|
||||||
|
() => props.data.length,
|
||||||
|
(newLen, oldLen) => {
|
||||||
|
if (newLen !== oldLen && currentPage.value !== 1) {
|
||||||
|
currentPage.value = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 组件卸载时清理定时器
|
||||||
|
onUnmounted(stopAutoPlay)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section :id="id" class="generic-carousel">
|
<section :id="id" class="generic-carousel">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<slot name="title">
|
<h2 v-if="title" class="carousel-title">{{ title }}</h2>
|
||||||
<h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
|
|
||||||
</slot>
|
|
||||||
|
|
||||||
<!-- 分页指示器 -->
|
<!-- 分页指示器 -->
|
||||||
<div v-if="showDot" class="carousel-pagination">
|
<div v-if="showDot" class="carousel-pagination">
|
||||||
@ -58,9 +189,16 @@ const {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 导航按钮 -->
|
<!-- 导航按钮 -->
|
||||||
<div v-if="showPagination && totalPages > 1" class="carousel-navigation flex j-s">
|
<div
|
||||||
<button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页"><</button>
|
v-if="showPagination && totalPages > 1"
|
||||||
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">></button>
|
class="carousel-navigation flex j-s"
|
||||||
|
>
|
||||||
|
<button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">
|
||||||
|
<
|
||||||
|
</button>
|
||||||
|
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">
|
||||||
|
>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 轮播内容区域 -->
|
<!-- 轮播内容区域 -->
|
||||||
@ -86,7 +224,11 @@ const {
|
|||||||
@mouseenter="handleItemHover(item, index)"
|
@mouseenter="handleItemHover(item, index)"
|
||||||
@mouseleave="handleItemHoverLeave(item, index)"
|
@mouseleave="handleItemHoverLeave(item, index)"
|
||||||
>
|
>
|
||||||
<slot :item="item" :index="index" :isActive="currentPage === Math.ceil((index + 1) / pageSize)" />
|
<slot
|
||||||
|
:item="item"
|
||||||
|
:index="index"
|
||||||
|
:isActive="currentPage === Math.ceil((index + 1) / pageSize)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -105,10 +247,6 @@ const {
|
|||||||
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 {
|
||||||
@ -198,9 +336,5 @@ const {
|
|||||||
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>
|
||||||
93
src/home.vue
93
src/home.vue
@ -1,86 +1,41 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {storeToRefs} from 'pinia'
|
|
||||||
import {useNavStore} from '@/store/nav'
|
|
||||||
import {isMobileDevice} from '@/utils/rem'
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
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 {visit} from '@/api/index'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
// 移动端判断
|
|
||||||
const navStore = useNavStore()
|
|
||||||
const {isMobile} = storeToRefs(navStore)
|
|
||||||
|
|
||||||
const referrer = ref(document.referrer || '')
|
|
||||||
const ipUrl = ref('')
|
|
||||||
|
|
||||||
const CACHE_KEY = 'ip'
|
|
||||||
const TIME_KEY = 'ipFetchTime'
|
|
||||||
const CACHE_MIN = 60 * 60 * 1000 // 1h
|
|
||||||
|
|
||||||
// 初始化移动端状态
|
|
||||||
navStore.setIsMobile(isMobileDevice())
|
|
||||||
|
|
||||||
// 监听窗口 resize
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
navStore.setIsMobile(isMobileDevice())
|
|
||||||
})
|
|
||||||
|
|
||||||
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>
|
||||||
<!-- PC端布局 -->
|
<div id="app">
|
||||||
<div v-if="!isMobile" id="app">
|
|
||||||
<Header id="header" />
|
<Header id="header" />
|
||||||
<router-view id="main" v-slot="{Component, title}">
|
|
||||||
|
<router-view id="main" v-slot="{Component, route}">
|
||||||
|
<transition name="fade" mode="out-in">
|
||||||
|
<Suspense>
|
||||||
<keep-alive include="New">
|
<keep-alive include="New">
|
||||||
<component :is="Component" />
|
<component :is="Component" :key="route.fullPath" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="loading-placeholder">页面加载中...</div>
|
||||||
|
</template>
|
||||||
|
</Suspense>
|
||||||
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
|
||||||
<Footer id="footer" />
|
<Footer id="footer" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 移动端布局 -->
|
|
||||||
<MobileLayout v-else />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
/* 淡入淡出效果 */
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -100,7 +55,7 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
#footer {
|
#footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 380px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ import '@/assets/styles/index.scss'
|
|||||||
|
|
||||||
// ====================== 工具和组件 ======================
|
// ====================== 工具和组件 ======================
|
||||||
import {initRem, fontSize} from '@/utils/rem'
|
import {initRem, fontSize} from '@/utils/rem'
|
||||||
import IconSvg from '@/components/Icon/svgIcon.vue'
|
import IconSvg from '_c/icon/svgIcon.vue'
|
||||||
|
|
||||||
// SVG图标注册
|
// SVG图标注册
|
||||||
import 'virtual:svg-icons-register'
|
import 'virtual:svg-icons-register'
|
||||||
|
|||||||
@ -1,161 +1,86 @@
|
|||||||
import {createWebHashHistory, createRouter} from 'vue-router'
|
import {createWebHashHistory, createRouter} from 'vue-router'
|
||||||
import mobileRoutes from './mobile.js'
|
|
||||||
|
|
||||||
import HomeView from '@/views/pc/homepage/index.vue'
|
import HomeView from '@/views/homepage/index.vue'
|
||||||
|
|
||||||
const pcRoutes = [
|
const routes = [
|
||||||
// ============================================ 首页 ============================================
|
|
||||||
{path: '/', component: HomeView},
|
{path: '/', component: HomeView},
|
||||||
|
|
||||||
// ============================================ 产品中心 ============================================
|
// ============================================ 产品中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/product/hardwareSystem',
|
path: '/product/monitorSystem',
|
||||||
name: 'HardwareSystem',
|
name: 'monitorSystem',
|
||||||
component: () => import('@/views/pc/product/hardwareSystem.vue'),
|
component: () => import('@/views/product/monitorSystem.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '低空监管体系',
|
title: '低空监管体系',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/product/softwareSystem',
|
path: '/product/remoteDevice',
|
||||||
name: 'SoftwareSystem',
|
name: 'remoteDevice',
|
||||||
component: () => import('@/views/pc/product/softwareSystem.vue'),
|
component: () => import('@/views/product/remoteDevice.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '低空远程识别设备',
|
title: '低空远程识别设备',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/product/detail',
|
|
||||||
name: 'ProductDetail',
|
|
||||||
component: () => import('@/views/pc/product/detail.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '产品详情',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 服务与支撑 ============================================
|
// ============================================ 服务与支撑 ============================================
|
||||||
{
|
{
|
||||||
path: '/services',
|
path: '/services',
|
||||||
name: 'Services',
|
name: 'Services',
|
||||||
component: () => import('@/views/pc/services/index.vue'),
|
component: () => import('@/views/services/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '服务与支撑',
|
title: '服务与支撑',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 新闻中心 ============================================
|
// ============================================ 新闻中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/news',
|
path: '/news',
|
||||||
name: 'News',
|
name: 'News',
|
||||||
component: () => import('@/views/pc/news/index.vue'),
|
component: () => import('@/views/news/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '新闻中心',
|
title: '新闻中心',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/news/detail',
|
path: '/news/detail',
|
||||||
name: 'NewsDetail',
|
name: 'Detail',
|
||||||
component: () => import('@/views/pc/news/detail.vue'),
|
component: () => import('@/views/news/detail.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '新闻详情',
|
title: '新闻详情',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 关于我们 ============================================
|
// ============================================ 关于我们 ============================================
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
name: 'About',
|
name: 'About',
|
||||||
component: () => import('@/views/pc/about/index.vue'),
|
component: () => import('@/views/about/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '关于我们',
|
title: '关于我们',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 联系我们 ============================================
|
// ============================================ 联系我们 ============================================
|
||||||
{
|
{
|
||||||
path: '/link',
|
path: '/link',
|
||||||
name: 'Link',
|
name: 'Link',
|
||||||
component: () => import('@/views/pc/link/index.vue'),
|
component: () => import('@/views/link/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '联系我们',
|
title: '联系我们',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 下载中心 ============================================
|
// ============================================ 下载中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/download',
|
path: '/download',
|
||||||
name: 'Download',
|
name: 'Download',
|
||||||
component: () => import('@/views/pc/download/index.vue'),
|
component: () => import('@/views/download/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '下载中心',
|
title: '下载中心',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// ============================================ 管理页面 ============================================
|
|
||||||
{
|
|
||||||
path: '/manager',
|
|
||||||
name: 'Manager',
|
|
||||||
component: () => import('@/views/manager/index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '管理中心',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const routes = [...pcRoutes, ...mobileRoutes]
|
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
routes,
|
routes,
|
||||||
})
|
})
|
||||||
|
|
||||||
// 移动端/PC端断点
|
|
||||||
const MOBILE_BREAKPOINT = 1000
|
|
||||||
|
|
||||||
// PC → 移动端路由映射
|
|
||||||
const pcToMobileMap = {
|
|
||||||
'/': '/m/homepage',
|
|
||||||
'/product/hardwareSystem': '/m/product/hardwareSystem',
|
|
||||||
'/product/softwareSystem': '/m/product/softwareSystem',
|
|
||||||
'/product/detail': '/m/product/detail',
|
|
||||||
'/services': '/m/services',
|
|
||||||
'/news': '/m/news',
|
|
||||||
'/news/detail': '/m/news/detail',
|
|
||||||
'/about': '/m/about',
|
|
||||||
'/link': '/m/link',
|
|
||||||
'/download': '/m/download',
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移动端 → PC 路由映射（反向）
|
|
||||||
const mobileToPcMap = Object.fromEntries(
|
|
||||||
Object.entries(pcToMobileMap).map(([k, v]) => [v, k])
|
|
||||||
)
|
|
||||||
|
|
||||||
// 判断是否为移动端
|
|
||||||
function checkIsMobile() {
|
|
||||||
return window.innerWidth < MOBILE_BREAKPOINT
|
|
||||||
}
|
|
||||||
|
|
||||||
router.beforeEach(async (to, from, next) => {
|
|
||||||
const {useNavStore} = await import('@/store/nav.js')
|
|
||||||
const navStore = useNavStore()
|
|
||||||
const isMobile = checkIsMobile()
|
|
||||||
|
|
||||||
// 更新移动端状态
|
|
||||||
navStore.setIsMobile(isMobile)
|
|
||||||
|
|
||||||
// 移动端访问 PC 路由 → 重定向到移动端路由
|
|
||||||
if (isMobile && pcToMobileMap[to.path]) {
|
|
||||||
return next({path: pcToMobileMap[to.path], query: to.query, hash: to.hash, replace: true})
|
|
||||||
}
|
|
||||||
|
|
||||||
// PC端访问移动端路由 → 重定向到 PC 路由
|
|
||||||
if (!isMobile && mobileToPcMap[to.path]) {
|
|
||||||
return next({path: mobileToPcMap[to.path], query: to.query, hash: to.hash, replace: true})
|
|
||||||
}
|
|
||||||
|
|
||||||
next()
|
|
||||||
})
|
|
||||||
|
|
||||||
router.afterEach((to, from) => {
|
router.afterEach((to, from) => {
|
||||||
// 只有路径变化时才滚动到顶部
|
// 只有路径变化时才滚动到顶部
|
||||||
if (to.path !== from.path) {
|
if (to.path !== from.path) {
|
||||||
|
|||||||
@ -1,76 +0,0 @@
|
|||||||
const mobileRoutes = [
|
|
||||||
// ============================================ 首页 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/homepage',
|
|
||||||
name: 'MobileHomepage',
|
|
||||||
component: () => import('@/views/mobile/homepage/index.vue'),
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 产品中心 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/product/hardwareSystem',
|
|
||||||
name: 'MobileHardwareSystem',
|
|
||||||
component: () => import('@/views/mobile/product/hardwareSystem.vue'),
|
|
||||||
meta: {title: '低空监管体系'},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/m/product/softwareSystem',
|
|
||||||
name: 'MobileSoftwareSystem',
|
|
||||||
component: () => import('@/views/mobile/product/softwareSystem.vue'),
|
|
||||||
meta: {title: '低空远程识别设备'},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/m/product/detail',
|
|
||||||
name: 'MobileProductDetail',
|
|
||||||
component: () => import('@/views/mobile/product/detail.vue'),
|
|
||||||
meta: {title: '产品详情'},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 服务与支撑 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/services',
|
|
||||||
name: 'MobileServices',
|
|
||||||
component: () => import('@/views/mobile/services/index.vue'),
|
|
||||||
meta: {title: '服务与支撑'},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 新闻中心 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/news',
|
|
||||||
name: 'MobileNews',
|
|
||||||
component: () => import('@/views/mobile/news/index.vue'),
|
|
||||||
meta: {title: '新闻中心'},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/m/news/detail',
|
|
||||||
name: 'MobileNewsDetail',
|
|
||||||
component: () => import('@/views/mobile/news/detail.vue'),
|
|
||||||
meta: {title: '新闻详情'},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 关于我们 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/about',
|
|
||||||
name: 'MobileAbout',
|
|
||||||
component: () => import('@/views/mobile/about/index.vue'),
|
|
||||||
meta: {title: '关于我们'},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 联系我们 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/link',
|
|
||||||
name: 'MobileLink',
|
|
||||||
component: () => import('@/views/mobile/link/index.vue'),
|
|
||||||
meta: {title: '联系我们'},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ============================================ 下载中心 ============================================
|
|
||||||
{
|
|
||||||
path: '/m/download',
|
|
||||||
name: 'MobileDownload',
|
|
||||||
component: () => import('@/views/mobile/download/index.vue'),
|
|
||||||
meta: {title: '下载中心'},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default mobileRoutes
|
|
||||||
@ -5,8 +5,6 @@ export const useNavStore = defineStore(
|
|||||||
'nav',
|
'nav',
|
||||||
() => {
|
() => {
|
||||||
const navIndex = ref('/')
|
const navIndex = ref('/')
|
||||||
const showLoad = ref(true)
|
|
||||||
const isMobile = ref(window.innerWidth < 1000)
|
|
||||||
|
|
||||||
const changeNavIndex = (id) => {
|
const changeNavIndex = (id) => {
|
||||||
if (!id) {
|
if (!id) {
|
||||||
@ -16,27 +14,12 @@ export const useNavStore = defineStore(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setLoad = (status) => {
|
|
||||||
console.log('status===>', status)
|
|
||||||
showLoad.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const setIsMobile = (val) => {
|
|
||||||
isMobile.value = val
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
navIndex,
|
navIndex,
|
||||||
showLoad,
|
|
||||||
isMobile,
|
|
||||||
changeNavIndex,
|
changeNavIndex,
|
||||||
setLoad,
|
|
||||||
setIsMobile,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
persist: {
|
persist: true,
|
||||||
storage: sessionStorage,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
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()
|
|
||||||
}
|
|
||||||
@ -4,7 +4,10 @@
|
|||||||
* @returns {number} 自适应后的尺寸
|
* @returns {number} 自适应后的尺寸
|
||||||
*/
|
*/
|
||||||
export function fontSize(res) {
|
export function fontSize(res) {
|
||||||
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
let 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
|
||||||
@ -31,45 +34,3 @@ 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
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,39 +1,27 @@
|
|||||||
// rem等比适配配置
|
// rem等比适配配置
|
||||||
// 基准大小
|
// 基准大小
|
||||||
const baseSize = 16
|
const baseSize = 16
|
||||||
// 设计稿宽度（PC端）
|
// 设计稿宽度
|
||||||
const pcDesignWidth = 1920
|
const designWidth = 1920
|
||||||
// 设计稿宽度（移动端）
|
|
||||||
const mobileDesignWidth = 375
|
|
||||||
// 移动端/PC端断点
|
|
||||||
const mobileBreakpoint = 1000
|
|
||||||
// 最大缩放比例
|
// 最大缩放比例
|
||||||
const maxScale = 2
|
const maxScale = 2
|
||||||
|
|
||||||
// 检测是否为移动端
|
|
||||||
export function isMobileDevice() {
|
|
||||||
return window.innerWidth < mobileBreakpoint
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取当前设计稿宽度
|
|
||||||
function getDesignWidth() {
|
|
||||||
return isMobileDevice() ? mobileDesignWidth : pcDesignWidth
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置 rem 函数
|
// 设置 rem 函数
|
||||||
function setRem() {
|
function setRem() {
|
||||||
const designWidth = getDesignWidth()
|
|
||||||
// 当前页面宽度相对于设计稿宽度的缩放比例
|
// 当前页面宽度相对于设计稿宽度的缩放比例
|
||||||
const scale = document.documentElement.clientWidth / designWidth
|
const scale = document.documentElement.clientWidth / designWidth
|
||||||
// 设置页面根节点字体大小（最高放大比例为maxScale）
|
// 设置页面根节点字体大小（最高放大比例为maxScale）
|
||||||
document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
|
document.documentElement.style.fontSize =
|
||||||
|
baseSize * Math.min(scale, maxScale) + 'px'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据设计稿尺寸计算实际尺寸
|
// 根据设计稿尺寸计算实际尺寸
|
||||||
export function fontSize(res) {
|
export function fontSize(res) {
|
||||||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
const clientWidth =
|
||||||
|
window.innerWidth ||
|
||||||
|
document.documentElement.clientWidth ||
|
||||||
|
document.body.clientWidth
|
||||||
if (!clientWidth) return res
|
if (!clientWidth) return res
|
||||||
const designWidth = getDesignWidth()
|
|
||||||
const scale = clientWidth / designWidth
|
const scale = clientWidth / designWidth
|
||||||
return res * Math.min(scale, maxScale)
|
return res * Math.min(scale, maxScale)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,9 @@
|
|||||||
* 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'
|
||||||
@ -19,6 +21,14 @@ 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)
|
||||||
@ -38,22 +48,87 @@ service.interceptors.request.use(
|
|||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
const {data, config} = response
|
const {data, config} = response
|
||||||
|
|
||||||
// 处理二进制数据响应
|
// 处理二进制数据响应
|
||||||
if (config.responseType === 'blob' || config.responseType === 'arraybuffer') {
|
if (
|
||||||
|
config.responseType === 'blob' ||
|
||||||
|
config.responseType === 'arraybuffer'
|
||||||
|
) {
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 正常响应处理
|
// 正常响应处理
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 异常响应处理
|
// 异常响应处理
|
||||||
return Promise.reject(response)
|
return Promise.reject(response)
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
const {config, response, message} = error
|
const {config, response, message} = error
|
||||||
|
|
||||||
console.error('Response error:', {config, response, message})
|
console.error('Response error:', {config, response, message})
|
||||||
|
|
||||||
|
// 处理认证错误
|
||||||
|
if (response && [401, 471, 472].includes(response.status)) {
|
||||||
|
handleAuthError(config, response)
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理网络错误
|
||||||
|
handleNetworkError(message)
|
||||||
|
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理认证错误
|
||||||
|
*/
|
||||||
|
function handleAuthError(config, response) {
|
||||||
|
const excludeUrls = ['/Token/Logout', '/Token/Access']
|
||||||
|
|
||||||
|
if (!excludeUrls.includes(config.url)) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'登录状态已过期，您可以继续留在该页面，或者重新登录',
|
||||||
|
'系统提示',
|
||||||
|
{
|
||||||
|
confirmButtonText: '重新登录',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
removeToken()
|
||||||
|
removeUserTenantInfo()
|
||||||
|
// 这里需要导入store
|
||||||
|
// store.dispatch('LogOut').then(() => {});
|
||||||
|
window.location.reload() // 简单重载页面
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// 用户取消操作
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理网络错误
|
||||||
|
*/
|
||||||
|
function handleNetworkError(message) {
|
||||||
|
let errorMsg = message
|
||||||
|
|
||||||
|
if (message === 'Network Error') {
|
||||||
|
errorMsg = '网络连接异常，请检查网络设置'
|
||||||
|
} else if (message.includes('timeout')) {
|
||||||
|
errorMsg = '请求超时，请稍后重试'
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage({
|
||||||
|
message: errorMsg,
|
||||||
|
type: 'error',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export default service
|
export default service
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted, getCurrentInstance} from 'vue'
|
import {ref, onMounted, getCurrentInstance} from 'vue'
|
||||||
import Swiper from '@/components/Swiper/pc/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
|
|
||||||
const instance = getCurrentInstance()
|
const instance = getCurrentInstance()
|
||||||
@ -29,19 +29,37 @@ const imgList = [
|
|||||||
id: 2,
|
id: 2,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: ['main/5.png', 'main/6.png', 'main/7.png', 'main/8.png', 'main/9.png'],
|
list: [
|
||||||
|
'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: ['main/10.png', 'main/11.png', 'main/12.png', 'main/13.png', 'main/14.png'],
|
list: [
|
||||||
|
'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: ['main/15.png', 'main/16.png', 'main/17.png', 'main/18.png', 'main/19.png'],
|
list: [
|
||||||
|
'main/15.png',
|
||||||
|
'main/16.png',
|
||||||
|
'main/17.png',
|
||||||
|
'main/18.png',
|
||||||
|
'main/19.png',
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
@ -117,13 +135,9 @@ 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: 40%;
|
width: 532px;
|
||||||
padding-right: 25px;
|
padding-right: 25px;
|
||||||
font-family: 'PingFang SC';
|
font-family: 'PingFang SC';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
96
src/views/download/index.vue
Normal file
96
src/views/download/index.vue
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref, onMounted} from 'vue'
|
||||||
|
import Swiper from '@/components/swiper/index.vue'
|
||||||
|
|
||||||
|
const currentPage = ref(1)
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
const list = ref([
|
||||||
|
{id: 1, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
||||||
|
{id: 2, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
||||||
|
{id: 3, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
||||||
|
{id: 4, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
||||||
|
{id: 5, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
||||||
|
{id: 6, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
||||||
|
])
|
||||||
|
|
||||||
|
const downloadFile = (id) => {
|
||||||
|
console.log('id===>', id)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<div class="placeholder"></div>
|
||||||
|
<Swiper
|
||||||
|
id="download"
|
||||||
|
title="软件下载"
|
||||||
|
v-model="currentPage"
|
||||||
|
:sourceWidth="1600"
|
||||||
|
:sourceHeight="800"
|
||||||
|
:show-pagination="false"
|
||||||
|
:auto-play="false"
|
||||||
|
:showHover="false"
|
||||||
|
>
|
||||||
|
<template #default>
|
||||||
|
<div class="my-card flex j-s wrap">
|
||||||
|
<div class="card flex j-s" v-for="item in list" :key="item.id">
|
||||||
|
<div class="img">
|
||||||
|
<img :src="`./static/main/${item.imgUrl}`" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="label">{{ item.label }}</div>
|
||||||
|
<div class="sub-label">{{ item.subLabel }}</div>
|
||||||
|
<div class="download" @click="downloadFile(item.id)">
|
||||||
|
点击下载
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.my-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.card {
|
||||||
|
width: 48%;
|
||||||
|
height: 170px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.img {
|
||||||
|
width: 550px;
|
||||||
|
height: 100%;
|
||||||
|
background: #d9d9d9;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: left;
|
||||||
|
.label {
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 26px;
|
||||||
|
color: $black;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.sub-label {
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.download {
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #0389ff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
78
src/views/homepage/index.vue
Normal file
78
src/views/homepage/index.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<script setup>
|
||||||
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
|
|
||||||
|
import {ref, onMounted} from 'vue'
|
||||||
|
const currentPage = ref(1)
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<div class="banner">
|
||||||
|
<div class="banner-link"><span>进入演示系统</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper">
|
||||||
|
<Swiper
|
||||||
|
id="home_swiper"
|
||||||
|
title="产品体系"
|
||||||
|
v-model="currentPage"
|
||||||
|
:data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
||||||
|
:page-size="4"
|
||||||
|
:show-pagination="true"
|
||||||
|
:auto-play="true"
|
||||||
|
>
|
||||||
|
<template #default="{item, index, isActive}">
|
||||||
|
<div class="my-card" :class="{active: isActive}">
|
||||||
|
<h2>{{ item }}</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page {
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
|
position: relative;
|
||||||
|
background-image: url('/static/images/main/banner.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
&-link {
|
||||||
|
width: 174px;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 721px;
|
||||||
|
left: 873px;
|
||||||
|
border: 1px solid #1fe1ff;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
|
.my-card {
|
||||||
|
background: #d9d9d9;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,321 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted, watch} from 'vue'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
import {useNavStore} from '@/store/nav'
|
|
||||||
import {storeToRefs} from 'pinia'
|
|
||||||
import {Menu, ArrowDown, ArrowRight} from '@element-plus/icons-vue'
|
|
||||||
|
|
||||||
const navStore = useNavStore()
|
|
||||||
const {navIndex} = storeToRefs(navStore)
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const sidebarVisible = ref(false)
|
|
||||||
const navList = ref([])
|
|
||||||
const activeIndex = ref('/')
|
|
||||||
const expandedSubMenus = ref([])
|
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
|
||||||
sidebarVisible.value = !sidebarVisible.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeSidebar = () => {
|
|
||||||
sidebarVisible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleSubMenu = (navId) => {
|
|
||||||
const idx = expandedSubMenus.value.indexOf(navId)
|
|
||||||
if (idx > -1) {
|
|
||||||
expandedSubMenus.value.splice(idx, 1)
|
|
||||||
} else {
|
|
||||||
expandedSubMenus.value.push(navId)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getTargetUrl = (nav) => {
|
|
||||||
return nav.mobileUrl || nav.url
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleNavClick = (nav) => {
|
|
||||||
if (nav.hasChildren || nav.children?.length > 0) {
|
|
||||||
toggleSubMenu(nav.id)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (nav.open) {
|
|
||||||
window.open(nav.url)
|
|
||||||
sidebarVisible.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const targetUrl = getTargetUrl(nav)
|
|
||||||
navStore.changeNavIndex(targetUrl)
|
|
||||||
activeIndex.value = targetUrl
|
|
||||||
router.push(targetUrl)
|
|
||||||
sidebarVisible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
navIndex,
|
|
||||||
(newVal) => {
|
|
||||||
activeIndex.value = newVal
|
|
||||||
},
|
|
||||||
{immediate: true}
|
|
||||||
)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
navList.value = window.nav?.header || []
|
|
||||||
})
|
|
||||||
|
|
||||||
const toMIIF = () => {
|
|
||||||
window.open('https://beian.miit.gov.cn')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="mobile-layout">
|
|
||||||
<!-- ==================== 顶部 Header ==================== -->
|
|
||||||
<div class="mobile-header">
|
|
||||||
<el-icon class="header-menu-icon" :size="22" @click="toggleSidebar">
|
|
||||||
<Menu />
|
|
||||||
</el-icon>
|
|
||||||
<div class="header-logo" @click="router.push('/')"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ==================== 侧边栏 ==================== -->
|
|
||||||
<transition name="sidebar-slide">
|
|
||||||
<div v-show="sidebarVisible" class="sidebar">
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<template v-for="nav in navList" :key="nav.id">
|
|
||||||
<!-- 有子菜单 -->
|
|
||||||
<div v-if="nav.hasChildren || nav.children?.length > 0" class="nav-group">
|
|
||||||
<div
|
|
||||||
class="nav-item nav-item--parent"
|
|
||||||
:class="{'nav-item--expanded': expandedSubMenus.includes(nav.id)}"
|
|
||||||
@click="handleNavClick(nav)"
|
|
||||||
>
|
|
||||||
<span class="nav-label">{{ nav.label }}</span>
|
|
||||||
<el-icon class="nav-arrow" :size="12">
|
|
||||||
<ArrowDown v-if="expandedSubMenus.includes(nav.id)" />
|
|
||||||
<ArrowRight v-else />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
<div v-show="expandedSubMenus.includes(nav.id)" class="nav-sub">
|
|
||||||
<div
|
|
||||||
v-for="child in nav.children"
|
|
||||||
:key="child.id"
|
|
||||||
class="nav-item nav-item--child"
|
|
||||||
:class="{'nav-item--active': activeIndex === getTargetUrl(child)}"
|
|
||||||
@click="handleNavClick(child)"
|
|
||||||
>
|
|
||||||
{{ child.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 无子菜单 -->
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="nav-item"
|
|
||||||
:class="{'nav-item--active': activeIndex === getTargetUrl(nav)}"
|
|
||||||
@click="handleNavClick(nav)"
|
|
||||||
>
|
|
||||||
<span class="nav-label">{{ nav.label }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<!-- ==================== Content 内容区域 ==================== -->
|
|
||||||
<div class="mobile-content">
|
|
||||||
<router-view v-slot="{Component}">
|
|
||||||
<keep-alive include="New">
|
|
||||||
<component :is="Component" />
|
|
||||||
</keep-alive>
|
|
||||||
</router-view>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ==================== Footer 底部 ==================== -->
|
|
||||||
<div class="mobile-footer">
|
|
||||||
<div class="footer-info">
|
|
||||||
<span>Copyright © 2023.Rangu Technology Co.,Ltd.</span>
|
|
||||||
<span>燃谷科技（南京）有限公司</span>
|
|
||||||
</div>
|
|
||||||
<div class="footer-beian" @click="toMIIF">苏ICP备2023030548号-1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
// ==================== 布局容器 ====================
|
|
||||||
.mobile-layout {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: white;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== Header ====================
|
|
||||||
.mobile-header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%; /* no */
|
|
||||||
max-width: 100vw;
|
|
||||||
height: 44px; /* no */
|
|
||||||
background-color: $bg_color;
|
|
||||||
z-index: 110;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 10px; /* no */
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.header-menu-icon {
|
|
||||||
color: $white;
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-logo {
|
|
||||||
background-image: url('/static/images/header/logo.png');
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
width: 100px;
|
|
||||||
height: 32px; /* no */
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 侧边栏遮罩层 ====================
|
|
||||||
.sidebar-mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mask-fade-enter-active,
|
|
||||||
.mask-fade-leave-active {
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.mask-fade-enter-from,
|
|
||||||
.mask-fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 侧边栏（浮动层） ====================
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 160px; /* no */
|
|
||||||
height: 100%;
|
|
||||||
background-color: $bg_color;
|
|
||||||
z-index: 105;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-top: 56px; /* no */
|
|
||||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); /* no */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-slide-enter-active,
|
|
||||||
.sidebar-slide-leave-active {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
.sidebar-slide-enter-from,
|
|
||||||
.sidebar-slide-leave-to {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* no */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 14px 16px; /* no */
|
|
||||||
cursor: pointer;
|
|
||||||
color: #999999;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--parent {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--expanded {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--child {
|
|
||||||
padding-left: 32px; /* no */
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-label {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow {
|
|
||||||
color: #999999;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-sub {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== Content 内容区域 ====================
|
|
||||||
.mobile-content {
|
|
||||||
margin-top: 44px; /* no */
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100vw;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== Footer 底部 ====================
|
|
||||||
.mobile-footer {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100vw;
|
|
||||||
padding: 20px 16px; /* no */
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
background-color: $bg_color;
|
|
||||||
|
|
||||||
.footer-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
color: #999999;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-beian {
|
|
||||||
color: #0056b3;
|
|
||||||
font-size: 11px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -5,14 +5,10 @@ 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>
|
||||||
</div>
|
<img class="QR-img item" :src="`./static/images/footer/mark.png`" alt="" />
|
||||||
<div class="QR-dev">
|
<div class="label">熊雨翔</div>
|
||||||
<img class="QR-img" :src="`./static/images/footer/mark.png`" alt="" />
|
|
||||||
<div class="label">市场联系人</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -20,13 +16,7 @@ onMounted(() => {})
|
|||||||
.QR-code {
|
.QR-code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
background-color: $white;
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
.QR-dev {
|
|
||||||
width: 150px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.QR-img {
|
.QR-img {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
@ -36,5 +26,8 @@ onMounted(() => {})
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
.item {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -7,26 +7,24 @@ const navStore = useNavStore()
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const footerNav = ref([])
|
const footerNav = ref([])
|
||||||
|
|
||||||
const emit = defineEmits(['downloadClick'])
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
footerNav.value = window.nav.footer
|
footerNav.value = window.nav.footer
|
||||||
})
|
})
|
||||||
|
|
||||||
const navClick = (node) => {
|
const navClick = (url) => {
|
||||||
if (node.downloadType) {
|
navStore.changeNavIndex(url)
|
||||||
emit('downloadClick', node.downloadType)
|
router.push(url)
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!node.url) return
|
|
||||||
navStore.changeNavIndex(node.url)
|
|
||||||
router.push(node.url)
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="footer-nav flex j-s">
|
<ul class="footer-nav flex j-s">
|
||||||
<NavNode v-for="node in footerNav" :key="node.id" :node="node" @nav-click="navClick" />
|
<NavNode
|
||||||
|
v-for="node in footerNav"
|
||||||
|
:key="node.id"
|
||||||
|
:node="node"
|
||||||
|
@nav-click="navClick"
|
||||||
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -8,12 +8,12 @@ defineProps({
|
|||||||
|
|
||||||
const emits = defineEmits(['navClick'])
|
const emits = defineEmits(['navClick'])
|
||||||
|
|
||||||
const onClick = (node) => emits('navClick', node)
|
const onClick = (url) => emits('navClick', url)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<li class="footer-nav__item">
|
<li class="footer-nav__item">
|
||||||
<div class="item-label" @click="onClick(node)">
|
<div class="item-label" @click="onClick(node.url)">
|
||||||
{{ node.label }}
|
{{ node.label }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -3,21 +3,6 @@ import {ref, onMounted} from 'vue'
|
|||||||
import Logo from './components/logo.vue'
|
import Logo from './components/logo.vue'
|
||||||
import Nav from './components/nav.vue'
|
import Nav from './components/nav.vue'
|
||||||
import QRCode from './components/QRCode.vue'
|
import QRCode from './components/QRCode.vue'
|
||||||
import DownloadImg from '@/components/downloadImg/index.vue'
|
|
||||||
import {ElMessage} from 'element-plus'
|
|
||||||
|
|
||||||
const imgType = ref('ios')
|
|
||||||
const showImgType = ref(false)
|
|
||||||
|
|
||||||
const handleDownloadClick = (type) => {
|
|
||||||
if (type === 'pc') {
|
|
||||||
ElMessage.warning('敬请期待！')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
imgType.value = type
|
|
||||||
showImgType.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|
||||||
const toMIIF = () => {
|
const toMIIF = () => {
|
||||||
@ -31,7 +16,7 @@ const toMIIF = () => {
|
|||||||
<Logo id="logo" />
|
<Logo id="logo" />
|
||||||
|
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<Nav id="nav" @download-click="handleDownloadClick" />
|
<Nav id="nav" />
|
||||||
|
|
||||||
<!-- 二维码 -->
|
<!-- 二维码 -->
|
||||||
<QRCode id="QR" />
|
<QRCode id="QR" />
|
||||||
@ -41,11 +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号-1</span>
|
<span class="url" @click="toMIIF">苏ICP备2023030548号</span>
|
||||||
<span class="url" @click="toMIIF">苏ICP备2023030548号-5</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DownloadImg :type="imgType" v-model="showImgType" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -63,7 +45,7 @@ const toMIIF = () => {
|
|||||||
left: 190px;
|
left: 190px;
|
||||||
}
|
}
|
||||||
#nav {
|
#nav {
|
||||||
width: calc(100% - 410px - 550px);
|
width: calc(100% - 410px - 380px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 410px;
|
left: 410px;
|
||||||
top: $top;
|
top: $top;
|
||||||
@ -71,7 +53,7 @@ const toMIIF = () => {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
#QR {
|
#QR {
|
||||||
width: 320px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $top;
|
top: $top;
|
||||||
|
|||||||
@ -1,12 +1,26 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
import Nav from './nav.vue'
|
import Nav from './nav.vue'
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
|
import {useNavStore} from '@/store/nav'
|
||||||
|
import {storeToRefs} from 'pinia'
|
||||||
|
|
||||||
|
// Store 相关
|
||||||
|
const navStore = useNavStore()
|
||||||
|
const {navIndex} = storeToRefs(navStore)
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const toIndex = () => {
|
||||||
|
navIndex.value = '/'
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page flex a-c">
|
<div class="page flex a-c">
|
||||||
<div class="logo"></div>
|
<div class="logo" @click="toIndex"></div>
|
||||||
<Nav class="nav"></Nav>
|
<Nav class="nav"></Nav>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -22,6 +36,7 @@ onMounted(() => {})
|
|||||||
height: 56px;
|
height: 56px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
|||||||
@ -1,39 +1,19 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted, watch, onUnmounted} from 'vue'
|
import {ref, onMounted, watch, onUnmounted} from 'vue'
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
import {useNavStore} from '@/store/nav'
|
import {useNavStore} from '@/store/nav'
|
||||||
import {storeToRefs} from 'pinia'
|
import {storeToRefs} from 'pinia'
|
||||||
|
|
||||||
// Store 相关
|
// Store 相关
|
||||||
const navStore = useNavStore()
|
const navStore = useNavStore()
|
||||||
const {navIndex} = storeToRefs(navStore)
|
const {navIndex} = storeToRefs(navStore)
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const navList = ref([])
|
const navList = ref([])
|
||||||
const activeIndex = ref('/')
|
const activeIndex = ref(null)
|
||||||
|
|
||||||
// 根据 url 查找导航项（含子级）
|
|
||||||
const findNavItem = (url) => {
|
|
||||||
for (const nav of navList.value) {
|
|
||||||
if (nav.url === url && !nav.hasChildren) return nav
|
|
||||||
if (nav.children) {
|
|
||||||
const child = nav.children.find((c) => c.url === url)
|
|
||||||
if (child) return child
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理导航选择
|
// 处理导航选择
|
||||||
const handleSelect = (key) => {
|
const handleSelect = (key) => {
|
||||||
const navItem = findNavItem(key)
|
|
||||||
if (navItem?.open) {
|
|
||||||
window.open(navItem.url)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
navStore.changeNavIndex(key)
|
navStore.changeNavIndex(key)
|
||||||
router.push(key)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听 store 中的 navIndex 变化
|
// 监听 store 中的 navIndex 变化
|
||||||
@ -67,20 +47,33 @@ onUnmounted(() => {
|
|||||||
active-text-color="#FFFFFF"
|
active-text-color="#FFFFFF"
|
||||||
text-color="#999999"
|
text-color="#999999"
|
||||||
background-color="$bg_color"
|
background-color="$bg_color"
|
||||||
|
router
|
||||||
>
|
>
|
||||||
<template v-for="nav in navList" :key="nav.id">
|
<template v-for="nav in navList" :key="nav.id">
|
||||||
<!-- 有子菜单的情况 -->
|
<!-- 有子菜单的情况 -->
|
||||||
<el-sub-menu v-if="nav.hasChildren || nav?.children?.length > 0" :index="nav.url" popper-class="pepper">
|
<el-sub-menu
|
||||||
|
v-if="nav.hasChildren || nav?.children?.length > 0"
|
||||||
|
:index="nav.url"
|
||||||
|
popper-class="pepper"
|
||||||
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span>{{ nav.label }}</span>
|
<span>{{ nav.label }}</span>
|
||||||
</template>
|
</template>
|
||||||
<el-menu-item v-for="child in nav.children" :key="child.id" :index="child.url">
|
<el-menu-item
|
||||||
|
v-for="child in nav.children"
|
||||||
|
:key="child.id"
|
||||||
|
:index="child.url"
|
||||||
|
>
|
||||||
{{ child.label }}
|
{{ child.label }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
|
|
||||||
<!-- 无子菜单的情况 -->
|
<!-- 无子菜单的情况 -->
|
||||||
<el-menu-item v-else :index="nav.url" :class="{'is-active': activeIndex === nav.url}">
|
<el-menu-item
|
||||||
|
v-else
|
||||||
|
:index="nav.url"
|
||||||
|
:class="{'is-active': activeIndex === nav.url}"
|
||||||
|
>
|
||||||
{{ nav.label }}
|
{{ nav.label }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,15 +1,13 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
import Swiper from '@/components/Swiper/pc/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
// import Map from './map.vue'
|
// import Map from './map.vue'
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
|
||||||
const toCompany = () => {
|
const toCompany = () => {
|
||||||
window.open(
|
window.open(window.GD_url)
|
||||||
'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'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
@ -34,7 +32,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">地址：江苏省南京市鼓楼区万谷硅巷5F</div>
|
<div class="label">地址：江苏省南京市鼓楼区万谷硅巷9F</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>
|
||||||
@ -1,12 +1,6 @@
|
|||||||
<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]
|
||||||
@ -1,433 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted, getCurrentInstance} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/mobile/index.vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
|
|
||||||
const instance = getCurrentInstance()
|
|
||||||
const $fontSize = instance.appContext.config.globalProperties.$fontSize
|
|
||||||
|
|
||||||
const introduction = '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。'
|
|
||||||
|
|
||||||
const currentPage = ref(1)
|
|
||||||
|
|
||||||
const imgList = [
|
|
||||||
{id: 1, width: 140, height: 90, list: ['main/1.png','main/2.png','main/3.png','main/4.png']},
|
|
||||||
{id: 2, width: 100, height: 145, list: ['main/5.png','main/6.png','main/7.png','main/8.png','main/9.png']},
|
|
||||||
{id: 3, width: 100, height: 145, list: ['main/10.png','main/11.png','main/12.png','main/13.png','main/14.png']},
|
|
||||||
{id: 4, width: 100, height: 145, list: ['main/15.png','main/16.png','main/17.png','main/18.png','main/19.png']},
|
|
||||||
{id: 5, width: 100, height: 145, list: ['main/20.png','main/21.png']},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<Banner class="banner" img="banner/about.png" />
|
|
||||||
|
|
||||||
<!-- 关于燃谷 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">关于燃谷</h2>
|
|
||||||
<div class="about-box">
|
|
||||||
<img class="about-img" src="/static/images/main/rangu.png" />
|
|
||||||
<p class="about-text">{{ introduction }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 资质证书 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">资质证书</h2>
|
|
||||||
<div class="cert-grid">
|
|
||||||
<div v-for="listItem in imgList" :key="listItem.id" class="cert-row" :class="{'cert-row--few': listItem.list.length <= 4}">
|
|
||||||
<div v-for="(img, idx) in listItem.list" :key="idx">
|
|
||||||
<img
|
|
||||||
:style="{width: $fontSize(listItem.width) + 'px', height: $fontSize(listItem.height) + 'px', margin: '3px'}"
|
|
||||||
:src="`./static/images/${img}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page { width: 100%; }
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 0 12px;
|
|
||||||
.section-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin: 20px 0 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
.about-img { width: 80%; height: auto; }
|
|
||||||
.about-text { font-size: 14px; line-height: 28px; color: #333; text-align: left; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.cert-grid {
|
|
||||||
.cert-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.cert-row--few {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,158 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/mobile/index.vue'
|
|
||||||
import {downloadFile, downloadList} from '@/api'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
import DownloadImg from '@/components/downloadImg/index.vue'
|
|
||||||
import {ElMessage} from 'element-plus'
|
|
||||||
|
|
||||||
const currentAppPage = ref(1)
|
|
||||||
const currentFilePage = ref(1)
|
|
||||||
const list = ref(null)
|
|
||||||
const imgType = ref('ios')
|
|
||||||
const showImgType = ref(false)
|
|
||||||
|
|
||||||
onMounted(() => getList())
|
|
||||||
|
|
||||||
const transform = (items) => {
|
|
||||||
const root = {children: []}
|
|
||||||
const getOrCreateFolder = (parent, name, fullPath) => {
|
|
||||||
let folder = parent.children.find((child) => child.name === name && child.type === 'folder')
|
|
||||||
if (!folder) {
|
|
||||||
folder = {name, type: 'folder', children: [], fullPath}
|
|
||||||
parent.children.push(folder)
|
|
||||||
}
|
|
||||||
return folder
|
|
||||||
}
|
|
||||||
items.forEach((item) => {
|
|
||||||
const parts = item.Key.split('/')
|
|
||||||
if (parts.length === 1) {
|
|
||||||
root.children.push({name: parts[0], type: 'file', etag: item.ETag, size: item.Size, lastModified: item.LastModifiedDateTime, fullPath: item.Key})
|
|
||||||
} else {
|
|
||||||
let currentParent = root, currentPath = ''
|
|
||||||
for (let i = 0; i < parts.length - 1; i++) {
|
|
||||||
currentPath += (currentPath ? '/' : '') + parts[i]
|
|
||||||
currentParent = getOrCreateFolder(currentParent, parts[i], currentPath + '/')
|
|
||||||
}
|
|
||||||
currentParent.children.push({name: parts[parts.length - 1], type: 'file', etag: item.ETag, size: item.Size, lastModified: item.LastModifiedDateTime, fullPath: item.Key})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return root.children
|
|
||||||
}
|
|
||||||
|
|
||||||
const treeProps = {children: 'children', label: 'name'}
|
|
||||||
|
|
||||||
const formatSize = (bytes) => {
|
|
||||||
if (!bytes) return ''
|
|
||||||
const units = ['B', 'KB', 'MB', 'GB']
|
|
||||||
let i = 0, size = bytes
|
|
||||||
while (size >= 1024 && i < units.length - 1) { size /= 1024; i++ }
|
|
||||||
return size.toFixed(2) + ' ' + units[i]
|
|
||||||
}
|
|
||||||
|
|
||||||
const getList = () => {
|
|
||||||
downloadList({recursive: true, version: true, prefix: '', bucket: ''})
|
|
||||||
.then((res) => { if (res.code == 0 && res?.data?.length > 0) list.value = transform(res.data) })
|
|
||||||
.catch(() => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
const downloadFileFN = (data) => {
|
|
||||||
downloadFile({bucket: '', objname: data.fullPath, expiresMinutes: 60, isDownload: true})
|
|
||||||
.then((res) => { if (res.code === 0 && res.data) window.open(res.data) })
|
|
||||||
.catch(() => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
const showMsg = () => ElMessage.warning('敬请期待！')
|
|
||||||
const openImg = (type) => { imgType.value = type; showImgType.value = true }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<Banner class="banner" img="banner/download.png" />
|
|
||||||
|
|
||||||
<!-- App 下载区 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">资源下载</h2>
|
|
||||||
<div class="app-row">
|
|
||||||
<div class="app-card" @click="openImg('ios')">
|
|
||||||
<img src="/static/images/download/ios.png" />
|
|
||||||
</div>
|
|
||||||
<div class="app-card" @click="openImg('android')">
|
|
||||||
<img src="/static/images/download/android.png" />
|
|
||||||
</div>
|
|
||||||
<div class="app-card" @click="showMsg">
|
|
||||||
<img src="/static/images/download/windows.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 文件下载区 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">文件下载</h2>
|
|
||||||
<div class="file-list">
|
|
||||||
<el-tree v-if="list && list.length" :data="list" :props="treeProps" accordion node-key="name" default-expand-all>
|
|
||||||
<template #default="{data}">
|
|
||||||
<div class="tree-node">
|
|
||||||
<span class="node-label">{{ data.name }}</span>
|
|
||||||
<template v-if="data.type === 'file'">
|
|
||||||
<span class="file-size">{{ formatSize(data.size) }}</span>
|
|
||||||
<svg class="download-icon" @click.stop="downloadFileFN(data)" viewBox="0 0 24 24" fill="none"><path d="M12 3V15M12 15L8 11M12 15L16 11" stroke="#4A90D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 17V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17" stroke="#4A90D9" stroke-width="2" stroke-linecap="round"/></svg>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
<div v-else class="empty-tip">暂无下载资源</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DownloadImg :type="imgType" v-model="showImgType" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page { width: 100%; }
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 0 12px;
|
|
||||||
.section-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin: 20px 0 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
.app-card {
|
|
||||||
width: 100px;
|
|
||||||
height: 120px;
|
|
||||||
img { width: 100%; height: 100%; object-fit: contain; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-list {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 400px;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
padding: 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-y: auto;
|
|
||||||
.empty-tip { text-align: center; color: #999; font-size: 14px; padding: 30px 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-node {
|
|
||||||
display: flex; align-items: center; width: 100%; padding: 4px 0; gap: 6px;
|
|
||||||
.node-label { flex: 1; font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
||||||
.file-size { font-size: 11px; color: #999; white-space: nowrap; min-width: 60px; text-align: right; }
|
|
||||||
.download-icon { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(.el-tree) {
|
|
||||||
background: transparent;
|
|
||||||
.el-tree-node__content { height: auto; padding: 4px 0; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref} from 'vue'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
import Swiper from '@/components/Swiper/mobile/index.vue'
|
|
||||||
import {useHomepage} from '@/views/pc/homepage/composable.js'
|
|
||||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const {currentPage, videoLoaded, list, onVideoLoaded, goToFeatural} = useHomepage()
|
|
||||||
|
|
||||||
const videoRef = ref(null)
|
|
||||||
|
|
||||||
function handleVideoLoaded() {
|
|
||||||
onVideoLoaded()
|
|
||||||
if (videoRef.value) {
|
|
||||||
videoRef.value.play().catch(() => {})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toUrl(item) {
|
|
||||||
router.push({
|
|
||||||
path: '/m/product/detail',
|
|
||||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page" v-loading="videoLoaded">
|
|
||||||
<!-- 视频 Banner -->
|
|
||||||
<div class="banner">
|
|
||||||
<video
|
|
||||||
ref="videoRef"
|
|
||||||
autoplay
|
|
||||||
muted
|
|
||||||
loop
|
|
||||||
playsinline
|
|
||||||
webkit-playsinline
|
|
||||||
preload="auto"
|
|
||||||
disablePictureInPicture
|
|
||||||
controlslist="nodownload nofullscreen noremoteplayback"
|
|
||||||
@loadeddata="handleVideoLoaded"
|
|
||||||
>
|
|
||||||
<source src="/static/video/display.mp4" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
<div class="banner-link" @click="goToFeatural">
|
|
||||||
<span>演示系统</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 产品体系 Swiper -->
|
|
||||||
<Swiper
|
|
||||||
id="home_swiper"
|
|
||||||
title="产品体系"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="list"
|
|
||||||
:page-size="1"
|
|
||||||
:show-pagination="true"
|
|
||||||
:show-hover="false"
|
|
||||||
:source-width="280"
|
|
||||||
:source-height="320"
|
|
||||||
:auto-play="true"
|
|
||||||
>
|
|
||||||
<template #default="{item}">
|
|
||||||
<div class="card-item" @click="toUrl(item)">
|
|
||||||
<div class="card-header">{{ item.title }}</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<img :src="`./static/images/${item.imgUrl}`" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
// ==================== Banner ====================
|
|
||||||
.banner {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
position: relative;
|
|
||||||
background-color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
video {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
// 屏蔽移动端浏览器注入的默认播放控件
|
|
||||||
&::-webkit-media-controls {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
&::-webkit-media-controls-panel {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
&::-webkit-media-controls-play-button {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
&::-webkit-media-controls-start-playback-button {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
&::-webkit-media-controls-timeline {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
&::-webkit-media-controls-current-time-display,
|
|
||||||
&::-webkit-media-controls-time-remaining-display {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
&::-webkit-media-controls-fullscreen-button {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-link {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 16px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
padding: 8px 24px;
|
|
||||||
border: 1px solid #1fe1ff;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $white;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 产品卡片 ====================
|
|
||||||
.card-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
background-color: #0389ff;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 16px;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted} from 'vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
|
|
||||||
const toCompany = () => {
|
|
||||||
window.open('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')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<Banner class="banner" img="banner/link.png" />
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">联系我们</h2>
|
|
||||||
<div class="link-box">
|
|
||||||
<div class="info-list">
|
|
||||||
<div class="info-item name">燃谷科技（南京）有限公司</div>
|
|
||||||
<div class="info-item">电话：13222013393</div>
|
|
||||||
<div class="info-item">邮箱：company@rangutech.com</div>
|
|
||||||
<div class="info-item">地址：江苏省南京市鼓楼区万谷硅巷5F</div>
|
|
||||||
</div>
|
|
||||||
<img class="map-img" src="/static/images/link/map.png" @click="toCompany" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page { width: 100%; }
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 0 12px;
|
|
||||||
.section-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin: 20px 0 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
|
|
||||||
.info-list {
|
|
||||||
.info-item {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 2;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
|
||||||
import {ElMessage} from 'element-plus'
|
|
||||||
import {getNewsDetail} from '@/api/index'
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const detail = route.query
|
|
||||||
const showLoad = ref(true)
|
|
||||||
|
|
||||||
const newsTitle = ref('')
|
|
||||||
const newsTime = ref('')
|
|
||||||
const newsSubTitle = ref('')
|
|
||||||
const newsContent = ref(null)
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
onMounted(() => getDetail())
|
|
||||||
|
|
||||||
const getDetail = () => {
|
|
||||||
getNewsDetail({slug: detail.slug})
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
let {content, snapshot, datetime, title} = res.data
|
|
||||||
newsTitle.value = title
|
|
||||||
newsTime.value = datetime
|
|
||||||
newsSubTitle.value = snapshot
|
|
||||||
newsContent.value = content
|
|
||||||
showLoad.value = false
|
|
||||||
} else {
|
|
||||||
ElMessage.error(res.msg)
|
|
||||||
showLoad.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => { showLoad.value = false })
|
|
||||||
}
|
|
||||||
|
|
||||||
const toBack = () => {
|
|
||||||
router.push('/m/news')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page" v-loading="showLoad">
|
|
||||||
<template v-if="newsTitle">
|
|
||||||
<h2 class="title">{{ newsTitle }}</h2>
|
|
||||||
<p class="time" v-if="newsTime">{{ newsTime }}</p>
|
|
||||||
<div class="article" v-html="newsContent"></div>
|
|
||||||
</template>
|
|
||||||
<div v-else class="no-content">暂无内容</div>
|
|
||||||
<div class="back-btn" @click="toBack">返回</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
margin: 24px 0 16px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.article {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
:deep(img) { max-width: 100%; height: auto; }
|
|
||||||
}
|
|
||||||
.no-content { text-align: center; color: #999; font-size: 16px; padding: 40px 0; }
|
|
||||||
.back-btn {
|
|
||||||
margin: 32px auto 40px;
|
|
||||||
width: 120px;
|
|
||||||
padding: 10px 0;
|
|
||||||
text-align: center;
|
|
||||||
background: #0389ff;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
import {getNews} from '@/api/index'
|
|
||||||
|
|
||||||
const showLoad = ref(true)
|
|
||||||
const newList = ref([])
|
|
||||||
const page = ref({pageNum: 1, pageSize: 10, totalPages: 0})
|
|
||||||
let scrollTop = 0
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
onMounted(() => getNewList())
|
|
||||||
|
|
||||||
async function getNewList() {
|
|
||||||
getNews({status: 'published', page: page.value.pageNum, page_size: page.value.pageSize})
|
|
||||||
.then((res) => { if (res.code === 0) { newList.value = res.data; page.value.totalPages = res.pagination.total_pages } })
|
|
||||||
.catch(() => {})
|
|
||||||
.finally(() => { showLoad.value = false })
|
|
||||||
}
|
|
||||||
|
|
||||||
const toDetail = (item) => {
|
|
||||||
router.push({path: '/m/news/detail', query: {id: item.id, slug: item.slug}})
|
|
||||||
}
|
|
||||||
|
|
||||||
onActivated(async () => {
|
|
||||||
await nextTick()
|
|
||||||
requestAnimationFrame(() => { window.scrollTo({top: scrollTop, behavior: 'instant'}) })
|
|
||||||
})
|
|
||||||
onDeactivated(() => { scrollTop = document.documentElement.scrollTop || document.body.scrollTop })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page" v-loading="showLoad">
|
|
||||||
<Banner class="banner" img="banner/news.png" />
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">新闻中心</h2>
|
|
||||||
<template v-if="newList.length > 0">
|
|
||||||
<div class="news-list">
|
|
||||||
<div class="news-card" v-for="item in newList" :key="item.id" @click="toDetail(item)">
|
|
||||||
<div class="news-img">
|
|
||||||
<img :src="item.cover_image" />
|
|
||||||
</div>
|
|
||||||
<div class="news-body">
|
|
||||||
<div class="news-title">{{ item.title }}</div>
|
|
||||||
<div class="news-time">{{ item?.time }}</div>
|
|
||||||
<div class="news-desc">{{ item.snapshot }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div v-else class="no-content">暂无内容</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page { width: 100%; }
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 0 12px;
|
|
||||||
.section-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin: 20px 0 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-card {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
|
|
||||||
|
|
||||||
.news-img {
|
|
||||||
width: 120px;
|
|
||||||
height: 80px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #eee;
|
|
||||||
img { width: 100%; height: 100%; object-fit: cover; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-body {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
.news-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
||||||
.news-time { font-size: 11px; color: #999; margin-bottom: 4px; }
|
|
||||||
.news-desc { font-size: 12px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-content { text-align: center; color: #999; font-size: 16px; padding: 40px 0; }
|
|
||||||
</style>
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted} from 'vue'
|
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
|
||||||
import {cryptoDecrypt} from '@/utils/cryptojs.js'
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const query = JSON.parse(cryptoDecrypt(route.query.type))
|
|
||||||
const advantages = window.advantages
|
|
||||||
const videoLoaded = ref(false)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
videoLoaded.value = query.type !== 'softwareSystem' ? false : true
|
|
||||||
})
|
|
||||||
|
|
||||||
function onVideoLoaded() {
|
|
||||||
videoLoaded.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function toBack() {
|
|
||||||
if (query.type === 'hardwareSystem') {
|
|
||||||
router.push('/m/product/hardwareSystem')
|
|
||||||
} else if (query.type === 'softwareSystem') {
|
|
||||||
router.push('/m/product/softwareSystem')
|
|
||||||
} else {
|
|
||||||
router.back()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page" v-loading="videoLoaded">
|
|
||||||
<h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
|
|
||||||
|
|
||||||
<!-- ============== 硬件详情 ============== -->
|
|
||||||
<template v-if="query.type === 'hardwareSystem'">
|
|
||||||
<div class="hardware-section">
|
|
||||||
<img class="hardware-img" :src="`./static/images/${query.imgUrl}`" alt="" />
|
|
||||||
<div class="advantage-box">
|
|
||||||
<h4 class="advantage-title">核心优势</h4>
|
|
||||||
<div class="advantage-text" v-html="advantages"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="desc-box" v-html="query.description"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- ============== 软件详情 ============== -->
|
|
||||||
<template v-else>
|
|
||||||
<div class="software-section">
|
|
||||||
<video autoplay muted loop playsinline @loadeddata="onVideoLoaded" v-show="!videoLoaded">
|
|
||||||
<source :src="`./static/video/${query.video}`" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
<div class="desc-box" v-html="query.description"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-grid" v-if="query.card">
|
|
||||||
<div class="card" v-for="item in query.card" :key="item.id">
|
|
||||||
<h4 class="card-title">{{ item.title }}</h4>
|
|
||||||
<p class="card-text">{{ item.content }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="back-btn" @click="toBack">返回</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
margin: 24px 0 16px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== 硬件区域 ==============
|
|
||||||
.hardware-section {
|
|
||||||
.hardware-img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-box {
|
|
||||||
margin-top: 16px;
|
|
||||||
padding: 12px;
|
|
||||||
background: #f5f7fa;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
.advantage-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-text {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== 软件区域 ==============
|
|
||||||
.software-section {
|
|
||||||
video {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== 描述文案 ==============
|
|
||||||
.desc-box {
|
|
||||||
margin-top: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== 功能卡片 ==============
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
background-color: #0389ff;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-text {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 10px;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 4;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== 返回按钮 ==============
|
|
||||||
.back-btn {
|
|
||||||
margin: 32px auto 40px;
|
|
||||||
width: 120px;
|
|
||||||
padding: 10px 0;
|
|
||||||
text-align: center;
|
|
||||||
background: #0389ff;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted, computed} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/mobile/index.vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
import {findLabelByUrl} from '@/utils'
|
|
||||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
|
||||||
import {useNavStore} from '@/store/nav'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
|
|
||||||
const navStore = useNavStore()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const hardwareSystemList = window.hardwareSystemList
|
|
||||||
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
|
||||||
const currentPage = ref(1)
|
|
||||||
|
|
||||||
function titleClick(item) {
|
|
||||||
router.push({
|
|
||||||
path: '/m/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="1"
|
|
||||||
:show-pagination="true"
|
|
||||||
:show-hover="false"
|
|
||||||
:auto-play="false"
|
|
||||||
:source-width="300"
|
|
||||||
:source-height="360"
|
|
||||||
:source-gap="20"
|
|
||||||
>
|
|
||||||
<template #default="{item}">
|
|
||||||
<div class="card-item" @click="titleClick(item)">
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="card-title">{{ item.title }}</div>
|
|
||||||
<div class="card-subtitle">{{ item.subTitle }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<img :src="`./static/images/${item.imgUrl}`" class="card-img" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
background-color: #0389ff;
|
|
||||||
color: #fff;
|
|
||||||
padding: 12px 0;
|
|
||||||
text-align: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-subtitle {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 4px;
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 16px;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
.card-img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, computed} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/mobile/index.vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
import {findLabelByUrl} from '@/utils'
|
|
||||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
|
||||||
import {useNavStore} from '@/store/nav'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
|
|
||||||
const navStore = useNavStore()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const softwareSystemList = window.softwareSystemList
|
|
||||||
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
|
||||||
const currentPage = ref(1)
|
|
||||||
|
|
||||||
function titleClick(item) {
|
|
||||||
router.push({
|
|
||||||
path: '/m/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="softwareSystemList"
|
|
||||||
:page-size="1"
|
|
||||||
:show-pagination="true"
|
|
||||||
:show-hover="false"
|
|
||||||
:auto-play="false"
|
|
||||||
:source-width="300"
|
|
||||||
:source-height="360"
|
|
||||||
:source-gap="20"
|
|
||||||
>
|
|
||||||
<template #default="{item}">
|
|
||||||
<div class="card-item" @click="titleClick(item)">
|
|
||||||
<div class="card-header">{{ item.title }}</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<img :src="`./static/images/${item.imgUrl}`" class="card-img" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
background-color: #0389ff;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 12px 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 16px;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
.card-img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import PcIndex from '@/views/pc/services/index.vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<PcIndex />
|
|
||||||
</template>
|
|
||||||
80
src/views/news/detail.vue
Normal file
80
src/views/news/detail.vue
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<script setup>
|
||||||
|
import {onMounted} from 'vue'
|
||||||
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
|
|
||||||
|
import {newsDetail} from './mock'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const detail = route.query
|
||||||
|
|
||||||
|
detail.artical = newsDetail.find((item) => item.id == route.query.id).article
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
const toBack = () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page flex column a-c">
|
||||||
|
<div class="label">
|
||||||
|
{{ detail.label }}
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
{{ detail.time }}
|
||||||
|
</div>
|
||||||
|
<div class="img">
|
||||||
|
<img :src="`./static/images/${detail.imgUrl}`" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="artical">
|
||||||
|
{{ detail.artical }}
|
||||||
|
</div>
|
||||||
|
<div class="back" @click="toBack">返回</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.label {
|
||||||
|
margin: 64px 0 20px 0;
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28px;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 1200px;
|
||||||
|
height: 600px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.artical {
|
||||||
|
width: 1200px;
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
color: $black;
|
||||||
|
text-indent: 2em;
|
||||||
|
white-space: pre-wrap; /* 保留换行符，同时允许自动折行 */
|
||||||
|
word-break: break-word; /* 长单词截断 */
|
||||||
|
margin-bottom: 300px;
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
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>
|
||||||
@ -1,71 +1,39 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
defineOptions({name: 'New'})
|
defineOptions({name: 'New'})
|
||||||
import {ref, onMounted, nextTick, onActivated, onDeactivated, computed} from 'vue'
|
import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
|
||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
import Swiper from '@/components/Swiper/pc/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 {getNews} from '@/api/index'
|
import {list} from './mock'
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
const showLoad = ref(true)
|
|
||||||
const containerWidth = ref(1700)
|
|
||||||
const containerHeight = computed(() => {
|
|
||||||
if (newList.value.length > 0) {
|
|
||||||
return 350 * newList.value.length
|
|
||||||
} else {
|
|
||||||
return 200
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
const containerWidth = ref(1700)
|
||||||
getNewList()
|
const containerHeight = ref(1400)
|
||||||
})
|
|
||||||
|
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,
|
||||||
slug: item.slug,
|
imgUrl: item.imgUrl,
|
||||||
|
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()
|
||||||
// 再强制等一帧布局
|
// 再强制等一帧布局
|
||||||
@ -74,20 +42,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" v-loading="showLoad">
|
<div class="page">
|
||||||
<Banner class="banner" img="banner/news.png" />
|
<Banner class="banner" img="banner/news.png" />
|
||||||
<Swiper
|
<Swiper
|
||||||
id="one"
|
id="one"
|
||||||
@ -101,27 +69,24 @@ 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 newList"
|
v-for="item in list"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@click="toDetail(item)"
|
@click="toDetail(item)"
|
||||||
>
|
>
|
||||||
<div class="img">
|
<div class="img">
|
||||||
<img :src="item.cover_image" />
|
<img :src="`./static/images/${item.imgUrl}`" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="label">{{ item.title }}</div>
|
<div class="label">{{ item.label }}</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.snapshot }}</div>
|
<div class="text">{{ item.content }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
<div v-else class="no-content">暂无内容</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Swiper>
|
</Swiper>
|
||||||
@ -188,10 +153,5 @@ onBeforeRouteLeave((to) => {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-content {
|
|
||||||
margin-top: 40px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,33 +1,39 @@
|
|||||||
export const list = [
|
export const list = [
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 1,
|
||||||
title: 'Remote ID与无人机防碰撞技术：从长春航展相撞事件看低空安全未来',
|
imgUrl: 'news/1.png',
|
||||||
slug: 'a5caa86d51984028b2b3fca83946e063',
|
label: '低空经济：撬动社会发展的新支点',
|
||||||
cover_image: '/api/download/img/007c3bf8e3414783878bb33282088db3.png',
|
time: '2025年9月4日',
|
||||||
snapshot:
|
subLabel: '',
|
||||||
'2025年9月长春航展上，两架小鹏汇天eVTOL飞行器在编队演练中因间距不足发生接触并起火，虽无人员伤亡，却暴露出低空飞行器在避障能力与空域协同管理上的短板；在此背景下，Remote ID“电子车牌”技术、多源融合的防撞系统以及分层智能监管平台正成为构建低空安全体系的关键支撑，而国家标准GB 42590-2023的实施更标志着我国低空经济正从高速发展迈向安全优先、规范有序的新阶段。',
|
content:
|
||||||
status: 'published',
|
'当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
|
||||||
datetime: '2025-09-30',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: '无人机强制国标实施，低空安全监管迎来新篇章',
|
imgUrl: 'news/2.png',
|
||||||
slug: '4b7573cfbcaa42548fc46fabe060001e',
|
label: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
|
||||||
cover_image: '/api/download/img/b3d9d7e210f440b781686fa0be228d6a.png',
|
time: '2025年8月29日',
|
||||||
snapshot:
|
subLabel: '',
|
||||||
'2025年8月，上海环球金融中心400米高空两架无人机相撞坠落，再次暴露“黑飞”乱象；与此同时，我国首部民用无人机强制性国家标准GB 42590-2023已于2024年6月实施，结合远程识别、飞手定位等技术及各地低空监管平台建设，无人机监管正从被动追责转向主动防控，迈向法规与技术协同守护低空安全的新阶段。',
|
content:
|
||||||
status: 'published',
|
'2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
|
||||||
datetime: '2025-09-01',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 3,
|
||||||
title: '低空监管升级！无人机远程识别技术如何守护我们的隐私与安全',
|
imgUrl: 'news/3.png',
|
||||||
slug: 'bd68b39a096646f189b9b5a2e9efd16c',
|
label: '关于当前低空经济形势发展的现状',
|
||||||
cover_image: '/api/download/img/9dd9f35298e844bda897a9b855bf484b.png',
|
time: '2025年8月29日',
|
||||||
snapshot:
|
subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
|
||||||
'随着低空经济迅猛发展，无人机在物流、巡检、娱乐等领域广泛应用，但“黑飞”、偷拍、空中碰撞等安全与隐私风险也随之凸显。为应对挑战，公安大学低空安全研究中心推出“无人机广域识别解决方案”，依托国家强制标准Remote ID技术，实现对合作无人机的精准识别、定位与动态追踪。该方案结合低成本被动感知设备与配套预警APP，助力构建空天地一体化的三维监管体系。同时，新规强化飞手责任，严惩瞒报与违规行为。未来，全国低空智联网平台将整合审批、监视与避让技术，推动低空治理从“严控”走向“善管”，在保障安全与隐私的同时，释放低空经济更大潜能。',
|
content:
|
||||||
status: 'published',
|
'当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
|
||||||
datetime: '2024-06-06',
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
imgUrl: 'news/4.png',
|
||||||
|
label: '关于当前低空经济形势发展的现状',
|
||||||
|
time: '2025年8月29日',
|
||||||
|
subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
|
||||||
|
content:
|
||||||
|
'当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -1,402 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/pc/index.vue'
|
|
||||||
import {downloadFile, downloadList} from '@/api'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
import DownloadImg from '@/components/downloadImg/index.vue'
|
|
||||||
import {ElMessage} from 'element-plus'
|
|
||||||
|
|
||||||
const currentPage = ref(1)
|
|
||||||
const currentFilePage = ref(1)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
|
|
||||||
const list = ref(null)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将带有 Key（路径）的扁平列表转换为树形结构
|
|
||||||
* @param {Array} items - 原始数据，每个元素包含 Key, ETag, Size, LastModifiedDateTime 等
|
|
||||||
* @returns {Array} 树形数组，每个元素为文件或文件夹节点
|
|
||||||
*/
|
|
||||||
const transform = (items) => {
|
|
||||||
const root = {children: []}
|
|
||||||
const getOrCreateFolder = (parent, name, fullPath) => {
|
|
||||||
let folder = parent.children.find((child) => child.name === name && child.type === 'folder')
|
|
||||||
if (!folder) {
|
|
||||||
folder = {name, type: 'folder', children: [], fullPath}
|
|
||||||
parent.children.push(folder)
|
|
||||||
}
|
|
||||||
return folder
|
|
||||||
}
|
|
||||||
|
|
||||||
items.forEach((item) => {
|
|
||||||
const parts = item.Key.split('/')
|
|
||||||
if (parts.length === 1) {
|
|
||||||
root.children.push({
|
|
||||||
name: parts[0],
|
|
||||||
type: 'file',
|
|
||||||
etag: item.ETag,
|
|
||||||
size: item.Size,
|
|
||||||
lastModified: item.LastModifiedDateTime,
|
|
||||||
fullPath: item.Key,
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
let currentParent = root
|
|
||||||
let currentPath = ''
|
|
||||||
for (let i = 0; i < parts.length - 1; i++) {
|
|
||||||
const folderName = parts[i]
|
|
||||||
currentPath += (currentPath ? '/' : '') + folderName
|
|
||||||
currentParent = getOrCreateFolder(currentParent, folderName, currentPath + '/')
|
|
||||||
}
|
|
||||||
const fileName = parts[parts.length - 1]
|
|
||||||
currentParent.children.push({
|
|
||||||
name: fileName,
|
|
||||||
type: 'file',
|
|
||||||
etag: item.ETag,
|
|
||||||
size: item.Size,
|
|
||||||
lastModified: item.LastModifiedDateTime,
|
|
||||||
fullPath: item.Key,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return root.children
|
|
||||||
}
|
|
||||||
|
|
||||||
// el-tree 的 props 配置
|
|
||||||
const treeProps = {
|
|
||||||
children: 'children',
|
|
||||||
label: 'name',
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 格式化文件大小
|
|
||||||
*/
|
|
||||||
const formatSize = (bytes) => {
|
|
||||||
if (!bytes) return ''
|
|
||||||
const units = ['B', 'KB', 'MB', 'GB']
|
|
||||||
let i = 0
|
|
||||||
let size = bytes
|
|
||||||
while (size >= 1024 && i < units.length - 1) {
|
|
||||||
size /= 1024
|
|
||||||
i++
|
|
||||||
}
|
|
||||||
return size.toFixed(2) + ' ' + units[i]
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取下载的文件列表
|
|
||||||
*/
|
|
||||||
const getList = () => {
|
|
||||||
let params = {
|
|
||||||
recursive: true,
|
|
||||||
version: true,
|
|
||||||
prefix: '',
|
|
||||||
bucket: '',
|
|
||||||
}
|
|
||||||
downloadList(params)
|
|
||||||
.then((res) => {
|
|
||||||
console.log(res)
|
|
||||||
if (res.code == 0 && res?.data?.length > 0) {
|
|
||||||
list.value = transform(res.data)
|
|
||||||
console.log('list.value===>', list.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log('error', error)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 下载文件
|
|
||||||
*/
|
|
||||||
const downloadFileFN = (data) => {
|
|
||||||
console.log('data===>', data)
|
|
||||||
let query = {
|
|
||||||
bucket: '',
|
|
||||||
objname: data.fullPath,
|
|
||||||
expiresMinutes: 60,
|
|
||||||
isDownload: true,
|
|
||||||
}
|
|
||||||
downloadFile(query)
|
|
||||||
.then((res) => {
|
|
||||||
console.log('res===>', res)
|
|
||||||
if (res.code === 0 && res.data) {
|
|
||||||
window.open(res.data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err===>', err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提示用户敬请期待
|
|
||||||
const showMsg = () => {
|
|
||||||
ElMessage.warning('敬请期待！')
|
|
||||||
}
|
|
||||||
|
|
||||||
const imgType = ref('ios')
|
|
||||||
const showImgType = ref(false)
|
|
||||||
|
|
||||||
const openImg = (type) => {
|
|
||||||
imgType.value = type
|
|
||||||
showImgType.value = true
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<Banner class="banner" img="banner/download.png" />
|
|
||||||
<Swiper
|
|
||||||
id="one"
|
|
||||||
title="资源下载"
|
|
||||||
v-model="currentPage"
|
|
||||||
:sourceWidth="1200"
|
|
||||||
:sourceHeight="400"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
:showHover="false"
|
|
||||||
>
|
|
||||||
<template #default>
|
|
||||||
<div class="my-card flex j-s">
|
|
||||||
<div class="img" @click="openImg('ios')">
|
|
||||||
<img src="/static/images/download/ios.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="img" @click="openImg('android')">
|
|
||||||
<img src="/static/images/download/android.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="img" @click="showMsg">
|
|
||||||
<img src="/static/images/download/windows.png" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
|
|
||||||
<Swiper
|
|
||||||
id="file"
|
|
||||||
title="文件下载"
|
|
||||||
v-model="currentFilePage"
|
|
||||||
:sourceWidth="1200"
|
|
||||||
:sourceHeight="400"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
:showHover="false"
|
|
||||||
>
|
|
||||||
<div class="file-list">
|
|
||||||
<el-tree
|
|
||||||
v-if="list && list.length"
|
|
||||||
:data="list"
|
|
||||||
:props="treeProps"
|
|
||||||
accordion
|
|
||||||
node-key="name"
|
|
||||||
default-expand-all
|
|
||||||
>
|
|
||||||
<template #default="{data}">
|
|
||||||
<div class="tree-node">
|
|
||||||
<!-- 文件夹图标 -->
|
|
||||||
<svg
|
|
||||||
v-if="data.type === 'folder'"
|
|
||||||
class="node-icon folder-icon"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M2 6C2 4.89543 2.89543 4 4 4H9.17157C9.70199 4 10.2107 4.21071 10.5858 4.58579L12 6H20C21.1046 6 22 6.89543 22 8V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6Z"
|
|
||||||
fill="#F7C948"
|
|
||||||
stroke="#E5A800"
|
|
||||||
stroke-width="1.2"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<!-- 文件图标 -->
|
|
||||||
<svg
|
|
||||||
v-else
|
|
||||||
class="node-icon file-icon"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M6 2H14.1716C14.702 2 15.2107 2.21071 15.5858 2.58579L19.4142 6.41421C19.7893 6.78929 20 7.29799 20 7.82843V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2Z"
|
|
||||||
fill="#A8C5E0"
|
|
||||||
stroke="#7DA8CC"
|
|
||||||
stroke-width="1.2"
|
|
||||||
/>
|
|
||||||
<path d="M14 2V6C14 7.10457 14.8954 8 16 8H20" stroke="#7DA8CC" stroke-width="1.2" fill="none" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<span class="node-label">{{ data.name }}</span>
|
|
||||||
|
|
||||||
<!-- 文件信息（仅文件类型显示） -->
|
|
||||||
<template v-if="data.type === 'file'">
|
|
||||||
<span class="file-size">{{ formatSize(data.size) }}</span>
|
|
||||||
<span class="file-date">{{ data.lastModified }}</span>
|
|
||||||
<!-- 下载图标 -->
|
|
||||||
<svg
|
|
||||||
class="download-icon"
|
|
||||||
@click.stop="downloadFileFN(data)"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 3V15M12 15L8 11M12 15L16 11"
|
|
||||||
stroke="#4A90D9"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M4 17V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17"
|
|
||||||
stroke="#4A90D9"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
<div v-else class="empty-tip">暂无下载资源</div>
|
|
||||||
</div>
|
|
||||||
</Swiper>
|
|
||||||
|
|
||||||
<DownloadImg :type="imgType" v-model="showImgType" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.my-card {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.img {
|
|
||||||
width: 300px;
|
|
||||||
height: 360px;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
img {
|
|
||||||
padding: 20px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-title {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'PingFang SC';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 120px;
|
|
||||||
height: 6px;
|
|
||||||
background-color: #0389ff;
|
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
top: 20px;
|
|
||||||
translate: -50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-list {
|
|
||||||
width: 1200px;
|
|
||||||
max-height: 500px;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
margin: 0px auto;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-y: auto;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
.empty-tip {
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 40px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* el-tree 节点自定义样式 */
|
|
||||||
.tree-node {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 4px 0;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.node-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-size {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
white-space: nowrap;
|
|
||||||
min-width: 80px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-date {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
white-space: nowrap;
|
|
||||||
min-width: 140px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 覆盖 el-tree 默认样式 */
|
|
||||||
::v-deep(.el-tree) {
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
.el-tree-node__content {
|
|
||||||
height: auto;
|
|
||||||
padding: 6px 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tree-node__expand-icon {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import {ref} from 'vue'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
|
||||||
|
|
||||||
// 首页公用逻辑和数据
|
|
||||||
export function useHomepage() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const swiperWidth = ref(400)
|
|
||||||
const swiperHeight = ref(400)
|
|
||||||
const currentPage = ref(1)
|
|
||||||
const videoLoaded = ref(true)
|
|
||||||
const list = [...window.softwareSystemList, ...window.hardwareSystemList]
|
|
||||||
|
|
||||||
function onVideoLoaded() {
|
|
||||||
videoLoaded.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function toUrl(item) {
|
|
||||||
router.push({
|
|
||||||
path: '/product/detail',
|
|
||||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToFeatural() {
|
|
||||||
window.open(window.config.featureUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
swiperWidth,
|
|
||||||
swiperHeight,
|
|
||||||
currentPage,
|
|
||||||
videoLoaded,
|
|
||||||
list,
|
|
||||||
onVideoLoaded,
|
|
||||||
toUrl,
|
|
||||||
goToFeatural,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Swiper from '@/components/Swiper/pc/index.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 videoLoaded = ref(true)
|
|
||||||
const list = [...window.softwareSystemList, ...window.hardwareSystemList]
|
|
||||||
|
|
||||||
onMounted(() => {})
|
|
||||||
|
|
||||||
function onVideoLoaded() {
|
|
||||||
videoLoaded.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function toUrl(item) {
|
|
||||||
router.push({
|
|
||||||
path: '/product/detail',
|
|
||||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToFeatural() {
|
|
||||||
window.open(window.config.featureUrl)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page" v-loading="videoLoaded">
|
|
||||||
<div class="banner">
|
|
||||||
<video autoplay muted loop @loadeddata="onVideoLoaded">
|
|
||||||
<source src="/static/video/display.mp4" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
<div class="banner-link" @click="goToFeatural"><span>进入演示系统</span></div>
|
|
||||||
</div>
|
|
||||||
<Swiper
|
|
||||||
id="home_swiper"
|
|
||||||
title="产品体系"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="list"
|
|
||||||
:page-size="3"
|
|
||||||
:show-pagination="true"
|
|
||||||
:source-width="swiperWidth"
|
|
||||||
:source-height="swiperHeight"
|
|
||||||
:auto-play="true"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="list" @click="toUrl(item)">
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
.placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.banner {
|
|
||||||
width: 100%;
|
|
||||||
height: 800px;
|
|
||||||
position: relative;
|
|
||||||
background-color: #333333;
|
|
||||||
&-link {
|
|
||||||
width: 174px;
|
|
||||||
height: 48px;
|
|
||||||
line-height: 48px;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 721px;
|
|
||||||
left: 873px;
|
|
||||||
border: 1px solid #1fe1ff;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-family: 'PingFang SC';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
video {
|
|
||||||
padding: 3px;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
|
||||||
|
|
||||||
import {ElMessage} from 'element-plus'
|
|
||||||
import {list as mockList, newsDetail as mockDetail} from './mock.js'
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const detail = route.query
|
|
||||||
const showLoad = ref(true)
|
|
||||||
|
|
||||||
const newsTitle = ref('')
|
|
||||||
const newsTime = ref('')
|
|
||||||
const newsSubTitle = ref('')
|
|
||||||
const newsCoverImg = ref('')
|
|
||||||
const newsContent = ref(null)
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
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 = () => {
|
|
||||||
router.back()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page flex column a-c" v-loading="showLoad">
|
|
||||||
<div v-if="newsTitle">
|
|
||||||
<h3 class="label">
|
|
||||||
{{ newsTitle }}
|
|
||||||
</h3>
|
|
||||||
<h3 class="time" v-if="newsTime">
|
|
||||||
{{ newsTime }}
|
|
||||||
</h3>
|
|
||||||
<div class="artical">
|
|
||||||
<div v-html="newsContent"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="no-content">暂无内容</div>
|
|
||||||
<div class="back" @click="toBack">返回</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
.label {
|
|
||||||
text-align: center;
|
|
||||||
margin: 64px 0 20px 0;
|
|
||||||
font-family: 'PingFang SC';
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28px;
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'PingFang SC';
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.artical {
|
|
||||||
width: 1200px;
|
|
||||||
}
|
|
||||||
.no-content {
|
|
||||||
margin-top: 40px;
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
.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>
|
|
||||||
@ -1,171 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted, computed} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/pc/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>
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Swiper from '@/components/Swiper/pc/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>
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted, computed} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/pc/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>
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
import Swiper from '@/components/Swiper/pc/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
67
src/views/product/monitorSystem.vue
Normal file
67
src/views/product/monitorSystem.vue
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<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>
|
||||||
67
src/views/product/remoteDevice.vue
Normal file
67
src/views/product/remoteDevice.vue
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<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>
|
||||||
Reference in New Issue
Block a user