【无】门户网站-产品服务二级页面-综合监控A-view

@@ -56,6 +56,12 @@
     font-weight: normal;
     font-weight: normal;
     src:url('../fonts/pingfang/PINGFANG EXTRALIGHT.TTF');
     src:url('../fonts/pingfang/PINGFANG EXTRALIGHT.TTF');
 }
 }
+@font-face {
+    font-family: 'PingFang-SC-regular';
+    font-style: normal;
+    font-weight: normal;
+    src:url('../fonts/pingfang/PINGFANG REGULAR.TTF');
+}
 * {
 * {
   margin: 0px;
   margin: 0px;
   padding: 0px;
   padding: 0px;
@@ -1977,13 +1983,19 @@ blockquote:before {
 }
 }
 .info-container-bg{
 .info-container-bg{
     background:#f3f5f8;
     background:#f3f5f8;
+
 }
 }
 .info-title{
 .info-title{
     text-align: center;
     text-align: center;
+    font-size: 30px;
+    color:#333;
 }
 }
 .info-intro{
 .info-intro{
     padding-top:20px;
     padding-top:20px;
     text-indent:28px;
     text-indent:28px;
+    font-size: 16px;
+    color:#666;
+    font-family: 'PingFang-SC-medium';
 }
 }
 .info-character{
 .info-character{
     padding:0 50px;
     padding:0 50px;
@@ -2195,6 +2207,9 @@ blockquote:before {
     border-bottom:1px solid #525a6a;
     border-bottom:1px solid #525a6a;
     margin-bottom: 0;
     margin-bottom: 0;
 }
 }
+.maintenance-advantage.info-title{
+    color:#fff;
+}
 .maintenance-advantage-num{
 .maintenance-advantage-num{
     font-size: 90px;
     font-size: 90px;
     color:#2d3340;
     color:#2d3340;
@@ -2890,4 +2905,242 @@ blockquote:before {
 }
 }
 .compatible-item .title-style{
 .compatible-item .title-style{
     font-size:28px;
     font-size:28px;
-}
+}
+/*lsq 综合监控A-view样式 2022-09-28*/
+.col-lg-service-3{
+    max-width: 20%;
+}
+.info-child-title{
+    font-size: 21px;
+    color:#333;
+    font-family: 'PingFang SC';
+}
+.info-child-intro{
+    font-size: 18px;
+    color:#333;
+    font-family: 'PingFang-SC-regular';
+}
+.info-child-title-Heavy{
+    font-size: 30px;
+    color:#fff;
+    font-family: 'PingFang-SC-heavy';
+}
+.info-child-intro-m{
+    font-size: 18px;
+    color:#fff;
+    font-family: 'PingFang-SC-medium';
+}
+.info-challenge-bg{
+    position: absolute;
+    height: 100%;
+    width: 90%;
+    top: 0;
+    z-index: -1;
+    background-size: cover;
+}
+.info-challenge-bg-1{
+    background-image: url("../img/serviceSecond/Aview/challenge-bg-1.png");
+}
+.info-challenge-bg-2{
+    background-image: url("../img/serviceSecond/Aview/challenge-bg-2.png");
+}
+.info-challenge-bg-3{
+    background-image: url("../img/serviceSecond/Aview/challenge-bg-3.png");
+}
+.challenge-con .info-character{
+    padding: 0 20px;
+}
+.intro-item{
+    padding:10px;
+}
+.Aview .tab-item-li{
+    margin-right: 56px;
+}
+.info-container-bg-Aview{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    z-index: -2;
+}
+.info-container-bg-challenge{
+    height: 60%;
+}
+.info-container-service .info-character{
+    padding:0;
+}
+.info-service.info-character img{
+}
+.dataAbility-con{
+    position: relative;
+    flex: 1;
+    max-height: 500px;
+}
+.dataAbility-bg{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    z-index: -2;
+    background-size: contain;
+    background-image: url("../img/serviceSecond/Aview/ability-bg.png");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.dataAbility-bg-logo{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
+    flex-flow: column;
+    justify-content: center;
+}
+.dataAbility-item-title{
+    font-size: 21px;
+    color:#fff;
+    font-family: 'PingFang-SC-heavy';
+}
+.dataAbility-item-intro{
+    font-size: 16px;
+    color:#fff;
+    font-family: 'PingFang-SC-regular';
+}
+.info-container-ability .container{
+    height:100%;
+    display: flex;
+    flex-flow: column;
+}
+.dataAbility-col{
+    display: flex;
+}
+.dataAbility-item{
+    flex:1;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    padding: 0 15px;
+}
+.dataAbility-item-intro-item{
+    min-height: 24px;
+}
+.dataAbility-col:nth-child(2n) .dataAbility-item{
+    margin-left: 30%;
+}
+.dataAbility-col:nth-child(3) .dataAbility-item .dataAbility-item-intro-item:first-child{
+    max-width: 67%;
+}
+@media (min-width: 992px){
+    .dataAbility-col{
+        height:50%;
+    }
+}
+.logo-title{
+    color:#fff;
+    font-size: 21px;
+}
+.info-characterP{
+    cursor: pointer;
+}
+.info-characterP .info-characterP-bg{
+    background:url("../img/serviceSecond/Aview/characterP-bg.png");
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    z-index: -1;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.info-characterP:hover .info-characterP-bg{
+    background:url("../img/serviceSecond/Aview/characterP-bg-active.png");
+
+}
+.info-character.info-characterP{
+    padding:30px;
+    position: relative;
+}
+.characterP-con{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding:10px 15px;
+}
+.characterP-con .info-character-intro{
+    min-height: 140px;
+}
+.info-child-title-character{
+    width: 100%;
+    font-size: 21px;
+    color:#333;
+    font-family: 'PingFang-SC-heavy';
+}
+.info-child-intro-character{
+    font-size: 16px;
+    color:#666;
+    font-family: 'PingFang-SC-regular';
+}
+.info-characterP:hover .info-child-title-character,.info-characterP:hover .info-child-intro-character{
+    color:#fff;
+}
+.Aview-advantage-bg{
+    background: url("../img/serviceSecond/Aview/advantage-bg.png");
+    background-size: cover;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.advantage-title-Aview{
+    font-size: 24px;
+    color:#fff;
+}
+.advantage-intro-Aview{
+    font-size: 18px;
+    color:#fff;
+    font-family: 'PingFang-SC-regular';
+}
+.info-container-advantage .info-title{
+    color:#fff;
+}
+.info-container-advantage  .pro-advantage-style{
+    padding: 50px 30px 0;
+}
+.info-container-advantage .pro-advantage-ul{
+    min-height: 120px;
+    box-sizing: content-box;
+}
+.Aview-advantage-con{
+    padding:0;
+}
+.Aview-advantage-con .maintenance-advantage-num{
+    color:#2a303c;
+}
+.Aview-con{
+    border-top:1px solid #525a6a;
+}
+.Aview-container{
+    margin:auto;
+}
+@media (min-width: 1260px) {
+    .Aview-container {
+        max-width: 1200px;
+    }
+}
+.Aview-advantage-con:last-child .pro-advantage-style{
+    border:none;
+}
+.Aview-advantage-con:hover{
+    position: relative;
+    z-index: 2;
+    transform: scale(1.1,1);
+    background:#1a6ab7;
+}
+.Aview-advantage-con:hover .maintenance-advantage-num{
+    color:#1665b1;
+}

@@ -461,94 +461,163 @@ export function alarm() {
 export function Aview() {
 export function Aview() {
     let res={
     let res={
         title:'综合监控管理A-view',
         title:'综合监控管理A-view',
-        introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
+        introduction:'建立智能IT运维监控平台， 对网络、硬件、安全设备、操作系统、数据库、中间件、应用系统等资源实时监控采集，能够自动地收集信息系统中各类IT资源设备运行状态、数据库状态、中间件运行状态和网络状态等，发现各类IT资源运行过程中的异常。依据业务视角和设备视角分析发现已发生和潜在的各类资源问题，及时通知相关责任人和启动相关运维流程。',
         data:[
         data:[
             {
             {
                 title:'产品信息',
                 title:'产品信息',
-                introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
+                introduction:'建立智能IT运维监控平台， 对网络、硬件、安全设备、操作系统、数据库、中间件、应用系统等资源实时监控采集，能够自动地收集信息系统中各类IT资源设备运行状态、数据库状态、中间件运行状态和网络状态等，发现各类IT资源运行过程中的异常。依据业务视角和设备视角分析发现已发生和潜在的各类资源问题，及时通知相关责任人和启动相关运维流程。',
                 type:'info'
                 type:'info'
             },
             },
             {
             {
-                title:'产品特点',
+                title:'智能运维带来的新挑战',
                 introduction:'',
                 introduction:'',
                 data:[
                 data:[
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/character-1.png',
-                        title:'工单信息集中管理',
-                        introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
+                        icon:'assets/img/serviceSecond/Aview/challenge-1.png',
+                        title:'海量资源',
+                        introData:['资源数量、资源种类','资源纳管能力','自动化运维能力','资源纳管扩展能力']
                     },
                     },
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/character-2.png',
-                        title:'提高工作效率',
-                        introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
+                        icon:'assets/img/serviceSecond/Aview/challenge-2.png',
+                        title:'双模场景',
+                        introData:['传统数据中心&云数据中心','公有云、私有云、传统数据','中心的统一运维管理','云基础设施监控精细']
                     },
                     },
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/character-3.png',
-                        title:'实时处理单数据',
-                        introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
+                        icon:'assets/img/serviceSecond/Aview/challenge-3.png',
+                        title:'用户场景兼容',
+                        introData:['云环境多租户逻辑隔离，管理统一','多张网物理隔离，统一管理','多机构运维融合']
                     }
                     }
                 ],
                 ],
-                type:'character'
+                type:'challenge'
             },
             },
             {
             {
-                title:'系统框架',
-                introduction:'安全运维服务流程的系统架构',
-                img:'assets/img/serviceSecond/information/system.png',
+                title:'洞悉客户数字化运维服务需求',
+                introduction:'',
+                data:[
+                    {
+                        icon:'assets/img/serviceSecond/Aview/service-1.png',
+                        title:'前瞻性',
+                        introData:['业务前瞻、模式前瞻','架构前瞻']
+                    },
+                    {
+                        icon:'assets/img/serviceSecond/Aview/service-2.png',
+                        title:'一站式',
+                        introData:['全生命周期','全IT领域']
+                    },
+                    {
+                        icon:'assets/img/serviceSecond/Aview/service-3.png',
+                        title:'敏捷性',
+                        introData:['支持业务更快速','更高质量的发布']
+                    },
+                    {
+                        icon:'assets/img/serviceSecond/Aview/service-4.png',
+                        title:'场景化',
+                        introData:['不同的业务场景','提供差异化服务']
+                    },
+                    {
+                        icon:'assets/img/serviceSecond/Aview/service-5.png',
+                        title:'智能化',
+                        introData:['通过智能分析和','自动化提高运营效率']
+                    }
+                ],
+                type:'service'
+            },
+            {
+                title:'系统架构',
+                introduction:'',
+                img:'assets/img/serviceSecond/Aview/system.png',
                 type:'system'
                 type:'system'
             },
             },
             {
             {
-                title:'产品优势',
+                title:'综合监控A-VIEW平台能力',
+                subTitle:'综合监控平台能力',
+                icon:'assets/img/serviceSecond/Aview/logo.png',
                 introduction:'',
                 introduction:'',
-                dataSecond:[
+                dataAbility:[
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/advantage-1.png',
-                        title:'“护网””等保”各规章变成“流程”强制性管控',
-                        introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
-                        img:'assets/img/serviceSecond/information/advantageImg.png'
+                        title:'全行业全场景覆盖',
+                        introData:['深度分析行业运维需求、场景化需求，','发布行业版本',' ',' ']
                     },
                     },
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/advantage-2.png',
-                        title:'通过”安全流程“提前管控日常操作、留痕',
-                        introduction:'',
-                        img:'assets/img/serviceSecond/information/advantageImg.png'
+                        title:'用户导向',
+                        introData:['用户视角，全新用户体验','场景化视角，便捷简单操作']
                     },
                     },
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/advantage-3.png',
-                        title:'税务局业务流程目录、展示、流程的分类管理',
-                        introduction:'',
-                        img:'assets/img/serviceSecond/information/advantageImg.png'
+                        title:'一体化',
+                        introData:['全域视角，监控网络、安全、计算存储、虚拟化、容器、云资源、用户终端等IT架构元素，实现从应用到芯片级端到端的运维管理','业务视角，打通业务到底层资源的逻辑连接，数据关联，深度分析','全局视角，场景化自动编排调度，智能联动，自动闭环解决场景化问题']
                     },
                     },
                     {
                     {
-                        icon:'assets/img/serviceSecond/information/advantage-4.png',
-                        title:'工作组、用户权限的灵活配置',
-                        introduction:'',
-                        img:'assets/img/serviceSecond/information/advantageImg.png'
+                        title:'持续扩展',
+                        introData:['通过微服务架构，平台具备强大的可扩展能力，保证平台功能、处理能力及管理容量的弹性扩展','开放接口，定制开发，持续扩展']
                     }
                     }
                 ],
                 ],
-                type:'advantage'
+                type:'ability'
             },
             },
+
             {
             {
-                title:'平台价值',
-                introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
-                dataThird:[
+                title:'产品特点',
+                introduction:'',
+                data:[
                     {
                     {
-                        title:'标准化',
-                        introduction:'信息、流程、时间全面统一，高效协同',
-                        img:'assets/img/serviceSecond/information/value-bg.png'
+                        title:'强化主动监控，实现集中管理',
+                        introduction:'以应用性能和应用系统为监控主线，集成各类监控工具，构建统一集中的IT系统资源监控平台， 能够主动及时发现问题，解决被动服务的局面。同时以自主运维为目的，主动监控，自动更新，自动实现IT运维监控管理。',
                     },
                     },
                     {
                     {
-                        title:'规范化',
-                        introduction:'理清流程、制度落地，业务按标准执行',
-                        img:'assets/img/serviceSecond/information/value-bg.png'
+                        title:'灵活定制的自动化巡检',
+                        introduction:'面向多厂商主流IT产品，根据客户灵活定制自动化巡检指标，对IT资源进行全面运行状态自动化检测分析，深度感知IT基础架构运行状态。同时，实时输出准确、详实的分析报告及改进建议，预防IT资源运行中可能出现的各种风险，发现网络潜在的性能瓶颈。',
                     },
                     },
                     {
                     {
-                        title:'透明化',
-                        introduction:'流程申请、流程进度、流程审批全程可观',
-                        img:'assets/img/serviceSecond/information/value-bg.png'
+                        title:'帮助定位故障，快速恢复系统运行。',
+                        introduction:'建立针对IT资源的集中告警分析机制和故障预警机制，提供自动化故障处理能力，当故障产生时，可以进行故障的快速定位，很快发现问题根源并找到相应的解决方案，从而缩短故障解决时间，减少维护成本。',
+                    },
+                    {
+                        title: '提高运行效率，合理利用IT资源。',
+                        introduction: '建立统一IT资源监控平台后，可以实时了解全部IT资源的使用和运行情况，根据IT业务需要从整体角度考虑资源的使用，甚至可以根据业务高峰期的不同来调剂业务系统对资源的使用。',
+                    },
+                    {
+                        title:'提供统计分析和决策支持',
+                        introduction:'通过提供各类资源的性能分析报表、资源统计报表和运维分析报表，从各个侧面、各个角度反映系统的运行状况、性能情况和运维人员工作情况，为系统升级、改造、扩容提供科学依据。',
+                    },
+                    {
+                        title:'全面直观的系统展示。',
+                        introduction:'通过一个统一的门户系统，有效的展示内部的IT资源运行情况、性能状况、服务工单情况等，使得领导、管理者、技术人员能迅速了解自己关心的问题。',
                     }
                     }
                 ],
                 ],
-                type:'value'
+                type:'characterP'
             },
             },
+            {
+                title:'产品优势',
+                introduction:'',
+                dataThird:[
+                    {
+                        title:'一体化监控',
+                        dataIntro:['一体化设备监、管、控，一个平台满足用户多种需求完成所有IT基础资源的监控。']
+                    },
+                    {
+                        title:'监控配置灵活',
+                        dataIntro:['灵活定义监控设备、资源，并可差异化设置监控指标。']
+                    },
+                    {
+                        title:'秒级故障监控',
+                        dataIntro:['领先的秒级监控能力与多线程任务并发技术，监测频率提升到秒级。']
+                    }
+                ],
+                dataThirdA:[
+                    {
+                        title:'实时性能监测',
+                        dataIntro:['获取实时性能数据，动态可视化展示当前设备性能和性能变化趋势。']
+                    },
+                    {
+                        title:'业务数据综合展示',
+                        dataIntro:['强大的业务数据综合展示能力，实现跨网络业务数据整合']
+                    },
+                    {
+                        title:'巡检灵活可配',
+                        dataIntro:['巡检方案高度支持自定义，全网全流程覆盖，随时监控，分析回顾设备生命周期表现。']
+                    }
+                ],
+                type:'advantage'
+            }
         ]
         ]
     }
     }
 
 

