/**
*@author:Guoxiaohuan
*@date:2020.05.26
*@info：图片轮播
*/
<template>
    <div class='wanda-rotation rotationFullYlt'>
        <div v-if='rotationImg.length==1&&size=="height"' class='rotationConType'>
            <img :src='rotationImg[0].url' alt />
        </div>
        <div v-else-if='rotationImg.length==1&&size=="width"' class='rotationCon'>
            <img :src='rotationImg[0].url' alt />
        </div>
        <el-carousel
            v-else
            style='height:100%;width:100%'
            :interval='5000'
            indicator-position='none'
            :arrow='rotationImg.length == 1 ? "never":"always"'
        >
            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
                <img :src='item.url' alt style='  width: 100%; height: 100%;object-fit: container;' />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>s
<script>
export default {
    name: 'Rotation',
    props: ['rotationImg', 'picType', 'size'],
    data() {
        return {}
    },
    methods: {},
    // 解决两张图片时,轮播顺序反向
    created() {
        if (this.rotationImg && this.rotationImg.length === 2) {
            this.rotationImg = [...this.rotationImg, ...this.rotationImg]
        }
    },
    mounted() {},
}
</script>
<style lang="less" scoped>
.wanda-rotation {
    height: 100%;
    /deep/ .el-carousel__button {
        background-color: rgba(2, 91, 170, 1);
    }
    /deep/ .el-carousel__arrow {
        background-color: #00000050;
    }
    /deep/ .el-carousel__container {
        height: 100%;
    }
    /deep/ .el-carousel__item {
        text-align: center;
        background: #fff;
    }
    img {
        width: 100%;
    }
}
.rotationFullYlt {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/ .el-carousel__container {
        height: 100% !important;
    }
    .rotationConType {
        height: 100%;
        width: 100%;
        overflow: auto;
        /deep/ .el-carousel__item {
            text-align: center;
            background: #fff;
        }
        img {
            height: 100%;
            object-fit: contain;
        }
    }

    .rotationCon {
        width: 100%;
        height: 100%;
        /deep/ .el-carousel__item {
            text-align: center;
            background: #fff;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
}
</style>
