monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 673adc49af8c39c0a6449d540ce7d3ad2359907d 2 parents 73c1117e 4532ead7 wangfeng-mj ... master-500-dev master-500-dev-0327 master-500-dev-joke master-500-dev-lushangqing master-500-dev-lzc master-500-dev-xwx master-500-dev-yuanjinpeng master-500-dev-ztq1 master-mj master-mj-610 master-mj-joke master-mj-yuanjinpeng master-mj-ztq wangfeng-500-dev

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

【无】 【公司网站】CMDB资产管理



See merge request !1021
Inline Side-by-side
Showing 24 changed files with 383 additions and 78 deletions
... ... @@ -62,6 +62,12 @@
font-weight: normal;
src:url('../fonts/pingfang/PINGFANG REGULAR.TTF');
}
@font-face {
font-family: 'MI_LANTING_REGULAR';
font-style: normal;
font-weight: normal;
src:url('../fonts/MI_LANTING_REGULAR.TTF');
}
* {
margin: 0px;
padding: 0px;
... ... @@ -1996,6 +2002,7 @@ blockquote:before {
font-size: 16px;
color:#666;
font-family: 'PingFang-SC-medium';
line-height: 32px;
}
.info-character{
padding:0 50px;
... ... @@ -2200,6 +2207,7 @@ blockquote:before {
}
.pro-advantage-ul{
font-size: 14px;
max-width:249px;
}
.pro-advantage-ul li{
padding:5px 0;
... ... @@ -2211,6 +2219,8 @@ blockquote:before {
}
.maintenance-advantage.info-title{
color:#fff;
margin-top: 30px;
margin-bottom: 30px;
}
.maintenance-advantage-num{
font-size: 90px;
... ... @@ -3109,6 +3119,9 @@ blockquote:before {
}
.info-container-advantage .info-title{
color:#fff;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 40px;
}
.info-container-advantage .pro-advantage-style{
padding: 50px 30px 0;
... ... @@ -3131,7 +3144,7 @@ blockquote:before {
}
@media (min-width: 1260px) {
.Aview-container {
max-width: 1200px;
max-width: 1080px;
}
}
.Aview-advantage-con:last-child .pro-advantage-style{
... ... @@ -3189,10 +3202,159 @@ blockquote:before {
text-align: center;
}
@media (min-width: 1400px) {
.container.cloud {
.container.cloud,.container.cmdb {
max-width: 1200px;
}
}
.banner-introduction .intro-intro{
padding-top:20px;
line-height: 24px;
}
/*lsq cmdb样式 2022-10-13*/
.func-top{
width: 100%;
}
.func-top-item{
font-size: 21px;
color:#333;
cursor: pointer;
}
.func-item-active{
color:#e4312a;
}
.func-bottom{
min-height: 425px;
}
.func-bottom-title{
font-size: 36px;
color:#ffffff;
display: flex;
align-items: center;
justify-content: space-around;
}
.func-bottom-title span,.funcIntro-span{
flex:1;
}
.funcIntro-span{
min-height: 82px;
}
.func-bottom-intro{
font-size: 16px;
color:#ffffff;
font-family: 'PingFang-SC-medium';
padding:40px;
display: flex;
align-items: center;
justify-content: center;
}
.func-bg{
position: absolute;
width: 100%;
left: 0;
top: 33%;
z-index: 0;
}
.container.cmdb{
z-index: 1;
position: relative;
}
@media (min-width: 992px){
.func-top .func-top-item{
max-width:20% ;
flex: 20%;
}
}
.cmdb .info-title{
padding-top:20px;
}
.func-symbol{
font-size: 80px;
height:45%;
display: flex;
align-items: flex-start;
font-family: 'MI_LANTING_REGULAR';
}
.func-l-p.func-bottom-intro{
padding-left:63px;
}
.lifeCycle-item{
background: #f3f5f8;
border-radius: 5px;
font-family: 'PingFang-SC-medium';
font-size: 18px;
color:#666;
padding: 20px 30px;
line-height: 32px;
}
.lifeCycle-item:nth-child(1){
margin-bottom: 20px;
color:#ffffff;
font-size: 16px;
background: url("../img/serviceSecond/cmdb/lifeCycle-1.png");
background-size: cover;
text-indent: 32px;
}
.lifeCycle-item-title{
color:#333;
}
.lifeCycle-intro{
display: flex;
align-items: center;
justify-content: space-between;
}
.lifeCycle-item:nth-child(2){
padding: 30px;
}
.lifeCycle-item:nth-child(2) .lifeCycle-intro{
padding-top:20px;
}
.app-title{
font-size: 24px;
color:#666;
}
.app-bg{
background: #f6f9fd;
border-radius: 5px;
padding: 20px;
}
.info-app-intro{
font-size: 16px;
color:#666;
font-family: 'PingFang-SC-regular';
min-height: 158px;
}
.app-advantage-style{
border-right:1px solid #525a6a;
padding:60px 20px 0;
height:100%;
}
.Aview-advantage-con:last-child .app-advantage-style{
border:none;
}
.app-advantage-bg{
background: url("../img/serviceSecond/cmdb/advantage-bg.png");
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
}
.app-advantage-ul{
font-size: 14px;
max-width: 249px;
min-height: 174px;
}
.app-advantage-ul li{
line-height: 36px;
list-style: disc;
}
.cmdb-advantage-con .app-advantage-ul,.Aview-advantage-con:last-child .app-advantage-ul{
max-width: 100%;
}
.cmdb-advantage-con .app-advantage-style{
padding:60px 40px 0;
}
\ No newline at end of file
... ...
No preview for this file type
... ... @@ -457,7 +457,7 @@ export function alarm() {
return res
}
//综合监控管理A-view todo
//综合监控管理A-view
export function Aview() {
let res={
title:'综合监控管理A-view',
... ... @@ -623,98 +623,165 @@ export function Aview() {
return res
}
//CMDB资产管理 todo
//CMDB资产管理
export function cmdb() {
let res={
title:'CMDB资产管理',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
introduction:'CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
data:[
{
title:'产品信息',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
introData:['CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
'构建CMDB也是一个重新审视和剖析现有IT系统与数据的过程，通过CMDB的建设，将建立起集中、统一、标准、可控、服务化的平台型数据管理和消费模式，有利于数据的管理、利用，更有利于提升数据的质量和消费价值。'
],
type:'info'
},
{
title:'产品特点',
title:'产品价值',
introduction:'',
data:[
dataC:[
{
icon:'assets/img/serviceSecond/information/character-1.png',
title:'工单信息集中管理',
introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
img:'assets/img/serviceSecond/cmdb/value-1.png',
title:'提供统一的配置基础数据和IT架构全景图',
introData:['产品作为企业CMDB的技术载体，能够为系统监控、服务管理、自动化操作、安全管理、运维大数据、Devops等软件平台提供配置数据服务，帮助企业深入了解和掌控复杂的IT服务及资源组件。']
},
{
icon:'assets/img/serviceSecond/information/character-2.png',
title:'提高工作效率',
introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
img:'assets/img/serviceSecond/cmdb/value-2.png',
title:'支持面向业务的CMDB动态建模',
introData:['系统支持面向业务视角的CMDB分层模型，可以根据实际环境进行配置项分类，配置项属性、配置项状态、CI与CI之间关系的定义和动态调整，提供面向业务的整体IT架构画像。']
},
{
icon:'assets/img/serviceSecond/information/character-3.png',
title:'实时处理单数据',
introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
img:'assets/img/serviceSecond/cmdb/value-3.png',
title:'支持自动化的CMDB数据维护',
introData:['系统内置业内领先的CMDB 自动发现组件，同时支持有代理和无代理两种工作模式，通过自动发现机制发现并收集从公有云/私有云到传统IT的各类 IT 资源配置信息、关联关系，为 CMDB 提供第一手的数据，避免手工方式带来的工作量大，数据更新不及时不准确等问题。']
},
{
img:'assets/img/serviceSecond/cmdb/value-4.png',
title:'多场景的消费API，基于IT架构驱动运维管理',
introData:['系统提供场景、配置项、关系等各个层面的数据消费Restful API，实现与监控、ITSM、云管、自动化运维、Devops工具等各种第三方系统对接，实现高性能的查询、更改、推送操作，完成组织内各种运维工具间的基础信息共享和任务协同，实现基于IT架构驱动的运维管理。']
},
{
img:'assets/img/serviceSecond/cmdb/value-5.png',
title:'面向运维的知识图谱',
introData:['提供面向运维的知识图谱，从物理连接、部署关系、调用关系、业务关联等多个维度清晰展现配置项关联关系，为故障分析、风险评估、架构管理等复杂运维工作提供支撑。']
},
{
img:'assets/img/serviceSecond/cmdb/value-6.png',
title:'关联关系可视化展现，提高工作效率',
introData:['提供从机房位置视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，通过可视化展示方式，使IT管理人员对信息的理解和应用清晰和便捷，能够对这种关联一目了然，从而提高工作效率。']
}
],
type:'character'
type:'value'
},
{
title:'系统框架',
introduction:'安全运维服务流程的系统架构',
img:'assets/img/serviceSecond/information/system.png',
introduction:'',
img:'assets/img/serviceSecond/cmdb/system.png',
type:'system'
},
{
title:'产品优势',
title:'CMDB主要实现五个方面的功能',
introduction:'',
dataSecond:[
dataFunc:[
{
icon:'assets/img/serviceSecond/information/advantage-1.png',
title:'“护网””等保”各规章变成“流程”强制性管控',
introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
img:'assets/img/serviceSecond/information/advantageImg.png'
title:'数据模型管理',
introduction:'提供配置类别、配置项模型和配置关系的自定义。提供图形化界面定义CMDB的数据结构，包括CI类型、每个CI类型包含的属性、对应的CI状态取值、允许的关系类型、CI实例唯一性判断规则，定义每个CI属性字段的数据类型、合法性校验规则、数据调和规则。',
img:'assets/img/serviceSecond/cmdb/func-1.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-2.png',
title:'通过”安全流程“提前管控日常操作、留痕',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
title:'配置数据收集',
introduction:'提供企业级配置自动化发现模块，实现对IT环境中各类环境设施、IT基础架构、应用系统和业务服务信息的收集。 ',
img:'assets/img/serviceSecond/cmdb/func-2.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-3.png',
title:'税务局业务流程目录、展示、流程的分类管理',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
title:'配置数据管理',
introduction:'采用非结构化数据库技术，完成对海量CMDB信息的管理，包括维护模型、配置项、关系映射的版本，对采集获取的管理对象数据进行模型化和实例化，并将配置项实例映射到应用服务和业务服务。',
img:'assets/img/serviceSecond/cmdb/func-3.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-4.png',
title:'工作组、用户权限的灵活配置',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
title:'数据消费服务',
introduction:'提供可视化拓扑展现、报表、访问权限控制等功能。同时为外部运维场景消费CMDB中存储的各类资源配置数据提供标准Restful API接口。',
img:'assets/img/serviceSecond/cmdb/func-4.png'
},
{
title:'关系可视化展现',
introduction:'提供从应用视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，使IT管理人员对信息的理解和应用关联一目了然。',
img:'assets/img/serviceSecond/cmdb/func-5.png'
}
],
type:'advantage'
type:'func'
},
{
title:'平台价值',
introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
title: 'IT资产生命周期流程化管理',
introduction: '',
icon:'assets/img/serviceSecond/cmdb/lifeCycle.png',
dataLife:[
{
title:'',
introData:['CMDB是数据管道、ITSM是流程管道”，CMDB支持ITSM流程的运转，并于流程所经之处在CMDB留痕，对IT资产的生命周期内业务相关流程进行管理，从而实现全生命周期的信息记录和审计']
},
{
title:'资产续保',
introData:['维保到期提醒','维保到期维护','维保信息稽核']
}
],
type:'lifeCycle'
},
{
title:'CMDB的高阶应用',
data:[
{
icon:'assets/img/serviceSecond/cmdb/app-icon-1.png',
title:'故障处理',
introduction:'构建故障特征库，以监控故障发生特征，结合CMDB配置信息及关系数据，分析故障发生时的业务影响状态及范围，并实施故障自愈处理。'
},
{
icon:'assets/img/serviceSecond/cmdb/app-icon-2.png',
title:'能力分析',
introduction:'结合CMDB及关联数据，分析运维过程中涉及的业务资源、系统资源、运维能力的使用趋势，为系统容量调整提供数据支持。'
},
{
icon:'assets/img/serviceSecond/cmdb/app-icon-3.png',
title:'自动化运维',
introduction:'采用自动化运维工具来实施运维工作，管控因人工误操作带来的运维风险，减轻人工运维的工作量。'
},
{
icon:'assets/img/serviceSecond/cmdb/app-icon-4.png',
title:'系统配置管理',
introduction:'集中采集和管理各业务或应用系统的配置参数，为系统恢复或重建提供数据支持。实现配置数据的自动分发。'
},
],
type:'app'
},
{
title:'产品优势',
introduction:'',
dataThird:[
{
title:'标准化',
introduction:'信息、流程、时间全面统一，高效协同',
img:'assets/img/serviceSecond/information/value-bg.png'
title:'随需而动的资源管理模型',
dataIntro:['灵活的配置管理数据模型，适应各种IT环境的管理需要','同时支持云环境以及传统IT环境的建模','资源分类、属性和关系可任意动态扩展']
},
{
title:'规范化',
introduction:'理清流程、制度落地，业务按标准执行',
img:'assets/img/serviceSecond/information/value-bg.png'
title:'独有的双模自动发现能力',
dataIntro:['同时支持有代理和无代理模式的自动发现模式','适应不同安全管控模式下的客户IT环境','确保数据更新的准确性和及时性']
},
{
title:'透明化',
introduction:'流程申请、流程进度、流程审批全程可观',
img:'assets/img/serviceSecond/information/value-bg.png'
title:'面向业务的关联分析',
dataIntro:['面向业务应用的资源统一管理','兼容传统IT架构和云环境的基础设施和应用','内置启发式搜索和关联分析算法','可自动发现连接、部署、调用等关系']
}
],
type:'value'
},
dataThirdA:[
{
title:'丰富多样的服务化API',
dataIntro:['基于IT资源实现信息共享和运维协同','支持多种场景的CMDB消费调用服务','提供完整和开放的服务API，实现稳定、高效、敏捷运维']
},
{
title:'简单易用，零开发导入',
dataIntro:['系统采用参数化设计、向导式配置','内置行业最佳实践的CMDB模型和消费场景','实施周期短，维护成本低']
}
],
type:'advantage'
}
]
}
... ...
... ... @@ -27,42 +27,74 @@
</section>
<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','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">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<div :class="'container cmdb '+item.type">
<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="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="['info-intro']" v-if="item.introData && item.introData.length>0">
<div class="info-intro-item" v-for="itemI in item.introData">{{itemI}}</div>
</div>
<div class="row pt-30" v-if="item.data && item.data.length>0">
<div class="col-md-3 flex-start-column " v-for="(itemC,indexC) in item.data">
<div class="app-bg pd-25">
<img class="" :src="itemC.icon" alt="">
<div class="pt-30 app-title">{{itemC.title}}</div>
<div class="info-app-intro font-size-14 pt-20">{{itemC.introduction}}</div>
</div>
</div>
</div>
<div class="info-system pt-30" v-if="item.img">
<img :src="item.img" alt="">
</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>
<div class="row pt-30 pd-40" v-if="item.dataC && item.dataC.length>0">
<div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataC">
<div class="div-img text-center">
<img :src="itemA.img" alt="">
</div>
<div class="cloud-c-title pt-30">{{itemA.title}}</div>
<ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30','pl-20','pr-20']" v-if="itemA.introData.length>0">
<li :class="['list-style-li']" v-for="(itemV,indexV) in itemA.introData">{{itemV}}</li>
</ul>
</div>
</div>
<div class="row mt-40 pb-30" v-if="item.dataFunc && item.dataFunc.length>0">
<div class="func-top row">
<div @click="changeFunc(indexF)" :class="['col-lg-2', 'func-top-item',{'func-item-active':funcActive==indexF}]" v-for="(itemF,indexF) in item.dataFunc">
{{itemF.title}}
</div>
</div>
<div class="col-lg-8">
<img :src="advantageImg" alt="">
<div class="func-bottom row pt-30">
<div class="col-lg-6 func-bottom-title"><span></span><span>{{funcTitle}}</span></div>
<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>
</div>
</div>
<div class="row pt-50" v-if="item.dataLife && item.dataLife.length>0">
<div class="col-lg-7">
<img :src="item.icon" alt="">
</div>
<div class="col-lg-5 lifeCycle-con flex-column-center">
<div class="lifeCycle-item" v-for="itemL in item.dataLife">
<div class="lifeCycle-item-title" v-if="itemL.title">{{itemL.title}}</div>
<div class="lifeCycle-intro">
<div class="lifeCycle-intro-item" v-for="itemI in itemL.introData">{{itemI}}</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="func-bg" v-if="item.type=='func'">
<img :src="funcImg" alt="">
</div>
<div class="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 app-advantage-style pb-50" >
<div :class="['pro-info-title']">
<div class=" advantage-title-Aview">{{itemV.title}}</div>
<ul class="app-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>
... ... @@ -70,6 +102,20 @@
</div>
</div>
<div class=" Aview-con cmdb-advantage-con" v-if="item.dataThirdA && item.dataThirdA.length>0">
<div class="row Aview-container">
<div class="col-lg-6 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThirdA">
<div class="info-value pb-50 app-advantage-style" >
<div :class="['pro-info-title']">
<div class=" advantage-title-Aview">{{itemV.title}}</div>
<ul class="app-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="app-advantage-bg" v-if="item.type=='advantage'"></div>
</section>
... ...
... ... @@ -10,14 +10,44 @@ export default {
let cmdbData=cmdb();
//页签高亮显示
let tabActive=Vue.ref(0);
//cmdb实现五大功能的高亮显示
let funcActive=Vue.ref(0);
let funcTitle=Vue.ref();
let funcIntro=Vue.ref();
let funcImg=Vue.ref();
const funcData=()=>{
cmdbData.data.map(item=>{
if(item.type=='func'){
funcTitle.value=item.dataFunc[0].title;
funcIntro.value=item.dataFunc[0].introduction;
funcImg.value=item.dataFunc[0].img;
}
})
}
//五个功能change事件
let changeFunc=(index)=>{
funcActive.value=index;
cmdbData.data.map(item=>{
if(item.type=='func'){
funcTitle.value=item.dataFunc[index].title;
funcIntro.value=item.dataFunc[index].introduction;
funcImg.value=item.dataFunc[index].img;
}
})
}
// 挂载完
Vue.onMounted(() => {
funcData();
})
return {
cmdbData,
tabActive
tabActive,
funcActive,
funcTitle,
funcIntro,
funcImg,
changeFunc
}
}
... ...