monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit 9372c2ec677d32d2f16bb325ffe89e96f9ec000d 2 parents 179974cc c53a9de2

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

…eb into master-500-dev
Inline Side-by-side
Showing 76 changed files with 771 additions and 204 deletions
1 -<title>拓扑列表</title> 1 +<title>拓扑配置</title>
2 <article class="page-container"> 2 <article class="page-container">
3 <div class="page-panel"> 3 <div class="page-panel">
4 <div class="main commonDiv"> 4 <div class="main commonDiv">
@@ -773,8 +773,11 @@ export default { @@ -773,8 +773,11 @@ export default {
773 dataList.value.map(v => { 773 dataList.value.map(v => {
774 if (v.id == document.id) { 774 if (v.id == document.id) {
775 v.checked = true; 775 v.checked = true;
  776 + selectionData.value = [];
  777 + selectionData.value.push(v);
776 } 778 }
777 }) 779 })
  780 +
778 showUserDialog(true); 781 showUserDialog(true);
779 } 782 }
780 783
  1 +<el-tree-select
  2 + :filterable="filterable"
  3 + :size="$global.elementConfig.size.input"
  4 + node-key="nodeKey"
  5 + :placeholder="placeholderText"
  6 + :props="defaultProps"
  7 + v-model="value"
  8 + :data="data"
  9 + @change="change"
  10 + lazy
  11 + :load="load"
  12 + :check-strictly="checkStrictly"
  13 + :multiple="multiple"
  14 + :render-after-expand="false"
  15 +>
  16 + <template #default="{ node, data }">
  17 + <el-tag v-if="isTag" style="height: 18px;margin-right:6px;">
  18 + {{getTypeName(data.type)}}</el-tag>
  19 + <span>{{ node.label }}</span>
  20 + </template>
  21 +</el-tree-select>
  1 +/**
  2 + * 下拉树组件
  3 + */
  4 +export default {
  5 + name: 'treeSelect',
  6 + template: '',
  7 + components: {},
  8 + props: {
  9 +
  10 + // 选中的值
  11 + value: {
  12 + type: String,
  13 + default: ''
  14 + },
  15 + // 数据
  16 + data: {
  17 + type: Array,
  18 + default: []
  19 + },
  20 + //显示的提示语
  21 + placeholderText:{
  22 + type: String,
  23 + default: '请选择'
  24 + },
  25 + //指定标签，子树节点
  26 + defaultProps:{
  27 + type:Object,
  28 + default:{
  29 + children: 'children',
  30 + label: 'name',
  31 + value: 'value'
  32 + }
  33 + },
  34 + //唯一标识
  35 + nodeKey:{
  36 + type: String,
  37 + default: 'id'
  38 + },
  39 + //是否有标签
  40 + isTag:{
  41 + type:Boolean,
  42 + default:false
  43 + },
  44 + //是否可搜索
  45 + filterable:{
  46 + type:Boolean,
  47 + default:false
  48 + },
  49 + //是否任意级别被选择
  50 + checkStrictly:{
  51 + type:Boolean,
  52 + default:false
  53 + },
  54 + //是否多选
  55 + multiple:{
  56 + type:Boolean,
  57 + default:false
  58 + }
  59 +
  60 + },
  61 + data() {
  62 + return {}
  63 + },
  64 + setup(props, {attrs, slots, emit}) {
  65 + const {proxy} = Vue.getCurrentInstance();
  66 + let data=Vue.ref([]);
  67 + let change=(val)=>{
  68 + //change事件传个父组件的值
  69 + emit("changeSelect",val)
  70 + }
  71 + //获取菜单类型
  72 + let getTypeName=(type)=>{
  73 + switch (type) {
  74 + case 'org':
  75 + return '部门';
  76 + case 'user':
  77 + return '用户';
  78 + default:
  79 + return '';
  80 + }
  81 + }
  82 + let init=()=>{
  83 + //lsq 部门数据 2022-09-05
  84 + proxy.$http.get(`/api-user/org/queryOrgs`, {}, function (res) {
  85 + if(res && res.data){
  86 + data.value = res.data;
  87 + data.value.map(item=>{
  88 + item.type='org'
  89 + })
  90 + }
  91 + })
  92 + }
  93 +
  94 + const load = (node, resolve) => {
  95 + if (node.isLeaf) return resolve([])
  96 + if(node.data.type && node.data.type=='org'){
  97 + if(node.data.type && node.data.type=='org') {
  98 + let param = {
  99 + page: 1,
  100 + limit: 99999,
  101 + orgId: node.data.value
  102 + }
  103 + proxy.$http.get(`/api-user/users`, param, function (res) {
  104 + let arr = [];
  105 + if (res && res.data) {
  106 + arr = res.data;
  107 + }
  108 + if (arr.length > 0) {
  109 + arr.map(item => {
  110 + item.name = item.nickname;
  111 + item.type = 'user';
  112 + item.value=item.username;
  113 + })
  114 + }
  115 + resolve(arr)
  116 + })
  117 + }
  118 + }else{
  119 + resolve([])
  120 + }
  121 + }
  122 + // 监听编辑状态
  123 + Vue.watch(() => props.value, (newValue, oldVlaue) => {
  124 + // 编辑
  125 + });
  126 + // 挂载完
  127 + Vue.onMounted(() => {
  128 + init()
  129 + })
  130 + return {
  131 + data,
  132 + change,
  133 + getTypeName,
  134 + init,
  135 + load
  136 + }
  137 + }
  138 +}
