monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 708c16aa2ba33cfb1158b5f84ebceadb59710923 1 parent be7c1df9

【无】 web网站home首页及图片

Inline Side-by-side
Showing 24 changed files with 423 additions and 26 deletions
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 更多模板：www.bootstrapmb.com 21 更多模板：www.bootstrapmb.com
22 **********************************************/ 22 **********************************************/
23 23
24 -/*** 24 +/***
25 ==================================================================== 25 ====================================================================
26 Start Global CSS 26 Start Global CSS
27 ==================================================================== 27 ====================================================================
@@ -158,7 +158,7 @@ img { @@ -158,7 +158,7 @@ img {
158 display: inline-block; 158 display: inline-block;
159 text-transform: capitalize; 159 text-transform: capitalize;
160 font-family: 'Poppins', sans-serif; 160 font-family: 'Poppins', sans-serif;
161 - 161 +
162 } 162 }
163 163
164 /*Social Icon*/ 164 /*Social Icon*/
@@ -320,13 +320,13 @@ textarea:placeholder, @@ -320,13 +320,13 @@ textarea:placeholder,
320 } 320 }
321 321
322 322
323 -/*** 323 +/***
324 ==================================================================== 324 ====================================================================
325 End Global CSS 325 End Global CSS
326 ==================================================================== 326 ====================================================================
327 ***/ 327 ***/
328 328
329 -/*** 329 +/***
330 ==================================================================== 330 ====================================================================
331 Start Hero Section 331 Start Hero Section
332 ==================================================================== 332 ====================================================================
@@ -345,7 +345,6 @@ textarea:placeholder, @@ -345,7 +345,6 @@ textarea:placeholder,
345 345
346 .hero-content p { 346 .hero-content p {
347 font-size: 18px; 347 font-size: 18px;
348 - max-width: 535px;  
349 font-weight: 600; 348 font-weight: 600;
350 margin-bottom: 40px; 349 margin-bottom: 40px;
351 } 350 }
@@ -354,14 +353,14 @@ textarea:placeholder, @@ -354,14 +353,14 @@ textarea:placeholder,
354 margin: 0 -200px 0 90px; 353 margin: 0 -200px 0 90px;
355 } 354 }
356 355
357 -/*** 356 +/***
358 ==================================================================== 357 ====================================================================
359 End Hero Section 358 End Hero Section
360 ==================================================================== 359 ====================================================================
361 ***/ 360 ***/
362 361
363 362
364 -/*** 363 +/***
365 ==================================================================== 364 ====================================================================
366 Start Banner Section 365 Start Banner Section
367 ==================================================================== 366 ====================================================================
@@ -405,13 +404,13 @@ textarea:placeholder, @@ -405,13 +404,13 @@ textarea:placeholder,
405 font-size: 14px; 404 font-size: 14px;
406 } 405 }
407 406
408 -/*** 407 +/***
409 ==================================================================== 408 ====================================================================
410 End Banner Section 409 End Banner Section
411 ==================================================================== 410 ====================================================================
412 411
413 412
414 -/*** 413 +/***
415 ==================================================================== 414 ====================================================================
416 Start Services Section 415 Start Services Section
417 ==================================================================== 416 ====================================================================
@@ -440,13 +439,13 @@ textarea:placeholder, @@ -440,13 +439,13 @@ textarea:placeholder,
440 439
441 440
442 441
443 -/*** 442 +/***
444 ==================================================================== 443 ====================================================================
445 End Services Section 444 End Services Section
446 ==================================================================== 445 ====================================================================
447 ***/ 446 ***/
448 447
449 -/*** 448 +/***
450 ==================================================================== 449 ====================================================================
451 Start Project section 450 Start Project section
452 ==================================================================== 451 ====================================================================
@@ -559,7 +558,7 @@ textarea:placeholder, @@ -559,7 +558,7 @@ textarea:placeholder,
559 right: 20px; 558 right: 20px;
560 } 559 }
561 560
562 -/*** 561 +/***
563 ==================================================================== 562 ====================================================================
564 End Project section 563 End Project section
565 ==================================================================== 564 ====================================================================
@@ -569,6 +568,7 @@ textarea:placeholder, @@ -569,6 +568,7 @@ textarea:placeholder,
569 /*** ==================================================================== 568 /*** ====================================================================
570 Start Success Section 569 Start Success Section
571 ====================================================================***/ 570 ====================================================================***/
  571 +
