Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w…

…eb into master-500-dev

@@ -317,8 +317,8 @@ layui.define(['form', 'admin', 'laydate', 'common', 'sessions', 'reskpilist'], f
             charToExpr(data, 'commonlyExpr');
             charToExpr(data, 'commonlyExpr');
             charToExpr(data, 'importantExpr');
             charToExpr(data, 'importantExpr');
             charToExpr(data, 'seriousExpr');
             charToExpr(data, 'seriousExpr');
-
-            form.on('submit(add-alarmpolicy-form)', function () {
+            //lsq 告警策略编辑不了，id值应该选择的是submit的按钮的lay-filter，不是add-alarmpolicy-form， 2022-09-27
+            form.on('submit(alarmpolicy-form-save-id)', function () {
                 delete data.noticeMergeFlagExpr;
                 delete data.noticeMergeFlagExpr;
                 admin.req({
                 admin.req({
                     url: domainName + '/api-web/alarmPolicy/save?access_token=' + accessToken
                     url: domainName + '/api-web/alarmPolicy/save?access_token=' + accessToken

@@ -407,7 +407,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                         var $html = addIconByValue(valueStr);
                         var $html = addIconByValue(valueStr);
                         var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.kpiId);
                         var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.kpiId);
                         span += ' <span  ' + menuId + '  style="text-align:left;width:40%">' + ar.kpiName + '</span>' +
                         span += ' <span  ' + menuId + '  style="text-align:left;width:40%">' + ar.kpiName + '</span>' +
-                            '<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
+                            '<span title="' + titleStr + '" style="width:60%;overflow: hidden !important;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
                             + $html + valueStr +unit+ '</span>';
                             + $html + valueStr +unit+ '</span>';
                         //补充空白区域
                         //补充空白区域
                         if (v.length < cols) {
                         if (v.length < cols) {
@@ -4554,6 +4554,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
             //lsq 状态信息无其他下探 2022-06-08
             //lsq 状态信息无其他下探 2022-06-08
             var statusF = $menu.data('statusf');
             var statusF = $menu.data('statusf');
             var one = $menu.data('one');
             var one = $menu.data('one');
+            //lsq 只有kpiIdent==1时才有性能趋势 2022-09-27
+            var kpiIdent=$menu.data('ident');
             var menubox = '<div class="detail_menubox" id="detail_menubox_id" style="color:#666;"><ul>';
             var menubox = '<div class="detail_menubox" id="detail_menubox_id" style="color:#666;"><ul>';
             //lsq 只有状态指标下探的标识
             //lsq 只有状态指标下探的标识
             if (one == 1) {
             if (one == 1) {
@@ -4567,7 +4569,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                 if (!hideM) {
                 if (!hideM) {
                     menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';
                     menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';
                 }
                 }
-                if (!nature) {
+                if (!nature && kpiIdent==1) {
                     menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';
                     menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';
                 }
                 }
                 // if(!statusF){
                 // if(!statusF){

@@ -144,98 +144,96 @@ layui.define(['form', 'admin', 'layer', 'common', 'sessions', 'xmSelect', 'resli
         //保存
         //保存
         $("#jgraph-form-save-id").on("click", function (e, flag) {
         $("#jgraph-form-save-id").on("click", function (e, flag) {
             //当flag为true,为保存并设计，当flag为false时，为保存
             //当flag为true,为保存并设计，当flag为false时，为保存
-            form.on('submit(form-grapheditor)', function () {
-                var topoTitle = $("#jgraph_topo_name").val();
-                if (!topoTitle) {
-                    layer.msg('请输入拓扑名称！', {icon: 7, time: 3000});
-                    return false;
-                }
-                //获取Users值
-                var userflag = 0;
-                //新增时必须用户授权包换登录用户的
-                if (id) {
-                    userflag = 1;
-                }
-                var userNow = localStorage.getItem("lgn");
-                var topoUsers = [];
-                var selectedUsers = xmSelectUsers.getValue();
-                if (selectedUsers != null && selectedUsers.length > 0) {
-                    $.each(selectedUsers, function (i, v) {
-                        if (v.value == userNow) {
-                            userflag = 1;
-                        }
-                        topoUsers.push(v.value + "#" + v.name);
-                    });
-                }
-                if (userflag == 0) {
-                    layer.msg('保存失败,用户权限必须包含当前登录账户!', {icon: 2, time: 3000});
-                    return false;
-                }
-                //获取Roles值
-                var topoRoles = [];
-                var isExistAdmin = false;
-                var selectedRoles = xmSelectRoles.getValue();
-                if (selectedRoles != null && selectedRoles.length > 0) {
-                    $.each(selectedRoles, function (i, v) {
-                        topoRoles.push(v.value + "#" + v.roleName);
-                        if (v.code == 'ADMIN') {
-                            isExistAdmin = true;
-                        }
-                    });
-                }
-                // 必须要选管理员
-                if (!isExistAdmin) {
-                    layer.msg('保存失败,角色必须包含当管理员权限（ADMIN）!', {icon: 2, time: 3000});
-                    return false;
-                }
+            var topoTitle = $("#jgraph_topo_name").val();
+            if (!topoTitle) {
+                layer.msg('请输入拓扑名称！', {icon: 7, time: 3000});
+                return false;
+            }
+            //获取Users值
+            var userflag = 0;
+            //新增时必须用户授权包换登录用户的
+            if (id) {
+                userflag = 1;
+            }
+            var userNow = localStorage.getItem("lgn");
+            var topoUsers = [];
+            var selectedUsers = xmSelectUsers.getValue();
+            if (selectedUsers != null && selectedUsers.length > 0) {
+                $.each(selectedUsers, function (i, v) {
+                    if (v.value == userNow) {
+                        userflag = 1;
+                    }
+                    topoUsers.push(v.value + "#" + v.name);
+                });
+            }
+            if (userflag == 0) {
+                layer.msg('保存失败,用户权限必须包含当前登录账户!', {icon: 2, time: 3000});
+                return false;
+            }
+            //获取Roles值
+            var topoRoles = [];
+            var isExistAdmin = false;
+            var selectedRoles = xmSelectRoles.getValue();
+            if (selectedRoles != null && selectedRoles.length > 0) {
+                $.each(selectedRoles, function (i, v) {
+                    topoRoles.push(v.value + "#" + v.roleName);
+                    if (v.code == 'ADMIN') {
+                        isExistAdmin = true;
+                    }
+                });
+            }
+            // 必须要选管理员
+            if (!isExistAdmin) {
+                layer.msg('保存失败,角色必须包含当管理员权限（ADMIN）!', {icon: 2, time: 3000});
+                return false;
+            }
 
 
 
 
-                var targetId = '';
-                var topoType = $("#jgraph-topo_type").val();//拓扑类型
-                if (topoType && topoType === '1') {//业务拓扑
-                    targetId = bizId;
-                }
-                if (topoType && topoType === '2') {//资源拓扑
-                    targetId = $("#jgraph-topo_resid").val();
-                }
-                if (topoType && topoType === '4') {//机房拓扑
-                    targetId = $("#jgraph-topo_room").val();
-                }
-                var jtopo = {
-                    topoName: topoTitle, //拓扑名称
-                    jtopoId: $("#jgraph-topoId").val(),
-                    isDefault: $('input[name="isDefault"]:checked').val(), //是否默认，0否 1是
-                    topoType: topoType,
-                    targetId: targetId,
-                    userIds: topoUsers.toString(),
-                    roleIds: topoRoles.toString(),
-                    remark: $("#jgraph_remark").val(),
-                };
-                admin.req({
-                    url: common.domainName + '/api-web/mxgraph/save?access_token=' + access_token
-                    , type: 'post'
-                    , async: false
-                    , contentType: "application/json;charset=UTF-8"//指定消息请求类型
-                    , data: JSON.stringify(jtopo)
-                }).done(function (res) {
-                    if (res.success) {
-                        layer.msg('保存成功', {icon: 1, time: 2000}, function () {
-                            layer.closeAll()
-                            if (flag) {
-                                if (!id) {
-                                    id = res.str;
-                                }
-                                //http://192.168.0.247:8085
-                                var url = common.graphEditorOrigin + "/jgraph/grapheditor/index.html?access_token=" + access_token + '&id=' + id;
-                                window.open(url);
+            var targetId = '';
+            var topoType = $("#jgraph-topo_type").val();//拓扑类型
+            if (topoType && topoType === '1') {//业务拓扑
+                targetId = bizId;
+            }
+            if (topoType && topoType === '2') {//资源拓扑
+                targetId = $("#jgraph-topo_resid").val();
+            }
+            if (topoType && topoType === '4') {//机房拓扑
+                targetId = $("#jgraph-topo_room").val();
+            }
+            var jtopo = {
+                topoName: topoTitle, //拓扑名称
+                jtopoId: $("#jgraph-topoId").val(),
+                isDefault: $('input[name="isDefault"]:checked').val(), //是否默认，0否 1是
+                topoType: topoType,
+                targetId: targetId,
+                userIds: topoUsers.toString(),
+                roleIds: topoRoles.toString(),
+                remark: $("#jgraph_remark").val(),
+            };
+            admin.req({
+                url: common.domainName + '/api-web/mxgraph/save?access_token=' + access_token
+                , type: 'post'
+                , async: false
+                , contentType: "application/json;charset=UTF-8"//指定消息请求类型
+                , data: JSON.stringify(jtopo)
+            }).done(function (res) {
+                if (res.success) {
+                    layer.msg('保存成功', {icon: 1, time: 2000}, function () {
+                        layer.closeAll()
+                        if (flag) {
+                            if (!id) {
+                                id = res.str;
                             }
                             }
-                        });
-                    } else {
-                        layer.msg('拓扑保存失败，请与管理员联系！', {icon: 7, time: 3000});
-                    }
-                });
-                return false;//必须要写，解决禁用submit提交，ajax方法才能正确执行，且表单不会自动刷新
-            })
+                            //http://192.168.0.247:8085
+                            var url = common.graphEditorOrigin + "/jgraph/grapheditor/index.html?access_token=" + access_token + '&id=' + id;
+                            window.open(url);
+                        }
+                    });
+                } else {
+                    layer.msg('拓扑保存失败，请与管理员联系！', {icon: 7, time: 3000});
+                }
+            });
+            return false;//必须要写，解决禁用submit提交，ajax方法才能正确执行，且表单不会自动刷新
             form.render();
             form.render();
         });
         });
         renderGraphTopoInfo();
         renderGraphTopoInfo();

@@ -246,18 +246,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
 
 
         //监听ckecked选中事件
         //监听ckecked选中事件
         table.on('checkbox(reslist_resListTable)', function (obj) {
         table.on('checkbox(reslist_resListTable)', function (obj) {
+            var reslist = [];
             if (obj.checked == true) {
             if (obj.checked == true) {
                 if (obj.type == 'one' && resListSelectIds.indexOf(obj.data.resId) === -1) {//勾选单条
                 if (obj.type == 'one' && resListSelectIds.indexOf(obj.data.resId) === -1) {//勾选单条
                     resListSelectIds.push(obj.data.resId);
                     resListSelectIds.push(obj.data.resId);
+                    reslist.push(obj.data);
                 }
                 }
                 if (obj.type == 'all') {//勾选全部
                 if (obj.type == 'all') {//勾选全部
                     for (var i = 0; i < table_data.length; i++) {
                     for (var i = 0; i < table_data.length; i++) {
+                        reslist.push(table_data[i]);
                         if (resListSelectIds.indexOf(obj.data.resId) === -1) {
                         if (resListSelectIds.indexOf(obj.data.resId) === -1) {
                             resListSelectIds.push(table_data[i].resId);
                             resListSelectIds.push(table_data[i].resId);
                         }
                         }
                     }
                     }
                 }
                 }
             } else {
             } else {
+                reslist.push(obj.data);
                 if (obj.type == 'one') {
                 if (obj.type == 'one') {
                     for (var i = 0; i < resListSelectIds.length; i++) {
                     for (var i = 0; i < resListSelectIds.length; i++) {
                         if (resListSelectIds[i] == obj.data.resId) {
                         if (resListSelectIds[i] == obj.data.resId) {
@@ -281,7 +285,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
 
 
             // 跨域发送信息，不能删除
             // 跨域发送信息，不能删除
             obj.data["checked"] = obj.checked;
             obj.data["checked"] = obj.checked;
-            window.top.postMessage({res: obj.data}, "*");
+            window.top.postMessage({res: reslist}, "*");
 
 
         })
         })
 
 

@@ -95,7 +95,8 @@ layui.define(['table', 'form', 'laydate', 'treeTable', 'admin', 'layer', 'laytpl
                     templet: '<div><span role-data-edit="{{d.id}}" data-name="{{d.name}}" ' +
                     templet: '<div><span role-data-edit="{{d.id}}" data-name="{{d.name}}" ' +
                         'data-code="{{d.code}}"  data-remark="{{d.remark}}" class="layui-table-link">{{d.name}}</span></div>'
                         'data-code="{{d.code}}"  data-remark="{{d.remark}}" class="layui-table-link">{{d.name}}</span></div>'
                 }
                 }
-                , {field: 'userNames', title: '角色用户', align: 'left', width: '25%'}
+                , {field: 'code', title: '编码', align: 'left', width: '10%'}
+                , {field: 'userNames', title: '角色用户', align: 'left', width: '20%'}
                 , {field: 'remark', title: '角色描述', align: 'left',}
                 , {field: 'remark', title: '角色描述', align: 'left',}
                 , {
                 , {
                     field: 'updateTime',
                     field: 'updateTime',

@@ -8660,3 +8660,11 @@ form.layui-card-header.layuiadmin-card-header-auto {
     width: 16px;
     width: 16px;
     height: 16px;
     height: 16px;
 }
 }
+/*lsq 快照管理详情页基本信息悬浮样式修改 2022-09-27*/
+#base-info-tips>.info-table>li span,#base-info-tips>.info-table>li span .div-link-state-list{
+    display: flex;
+    align-items: center;
+}
+#base-info-tips>.info-table>li span:nth-child(2n){
+    flex:2;
+}

@@ -345,8 +345,8 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
-
-    <button type="submit" lay-submit class="layui-btn hide" id="alarmpolicy-form-save-id">保存</button>
+    <!--lsq 告警策略编辑不了，按钮没有lay-filter 2022-09-27-->
+    <button type="submit" lay-submit class="layui-btn hide" lay-filter="alarmpolicy-form-save-id" id="alarmpolicy-form-save-id">保存</button>
 </form>
 </form>
 <script>
 <script>
     layui.use('alarmpolicyAdd', function (fn) {
     layui.use('alarmpolicyAdd', function (fn) {

@@ -54,7 +54,8 @@
                 <label class="layui-form-label">发送用户</label>
                 <label class="layui-form-label">发送用户</label>
                 <div style="width: calc(100% - 110px)">
                 <div style="width: calc(100% - 110px)">
                     <div class="layui-input-inline" style="width: calc(100% - 10px);display: inline-flex;">
                     <div class="layui-input-inline" style="width: calc(100% - 10px);display: inline-flex;">
-                        <div class="tags" id="select_noticeTimely_id_user" style="width: calc(100% - 20px);border: solid 1px #D2D2D2;margin-top: 0px;height: 36px;"></div>
+                        <!--lsq 选择用户过多时，超出高度滚动 2022-09-27-->
+                        <div class="tags" id="select_noticeTimely_id_user" style="width: calc(100% - 20px);border: solid 1px #D2D2D2;margin-top: 0px;min-height:36px; height: auto; max-height: 200px; overflow: auto;"></div>
                         <i class="layui-icon form-btn-icon" id="noticeTimely-form-select-users" style="line-height: 36px;margin-left: 5px;">&#xe615;</i>
                         <i class="layui-icon form-btn-icon" id="noticeTimely-form-select-users" style="line-height: 36px;margin-left: 5px;">&#xe615;</i>
                     </div>
                     </div>
                 </div>
                 </div>

@@ -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">