<template>
    <div id="CompanyIntroduction">
        <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="companyIntroduce">
            <div class="container">
                <div class="homeTitleView customer-title">
                    <div class="textBack text-center">COMPANY INTROdUCTION</div>
                    <div class="textName textNameArt text-center">公司介绍</div>
                </div>
                <div class="row CompanyIntroduction-container">
                    <div class="col col-xs-12 col-sm-12 col-md-6 wow zoomIn">
                        <img class="img-responsive center-block" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/company.png">
                    </div>
                    <div class="col col-xs-12 col-sm-12 col-md-6">
                        <p class=".text-justify">江苏德木供应链管理有限公司是国内一家专注木材企业信息化、网络化、数字化解决方案 的服务供应商。 公司致力于围绕木材用户需求，从行业痛点出发，通过对木材全产业链全场景全链
                        路SaaS产品的研发,围绕企业数字化管理、金融在线化赋能、大数据决策支持等多维度帮 助木材全产业链企业实现数字化科学管理，在线化高效协同，数据化严谨决策，让木材买 卖更简单。</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 公司愿景 -->
        <div id="companyVision">
            <div class="container">
                <div class="homeTitleView customer-title">
                    <div class="textBack text-center">CORPORATE VISION</div>
                    <div class="textName textNameArt textNameArtTop text-center">企业愿景</div>
                </div>
                <p class="text-center">帮助广大木材企业用户实现数字化管理升级转型，引领木材行业走向产业互联网，成为木材 行业最有价值、最值得信赖的技术服务供应商。</p>
                <div class="row">
                    <div class="col col-sx-12 col-sm-6 col-md-5">
                        <div class="userView wow slideInUp">
                            <div class="colLeft">
                                <div class="title">corporate mission</div>
                                <div class="viewBox">
                                    <div class="name">企业使命</div>
                                    <div class="text">让木材企业管理更简单</div>
                                </div>
                            </div>
                            <div class="colRight">
                                <img src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/01.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col col-sx-12 col-sm-6 col-md-5">
                        <div class="userView wow slideInUp">
                            <div class="colLeft">
                                <div class="title">corporate philosophy</div>
                                <div class="viewBox">
                                    <div class="name">企业理念</div>
                                    <div class="text">开放、融合、赋能、共成</div>
                                </div>
                            </div>
                            <div class="colRight">
                                <img src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/02.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-2 hidden-xs">
                        <div class="colBack"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-sx-12 col-sm-12 col-md-12">
                        <div class="userView wow zoomIn">
                            <div class="colLeft">
                                <div class="title">corporate mission</div>
                                <div class="viewBox">
                                    <div class="name">企业价值观</div>
                                    <div class="text">以客户价值为核心，用心服务、传递价值</div>
                                </div>
                            </div>
                            <div class="colRight">
                                <img src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/03.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
    name: 'CompanyIntroduction',
    data(){
        return{
            swiperList: [
                {
                    img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
                    path: "",
                    title: '关于德木',
                    content: '德木存在理由和价值就是帮助客户实现价值',
                }
            ],
            userList:[
                {
                    logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/01.png',
                    title:'corporate mission',
                    name:'企业使命',
                    text:'让木材企业管理更简单'
                },
                {
                    logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/02.png',
                    title:'corporate philosophy',
                    name:'企业理念',
                    text:'开放、融合、赋能、共成'
                },
                {
                    logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/03.png',
                    title: 'corporate mission',
                    name: '企业价值观',
                    text: '以客户价值为核心，用心服务、传递价值'
                }
            ]
        }
    },
    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();
    }
}
</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;
}
/* 公司介绍 */
.homeTitleView{
  position: relative;
}
.homeTitleView .textBack{
  font-size: 34px;
  color: rgba(0,0,0,0.05);
  font-family: Inter;
  font-weight: 600;
}
.homeTitleView .textName{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-weight: 600;
  font-size: 36px;
  font-family: PingFang SC;
}
.homeTitleView .textNameArt::after{
  content: '';
  position: absolute;
  left: calc(50% - 60px);
  bottom: -15px;
  width: 120px;
  height: 4px;
  border-radius: 10px;
  background: #009688;
}
.homeTitleView .textNameArtTop::after{
    bottom: -55px;
}
#companyIntroduce{
  background: url("https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/back1.png") no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment:fixed;
  transition: all ease 0.6s;
  padding: 50px 0;
}
/* 公司愿景 */
#companyVision{
    padding: 50px 0;
    background: #F8F8F8;
}
#companyVision .container>p{
    margin: 15px 0;
}
#companyVision .colBack{
    background: #009688;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    height: calc(100% - 30px);
    width: 100%;
    margin-top: 30px;
}
#companyVision .userView{
    display: flex;
    justify-content: space-between;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    padding: 30px;
    margin-top: 30px;
}
#companyVision .userView .colLeft{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#companyVision .userView .colLeft .viewBox .name{
    margin-bottom: 10px;
    font-weight: 600;
    color: #000;
    font-size: 18px;
}
#companyVision .userView .colLeft .viewBox .text{
    font-weight: 400;
    color: #000;
}
#companyVision .userView .colLeft .title{
    color: #009688;
    font-weight: 700;
}
#companyVision .userView .colRight img{
    width: auto;
    height: 110px;
}
#companyVision .row{
    display: flex;
    flex-wrap: wrap;
}

#CompanyIntroduction{
    width: 100%;
}
#companyIntroduce .CompanyIntroduction-container{
    padding: 50px 0;
    color: #808080;
    transition: all ease 0.5s;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}
#companyIntroduce .CompanyIntroduction-container .col{
    display: flex;
    align-items: center;
}
.CompanyIntroduction-container>div>p{
    font-size: 14px;
    line-height: 2.8rem;
    color: #333;
    font-weight: 400;
    font-family: PingFang SC;
}
/* 媒体查询（手机） */
@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;
  }
  #companyIntroduce{
    padding: 30px 0;
  }
  #companyIntroduce .row{
    margin-left: 0;
    margin-right: 0;
  }
  #companyIntroduce .CompanyIntroduction-container{
    padding: 20px 0;
  }
  #companyVision{
    padding: 20px 0;
  }
  #companyVision .homeTitleView{
    margin-bottom: 40px;
  }
  #companyVision .homeTitleView .textNameArtTop::after{
    bottom: -15px;
  }
  #companyVision .row{
    margin-left: 0;
    margin-right: 0;
  }
  #companyVision .userView .colRight img{
    height: 60px;
  }
}
/* 平板 */
@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>