572 .success-section { 572 .success-section {
573 position: relative; 573 position: relative;
574 } 574 }
@@ -618,7 +618,7 @@ textarea:placeholder, @@ -618,7 +618,7 @@ textarea:placeholder,
618 margin: 10px 0 0; 618 margin: 10px 0 0;
619 } 619 }
620 620
621 -/*** 621 +/***
622 ==================================================================== 622 ====================================================================
623 End Success Section 623 End Success Section
624 ==================================================================== 624 ====================================================================
@@ -668,7 +668,7 @@ textarea:placeholder, @@ -668,7 +668,7 @@ textarea:placeholder,
668 border: 2px solid; 668 border: 2px solid;
669 } 669 }
670 670
671 -/*** 671 +/***
672 ==================================================================== 672 ====================================================================
673 End Video Section 673 End Video Section
674 ==================================================================== 674 ====================================================================
@@ -733,7 +733,7 @@ textarea:placeholder, @@ -733,7 +733,7 @@ textarea:placeholder,
733 } 733 }
734 734
735 735
736 -/*** 736 +/***
737 ==================================================================== 737 ====================================================================
738 End Services Two Section 738 End Services Two Section
739 ==================================================================== 739 ====================================================================
@@ -899,7 +899,7 @@ textarea:placeholder, @@ -899,7 +899,7 @@ textarea:placeholder,
899 margin-top: 5px; 899 margin-top: 5px;
900 } 900 }
901 901
902 -/*** 902 +/***
903 ==================================================================== 903 ====================================================================
904 End Pricing section 904 End Pricing section
905 ==================================================================== 905 ====================================================================
@@ -958,7 +958,7 @@ textarea:placeholder, @@ -958,7 +958,7 @@ textarea:placeholder,
958 color: #1C00AF; 958 color: #1C00AF;
959 } 959 }
960 960
961 -/*** 961 +/***
962 ==================================================================== 962 ====================================================================
963 End Team Section 963 End Team Section
964 ==================================================================== 964 ====================================================================
@@ -1021,7 +1021,7 @@ textarea:placeholder, @@ -1021,7 +1021,7 @@ textarea:placeholder,
1021 padding: 16px 0 10px; 1021 padding: 16px 0 10px;
1022 } 1022 }
1023 1023
1024 -/*** 1024 +/***
1025 ==================================================================== 1025 ====================================================================
1026 End FAQ Section 1026 End FAQ Section
1027 ==================================================================== 1027 ====================================================================
@@ -1164,7 +1164,7 @@ textarea:placeholder, @@ -1164,7 +1164,7 @@ textarea:placeholder,
1164 display: inline-block; 1164 display: inline-block;
1165 } 1165 }
1166 1166
1167 -/*** 1167 +/***
1168 ==================================================================== 1168 ====================================================================
1169 End Testimonials Section 1169 End Testimonials Section
1170 ==================================================================== 1170 ====================================================================
@@ -1406,7 +1406,7 @@ blockquote:before { @@ -1406,7 +1406,7 @@ blockquote:before {
1406 .widget-post-content h6 { 1406 .widget-post-content h6 {
1407 margin: 0; 1407 margin: 0;
1408 font-weight: 400; 1408 font-weight: 400;
1409 - 1409 +
1410 } 1410 }
1411 .widget-post-content h6 a{ 1411 .widget-post-content h6 a{
1412 color: #848484; 1412 color: #848484;
@@ -1455,7 +1455,7 @@ blockquote:before { @@ -1455,7 +1455,7 @@ blockquote:before {
1455 color: #FFFFFF; 1455 color: #FFFFFF;
1456 transition: .5s; 1456 transition: .5s;
1457 } 1457 }
1458 -/*** 1458 +/***
1459 ==================================================================== 1459 ====================================================================
1460 End Blog Section 1460 End Blog Section
1461 ==================================================================== 1461 ====================================================================
@@ -1477,7 +1477,7 @@ blockquote:before { @@ -1477,7 +1477,7 @@ blockquote:before {
1477 margin-bottom: 15px; 1477 margin-bottom: 15px;
1478 } 1478 }
1479 1479
1480 -/*** 1480 +/***
1481 ==================================================================== 1481 ====================================================================
1482 End Call For Action Section 1482 End Call For Action Section
1483 ==================================================================== 1483 ====================================================================
@@ -1546,7 +1546,7 @@ blockquote:before { @@ -1546,7 +1546,7 @@ blockquote:before {
1546 margin-top: 20px; 1546 margin-top: 20px;
1547 } 1547 }
1548 1548
1549 -/*** 1549 +/***
1550 ==================================================================== 1550 ====================================================================
1551 End Contact Page section 1551 End Contact Page section
1552 ==================================================================== 1552 ====================================================================
@@ -1616,7 +1616,7 @@ blockquote:before { @@ -1616,7 +1616,7 @@ blockquote:before {
1616 right: 0; 1616 right: 0;
1617 } 1617 }
1618 1618
1619 -/*** 1619 +/***
1620 ==================================================================== 1620 ====================================================================
1621 End Error section 1621 End Error section
1622 ==================================================================== 1622 ====================================================================
@@ -1705,8 +1705,109 @@ blockquote:before { @@ -1705,8 +1705,109 @@ blockquote:before {
1705 /*** ==================================================================== 1705 /*** ====================================================================
1706 End Footer Section 1706 End Footer Section
1707 ====================================================================***/ 1707 ====================================================================***/
1708 -  
1709 .hg-logo{ 1708 .hg-logo{
1710 width: 162px; 1709 width: 162px;
1711 height: 40px; 1710 height: 40px;
1712 } 1711 }
  1712 +@media (min-width: 992px){
  1713 + .col-lg-3-self {
  1714 + max-width: 20%;
  1715 + }
  1716 +}
  1717 +.service-icon{
  1718 + position: relative;
  1719 + display: flex;
  1720 + justify-content: center;
  1721 +}
  1722 +.single-service-box{
  1723 + padding:0;
  1724 +}
  1725 +.tooltip-self{
  1726 + background-color: transparent;
  1727 + width:100%;
  1728 + height:100%;
  1729 + display: flex;
  1730 + align-items: center;
  1731 + justify-content: center;
  1732 + line-height: 30px;
  1733 +}
  1734 +.principle-item{
  1735 + background-color: #000;
  1736 + padding:40px 20px;
  1737 + color:#fff;
  1738 + border-radius: 4px;
  1739 +}
  1740 +.principle-item h4{
  1741 + color:#aaaaaa;
  1742 + margin-top:20px;
  1743 +}
  1744 +.principle-item-title{
  1745 + display: flex;
  1746 +}
  1747 +.num-icon{
  1748 + border: 1px solid #fff;
  1749 + border-radius: 50%;
  1750 + width: 30px;
  1751 + height: 30px;
  1752 + display: flex;
  1753 + align-items: center;
  1754 + justify-content: center;
  1755 + margin-right:6px;
  1756 +}
  1757 +.tooltip{
  1758 + top:0;
  1759 +}
  1760 +.opacity1{
  1761 + opacity:1;
  1762 +}
  1763 +.opacity0{
  1764 + opacity:0;
  1765 +}
  1766 +.color-white{
  1767 + color:#fff;
  1768 +}
  1769 +.flex-column-center{
  1770 + display: flex;
  1771 + flex-direction: column;
  1772 + justify-content: center;
  1773 +}
  1774 +.flex-column-start{
  1775 + display: flex;
  1776 + flex-direction: column;
  1777 + justify-content: flex-start;
  1778 +}
  1779 +.flex-text-left{
  1780 + text-align: left;
  1781 +}
  1782 +.success-bg-self{
  1783 + height:100%;
  1784 +}
  1785 +.section-item-content{
  1786 + display: flex;
  1787 + align-items: center;
  1788 + justify-content: space-between;
  1789 +}
  1790 +.item-content{
  1791 + flex:1;
  1792 +}
  1793 +.item-text{
  1794 + flex: 1;
  1795 +}
  1796 +.section-item img,.owl-carousel .owl-item .title-icon img,.owl-carousel .owl-item .img-right img{
  1797 + width:auto;
  1798 +}
  1799 +.team-item-right{
  1800 + padding:20px;
  1801 +}
  1802 +
  1803 +.team-item{
  1804 + width:100%;
  1805 + padding:20px;
  1806 +}
  1807 +.title-icon{padding:20px 0;}
  1808 +.team-item-left{
  1809 + padding:40px;
  1810 +}
  1811 +.item-content h4{
  1812 + margin:20px 0;
  1813 +}
