monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit a9352b5828b9134f3340830f464a52bbf6763107 1 parent 9ba1dec6

【无】门户网站-首页相关跳转及悬浮提示内容修改,产品服务一级页面相关特点内容修改

Inline Side-by-side
Showing 13 changed files with 122 additions and 69 deletions
@@ -2325,6 +2325,7 @@ blockquote:before { @@ -2325,6 +2325,7 @@ blockquote:before {
2325 font-size: 36px; 2325 font-size: 36px;
2326 color:#333333; 2326 color:#333333;
2327 line-height: normal; 2327 line-height: normal;
  2328 + font-family: 'MicrosoftYaHei-Bold';
2328 } 2329 }
2329 .title-intro{ 2330 .title-intro{
2330 font-size: 18px; 2331 font-size: 18px;
@@ -2880,3 +2881,13 @@ blockquote:before { @@ -2880,3 +2881,13 @@ blockquote:before {
2880 -webkit-animation-duration: 2.5s; 2881 -webkit-animation-duration: 2.5s;
2881 animation-duration: 2.5s; 2882 animation-duration: 2.5s;
2882 } 2883 }
  2884 +.info-system{
  2885 + text-align: center;
  2886 +}
  2887 +.alarm-info-container .info-intro{
  2888 + max-width: 1200px;
  2889 + margin:auto;
  2890 +}
  2891 +.compatible-item .title-style{
  2892 + font-size:28px;
  2893 +}
@@ -39,9 +39,27 @@ export function culturalDatas() { @@ -39,9 +39,27 @@ export function culturalDatas() {
39 ] 39 ]
40 return res; 40 return res;
41 } 41 }
42 -export function partnerDatas() {  
43 - let res = [  
44 - {img:'assets/img/about/partner/partner-1.png'}  
45 - ] 42 +export function imgsDatas() {
  43 + let res = [{
  44 + name:'质量管理体系认证证书',
  45 + path:'assets/img/about/certificate/1.png'
  46 + },{
  47 + name:'技术服务管理体系认证证书',
  48 + path:'assets/img/about/certificate/2.png'
  49 + },{
  50 + name:'连续性管理体系认证证书',
  51 + path:'assets/img/about/certificate/3.png'
  52 + },{
  53 + name:'信息安全管理体系认证证书',
  54 + path:'assets/img/about/certificate/4.png'
  55 + },{
  56 + path:'assets/img/about/certificate/5.png'
  57 + },{
  58 + path:'assets/img/about/certificate/6.png'
  59 + },{
  60 + path:'assets/img/about/certificate/7.png'
  61 + },{
  62 + path:'assets/img/about/certificate/8.png'
  63 + }]
46 return res; 64 return res;
47 } 65 }
@@ -29,6 +29,7 @@ export function compatibleDatas(){ @@ -29,6 +29,7 @@ export function compatibleDatas(){
29 logoUrl:'logo-dong-default', 29 logoUrl:'logo-dong-default',
30 logoUrlTip:'logo-dong', 30 logoUrlTip:'logo-dong',
31 urlName:'dong', 31 urlName:'dong',
  32 + title:'国产中间件兼容认证',
32 content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。' 33 content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
33 }, 34 },
34 { 35 {
@@ -36,6 +37,7 @@ export function compatibleDatas(){ @@ -36,6 +37,7 @@ export function compatibleDatas(){
36 logoUrl:'logo-da-default', 37 logoUrl:'logo-da-default',
37 logoUrlTip:'logo-da', 38 logoUrlTip:'logo-da',
38 urlName:'da', 39 urlName:'da',
  40 + title:'国产数据库兼容认证',
39 content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。' 41 content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。'
40 }, 42 },
41 { 43 {
@@ -43,6 +45,7 @@ export function compatibleDatas(){ @@ -43,6 +45,7 @@ export function compatibleDatas(){
43 logoUrl:'logo-nan-default', 45 logoUrl:'logo-nan-default',
44 logoUrlTip:'logo-nan', 46 logoUrlTip:'logo-nan',
45 urlName:'nan', 47 urlName:'nan',
  48 + title:'国产数据库兼容认证',
46 content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。' 49 content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。'
47 }, 50 },
48 { 51 {
@@ -50,6 +53,7 @@ export function compatibleDatas(){ @@ -50,6 +53,7 @@ export function compatibleDatas(){
50 logoUrl:'logo-ren-default', 53 logoUrl:'logo-ren-default',
51 logoUrlTip:'logo-ren', 54 logoUrlTip:'logo-ren',
52 urlName:'ren', 55 urlName:'ren',
  56 + title:'国产数据库兼容认证',
53 content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。' 57 content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。'
54 }, 58 },
55 { 59 {
@@ -57,6 +61,7 @@ export function compatibleDatas(){ @@ -57,6 +61,7 @@ export function compatibleDatas(){
57 logoUrl:'logo-tong-default', 61 logoUrl:'logo-tong-default',
58 logoUrlTip:'logo-tong', 62 logoUrlTip:'logo-tong',
59 urlName:'tong', 63 urlName:'tong',
  64 + title:'国产操作系统兼容认证',
60 content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。' 65 content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
61 } 66 }
62 ] 67 ]
@@ -3,49 +3,49 @@ export function productDatas(){ @@ -3,49 +3,49 @@ export function productDatas(){
3 { 3 {
4 title:'综合告警智能算法平台', 4 title:'综合告警智能算法平台',
5 // introduction:'能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力', 5 // introduction:'能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力',
6 - introData:['基于智能算法对告警消息压缩合并','支持固定阈值、同环比，预测性异常检测','自动化故障修复','自动化故障修复'], 6 + introData:['基于业务的告警统一管理','基于算法的智能合并降噪','支持固定阈值、同环比，预测性异常检测','兼容并包，开放告警'],
7 type:'alarm' 7 type:'alarm'
8 }, 8 },
9 { 9 {
10 title:'综合监控管理A-view', 10 title:'综合监控管理A-view',
11 // introduction:'全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展', 11 // introduction:'全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展',
12 - introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 12 + introData:['强化主动监控，实现集中管理','灵活定制的自动化巡检','快速定位故障，恢复系统运行','提高运行效率，合理利用IT资源','提供统计分析和决策支持'],
13 type:'Aview' 13 type:'Aview'
14 }, 14 },
15 { 15 {
16 title:'CMDB资产管理', 16 title:'CMDB资产管理',
17 introduction:'建立以应用为中心的资源 管理模型，促进资产到资源的转变', 17 introduction:'建立以应用为中心的资源 管理模型，促进资产到资源的转变',
18 - introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 18 + introData:['随需而动的资源管理模型','独有的双模自动发现能力','面向业务的关联分析','丰富多样的服务化API'],
19 type:'cmdb' 19 type:'cmdb'
20 }, 20 },
21 { 21 {
22 title:'业务及应用综合分析平台', 22 title:'业务及应用综合分析平台',
23 introduction:'全新的端到端，全链路的应用性能管理平台，对业务性能问题进行快速发现，帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控', 23 introduction:'全新的端到端，全链路的应用性能管理平台，对业务性能问题进行快速发现，帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控',
24 - // introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 24 + introData:['全量的性能追踪和业务数据采集 ','分层级展示调用关系拓扑','业务关联性能数据分析'],
25 type:'businessApp' 25 type:'businessApp'
26 }, 26 },
27 { 27 {
28 title:'日志综合智能分析平台', 28 title:'日志综合智能分析平台',
29 introduction:'通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。', 29 introduction:'通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。',
30 - introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 30 + introData:['高效数据处理能力','基于策略分析的安全事件响应','可视化日志展示','海量日志全生命周期管理'],
31 type:'securityLog' 31 type:'securityLog'
32 }, 32 },
33 { 33 {
34 title:'信息化协同管理支撑平台', 34 title:'信息化协同管理支撑平台',
35 introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。', 35 introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。',
36 - introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 36 + introData:['信息、流程、时间全面统一，高效协同','理清流程、制度落地，业务按标准执行','流程申请、流程进度、流程审批全程可观'],
37 type:'information' 37 type:'information'
38 }, 38 },
39 { 39 {
40 title:'魔镜智能运维管理一体机', 40 title:'魔镜智能运维管理一体机',
41 - introduction:'数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',  
42 - introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 41 + // introduction:'数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',
  42 + introData:['动态关联IT与业务','故障根因分析溯源','业务健康随时掌控','提供IT规划参考依据','智能告警运维服务'],
43 type:'maintenance' 43 type:'maintenance'
44 }, 44 },
45 { 45 {
46 title:'魔镜智能多云运维平台', 46 title:'魔镜智能多云运维平台',
47 introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。', 47 introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。',
48 - introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'], 48 + introData:['多云资源统一管理','多云环境自动化编排','多云资源统一运维和监控','多维数据可视化'],
49 type:'cloud' 49 type:'cloud'
50 } 50 }
51 ] 51 ]
@@ -443,9 +443,15 @@ export function alarm() { @@ -443,9 +443,15 @@ export function alarm() {
443 introduction:'在告警降噪过程中，通过配置适当的合并规则，将具有相似特征的告警合并到同一个分组中，实现批量的通知。例如可以设置将相同应用的告警进行合并，从而避免同一个应用的多个告警频繁触发通知。', 443 introduction:'在告警降噪过程中，通过配置适当的合并规则，将具有相似特征的告警合并到同一个分组中，实现批量的通知。例如可以设置将相同应用的告警进行合并，从而避免同一个应用的多个告警频繁触发通知。',
444 img:'assets/img/serviceSecond/alarm/noiseReduce.png', 444 img:'assets/img/serviceSecond/alarm/noiseReduce.png',
445 type:'noiseReduce', 445 type:'noiseReduce',
446 - subTitle:'兼容并包:开放告警',  
447 - subIntro:'对于已有的监控系统产生的告警，或者多云场景下的告警，也可以通过开放告警的方式统一接入到综合告警算法平台，进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGERGRAFANA、ZABBIXDATADOGLOKIAWS CLOUDWATCH.NEW RELIC 华为云云监控等十多个监控源，对各个不同系统的告警进行管理。', 446 + // subTitle:'兼容并包:开放告警',
  447 + // subIntro:'对于已有的监控系统产生的告警，或者多云场景下的告警，也可以通过开放告警的方式统一接入到综合告警算法平台，进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGERGRAFANA、ZABBIXDATADOGLOKIAWS CLOUDWATCH.NEW RELIC 华为云云监控等十多个监控源，对各个不同系统的告警进行管理。',
448 }, 448 },
  449 + {
  450 + title:'兼容并包:开放告警',
  451 + introduction:'对于已有的监控系统产生的告警，或者多云场景下的告警，也可以通过开放告警的方式统一接入到综合告警算法平台，进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGER、GRAFANA、ZABBIX、DATADOG、LOKI、AWS CLOUDWATCH、NEW RELIC、华为云云监控等十多个监控源，对各个不同系统的告警进行管理。',
  452 + img:'assets/img/serviceSecond/alarm/inclusive.png',
  453 + type:'inclusive'
  454 + }
449 ] 455 ]
450 } 456 }
451 457
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 //lsq 设置置顶之后的logo图片 2022-09-20 30 //lsq 设置置顶之后的logo图片 2022-09-20
31 let path=window.location.hash; 31 let path=window.location.hash;
32 let pathArr=path.split('/'); 32 let pathArr=path.split('/');
33 - if(pathArr.length>2){ 33 + if(pathArr.length>2 && window.location.hash.indexOf('#/about')==-1){
34 $('.logo-outer .hg-logo').attr('src','assets/img/logo.png'); 34 $('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
35 $('.navigation').removeClass('navigation-white'); 35 $('.navigation').removeClass('navigation-white');
36 }else{ 36 }else{
@@ -81,7 +81,7 @@ @@ -81,7 +81,7 @@
81 <router-link to="/services">产品及服务</router-link> 81 <router-link to="/services">产品及服务</router-link>
82 </li> 82 </li>
83 <li top-nav="about"> 83 <li top-nav="about">
84 - <router-link to="/about">了解鸿果</router-link> 84 + <router-link to="/about/0">了解鸿果</router-link>
85 </li> 85 </li>
86 <li top-nav="concat"> 86 <li top-nav="concat">
87 <router-link to="/concat">加入我们</router-link> 87 <router-link to="/concat">加入我们</router-link>
@@ -132,10 +132,10 @@ @@ -132,10 +132,10 @@
132 <h4 class="footer-title">产品内容</h4> 132 <h4 class="footer-title">产品内容</h4>
133 <div class="widget-content"> 133 <div class="widget-content">
134 <ul> 134 <ul>
135 - <li><a href="#">综合告警智能算法平台</a></li>  
136 - <li><a href="#">综合监控管理A-view</a></li>  
137 - <li><a href="#">CMDB资产管理</a></li>  
138 - <li><a href="#">业务及应用综合分析平台</a></li> 135 + <li><router-link to="/services/alarm">综合告警智能算法平台</router-link></li>
  136 + <li><router-link to="/services/Aview">综合监控管理A-view</router-link></li>
  137 + <li><router-link to="/services/cmdb">CMDB资产管理</router-link></li>
  138 + <li><router-link to="/services/businessApp">业务及应用综合分析平台</router-link></li>
139 </ul> 139 </ul>
140 </div> 140 </div>
141 </div> 141 </div>
@@ -146,10 +146,10 @@ @@ -146,10 +146,10 @@
146 <h4 style=" font-weight: 600;position: relative;margin-bottom: 40px;text-transform: capitalize;">&nbsp;</h4> 146 <h4 style=" font-weight: 600;position: relative;margin-bottom: 40px;text-transform: capitalize;">&nbsp;</h4>
147 <div class="widget-content"> 147 <div class="widget-content">
148 <ul> 148 <ul>
149 - <li><a href="#">日志综合智能分析平台</a></li>  
150 - <li><a href="#">信息化协同管理支撑平台</a></li>  
151 - <li><a href="#">魔镜智能运维管理一体机</a></li>  
152 - <li><a href="#">魔镜智能多云运维平台</a></li> 149 + <li><router-link to="/services/securityLog">日志综合智能分析平台</router-link></li>
  150 + <li><router-link to="/services/information">信息化协同管理支撑平台</router-link></li>
  151 + <li><router-link to="/services/maintenance">魔镜智能运维管理一体机</router-link></li>
  152 + <li><router-link to="/services/cloud">魔镜智能多云运维平台</router-link></li>
153 </ul> 153 </ul>
154 </div> 154 </div>
155 </div> 155 </div>
@@ -164,12 +164,12 @@ @@ -164,12 +164,12 @@
164 <div class="col-sm-5"> 164 <div class="col-sm-5">
165 <div class="footer-widget links-widget"> 165 <div class="footer-widget links-widget">
166 <h4 class="footer-title">关于我们</h4> 166 <h4 class="footer-title">关于我们</h4>
167 - <div class="widget-content"> 167 + <div class="widget-content about-widget-content">
168 <ul> 168 <ul>
169 <li> 169 <li>
170 - <router-link to="/about">公司简介</router-link> 170 + <router-link to="/about/1" data-id="1">公司简介</router-link>
171 </li> 171 </li>
172 - <li><a href="#">合作流程</a></li> 172 + <li><router-link to="/about/6" data-id="6">合作流程</router-link></li>
173 </ul> 173 </ul>
174 </div> 174 </div>
175 </div> 175 </div>
1 export default { 1 export default {
2 mounted() { 2 mounted() {
3 this.pageInit() 3 this.pageInit()
  4 + if(window.location.hash.indexOf('#/about')!=-1){
  5 + $('.footer-section').hide();
  6 + let html=`<section>
  7 + <footer class="footer-section pt-100 footer-section-about">`+$('.footer-section').html()+`</footer>
  8 + </section>`
  9 + $('.wrap-container').append(html)
  10 + }else{
  11 + $('.footer-section').show();
  12 + }
4 }, 13 },
5 create(){ 14 create(){
6 this.pageInit() 15 this.pageInit()
@@ -217,7 +226,7 @@ export default { @@ -217,7 +226,7 @@ export default {
217 var target = $(this).attr('data-target'); 226 var target = $(this).attr('data-target');
218 //lsq 产品二级页面的二级导航锚点 2022-09-19 227 //lsq 产品二级页面的二级导航锚点 2022-09-19
219 let top=$(target).offset().top 228 let top=$(target).offset().top
220 - if($(this).hasClass('tab-item')){ 229 + if($(this).hasClass('tab-item') || $(this).hasClass('scroll-item')){
221 top-=100; 230 top-=100;
222 } 231 }
223 // animate 232 // animate
@@ -10,7 +10,7 @@ const routes = [ @@ -10,7 +10,7 @@ const routes = [
10 component: () => myImport('views/services/index') 10 component: () => myImport('views/services/index')
11 }, 11 },
12 { 12 {
13 - path: '/about', 13 + path: '/about/:id',
14 name: 'about', 14 name: 'about',
15 component: () => myImport('views/about/index') 15 component: () => myImport('views/about/index')
16 }, 16 },
1 import pageInit from "../../minixs/pageInit.js"; 1 import pageInit from "../../minixs/pageInit.js";
2 -import {culturalValuesDatas,culturalDatas} from "../../../../assets/img/data/aboutData.js";  
3 - 2 +import {culturalValuesDatas,culturalDatas,imgsDatas} from "../../../../assets/img/data/aboutData.js";
4 export default { 3 export default {
5 name: 'home', 4 name: 'home',
6 template: '', 5 template: '',
@@ -8,30 +7,11 @@ export default { @@ -8,30 +7,11 @@ export default {
8 components: {}, 7 components: {},
9 props: [], 8 props: [],
10 setup(props, {attrs, slots, emit}) { 9 setup(props, {attrs, slots, emit}) {
  10 + const {proxy} = Vue.getCurrentInstance();
11 let culturalValuesData=Vue.ref(culturalValuesDatas()); 11 let culturalValuesData=Vue.ref(culturalValuesDatas());
12 let culturalData=Vue.ref(culturalDatas()); 12 let culturalData=Vue.ref(culturalDatas());
13 13
14 - var imgs = [{  
15 - name:'质量管理体系认证证书',  
16 - path:'assets/img/about/certificate/1.png'  
17 - },{  
18 - name:'技术服务管理体系认证证书',  
19 - path:'assets/img/about/certificate/2.png'  
20 - },{  
21 - name:'连续性管理体系认证证书',  
22 - path:'assets/img/about/certificate/3.png'  
23 - },{  
24 - name:'信息安全管理体系认证证书',  
25 - path:'assets/img/about/certificate/4.png'  
26 - },{  
27 - path:'assets/img/about/certificate/5.png'  
28 - },{  
29 - path:'assets/img/about/certificate/6.png'  
30 - },{  
31 - path:'assets/img/about/certificate/7.png'  
32 - },{  
33 - path:'assets/img/about/certificate/8.png'  
34 - }]; 14 + var imgs = Vue.ref(imgsDatas());
35 let flag =Vue.ref(true); 15 let flag =Vue.ref(true);
36 let i=Vue.ref(0); 16 let i=Vue.ref(0);
37 let MousewheelFun=(e)=>{ 17 let MousewheelFun=(e)=>{
@@ -43,7 +23,6 @@ export default { @@ -43,7 +23,6 @@ export default {
43 if(e.deltaY<0){ 23 if(e.deltaY<0){
44 // 不能上滑了 24 // 不能上滑了
45 if(i.value>0){ 25 if(i.value>0){
46 - console.log(i)  
47 i.value--; 26 i.value--;
48 flag.value = false; 27 flag.value = false;
49 $('.wrap-container').animate({top:-i.value*hei},1000,function(){ 28 $('.wrap-container').animate({top:-i.value*hei},1000,function(){
@@ -62,6 +41,11 @@ export default { @@ -62,6 +41,11 @@ export default {
62 } 41 }
63 } 42 }
64 } 43 }
  44 + setNavStyle();
  45 +
  46 + }
  47 + // 设置导航的样式
  48 + let setNavStyle=()=>{
65 if(i.value==2 || i.value==4 || i.value==6){ 49 if(i.value==2 || i.value==4 || i.value==6){
66 $('.navigation').removeClass('navigation-white'); 50 $('.navigation').removeClass('navigation-white');
67 $('.logo-outer .hg-logo').attr('src','assets/img/logo.png'); 51 $('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
@@ -71,18 +55,35 @@ export default { @@ -71,18 +55,35 @@ export default {
71 $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png'); 55 $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
72 56
73 } 57 }
74 -  
75 } 58 }
76 //联系方式是否出现 59 //联系方式是否出现
77 let isConcat=Vue.ref(false); 60 let isConcat=Vue.ref(false);
78 - Vue.onMounted(() =>{  
79 - if(window.location.hash=='#/about'){  
80 - $('.footer-section').hide();  
81 - let html=`<section>  
82 - <footer class="footer-section pt-100 footer-section-about">`+$('.footer-section').html()+`</footer>  
83 - </section>`  
84 - $('.wrap-container').append(html) 61 + //设置从footer进入页面的显示位置
  62 + let setFormFooter=(item)=>{
  63 + let id=proxy.$route.params.id;
  64 + if(item){
  65 + id=item;
85 } 66 }
  67 + if(id){
  68 + i.value=id;
  69 + let hei=$('.wrap-container>section').first().outerHeight();
  70 + flag.value = false;
  71 + $('.wrap-container').animate({top:-i.value*hei},1000,function(){
  72 + flag.value=true;
  73 + })
  74 + setTimeout(function (){
  75 + $('.wrap-container section:nth-child('+(Number(i.value)+1)+') .wow').removeAttr('style');
  76 + $('.about-widget-content li a').unbind('click.about').on('click.about',function (){
  77 + setFormFooter($(this).data('id'));
  78 + })
  79 + setNavStyle()
  80 + },300)
  81 +
  82 + }
  83 + }
  84 + Vue.onMounted(() =>{
  85 + setFormFooter();
  86 +
86 }) 87 })
87 88
88 89
@@ -93,7 +94,9 @@ export default { @@ -93,7 +94,9 @@ export default {
93 MousewheelFun, 94 MousewheelFun,
94 flag, 95 flag,
95 i, 96 i,
96 - isConcat 97 + isConcat,
  98 + setNavStyle,
  99 + setFormFooter
97 } 100 }
98 101
99 } 102 }
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 <div class="owl-carousel owl-theme owl-loaded all-height"> 14 <div class="owl-carousel owl-theme owl-loaded all-height">
15 <div class="owl-stage-outer owl-height all-height"> 15 <div class="owl-stage-outer owl-height all-height">
16 <div class="owl-stage all-height"> 16 <div class="owl-stage all-height">
17 - <div class="owl-item all-height" v-for="(item,index) in homeData" :style="'background: url(assets/img/index/' + (index+1) + '.png);background-size:cover;'"> 17 + <div :class="['owl-item', 'all-height',{'scroll-to-target':index==0,'cursor-pointer':index==0,'scroll-item':index==0}] " data-target=".team-section" v-for="(item,index) in homeData" :style="'background: url(assets/img/index/' + (index+1) + '.png);background-size:cover;'">
18 <!-- <img :src="'assets/img/index/' + (index+1) + '.png'" class="d-block w-100 h-75">--> 18 <!-- <img :src="'assets/img/index/' + (index+1) + '.png'" class="d-block w-100 h-75">-->
19 <div :class="['owl-item-content']"> 19 <div :class="['owl-item-content']">
20 <div :class="['owl-item-title', 'font-size-42',{'text-align-center':index==2}]">{{item.title}}</div> 20 <div :class="['owl-item-title', 'font-size-42',{'text-align-center':index==2}]">{{item.title}}</div>
@@ -46,8 +46,9 @@ @@ -46,8 +46,9 @@
46 </div> 46 </div>
47 <div class="tech-title-num">{{item.id}}</div> 47 <div class="tech-title-num">{{item.id}}</div>
48 <div class="tech-title pt-30 pb-30">{{item.title}}</div> 48 <div class="tech-title pt-30 pb-30">{{item.title}}</div>
49 - <div :class="[ 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]">  
50 - {{item.tipIntro}} 49 + <div :class="[ 'tooltip', 'tooltip-self','flex-column-center',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
  50 + <div>{{item.title}}</div>
  51 + <div>{{item.tipIntro}}</div>
51 </div> 52 </div>
52 </div> 53 </div>
53 </div> 54 </div>
@@ -133,7 +134,7 @@ @@ -133,7 +134,7 @@
133 134
134 <section class="team-section rel pt-80 pb-80"> 135 <section class="team-section rel pt-80 pb-80">
135 <div class="container"> 136 <div class="container">
136 - <div class="section-title mb-35 pr-65 align-items-center flex-column-center"> 137 + <div class="mb-35 pr-65 align-items-center flex-column-center">
137 <div class="title-style">"魔镜智能"全面完成国产化兼容适配认证</div> 138 <div class="title-style">"魔镜智能"全面完成国产化兼容适配认证</div>
138 <div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div> 139 <div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div>
139 </div> 140 </div>
@@ -152,7 +153,7 @@ @@ -152,7 +153,7 @@
152 <img :src="'assets/img/index/'+item.logoUrlTip+'.png'" alt=""> 153 <img :src="'assets/img/index/'+item.logoUrlTip+'.png'" alt="">
153 </div> 154 </div>
154 <div class="item-content flex-column-start flex-text-left"> 155 <div class="item-content flex-column-start flex-text-left">
155 - <div class="title-style pt-30">国产中间件兼容认证</div> 156 + <div class="title-style pt-30">{{item.title}}</div>
156 <div class="item-text title-intro pt-30"> 157 <div class="item-text title-intro pt-30">
157 {{item.content}} 158 {{item.content}}
158 </div> 159 </div>
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 </section> 27 </section>
28 28
29 29
30 -<section :class="['info-container', 'rel', {'mb-70':item.type=='noiseReduce' || item.type=='lifeCycle'}, 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in alarmData.data" :key="item"> 30 +<section :class="['info-container','alarm-info-container', 'rel', {'mb-70': item.type=='lifeCycle' || item.type=='inclusive'}, 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in alarmData.data" :key="item">
31 <div class="div-type" :data-type="item.type" ></div> 31 <div class="div-type" :data-type="item.type" ></div>
32 <div class="container"> 32 <div class="container">
33 <h3 class="info-title">{{item.title}}</h3> 33 <h3 class="info-title">{{item.title}}</h3>