monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 30d7a0d3ab6898670d28d9ccaef02278baf11d2f 2 parents 03a908a3 ff9c15ee wangfeng-mj ... master-500-dev master-500-dev-0327 master-500-dev-joke master-500-dev-lushangqing master-500-dev-lzc master-500-dev-xwx master-500-dev-yuanjinpeng master-500-dev-ztq1 master-mj master-mj-610 master-mj-joke master-mj-yuanjinpeng master-mj-ztq wangfeng-500-dev

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

【无】公司网站-bug修改 #1



See merge request !1032
Inline Side-by-side
Showing 14 changed files with 168 additions and 38 deletions
... ... @@ -2148,10 +2148,13 @@ blockquote:before {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.list-style-li{
padding:5px;
font-size: 14px;
font-size: 16px;
color:#666;
font-family: "PingFang-SC-medium";
}
.list-style{
width: 8px;
... ... @@ -2351,6 +2354,18 @@ blockquote:before {
max-width: 1380px;
}
}
.title-style-top{
font-size: 42px;
color: #ffffff;
line-height: normal;
font-family: 'MicrosoftYaHei-Bold';
}
.title-intro-top{
font-size: 21px;
color: #fff;
font-family: 'PingFang-SC-medium';
line-height: 34px;
}
.title-style{
font-size: 36px;
color:#333333;
... ... @@ -2833,26 +2848,28 @@ blockquote:before {
/*lsq 产品中心样式调整*/
.product-title{
color:#1068e2;
font-size:28px;
font-size:36px;
font-family: 'PingFang-SC-heavy';
}
.product-intro{
color:#666;
font-size:18px;
font-family: 'PingFang-SC-medium';
font-size:16px;
font-family: 'PingFang-SC-light';
}
.product-intro-li{
display: flex;
align-items: center;
color:#333;
font-size: 18px;
font-size: 21px;
line-height: 34px;
font-family: 'PingFang-SC-regular';
}
.circle-product{
background: #1068e2;
width:10px;
height: 10px;
border-radius: 50%;
margin-right:10px;
margin-right:20px;
}
.product-bg{
background-repeat: no-repeat;
... ... @@ -2890,7 +2907,7 @@ blockquote:before {
background-image:url("../img/services/8.png");
}
.product-section{
height: calc(80vh);
height: calc(60vh);
}
.product-section .product{
height:100%;
... ... @@ -3360,3 +3377,64 @@ blockquote:before {
.cmdb-advantage-con .app-advantage-style{
padding:60px 40px 0;
}
.con-title-21{
font-size:21px;
}
.con-title-active{
color:#e4312a;
}
.con-intro{
font-size: 16px;
color:#666;
font-family: 'PingFang-SC-medium';
}
/*业务及应用*/
.kpi-con{
color:#fff;
font-size: 18px;
background: #e4312a;
padding: 30px 0;
border-radius: 3px;
text-align: center;
}
.kpi-row{
justify-content: space-between;
}
.kpi-item{
max-width: 170px;
padding:0;
}
.com-item-title{
font-size: 21px;
color:#333333;
background: #f7f7f7;
padding:20px;
text-align: center;
}
.com-item-li{
font-size: 16px;
color:#666;
padding: 4px 10px;
font-family: 'PingFang-SC-medium';
display: flex;
align-items: center;
}
.com-item-li .list-style{
background-color: #666;
}
.com-item-con{
border:1px solid #999;
}
.row-com{
box-shadow: 0 0 8px rgba(0,0,0,.2);
}
.com-item-ul{
padding:15px 0;
min-height:254px;
}
.com-item{
padding:0;
}
\ No newline at end of file
... ...

18.7 KB | W: | H:

19.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -2,13 +2,13 @@ export function productDatas(){
let res=[
{
title:'综合告警智能算法平台',
// introduction:'能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力',
introduction:'能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力',
introData:['基于业务的告警统一管理','基于算法的智能合并降噪','支持固定阈值、同环比，预测性异常检测','兼容并包，开放告警'],
type:'alarm'
},
{
title:'综合监控管理A-view',
// introduction:'全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展',
introduction:'全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展',
introData:['强化主动监控，实现集中管理','灵活定制的自动化巡检','快速定位故障，恢复系统运行','提高运行效率，合理利用IT资源','提供统计分析和决策支持'],
type:'Aview'
},
... ... @@ -38,13 +38,13 @@ export function productDatas(){
},
{
title:'魔镜智能运维管理一体机',
// introduction:'数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',
introduction:'数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',
introData:['动态关联IT与业务','故障根因分析溯源','业务健康随时掌控','提供IT规划参考依据','智能告警运维服务'],
type:'maintenance'
},
{
title:'魔镜智能多云运维平台',
introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。',
introduction:'支持了国内外所有主流云厂商，包含混合云、多云环境下对云资源统一管理和调度，提供系统映像、通过既定策略优化工作负载，系统运行状态，以及任务执行过程的可视化监控，并提供丰富的告警机制帮助客户进行快速处理。对复杂的多云异构环境实现统一管理（虚拟化平台、超融合、私有云、专有云、公有云、混合云中任意组合）提供便捷的管理操作，从基础设施到应用实现全栈管理',
introData:['多云资源统一管理','多云环境自动化编排','多云资源统一运维和监控','多维数据可视化'],
type:'cloud'
}
... ...
... ... @@ -2,7 +2,7 @@
export function Information() {
let res={
title:'信息化协同管理支撑平台',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。',
data:[
{
title:'产品信息',
... ... @@ -99,7 +99,7 @@ export function Information() {
export function securityLog() {
let res={
title:'日志综合智能分析平台',
introduction:'基于自主知识产权的非关系型数据存储系统的新一代海量日志管理系统。系统采用主被动结合技术手段，7×24小时实时采集网络中安全设备、网络设备、服务器资源和应用系统的日志。通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。系统满足《中华人民共和国网络安全法》、等级保护、分级保护、金融行业监管条例、82号令以及国家安全要求等法律法规相关要求，为客户开展合规性建设工作提供技术支撑。',
introduction:'通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。',
data:[
{
title:'产品信息',
... ... @@ -183,12 +183,12 @@ export function securityLog() {
export function businessApp () {
let res={
title:'业务及应用综合分析平台',
introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升幵发运维效率、改善用户体验。',
introduction:'全新的端到端，全链路的应用性能管理平台，对业务性能问题进行快速发现，帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控。',
data:[
{
title:'产品信息',
subTitle:'随时掌握应用性能对业务的影响',
introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升幵发运维效率、改善用户体验。',
introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升开发运维效率、改善用户体验。',
type:'info',
subImg:'assets/img/serviceSecond/businessApp/info.png',
dataIcon:[
... ... @@ -196,6 +196,7 @@ export function businessApp () {
{icon:'assets/img/serviceSecond/businessApp/info-icon-2.png'},
{icon:'assets/img/serviceSecond/businessApp/info-icon-3.png'},
{icon:'assets/img/serviceSecond/businessApp/info-icon-4.png'},
{icon:'assets/img/serviceSecond/businessApp/info-icon-5.png'},
]
},
{
... ... @@ -268,6 +269,39 @@ export function businessApp () {
],
type:'value'
},
{
title:'主要监控指标',
introduction:'',
dataKpi:['响应时间','吞吐率','错误率','Apdex','CPU使用率','内存和GC'],
type:'kpi'
},
{
title:'组件支持',
introduction:'',
dataCom:[
{
title:'JVM',
introData:['IBM J9 VM','OpenJDK','Oracle/BEA Jrockit','SUN JDK']
},
{
title:'消息中间件',
introData:['ActiveMQ','JMS and Spring-JMS','RabbitMQ']
},
{
title:'NoSQL',
introData:['Lettuce','Memcached','MongoDB','Redis']
},
{
title:'RPC',
introData:['Dubbo','GRPC','Twitter Finagle','Thrift']
},
{
title:'应用容器',
introData:['Apache Resin','Apache Tomcat','Eclipse Jetty','IBM WebSphere','WebLogic Server','Wildfly']
}
],
type:'component'
}
]
}
... ... @@ -277,11 +311,11 @@ export function businessApp () {
export function maintenance() {
let res={
title:'魔镜智能运维管理一体机',
introduction:'智能运维服务一体机提供数据中心各类计算存储设备、网络安全设备、虚拟化/云平台、数据库、中间件、容器、微服务、Hadoop 业务应用等设备进行实时采集、实时分析、异常报警、集中存储和事后分析功能，具备全南的监控分析能力。帮助用户有效降低系统故障，降任运维成本及管理的复杂度，异著提高系统格体的安全性，可靠性和运行效率，保障设备7x24小时正常、持续、稳定运行。',
introduction:'数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',
data:[
{
title:'产品信息',
introduction:'智能运维服务一体机提供数据中心各类计算存储设备、网络安全设备、虚拟化/云平台、数据库、中间件、容器、微服务、Hadoop 业务应用等设备进行实时采集、实时分析、异常报警、集中存储和事后分析功能，具备全南的监控分析能力。帮助用户有效降低系统故障，降任运维成本及管理的复杂度，异著提高系统格体的安全性，可靠性和运行效率，保障设备7x24小时正常、持续、稳定运行。',
introduction:'智能运维服务一体机提供数据中心各类服务器、存储设备、网络设备、虚拟化、安全设备、数据库、中间件、操作系统等设备进行实时采集、实时分析、异常报警、集中存储和事后分析功能，具备全面的监控分析能力。帮助用户有效降低系统故障，降低运维成本及管理的复杂度，显著提高系统整体的安全性、可靠性和运行效率，保障设备7x24小时正常、持续、稳定运行。',
type:'info',
img:'assets/img/serviceSecond/maintenance/info.png'
},
... ... @@ -298,7 +332,7 @@ export function maintenance() {
img:'assets/img/serviceSecond/maintenance/problems-2.png'
},
{
introduction:'系统故障根因定位困难，"主要依靠专家经验或手工分析，耗时费力，无法快速判定故障点',
introduction:'系统故障根因定位困难，主要依靠专家经验或手工分析，耗时费力，无法快速判定故障点',
img:'assets/img/serviceSecond/maintenance/problems-3.png'
},
{
... ... @@ -391,7 +425,7 @@ export function maintenance() {
export function alarm() {
let res={
title:'综合告警智能算法平台',
introduction:'接入各个监控平台的告警与事件，通讨智能算法关联压缩告警数据，帮助识别告警根源，通过自动去重，规则压缩，算法降噪，实现告警降噪，帮助运维团队减少告警，避免告警风暴;同时通过分派、排班、通知等功能，快速实现告警流程化管理，帮助运维团队更快响应告警，以多种方式通知告警到相关人员，全面提升告警管理能力',
introduction:'能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力。',
data:[
{
title:'产品信息',
... ... @@ -461,7 +495,7 @@ export function alarm() {
export function Aview() {
let res={
title:'综合监控管理A-view',
introduction:'建立智能IT运维监控平台， 对网络、硬件、安全设备、操作系统、数据库、中间件、应用系统等资源实时监控采集，能够自动地收集信息系统中各类IT资源设备运行状态、数据库状态、中间件运行状态和网络状态等，发现各类IT资源运行过程中的异常。依据业务视角和设备视角分析发现已发生和潜在的各类资源问题，及时通知相关责任人和启动相关运维流程。',
introduction:'全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展',
data:[
{
title:'产品信息',
... ... @@ -627,7 +661,7 @@ export function Aview() {
export function cmdb() {
let res={
title:'CMDB资产管理',
introduction:'CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
introduction:'建立以应用为中心的资源 管理模型，促进资产到资源的转变。',
data:[
{
title:'产品信息',
... ... @@ -791,7 +825,7 @@ export function cmdb() {
export function cloud() {
let res={
title:'魔镜智能多云运维平台',
introduction:'支持了国内外所有主流云厂商，包含混合云、多云环境下对计算资源的集中管理，自动化运维、监控、合规审计、多云纳管、云资源全生命周期等多个维度提供统一运维管控，提供系统映像、通过既定策略优化工作负载，系统运行状态，以及任务执行过程的可视化监控，并提供丰富的告警机制帮助客户进行快速处理，从而进行灵活的资源管理与运维。',
introduction:'对复杂的多云异构环境实现统一管理（虚拟化平台、超融合、私有云、专有云、公有云、混合云中任意组合）提供便捷的管理操作，从基础设施到应用实现全栈管理。',
data:[
{
title:'产品信息',
... ...

74.7 KB | W: | H:

74.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

189 KB | W: | H:

75.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

75.1 KB | W: | H:

189 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -191,7 +191,7 @@
<div class="about-concat-con">
<div class="about-concat-btn" @click="isConcat=!isConcat">
<span v-if="!isConcat">联系咨询我们</span>
<span v-if="isConcat">029-89194260</span>
<span v-if="isConcat">010-51726651</span>
</div>
</div>
<div class="about-concat-bg"></div>
... ...
... ... @@ -14,7 +14,7 @@
<section class="concat-concat rel rpt-150 pb-130 rpb-0 text-left ">
<div class="color-white mb-2 title-style font-size-42">加入鸿果，成为你想成为的人</div>
<div class="color-white mb-2 pt-20 font-size-24">齐心协力、积极乐观、共同发展、团队共赢！</div>
<div class="color-white mb-2 title-intro pt-20">具备足够的勇气及长远的眼光，大家携手一起，齐心协力，积极乐观，超共同的目标前进实现共同发展及利益最大化</div>
<div class="color-white mb-2 title-intro pt-20">具备足够的勇气及长远的眼光，大家携手一起，齐心协力，积极乐观，朝共同的目标前进实现共同发展及利益最大化</div>
<div class="concat-btn mt-50" @click="routerPath('sale')">
<span class="mr-15">招贤纳士</span> <img src="assets/img/concat/arrow-right.png" alt="">
</div>
... ... @@ -90,7 +90,7 @@
<div class="row">
<div class="col-lg-10 col-md-12">
<h5>加入鸿果</h5>
<span class="mb-15 weFooterColor">鸿果科技依托"金税三期"、"互联网+智能化AI+行业应用"的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈</span>
<span class="mb-15 weFooterColor">鸿果科技依托“金税三期”、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈</span>
<h5 class="mt-25 mb-10">热门职位</h5>
<ul class="weFooterList">
<li class="weFooterColor cursor-pointer mb-10" v-for="(item,index) in recruitHot.data" :key="index">
... ...
... ... @@ -19,7 +19,7 @@
<div :class="['owl-item-content']">
<div :class="['owl-item-title', 'font-size-42',{'text-align-center':index==2}]">{{item.title}}</div>
<div class="owl-item-title font-size-42" v-if="item.title1">{{item.title1}}</div>
<div :class="['owl-item-intro', 'font-size-14', 'pt-30',{'text-align-center':index==2,'max-width-6':index!=2}]">{{item.introduction}}</div>
<div :class="['owl-item-intro', 'title-intro-top', 'pt-30',{'text-align-center':index==2,'max-width-6':index!=2}]">{{item.introduction}}</div>
<div :class="['owl-item-button', 'pt-30',{'text-align-center':index==2}]" >
<span class="home-button btn-service" v-if="item.isService" @click="jumpSecond('services')">查看产品</span>
<span class="home-button btn-concat" v-if="item.isConcat" @click="jumpSecond('concat')">联系我们</span>
... ... @@ -44,7 +44,7 @@
<div>
<img :src="'assets/img/technology/technology-'+item.id+'.png'" alt="Service Icon">
</div>
<div class="tech-title-num">{{item.id}}</div>
<div class="tech-title-num">{{index+1}}</div>
<div class="tech-title pt-30 pb-30">{{item.title}}</div>
<div :class="[ 'tooltip', 'tooltip-self','flex-column-center',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
<div>{{item.title}}</div>
... ...
... ... @@ -89,7 +89,7 @@
<div :class="['pro-info-title']">
<div class=" advantage-title-Aview">{{itemV.title}}</div>
<ul class="pro-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
<div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+3}}</div>
<div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+4}}</div>
</div>
</div>
</div>
... ...
... ... @@ -27,7 +27,7 @@
</section>
<section :class="['info-container', 'rel', 'pt-55',{'info-container-bg':item.type=='character','pb-50':item.type=='value'}]" v-for="(item,index) in businessAppData.data" :key="item">
<section :class="['info-container', 'rel', 'pt-55',{'info-container-bg':item.type=='character','pb-50':item.type=='component'}]" v-for="(item,index) in businessAppData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<div class="info-title">{{item.title}}</div>
... ... @@ -51,7 +51,8 @@
<div class="div-img text-center">
<img :src="itemA.img" alt="">
</div>
<ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30']" v-if="valueContent && itemA.introData.length>0">
<div class="cloud-c-title pt-30">{{itemA.title}}</div>
<ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30','pl-20','pr-20']" v-if="valueContent && itemA.introData.length>0">
<li :class="['list-style-li',{'col-lg-6':indexA>=2}]" v-for="(itemV,indexV) in itemA.introData"><i class="list-style"></i>{{itemV}}</li>
</ul>
</div>
... ... @@ -80,13 +81,13 @@
<i class="iconCharacter icon-right" @click="next(item.dataFour.length)"></i>
</div>
</div>
<div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0">
<div class="row pt-30 pb-30" v-if="item.dataFive && item.dataFive.length>0">
<div class="row-top row pt-50">
<div class="col-lg-3 info-character" @mouseover="showHover(indexV)" v-for="(itemV,indexV) in item.dataFive">
<img v-if="valueIndex!=indexV" class="" :src="itemV.icon" alt="">
<img v-if="valueIndex==indexV" class="" :src="itemV.iconA" alt="">
<div class="pt-30">
<h5 class="text-center height-50">{{itemV.title}}</h5>
<div :class="['text-center', 'con-title-21', 'height-50',{'con-title-active':valueIndex==indexV}]">{{itemV.title}}</div>
<div class="height-40">
<div class="border-div" v-if="valueIndex==indexV"></div>
</div>
... ... @@ -95,10 +96,27 @@
</div>
<div class="value-row-bottom pt-20">
<ul class="value-char" v-if="valueContent && valueContent.length>0">
<li v-for="itemV in valueContent"><i class="list-style"></i>{{itemV}}</li>
<li class="con-intro" v-for="itemV in valueContent"><i class="list-style"></i>{{itemV}}</li>
</ul>
</div>
</div>
<div class="row pt-60 pb-30 kpi-row" v-if="item.dataKpi && item.dataKpi.length>0">
<div class="col-2 kpi-item" v-for="itemK in item.dataKpi">
<div class="kpi-con">{{itemK}}</div>
</div>
</div>
<div class="row mt-60 row-com" v-if="item.dataCom && item.dataCom.length>0">
<div class="col-3 col-lg-3-self com-item" v-for="itemC in item.dataCom">
<div class="com-item-con">
<div class="com-item-title">{{itemC.title}}</div>
<div class="com-item-ul">
<div class="com-item-li" v-for="itemI in itemC.introData">
<i class="list-style"></i>{{itemI}}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
... ...
... ... @@ -12,9 +12,9 @@
<section class="concat-service rel rpt-150 pb-130 rpb-0 text-left ">
<div class="color-white mb-2 title-style font-size-42">运维数字化道路，鸿果与你同行</div>
<div class="color-white mb-2 pt-30 title-intro">鸿果自研的产品--数字运维中台</div>
<div class="color-white mb-2 title-intro pt-10">作为智能运维各应用场景的支撑平台，提供数据治理服务、流批一体服务和AI平台服务</div>
<div class="mb-2 title-style-top">运维数字化道路，鸿果与你同行</div>
<div class="mb-2 pt-30 title-intro-top">鸿果自研的产品--数字运维中台</div>
<div class="mb-2 title-intro-top pt-10">作为智能运维各应用场景的支撑平台，提供数据治理服务、流批一体服务和AI平台服务</div>
</section>
... ... @@ -24,8 +24,8 @@
</div>
</section>
<section class="sps-one pt-50 mb-70 rmb-100 product-section" v-for="(item,index) in productData">
<div class="container product">
<section class="sps-one product pt-50 mb-90 rmb-100 product-section" v-for="(item,index) in productData">
<div class="container ">
<div class="row align-items-center">
<div :class="['col-lg-6','product-item', {'order-lg-2':(index+1)%2==1}]">
<div :class="[{'service-right-content':(index+1)%2==1,'service-left-content':(index+1)%2==0, 'mt-50':(index+1)%2==1, 'ml-50':(index+1)%2==1,'mr-50':(index+1)%2==0},'product-bg','product-bg-'+(index+1), 'rml-0', 'rmb-50', 'wow', {'customFadeInRight':(index+1)%2==1,'customFadeInLeft':(index+1)%2==0}, 'delay-0-1s', 'slow']">
... ...