@@ -6,7 +6,7 @@
 
 
 
 
 <section class="rel rpt-150 rpb-0 text-left" >
 <section class="rel rpt-150 rpb-0 text-left" >
-  <div class="container">
+  <div class="container product">
     <div class="row banner-height pt-90 pb-90">
     <div class="row banner-height pt-90 pb-90">
       <div class="banner-introduction color-white col-lg-6">
       <div class="banner-introduction color-white col-lg-6">
         <h2 class="intro-title color-white">{{AviewData.title}}</h2>
         <h2 class="intro-title color-white">{{AviewData.title}}</h2>
@@ -17,7 +17,7 @@
   <div class="intro-Con"></div>
   <div class="intro-Con"></div>
 </section>
 </section>
 <section class="intro-tab">
 <section class="intro-tab">
-  <div class="container">
+  <div class="container product Aview">
     <ul class="intro-tab-container">
     <ul class="intro-tab-container">
       <li class="tab-item-li" v-for="(item,index) in AviewData.data" :key="item">
       <li class="tab-item-li" v-for="(item,index) in AviewData.data" :key="item">
         <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
         <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
@@ -27,42 +27,54 @@
 </section>
 </section>
 
 
 
 
-<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in AviewData.data" :key="item">
+<section :class="['info-container','info-container-'+item.type, 'rel','pt-55', {'mb-50':item.type!='ability' && item.type!='characterP' && item.type!='advantage','pb-50':item.type=='characterP','all-height':item.type=='ability'}]" v-for="(item,index) in AviewData.data" :key="item">
   <div class="div-type" :data-type="item.type"></div>
   <div class="div-type" :data-type="item.type"></div>
