index.html
8.51 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
<section class="hero-section rel rpt-150 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 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,index) in homeData">
<img :src="'assets/img/index/' + (index+1) + '.png'" class="d-block w-100 h-75">
<div :class="['owl-item-content']">
<div :class="['owl-item-title', 'font-size-42',{'text-align-center':index==2}]">{{item.title}}</div>
<div class="owl-item-title font-size-42" v-if="item.title1">{{item.title1}}</div>
<div :class="['owl-item-intro', 'font-size-14', 'pt-30',{'text-align-center':index==2,'max-width-6':index!=2}]">{{item.introduction}}</div>
<div :class="['owl-item-button', 'pt-30',{'text-align-center':index==2}]" >
<span class="home-button btn-service" v-if="item.isService" @click="jumpSecond('services')">查看产品</span>
<span class="home-button btn-concat" v-if="item.isConcat" @click="jumpSecond('concat')">联系我们</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="services-section rel text-center">
<div class="container">
<div class="title-style">技术优势</div>
<div class="title-intro pt-20">以AI激活运维数据智慧，助力客户数字化运维</div>
<div class="row pt-30">
<div v-for="(item,index) 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.id)"
@mouseleave="tooltipLeave">
<div>
<img :src="'assets/img/technology/technology-'+item.id+'.png'" alt="Service Icon">
</div>
<div class="tech-title-num">{{item.id}}</div>
<div class="tech-title pt-30 pb-30">{{item.title}}</div>
<div :class="[ 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
{{item.tipIntro}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center pt-30">
<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">
<div class="title-style">魔镜智能运维建设三大原则</div>
</div>
<!-- <div class="title-intro">魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</div>-->
</div>
</div>
</div>
<div class="row principle pt-30">
<div class="col-lg-4 principle-con">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">1</span>
<span>数据</span>
</div>
<div class="principle-item-intro">从自身运维出发</div>
</div>
</div>
<div class="col-lg-4 principle-con">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">2</span>
<span>中台</span>
</div>
<div class="principle-item-intro">夯实数据处理能力</div>
</div>
</div>
<div class="col-lg-4 principle-con">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">3</span>
<span>场景化</span>
</div>
<div class="principle-item-intro">循序渐进进行建设</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="about-section rel pt-60 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">
<div class="title-style route-title">魔镜智能运维建设六步走路线</div>
</div>
</div>
</div>
</div>
<div class="color-white">
<div :class="['step-route-item',{'step-route-item-active':stepActive==index}]" v-for="(item,index) in stepRoute" @mouseenter="showHover(index)" @mouseleave="hideHover">
{{item}}
</div>
</div>
</div>
<div class="step-route"></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 pt-80 pb-80">
<div class="container">
<div class="section-title mb-35 pr-65 align-items-center flex-column-center">
<div class="title-style">"魔镜智能"全面完成国产化兼容适配认证</div>
<div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div>
</div>
<div class="section-item-content owl-dots">
<div :class="['section-item', 'owl-dot',{'section-item-active':compatibleActive==index}]" @mouseenter="showHoverCompatible(index)" @mouseleave="hideHoverCompatible()" v-for="(item,index) in logoData">
<img v-if="compatibleActive+1!=item.id" :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
<img v-if="compatibleActive+1==item.id" :src="'assets/img/index/'+item.logoUrlTip+'.png'" alt="">
</div>
</div>
<!-- <div class="team-carousel owl-carousel text-center" ref="teamCarousel">-->
<div class="compatible-carousel text-center" >
<div v-for="item in compatibleData">
<div v-if="compatibleActive+1==item.id" class="compatible-item row" >
<div class="col-lg-8 team-item-left flex-column-start">
<div class="title-icon">
<img :src="'assets/img/index/'+item.logoUrlTip+'.png'" alt="">
</div>
<div class="item-content flex-column-start flex-text-left">
<div class="title-style pt-30">国产中间件兼容认证</div>
<div class="item-text title-intro pt-30">
{{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>
<div class="compatible-bg"></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>