365 lines
11 KiB
Vue
365 lines
11 KiB
Vue
<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>
|
||
|