<template>
    <div class="imgs">
        <div style="width: 100%">
            <el-carousel :height="height + 'px'">
                <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>
    </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')}
            ],
            val: '聚焦全球科技创新资源，打造战略性新兴产业高地。学院将充分利用国际交流合作资源优势，将国际高校优质资源引进固安，促进国际高校与相关专业、相关行业、相关企业的项目对接，促进固安全球技术商业化中心建设' +
                    '“政企校”人才培养战略合作签约，未来三方将积极推动高校与重点招商企业的合作向纵深发展，通过职业培训、人才订单班、国际交流合作等方式，加快推动校企合作、产教融合，实现优势互补、资源共享，促进人才与经济社会协调发展。'
        }
    },
    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: 520px;
        box-sizing: border-box;
        margin: 40px 0 0 40px;
        padding: 40px 50px 40px 50px;
        overflow: hidden;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

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

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