index.html
7.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<section class="hero-section rel rpt-150 pb-130 rpb-0">
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
<div class="shape shapeAnimationTwo l-70 t-60">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
<div class="shape shapeAnimationThree l-50 t-100">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<section class=" rel rpt-150 pb-130 rpb-0 text-center" id="homeBanner">
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer owl-height">
<div class="owl-stage">
<div class="owl-item" v-for="item in 3">
<img :src="'assets/img/index/' + item + '.png'" class="d-block w-100 h-75">
</div>
</div>
</div>
</div>
</section>
<section class="services-section rel text-center mt-100 mb-70">
<div class="container">
<h3>技术优势</h3>
<h4>以AI激活运维数据智慧，助力客户数字化运维</h4>
<div class="row">
<!-- single-service -->
<div v-for="item in techData" :key="item" class="col-lg-3 col-md-6 col-lg-3-self">
<div class="single-service-box style-three">
<div class="service-icon" data-toggle="tooltip" @mouseenter="tooltipHover(item)"
@mouseleave="tooltipLeave">
<img :src="'assets/img/technology/technology-0'+item.id+'.png'" alt="Service Icon">
<div :class="['tooltip-inner', 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
<img :src="'assets/img/technology/technology-0'+item.id+'-tip.png'" alt="Service Icon">
<!-- 横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构；纵向融合从基础IaaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。-->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="shape shapeAnimationOne l-10 t-0">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
<div class="shape shapeAnimationTwo t-100 r-5">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
</section>
<section class="success-section pt-105 pb-70 color-white">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
<div class="section-title mb-35">
<h2 class="color-white">魔镜智能运维建设三大原则</h2>
</div>
<p>魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</p>
</div>
</div>
<!-- <div class="col-lg-7">
<div class="about-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/about/about.png" alt="about image">
</div>
</div>-->
</div>
<div class="row principle">
<div class="col-lg-4">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">1</span>
<span>数据</span>
</div>
<h4>从自身运维出发</h4>
</div>
</div>
<div class="col-lg-4">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">2</span>
<span>中台</span>
</div>
<h4>夯实数据处理能力</h4>
</div>
</div>
<div class="col-lg-4">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">3</span>
<span>场景化</span>
</div>
<h4>循序渐进进行建设</h4>
</div>
</div>
</div>
</div>
<div class="success-bg success-bg-self"></div>
<div class="shape shapeAnimationFour r-5 t-100">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<section class="about-section rel mb-100 pt-105 pb-70">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
<div class="section-title mb-35">
<h2>魔镜智能运维建设六步走路线</h2>
</div>
<p>智能运维的本质是提升运维数据的洞察和处理能力</p>
</div>
</div>
</div>
<div class="row">
<img src="assets/img/web-route.png" alt="">
</div>
</div>
<div class="shape shapeAnimationFour l-10 t-5">
<img src="assets/img/shapes/shape4.png" alt="Shape">
</div>
<div class="shape shapeAnimationFive r-10 t-100 zm-1">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
</section>
<section class="team-section rel mb-65">
<div class="container">
<div class="section-title mb-35 pr-65 align-items-center flex-column-center">
<h2>”魔镜智能“全面完成国产化兼容适配认证</h2>
<h4>完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</h4>
</div>
<div class="section-item-content owl-dots">
<div class="section-item owl-dot" v-for="item in logoData">
<img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
</div>
</div>
<div class="team-carousel owl-carousel text-center" ref="teamCarousel">
<div class="team-item row" v-for="item in compatibleData">
<div class="col-lg-8 team-item-left flex-column-start">
<div class="title-icon">
<img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
</div>
<div class="item-content flex-column-start flex-text-left">
<h4>国产中间件兼容认证</h4>
<div class="item-text">
{{item.content}}
</div>
</div>
</div>
<div class="col-lg-4 img-right team-item-right">
<img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
</div>
</div>
</div>
</div>
<div class="shape shapeAnimationThree b-30 r-10">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
<div class="shape shapeAnimationTwo t-90 l-10">
<img src="assets/img/shapes/shape4.png" alt="Shape">
</div>
</section>