1 <div> 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>
  16 + </div>
  17 + </div>
  18 + </div>
2 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>
3 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">
4 36
5 - 首页11 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>
  46 + </div>
  47 + </div>
  48 + </div>
6 49
  50 + </div>
  51 + </div>
  52 +
  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>
  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 +
  71 + </div>
  72 + </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>
  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>
  87 + </div>
  88 + </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>
  96 + </div>
  97 + </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>
  105 + </div>
  106 + </div>
  107 + </div>
  108 +
  109 + </div>
  110 +
  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 +
  127 + </div>
  128 + </div>
  129 + </div>
  130 + <div class="row">
  131 + <img src="assets/img/web-route.png" alt="">
  132 + </div>
  133 + </div>
  134 +
  135 + <div class="shape shapeAnimationFour l-10 t-5">
  136 + <img src="assets/img/shapes/shape4.png" alt="Shape">
  137 + </div>
  138 + <div class="shape shapeAnimationFive r-10 t-100 zm-1">
  139 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  140 + </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>
  153 + </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>
  166 + </div>
  167 + <div class="col-lg-4 img-right team-item-right">
  168 + <img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
  169 + </div>
  170 + </div>
  171 +
  172 +
  173 + </div>
  174 + </div>
  175 +
  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>
7 183
8 </div> 184 </div>
@@ -4,7 +4,127 @@ export default { @@ -4,7 +4,127 @@ export default {
4 components: {}, 4 components: {},
5 props: [], 5 props: [],
6 setup(props, {attrs, slots, emit}) { 6 setup(props, {attrs, slots, emit}) {
  7 + const {proxy} = Vue.getCurrentInstance();
7 8
  9 + let isHover=Vue.ref(false);
  10 + let techData=Vue.ref([]);
  11 + for(let i=1;i<6;i++){
  12 + techData.value.push({
  13 + id:i,
  14 + isHover:false
  15 + })
  16 + }
  17 + //技术优势悬浮提示
  18 + let tooltipHover=(row)=>{
  19 + techData.value.map(item=>{
  20 + if(item.id==row.id){
  21 + item.isHover=true;
  22 + }
  23 + })
  24 + }
  25 + //技术优势鼠标离开事件
  26 + let tooltipLeave=()=>{
  27 + techData.value.map(item=>{
  28 + item.isHover=false;
  29 + })
  30 + }
  31 + //兼容认证logo数据
  32 + let logoData=Vue.ref([
  33 + {
  34 + id:'1',
  35 + logoUrl:'logo-dong'
  36 + },
  37 + {
  38 + id:'2',
  39 + logoUrl:'logo-da'
  40 + },
  41 + {
  42 + id:'3',
  43 + logoUrl:'logo-nan'
  44 + },
  45 + {
  46 + id:'4',
  47 + logoUrl:'logo-ren'
  48 + },
  49 + {
  50 + id:'5',
  51 + logoUrl:'logo-tong'
  52 + }
  53 + ])
  54 + let compatibleData=Vue.ref([
  55 + {
  56 + id:'1',
  57 + logoUrl:'logo-dong',
  58 + urlName:'dong',
  59 + content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
  60 + },
  61 + {
  62 + id:'2',
  63 + logoUrl:'logo-da',
  64 + urlName:'da',
  65 + content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。'
  66 + },
  67 + {
  68 + id:'3',
  69 + logoUrl:'logo-nan',
  70 + urlName:'nan',
  71 + content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。'
  72 + },
  73 + {
  74 + id:'4',
  75 + logoUrl:'logo-ren',
  76 + urlName:'ren',
  77 + content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。'
  78 + },
  79 + {
  80 + id:'5',
  81 + logoUrl:'logo-tong',
  82 + urlName:'tong',
  83 + content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
  84 + }
  85 + ])
  86 +
  87 + // 挂载完
  88 + Vue.onMounted(() => {
  89 + $('.team-carousel').owlCarousel({
  90 + loop:true,
  91 + items: 1,
  92 + margin: 20,
  93 + nav: false,
  94 + dots: true,
  95 + active: true,
  96 + dotsEach: 2,
  97 + smartSpeed: 1000,
  98 + autoplay: 5000,
  99 + // navText: ['<span class="flaticon-left-arrow"></span>', '<span class="flaticon-right-arrow"></span>'],
  100 + dotsText: ['<span class="flaticon-left-arrow"></span>', '<span class="flaticon-right-arrow"></span>'],
  101 + responsive: {
  102 + /* 0: {
  103 + items: 1,
  104 + },
  105 + 575: {
  106 + items: 1,
  107 + },
  108 + 768: {
  109 + items: 2,
  110 + },
  111 + 992: {
  112 + items: 3,
  113 + },
  114 + 1200: {
  115 + items: 3,
  116 + }*/
  117 + }
  118 + });
  119 + })
  120 + return{
  121 + isHover,
  122 + tooltipHover,
  123 + tooltipLeave,
  124 + techData,
  125 + logoData,
  126 + compatibleData
  127 + }
8 } 128 }
9 129
10 } 130 }