-  <div class="container">
-    <h3 class="info-title">{{item.title}}</h3>
-    <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
-    <div class="row"  v-if="item.data && item.data.length>0">
-      <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
-        <img class="pt-50" :src="itemC.icon" alt="">
-        <h4 class="pt-30">{{itemC.title}}</h4>
-        <div class="info-character-intro">{{itemC.introduction}}</div>
+  <div class="container product">
+    <div class="info-title">{{item.title}}</div>
+    <div :class="['info-intro','mt-40',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
+    <div :class="['row','pt-60',{'challenge-con':item.type=='challenge'}]"  v-if="item.data && item.data.length>0">
+      <div :class="[ {'col-lg-4':item.type=='challenge','col-lg-3':item.type=='service','col-lg-service-3':item.type=='service','col-lg-6':item.type=='characterP','characterP-con':item.type=='characterP'}]" v-for="(itemC,indexC) in item.data">
+        <div :class="['info-character','info-'+item.type] ">
+          <img v-if="itemC.icon" :class="[{'pt-50':item.type=='challenge'}]" :src="itemC.icon" alt="">
+          <div :class="[{'info-child-title':item.type=='service','info-child-title-character':item.type=='characterP','info-child-title-Heavy':item.type=='challenge', 'pt-40':item.type=='challenge', 'pt-20':item.type!='challenge'}]">{{itemC.title}}</div>
+          <div :class="['info-character-intro', 'pt-30',{'info-child-intro-character':item.type=='characterP'}]" v-if="itemC.introduction">{{itemC.introduction}}</div>
+          <div :class="['info-character-intro', {'pt-40':item.type=='challenge','pb-40':item.type=='challenge','pt-20':item.type!='challenge','info-child-intro':item.type=='service','info-child-intro-m':item.type=='challenge'}]" v-if="itemC.introData && itemC.introData.length>0">
+            <div :class="[{'intro-item':item.type=='challenge'}, 'text-center']" v-for="itemI in itemC.introData">{{itemI}}</div>
+          </div>
+          <div v-if="item.type=='challenge'" :class="['info-challenge-bg','info-challenge-bg-'+(indexC+1)]"></div>
+          <div v-if="item.type=='characterP'"  class="info-characterP-bg"></div>
+        </div>
+
       </div>
       </div>
     </div>
     </div>
