<template>
    <div class="page-pack">
        <div class="container">
            <swiper
                :options="swiperOption" 
                ref="mySwiper">
                <swiper-slide>
                    <!-- 电泳工作区跳转页面 -->
                    <ElectrophoresisJump></ElectrophoresisJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 电泳工作区 -->
                    <Electrophoresis></Electrophoresis>
                </swiper-slide>
                <swiper-slide>
                    <!-- 钣金工作区跳转页面 -->
                    <SheetMetalJump></SheetMetalJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 钣金工作区 -->
                    <SheetMetal></SheetMetal>
                </swiper-slide>
                <swiper-slide>
                    <!-- 密封防腐工作区跳转页面 -->
                    <SealedAnticorrosionJump></SealedAnticorrosionJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 密封防腐工作区 -->
                    <SealedAnticorrosion></SealedAnticorrosion>
                </swiper-slide>
                <swiper-slide>
                    <!-- 腻子工作区跳转页面 -->
                    <PuttyJump></PuttyJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 腻子工作区 -->
                    <Putty></Putty>
                </swiper-slide>
                <swiper-slide>
                    <!-- 中涂工作区跳转页面 -->
                    <MiddleCoatJump></MiddleCoatJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 中涂工作区 -->
                    <MiddleCoat></MiddleCoat>
                </swiper-slide>
                <swiper-slide>
                    <!-- 面/色漆工作区跳转页面 -->
                    <ComplexionPaintJump></ComplexionPaintJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 面/色漆工作区 -->
                    <ComplexionPaint></ComplexionPaint>
                </swiper-slide>
                <swiper-slide>
                    <!-- 成品车存放区跳转页面 -->
                    <finishedJump></finishedJump>
                </swiper-slide>
                <swiper-slide>
                    <!-- 成品车存放区 -->
                    <finished></finished>
                </swiper-slide>
                <swiper-slide>
                    <!-- 涂装车间总体数据 -->
                    <paintingWorkShop></paintingWorkShop>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    import ElectrophoresisJump from './components/ElectrophoresisJump';
    import Electrophoresis from './components/Electrophoresis';
    import SheetMetalJump from './components/SheetMetalJump';
    import SheetMetal from './components/SheetMetal';
    import SealedAnticorrosionJump from './components/SealedAnticorrosionJump';
    import SealedAnticorrosion from './components/SealedAnticorrosion';
    import PuttyJump from './components/PuttyJump';
    import Putty from './components/Putty';
    import MiddleCoatJump from './components/MiddleCoatJump';
    import MiddleCoat from './components/MiddleCoat';
    import ComplexionPaintJump from './components/ComplexionPaintJump';
    import ComplexionPaint from './components/ComplexionPaint';
    import finishedJump from './components/FinishedJump';
    import finished from './components/Finished';
    import paintingWorkShop from '../Led/WorkShop/paintingWorkShop';

    export default {
        components: {
            swiper,
            swiperSlide,
            ElectrophoresisJump,
            Electrophoresis,
            SheetMetalJump,
            SheetMetal,
            SealedAnticorrosionJump,
            SealedAnticorrosion,
            PuttyJump,
            Putty,
            MiddleCoatJump,
            MiddleCoat,
            ComplexionPaintJump,
            ComplexionPaint,
            finishedJump,
            finished,
            paintingWorkShop
        },
        data () {
            return {
                // swiper配置信息
                swiperOption: {
                    autoplay: {
                        delay: 10000
                    },
                    loop: true,
                    loopAdditionalSlides: 0,
                    effect: 'fade'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        width: 100%;
        height: 100%;

        .container {
            width: 1556px;
            height: 1037px;
            margin: 0 auto;
        }
    }
</style>