<template>
  <div id="JobChance">
    <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">
      <div class="container customer-container">
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3 wow slideInUp" v-for="(item,index) in cardList" :key="index">
            <div class="cardView">
              <div class="server-block">
                <img class="center-block" :src="item.logo" alt="">
                <div class="name">{{item.name}}</div>
              </div>
              <div class="server-text">{{item.text}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- MES系统功能一览 -->
    <div id="mesView" class="mesView">
      <div class="container customer-container">
        <div class="homeTitleView customer-title">
          <div class="textBack text-center">MES SYSTEM FUNCTION OVERVIEW</div>
          <div class="textName textNameArt text-center">MES系统功能一览</div>
        </div>
        <div :class="['mesRow row',index==0?'rowOen':'']" v-for="(item,index) in mesList" :key="index">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <img class="img-responsive wow zoomIn" :src="item.logo" v-if="item.isLeft" alt="">
            <div class="mesItem mesItemLeft" v-else>
              <div class="mesName">{{item.name}}<span class="adorn"></span></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.logo" v-if="!item.isLeft" alt="">
            <div class="mesItem" v-else>
              <div class="mesName"><span class="adorn"></span>{{item.name}}</div>
              <div class="mesText">{{item.text}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="banner container-fuild text-center">工作机会</div> -->
    <!-- <div class="container">
      <div class="JobChance-container wow pulse">
        <h2>PHP工程师</h2>
        <p>岗位职责</p>
        <ol>
          <li>负责公司产品及项目系统的功能开发、代码优化；</li>
          <li>负责项目组人员任务的分配与监督，及时解决项目技术问题；</li>
          <li>参与系统需求分析与设计，并负责完成PHP核心代码，接口规范制定，架构设计。</li>
        </ol>
        <p>任职要求</p>
        <ol>
          <li>精通PHP+MySql+Apache开发，精通使用JavaScript、AJAX、JQuery等技术；3年以上WEB应用程序开发经验， 有大型网站或电子商务网站工作经验者优先；</li>
          <li>熟悉jQuery，具有AJAX、HTML、CSS、JAVASCRIPT等方面的开发经验；</li>
          <li>熟悉PHP模板技术、框架技术及设计模式，有php框架系统进行开发经验者优先，如：phpcms，dedecms等；</li>
          <li>精通数据库原理，精通MYSQL、了解Mongo等并有相关关系数据库设计开发经验, 了解Mysql的数据库配置管理、性能优化；</li>
          <li>熟悉常见的数据结构和算法，具备良好的编程习惯及较强的文档编写能力；</li>
          <li>熟悉各种WEB缓存技术,熟悉大型网站构架和性能优化；</li>
          <li>对网站系统架构的部署、搭建、优化、排错等方面有丰富经验，对高负载、大访问量情况下的系统架构有经验者优先。</li>
        </ol>
        <button class="center-block btn btn-warning btn-lg">投递简历</button>
      </div>
    </div> -->
  </div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
  name: "JobChance",
  data() {
    return {
      swiperList:[
        {
          img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
          path: "",
          title: '深入了解每个功能模块的详细特性和优势',
          content: '带您逐步了解MES系统如何助力您的业务提升',
        }
      ],
      cardList:[
        {
          logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/1.png',
          name:'数据聚合',
          text:'汇集生产运营过程中的纸单数据、设备数据、系统数据，使其透明可视化'
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/2.png',
          name: '实时协作',
          text: '基于公有云和移动端,利用实时更新的数据，实现从工位到集团的高效协作'
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/3.png',
          name: '分析解读',
          text: '数据驱动业务优化,形成“识别- 定位 - 改善 - 验证”的闭环，持续改善生产运营'
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/4.png',
          name: '智能决策',
          text: '基于沉淀的高质量数据资产引入AI、大数据等进阶科技实现自动化决策'
        }
      ],
      mesList:[
        {
          logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/3.png',
          name:'生产工单',
          text:'制定和管理木材加工的生产工单，包括原料、加工工艺和数量信息。实时追踪工单状态和生产进度。',
          isLeft:true
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/4.png',
          name: '生产排程',
          text: '基于工单需求和生产能力进行排程计划，考虑设备、人员和物料等因素。提供直观的可视化排程界面，方便灵活调整计划。',
          isLeft: false
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/5.png',
          name: '能耗管理',
          text: '监测加工过程中的能耗数据，提供节能建议和优化措施，助力环保生产。',
          isLeft: true
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/6.png',
          name: '设备产能和报修',
          text: '管理设备产能和效率，提供设备报修申请和记录功能，实时通知处理设备故障，减少停机时间。',
          isLeft: false
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/1.png',
          name: '生产流程管理',
          text: '定义和管理木材加工流程，确保操作标准和产品一致性。',
          isLeft: true
        },
        {
          logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/2.png',
          name: '审批流',
          text: '设置审批流程，保障重要操作的合规和授权，并提供审批记录和状态跟踪。',
          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();
  }
};
</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;
}
#headCard{
  margin: -150px auto 0 auto;
  position: relative;
  z-index: 100;
}
#headCard .cardView{
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 20px;
  margin: 10px 0;
}
#headCard .cardView .server-block{
  display: flex;
  align-items: center;
}
#headCard .cardView .server-block img{
  height: 40px;
  width: auto;
  margin: 0;
}
#headCard .cardView .server-block .name{
  margin-left: 20px;
  color: #333;
  font-weight: 500;
  font-size: 18px;
}
#headCard .cardView .server-text{
  margin-top: 15px;
  line-height: 24px;
  color: #333;
  font-weight: 300;
  height: 80px;
}

/* mes系统展览 */
#mesView{
  padding: 50px 0 0 0;
}
#mesView .mesRow{
  margin: 50px 0;
  display: flex;
  flex-wrap: wrap;
}
#mesView .rowOen{
  margin-top: 80px;
}
#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: 18px;
  font-weight: 600;
  color: #000;
  display: flex;
  align-items: center;
}
#mesView .mesRow .mesItem .mesName .adorn{
  background: #F02734;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 4px;
}
#mesView .mesRow .mesItemLeft .mesName .adorn{
  margin-left: 10px;
  margin-right: 8px;
}
#mesView .mesRow .mesItem .mesText{
  font-weight: 400;
  color: #333;
  line-height: 24px;
  font-size: 14px;
  margin-top: 10px;
}

.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
#JobChance{
  width: 100%;
}
.JobChance-container {
  margin: 100px;
  padding: 30px;
  transition: all ease 0.5s;
  border: 1px dashed salmon;
}
.JobChance-container h2{
  color: rgb(255, 102, 19);
  font-weight: bolder;
  text-align: center;
}
.JobChance-container p{
font-size: 20px;
  color: rgb(255, 102, 19);
  font-weight: 700;
}
.JobChance-container ol{
    list-style-type: decimal;
    padding-left: 30px;
}
.JobChance-container ol>li{
    font-size: 14px;
    line-height: 2.7rem;
}
/* 媒体查询（手机） */
@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;
  }
  #mesView{
    padding: 30px 0;
  }
  #mesView .mesRow{
    margin: 5px 0;
  }
  #mesView .rowOen{
    margin-top: 50px;
  }
  #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>