-    <div class="info-system pt-30" v-if="item.img">
+    <div class="info-system pt-60" v-if="item.img">
       <img :src="item.img" alt="">
       <img :src="item.img" alt="">
     </div>
     </div>
-    <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
-      <div class="col-lg-4">
-        <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
-          <img class="" :src="itemA.icon" alt="">
-          <div :class="['info-advantage-title']">
-            <div>{{itemA.title}}</div>
-            <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
+    <div class="row mt-60 dataAbility-con" v-if="item.dataAbility && item.dataAbility.length>0">
+      <div class="col-lg-6 dataAbility-col" v-for="(itemD,indexD) in item.dataAbility">
+        <div class="dataAbility-item">
+          <div class="dataAbility-item-title">{{itemD.title}}</div>
+          <div class="dataAbility-item-intro pt-20">
+            <div class="dataAbility-item-intro-item" v-for="(itemI,indexI) in itemD.introData">{{itemI}}</div>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
-      <div class="col-lg-8">
-        <img :src="advantageImg" alt="">
+      <div class="dataAbility-bg" v-if="item.type=='ability'"></div>
+      <div class="dataAbility-bg-logo">
+        <img :src="item.icon" alt="">
+        <div class="logo-title pt-20">{{item.subTitle}}</div>
       </div>
       </div>
     </div>
     </div>
