monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit e3f06d4de3d015b78d1212677029452801b46b1e 1 parent e2a740f9

公司网站优化

Inline Side-by-side
Showing 25 changed files with 292 additions and 287 deletions
@@ -337,14 +337,28 @@ textarea:placeholder, @@ -337,14 +337,28 @@ textarea:placeholder,
337 background-position: center bottom; 337 background-position: center bottom;
338 background-size: cover; 338 background-size: cover;
339 } 339 }
340 -.concat-top { 340 +.concat-concat {
341 position: relative; 341 position: relative;
342 background: url('../img/concat/bg.png'); 342 background: url('../img/concat/bg.png');
343 background-position: center bottom; 343 background-position: center bottom;
344 background-size: cover; 344 background-size: cover;
345 padding: 200px; 345 padding: 200px;
346 } 346 }
  347 +.concat-service {
  348 + position: relative;
  349 + background: url('../img/services/service-bg.png');
  350 + background-position: center bottom;
  351 + background-size: cover;
  352 + padding: 200px;
  353 +}
347 354
  355 +.concat-about {
  356 + position: relative;
  357 + background: url('../img/about/about-bg.png');
  358 + background-position: center bottom;
  359 + background-size: cover;
  360 + padding: 200px;
  361 +}
348 .hero-content h1 { 362 .hero-content h1 {
349 font-weight: 300; 363 font-weight: 300;
350 margin-bottom: 25px; 364 margin-bottom: 25px;
@@ -373,7 +387,7 @@ textarea:placeholder, @@ -373,7 +387,7 @@ textarea:placeholder,
373 ==================================================================== 387 ====================================================================
374 ***/ 388 ***/
375 .banner-section { 389 .banner-section {
376 - height: 550px; 390 + height: 300px;
377 display: flex; 391 display: flex;
378 text-align: center; 392 text-align: center;
379 align-items: center; 393 align-items: center;
@@ -1714,7 +1728,6 @@ blockquote:before { @@ -1714,7 +1728,6 @@ blockquote:before {
1714 ====================================================================***/ 1728 ====================================================================***/
1715 .hg-logo{ 1729 .hg-logo{
1716 width: 162px; 1730 width: 162px;
1717 - height: 40px;  
1718 } 1731 }
1719 @media (min-width: 992px){ 1732 @media (min-width: 992px){
1720 .col-lg-3-self { 1733 .col-lg-3-self {

152 KB | W: | H:

5.21 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -630,28 +630,7 @@ @@ -630,28 +630,7 @@
630 </div> 630 </div>
631 </div> 631 </div>
632 </div> 632 </div>
633 - <div class="testi-two-item">  
634 - <i class="flaticon-quote"></i>  
635 - <p>Amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique.</p>  
636 - <div class="author-info">  
637 - <div class="author-img">  
638 - <img src="assets/img/testimonials/testi2.png" alt="Testimonial Author">  
639 - </div>  
640 - <div class="author-about">  
641 - <h4>Farzana Khan</h4>  
642 - <h6>Australia</h6>  
643 - <div class="rattings">  
644 - <i class="fa fa-star"></i>  
645 - <i class="fa fa-star"></i>  
646 - <i class="fa fa-star"></i>  
647 - <i class="fa fa-star"></i>  
648 - <i class="fa fa-star"></i>  
649 - </div>  
650 - </div>  
651 - </div>  
652 - </div>  
653 </div> 633 </div>
654 -  
655 </div> 634 </div>
656 </div> 635 </div>
657 <div class="shape shapeAnimationFive r-20 t-5"> 636 <div class="shape shapeAnimationFive r-20 t-5">
@@ -78,7 +78,7 @@ @@ -78,7 +78,7 @@
78 <router-link to="/">首页</router-link> 78 <router-link to="/">首页</router-link>
79 </li> 79 </li>
80 <li top-nav="services"> 80 <li top-nav="services">
81 - <router-link to="/services">产品</router-link> 81 + <router-link to="/services">产品及服务</router-link>
82 </li> 82 </li>
83 <li top-nav="about"> 83 <li top-nav="about">
84 <router-link to="/about">了解鸿果</router-link> 84 <router-link to="/about">了解鸿果</router-link>
@@ -133,7 +133,7 @@ @@ -133,7 +133,7 @@
133 <div class="widget-content"> 133 <div class="widget-content">
134 <ul> 134 <ul>
135 <li><a href="#">综合告警智能算法平台</a></li> 135 <li><a href="#">综合告警智能算法平台</a></li>
136 - <li><a href="#">综合监控管理A-view3</a></li> 136 + <li><a href="#">综合监控管理A-view</a></li>
137 <li><a href="#">CMDB资产管理</a></li> 137 <li><a href="#">CMDB资产管理</a></li>
138 <li><a href="#">业务及应用综合分析平台</a></li> 138 <li><a href="#">业务及应用综合分析平台</a></li>
139 </ul> 139 </ul>
1 -<section class="banner-section rel">  
2 - <div class="container">  
3 - <h2 class="page-title">关于鸿果科技</h2>  
4 - <!--<nav aria-label="breadcrumb">  
5 - <ol class="breadcrumb-list">  
6 - <li class="breadcrumb-item"><a href="index.html">Home</a></li>  
7 - <li class="breadcrumb-item active" aria-current="page">About</li>  
8 - </ol>  
9 - </nav>-->  
10 -  
11 - <div class="shape shapeAnimationOne l-10 t-60">  
12 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
13 - </div>  
14 - <div class="shape shapeAnimationTwo l-70 t-60">  
15 - <img src="assets/img/shapes/shape2.png" alt="Shape">  
16 - </div>  
17 - <div class="shape shapeAnimationThree l-50 t-100">  
18 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
19 - </div> 1 +<section class="hero-section rel rpt-150 pb-130 rpb-0">
  2 + <div class="shape shapeAnimationOne l-10 t-60">
  3 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  4 + </div>
  5 + <div class="shape shapeAnimationTwo l-70 t-60">
  6 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  7 + </div>
  8 + <div class="shape shapeAnimationThree l-50 t-100">
  9 + <img src="assets/img/shapes/shape3.png" alt="Shape">
20 </div> 10 </div>
21 </section> 11 </section>
22 -<!--====================================================================  
23 - End Banner Section  
24 -=====================================================================-->  
25 12
26 13
  14 +<section class="concat-service rel rpt-150 pb-130 rpb-0 text-left ">
  15 +
  16 +</section>
  17 +
  18 +
  19 +<section class="banner-section rel" style="height: 100px">
  20 + <div class="container">
  21 + <h2 class="page-title">关于鸿果科技</h2>
  22 + </div>
  23 +</section>
27 24
28 -<!--====================================================================  
29 - Start About Section  
30 -=====================================================================-->  
31 <section class="about-section rel mt-85 mb-100"> 25 <section class="about-section rel mt-85 mb-100">
32 <div class="container"> 26 <div class="container">
33 <div class="row align-items-center"> 27 <div class="row align-items-center">
34 - <div class="col-lg-5"> 28 + <div class="col-lg-7">
35 <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 29 <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow">
36 <div class="section-title mb-35"> 30 <div class="section-title mb-35">
37 <span class="sub-title">公司简介</span> 31 <span class="sub-title">公司简介</span>
@@ -40,9 +34,9 @@ @@ -40,9 +34,9 @@
40 <p>北京鸿果秋实科技有限公司2012年成立，定位于提供4S信息化解决方案的高科技公司：（Software-软件，Service-服务，Solution-解决方案，Sale-销售），公司专注于软件解决方案和整体服务交付领域，已陆续成为税务、社保、财政、通信运营商等行业业IT运维领域的领先者。北京鸿果科技依托“金税三期” 、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈。公司基于多年政府行业的市场、销售、技术、产品经验积累，先后在多省市政府、央企承建了“综合监控管理平台（A-view V1.0）、自动化巡检平台、智能告警算法平台、数据安全运维管理平台、一体化运维大数据管理应用平台（D-viewV1.0）”等，陆续承建了浙江省、新疆、陕西、贵州、天津、吉林、辽宁、内蒙古、宁夏等税务局“金三”重大信息化项目。 目前公司拥有《国家高新企业》《中国信息安全服务集成资质》、《中国信息安全运维资质》、 《软件企业》资质、多项自主的软件著作权，评选为“优秀信息化软件企业合作伙伴”、"专精特新"企业。</p> 34 <p>北京鸿果秋实科技有限公司2012年成立，定位于提供4S信息化解决方案的高科技公司：（Software-软件，Service-服务，Solution-解决方案，Sale-销售），公司专注于软件解决方案和整体服务交付领域，已陆续成为税务、社保、财政、通信运营商等行业业IT运维领域的领先者。北京鸿果科技依托“金税三期” 、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈。公司基于多年政府行业的市场、销售、技术、产品经验积累，先后在多省市政府、央企承建了“综合监控管理平台（A-view V1.0）、自动化巡检平台、智能告警算法平台、数据安全运维管理平台、一体化运维大数据管理应用平台（D-viewV1.0）”等，陆续承建了浙江省、新疆、陕西、贵州、天津、吉林、辽宁、内蒙古、宁夏等税务局“金三”重大信息化项目。 目前公司拥有《国家高新企业》《中国信息安全服务集成资质》、《中国信息安全运维资质》、 《软件企业》资质、多项自主的软件著作权，评选为“优秀信息化软件企业合作伙伴”、"专精特新"企业。</p>
41 </div> 35 </div>
42 </div> 36 </div>
43 - <div class="col-lg-7"> 37 + <div class="col-lg-5">
44 <div class="about-image wow customFadeInLeft delay-0-1s slow"> 38 <div class="about-image wow customFadeInLeft delay-0-1s slow">
45 - <img src="assets/img/about/about.png" alt="about image"> 39 + <img src="assets/img/about/about1.jpg" style="border-radius: 10px">
46 </div> 40 </div>
47 </div> 41 </div>
48 </div> 42 </div>
@@ -55,15 +49,7 @@ @@ -55,15 +49,7 @@
55 <img src="assets/img/shapes/shape2.png" alt="Shape"> 49 <img src="assets/img/shapes/shape2.png" alt="Shape">
56 </div> 50 </div>
57 </section> 51 </section>
58 -<!--====================================================================  
59 - End About Section  
60 -=====================================================================-->  
61 52
62 -  
63 -  
64 -<!--====================================================================  
65 - Start services section  
66 -=====================================================================-->  
67 <section class="services-section rel text-center mt-100 mb-80"> 53 <section class="services-section rel text-center mt-100 mb-80">
68 <div class="container"> 54 <div class="container">
69 <div class="row"> 55 <div class="row">
@@ -74,58 +60,35 @@ @@ -74,58 +60,35 @@
74 </div> 60 </div>
75 <div class="row"> 61 <div class="row">
76 <!-- single-service --> 62 <!-- single-service -->
77 - <div class="col-lg-3 col-md-6"> 63 + <div class="col-lg-4 col-md-6">
78 <div class="single-service-box"> 64 <div class="single-service-box">
79 <div class="service-icon mb-25"> 65 <div class="service-icon mb-25">
80 <img src="assets/img/services/service4.png" alt="Service Icon"> 66 <img src="assets/img/services/service4.png" alt="Service Icon">
81 </div> 67 </div>
82 - <div class="service-content">  
83 - <h4>快乐</h4> 68 + <div class="service-content pb-2">
  69 + <h4>快乐高效</h4>
84 </div> 70 </div>
85 </div> 71 </div>
86 </div> 72 </div>
87 73
88 <!-- single-service --> 74 <!-- single-service -->
89 - <div class="col-lg-2 col-md-6"> 75 + <div class="col-lg-4 col-md-6">
90 <div class="single-service-box"> 76 <div class="single-service-box">
91 <div class="service-icon mb-25"> 77 <div class="service-icon mb-25">
92 <img src="assets/img/services/service5.png" alt="Service Icon"> 78 <img src="assets/img/services/service5.png" alt="Service Icon">
93 </div> 79 </div>
94 - <div class="service-content">  
95 - <h4><a href="#">高效</a></h4>  
96 - </div>  
97 - </div>  
98 - </div>  
99 -  
100 - <!-- single-service -->  
101 - <div class="col-lg-2 col-md-6">  
102 - <div class="single-service-box">  
103 - <div class="service-icon mb-25">  
104 - <img src="assets/img/services/service6.png" alt="Service Icon">  
105 - </div>  
106 - <div class="service-content">  
107 - <h4>成长</h4> 80 + <div class="service-content pb-2">
  81 + <h4><a href="#">成长进步</a></h4>
108 </div> 82 </div>
109 </div> 83 </div>
110 </div> 84 </div>
111 85
112 - <div class="col-lg-2 col-md-6"> 86 + <div class="col-lg-4 col-md-6">
113 <div class="single-service-box"> 87 <div class="single-service-box">
114 <div class="service-icon mb-25"> 88 <div class="service-icon mb-25">
115 <img src="assets/img/services/service6.png" alt="Service Icon"> 89 <img src="assets/img/services/service6.png" alt="Service Icon">
116 </div> 90 </div>
117 - <div class="service-content">  
118 - <h4>进步</h4>  
119 - </div>  
120 - </div>  
121 - </div>  
122 -  
123 - <div class="col-lg-3 col-md-6">  
124 - <div class="single-service-box">  
125 - <div class="service-icon mb-25">  
126 - <img src="assets/img/services/service6.png" alt="Service Icon">  
127 - </div>  
128 - <div class="service-content"> 91 + <div class="service-content pb-2">
129 <h4>互利共赢</h4> 92 <h4>互利共赢</h4>
130 </div> 93 </div>
131 </div> 94 </div>
@@ -140,14 +103,7 @@ @@ -140,14 +103,7 @@
140 <img src="assets/img/shapes/shape1.png" alt="Shape"> 103 <img src="assets/img/shapes/shape1.png" alt="Shape">
141 </div> 104 </div>
142 </section> 105 </section>
143 -<!--====================================================================  
144 - End services section  
145 -=====================================================================-->  
146 -  
147 106
148 -<!--====================================================================  
149 - Start Our Success Section  
150 -=====================================================================-->  
151 <section class="success-section pt-105 pb-50"> 107 <section class="success-section pt-105 pb-50">
152 <div class="container"> 108 <div class="container">
153 <div class="row"> 109 <div class="row">
@@ -155,7 +111,7 @@ @@ -155,7 +111,7 @@
155 <div class="success-box"> 111 <div class="success-box">
156 <i class="flaticon-competition"></i> 112 <i class="flaticon-competition"></i>
157 <div class="count-wrap"> 113 <div class="count-wrap">
158 - <span class="count-text plus" data-speed="5000" data-stop="78">100</span> 114 + <span class="count-text plus" data-speed="5000" data-stop="78"></span>
159 <p>资质证书</p> 115 <p>资质证书</p>
160 </div> 116 </div>
161 </div> 117 </div>
@@ -164,7 +120,7 @@ @@ -164,7 +120,7 @@
164 <div class="success-box"> 120 <div class="success-box">
165 <i class="flaticon-happy"></i> 121 <i class="flaticon-happy"></i>
166 <div class="count-wrap"> 122 <div class="count-wrap">
167 - <span class="count-text plus" data-speed="5000" data-stop="250">30</span> 123 + <span class="count-text plus" data-speed="5000" data-stop="280"></span>
168 <p>客户数</p> 124 <p>客户数</p>
169 </div> 125 </div>
170 </div> 126 </div>
@@ -173,7 +129,7 @@ @@ -173,7 +129,7 @@
173 <div class="success-box"> 129 <div class="success-box">
174 <i class="flaticon-admin"></i> 130 <i class="flaticon-admin"></i>
175 <div class="count-wrap"> 131 <div class="count-wrap">
176 - <span class="count-text plus" data-speed="5000" data-stop="26">100</span> 132 + <span class="count-text plus" data-speed="5000" data-stop="100"></span>
177 <p>团队</p> 133 <p>团队</p>
178 </div> 134 </div>
179 </div> 135 </div>
@@ -182,7 +138,7 @@ @@ -182,7 +138,7 @@
182 <div class="success-box"> 138 <div class="success-box">
183 <i class="flaticon-startup"></i> 139 <i class="flaticon-startup"></i>
184 <div class="count-wrap"> 140 <div class="count-wrap">
185 - <span class="count-text plus" data-speed="5000" data-stop="320">10</span> 141 + <span class="count-text plus" data-speed="5000" data-stop="320"></span>
186 <p>完成的项目</p> 142 <p>完成的项目</p>
187 </div> 143 </div>
188 </div> 144 </div>
@@ -20,10 +20,10 @@ export default { @@ -20,10 +20,10 @@ export default {
20 },{ 20 },{
21 name:'信息安全管理体系认证证书', 21 name:'信息安全管理体系认证证书',
22 path:'assets/img/zzzs/4.png' 22 path:'assets/img/zzzs/4.png'
23 - },{ 23 + }/*,{
24 name:'北京市“专精特新”中小企业', 24 name:'北京市“专精特新”中小企业',
25 path:'assets/img/zzzs/5.jpg' 25 path:'assets/img/zzzs/5.jpg'
26 - }]; 26 + }*/];
27 27
28 Vue.onMounted(() =>{}) 28 Vue.onMounted(() =>{})
29 29
@@ -11,12 +11,18 @@ @@ -11,12 +11,18 @@
11 </section> 11 </section>
12 12
13 13
14 -<section class="concat-top rel rpt-150 pb-130 rpb-0 text-left "> 14 +<section class="concat-concat rel rpt-150 pb-130 rpb-0 text-left ">
15 <h1 class="color-white mb-2">加入鸿果，成为你想成为的人</h1> 15 <h1 class="color-white mb-2">加入鸿果，成为你想成为的人</h1>
16 <h2 class="color-white mb-2">齐心协力、积极乐观、共同发展、团队共赢！</h2> 16 <h2 class="color-white mb-2">齐心协力、积极乐观、共同发展、团队共赢！</h2>
17 <h4 class="color-white mb-2">具备足够的勇气及长远的眼光，大家携手一起，齐心协力，积极乐观，超共同的目标前进实现共同发展及利益最大化</h4> 17 <h4 class="color-white mb-2">具备足够的勇气及长远的眼光，大家携手一起，齐心协力，积极乐观，超共同的目标前进实现共同发展及利益最大化</h4>
18 </section> 18 </section>
19 19
  20 +<section class="banner-section rel" style="height: 100px">
  21 + <div class="container">
  22 + <h2 class="page-title">加入我们</h2>
  23 + </div>
  24 +</section>
  25 +
20 <section class="sps-one pt-120 mb-70 rmb-100"> 26 <section class="sps-one pt-120 mb-70 rmb-100">
21 <div class="container"> 27 <div class="container">
22 <div class="row align-items-center"> 28 <div class="row align-items-center">
@@ -81,3 +87,18 @@ @@ -81,3 +87,18 @@
81 </div> 87 </div>
82 </div> 88 </div>
83 </section> 89 </section>
  90 +
  91 +
  92 +<section class="services-section rel text-center mt-100 mb-80">
  93 + <div class="container">
  94 + <div class="row">
  95 + <div class="col-lg-12 col-md-12">
  96 + <!-- <h4><a href="#">合作流程</a></h4>
  97 + <p>专业技术顾问，提供一对一服务</p>-->
  98 + <div class="service-icon mb-25">
  99 + <img src="assets/img/concat/gw.png">
  100 + </div>
  101 + </div>
  102 + </div>
  103 + </div>
  104 +</section>
1 -<div>  
2 - <section class="hero-section rel pt-220 rpt-150 pb-130 rpb-0">  
3 - <div class="container">  
4 - <div class="row align-items-center">  
5 - <div class="col-lg-7">  
6 - <div class="hero-content my-50">  
7 - <h1 class="wow customFadeInUp delay-0-1s slow">"魔镜智能"全面完成国产化兼容适配认证</h1>  
8 - <p class="wow customFadeInUp delay-0-3s slow">鸿果科技旗下“魔镜智能”自研“A-View智能综合监控管理平台系统”V3.0</p>  
9 - <a href="#" class="theme-btn btn-big wow customFadeInUp delay-0-5s slow">完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性互认证</a>  
10 - </div>  
11 - </div>  
12 - <div class="col-lg-5">  
13 - <div class="hero-img">  
14 - <img src="assets/img/hero/hero.png" alt="Hero Image">  
15 - </div> 1 +<section class="hero-section rel rpt-150 pb-130 rpb-0">
  2 + <div class="shape shapeAnimationOne l-10 t-60">
  3 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  4 + </div>
  5 + <div class="shape shapeAnimationTwo l-70 t-60">
  6 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  7 + </div>
  8 + <div class="shape shapeAnimationThree l-50 t-100">
  9 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  10 + </div>
  11 +</section>
  12 +
  13 +<section class=" rel rpt-150 pb-130 rpb-0 text-center" id="homeBanner">
  14 + <div class="owl-carousel owl-theme owl-loaded">
  15 + <div class="owl-stage-outer owl-height">
  16 + <div class="owl-stage">
  17 + <div class="owl-item" v-for="item in 3">
  18 + <img :src="'assets/img/index/' + item + '.png'" class="d-block w-100 h-75">
16 </div> 19 </div>
17 </div> 20 </div>
18 </div> 21 </div>
19 -  
20 - <div class="shape shapeAnimationOne l-10 t-60">  
21 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
22 - </div>  
23 - <div class="shape shapeAnimationTwo l-70 t-60">  
24 - <img src="assets/img/shapes/shape2.png" alt="Shape">  
25 - </div>  
26 - <div class="shape shapeAnimationThree l-50 t-100">  
27 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
28 - </div>  
29 - </section>  
30 -  
31 - <section class="services-section rel text-center mt-100 mb-70">  
32 - <div class="container">  
33 - <h3>技术优势</h3>  
34 - <h4>以AI激活运维数据智慧，助力客户数字化运维</h4>  
35 - <div class="row">  
36 -  
37 - <!-- single-service -->  
38 - <div v-for="item in techData" :key="item" class="col-lg-3 col-md-6 col-lg-3-self">  
39 - <div class="single-service-box style-three">  
40 - <div class="service-icon" data-toggle="tooltip" @mouseenter="tooltipHover(item)" @mouseleave="tooltipLeave">  
41 - <img :src="'assets/img/technology/technology-0'+item.id+'.png'" alt="Service Icon">  
42 - <div :class="['tooltip-inner', 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]" >  
43 - <img :src="'assets/img/technology/technology-0'+item.id+'-tip.png'" alt="Service Icon">  
44 - <!-- 横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构；纵向融合从基础IaaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。-->  
45 - </div> 22 + </div>
  23 +</section>
  24 +
  25 +
  26 +<section class="services-section rel text-center mt-100 mb-70">
  27 + <div class="container">
  28 + <h3>技术优势</h3>
  29 + <h4>以AI激活运维数据智慧，助力客户数字化运维</h4>
  30 + <div class="row">
  31 +
  32 + <!-- single-service -->
  33 + <div v-for="item in techData" :key="item" class="col-lg-3 col-md-6 col-lg-3-self">
  34 + <div class="single-service-box style-three">
  35 + <div class="service-icon" data-toggle="tooltip" @mouseenter="tooltipHover(item)"
  36 + @mouseleave="tooltipLeave">
  37 + <img :src="'assets/img/technology/technology-0'+item.id+'.png'" alt="Service Icon">
  38 + <div :class="['tooltip-inner', 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
  39 + <img :src="'assets/img/technology/technology-0'+item.id+'-tip.png'" alt="Service Icon">
  40 + <!-- 横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构；纵向融合从基础IaaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。-->
46 </div> 41 </div>
47 </div> 42 </div>
48 </div> 43 </div>
49 -  
50 </div> 44 </div>
51 - </div>  
52 45
53 - <div class="shape shapeAnimationOne l-10 t-0">  
54 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
55 - </div>  
56 - <div class="shape shapeAnimationTwo t-100 r-5">  
57 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
58 </div> 46 </div>
59 - </section>  
60 -  
61 - <section class="success-section pt-105 pb-70 color-white">  
62 - <div class="container">  
63 - <div class="row align-items-center">  
64 - <div class="col-lg-12">  
65 - <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">  
66 - <div class="section-title mb-35">  
67 - <h2 class="color-white">魔镜智能运维建设三大原则</h2>  
68 - </div>  
69 - <p>魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</p>  
70 - 47 + </div>
  48 +
  49 + <div class="shape shapeAnimationOne l-10 t-0">
  50 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  51 + </div>
  52 + <div class="shape shapeAnimationTwo t-100 r-5">
  53 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  54 + </div>
  55 +</section>
  56 +
  57 +<section class="success-section pt-105 pb-70 color-white">
  58 + <div class="container">
  59 + <div class="row align-items-center">
  60 + <div class="col-lg-12">
  61 + <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
  62 + <div class="section-title mb-35">
  63 + <h2 class="color-white">魔镜智能运维建设三大原则</h2>
71 </div> 64 </div>
  65 + <p>魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</p>
  66 +
72 </div> 67 </div>
73 - <!-- <div class="col-lg-7">  
74 - <div class="about-image wow customFadeInLeft delay-0-1s slow">  
75 - <img src="assets/img/about/about.png" alt="about image">  
76 - </div>  
77 - </div>-->  
78 </div> 68 </div>
79 - <div class="row principle">  
80 - <div class="col-lg-4">  
81 - <div class="principle-item">  
82 - <div class="principle-item-title">  
83 - <span class="num-icon">1</span>  
84 - <span>数据</span>  
85 - </div>  
86 - <h4>从自身运维出发</h4> 69 + <!-- <div class="col-lg-7">
  70 + <div class="about-image wow customFadeInLeft delay-0-1s slow">
  71 + <img src="assets/img/about/about.png" alt="about image">
  72 + </div>
  73 + </div>-->
  74 + </div>
  75 + <div class="row principle">
  76 + <div class="col-lg-4">
  77 + <div class="principle-item">
  78 + <div class="principle-item-title">
  79 + <span class="num-icon">1</span>
  80 + <span>数据</span>
87 </div> 81 </div>
  82 + <h4>从自身运维出发</h4>
88 </div> 83 </div>
89 - <div class="col-lg-4">  
90 - <div class="principle-item">  
91 - <div class="principle-item-title">  
92 - <span class="num-icon">2</span>  
93 - <span>中台</span>  
94 - </div>  
95 - <h4>夯实数据处理能力</h4> 84 + </div>
  85 + <div class="col-lg-4">
  86 + <div class="principle-item">
  87 + <div class="principle-item-title">
  88 + <span class="num-icon">2</span>
  89 + <span>中台</span>
96 </div> 90 </div>
  91 + <h4>夯实数据处理能力</h4>
97 </div> 92 </div>
98 - <div class="col-lg-4">  
99 - <div class="principle-item">  
100 - <div class="principle-item-title">  
101 - <span class="num-icon">3</span>  
102 - <span>场景化</span>  
103 - </div>  
104 - <h4>循序渐进进行建设</h4> 93 + </div>
  94 + <div class="col-lg-4">
  95 + <div class="principle-item">
  96 + <div class="principle-item-title">
  97 + <span class="num-icon">3</span>
  98 + <span>场景化</span>
105 </div> 99 </div>
  100 + <h4>循序渐进进行建设</h4>
106 </div> 101 </div>
107 </div> 102 </div>
108 -  
109 </div> 103 </div>
110 104
111 - <div class="success-bg success-bg-self"></div>  
112 - <div class="shape shapeAnimationFour r-5 t-100">  
113 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
114 - </div>  
115 - </section>  
116 -  
117 - <section class="about-section rel mb-100 pt-105 pb-70">  
118 - <div class="container">  
119 - <div class="row align-items-center">  
120 - <div class="col-lg-12">  
121 - <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">  
122 - <div class="section-title mb-35">  
123 - <h2>魔镜智能运维建设六步走路线</h2>  
124 - </div>  
125 - <p>智能运维的本质是提升运维数据的洞察和处理能力</p>  
126 - 105 + </div>
  106 +
  107 + <div class="success-bg success-bg-self"></div>
  108 + <div class="shape shapeAnimationFour r-5 t-100">
  109 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  110 + </div>
  111 +</section>
  112 +
  113 +<section class="about-section rel mb-100 pt-105 pb-70">
  114 + <div class="container">
  115 + <div class="row align-items-center">
  116 + <div class="col-lg-12">
  117 + <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
  118 + <div class="section-title mb-35">
  119 + <h2>魔镜智能运维建设六步走路线</h2>
127 </div> 120 </div>
  121 + <p>智能运维的本质是提升运维数据的洞察和处理能力</p>
  122 +
128 </div> 123 </div>
129 </div> 124 </div>
130 - <div class="row">  
131 - <img src="assets/img/web-route.png" alt="">  
132 - </div>  
133 </div> 125 </div>
134 -  
135 - <div class="shape shapeAnimationFour l-10 t-5">  
136 - <img src="assets/img/shapes/shape4.png" alt="Shape"> 126 + <div class="row">
  127 + <img src="assets/img/web-route.png" alt="">
137 </div> 128 </div>
138 - <div class="shape shapeAnimationFive r-10 t-100 zm-1">  
139 - <img src="assets/img/shapes/shape2.png" alt="Shape"> 129 + </div>
  130 +
  131 + <div class="shape shapeAnimationFour l-10 t-5">
  132 + <img src="assets/img/shapes/shape4.png" alt="Shape">
  133 + </div>
  134 + <div class="shape shapeAnimationFive r-10 t-100 zm-1">
  135 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  136 + </div>
  137 +</section>
  138 +
  139 +<section class="team-section rel mb-65">
  140 + <div class="container">
  141 + <div class="section-title mb-35 pr-65 align-items-center flex-column-center">
  142 + <h2>”魔镜智能“全面完成国产化兼容适配认证</h2>
  143 + <h4>完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</h4>
140 </div> 144 </div>
141 - </section>  
142 -  
143 - <section class="team-section rel mb-65">  
144 - <div class="container">  
145 - <div class="section-title mb-35 pr-65 align-items-center flex-column-center">  
146 - <h2>”魔镜智能“全面完成国产化兼容适配认证</h2>  
147 - <h4>完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</h4>  
148 - </div>  
149 - <div class="section-item-content owl-dots">  
150 - <div class="section-item owl-dot" v-for="item in logoData">  
151 - <img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">  
152 - </div> 145 + <div class="section-item-content owl-dots">
  146 + <div class="section-item owl-dot" v-for="item in logoData">
  147 + <img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
153 </div> 148 </div>
154 - <div class="team-carousel owl-carousel text-center" ref="teamCarousel">  
155 - <div class="team-item row" v-for="item in compatibleData">  
156 - <div class="col-lg-8 team-item-left flex-column-start">  
157 - <div class="title-icon">  
158 - <img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">  
159 - </div>  
160 - <div class="item-content flex-column-start flex-text-left">  
161 - <h4>国产中间件兼容认证</h4>  
162 - <div class="item-text">  
163 - {{item.content}}  
164 - </div>  
165 - </div> 149 + </div>
  150 + <div class="team-carousel owl-carousel text-center" ref="teamCarousel">
  151 + <div class="team-item row" v-for="item in compatibleData">
  152 + <div class="col-lg-8 team-item-left flex-column-start">
  153 + <div class="title-icon">
  154 + <img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
166 </div> 155 </div>
167 - <div class="col-lg-4 img-right team-item-right">  
168 - <img :src="'assets/img/index/'+item.urlName+'.png'" alt=""> 156 + <div class="item-content flex-column-start flex-text-left">
  157 + <h4>国产中间件兼容认证</h4>
  158 + <div class="item-text">
  159 + {{item.content}}
  160 + </div>
169 </div> 161 </div>
170 </div> 162 </div>
  163 + <div class="col-lg-4 img-right team-item-right">
  164 + <img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
  165 + </div>
  166 + </div>
171 167
172 168
173 - </div>  
174 </div> 169 </div>
  170 + </div>
175 171
176 - <div class="shape shapeAnimationThree b-30 r-10">  
177 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
178 - </div>  
179 - <div class="shape shapeAnimationTwo t-90 l-10">  
180 - <img src="assets/img/shapes/shape4.png" alt="Shape">  
181 - </div>  
182 - </section> 172 + <div class="shape shapeAnimationThree b-30 r-10">
  173 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  174 + </div>
  175 + <div class="shape shapeAnimationTwo t-90 l-10">
  176 + <img src="assets/img/shapes/shape4.png" alt="Shape">
  177 + </div>
  178 +</section>
183 179
184 -</div>  
@@ -92,7 +92,21 @@ export default { @@ -92,7 +92,21 @@ export default {
92 ]) 92 ])
93 93
94 // 挂载完 94 // 挂载完
95 - Vue.onMounted(() => {}) 95 + Vue.onMounted(() => {
  96 + $('.owl-carousel').owlCarousel({
  97 + margin:10,
  98 + autoHeight:false,
  99 + //整数5幻灯片每页可见个数
  100 + items : 1,
  101 + //分页
  102 + dots : true,
  103 + touchDrag:true,
  104 + //循环
  105 + loop: true,
  106 + autoplay: true,//自动轮播
  107 + autoplayTimeout:3000, //轮播时间
  108 + });
  109 + })
96 110
97 return{ 111 return{
98 isHover, 112 isHover,
1 -<section class="banner-section rel">  
2 - <div class="container">  
3 - <h2 class="page-title">产品中心</h2>  
4 - <!--<nav aria-label="breadcrumb">  
5 - <ol class="breadcrumb">  
6 - <li class="breadcrumb-item"><a href="index.html">Home</a></li>  
7 - <li class="breadcrumb-item active" aria-current="page">Services</li>  
8 - </ol>  
9 - </nav>--> 1 +<section class="hero-section rel rpt-150 pb-130 rpb-0">
  2 + <div class="shape shapeAnimationOne l-10 t-60">
  3 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  4 + </div>
  5 + <div class="shape shapeAnimationTwo l-70 t-60">
  6 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  7 + </div>
  8 + <div class="shape shapeAnimationThree l-50 t-100">
  9 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  10 + </div>
  11 +</section>
10 12
11 13
12 - <div class="shape shapeAnimationOne l-10 t-60">  
13 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
14 - </div>  
15 - <div class="shape shapeAnimationTwo l-70 t-60">  
16 - <img src="assets/img/shapes/shape2.png" alt="Shape">  
17 - </div>  
18 - <div class="shape shapeAnimationThree l-50 t-100">  
19 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
20 - </div>  
21 - </div> 14 +<section class="concat-service rel rpt-150 pb-130 rpb-0 text-left ">
  15 +
22 </section> 16 </section>
23 17
24 18
  19 +<section class="banner-section rel" style="height: 100px">
  20 + <div class="container">
  21 + <h2 class="page-title">产品中心</h2>
  22 + </div>
  23 +</section>
  24 +
25 <section class="sps-one pt-120 mb-70 rmb-100"> 25 <section class="sps-one pt-120 mb-70 rmb-100">
26 <div class="container"> 26 <div class="container">
27 <div class="row align-items-center"> 27 <div class="row align-items-center">
28 <div class="col-lg-6 order-lg-2"> 28 <div class="col-lg-6 order-lg-2">
29 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 29 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
30 <div class="section-title style-three mb-15"> 30 <div class="section-title style-three mb-15">
31 - <span class="sub-title">综合告警算法平台</span> 31 + <span class="sub-title">综合告警智能算法平台</span>
32 </div> 32 </div>
33 <p> 33 <p>
34 能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力 34 能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力
@@ -43,7 +43,7 @@ @@ -43,7 +43,7 @@
43 </div> 43 </div>
44 <div class="col-lg-6"> 44 <div class="col-lg-6">
45 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 45 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
46 - <img src="assets/img/services/s1.png" alt="Service image"> 46 + <img src="assets/img/services/p1.png" alt="Service image">
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 <div class="col-lg-6"> 57 <div class="col-lg-6">
58 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow"> 58 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
59 <div class="section-title style-three mb-15"> 59 <div class="section-title style-three mb-15">
60 - <span class="sub-title">综合监控A_view</span> 60 + <span class="sub-title">综合监控管理A-view</span>
61 </div> 61 </div>
62 <p>全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展</p> 62 <p>全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展</p>
63 <ol> 63 <ol>
@@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
70 </div> 70 </div>
71 <div class="col-lg-6"> 71 <div class="col-lg-6">
72 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 72 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
73 - <img src="assets/img/services/s2.png" alt="Service image"> 73 + <img src="assets/img/services/p2.png" alt="Service image">
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
@@ -85,7 +85,7 @@ @@ -85,7 +85,7 @@
85 <div class="col-lg-6 order-lg-2"> 85 <div class="col-lg-6 order-lg-2">
86 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 86 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
87 <div class="section-title style-three mb-15"> 87 <div class="section-title style-three mb-15">
88 - <span class="sub-title">CMDB</span> 88 + <span class="sub-title">CMDB资产管理</span>
89 </div> 89 </div>
90 <p>建立以应用为中心的资源 管理模型，促进资产到资源的转变</p> 90 <p>建立以应用为中心的资源 管理模型，促进资产到资源的转变</p>
91 <ol> 91 <ol>
@@ -98,7 +98,7 @@ @@ -98,7 +98,7 @@
98 </div> 98 </div>
99 <div class="col-lg-6"> 99 <div class="col-lg-6">
100 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 100 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
101 - <img src="assets/img/services/s3.png" alt="Service image"> 101 + <img src="assets/img/services/p3.png" alt="Service image">
102 </div> 102 </div>
103 </div> 103 </div>
104 </div> 104 </div>
@@ -125,7 +125,7 @@ @@ -125,7 +125,7 @@
125 </div> 125 </div>
126 <div class="col-lg-6"> 126 <div class="col-lg-6">
127 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 127 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
128 - <img src="assets/img/services/s4.png" alt="Service image"> 128 + <img src="assets/img/services/p4.png" alt="Service image">
129 </div> 129 </div>
130 </div> 130 </div>
131 </div> 131 </div>
@@ -139,7 +139,7 @@ @@ -139,7 +139,7 @@
139 <div class="col-lg-6 order-lg-2"> 139 <div class="col-lg-6 order-lg-2">
140 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 140 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
141 <div class="section-title style-three mb-15"> 141 <div class="section-title style-three mb-15">
142 - <span class="sub-title">综合日志智能分析平台</span> 142 + <span class="sub-title">日志综合智能分析平台</span>
143 </div> 143 </div>
144 <p>通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。</p> 144 <p>通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。</p>
145 <ol> 145 <ol>
@@ -152,7 +152,7 @@ @@ -152,7 +152,7 @@
152 </div> 152 </div>
153 <div class="col-lg-6"> 153 <div class="col-lg-6">
154 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 154 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
155 - <img src="assets/img/services/s5.png" alt="Service image"> 155 + <img src="assets/img/services/p5.png" alt="Service image">
156 </div> 156 </div>
157 </div> 157 </div>
158 </div> 158 </div>
@@ -181,7 +181,7 @@ @@ -181,7 +181,7 @@
181 </div> 181 </div>
182 <div class="col-lg-6"> 182 <div class="col-lg-6">
183 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 183 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
184 - <img src="assets/img/services/s2.png" alt="Service image"> 184 + <img src="assets/img/services/p6.png" alt="Service image">
185 </div> 185 </div>
186 </div> 186 </div>
187 </div> 187 </div>
@@ -195,7 +195,7 @@ @@ -195,7 +195,7 @@
195 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 195 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
196 196
197 <div class="section-title style-three mb-15"> 197 <div class="section-title style-three mb-15">
198 - <span class="sub-title">运维一体机</span> 198 + <span class="sub-title">魔镜智能运维管理一体机</span>
199 </div> 199 </div>
200 <p>数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。</p> 200 <p>数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。</p>
201 <ol> 201 <ol>
@@ -208,12 +208,39 @@ @@ -208,12 +208,39 @@
208 </div> 208 </div>
209 <div class="col-lg-6"> 209 <div class="col-lg-6">
210 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 210 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
211 - <img src="assets/img/services/s1.png" alt="Service image"> 211 + <img src="assets/img/services/p7.png" alt="Service image">
212 </div> 212 </div>
213 </div> 213 </div>
214 </div> 214 </div>
215 </div> 215 </div>
216 </section> 216 </section>
217 217
  218 +<section class="sps-two mb-50 rmb-100">
  219 + <div class="container">
  220 + <div class="row align-items-center">
  221 + <div class="col-lg-6">
  222 + <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
  223 + <div class="section-title style-three mb-15">
  224 + <span class="sub-title">魔镜智能多云运维平台</span>
  225 + </div>
  226 + <p>
  227 + 基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。
  228 + </p>
  229 + <ol>
  230 + <li style="color: #0b2e13">■ 告警消息统一在平台管理</li>
  231 + <li style="color: #0b2e13">■ 基于智能算法对告警消息压缩合并</li>
  232 + <li style="color: #0b2e13">■ 支持阈值、同环比、预测异常检测</li>
  233 + <li style="color: #0b2e13">■ 自动故障修复</li>
  234 + </ol>
  235 + </div>
  236 + </div>
  237 + <div class="col-lg-6">
  238 + <div class="service-right-image wow customFadeInRight delay-0-1s slow">
  239 + <img src="assets/img/services/p8.png" alt="Service image">
  240 + </div>
  241 + </div>
  242 + </div>
  243 + </div>
  244 +</section>
218 245
219 246