<template>
    <div id="Service">
        <div id="swiper" class="container-fuild">
            <div class="swiper-container banner-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
                        <img class="swiper-lazy" :data-src="item.img" alt="轮播图">
                        <div class="swiper-lazy-preloader"></div>
                        <div class="swiper-slide-title wow pulse">
                            <h1>{{item.title}}</h1>
                            <p>{{item.content}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 数据卡片 -->
        <div id="headCard" class="headCard wow slideInUp">
            <div class="container customer-container">
                <div class="row">
                    <div class="col col-xs-12 col-sm-6 col-md-3 " v-for="(item,index) in cardList" :key="index">
                        <div class="cardView">
                            <div class="server-block">
                                <div :class="['name',item.isUp?'greenColor':'redColor']">{{item.num}}</div>
                                <img class="center-block" :src="item.icon" alt="">
                            </div>
                            <div class="server-text">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- mes -->
        <div id="mesView" class="mesView">
            <div class="container customer-container">
                <div :class="['mesRow row',index==0?'rowOen':'']" v-for="(item,index) in serviceList" :key="index">
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <img class="img-responsive wow zoomIn" :src="item.img" v-if="item.isLeft" alt="">
                        <div class="mesItem mesItemLeft" v-else>
                            <div class="mesName">{{item.title}}</div>
                            <div class="mesText">{{item.text}}</div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <img class="img-responsive wow zoomIn" :src="item.img" v-if="!item.isLeft" alt="">
                        <div class="mesItem" v-else>
                            <div class="mesName">{{item.title}}</div>
                            <div class="mesText">{{item.text}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
    name: 'Service',
    data(){
        return{
            swiperList: [
                {
                    img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
                    path: "",
                    title: '深入了解每个功能模块的详细特性和优势',
                    content: '带您逐步了解MES系统如何助力您的业务提升',
                }
            ],
            cardList: [
                {
                    name: '出材率提升',
                    num: '98%',
                    icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowUp.png',
                    isUp:true,
                },
                {
                    name: '生产效率',
                    num: '120%',
                    icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowUp.png',
                    isUp: true,
                },
                {
                    name: '事故率下降',
                    num: '80%',
                    icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowDown.png',
                    isUp: false,
                },
                {
                    name: '环保指标',
                    num: '90%',
                    icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowUp.png',
                    isUp: true,
                },
            ],
            serviceList: [
                {
                    title: '出材率',
                    text:'提高木材的出材率是我们原木加工自动化系统的一项关键特性。我们引以为傲的高效率工艺确保每一根原木都被充分利用，最大限度地提高了木材的出材率。',
                    img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/1.png',
                    isLeft:true
                },{
                    title: '生产效率',
                    text: '我们的自动化系统采用先进的技术，确保原木加工的高效率和快速生产。通过精密的控制和智能化流程，我们确保了持续的生产能力，助您提高业务生产力。',
                    img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/2.png',
                    isLeft: false
                },{
                    title: '事故率',
                    text: '安全是我们关注的首要问题。我们的原木加工自动化系统经过精心设计和全面测试，以确保最低的事故率。我们致力于提供一个安全的工作环境，保障您的生产过程不受干扰。',
                    img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/3.png',
                    isLeft: true
                },{
                    title: '环保指标',
                    text: '我们深知环保责任，因此我们的原木加工自动化系统采用了最先进的环保技术。从节能设计到废物处理，我们致力于降低对环境的影响，为您的业务提供可持续的解决方案。',
                    img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/4.png',
                    isLeft: false
                }
            ],
        }
    },
    mounted(){
        /* banner-swiper */
        new Swiper(".banner-swiper", {
            loop: true, // 循环模式选项
            effect: 'fade',
            //自动播放
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false
            },
            // 如果需要分页器
            pagination: {
                el: ".swiper-pagination",
                clickable: true
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            },
            // 延迟加载
            lazy: {
                loadPrevNext: true
            },
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true //修改swiper的父元素时，自动初始化swiper
        });

        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
    },
    methods:{
        
    }
}
</script>
<style scoped>
/* 轮播图 */
#swiper {
  height: 700px;
}
#swiper .banner-swiper {
  width: 100%;
  height: 100%;
}
#swiper .banner-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
}
#swiper .banner-swiper .swiper-slide{
  position: relative;
}
#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
}
#swiper .banner-swiper .swiper-slide-title > h1{
  font-size: 50px;
  margin-top: 13%;
}
#swiper .banner-swiper .swiper-slide-title > p{
  font-size: 20px;
  margin-top: 3%;
  font-weight: 700;
}