-    <div class="row pt-30"  v-if="item.dataThird && item.dataThird.length>0">
-      <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
-        <div class="info-value" >
-          <img class="" :src="itemV.img" alt="">
-          <div :class="['info-value-title']">
-            <h3>{{itemV.title}}</h3>
-            <div>{{itemV.introduction}}</div>
+
+  </div>
+  <div class="mt-30 Aview-con"  v-if="item.dataThird && item.dataThird.length>0">
+    <div class="row Aview-container">
+      <div class="col-lg-4 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThird">
+        <div class="info-value pro-advantage-style  pb-50" >
+          <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+1}}</div>
           </div>
           </div>
         </div>
         </div>
 
 
@@ -70,6 +82,21 @@
     </div>
     </div>
 
 
   </div>
   </div>
+  <div class=" Aview-con"  v-if="item.dataThirdA && item.dataThirdA.length>0">
+    <div class="row Aview-container">
+      <div class="col-lg-4 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThirdA">
+        <div class="info-value pro-advantage-style  pb-50" >
+          <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>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="Aview-advantage-bg" v-if="item.type=='advantage'"></div>
+  <div v-if="item.type=='challenge' || item.type=='characterP'" :class="['info-container-bg','info-container-bg-Aview', {'info-container-bg-challenge':item.type=='challenge'}]"></div>
 </section>
 </section>
 
 
 
 

