<section class="hero-section rel  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="home-banner-section rel rpt-150  rpb-0 text-center" id="homeBanner">
    <div class="owl-carousel owl-theme owl-loaded all-height">
        <div class="owl-stage-outer owl-height all-height">
            <div class="owl-stage all-height">
                <div :class="['owl-item','home-bg-'+(index+1), 'all-height',{'scroll-to-target':index==2,'cursor-pointer':index==2,'scroll-item':index==2}] " data-target=".team-section" 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==1}]">{{item.title}}</div>
                        <div class="owl-item-title font-size-42" v-if="item.title1">{{item.title1}}</div>
                        <div class="pt-30 title-intro-top text-align-center" v-if="item.introTitle">{{item.introTitle}}</div>
                        <div :class="['owl-item-intro', 'title-intro-top', {'pt-10':item.introTitle,'pt-30':!item.introTitle,'text-align-center':index==1,'max-width-6':index!=1}]">{{item.introduction}}</div>
                        <div :class="['owl-item-button', 'pt-30',{'text-align-center':index==1}]" >
                            <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=" rel text-center pt-30">
    <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 tech-item 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 class="tech-img-con">
                            <div class="tech-img">
                                <img :src="'assets/img/technology/technology-'+item.id+'.png'" alt="Service Icon">
                            </div>
                        </div>

                        <div class="tech-title-num">{{index+1}}</div>
                        <div class="tech-title pt-30 pb-30">{{item.title}}</div>
                        <div :class="[ 'tooltip', 'tooltip-self','flex-column-center',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
                            <div><b>{{item.title}}</b></div>
                            <div>{{item.tipIntro}}</div>
                        </div>
                        <div class="tech-introCon-sm">
                            <div class="tech-title-sm">{{item.title}}</div>
                            <div class="tech-intro-sm">{{item.tipIntro}}</div>
                        </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="rel text-center pt-30 pb-30 principle-section">
    <div class="container">
        <div class="row align-items-center pt-30 principle-section-item">
            <div class="col-lg-12">
                <div class=" mr-20 rmr-0 rmb-50  text-center">
                    <div class="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-md-4 principle-con" v-for="(itemP,indexP) in principleData">
                <div class="principle-item">
                    <div class="principle-item-title">
                        <span class="num-icon">{{indexP+1}}</span>
                        <span>{{itemP.title}}</span>
                    </div>
                    <div class="principle-item-intro">{{itemP.introduction}}</div>
                </div>
            </div>
            <!--<div class="col-md-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-md-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>
</section>
<section class="about-section rel pt-60 route-about-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div class=" mr-20 rmr-0 rmb-50  text-center">
                    <div class=" mb-35">
                        <div class="title-style route-title">魔镜智能运维建设六步走路线</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="color-white route-con">
            <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="about-section route-section">
    <div class="step-route-bg">
        <img src="assets/img/index/step-route-bg.png" alt="">
    </div>
    <div class="step-route-bg-sm">
        <img src="assets/img/index/step-route-bg-sm.jpg" alt="">
    </div>

</section>
<section class="team-section rel pt-80 pb-80 compatible-section">
    <div class="container">
        <div class="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 class="section-item-sm">
                <div :class="['section-item-sm-icon',{'section-item-active':compatibleActive==index}]" @mouseenter="showHoverCompatible(index)" @mouseleave="hideHoverCompatible()"  v-for="(item,index) in logoData">{{item.name}}</div>
            </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">{{item.title}}</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>