<template>
    <div class="imgs">
        <el-carousel :height="height + 'px'" direction="vertical">
            <el-carousel-item v-for="item in imgUrls" :key="item.id">
                <el-row>
                    <el-col :span="24">
                        <img :src="item.val" ref="height" @load="imgload" style="width: 100%">
                    </el-col>
                </el-row>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data () {
        return {
            height: '',
            imgUrls:[
                {id: 0, val: require('./img/1.png')},
                {id: 1, val: require('./img/2.png')},
                {id: 2, val: require('./img/3.png')},
                {id: 3, val: require('./img/4.png')}
            ]
        }
    },
    created() {
    },
    mounted(){
        this.imgload();
        window.addEventListener('resize',()=>{
            this.height = this.$refs.height[0].height;
            this.imgload();
        }, false)
    },
    methods: {
        imgload() {
            this.$nextTick(()=>{
                this.height = this.$refs.height[0].height;
                console.log(this.$refs.height[0].height);
            })
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .imgs{
        background: #fff;
        height: 560px;
        box-sizing: border-box;
        margin: 40px 0 0 40px;
        padding: 40px 50px 40px 50px;
        overflow: hidden;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 16px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