@@ -30,7 +30,7 @@
 <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">
 <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">
   <div class="div-type" :data-type="item.type" ></div>
   <div class="div-type" :data-type="item.type" ></div>
   <div class="container">
   <div class="container">
-    <h3 class="info-title">{{item.title}}</h3>
+    <div class="info-title">{{item.title}}</div>
     <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
     <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
     <div class="info-system pt-30" v-if="item.img">
     <div class="info-system pt-30" v-if="item.img">
       <img :src="item.img" alt="">
       <img :src="item.img" alt="">

@@ -30,7 +30,7 @@
 <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=='value'}]" v-for="(item,index) in businessAppData.data" :key="item">
     <div class="div-type" :data-type="item.type"></div>
     <div class="div-type" :data-type="item.type"></div>
     <div class="container">
     <div class="container">
-        <h3 class="info-title">{{item.title}}</h3>
+        <div class="info-title">{{item.title}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction && !item.subTitle">{{item.introduction}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction && !item.subTitle">{{item.introduction}}</div>
         <div class="row" v-if="item.subTitle">
         <div class="row" v-if="item.subTitle">
             <div class="col-lg-6 pd-40">
             <div class="col-lg-6 pd-40">

@@ -30,7 +30,7 @@
 <section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.data" :key="item">
 <section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.data" :key="item">
   <div class="div-type" :data-type="item.type"></div>
   <div class="div-type" :data-type="item.type"></div>
   <div class="container">
   <div class="container">
-    <h3 class="info-title">{{item.title}}</h3>
+    <div class="info-title">{{item.title}}</div>
     <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
     <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
     <div class="row"  v-if="item.data && item.data.length>0">
     <div class="row"  v-if="item.data && item.data.length>0">
       <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
       <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">

@@ -30,7 +30,7 @@
 <section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cmdbData.data" :key="item">
 <section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cmdbData.data" :key="item">
   <div class="div-type" :data-type="item.type"></div>
   <div class="div-type" :data-type="item.type"></div>
   <div class="container">
   <div class="container">
-    <h3 class="info-title">{{item.title}}</h3>
+    <div class="info-title">{{item.title}}</div>
     <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
     <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
     <div class="row"  v-if="item.data && item.data.length>0">
     <div class="row"  v-if="item.data && item.data.length>0">
       <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
       <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">

@@ -30,7 +30,7 @@
 <section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in InformationData.data" :key="item">
 <section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in InformationData.data" :key="item">
     <div class="div-type" :data-type="item.type"></div>
     <div class="div-type" :data-type="item.type"></div>
     <div class="container">
     <div class="container">
-        <h3 class="info-title">{{item.title}}</h3>
+        <div class="info-title">{{item.title}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
         <div class="row"  v-if="item.data && item.data.length>0">
         <div class="row"  v-if="item.data && item.data.length>0">
             <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
             <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">

@@ -29,7 +29,7 @@
 
 
 <section :class="['info-container', 'rel', {'mb-70':item.type=='system'||item.type=='problems' ||item.type=='character'}, 'pt-55']" v-for="(item,index) in maintenanceData.data" :key="item">
 <section :class="['info-container', 'rel', {'mb-70':item.type=='system'||item.type=='problems' ||item.type=='character'}, 'pt-55']" v-for="(item,index) in maintenanceData.data" :key="item">
     <div class="div-type" :data-type="item.type"></div>
     <div class="div-type" :data-type="item.type"></div>
-    <h3 v-if="item.type=='advantage'" :class="['info-title','pb-40','maintenance-advantage',{'color-white':item.type=='advantage'}]">{{item.title}}</h3>
+    <div v-if="item.type=='advantage'" :class="['info-title','pb-40','maintenance-advantage',{'color-white':item.type=='advantage'}]">{{item.title}}</div>
     <div class="container">
     <div class="container">
         <h3 v-if="item.type!='advantage'" :class="['info-title']">{{item.title}}</h3>
         <h3 v-if="item.type!='advantage'" :class="['info-title']">{{item.title}}</h3>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>

@@ -30,7 +30,7 @@
 <section :class="['info-container', 'rel', {'mb-70':item.type=='system'}, 'pt-55',{'info-container-bg':item.type=='character','pb-50':item.type=='value'}]" v-for="(item,index) in securityLogData.data" :key="item">
 <section :class="['info-container', 'rel', {'mb-70':item.type=='system'}, 'pt-55',{'info-container-bg':item.type=='character','pb-50':item.type=='value'}]" v-for="(item,index) in securityLogData.data" :key="item">
     <div class="div-type" :data-type="item.type"></div>
     <div class="div-type" :data-type="item.type"></div>
     <div class="container">
     <div class="container">
-        <h3 class="info-title">{{item.title}}</h3>
+        <div class="info-title">{{item.title}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
         <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
         <div class="row"  v-if="item.data && item.data.length>0">
         <div class="row"  v-if="item.data && item.data.length>0">
             <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
             <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">