Compare commits
8 Commits
1
...
b9719c22cd
| Author | SHA1 | Date | |
|---|---|---|---|
| b9719c22cd | |||
| a5d1de0e23 | |||
| 5d93a81ec6 | |||
| e5569b37a1 | |||
| 23ad5d6f6d | |||
| 05da1f7fbb | |||
| 502eaff488 | |||
| 9a01223fc9 |
@ -5,5 +5,6 @@
|
|||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"trailingComma": "es5",
|
"trailingComma": "es5",
|
||||||
"bracketSpacing": false,
|
"bracketSpacing": false,
|
||||||
"htmlWhitespaceSensitivity": "ignore"
|
"htmlWhitespaceSensitivity": "ignore",
|
||||||
|
"printWidth": 120
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,13 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/rangu.svg" />
|
<link rel="icon" type="image/svg+xml" href="/rangu.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>燃谷科技（南京）有限公司</title>
|
<title>燃谷科技（南京）有限公司</title>
|
||||||
<script src="/nav/index.js"></script>
|
<meta name="keywords" content="燃谷,万谷硅巷,低空经济,低空监管,远程识别,RemoteID,RID" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
|
||||||
|
/>
|
||||||
|
<script src="/config/nav.js"></script>
|
||||||
|
<script src="/config/product.js"></script>
|
||||||
<script src="/config.js"></script>
|
<script src="/config.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -9,14 +9,18 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@vueup/vue-quill": "^1.2.0",
|
||||||
"@vueuse/core": "^13.8.0",
|
"@vueuse/core": "^13.8.0",
|
||||||
"axios": "^1.11.0",
|
"axios": "^1.12.2",
|
||||||
|
"crypto-js": "^4.2.0",
|
||||||
"element-plus": "^2.11.1",
|
"element-plus": "^2.11.1",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
"pinia": "^3.0.3",
|
"pinia": "^3.0.3",
|
||||||
"pinia-plugin-persistedstate": "^4.5.0",
|
"pinia-plugin-persistedstate": "^4.5.0",
|
||||||
|
"quill": "^2.0.3",
|
||||||
"terser": "^5.43.1",
|
"terser": "^5.43.1",
|
||||||
|
"v-viewer": "^3.0.11",
|
||||||
"vue": "^3.5.18",
|
"vue": "^3.5.18",
|
||||||
"vue-router": "^4.5.1"
|
"vue-router": "^4.5.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -3,3 +3,7 @@ window.GD_KEYS = [
|
|||||||
'ed2ea36f8564541569c370254845d93d',
|
'ed2ea36f8564541569c370254845d93d',
|
||||||
'c1da03827f956a215311c0f5229bddc3',
|
'c1da03827f956a215311c0f5229bddc3',
|
||||||
]
|
]
|
||||||
|
|
||||||
|
window.config = {
|
||||||
|
baseUrl: 'http://192.168.3.10:9121/',
|
||||||
|
}
|
||||||
|
|||||||
@ -3,25 +3,25 @@ window.nav = {
|
|||||||
{id: 1, label: '首页', url: '/', hasChildren: false},
|
{id: 1, label: '首页', url: '/', hasChildren: false},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
label: '产品中心',
|
label: '解决方案',
|
||||||
url: '/product',
|
url: '/product',
|
||||||
hasChildren: true,
|
hasChildren: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 2.1,
|
id: 2.1,
|
||||||
label: '低空监管体系',
|
label: '空域感知矩阵',
|
||||||
url: '/product/monitorSystem',
|
url: '/product/hardwareSystem',
|
||||||
hasChildren: false,
|
hasChildren: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2.2,
|
id: 2.2,
|
||||||
label: '低空远程识别设备',
|
label: '低空智控中枢',
|
||||||
url: '/product/remoteDevice',
|
url: '/product/softwareSystem',
|
||||||
hasChildren: false,
|
hasChildren: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
|
// {id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
|
||||||
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
||||||
{id: 5, label: '关于我们', url: '/about', hasChildren: false},
|
{id: 5, label: '关于我们', url: '/about', hasChildren: false},
|
||||||
{id: 6, label: '联系我们', url: '/link', hasChildren: false},
|
{id: 6, label: '联系我们', url: '/link', hasChildren: false},
|
||||||
@ -29,28 +29,26 @@ window.nav = {
|
|||||||
footer: [
|
footer: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
label: '产品中心',
|
label: '解决方案',
|
||||||
url: '',
|
url: '',
|
||||||
hasChildren: true,
|
hasChildren: true,
|
||||||
children: [
|
children: [
|
||||||
{id: 1.1, label: '低空监管体系', url: '/product/monitorSystem'},
|
{id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem'},
|
||||||
{id: 1.2, label: '低空远程识别设备', url: '/product/remoteDevice'},
|
{id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem'},
|
||||||
{id: 1.3, label: '智能加载服务', url: '/product'},
|
|
||||||
{id: 1.4, label: '智能加载服务', url: '/product'},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
id: 2,
|
// id: 2,
|
||||||
label: '服务与支撑',
|
// label: '服务与支撑',
|
||||||
url: '/services',
|
// url: '/services',
|
||||||
hasChildren: false,
|
// hasChildren: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 3,
|
// id: 3,
|
||||||
label: '软件下载',
|
// label: '软件下载',
|
||||||
url: '/download',
|
// url: '/download',
|
||||||
hasChildren: false,
|
// hasChildren: false,
|
||||||
},
|
// },
|
||||||
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
177
public/config/product.js
Normal file
177
public/config/product.js
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
window.advantages = `
|
||||||
|
<div>★ 提供业界领先的性价比解决方案。</div>
|
||||||
|
<div>★ 内置4G全网通，无需外接网络，即装即用。</div>
|
||||||
|
<div>★ 宽电压输入，轻松应对电压不稳等复杂情况。</div>
|
||||||
|
<div>★ 超低功耗设计，极大节约长期用电与运维成本。</div>
|
||||||
|
<div>★ 极致轻量，极大拓宽了安装位置与应用场景。</div>
|
||||||
|
<div>★ 灵活可调的侦测模式，满足从安防到巡检的全场景需求。</div>
|
||||||
|
<div>★ 具备升级能力，当前投资可平滑演进至更高专业层级。</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
window.hardwareSystemList = [
|
||||||
|
{
|
||||||
|
id: 'm1',
|
||||||
|
type: 'hardwareSystem',
|
||||||
|
title: 'RGRID-Lite',
|
||||||
|
subTitle: '无人机Remote ID远程识别设备',
|
||||||
|
imgUrl: 'product/detail/m1.png',
|
||||||
|
description: `
|
||||||
|
<div class="hardware">RGRID-Lite 是一款专为国标无人机远程识别设计的地面监测设备。它能够精准获取低空目标区域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并动态显示与记录无人机及飞手的移动轨迹。所有数据实时上传至后台系统，支持长期存储与便捷回溯，为空域监管提供完整的数据支撑。</div>
|
||||||
|
<div class="hardware">设备采用轻量化与一体化设计，部署灵活，可快速适配多种复杂安装环境。凭借超低功耗特性，可搭配UPS不间断电源或太阳能供电系统，实现长时间稳定运行。同时，内置4G全网通模块，无需依赖外部网络，彻底解决供电与传输难题。</div>
|
||||||
|
<div class="hardware">RGRID-Lite 在具备卓越性能的同时，展现出优异的性价比，广泛适用于各类低空监管场景。设备支持功能定制与二次开发，可根据用户需求灵活扩展，是构建低成本、高效率无人机监管体系的理想之选。</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm2',
|
||||||
|
type: 'hardwareSystem',
|
||||||
|
title: 'RGRID-Ped',
|
||||||
|
subTitle: '无人机Remote ID远程识别模块',
|
||||||
|
imgUrl: 'product/detail/m2.png',
|
||||||
|
description: `
|
||||||
|
<div class="hardware">RGRID-Ped 是一款遵循国标GB42590-2023的便携式无人机远程识别模块。它能够精准监测并获取目标空域内无人机的多项关键数据，包括实时位置、飞手位置、唯一SN识别码、飞行型号、航速与高度等，并实时推送至用户平台。</div>
|
||||||
|
<div class="hardware">该模块采用高度集成化设计，体积小巧、功耗极低，具备完善的接口与通信协议，可快速适配并嵌入各类无人机反制、监管或作业设备中，轻松应对有限的内部空间要求。同时，模块支持全方位的二次开发与功能定制，为各类集成应用提供可靠、灵活的低空感知核心。</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm3',
|
||||||
|
type: 'hardwareSystem',
|
||||||
|
title: 'RGRID-Mob',
|
||||||
|
subTitle: '无人机Remote ID远程识别手持设备',
|
||||||
|
imgUrl: 'product/detail/m3.png',
|
||||||
|
description: `
|
||||||
|
<div class="hardware">RGRID-Mob 是一款符合国标 GB42590-2023 的便携式无人机远程识别设备，专为机动巡检与快速部署场景设计。它可精准监测目标空域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并实时显示与记录无人机与飞手的动态轨迹。所有数据同步上传至后台，支持长期存储与灵活调阅，为空域执法与现场处置提供完整信息支撑。</div>
|
||||||
|
<div class="hardware">设备支持多终端协同管理，用户可通过移动端小程序实时查看数据，指挥中心亦能通过大屏系统统览全局。系统具备分级权限管理功能，支持多级账户与设备组网，实现权限分离与协同指挥。手机端集成一键导航功能，可快速定位飞手位置；指挥平台则全面监管辖区内所有设备状态与每架被侦测无人机的详细数据，真正实现“前端机动侦测—后端统一指挥”的一体化管控闭环。</div>
|
||||||
|
<div class="hardware">RGRID-Mob 重量轻、体积小，可随身挂载，便于野外作业与快速机动。内置4G数据传输模块，开机即用，无需复杂配对，极大提升部署效率与操作便捷性，是应对突发低空监管任务的理想移动侦测终端。</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
window.softwareSystemList = [
|
||||||
|
{
|
||||||
|
id: 'r1',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空综合监管及应用服务平台',
|
||||||
|
imgUrl: 'product/detail/r1.jpg',
|
||||||
|
video: 'display.mp4',
|
||||||
|
card: [
|
||||||
|
{id: 1, title: '三维总览', content: '基于数字孪生技术，通过三维和传感器状态数据，实现对真实状态的数字化呈现。'},
|
||||||
|
{id: 2, title: '实时监管', content: '基于人工智能算法，智能识别判定各类预警，实现全面的智能监测与管理。'},
|
||||||
|
{id: 3, title: '传感器监测', content: '对无人机、机场、反无人机设备、ADS-B设备等各类设备的布署和状态全面监控。'},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '综合审批',
|
||||||
|
content: '对各类申请审批数据的汇总与分类统计，全面了解不同来源、类型和条件的申请和审批情况。',
|
||||||
|
},
|
||||||
|
{id: 5, title: '重点目标', content: '对辖区内的关键目标分类统计和位置呈现，以提供全面的目标信息和空间分布视角。'},
|
||||||
|
{id: 6, title: '辖区信息', content: '操作员情况、备案飞行器信息、相关企业等信息不同维度的综合展示。'},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空全域运营中枢，是构建于数字孪生技术之上的低空管理核心平台。它通过精准的三维建模与全域传感器数据融合，将物理空域完整复现为动态的数字世界，实现对无人机、机场、反制设备等所有单元部署与运行状态的全局洞察。</div>
|
||||||
|
<div class="hardware">平台深度融合人工智能算法，具备实时智能监管与预警研判能力，确保对空域异常事件的精准识别与快速响应。同时，系统集成了从空域申请审批、重点目标管理到辖区人员、航空器及企业信息的多维度综合管理功能，在一个平台上完成了从全景感知、智能决策到协同处置的全流程闭环，真正实现了低空运营的“一图总览、一体指挥、一站服务”。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r2',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空综合态势平台',
|
||||||
|
imgUrl: 'product/detail/r2.jpg',
|
||||||
|
video: '2.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '区域化监管',
|
||||||
|
content: '按地理或行政划分区域，通过数据隔离与协同机制，实现灵活的区域自治或跨域联动管控。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '海量设备接入',
|
||||||
|
content: '基于微服务架构设计，支持万级设备高并发接入与弹性扩展，确保稳定性和可靠性。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '多源数据融合',
|
||||||
|
content: '整合传感器、外部系统及各类数据，构建全域动态分析模型，强化低空态势决策支撑。',
|
||||||
|
},
|
||||||
|
{id: 4, title: '私有化部署', content: '支持本地化安全部署，提供定制化方案与云端协同管控能力，保障数据自主可控。'},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'SaaS服务',
|
||||||
|
content: '云端多租户架构，按需弹性扩展，提供低运维成本标准化服务，支持数据共享与任务协同。',
|
||||||
|
},
|
||||||
|
{id: 6, title: '数据接口服务', content: '开放标准化API与多协议接口，打通跨平台数据交互，推动低空生态互联互通。'},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空综合态势平台，是面向全域低空监管与协同运营的新一代数字化基础设施。平台基于微服务架构设计，具备万级设备高并发接入与弹性扩展能力，确保系统在高负载下的稳定可靠运行。通过整合多源传感器数据与外部系统信息，平台构建起全域动态分析模型，实现从感知到决策的智能闭环，显著提升低空态势的洞察力与响应效率。</div>
|
||||||
|
<div class="hardware">在部署方式上，平台全面支持私有化与SaaS化双模式：既可通过本地化部署保障数据安全与自主可控，也支持云端多租户架构，以标准化服务降低运维成本，促进跨组织数据共享与任务协同。同时，平台引入灵活的区域化监管机制，支持按地理或行政单元进行数据隔离与业务协同，实现从区域自治到跨域联动的精准管控。</div>
|
||||||
|
<div class="hardware">为构建开放的低空数字生态，平台提供标准化API与多协议接口，打通跨系统数据壁垒，推动各类设备、系统与服务的互联互通，为低空产业的规模化发展提供坚实的技术底座。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r3',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空管控系统',
|
||||||
|
imgUrl: 'product/detail/r3.jpg',
|
||||||
|
video: '3.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '黑白名单管理',
|
||||||
|
content: '对无人机的多层次监控，如告警、处置或放行，以确保阵地内空域的安全与可控。',
|
||||||
|
},
|
||||||
|
{id: 2, title: '处置策略执行', content: '自动通过采取入侵警告、拦截或干扰等措施，迅速应对检测到的潜在威胁。'},
|
||||||
|
{id: 3, title: '历史预警管理', content: '审查历史安全事件，提供信息导出功能，以支持分析、报告和决策过程。'},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空管控系统是为核心阵地提供精准化、智能化空域防御的指挥中枢。系统支持对多个分散阵地的统一管理，实时监控所有设备状态，并对空域内目标进行持续跟踪与智能告警。</div>
|
||||||
|
<div class="hardware">通过内置的黑白名单管理机制，系统可对无人机进行精准识别与差异化处置。一旦发现潜在威胁，指挥员可快速下发处置指令，或由系统自动执行预设的反制策略——从入侵警告到主动干扰，实现对空域风险的快速响应与有效化解。</div>
|
||||||
|
<div class="hardware">所有预警与处置记录均被完整保存于系统之中，支持历史数据的查询、导出与深度分析，为优化布防策略、复盘处置流程与生成合规报告提供坚实的数据支撑，全面提升阵地空域的持久安全与管控效能。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r4',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空应用系统',
|
||||||
|
imgUrl: 'product/detail/r4.jpg',
|
||||||
|
video: '4.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '设备信息管理',
|
||||||
|
content: '无人机全生命周期管理，无人机设备的合理调度、机库管理，以及飞行人员的信息记录和培训管理。',
|
||||||
|
},
|
||||||
|
{id: 2, title: '任务航线规划', content: '高效规划无人机的飞行路径，确保全面而准确地覆盖目标区域。'},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '任务调度管理',
|
||||||
|
content:
|
||||||
|
'涵盖规划、调度、执行和监控巡检任务全过程。有效规划和优化无人机的飞行计划，设定巡检区域和时间，监测任务进度，实时获取数据。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空应用系统是面向行业无人机作业的一体化智能调度与管理平台。系统提供从设备、人员到任务的全流程数字化管理，实现对无人机设备的合理调配、全生命周期维护，以及对飞行人员的规范信息管理与培训记录。</div>
|
||||||
|
<div class="hardware">在任务执行层面，系统支持高效规划无人机的飞行路径，通过航线粗细采样点的灵活设置，确保对目标区域实现精准覆盖与高效扫描。用户可便捷完成巡检标注，系统自动整合飞行数据与巡检结果，快速生成结构化报告，为作业分析与决策提供可靠依据。</div>
|
||||||
|
<div class="hardware">平台同时提供完整的任务调度管理功能，覆盖从任务规划、计划优化、过程监控到数据回传的全链路，有效提升无人机在巡检、测绘等场景中的自动化水平与作业效率，推动低空应用的集约化与智能化运营。</div>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'r5',
|
||||||
|
type: 'softwareSystem',
|
||||||
|
title: '低空仿真系统',
|
||||||
|
imgUrl: 'product/detail/r5.jpg',
|
||||||
|
video: '5.mp4',
|
||||||
|
card: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '航空器孪生',
|
||||||
|
content:
|
||||||
|
'航空器孪生是指利用数字化技术和仿真模型创建的虚拟飞行器，与实际飞行器实时同步，并能够模拟其行为、性能和运行情况。帮助飞行员和维护人员进行培训、飞行仿真、性能分析和故障诊断，从而提高飞行器的安全性、效率性和可靠性。为飞行员和运营商提供更好的训练和支持，同时降低了飞行试验和维护成本。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '监管传感器孪生',
|
||||||
|
content:
|
||||||
|
'整合低空监管传感器、环境传感器和支撑传感器等各类传感器的智能系统，旨在实现对低空空域的实时监测和管理。通过监测飞行器活动、环境参数和相关数据，并将其与数字化模型实时同步，该系统能够提供全面的低空环境评估、低空空域监管和飞行器安全保障，为低空飞行提供了可靠的技术支持。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
description: `
|
||||||
|
<div class="hardware">低空仿真系统是构建于数字孪生技术之上的专业化模拟推演平台，旨在为低空运行提供高保真、全流程的虚拟仿真环境。</div>
|
||||||
|
<div class="hardware">系统通过构建航空器数字孪生体，实现对真实飞行器的精准映射与行为模拟。虚拟飞行器可与实体设备实时同步，支持飞行仿真、性能分析与故障复现，广泛应用于飞行员训练、维护诊断与运行评估，显著提升飞行安全与运维效率，同时大幅降低实装训练与试验成本。</div>
|
||||||
|
<div class="hardware">同时，系统集成监管传感器孪生网络，对部署于真实环境中的各类监测设备进行数字化建模与数据同步。通过对飞行器活动、环境参数等多源信息的融合分析，系统可实现对低空空域的实时态势复现、运行风险评估与监管策略预演，为低空监管体系的规划部署、效能验证与优化调控提供关键决策支持。</div>`,
|
||||||
|
},
|
||||||
|
]
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 878 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 714 KiB |
BIN
public/static/images/product/1.png
Normal file
BIN
public/static/images/product/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
public/static/images/product/2.png
Normal file
BIN
public/static/images/product/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 529 KiB |
BIN
public/static/images/product/3.png
Normal file
BIN
public/static/images/product/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
public/static/images/product/4.png
Normal file
BIN
public/static/images/product/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
public/static/images/product/5.png
Normal file
BIN
public/static/images/product/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
public/static/images/product/6.png
Normal file
BIN
public/static/images/product/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 436 KiB |
BIN
public/static/images/product/7.png
Normal file
BIN
public/static/images/product/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
public/static/images/product/8.png
Normal file
BIN
public/static/images/product/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
BIN
public/static/images/product/detail/m1.png
Normal file
BIN
public/static/images/product/detail/m1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
public/static/images/product/detail/m2.png
Normal file
BIN
public/static/images/product/detail/m2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
public/static/images/product/detail/m3.png
Normal file
BIN
public/static/images/product/detail/m3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
public/static/images/product/detail/r1.jpg
Normal file
BIN
public/static/images/product/detail/r1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
BIN
public/static/images/product/detail/r2.jpg
Normal file
BIN
public/static/images/product/detail/r2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
BIN
public/static/images/product/detail/r3.jpg
Normal file
BIN
public/static/images/product/detail/r3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
public/static/images/product/detail/r4.jpg
Normal file
BIN
public/static/images/product/detail/r4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
public/static/images/product/detail/r5.jpg
Normal file
BIN
public/static/images/product/detail/r5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
public/static/video/2.mp4
Normal file
BIN
public/static/video/2.mp4
Normal file
Binary file not shown.
BIN
public/static/video/3.mp4
Normal file
BIN
public/static/video/3.mp4
Normal file
Binary file not shown.
BIN
public/static/video/4.mp4
Normal file
BIN
public/static/video/4.mp4
Normal file
Binary file not shown.
BIN
public/static/video/5.mp4
Normal file
BIN
public/static/video/5.mp4
Normal file
Binary file not shown.
BIN
public/static/video/display.mp4
Normal file
BIN
public/static/video/display.mp4
Normal file
Binary file not shown.
BIN
public/static/video/video.zip
Normal file
BIN
public/static/video/video.zip
Normal file
Binary file not shown.
@ -1,19 +0,0 @@
|
|||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 设备设置
|
|
||||||
export function deviceSet(data) {
|
|
||||||
return request({
|
|
||||||
url: '/rangu/rid/setting',
|
|
||||||
method: 'post',
|
|
||||||
data,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设备设置
|
|
||||||
export function deviceGet(params) {
|
|
||||||
return request({
|
|
||||||
url: '/rangu/rid/getting',
|
|
||||||
method: 'get',
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
46
src/api/index.js
Normal file
46
src/api/index.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取访问接口
|
||||||
|
export function visit(data) {
|
||||||
|
return request({
|
||||||
|
url: '/tracking/',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function getNews(params) {
|
||||||
|
return request({
|
||||||
|
url: '/news',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function getNewsDetail(params) {
|
||||||
|
return request({
|
||||||
|
url: '/news/details',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存新闻
|
||||||
|
export function updateNews(data) {
|
||||||
|
return request({
|
||||||
|
url: '/news/B8fpNxunbxj37x3VRcVz',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function saveDetail(data) {
|
||||||
|
return request({
|
||||||
|
url: '/news/VbxWW8EdJQGyWzJyvSrN',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -8,5 +8,7 @@ $nav_font_size: 18px;
|
|||||||
|
|
||||||
$border: 2px solid red;
|
$border: 2px solid red;
|
||||||
|
|
||||||
|
$border_radius: 8px;
|
||||||
|
|
||||||
// header nav
|
// header nav
|
||||||
$header_nav_height: 80px;
|
$header_nav_height: 80px;
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
26
src/components/meta/index.vue
Normal file
26
src/components/meta/index.vue
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref, onMounted} from 'vue'
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>ID/无人机低空监管设备 无人机定位设备/无人机飞手定位设备/无人机侦测设备/software ID无人机远程识别模块 software</p>
|
||||||
|
<p>software ID无人机识别设备/符合GB-42590-2023/无人机远程识别发射模块 无人机远程识别设备/无人机RID/software</p>
|
||||||
|
<p>ID无人机远程识别广播模块/RID无人机识别/无人机飞手远程定位设备</p>
|
||||||
|
<p>无人机测距模块/无人机侦测监管设备/RID无人机识别/无人机定位器/无人机飞手定位器</p>
|
||||||
|
<p>无人机侦测定位设备/迷你无人机识别模块/低空经济无人机识别设备/单兵无人机侦测识别设备</p>
|
||||||
|
<p>无人机探测器/防撞机无人机定位设备/software ID无人机预警仪</p>
|
||||||
|
<p>全向无人机探测设备/无人机定位飞手定位设备/安防安保无人机监测设备/RID无人机识别/software ID远程识别模块</p>
|
||||||
|
<p>无人机侦测设备飞手定位飞行轨迹/UAV无线电侦测设备/无人机GPS GNSS定位设备</p>
|
||||||
|
<p>无人机RID广播识别模块/无人机探测飞手定位飞行轨迹/专业级无人机预警侦测设备 无人机航拍防撞设备/无人机Remote</p>
|
||||||
|
<p>ID国标定位侦测设备/低空安防无人机监管 无人机识别跟踪设备/RID无人机定位模块/software</p>
|
||||||
|
<p>ID无人机定位跟踪设备带飞手定位飞行轨迹 自主研发无人机侦测定位模块/software</p>
|
||||||
|
<p>ID无人机远程识别设备/飞机定位飞行轨迹飞手定位无人机识别模块源头厂家 无人机标签识别设备/software</p>
|
||||||
|
<p>
|
||||||
|
ID无人机侦测定位设备/远程广播模块识别 无人机远程识别地面站/RID无人机识别/无人机巡检智能识别模块/无人机定位飞手定位
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -1,12 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import {ref, computed, watch, nextTick, getCurrentInstance, onUnmounted} from 'vue'
|
||||||
ref,
|
|
||||||
computed,
|
|
||||||
watch,
|
|
||||||
nextTick,
|
|
||||||
getCurrentInstance,
|
|
||||||
onUnmounted,
|
|
||||||
} from 'vue'
|
|
||||||
|
|
||||||
/* -------------------- 组件接口定义 -------------------- */
|
/* -------------------- 组件接口定义 -------------------- */
|
||||||
const currentPage = defineModel({type: [Number, String], default: 1})
|
const currentPage = defineModel({type: [Number, String], default: 1})
|
||||||
@ -26,7 +19,7 @@ const props = defineProps({
|
|||||||
sourceGap: {type: Number, default: 20},
|
sourceGap: {type: Number, default: 20},
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['page-change', 'item-click', 'item-hover'])
|
const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
|
||||||
|
|
||||||
/* -------------------- 响应式变量 -------------------- */
|
/* -------------------- 响应式变量 -------------------- */
|
||||||
const instance = getCurrentInstance()
|
const instance = getCurrentInstance()
|
||||||
@ -39,18 +32,18 @@ const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
|||||||
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
||||||
const itemGap = computed(() => $fontSize(props.sourceGap))
|
const itemGap = computed(() => $fontSize(props.sourceGap))
|
||||||
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
||||||
const viewPortWidth = computed(
|
const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
|
||||||
() =>
|
const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
|
||||||
props.pageSize * itemWidth.value +
|
|
||||||
(props.pageSize - 1) * itemGap.value +
|
|
||||||
'px'
|
|
||||||
)
|
|
||||||
const trackWidth = computed(
|
|
||||||
() => props.data.length * itemTotalWidth.value - itemGap.value + 'px'
|
|
||||||
)
|
|
||||||
const totalPages = computed(() => props.data.length - props.pageSize + 1)
|
const totalPages = computed(() => props.data.length - props.pageSize + 1)
|
||||||
|
|
||||||
/* -------------------- 方法 -------------------- */
|
/* -------------------- 方法 -------------------- */
|
||||||
|
/**
|
||||||
|
* 标题点击事件
|
||||||
|
*/
|
||||||
|
const clickTitle = () => {
|
||||||
|
emit('title-click')
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 执行平移动画
|
* 执行平移动画
|
||||||
* @param {number} page - 目标页码
|
* @param {number} page - 目标页码
|
||||||
@ -58,9 +51,7 @@ const totalPages = computed(() => props.data.length - props.pageSize + 1)
|
|||||||
const translate = (page) => {
|
const translate = (page) => {
|
||||||
if (!trackRef.value) return
|
if (!trackRef.value) return
|
||||||
trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
|
trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
|
||||||
trackRef.value.style.transform = `translateX(-${
|
trackRef.value.style.transform = `translateX(-${itemTotalWidth.value * (page - 1)}px)`
|
||||||
itemTotalWidth.value * (page - 1)
|
|
||||||
}px)`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -75,8 +66,7 @@ const goToPage = (page) => {
|
|||||||
* 切换到下一页，循环播放
|
* 切换到下一页，循环播放
|
||||||
*/
|
*/
|
||||||
const nextPage = () => {
|
const nextPage = () => {
|
||||||
const nextPage =
|
const nextPage = currentPage.value < totalPages.value ? currentPage.value + 1 : 1
|
||||||
currentPage.value < totalPages.value ? currentPage.value + 1 : 1
|
|
||||||
goToPage(nextPage)
|
goToPage(nextPage)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -84,8 +74,7 @@ const nextPage = () => {
|
|||||||
* 切换到上一页，循环播放
|
* 切换到上一页，循环播放
|
||||||
*/
|
*/
|
||||||
const prevPage = () => {
|
const prevPage = () => {
|
||||||
const prevPage =
|
const prevPage = currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
|
||||||
currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
|
|
||||||
goToPage(prevPage)
|
goToPage(prevPage)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -175,7 +164,10 @@ onUnmounted(stopAutoPlay)
|
|||||||
<template>
|
<template>
|
||||||
<section :id="id" class="generic-carousel">
|
<section :id="id" class="generic-carousel">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<h2 v-if="title" class="carousel-title">{{ title }}</h2>
|
<slot name="title">
|
||||||
|
<h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
|
||||||
|
</slot>
|
||||||
|
<!-- <h2 v-if="title" class="carousel-title">{{ title }}</h2> -->
|
||||||
|
|
||||||
<!-- 分页指示器 -->
|
<!-- 分页指示器 -->
|
||||||
<div v-if="showDot" class="carousel-pagination">
|
<div v-if="showDot" class="carousel-pagination">
|
||||||
@ -189,16 +181,9 @@ onUnmounted(stopAutoPlay)
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 导航按钮 -->
|
<!-- 导航按钮 -->
|
||||||
<div
|
<div v-if="showPagination && totalPages > 1" class="carousel-navigation flex j-s">
|
||||||
v-if="showPagination && totalPages > 1"
|
<button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页"><</button>
|
||||||
class="carousel-navigation flex j-s"
|
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">></button>
|
||||||
>
|
|
||||||
<button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">
|
|
||||||
<
|
|
||||||
</button>
|
|
||||||
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 轮播内容区域 -->
|
<!-- 轮播内容区域 -->
|
||||||
@ -224,11 +209,7 @@ onUnmounted(stopAutoPlay)
|
|||||||
@mouseenter="handleItemHover(item, index)"
|
@mouseenter="handleItemHover(item, index)"
|
||||||
@mouseleave="handleItemHoverLeave(item, index)"
|
@mouseleave="handleItemHoverLeave(item, index)"
|
||||||
>
|
>
|
||||||
<slot
|
<slot :item="item" :index="index" :isActive="currentPage === Math.ceil((index + 1) / pageSize)" />
|
||||||
:item="item"
|
|
||||||
:index="index"
|
|
||||||
:isActive="currentPage === Math.ceil((index + 1) / pageSize)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -247,6 +228,10 @@ onUnmounted(stopAutoPlay)
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #0389ff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-pagination {
|
.carousel-pagination {
|
||||||
@ -336,5 +321,9 @@ onUnmounted(stopAutoPlay)
|
|||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
52
src/home.vue
52
src/home.vue
@ -1,14 +1,58 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Header from './views/layout/pc/header/index.vue'
|
import Header from './views/layout/pc/header/index.vue'
|
||||||
import Footer from './views/layout/pc/footer/index.vue'
|
import Footer from './views/layout/pc/footer/index.vue'
|
||||||
|
import {onMounted, ref, watch} from 'vue'
|
||||||
|
import {visit} from '@/api/index'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const referrer = ref(document.referrer || '')
|
||||||
|
const ipUrl = ref('')
|
||||||
|
|
||||||
|
const CACHE_KEY = 'ip'
|
||||||
|
const TIME_KEY = 'ipFetchTime'
|
||||||
|
const CACHE_MIN = 60 * 60 * 1000 // 1h
|
||||||
|
|
||||||
|
async function getUrl() {
|
||||||
|
const now = Date.now()
|
||||||
|
const cachedIp = sessionStorage.getItem(CACHE_KEY)
|
||||||
|
const cachedTime = sessionStorage.getItem(TIME_KEY)
|
||||||
|
|
||||||
|
if (cachedIp && cachedTime && now - Number(cachedTime) < CACHE_MIN) {
|
||||||
|
ipUrl.value = cachedIp
|
||||||
|
return cachedIp
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const {data} = await axios.get('https://api64.ipify.org?format=json')
|
||||||
|
ipUrl.value = data.ip
|
||||||
|
sessionStorage.setItem(CACHE_KEY, data.ip)
|
||||||
|
sessionStorage.setItem(TIME_KEY, now.toString())
|
||||||
|
postVisit()
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取 IP 失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function postVisit() {
|
||||||
|
const params = {
|
||||||
|
timestamp: new Date(),
|
||||||
|
url: window.location.href,
|
||||||
|
referrer: referrer.value,
|
||||||
|
real_ip: ipUrl.value,
|
||||||
|
}
|
||||||
|
|
||||||
|
visit(params).then((res) => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getUrl()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<Header id="header" />
|
<Header id="header" />
|
||||||
|
<router-view id="main" v-slot="{Component, title}">
|
||||||
<!-- include 对应组件的 name -->
|
|
||||||
<router-view id="main" v-slot="{Component}">
|
|
||||||
<keep-alive include="New">
|
<keep-alive include="New">
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
@ -37,7 +81,7 @@ import Footer from './views/layout/pc/footer/index.vue'
|
|||||||
}
|
}
|
||||||
#footer {
|
#footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 380px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</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 '_c/icon/svgIcon.vue'
|
import IconSvg from '@/components/Icon/svgIcon.vue'
|
||||||
|
|
||||||
// SVG图标注册
|
// SVG图标注册
|
||||||
import 'virtual:svg-icons-register'
|
import 'virtual:svg-icons-register'
|
||||||
|
|||||||
@ -3,24 +3,35 @@ import {createWebHashHistory, createRouter} from 'vue-router'
|
|||||||
import HomeView from '@/views/homepage/index.vue'
|
import HomeView from '@/views/homepage/index.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
// ============================================ 首页 ============================================
|
||||||
{path: '/', component: HomeView},
|
{path: '/', component: HomeView},
|
||||||
|
|
||||||
// ============================================ 产品中心 ============================================
|
// ============================================ 产品中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/product/monitorSystem',
|
path: '/product/hardwareSystem',
|
||||||
name: 'monitorSystem',
|
name: 'HardwareSystem',
|
||||||
component: () => import('@/views/product/monitorSystem.vue'),
|
component: () => import('@/views/product/hardwareSystem.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '低空监管体系',
|
title: '低空监管体系',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/product/remoteDevice',
|
path: '/product/softwareSystem',
|
||||||
name: 'remoteDevice',
|
name: 'SoftwareSystem',
|
||||||
component: () => import('@/views/product/remoteDevice.vue'),
|
component: () => import('@/views/product/softwareSystem.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '低空远程识别设备',
|
title: '低空远程识别设备',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/product/detail',
|
||||||
|
name: 'ProductDetail',
|
||||||
|
component: () => import('@/views/product/detail.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '产品详情',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
// ============================================ 服务与支撑 ============================================
|
// ============================================ 服务与支撑 ============================================
|
||||||
{
|
{
|
||||||
path: '/services',
|
path: '/services',
|
||||||
@ -30,6 +41,7 @@ const routes = [
|
|||||||
title: '服务与支撑',
|
title: '服务与支撑',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 新闻中心 ============================================
|
// ============================================ 新闻中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/news',
|
path: '/news',
|
||||||
@ -41,12 +53,13 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/news/detail',
|
path: '/news/detail',
|
||||||
name: 'Detail',
|
name: 'NewsDetail',
|
||||||
component: () => import('@/views/news/detail.vue'),
|
component: () => import('@/views/news/detail.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '新闻详情',
|
title: '新闻详情',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 关于我们 ============================================
|
// ============================================ 关于我们 ============================================
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
@ -56,6 +69,7 @@ const routes = [
|
|||||||
title: '关于我们',
|
title: '关于我们',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 联系我们 ============================================
|
// ============================================ 联系我们 ============================================
|
||||||
{
|
{
|
||||||
path: '/link',
|
path: '/link',
|
||||||
@ -65,6 +79,7 @@ const routes = [
|
|||||||
title: '联系我们',
|
title: '联系我们',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============================================ 下载中心 ============================================
|
// ============================================ 下载中心 ============================================
|
||||||
{
|
{
|
||||||
path: '/download',
|
path: '/download',
|
||||||
@ -74,6 +89,15 @@ const routes = [
|
|||||||
title: '下载中心',
|
title: '下载中心',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// ============================================ 管理页面 ============================================
|
||||||
|
{
|
||||||
|
path: '/manager',
|
||||||
|
name: 'Manager',
|
||||||
|
component: () => import('@/views/manager/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '管理中心',
|
||||||
|
},
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
@ -81,6 +105,13 @@ const router = createRouter({
|
|||||||
routes,
|
routes,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// router.beforeEach(async (to, from, next) => {
|
||||||
|
// const {useNavStore} = await import('@/store/nav.js')
|
||||||
|
// const navStore = useNavStore()
|
||||||
|
// navStore.setLoad(true)
|
||||||
|
// next()
|
||||||
|
// })
|
||||||
|
|
||||||
router.afterEach((to, from) => {
|
router.afterEach((to, from) => {
|
||||||
// 只有路径变化时才滚动到顶部
|
// 只有路径变化时才滚动到顶部
|
||||||
if (to.path !== from.path) {
|
if (to.path !== from.path) {
|
||||||
|
|||||||
@ -5,6 +5,7 @@ export const useNavStore = defineStore(
|
|||||||
'nav',
|
'nav',
|
||||||
() => {
|
() => {
|
||||||
const navIndex = ref('/')
|
const navIndex = ref('/')
|
||||||
|
const showLoad = ref(true)
|
||||||
|
|
||||||
const changeNavIndex = (id) => {
|
const changeNavIndex = (id) => {
|
||||||
if (!id) {
|
if (!id) {
|
||||||
@ -14,9 +15,16 @@ export const useNavStore = defineStore(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const setLoad = (status) => {
|
||||||
|
console.log('status===>', status)
|
||||||
|
showLoad.value = status
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
navIndex,
|
navIndex,
|
||||||
|
showLoad,
|
||||||
changeNavIndex,
|
changeNavIndex,
|
||||||
|
setLoad,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
28
src/utils/cryptojs.js
Normal file
28
src/utils/cryptojs.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import CryptoJS from 'crypto-js'
|
||||||
|
|
||||||
|
const key = CryptoJS.enc.Utf8.parse('k+tsU5mZz1BY+P8z')
|
||||||
|
const iv = CryptoJS.enc.Utf8.parse('k+tsU5mZz1BY+P8z')
|
||||||
|
|
||||||
|
// crypto-js加密
|
||||||
|
export function cryptoEncrypt(word) {
|
||||||
|
const srcs = CryptoJS.enc.Utf8.parse(word)
|
||||||
|
const encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
||||||
|
iv,
|
||||||
|
mode: CryptoJS.mode.CBC,
|
||||||
|
padding: CryptoJS.pad.Pkcs7,
|
||||||
|
})
|
||||||
|
return encrypted.ciphertext.toString(CryptoJS.enc.Base64)
|
||||||
|
}
|
||||||
|
|
||||||
|
// crypto-js解密
|
||||||
|
export function cryptoDecrypt(word) {
|
||||||
|
const encryptedHexStr = CryptoJS.enc.Base64.parse(word)
|
||||||
|
const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
|
||||||
|
const decrypt = CryptoJS.AES.decrypt(srcs, key, {
|
||||||
|
iv,
|
||||||
|
mode: CryptoJS.mode.CBC,
|
||||||
|
padding: CryptoJS.pad.Pkcs7,
|
||||||
|
})
|
||||||
|
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
|
||||||
|
return decryptedStr.toString()
|
||||||
|
}
|
||||||
@ -4,10 +4,7 @@
|
|||||||
* @returns {number} 自适应后的尺寸
|
* @returns {number} 自适应后的尺寸
|
||||||
*/
|
*/
|
||||||
export function fontSize(res) {
|
export function fontSize(res) {
|
||||||
let clientWidth =
|
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||||||
window.innerWidth ||
|
|
||||||
document.documentElement.clientWidth ||
|
|
||||||
document.body.clientWidth
|
|
||||||
if (!clientWidth) return
|
if (!clientWidth) return
|
||||||
let fontSize = clientWidth / 1920
|
let fontSize = clientWidth / 1920
|
||||||
return res * fontSize
|
return res * fontSize
|
||||||
@ -34,3 +31,45 @@ export function randomBgColor(type = 'hex') {
|
|||||||
.padStart(6, '0')
|
.padStart(6, '0')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据 url 递归查找对应的 label
|
||||||
|
* @param {Array} tree - header 数组
|
||||||
|
* @param {String} path - 要匹配的 url
|
||||||
|
* @returns {String|undefined} 找到返回 label，否则 undefined
|
||||||
|
*/
|
||||||
|
export function findLabelByUrl(tree, path) {
|
||||||
|
for (const node of tree) {
|
||||||
|
if (node.url === path) return node.label
|
||||||
|
if (node.hasChildren && node.children) {
|
||||||
|
const child = findLabelByUrl(node.children, path)
|
||||||
|
if (child) return child
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get参数处理
|
||||||
|
* @param {*} params 参数
|
||||||
|
*/
|
||||||
|
export function tansParams(params) {
|
||||||
|
let result = ''
|
||||||
|
for (const propName of Object.keys(params)) {
|
||||||
|
const value = params[propName]
|
||||||
|
const part = `${encodeURIComponent(propName)}=`
|
||||||
|
if (value !== null && typeof value !== 'undefined') {
|
||||||
|
if (typeof value === 'object') {
|
||||||
|
for (const key of Object.keys(value)) {
|
||||||
|
if (value[key] !== null && typeof value[key] !== 'undefined') {
|
||||||
|
const params = `${propName}[${key}]`
|
||||||
|
const subPart = `${encodeURIComponent(params)}=`
|
||||||
|
result += `${subPart + encodeURIComponent(value[key])}&`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
result += `${part + encodeURIComponent(value)}&`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|||||||
@ -2,9 +2,7 @@
|
|||||||
* axios 封装
|
* axios 封装
|
||||||
*/
|
*/
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
|
||||||
import {tansParams} from '@/utils/index'
|
import {tansParams} from '@/utils/index'
|
||||||
import {getToken, removeToken, removeUserTenantInfo} from '@/utils/auth'
|
|
||||||
|
|
||||||
// 配置基础URL
|
// 配置基础URL
|
||||||
const baseURL = window.config?.baseUrl || 'http://work.rangutech.cn:9131'
|
const baseURL = window.config?.baseUrl || 'http://work.rangutech.cn:9131'
|
||||||
@ -21,14 +19,6 @@ const service = axios.create({
|
|||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
service.interceptors.request.use(
|
service.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
// 是否需要设置 token
|
|
||||||
const isToken = (config.headers || {}).isToken === false
|
|
||||||
|
|
||||||
// 添加token到请求头
|
|
||||||
if (getToken() && !isToken) {
|
|
||||||
config.headers.Authorization = `Bearer ${getToken()}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// GET请求参数处理
|
// GET请求参数处理
|
||||||
if (config.method?.toLowerCase() === 'get' && config.params) {
|
if (config.method?.toLowerCase() === 'get' && config.params) {
|
||||||
const urlParams = tansParams(config.params)
|
const urlParams = tansParams(config.params)
|
||||||
@ -48,87 +38,22 @@ service.interceptors.request.use(
|
|||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
const {data, config} = response
|
const {data, config} = response
|
||||||
|
|
||||||
// 处理二进制数据响应
|
// 处理二进制数据响应
|
||||||
if (
|
if (config.responseType === 'blob' || config.responseType === 'arraybuffer') {
|
||||||
config.responseType === 'blob' ||
|
|
||||||
config.responseType === 'arraybuffer'
|
|
||||||
) {
|
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 正常响应处理
|
// 正常响应处理
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 异常响应处理
|
// 异常响应处理
|
||||||
return Promise.reject(response)
|
return Promise.reject(response)
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
const {config, response, message} = error
|
const {config, response, message} = error
|
||||||
|
|
||||||
console.error('Response error:', {config, response, message})
|
console.error('Response error:', {config, response, message})
|
||||||
|
|
||||||
// 处理认证错误
|
|
||||||
if (response && [401, 471, 472].includes(response.status)) {
|
|
||||||
handleAuthError(config, response)
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理网络错误
|
|
||||||
handleNetworkError(message)
|
|
||||||
|
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理认证错误
|
|
||||||
*/
|
|
||||||
function handleAuthError(config, response) {
|
|
||||||
const excludeUrls = ['/Token/Logout', '/Token/Access']
|
|
||||||
|
|
||||||
if (!excludeUrls.includes(config.url)) {
|
|
||||||
ElMessageBox.confirm(
|
|
||||||
'登录状态已过期，您可以继续留在该页面，或者重新登录',
|
|
||||||
'系统提示',
|
|
||||||
{
|
|
||||||
confirmButtonText: '重新登录',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then(() => {
|
|
||||||
removeToken()
|
|
||||||
removeUserTenantInfo()
|
|
||||||
// 这里需要导入store
|
|
||||||
// store.dispatch('LogOut').then(() => {});
|
|
||||||
window.location.reload() // 简单重载页面
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
// 用户取消操作
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理网络错误
|
|
||||||
*/
|
|
||||||
function handleNetworkError(message) {
|
|
||||||
let errorMsg = message
|
|
||||||
|
|
||||||
if (message === 'Network Error') {
|
|
||||||
errorMsg = '网络连接异常，请检查网络设置'
|
|
||||||
} else if (message.includes('timeout')) {
|
|
||||||
errorMsg = '请求超时，请稍后重试'
|
|
||||||
}
|
|
||||||
|
|
||||||
ElMessage({
|
|
||||||
message: errorMsg,
|
|
||||||
type: 'error',
|
|
||||||
duration: 5 * 1000,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default service
|
export default service
|
||||||
|
|||||||
@ -1,45 +1,74 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Swiper from '@/components/Swiper/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
|
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const swiperWidth = ref(400)
|
||||||
|
const swiperHeight = ref(400)
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
const videoLoaded = ref(true)
|
||||||
|
const list = [...window.softwareSystemList, ...window.hardwareSystemList]
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|
||||||
|
function onVideoLoaded() {
|
||||||
|
videoLoaded.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function toUrl(item) {
|
||||||
|
router.push({
|
||||||
|
path: '/product/detail',
|
||||||
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page" v-loading="videoLoaded">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
|
<video autoplay muted loop @loadeddata="onVideoLoaded">
|
||||||
|
<source src="/static/video/display.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
<div class="banner-link"><span>进入演示系统</span></div>
|
<div class="banner-link"><span>进入演示系统</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper">
|
<Swiper
|
||||||
<Swiper
|
id="home_swiper"
|
||||||
id="home_swiper"
|
title="产品体系"
|
||||||
title="产品体系"
|
v-model="currentPage"
|
||||||
v-model="currentPage"
|
:data="list"
|
||||||
:data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
:page-size="3"
|
||||||
:page-size="4"
|
:show-pagination="true"
|
||||||
:show-pagination="true"
|
:source-width="swiperWidth"
|
||||||
:auto-play="true"
|
:source-height="swiperHeight"
|
||||||
>
|
:auto-play="true"
|
||||||
<template #default="{item, index, isActive}">
|
>
|
||||||
<div class="my-card" :class="{active: isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
<h2>{{ item }}</h2>
|
<div class="list" @click="toUrl(item)">
|
||||||
|
<div class="top">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="card flex column a-c j-c" :class="{active: isActive}">
|
||||||
</Swiper>
|
<img :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'" :src="`./static/images/${item.imgUrl}`" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Swiper>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page {
|
.page {
|
||||||
|
.placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.banner {
|
.banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 800px;
|
height: 800px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-image: url('/static/images/main/banner.png');
|
background-color: #333333;
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
&-link {
|
&-link {
|
||||||
width: 174px;
|
width: 174px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
@ -64,14 +93,34 @@ onMounted(() => {})
|
|||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
video {
|
||||||
|
padding: 3px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.list {
|
||||||
width: 100%;
|
height: 100%;
|
||||||
height: 800px;
|
border: 1px solid #eee;
|
||||||
.my-card {
|
.top {
|
||||||
background: #d9d9d9;
|
height: 50px;
|
||||||
height: 100%;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,10 +5,14 @@ onMounted(() => {})
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="QR-code">
|
<div class="QR-code">
|
||||||
<img class="QR-img" :src="`./static/images/footer/QR_code.png`" />
|
<div class="QR-dev">
|
||||||
<div class="label">企业微信</div>
|
<img class="QR-img" :src="`./static/images/footer/QR_code.png`" />
|
||||||
<img class="QR-img item" :src="`./static/images/footer/mark.png`" alt="" />
|
<div class="label">企业微信</div>
|
||||||
<div class="label">熊雨翔</div>
|
</div>
|
||||||
|
<div class="QR-dev">
|
||||||
|
<img class="QR-img" :src="`./static/images/footer/mark.png`" alt="" />
|
||||||
|
<div class="label">市场联系人</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -16,7 +20,13 @@ onMounted(() => {})
|
|||||||
.QR-code {
|
.QR-code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $white;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
.QR-dev {
|
||||||
|
width: 150px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
.QR-img {
|
.QR-img {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
@ -26,8 +36,5 @@ onMounted(() => {})
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
.item {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -26,7 +26,8 @@ const toMIIF = () => {
|
|||||||
Copyright © 2023.Rangu Technology Co.,Ltd. All rights reserved.
|
Copyright © 2023.Rangu Technology Co.,Ltd. All rights reserved.
|
||||||
燃谷科技（南京）有限公司
|
燃谷科技（南京）有限公司
|
||||||
</span>
|
</span>
|
||||||
<span class="url" @click="toMIIF">苏ICP备2023030548号</span>
|
<span class="url" @click="toMIIF">苏ICP备2023030548号-1</span>
|
||||||
|
<span class="url" @click="toMIIF">苏ICP备2023030548号-5</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -45,7 +46,7 @@ const toMIIF = () => {
|
|||||||
left: 190px;
|
left: 190px;
|
||||||
}
|
}
|
||||||
#nav {
|
#nav {
|
||||||
width: calc(100% - 410px - 380px);
|
width: calc(100% - 410px - 550px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 410px;
|
left: 410px;
|
||||||
top: $top;
|
top: $top;
|
||||||
@ -53,7 +54,7 @@ const toMIIF = () => {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
#QR {
|
#QR {
|
||||||
width: 150px;
|
width: 320px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $top;
|
top: $top;
|
||||||
|
|||||||
@ -9,7 +9,7 @@ const {navIndex} = storeToRefs(navStore)
|
|||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const navList = ref([])
|
const navList = ref([])
|
||||||
const activeIndex = ref(null)
|
const activeIndex = ref('/')
|
||||||
|
|
||||||
// 处理导航选择
|
// 处理导航选择
|
||||||
const handleSelect = (key) => {
|
const handleSelect = (key) => {
|
||||||
|
|||||||
433
src/views/manager/index.vue
Normal file
433
src/views/manager/index.vue
Normal file
@ -0,0 +1,433 @@
|
|||||||
|
<script setup>
|
||||||
|
import axios from 'axios';
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { QuillEditor } from '@vueup/vue-quill'
|
||||||
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||||
|
import {getNews,getNewsDetail,updateNews,saveDetail} from '@/api/index'
|
||||||
|
|
||||||
|
const baseURL = window.config?.baseUrl
|
||||||
|
|
||||||
|
// 新闻列表
|
||||||
|
const newsList = ref([]);
|
||||||
|
|
||||||
|
// 分页与状态过滤
|
||||||
|
const page = ref(1);
|
||||||
|
const pageSize = ref(10);
|
||||||
|
const totalPages = ref(1);
|
||||||
|
const statusFilter = ref("");
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
// 编辑新闻表单
|
||||||
|
const editingNews = reactive({
|
||||||
|
title: "",
|
||||||
|
cover_image: "",
|
||||||
|
snapshot: "",
|
||||||
|
content: "",
|
||||||
|
status: "draft",
|
||||||
|
slug: "",
|
||||||
|
datetime: null,
|
||||||
|
});
|
||||||
|
const showForm = ref(false);
|
||||||
|
const isEditing = ref(false);
|
||||||
|
|
||||||
|
// 响应式引用 Quill 实例
|
||||||
|
const quillInstance = ref(null);
|
||||||
|
|
||||||
|
// 当编辑器就绪时保存实例
|
||||||
|
const onEditorReady = (quill) => {
|
||||||
|
quillInstance.value = quill;
|
||||||
|
quill.root.addEventListener('paste', handlePaste);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// ---------------- Quill 配置 ----------------
|
||||||
|
const editorOption= {
|
||||||
|
placeholder: "请在这里输入",
|
||||||
|
modules:{
|
||||||
|
toolbar: {
|
||||||
|
container: [
|
||||||
|
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
|
||||||
|
['blockquote', 'code-block'], //引用，代码块
|
||||||
|
[{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
|
||||||
|
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
|
||||||
|
[{'script': 'sub'}, {'script': 'super'}], // 上下标
|
||||||
|
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
|
||||||
|
[{'direction': 'rtl'}], // 文本方向
|
||||||
|
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
|
||||||
|
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
|
||||||
|
[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
|
||||||
|
[{'font': []}], //字体
|
||||||
|
[{'align': []}], //对齐方式
|
||||||
|
['clean'], //清除字体样式
|
||||||
|
['image', 'video'] //上传图片、上传视频
|
||||||
|
],
|
||||||
|
handlers: {
|
||||||
|
image: imageHandler,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
async function handlePaste(event) {
|
||||||
|
const clipboardData = event.clipboardData || window.clipboardData;
|
||||||
|
if (!clipboardData) return;
|
||||||
|
|
||||||
|
const items = clipboardData.items;
|
||||||
|
if (!items) return;
|
||||||
|
|
||||||
|
// 检查是否有图片类型
|
||||||
|
let blob = null;
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
if (items[i].type.indexOf('image') === 0) {
|
||||||
|
blob = items[i].getAsFile();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!blob) return;
|
||||||
|
|
||||||
|
// 阻止默认粘贴行为（避免插入 base64）
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 上传图片
|
||||||
|
const imageUrl = await uploadImage(blob);
|
||||||
|
|
||||||
|
// 获取当前光标位置
|
||||||
|
const quill = quillInstance.value;
|
||||||
|
const selection = quill.getSelection();
|
||||||
|
const index = selection ? selection.index : quill.getLength();
|
||||||
|
|
||||||
|
// 插入图片 URL
|
||||||
|
quill.insertEmbed(index, 'image', imageUrl);
|
||||||
|
|
||||||
|
// 可选：移动光标到图片后
|
||||||
|
quill.setSelection(index + 1);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('粘贴图片上传失败:', error);
|
||||||
|
// 可选：提示用户
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function imageHandler() {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.setAttribute('type', 'file');
|
||||||
|
input.setAttribute('accept', 'image/*');
|
||||||
|
input.click();
|
||||||
|
|
||||||
|
input.onchange = () => {
|
||||||
|
const file = input.files[0];
|
||||||
|
// 将图片上传到服务器
|
||||||
|
uploadImage(file)
|
||||||
|
.then((imageUrl) => {
|
||||||
|
// 将图片 URL 插入到编辑器中
|
||||||
|
const quill = quillInstance.value
|
||||||
|
const range = quill.getSelection();
|
||||||
|
quill.insertEmbed(range.index, 'image', imageUrl);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('图片上传失败：', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----------------- 获取新闻 -----------------
|
||||||
|
const fetchNews = async () => {
|
||||||
|
try {
|
||||||
|
let query = {
|
||||||
|
status: statusFilter.value || undefined,
|
||||||
|
page: page.value,
|
||||||
|
page_size: pageSize.value,
|
||||||
|
}
|
||||||
|
let {code, data, pagination} = await getNews(query)
|
||||||
|
if (code === 0) {
|
||||||
|
newsList.value = data;
|
||||||
|
totalPages.value = pagination.total_pages;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("获取新闻失败", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----------------- 添加/编辑 -----------------
|
||||||
|
const saveNews = async () => {
|
||||||
|
try {
|
||||||
|
editingNews.content = quillInstance.value.root.innerHTML
|
||||||
|
if (isEditing.value) {
|
||||||
|
await updateNews(editingNews);
|
||||||
|
} else {
|
||||||
|
await saveDetail(editingNews);
|
||||||
|
}
|
||||||
|
showForm.value = false;
|
||||||
|
fetchNews();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("保存新闻失败", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const editNews = async (news) => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
let query = {
|
||||||
|
slug: news.slug,
|
||||||
|
}
|
||||||
|
let {code, data} = await getNewsDetail(query)
|
||||||
|
if (code === 0) {
|
||||||
|
Object.assign(editingNews, data);
|
||||||
|
isEditing.value = true;
|
||||||
|
showForm.value = true;
|
||||||
|
quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNews = () => {
|
||||||
|
Object.assign(editingNews, {
|
||||||
|
title: "",
|
||||||
|
cover_image: "",
|
||||||
|
snapshot: "",
|
||||||
|
content: "",
|
||||||
|
status: "draft",
|
||||||
|
slug: "",
|
||||||
|
datetime: null,
|
||||||
|
});
|
||||||
|
isEditing.value = false;
|
||||||
|
showForm.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
const prevPage = () => {
|
||||||
|
if (page.value > 1) {
|
||||||
|
page.value--;
|
||||||
|
fetchNews();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const nextPage = () => {
|
||||||
|
if (page.value < totalPages.value) {
|
||||||
|
page.value++;
|
||||||
|
fetchNews();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleImageUpload(event) {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
uploadImage(file)
|
||||||
|
.then((imageUrl) => {
|
||||||
|
editingNews.cover_image = imageUrl;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('封面图片上传失败:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadImage(file) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
fetch(`${baseURL}update/img`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData,
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
if (data.code === 0) {
|
||||||
|
console.log(data)
|
||||||
|
resolve(`${baseURL}download/img/${data.data}`);
|
||||||
|
} else {
|
||||||
|
reject(data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
reject(error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchNews();
|
||||||
|
addNews();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<!-- 操作栏 -->
|
||||||
|
<div class="my-card flex j-s a-c toolbar">
|
||||||
|
<select v-model="statusFilter" @change="fetchNews">
|
||||||
|
<option value="">全部状态</option>
|
||||||
|
<option value="draft">草稿</option>
|
||||||
|
<option value="published">发布</option>
|
||||||
|
<option value="disable">关闭</option>
|
||||||
|
</select>
|
||||||
|
<button @click="addNews">添加新闻</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新闻列表 -->
|
||||||
|
<div class="my-card">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>标题</th>
|
||||||
|
<th>状态</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="n in newsList" :key="n.slug">
|
||||||
|
<td>{{ n.id }}</td>
|
||||||
|
<td>{{ n.title }}</td>
|
||||||
|
<td>{{ n.status }}</td>
|
||||||
|
<td>
|
||||||
|
<button @click="editNews(n)">编辑</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="my-card flex j-s a-c pagination">
|
||||||
|
<button @click="prevPage" :disabled="page === 1">上一页</button>
|
||||||
|
<span>{{ page }} / {{ totalPages }}</span>
|
||||||
|
<button @click="nextPage" :disabled="page === totalPages">下一页</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加/编辑表单 -->
|
||||||
|
<div v-if="showForm" class="my-card news-form">
|
||||||
|
<h3>{{ isEditing ? "编辑新闻" : "添加新闻" }}</h3>
|
||||||
|
<label>标题: <input v-model="editingNews.title" /></label><br />
|
||||||
|
<label>发布时间:<input type="date" v-model="editingNews.datetime" /></label><br />
|
||||||
|
<label>封面图片:
|
||||||
|
<input type="file" accept="image/*" @change="handleImageUpload" />
|
||||||
|
</label>
|
||||||
|
<div v-if="editingNews.cover_image">
|
||||||
|
<img :src="editingNews.cover_image" alt="封面预览" style="max-width:200px; margin-top:10px;" />
|
||||||
|
</div>
|
||||||
|
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
|
||||||
|
<label>内容:</label>
|
||||||
|
<quill-editor content-type="html"
|
||||||
|
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
|
||||||
|
<label>状态:
|
||||||
|
<select v-model="editingNews.status">
|
||||||
|
<option value="draft">草稿</option>
|
||||||
|
<option value="published">发布</option>
|
||||||
|
<option value="disable">关闭</option>
|
||||||
|
</select>
|
||||||
|
</label><br />
|
||||||
|
<button @click="saveNews">{{ isEditing ? "保存修改" : "添加" }}</button>
|
||||||
|
<button @click="showForm=false">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.my-card {
|
||||||
|
width: 80%;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin: 20px auto;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.j-s { justify-content: space-between; }
|
||||||
|
.a-c { align-items: center; }
|
||||||
|
|
||||||
|
.toolbar select,
|
||||||
|
.toolbar button {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fafafa;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar button:hover {
|
||||||
|
background-color: #007BFF;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #007BFF;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
th, td {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(odd) { background-color: #fdfdfd; }
|
||||||
|
tbody tr:hover { background-color: #f5faff; }
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fafafa;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #007BFF;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #007BFF;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
gap: 10px;
|
||||||
|
button {
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.snapshot{
|
||||||
|
height: 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.news-form input,
|
||||||
|
.news-form textarea,
|
||||||
|
.news-form select {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.news-form input:focus,
|
||||||
|
.news-form textarea:focus,
|
||||||
|
.news-form select:focus {
|
||||||
|
border-color: #007BFF;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-form button {
|
||||||
|
margin-right: 10px;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
.news-form h3 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,17 +1,46 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {onMounted} from 'vue'
|
import {onMounted, ref} from 'vue'
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
|
|
||||||
import {newsDetail} from './mock'
|
import {getNewsDetail} from '@/api/index'
|
||||||
|
import {ElMessage} from 'element-plus'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const detail = route.query
|
const detail = route.query
|
||||||
|
const showLoad = ref(true)
|
||||||
|
const newsTitle = ref('')
|
||||||
|
const newsSubTitle = ref('')
|
||||||
|
const newsCoverImg = ref('')
|
||||||
|
const newsContent = ref('')
|
||||||
|
|
||||||
detail.artical = newsDetail.find((item) => item.id == route.query.id).article
|
const getDetail = () => {
|
||||||
|
showLoad.value = true
|
||||||
|
let query = {
|
||||||
|
slug: detail.slug,
|
||||||
|
}
|
||||||
|
getNewsDetail(query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
let {content, cover_image, snapshot, title} = res.data
|
||||||
|
newsTitle.value = title
|
||||||
|
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 router = useRouter()
|
const router = useRouter()
|
||||||
onMounted(() => {})
|
onMounted(() => {
|
||||||
|
getDetail()
|
||||||
|
})
|
||||||
|
|
||||||
const toBack = () => {
|
const toBack = () => {
|
||||||
router.back()
|
router.back()
|
||||||
@ -19,19 +48,22 @@ const toBack = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page flex column a-c">
|
<div class="page flex column a-c" v-loading="showLoad">
|
||||||
<div class="label">
|
<div v-if="newsTitle">
|
||||||
{{ detail.label }}
|
<h3 class="label">
|
||||||
</div>
|
{{ newsTitle }}
|
||||||
<div class="time">
|
</h3>
|
||||||
{{ detail.time }}
|
<h3 class="time" v-if="newsSubTitle">
|
||||||
</div>
|
{{ newsSubTitle }}
|
||||||
<div class="img">
|
</h3>
|
||||||
<img :src="`./static/images/${detail.imgUrl}`" alt="" />
|
<div class="img" v-if="newsCoverImg">
|
||||||
</div>
|
<img :src="newsCoverImg" alt="" />
|
||||||
<div class="artical">
|
</div>
|
||||||
{{ detail.artical }}
|
<div class="artical" v-if="newsContent">
|
||||||
|
{{ newsContent }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else>暂无内容</div>
|
||||||
<div class="back" @click="toBack">返回</div>
|
<div class="back" @click="toBack">返回</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -45,11 +77,14 @@ const toBack = () => {
|
|||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
.time {
|
.time {
|
||||||
|
font-family: 'PingFang SC';
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
.img {
|
.img {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 600px;
|
height: auto;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -5,35 +5,55 @@ import Banner from '@/components/Banner/index.vue'
|
|||||||
import Swiper from '@/components/Swiper/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
import {useRouter} from 'vue-router'
|
import {useRouter} from 'vue-router'
|
||||||
import {onBeforeRouteLeave} from 'vue-router'
|
import {onBeforeRouteLeave} from 'vue-router'
|
||||||
import {list} from './mock'
|
import {getNews} from '@/api/index'
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
const showLoad = ref(true)
|
||||||
const containerWidth = ref(1700)
|
const containerWidth = ref(1700)
|
||||||
const containerHeight = ref(1400)
|
const containerHeight = ref(1400)
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {
|
||||||
|
getNewList()
|
||||||
|
})
|
||||||
|
|
||||||
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,
|
||||||
|
}
|
||||||
|
let {code, data, pagination} = await getNews(query)
|
||||||
|
if (code === 0) {
|
||||||
|
newList.value = data
|
||||||
|
page.value.totalPages = pagination.total_pages
|
||||||
|
showLoad.value = false
|
||||||
|
} else {
|
||||||
|
showLoad.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const toDetail = (item) => {
|
const toDetail = (item) => {
|
||||||
router.push({
|
router.push({
|
||||||
path: '/news/detail',
|
path: '/news/detail',
|
||||||
query: {
|
query: {
|
||||||
id: item.id,
|
id: item.id,
|
||||||
imgUrl: item.imgUrl,
|
slug: item.slug,
|
||||||
label: item.label,
|
|
||||||
time: item.time,
|
|
||||||
subLabel: item?.subLabel,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
let scrollTop = 0
|
|
||||||
|
|
||||||
onDeactivated(() => {
|
|
||||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
|
||||||
})
|
|
||||||
|
|
||||||
onActivated(async () => {
|
onActivated(async () => {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
// 再强制等一帧布局
|
// 再强制等一帧布局
|
||||||
@ -42,6 +62,10 @@ onActivated(async () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onDeactivated(() => {
|
||||||
|
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||||
|
})
|
||||||
|
|
||||||
onBeforeRouteLeave((to) => {
|
onBeforeRouteLeave((to) => {
|
||||||
if (to.name === 'Detail') return
|
if (to.name === 'Detail') return
|
||||||
|
|
||||||
@ -55,7 +79,7 @@ onBeforeRouteLeave((to) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page" v-loading="showLoad">
|
||||||
<Banner class="banner" img="banner/news.png" />
|
<Banner class="banner" img="banner/news.png" />
|
||||||
<Swiper
|
<Swiper
|
||||||
id="one"
|
id="one"
|
||||||
@ -72,19 +96,19 @@ onBeforeRouteLeave((to) => {
|
|||||||
<div
|
<div
|
||||||
class="news flex j-s"
|
class="news flex j-s"
|
||||||
:class="{active: isActive}"
|
:class="{active: isActive}"
|
||||||
v-for="item in list"
|
v-for="item in newList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@click="toDetail(item)"
|
@click="toDetail(item)"
|
||||||
>
|
>
|
||||||
<div class="img">
|
<div class="img">
|
||||||
<img :src="`./static/images/${item.imgUrl}`" />
|
<img :src="item.cover_image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="label">{{ item.label }}</div>
|
<div class="label">{{ item.title }}</div>
|
||||||
<div class="time">{{ item.time }}</div>
|
<div class="time">{{ item?.time }}</div>
|
||||||
<div class="sub-label">{{ item?.subLabel }}</div>
|
<div class="sub-label">{{ item?.subLabel }}</div>
|
||||||
<div class="text">{{ item.content }}</div>
|
<div class="text">{{ item.snapshot }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
169
src/views/product/detail.vue
Normal file
169
src/views/product/detail.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<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 j-s">
|
||||||
|
<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) {
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
78
src/views/product/hardwareSystem.vue
Normal file
78
src/views/product/hardwareSystem.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref, onMounted, computed} from 'vue'
|
||||||
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
|
import Banner from '@/components/Banner/index.vue'
|
||||||
|
import Project from './project.vue'
|
||||||
|
|
||||||
|
import {findLabelByUrl} from '@/utils'
|
||||||
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||||
|
|
||||||
|
import {useNavStore} from '@/store/nav'
|
||||||
|
const navStore = useNavStore()
|
||||||
|
|
||||||
|
const hardwareSystemList = window.hardwareSystemList
|
||||||
|
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
const currentPage = ref(1)
|
||||||
|
|
||||||
|
// 点击标题跳转详情页
|
||||||
|
function titleClick(item) {
|
||||||
|
router.push({
|
||||||
|
path: '/product/detail',
|
||||||
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<Banner class="banner" img="banner/product.png" />
|
||||||
|
<Swiper
|
||||||
|
id="one"
|
||||||
|
:title="title"
|
||||||
|
v-model="currentPage"
|
||||||
|
:data="hardwareSystemList"
|
||||||
|
:page-size="3"
|
||||||
|
:show-pagination="false"
|
||||||
|
:auto-play="false"
|
||||||
|
:source-width="300"
|
||||||
|
:source-height="400"
|
||||||
|
:source-gap="80"
|
||||||
|
>
|
||||||
|
<template #default="{item, index, isActive}">
|
||||||
|
<div class="content" @click="titleClick(item)">
|
||||||
|
<div class="top">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="sub-title">{{ item.subTitle }}</div>
|
||||||
|
</div>
|
||||||
|
<img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
<Project />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
height: 100%;
|
||||||
|
.top {
|
||||||
|
background-color: #0389ff;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/index.vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
|
|
||||||
const currentPage = ref(1)
|
|
||||||
|
|
||||||
onMounted(() => {})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<Banner class="banner" img="banner/product.png" />
|
|
||||||
<Swiper
|
|
||||||
id="one"
|
|
||||||
title="产品体系"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="[1, 2, 3, 4]"
|
|
||||||
:page-size="2"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="my-card" :class="{active: isActive}">
|
|
||||||
<h2>{{ item }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
<Swiper
|
|
||||||
id="two"
|
|
||||||
title="软件产品"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="[1, 2, 3, 4]"
|
|
||||||
:page-size="2"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="my-card" :class="{active: isActive}">
|
|
||||||
<h2>{{ item }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
<Swiper
|
|
||||||
id="three"
|
|
||||||
title="硬件产品"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="[1, 2, 3, 4]"
|
|
||||||
:page-size="2"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="my-card" :class="{active: isActive}">
|
|
||||||
<h2>{{ item }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.my-card {
|
|
||||||
background: #d9d9d9;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
90
src/views/product/project.vue
Normal file
90
src/views/product/project.vue
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
<script setup>
|
||||||
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
|
import {ref, onMounted} from 'vue'
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
// 资质证书
|
||||||
|
const certificateWidth = ref(1300)
|
||||||
|
const certificateHeight = ref(500)
|
||||||
|
|
||||||
|
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 a-c" :class="{active: isActive}">
|
||||||
|
<div v-for="(list, listIdx) in imgList" :index="list.id" class="flex j-c a-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 {
|
||||||
|
// margin-top: 60px;
|
||||||
|
.certificate {
|
||||||
|
margin-top: 40px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.label {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import {ref, onMounted} from 'vue'
|
|
||||||
import Swiper from '@/components/Swiper/index.vue'
|
|
||||||
import Banner from '@/components/Banner/index.vue'
|
|
||||||
|
|
||||||
const currentPage = ref(1)
|
|
||||||
|
|
||||||
onMounted(() => {})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<Banner class="banner" img="banner/product.png" />
|
|
||||||
<Swiper
|
|
||||||
id="one"
|
|
||||||
title="产品体系"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="[1, 2, 3, 4]"
|
|
||||||
:page-size="2"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="my-card" :class="{active: isActive}">
|
|
||||||
<h2>{{ item }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
<Swiper
|
|
||||||
id="two"
|
|
||||||
title="软件产品"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="[1, 2, 3, 4]"
|
|
||||||
:page-size="2"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="my-card" :class="{active: isActive}">
|
|
||||||
<h2>{{ item }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
<Swiper
|
|
||||||
id="three"
|
|
||||||
title="硬件产品"
|
|
||||||
v-model="currentPage"
|
|
||||||
:data="[1, 2, 3, 4]"
|
|
||||||
:page-size="2"
|
|
||||||
:show-pagination="false"
|
|
||||||
:auto-play="false"
|
|
||||||
>
|
|
||||||
<template #default="{item, index, isActive}">
|
|
||||||
<div class="my-card" :class="{active: isActive}">
|
|
||||||
<h2>{{ item }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.my-card {
|
|
||||||
background: #d9d9d9;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
96
src/views/product/softwareSystem.vue
Normal file
96
src/views/product/softwareSystem.vue
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref, onMounted, computed} from 'vue'
|
||||||
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
|
import Banner from '@/components/Banner/index.vue'
|
||||||
|
import {findLabelByUrl} from '@/utils'
|
||||||
|
|
||||||
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||||
|
|
||||||
|
import {useNavStore} from '@/store/nav'
|
||||||
|
|
||||||
|
const softwareSystemList = window.softwareSystemList
|
||||||
|
|
||||||
|
const navStore = useNavStore()
|
||||||
|
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
||||||
|
|
||||||
|
const swiperWidth = ref(1300)
|
||||||
|
const swiperHeight = ref(800)
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
const currentPage = ref(1)
|
||||||
|
|
||||||
|
// 点击标题跳转详情页
|
||||||
|
function titleClick(item) {
|
||||||
|
router.push({
|
||||||
|
path: '/product/detail',
|
||||||
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<Banner class="banner" img="banner/product.png" />
|
||||||
|
<Swiper
|
||||||
|
id="one"
|
||||||
|
:title="title"
|
||||||
|
v-model="currentPage"
|
||||||
|
:show-pagination="false"
|
||||||
|
:auto-play="false"
|
||||||
|
:source-width="swiperWidth"
|
||||||
|
:source-height="swiperHeight"
|
||||||
|
:showHover="false"
|
||||||
|
>
|
||||||
|
<template #default="{isActive}">
|
||||||
|
<div class="content flex j-c a-c wrap">
|
||||||
|
<div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
|
||||||
|
<div class="top">
|
||||||
|
<div class="title">{{ list.title }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
height: 100%;
|
||||||
|
.list {
|
||||||
|
margin-top: 60px;
|
||||||
|
margin: 0 15px;
|
||||||
|
width: 400px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-50px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
background-color: #0389ff;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: $black;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user