/* 卡片 */
#headCard{
    position: relative;
    z-index: 100;
    background: rgba(255, 255, 255, 0.86);
    margin-top: -179px;
}
#headCard .row .col{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
}
#headCard .cardView .server-block{
    display: flex;
    align-items: baseline;
}
#headCard .cardView .server-block .name{
    font-family: DIN Alternate;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
}
#headCard .cardView .server-block .greenColor{
    color: #4CAF50;
}
#headCard .cardView .server-block .redColor{
    color: #E63946;
}
#headCard .cardView .server-block img{
    width: 18px;
    height: auto;
    margin-left: 15px;
}
#headCard .cardView .server-text{
    text-align: center;
    font-weight: 500;
    color: #000;
    font-size: 16px;
}
/* mes */
#mesView{
  padding: 50px 0 0 0;
}
#mesView .mesRow{
  margin: 50px 0;
  display: flex;
  flex-wrap: wrap;
}
#mesView .rowOen{
  margin-top: 20px;
}
#mesView .mesRow .mesItem{
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#mesView .mesRow .mesItemLeft{
  align-items: flex-end;
}
#mesView .mesRow .mesItem .mesName{
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  padding: 6px 0;
  border-radius: 68px;
  background: #009688;
  box-shadow: 0px 4px 4px 0px rgba(0, 150, 136, 0.30);
}
#mesView .mesRow .mesItem .mesText{
  font-weight: 400;
  color: #333;
  line-height: 24px;
  font-size: 14px;
  margin-top: 20px;
}

#Service{
    width: 100%;
}
/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  .homeTitleView .textBack{
    font-size: 20px;
  }
  .homeTitleView .textName{
    font-size: 22px;
  }
  .homeTitleView .textNameArt::after{
    width: 80px;
    left: calc(50% - 40px);
  }

  #swiper {
    height: 210px;
  }
  #swiper .banner-swiper .swiper-slide-title > h1{
    font-size: 24px;
    line-height: 34px;
  }
  #swiper .banner-swiper .swiper-slide-title > p{
    font-size: 14px;
  }
  #headCard{
    margin: 20px auto 0 auto;
  }
  #headCard .row{
    margin-left: 0;
    margin-right: 0;
  }
  #headCard .row .col{
    height: 150px;
  }
  #headCard .cardView .server-block .name{
    font-size: 46px;
  }
  #mesView{
    padding: 30px 0;
  }
  #mesView .mesRow{
    margin: 5px 0;
  }
  #mesView .rowOen{
    margin-top: 0;
  }
  #mesView .mesRow .mesItem{
    padding: 10px 0;
  }
}
/* 平板 */
@media screen and (min-width: 768px) and (max-width: 996px) {
  .homeTitleView .textBack{
    font-size: 30px;
  }
  .homeTitleView .textName{
    font-size: 36px;
  }

  #swiper {
    height: 400px;
  }
  #swiper .banner-swiper .swiper-slide-title > h1{
    font-size: 30px;
    margin-top: 18%;
  }
  #swiper .banner-swiper .swiper-slide-title > p{
    font-size: 16px;
  }
  #headCard{
    margin-top: 30px;
  }
  #headCard .row{
    margin-left: 0;
    margin-right: 0;
  }
}
</style>