@@ -53,7 +53,9 @@ Promise.all([ @@ -53,7 +53,9 @@ Promise.all([
53 //告警通知统计信息 53 //告警通知统计信息
54 .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index'))) 54 .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')))
55 //菜单下拉树 55 //菜单下拉树
56 - .component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index'))); 56 + .component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index')))
  57 + //机构用户下拉树
  58 + .component('cm-tree-select-org-user', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectOrgUser/index')));
57 59
58 // 自定义指令 授权按钮 60 // 自定义指令 授权按钮
59 app.directive('permissions', { 61 app.directive('permissions', {
@@ -23,7 +23,6 @@ @@ -23,7 +23,6 @@
23 </div> 23 </div>
24 <el-button :size="$global.elementConfig.size.button" @click="addAj()">新增</el-button> 24 <el-button :size="$global.elementConfig.size.button" @click="addAj()">新增</el-button>
25 </div> 25 </div>
26 -  
27 <div class="btns"> 26 <div class="btns">
28 27
29 <el-form-item> 28 <el-form-item>
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 .main-header { 20 .main-header {
21 position: absolute; 21 position: absolute;
22 left: 0px; 22 left: 0px;
23 - top: 35px; 23 + top: 0px;
24 z-index: 999; 24 z-index: 999;
25 width: 100%; 25 width: 100%;
26 } 26 }
@@ -62,6 +62,12 @@ @@ -62,6 +62,12 @@
62 font-weight: normal; 62 font-weight: normal;
63 src:url('../fonts/pingfang/PINGFANG REGULAR.TTF'); 63 src:url('../fonts/pingfang/PINGFANG REGULAR.TTF');
64 } 64 }
  65 +@font-face {
  66 + font-family: 'MI_LANTING_REGULAR';
  67 + font-style: normal;
  68 + font-weight: normal;
  69 + src:url('../fonts/MI_LANTING_REGULAR.TTF');
  70 +}
65 * { 71 * {
66 margin: 0px; 72 margin: 0px;
67 padding: 0px; 73 padding: 0px;
@@ -369,9 +375,9 @@ textarea:placeholder, @@ -369,9 +375,9 @@ textarea:placeholder,
369 ***/ 375 ***/
370 .hero-section { 376 .hero-section {
371 position: relative; 377 position: relative;
372 - background: url('../img/hero/hero-bg.png');  
373 - background-position: center bottom;  
374 - background-size: cover; 378 + /*background: url('../img/hero/hero-bg.png');*/
  379 + /*background-position: center bottom;*/
  380 + /*background-size: cover;*/
375 } 381 }
376 .concat-concat { 382 .concat-concat {
377 position: relative; 383 position: relative;
@@ -1996,6 +2002,7 @@ blockquote:before { @@ -1996,6 +2002,7 @@ blockquote:before {
1996 font-size: 16px; 2002 font-size: 16px;
1997 color:#666; 2003 color:#666;
1998 font-family: 'PingFang-SC-medium'; 2004 font-family: 'PingFang-SC-medium';
  2005 + line-height: 32px;
1999 } 2006 }
2000 .info-character{ 2007 .info-character{
2001 padding:0 50px; 2008 padding:0 50px;
@@ -2189,6 +2196,7 @@ blockquote:before { @@ -2189,6 +2196,7 @@ blockquote:before {
2189 } 2196 }
2190 .pro-info-title{ 2197 .pro-info-title{
2191 color:#fff; 2198 color:#fff;
  2199 + padding:0 20px;
2192 } 2200 }
2193 .pro-advantage-style{ 2201 .pro-advantage-style{
2194 border-right:1px solid #525a6a; 2202 border-right:1px solid #525a6a;
@@ -2198,10 +2206,12 @@ blockquote:before { @@ -2198,10 +2206,12 @@ blockquote:before {
2198 border-right: none; 2206 border-right: none;
2199 } 2207 }
2200 .pro-advantage-ul{ 2208 .pro-advantage-ul{
2201 - font-size: 14px; 2209 + font-size: 18px;
  2210 + font-family: 'PingFang-SC-regular';
2202 } 2211 }
2203 .pro-advantage-ul li{ 2212 .pro-advantage-ul li{
2204 padding:5px 0; 2213 padding:5px 0;
  2214 + line-height: 36px;
2205 } 2215 }
2206 .maintenance-advantage{ 2216 .maintenance-advantage{
2207 border-bottom:1px solid #525a6a; 2217 border-bottom:1px solid #525a6a;
@@ -2209,6 +2219,8 @@ blockquote:before { @@ -2209,6 +2219,8 @@ blockquote:before {
2209 } 2219 }
2210 .maintenance-advantage.info-title{ 2220 .maintenance-advantage.info-title{
2211 color:#fff; 2221 color:#fff;
  2222 + margin-top: 30px;
  2223 + padding-bottom: 70px;
2212 } 2224 }
2213 .maintenance-advantage-num{ 2225 .maintenance-advantage-num{
2214 font-size: 90px; 2226 font-size: 90px;
@@ -3107,6 +3119,9 @@ blockquote:before { @@ -3107,6 +3119,9 @@ blockquote:before {
3107 } 3119 }
3108 .info-container-advantage .info-title{ 3120 .info-container-advantage .info-title{
3109 color:#fff; 3121 color:#fff;
  3122 + margin-top: 30px;
  3123 + margin-bottom: 30px;
  3124 + padding-bottom: 40px;
3110 } 3125 }
3111 .info-container-advantage .pro-advantage-style{ 3126 .info-container-advantage .pro-advantage-style{
3112 padding: 50px 30px 0; 3127 padding: 50px 30px 0;
@@ -3144,3 +3159,201 @@ blockquote:before { @@ -3144,3 +3159,201 @@ blockquote:before {
3144 .Aview-advantage-con:hover .maintenance-advantage-num{ 3159 .Aview-advantage-con:hover .maintenance-advantage-num{
3145 color:#1665b1; 3160 color:#1665b1;
3146 } 3161 }
  3162 +/*lsq 多运维平台样式 2022-10-12*/
  3163 +.flex-warp-center{
  3164 + display: flex;
  3165 + justify-content: center;
  3166 +}
  3167 +.cloud-content{
  3168 + background: #ffffff;
  3169 + padding:10px;
  3170 + border-radius: 5px;
  3171 + box-shadow: 0 0 8px rgba(70,144,241,.3);
  3172 +}
  3173 +.cloud-title{
  3174 + background: linear-gradient(to bottom, #9cc7fe 0%, #4690f1 100%);
  3175 + padding:20px;
  3176 + color:#ffffff;
  3177 + font-size: 21px;
  3178 + font-family: 'PingFang-SC-heavy';
  3179 + border-radius: 6px;
  3180 +}
  3181 +.cloud-icon-item{
  3182 + border-right:1px solid #eee;
  3183 + margin:25px 0;
  3184 +}
  3185 +.cloud-icon-item-con{
  3186 + align-items: center;
  3187 + padding:10px;
  3188 +
  3189 +}
  3190 +.cloud-icon-title{
  3191 + font-size: 18px;
  3192 + color:#666;
  3193 +}
  3194 +.cloud-content-public .cloud-icon-item:nth-child(3n),
  3195 +.cloud-content-private .cloud-icon-item:nth-child(2n){
  3196 + border:none;
  3197 +}
  3198 +.cloud-c-title{
  3199 + font-size: 24px;
  3200 + color:#333;
  3201 + font-family: 'PingFang-SC-medium';
  3202 + text-align: center;
  3203 +}
  3204 +@media (min-width: 1400px) {
  3205 + .container.cloud,.container.cmdb {
  3206 + max-width: 1200px;
  3207 + }
  3208 +}
  3209 +.banner-introduction .intro-intro{
  3210 + padding-top:20px;
  3211 + line-height: 24px;
  3212 +}
  3213 +/*lsq cmdb样式 2022-10-13*/
  3214 +.func-top{
  3215 + width: 100%;
  3216 +}
  3217 +.func-top-item{
  3218 + font-size: 21px;
  3219 + color:#333;
  3220 + cursor: pointer;
  3221 +}
  3222 +.func-item-active{
  3223 + color:#e4312a;
  3224 +}
  3225 +.func-bottom{
  3226 + min-height: 425px;
  3227 +}
  3228 +.func-bottom-title{
  3229 + font-size: 36px;
  3230 + color:#ffffff;
  3231 + display: flex;
  3232 + align-items: center;
  3233 + justify-content: space-around;
  3234 +}
  3235 +.func-bottom-title span,.funcIntro-span{
  3236 + flex:1;
  3237 +}
  3238 +.funcIntro-span{
  3239 + min-height: 82px;
  3240 +}
  3241 +.func-bottom-intro{
  3242 + font-size: 16px;
  3243 + color:#ffffff;
  3244 + font-family: 'PingFang-SC-medium';
  3245 + padding:40px;
  3246 + display: flex;
  3247 + align-items: center;
  3248 + justify-content: center;
  3249 +}
  3250 +.func-bg{
  3251 + position: absolute;
  3252 + width: 100%;
  3253 + left: 0;
  3254 + top: 33%;
  3255 + z-index: 0;
  3256 +}
  3257 +.container.cmdb{
  3258 + z-index: 1;
  3259 + position: relative;
  3260 +}
  3261 +
  3262 +@media (min-width: 992px){
  3263 + .func-top .func-top-item{
  3264 + max-width:20% ;
  3265 + flex: 20%;
  3266 + }
  3267 +}
  3268 +.cmdb .info-title{
  3269 + padding-top:20px;
  3270 +}
  3271 +.func-symbol{
  3272 + font-size: 80px;
  3273 + height:45%;
  3274 + display: flex;
  3275 + align-items: flex-start;
  3276 + font-family: 'MI_LANTING_REGULAR';
  3277 +}
  3278 +.func-l-p.func-bottom-intro{
  3279 + padding-left:63px;
  3280 +}
  3281 +.lifeCycle-item{
  3282 + background: #f3f5f8;
  3283 + border-radius: 5px;
  3284 + font-family: 'PingFang-SC-medium';
  3285 + font-size: 18px;
  3286 + color:#666;
  3287 + padding: 20px 30px;
  3288 + line-height: 32px;
  3289 +}
  3290 +.lifeCycle-item:nth-child(1){
  3291 + margin-bottom: 20px;
  3292 + color:#ffffff;
  3293 + font-size: 16px;
  3294 + background: url("../img/serviceSecond/cmdb/lifeCycle-1.png");
  3295 + background-size: cover;
  3296 + text-indent: 32px;
  3297 +}
  3298 +.lifeCycle-item-title{
  3299 + color:#333;
  3300 +}
  3301 +.lifeCycle-intro{
  3302 + display: flex;
  3303 + align-items: center;
  3304 + justify-content: space-between;
  3305 +}
  3306 +.lifeCycle-item:nth-child(2){
  3307 + padding: 30px;
  3308 +}
  3309 +.lifeCycle-item:nth-child(2) .lifeCycle-intro{
  3310 + padding-top:20px;
  3311 +}
  3312 +.app-title{
  3313 + font-size: 24px;
  3314 + color:#666;
  3315 +}
  3316 +.app-bg{
  3317 + background: #f6f9fd;
  3318 + border-radius: 5px;
  3319 + padding: 20px;
  3320 +}
  3321 +.info-app-intro{
  3322 + font-size: 16px;
  3323 + color:#666;
  3324 + font-family: 'PingFang-SC-regular';
  3325 + min-height: 158px;
  3326 +}
  3327 +.app-advantage-style{
  3328 + border-right:1px solid #525a6a;
  3329 + padding:60px 20px 0;
  3330 + height:100%;
  3331 +}
  3332 +.Aview-advantage-con:last-child .app-advantage-style{
  3333 + border:none;
  3334 +}
  3335 +.Aview-advantage-con:last-child .pro-info-title{
  3336 + padding-right:0;
  3337 +}
  3338 +.app-advantage-bg{
  3339 + background: url("../img/serviceSecond/cmdb/advantage-bg.png");
  3340 + background-size: cover;
  3341 + position: absolute;
  3342 + height: 100%;
  3343 + width: 100%;
  3344 + left: 0;
  3345 + top: 0;
  3346 + z-index: -1;
  3347 +}
  3348 +
  3349 +.app-advantage-ul li{
  3350 + line-height: 36px;
  3351 + list-style: disc;
  3352 +}
  3353 +
  3354 +.cmdb-advantage-con .app-advantage-ul,.Aview-advantage-con:last-child .app-advantage-ul{
  3355 + max-width: 100%;
  3356 +}
  3357 +.cmdb-advantage-con .app-advantage-style{
  3358 + padding:60px 40px 0;
  3359 +}
No preview for this file type

4.23 KB | W: | H:

4.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -2,19 +2,19 @@ export function culturalValuesDatas() { @@ -2,19 +2,19 @@ export function culturalValuesDatas() {
2 let res = [ 2 let res = [
3 { 3 {
4 icon:'assets/img/about/culturalValues-1.png', 4 icon:'assets/img/about/culturalValues-1.png',
5 - title:'"高"客户满意度' 5 + title:'“高”客户满意度'
6 }, 6 },
7 { 7 {
8 icon:'assets/img/about/culturalValues-2.png', 8 icon:'assets/img/about/culturalValues-2.png',
9 - title:'"高"效率运转' 9 + title:'“高”效率运转'
10 }, 10 },
11 { 11 {
12 icon:'assets/img/about/culturalValues-3.png', 12 icon:'assets/img/about/culturalValues-3.png',
13 - title:'"高"核心员工满意度' 13 + title:'“高”核心员工满意度'
14 }, 14 },
15 { 15 {
16 icon:'assets/img/about/culturalValues-4.png', 16 icon:'assets/img/about/culturalValues-4.png',
17 - title:'"高"成本合理支出' 17 + title:'“低”成本合理支出'
18 } 18 }
19 ] 19 ]
20 return res; 20 return res;
1 export function homeDatas() { 1 export function homeDatas() {
2 let res=[ 2 let res=[
3 { 3 {
4 - title:'"魔镜智能"全面完成国产化兼容适配认证',  
5 - introduction:'鸿果科技旗下“魔镜智能”自研”A-View智能综合监控管理平台系统“完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性认证', 4 + title:'“魔镜智能”全面完成国产化兼容适配认证',
  5 + introduction:'鸿果科技旗下“魔镜智能”自研“A-View智能综合监控管理平台系统”完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性认证',
6 isService:false, 6 isService:false,
7 isConcat:false, 7 isConcat:false,
8 }, 8 },
@@ -45,25 +45,25 @@ export function Information() { @@ -45,25 +45,25 @@ export function Information() {
45 icon:'assets/img/serviceSecond/information/advantage-1.png', 45 icon:'assets/img/serviceSecond/information/advantage-1.png',
46 title:'“护网””等保”各规章变成“流程”强制性管控', 46 title:'“护网””等保”各规章变成“流程”强制性管控',
47 introduction:'特点：规章落地 提前约束 流程强制 全程留痕', 47 introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
48 - img:'assets/img/serviceSecond/information/advantageImg.png' 48 + img:'assets/img/serviceSecond/information/advantageImg-1.png'
49 }, 49 },
50 { 50 {
51 icon:'assets/img/serviceSecond/information/advantage-2.png', 51 icon:'assets/img/serviceSecond/information/advantage-2.png',
52 title:'通过”安全流程“提前管控日常操作、留痕', 52 title:'通过”安全流程“提前管控日常操作、留痕',
53 introduction:'', 53 introduction:'',
54 - img:'assets/img/serviceSecond/information/advantageImg.png' 54 + img:'assets/img/serviceSecond/information/advantageImg-2.png'
55 }, 55 },
56 { 56 {
57 icon:'assets/img/serviceSecond/information/advantage-3.png', 57 icon:'assets/img/serviceSecond/information/advantage-3.png',
58 title:'税务局业务流程目录、展示、流程的分类管理', 58 title:'税务局业务流程目录、展示、流程的分类管理',
59 introduction:'', 59 introduction:'',
60 - img:'assets/img/serviceSecond/information/advantageImg.png' 60 + img:'assets/img/serviceSecond/information/advantageImg-3.png'
61 }, 61 },
62 { 62 {
63 icon:'assets/img/serviceSecond/information/advantage-4.png', 63 icon:'assets/img/serviceSecond/information/advantage-4.png',
64 title:'工作组、用户权限的灵活配置', 64 title:'工作组、用户权限的灵活配置',
65 introduction:'', 65 introduction:'',
66 - img:'assets/img/serviceSecond/information/advantageImg.png' 66 + img:'assets/img/serviceSecond/information/advantageImg-4.png'
67 } 67 }
68 ], 68 ],
69 type:'advantage' 69 type:'advantage'
@@ -117,25 +117,25 @@ export function securityLog() { @@ -117,25 +117,25 @@ export function securityLog() {
117 introduction:'', 117 introduction:'',
118 dataFour:[ 118 dataFour:[
119 { 119 {
120 - img:'assets/img/serviceSecond/securityLog/advantageImg.png', 120 + img:'assets/img/serviceSecond/securityLog/advantageImg-1.png',
121 title:'高效数据处理能力', 121 title:'高效数据处理能力',
122 introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。', 122 introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。',
123 isDisplay:true 123 isDisplay:true
124 }, 124 },
125 { 125 {
126 - img:'assets/img/serviceSecond/securityLog/advantageImg.png', 126 + img:'assets/img/serviceSecond/securityLog/advantageImg-2.png',
127 title:'基于策略分析的安全事件响应', 127 title:'基于策略分析的安全事件响应',
128 introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。', 128 introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。',
129 isDisplay:true 129 isDisplay:true
130 }, 130 },
131 { 131 {
132 - img:'assets/img/serviceSecond/securityLog/advantageImg.png', 132 + img:'assets/img/serviceSecond/securityLog/advantageImg-3.png',
133 title:'可视化日志展示', 133 title:'可视化日志展示',
134 introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。', 134 introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。',
135 isDisplay:true 135 isDisplay:true
136 }, 136 },
137 { 137 {
138 - img:'assets/img/serviceSecond/securityLog/advantageImg.png', 138 + img:'assets/img/serviceSecond/securityLog/advantageImg-4.png',
139 title:'日志存储和归档', 139 title:'日志存储和归档',
140 introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。', 140 introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。',
141 isDisplay:true 141 isDisplay:true
@@ -457,7 +457,7 @@ export function alarm() { @@ -457,7 +457,7 @@ export function alarm() {
457 457
458 return res 458 return res
459 } 459 }
460 -//综合监控管理A-view todo 460 +//综合监控管理A-view
461 export function Aview() { 461 export function Aview() {
462 let res={ 462 let res={
463 title:'综合监控管理A-view', 463 title:'综合监控管理A-view',
@@ -623,195 +623,291 @@ export function Aview() { @@ -623,195 +623,291 @@ export function Aview() {
623 623
624 return res 624 return res
625 } 625 }
626 -//CMDB资产管理 todo 626 +//CMDB资产管理
627 export function cmdb() { 627 export function cmdb() {
628 let res={ 628 let res={
629 title:'CMDB资产管理', 629 title:'CMDB资产管理',
630 - introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。', 630 + introduction:'CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
631 data:[ 631 data:[
632 { 632 {
633 title:'产品信息', 633 title:'产品信息',
634 - introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。', 634 + introData:['CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
  635 + '构建CMDB也是一个重新审视和剖析现有IT系统与数据的过程，通过CMDB的建设，将建立起集中、统一、标准、可控、服务化的平台型数据管理和消费模式，有利于数据的管理、利用，更有利于提升数据的质量和消费价值。'
  636 + ],
635 type:'info' 637 type:'info'
636 }, 638 },
637 { 639 {
638 - title:'产品特点', 640 + title:'产品价值',
639 introduction:'', 641 introduction:'',
640 - data:[ 642 + dataC:[
641 { 643 {
642 - icon:'assets/img/serviceSecond/information/character-1.png',  
643 - title:'工单信息集中管理',  
644 - introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。' 644 + img:'assets/img/serviceSecond/cmdb/value-1.png',
  645 + title:'提供统一的配置基础数据和IT架构全景图',
  646 + introData:['产品作为企业CMDB的技术载体，能够为系统监控、服务管理、自动化操作、安全管理、运维大数据、Devops等软件平台提供配置数据服务，帮助企业深入了解和掌控复杂的IT服务及资源组件。']
645 }, 647 },
646 { 648 {
647 - icon:'assets/img/serviceSecond/information/character-2.png',  
648 - title:'提高工作效率',  
649 - introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。' 649 + img:'assets/img/serviceSecond/cmdb/value-2.png',
  650 + title:'支持面向业务的CMDB动态建模',
  651 + introData:['系统支持面向业务视角的CMDB分层模型，可以根据实际环境进行配置项分类，配置项属性、配置项状态、CI与CI之间关系的定义和动态调整，提供面向业务的整体IT架构画像。']
650 }, 652 },
651 { 653 {
652 - icon:'assets/img/serviceSecond/information/character-3.png',  
653 - title:'实时处理单数据',  
654 - introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。' 654 + img:'assets/img/serviceSecond/cmdb/value-3.png',
  655 + title:'支持自动化的CMDB数据维护',
  656 + introData:['系统内置业内领先的CMDB 自动发现组件，同时支持有代理和无代理两种工作模式，通过自动发现机制发现并收集从公有云/私有云到传统IT的各类 IT 资源配置信息、关联关系，为 CMDB 提供第一手的数据，避免手工方式带来的工作量大，数据更新不及时不准确等问题。']
  657 + },
  658 + {
  659 + img:'assets/img/serviceSecond/cmdb/value-4.png',
  660 + title:'多场景的消费API，基于IT架构驱动运维管理',
  661 + introData:['系统提供场景、配置项、关系等各个层面的数据消费Restful API，实现与监控、ITSM、云管、自动化运维、Devops工具等各种第三方系统对接，实现高性能的查询、更改、推送操作，完成组织内各种运维工具间的基础信息共享和任务协同，实现基于IT架构驱动的运维管理。']
  662 + },
  663 + {
  664 + img:'assets/img/serviceSecond/cmdb/value-5.png',
  665 + title:'面向运维的知识图谱',
  666 + introData:['提供面向运维的知识图谱，从物理连接、部署关系、调用关系、业务关联等多个维度清晰展现配置项关联关系，为故障分析、风险评估、架构管理等复杂运维工作提供支撑。']
  667 + },
  668 + {
  669 + img:'assets/img/serviceSecond/cmdb/value-6.png',
  670 + title:'关联关系可视化展现，提高工作效率',
  671 + introData:['提供从机房位置视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，通过可视化展示方式，使IT管理人员对信息的理解和应用清晰和便捷，能够对这种关联一目了然，从而提高工作效率。']
655 } 672 }
656 ], 673 ],
657 - type:'character' 674 + type:'value'
658 }, 675 },
659 { 676 {
660 title:'系统框架', 677 title:'系统框架',
661 - introduction:'安全运维服务流程的系统架构',  
662 - img:'assets/img/serviceSecond/information/system.png', 678 + introduction:'',
  679 + img:'assets/img/serviceSecond/cmdb/system.png',
663 type:'system' 680 type:'system'
664 }, 681 },
665 { 682 {
666 - title:'产品优势', 683 + title:'CMDB主要实现五个方面的功能',
667 introduction:'', 684 introduction:'',
668 - dataSecond:[ 685 + dataFunc:[
669 { 686 {
670 - icon:'assets/img/serviceSecond/information/advantage-1.png',  
671 - title:'“护网””等保”各规章变成“流程”强制性管控',  
672 - introduction:'特点：规章落地 提前约束 流程强制 全程留痕',  
673 - img:'assets/img/serviceSecond/information/advantageImg.png' 687 + title:'数据模型管理',
  688 + introduction:'提供配置类别、配置项模型和配置关系的自定义。提供图形化界面定义CMDB的数据结构，包括CI类型、每个CI类型包含的属性、对应的CI状态取值、允许的关系类型、CI实例唯一性判断规则，定义每个CI属性字段的数据类型、合法性校验规则、数据调和规则。',
  689 + img:'assets/img/serviceSecond/cmdb/func-1.png'
674 }, 690 },
675 { 691 {
676 - icon:'assets/img/serviceSecond/information/advantage-2.png',  
677 - title:'通过”安全流程“提前管控日常操作、留痕',  
678 - introduction:'',  
679 - img:'assets/img/serviceSecond/information/advantageImg.png' 692 + title:'配置数据收集',
  693 + introduction:'提供企业级配置自动化发现模块，实现对IT环境中各类环境设施、IT基础架构、应用系统和业务服务信息的收集。 ',
  694 + img:'assets/img/serviceSecond/cmdb/func-2.png'
680 }, 695 },
681 { 696 {
682 - icon:'assets/img/serviceSecond/information/advantage-3.png',  
683 - title:'税务局业务流程目录、展示、流程的分类管理',  
684 - introduction:'',  
685 - img:'assets/img/serviceSecond/information/advantageImg.png' 697 + title:'配置数据管理',
  698 + introduction:'采用非结构化数据库技术，完成对海量CMDB信息的管理，包括维护模型、配置项、关系映射的版本，对采集获取的管理对象数据进行模型化和实例化，并将配置项实例映射到应用服务和业务服务。',
  699 + img:'assets/img/serviceSecond/cmdb/func-3.png'
686 }, 700 },
687 { 701 {
688 - icon:'assets/img/serviceSecond/information/advantage-4.png',  
689 - title:'工作组、用户权限的灵活配置',  
690 - introduction:'',  
691 - img:'assets/img/serviceSecond/information/advantageImg.png' 702 + title:'数据消费服务',
  703 + introduction:'提供可视化拓扑展现、报表、访问权限控制等功能。同时为外部运维场景消费CMDB中存储的各类资源配置数据提供标准Restful API接口。',
  704 + img:'assets/img/serviceSecond/cmdb/func-4.png'
  705 + },
  706 + {
  707 + title:'关系可视化展现',
  708 + introduction:'提供从应用视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，使IT管理人员对信息的理解和应用关联一目了然。',
  709 + img:'assets/img/serviceSecond/cmdb/func-5.png'
692 } 710 }
693 ], 711 ],
694 - type:'advantage' 712 + type:'func'
695 }, 713 },
696 { 714 {
697 - title:'平台价值',  
698 - introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',  
699 - dataThird:[  
700 - {  
701 - title:'标准化',  
702 - introduction:'信息、流程、时间全面统一，高效协同',  
703 - img:'assets/img/serviceSecond/information/value-bg.png'  
704 - }, 715 + title: 'IT资产生命周期流程化管理',
  716 + introduction: '',
  717 + icon:'assets/img/serviceSecond/cmdb/lifeCycle.png',
  718 + dataLife:[
705 { 719 {
706 - title:'规范化',  
707 - introduction:'理清流程、制度落地，业务按标准执行',  
708 - img:'assets/img/serviceSecond/information/value-bg.png' 720 + title:'',
  721 + introData:['CMDB是数据管道、ITSM是流程管道”，CMDB支持ITSM流程的运转，并于流程所经之处在CMDB留痕，对IT资产的生命周期内业务相关流程进行管理，从而实现全生命周期的信息记录和审计']
709 }, 722 },
710 { 723 {
711 - title:'透明化',  
712 - introduction:'流程申请、流程进度、流程审批全程可观',  
713 - img:'assets/img/serviceSecond/information/value-bg.png' 724 + title:'资产续保',
  725 + introData:['维保到期提醒','维保到期维护','维保信息稽核']
714 } 726 }
715 ], 727 ],
716 - type:'value'  
717 - },  
718 - ]  
719 - }  
720 -  
721 - return res  
722 -}  
723 -//魔镜智能多云运维平台 todo  
724 -export function cloud() {  
725 - let res={  
726 - title:'魔镜智能多云运维平台',  
727 - introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',  
728 - data:[  
729 - {  
730 - title:'产品信息',  
731 - introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',  
732 - type:'info' 728 + type:'lifeCycle'
733 }, 729 },
734 { 730 {
735 - title:'产品特点',  
736 - introduction:'', 731 + title:'CMDB的高阶应用',
737 data:[ 732 data:[
738 { 733 {
739 - icon:'assets/img/serviceSecond/information/character-1.png',  
740 - title:'工单信息集中管理',  
741 - introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。' 734 + icon:'assets/img/serviceSecond/cmdb/app-icon-1.png',
  735 + title:'故障处理',
  736 + introduction:'构建故障特征库，以监控故障发生特征，结合CMDB配置信息及关系数据，分析故障发生时的业务影响状态及范围，并实施故障自愈处理。'
742 }, 737 },
743 { 738 {
744 - icon:'assets/img/serviceSecond/information/character-2.png',  
745 - title:'提高工作效率',  
746 - introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。' 739 + icon:'assets/img/serviceSecond/cmdb/app-icon-2.png',
  740 + title:'能力分析',
  741 + introduction:'结合CMDB及关联数据，分析运维过程中涉及的业务资源、系统资源、运维能力的使用趋势，为系统容量调整提供数据支持。'
747 }, 742 },
748 { 743 {
749 - icon:'assets/img/serviceSecond/information/character-3.png',  
750 - title:'实时处理单数据',  
751 - introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'  
752 - } 744 + icon:'assets/img/serviceSecond/cmdb/app-icon-3.png',
  745 + title:'自动化运维',
  746 + introduction:'采用自动化运维工具来实施运维工作，管控因人工误操作带来的运维风险，减轻人工运维的工作量。'
  747 + },
  748 + {
  749 + icon:'assets/img/serviceSecond/cmdb/app-icon-4.png',
  750 + title:'系统配置管理',
  751 + introduction:'集中采集和管理各业务或应用系统的配置参数，为系统恢复或重建提供数据支持。实现配置数据的自动分发。'
  752 + },
753 ], 753 ],
754 - type:'character'  
755 - },  
756 - {  
757 - title:'系统框架',  
758 - introduction:'安全运维服务流程的系统架构',  
759 - img:'assets/img/serviceSecond/information/system.png',  
760 - type:'system' 754 + type:'app'
761 }, 755 },
762 { 756 {
763 title:'产品优势', 757 title:'产品优势',
764 introduction:'', 758 introduction:'',
765 - dataSecond:[ 759 + dataThird:[
766 { 760 {
767 - icon:'assets/img/serviceSecond/information/advantage-1.png',  
768 - title:'“护网””等保”各规章变成“流程”强制性管控',  
769 - introduction:'特点：规章落地 提前约束 流程强制 全程留痕',  
770 - img:'assets/img/serviceSecond/information/advantageImg.png' 761 + title:'随需而动的资源管理模型',
  762 + dataIntro:['灵活的配置管理数据模型，适应各种IT环境的管理需要','同时支持云环境以及传统IT环境的建模','资源分类、属性和关系可任意动态扩展']
771 }, 763 },
772 { 764 {
773 - icon:'assets/img/serviceSecond/information/advantage-2.png',  
774 - title:'通过”安全流程“提前管控日常操作、留痕',  
775 - introduction:'',  
776 - img:'assets/img/serviceSecond/information/advantageImg.png' 765 + title:'独有的双模自动发现能力',
  766 + dataIntro:['同时支持有代理和无代理模式的自动发现模式','适应不同安全管控模式下的客户IT环境','确保数据更新的准确性和及时性']
777 }, 767 },
778 { 768 {
779 - icon:'assets/img/serviceSecond/information/advantage-3.png',  
780 - title:'税务局业务流程目录、展示、流程的分类管理',  
781 - introduction:'',  
782 - img:'assets/img/serviceSecond/information/advantageImg.png' 769 + title:'面向业务的关联分析',
  770 + dataIntro:['面向业务应用的资源统一管理','兼容传统IT架构和云环境的基础设施和应用','内置启发式搜索和关联分析算法','可自动发现连接、部署、调用等关系']
  771 + }
  772 + ],
  773 + dataThirdA:[
  774 + {
  775 + title:'丰富多样的服务化API',
  776 + dataIntro:['基于IT资源实现信息共享和运维协同','支持多种场景的CMDB消费调用服务','提供完整和开放的服务API，实现稳定、高效、敏捷运维']
783 }, 777 },
784 { 778 {
785 - icon:'assets/img/serviceSecond/information/advantage-4.png',  
786 - title:'工作组、用户权限的灵活配置',  
787 - introduction:'',  
788 - img:'assets/img/serviceSecond/information/advantageImg.png' 779 + title:'简单易用，零开发导入',
  780 + dataIntro:['系统采用参数化设计、向导式配置','内置行业最佳实践的CMDB模型和消费场景','实施周期短，维护成本低']
789 } 781 }
790 ], 782 ],
791 type:'advantage' 783 type:'advantage'
  784 + }
  785 + ]
  786 + }
  787 +
  788 + return res
  789 +}
  790 +//魔镜智能多云运维平台
  791 +export function cloud() {
  792 + let res={
  793 + title:'魔镜智能多云运维平台',
  794 + introduction:'支持了国内外所有主流云厂商，包含混合云、多云环境下对计算资源的集中管理，自动化运维、监控、合规审计、多云纳管、云资源全生命周期等多个维度提供统一运维管控，提供系统映像、通过既定策略优化工作负载，系统运行状态，以及任务执行过程的可视化监控，并提供丰富的告警机制帮助客户进行快速处理，从而进行灵活的资源管理与运维。',
  795 + data:[
  796 + {
  797 + title:'产品信息',
  798 + introduction:'支持了国内外所有主流云厂商，包含混合云、多云环境下对计算资源的集中管理，自动化运维、监控、合规审计、多云纳管、云资源全生命周期等多个维度提供统一运维管控，提供系统映像、通过既定策略优化工作负载，系统运行状态，以及任务执行过程的可视化监控，并提供丰富的告警机制帮助客户进行快速处理，从而进行灵活的资源管理与运维。',
  799 + type:'info',
  800 + img:'assets/img/serviceSecond/cloud/info.png',
792 }, 801 },
793 { 802 {
794 - title:'平台价值',  
795 - introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',  
796 - dataThird:[ 803 + title: '',
  804 + publicCloud: {
  805 + title: '公有云',
  806 + iconData: [
  807 + {
  808 + title: '阿里云',
  809 + icon: 'assets/img/serviceSecond/cloud/aliyun.png'
  810 + },
  811 + {
  812 + title: '腾讯云',
  813 + icon: 'assets/img/serviceSecond/cloud/tengxunyun.png'
  814 + },
  815 + {
  816 + title: 'HUAWEI',
  817 + icon: 'assets/img/serviceSecond/cloud/huawei.png'
  818 + },
  819 + {
  820 + title: 'Microsoft Azure',
  821 + icon: 'assets/img/serviceSecond/cloud/microsoftAzure.png'
  822 + },
  823 + {
  824 + title: 'UCLOUD',
  825 + icon: 'assets/img/serviceSecond/cloud/ucloud.png'
  826 + },
  827 + {
  828 + title: '京东云',
  829 + icon: 'assets/img/serviceSecond/cloud/jdyun.png'
  830 + },
  831 + {
  832 + title: '青云',
  833 + icon: 'assets/img/serviceSecond/cloud/qingyun.png'
  834 + },
  835 + {
  836 + title: 'AWS',
  837 + icon: 'assets/img/serviceSecond/cloud/aws.png'
  838 + },
  839 + {
  840 + title: '百度云',
  841 + icon: 'assets/img/serviceSecond/cloud/baiduyun.png'
  842 + },
  843 + ]
  844 + },
  845 + privateCloud: {
  846 + title: '私有云',
  847 + iconData: [
  848 + {
  849 + title: 'openstack',
  850 + icon: 'assets/img/serviceSecond/cloud/openstack.png'
  851 + },
  852 + {
  853 + title: 'vmware',
  854 + icon: 'assets/img/serviceSecond/cloud/vmware.png'
  855 + },
  856 + {
  857 + title: '物理服务器',
  858 + icon: 'assets/img/serviceSecond/cloud/PCservice.png'
  859 + },
  860 + {
  861 + title: '虚拟机',
  862 + icon: 'assets/img/serviceSecond/cloud/vmware1.png'
  863 + },
  864 + {
  865 + title: '路由器/交换机',
  866 + icon: 'assets/img/serviceSecond/cloud/route.png'
  867 + },
  868 + {
  869 + title: '存储设备',
  870 + icon: 'assets/img/serviceSecond/cloud/storage.png'
  871 + }
  872 + ]
  873 + },
  874 + type:'icon'
  875 + },
  876 + {
  877 + title:'产品特点',
  878 + introduction:'',
  879 + dataC:[
797 { 880 {
798 - title:'标准化',  
799 - introduction:'信息、流程、时间全面统一，高效协同',  
800 - img:'assets/img/serviceSecond/information/value-bg.png' 881 + img:'assets/img/serviceSecond/cloud/character-1.png',
  882 + title:'多云资源统一管理',
  883 + introData:[
  884 + '可纳管多家主流私有云、公有云的计算、存储、网络等资源，实现资源台账可视化、资源操作便捷化以及多租户多层级的资源配额管理和数据分权。'
  885 + ]
801 }, 886 },
802 { 887 {
803 - title:'规范化',  
804 - introduction:'理清流程、制度落地，业务按标准执行',  
805 - img:'assets/img/serviceSecond/information/value-bg.png' 888 + img:'assets/img/serviceSecond/cloud/character-2.png',
  889 + title:'多云环境自动化编排',
  890 + introData:[
  891 + '通过对云资源的蓝图设计、服务发布、服务申请、工单管理以及资源回收等，帮助客户实现资源的自动化运维和全生命周期管理。'
  892 + ]
806 }, 893 },
807 { 894 {
808 - title:'透明化',  
809 - introduction:'流程申请、流程进度、流程审批全程可观',  
810 - img:'assets/img/serviceSecond/information/value-bg.png' 895 + img:'assets/img/serviceSecond/cloud/character-3.png',
  896 + title:'多云资源统一运维和监控',
  897 + introData:[
  898 + '提供灵活可配的告警策略管理、微信邮件等多种方式的告警通知、资源性能指标和健康状态的统一分析等，帮助用户实时掌握全局资源的运行状态。'
  899 + ]
  900 + },
  901 + {
  902 + img:'assets/img/serviceSecond/cloud/character-4.png',
  903 + title:'多维数据可视化',
  904 + introData:[
  905 + '通过自定义仪表盘实现资源用量的数据可视化分析;以资源池、集群、租户、主机等维度分析多云资源使用情况与变化趋势'
  906 + ]
811 } 907 }
812 ], 908 ],
813 - type:'value'  
814 - }, 909 + type:'character'
  910 + }
815 ] 911 ]
816 } 912 }
817 913
@@ -99,9 +99,10 @@ router.beforeEach(async (to, from, next) => { @@ -99,9 +99,10 @@ router.beforeEach(async (to, from, next) => {
99 $('[top-nav]').removeClass('current'); 99 $('[top-nav]').removeClass('current');
100 $('[top-nav="'+toPath+'"]').addClass('current'); 100 $('[top-nav="'+toPath+'"]').addClass('current');
101 // 回到顶部 101 // 回到顶部
  102 + //lsq 跳转页面后页面滚动到顶部不增加滚动效果，延时减小 2022-10-14
102 $('html, body').animate({ 103 $('html, body').animate({
103 scrollTop: 0 104 scrollTop: 0
104 - }, 500); 105 + }, 100);
105 106
106 next(); 107 next();
107 }) 108 })
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 <section class="about-section rel text-center"> 36 <section class="about-section rel text-center">
37 <div class="container"> 37 <div class="container">
38 <div class="row wow customFadeInRight delay-0-1s slow"> 38 <div class="row wow customFadeInRight delay-0-1s slow">
39 - <div class="col-lg-12 col-md-12"> 39 + <div class="col-lg-12 col-md-12 pt-60">
40 <div class="title-style">鸿果文化价值观及企业目标</div> 40 <div class="title-style">鸿果文化价值观及企业目标</div>
41 </div> 41 </div>
42 </div> 42 </div>
@@ -41,8 +41,9 @@ export default { @@ -41,8 +41,9 @@ export default {
41 } 41 }
42 } 42 }
43 } 43 }
44 - setNavStyle();  
45 - 44 + setTimeout(function (){
  45 + setNavStyle();
  46 + },700)
46 } 47 }
47 // 设置导航的样式 48 // 设置导航的样式
48 let setNavStyle=()=>{ 49 let setNavStyle=()=>{
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 <section class="intro-tab"> 19 <section class="intro-tab">
20 <div class="container"> 20 <div class="container">
21 <ul class="intro-tab-container"> 21 <ul class="intro-tab-container">
22 - <li class="tab-item-li" v-for="(item,index) in cloudData.data" :key="item"> 22 + <li class="tab-item-li" v-for="(item,index) in cloudData.data" :key="item" v-show="item.title">
23 <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span> 23 <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
24 </li> 24 </li>
25 </ul> 25 </ul>
@@ -27,9 +27,9 @@ @@ -27,9 +27,9 @@
27 </section> 27 </section>
28 28
29 29
30 -<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.data" :key="item"> 30 +<section :class="['info-container', 'rel', 'pt-55',{'mb-70':item.type!='icon','pb-55':item.type=='icon','info-container-bg':item.type=='icon'}]" v-for="(item,index) in cloudData.data" :key="item">
31 <div class="div-type" :data-type="item.type"></div> 31 <div class="div-type" :data-type="item.type"></div>
32 - <div class="container"> 32 + <div class="container cloud">
33 <div class="info-title">{{item.title}}</div> 33 <div class="info-title">{{item.title}}</div>
34 <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> 34 <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>
35 <div class="row" v-if="item.data && item.data.length>0"> 35 <div class="row" v-if="item.data && item.data.length>0">
@@ -39,36 +39,53 @@ @@ -39,36 +39,53 @@
39 <div class="info-character-intro">{{itemC.introduction}}</div> 39 <div class="info-character-intro">{{itemC.introduction}}</div>
40 </div> 40 </div>
41 </div> 41 </div>
42 - <div class="info-system pt-30" v-if="item.img"> 42 + <div class="info-system pt-50" v-if="item.img">
43 <img :src="item.img" alt=""> 43 <img :src="item.img" alt="">
44 </div> 44 </div>
45 - <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">  
46 - <div class="col-lg-4">  
47 - <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">  
48 - <img class="" :src="itemA.icon" alt="">  
49 - <div :class="['info-advantage-title']">  
50 - <div>{{itemA.title}}</div>  
51 - <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div> 45 + <div class="row" v-if="item.publicCloud && item.privateCloud">
  46 + <div class="col-lg-8">
  47 + <div class="cloud-content cloud-content-public">
  48 + <div class="cloud-title">{{item.publicCloud.title}}</div>
  49 + <div class="row cloud-icon-container flex-warp-center">
  50 + <div class="cloud-icon-item col-md-4" v-for="itemI in item.publicCloud.iconData">
  51 + <div class="cloud-icon-item-con flex-column-center">
  52 + <div class="cloud-img">
  53 + <img :src="itemI.icon" alt="">
  54 + </div>
  55 + <div class="cloud-icon-title pt-30">{{itemI.title}}</div>
  56 + </div>
  57 + </div>
52 </div> 58 </div>
53 </div> 59 </div>
54 </div> 60 </div>
55 - <div class="col-lg-8">  
56 - <img :src="advantageImg" alt=""> 61 + <div class="col-lg-4 ">
  62 + <div class="cloud-content cloud-content-private">
  63 + <div class="cloud-title">{{item.privateCloud.title}}</div>
  64 + <div class="row cloud-icon-container flex-warp-center">
  65 + <div class="cloud-icon-item col-md-6" v-for="itemI in item.privateCloud.iconData">
  66 + <div class="cloud-icon-item-con flex-column-center">
  67 + <div class="cloud-img">
  68 + <img :src="itemI.icon" alt="">
  69 + </div>
  70 + <div class="cloud-icon-title pt-30">{{itemI.title}}</div>
  71 + </div>
  72 +
  73 + </div>
  74 + </div>
  75 + </div>
57 </div> 76 </div>
58 </div> 77 </div>
59 - <div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">  
60 - <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">  
61 - <div class="info-value" >  
62 - <img class="" :src="itemV.img" alt="">  
63 - <div :class="['info-value-title']">  
64 - <h3>{{itemV.title}}</h3>  
65 - <div>{{itemV.introduction}}</div>  
66 - </div> 78 + <div class="row pt-30 pd-40" v-if="item.dataC && item.dataC.length>0">
  79 + <div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataC">
  80 + <div class="div-img text-center">
  81 + <img :src="itemA.img" alt="">
67 </div> 82 </div>
68 - 83 + <div class="cloud-c-title pt-30">{{itemA.title}}</div>
  84 + <ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30','pl-20','pr-20']" v-if="itemA.introData.length>0">
  85 + <li :class="['list-style-li']" v-for="(itemV,indexV) in itemA.introData"><i class="list-style"></i>{{itemV}}</li>
  86 + </ul>
69 </div> 87 </div>
70 </div> 88 </div>
71 -  
72 </div> 89 </div>
73 </section> 90 </section>
74 91
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
@@ -27,42 +27,74 @@ @@ -27,42 +27,74 @@
27 </section> 27 </section>
28 28
29 29
30 -<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cmdbData.data" :key="item"> 30 +<section :class="['info-container','info-container-'+item.type,'info-container-cmdb', 'rel', 'pt-55',{'mb-70':item.type=='system'||item.type=='app','info-container-bg':item.type=='func'}]" v-for="(item,index) in cmdbData.data" :key="item">
31 <div class="div-type" :data-type="item.type"></div> 31 <div class="div-type" :data-type="item.type"></div>
32 - <div class="container"> 32 + <div :class="'container cmdb '+item.type">
33 <div class="info-title">{{item.title}}</div> 33 <div class="info-title">{{item.title}}</div>
34 <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> 34 <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>
35 - <div class="row" v-if="item.data && item.data.length>0">  
36 - <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">  
37 - <img class="pt-50" :src="itemC.icon" alt="">  
38 - <h4 class="pt-30">{{itemC.title}}</h4>  
39 - <div class="info-character-intro">{{itemC.introduction}}</div> 35 + <div :class="['info-intro']" v-if="item.introData && item.introData.length>0">
  36 + <div class="info-intro-item" v-for="itemI in item.introData">{{itemI}}</div>
  37 + </div>
  38 + <div class="row pt-30" v-if="item.data && item.data.length>0">
  39 + <div class="col-md-3 flex-start-column " v-for="(itemC,indexC) in item.data">
  40 + <div class="app-bg pd-25">
  41 + <img class="" :src="itemC.icon" alt="">
  42 + <div class="pt-30 app-title">{{itemC.title}}</div>
  43 + <div class="info-app-intro font-size-14 pt-20">{{itemC.introduction}}</div>
  44 + </div>
40 </div> 45 </div>
41 </div> 46 </div>
42 <div class="info-system pt-30" v-if="item.img"> 47 <div class="info-system pt-30" v-if="item.img">
43 <img :src="item.img" alt=""> 48 <img :src="item.img" alt="">
44 </div> 49 </div>
45 - <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">  
46 - <div class="col-lg-4">  
47 - <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">  
48 - <img class="" :src="itemA.icon" alt="">  
49 - <div :class="['info-advantage-title']">  
50 - <div>{{itemA.title}}</div>  
51 - <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>  
52 - </div> 50 + <div class="row pt-30 pd-40" v-if="item.dataC && item.dataC.length>0">
  51 + <div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataC">
  52 + <div class="div-img text-center">
  53 + <img :src="itemA.img" alt="">
  54 + </div>
  55 + <div class="cloud-c-title pt-30">{{itemA.title}}</div>
  56 + <ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30','pl-20','pr-20']" v-if="itemA.introData.length>0">
  57 + <li :class="['list-style-li']" v-for="(itemV,indexV) in itemA.introData">{{itemV}}</li>
  58 + </ul>
  59 + </div>
  60 + </div>
  61 + <div class="row mt-40 pb-30" v-if="item.dataFunc && item.dataFunc.length>0">
  62 + <div class="func-top row">
  63 + <div @click="changeFunc(indexF)" :class="['col-lg-2', 'func-top-item',{'func-item-active':funcActive==indexF}]" v-for="(itemF,indexF) in item.dataFunc">
  64 + {{itemF.title}}
53 </div> 65 </div>
54 </div> 66 </div>
55 - <div class="col-lg-8">  
56 - <img :src="advantageImg" alt=""> 67 + <div class="func-bottom row pt-30">
  68 + <div class="col-lg-6 func-bottom-title"><span></span><span>{{funcTitle}}</span></div>
  69 + <div :class="['col-lg-6', 'func-bottom-intro',{'func-l-p':funcActive==1}]"><span class="func-symbol">“</span><span class="funcIntro-span">{{funcIntro}}</span></div>
  70 + </div>
  71 + </div>
  72 +
  73 + <div class="row pt-50" v-if="item.dataLife && item.dataLife.length>0">
  74 + <div class="col-lg-7">
  75 + <img :src="item.icon" alt="">
  76 + </div>
  77 + <div class="col-lg-5 lifeCycle-con flex-column-center">
  78 + <div class="lifeCycle-item" v-for="itemL in item.dataLife">
  79 + <div class="lifeCycle-item-title" v-if="itemL.title">{{itemL.title}}</div>
  80 + <div class="lifeCycle-intro">
  81 + <div class="lifeCycle-intro-item" v-for="itemI in itemL.introData">{{itemI}}</div>
  82 + </div>
  83 + </div>
57 </div> 84 </div>
58 </div> 85 </div>
59 - <div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">  
60 - <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">  
61 - <div class="info-value" >  
62 - <img class="" :src="itemV.img" alt="">  
63 - <div :class="['info-value-title']">  
64 - <h3>{{itemV.title}}</h3>  
65 - <div>{{itemV.introduction}}</div> 86 + </div>
  87 + <div class="func-bg" v-if="item.type=='func'">
  88 + <img :src="funcImg" alt="">
  89 + </div>
  90 + <div class="Aview-con" v-if="item.dataThird && item.dataThird.length>0">
  91 + <div class="row Aview-container">
  92 + <div class="col-lg-4 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThird">
  93 + <div class="info-value app-advantage-style pb-50" >
  94 + <div :class="['pro-info-title']">
  95 + <div class=" advantage-title-Aview">{{itemV.title}}</div>
  96 + <ul class="app-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
  97 + <div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+1}}</div>
66 </div> 98 </div>
67 </div> 99 </div>
68 100
@@ -70,6 +102,20 @@ @@ -70,6 +102,20 @@
70 </div> 102 </div>
71 103
72 </div> 104 </div>
  105 + <div class=" Aview-con cmdb-advantage-con" v-if="item.dataThirdA && item.dataThirdA.length>0">
  106 + <div class="row Aview-container">
  107 + <div class="col-lg-6 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThirdA">
  108 + <div class="info-value pb-50 app-advantage-style" >
  109 + <div :class="['pro-info-title']">
  110 + <div class=" advantage-title-Aview">{{itemV.title}}</div>
  111 + <ul class="app-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
  112 + <div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+3}}</div>
  113 + </div>
  114 + </div>
  115 + </div>
  116 + </div>
  117 + </div>
  118 + <div class="app-advantage-bg" v-if="item.type=='advantage'"></div>
73 </section> 119 </section>
74 120
75 121
@@ -10,14 +10,44 @@ export default { @@ -10,14 +10,44 @@ export default {
10 let cmdbData=cmdb(); 10 let cmdbData=cmdb();
11 //页签高亮显示 11 //页签高亮显示
12 let tabActive=Vue.ref(0); 12 let tabActive=Vue.ref(0);
  13 + //cmdb实现五大功能的高亮显示
  14 + let funcActive=Vue.ref(0);
  15 + let funcTitle=Vue.ref();
  16 + let funcIntro=Vue.ref();
  17 + let funcImg=Vue.ref();
  18 + const funcData=()=>{
  19 + cmdbData.data.map(item=>{
  20 + if(item.type=='func'){
  21 + funcTitle.value=item.dataFunc[0].title;
  22 + funcIntro.value=item.dataFunc[0].introduction;
  23 + funcImg.value=item.dataFunc[0].img;
  24 + }
  25 + })
  26 + }
  27 + //五个功能change事件
  28 + let changeFunc=(index)=>{
  29 + funcActive.value=index;
  30 + cmdbData.data.map(item=>{
  31 + if(item.type=='func'){
  32 + funcTitle.value=item.dataFunc[index].title;
  33 + funcIntro.value=item.dataFunc[index].introduction;
  34 + funcImg.value=item.dataFunc[index].img;
  35 + }
  36 + })
  37 + }
13 // 挂载完 38 // 挂载完
14 Vue.onMounted(() => { 39 Vue.onMounted(() => {
15 - 40 + funcData();
16 }) 41 })
17 42
18 return { 43 return {
19 cmdbData, 44 cmdbData,
20 - tabActive 45 + tabActive,
  46 + funcActive,
  47 + funcTitle,
  48 + funcIntro,
  49 + funcImg,
  50 + changeFunc
21 } 51 }
22 } 52 }
23 53
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 <div class="col-lg-4 maintenance-advantage-item" v-for="(itemV,indexV) in item.dataThird"> 77 <div class="col-lg-4 maintenance-advantage-item" v-for="(itemV,indexV) in item.dataThird">
78 <div class="info-value pro-advantage-style pb-50" > 78 <div class="info-value pro-advantage-style pb-50" >
79 <div :class="['pro-info-title']"> 79 <div :class="['pro-info-title']">
80 - <h4 class="color-white">{{itemV.title}}</h4> 80 + <div class="advantage-title-Aview">{{itemV.title}}</div>
81 <ul class="pro-advantage-ul pt-30"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul> 81 <ul class="pro-advantage-ul pt-30"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
82 <div class="maintenance-advantage-num pt-100 pb-80">0{{indexV+1}}</div> 82 <div class="maintenance-advantage-num pt-100 pb-80">0{{indexV+1}}</div>
83 </div> 83 </div>
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
@@ -50,7 +50,7 @@ @@ -50,7 +50,7 @@
50 </li> 50 </li>
51 </ul> 51 </ul>
52 </div> 52 </div>
53 - <span class="btn btn-danger mt-25 mb-25 ml-15 d-inline-block min-width-100">现在申请</span> 53 +<!-- <span class="btn btn-danger mt-25 mb-25 ml-15 d-inline-block min-width-100">现在申请</span>-->
54 </div> 54 </div>
55 </div> 55 </div>
56 <div class="bg-white border float-left p-10 w-30"> 56 <div class="bg-white border float-left p-10 w-30">
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 pb-90 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>