<template>
    <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
        <rotation :rotationImg='rotationImg' style='height:600px;'></rotation>
        <span class='close' @click='close'>X</span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            mode: 'top',
            rotationImg: [
                require('@/assets/imgs/survey_pop1.png'),
                require('@/assets/imgs/survey_pop2.png'),
                require('@/assets/imgs/survey_pop1.png')
            ]
        }
    },
    methods: {
        showModal() {
            this.dialogVisible = true
        },
        close() {
            this.dialogVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
.close {
    display: block;
    position: absolute;
    right: -50px;
    font-size: 20px;
    color: #fff;
    top: -120px;
    z-index: 10;
    cursor: pointer;
}
</style>
<style lang='less'>
.el-dialog {
    height: 600px;
    position: relative;
    .el-dialog__header {
        padding: 0;
    }
    .el-dialog__body {
        padding: 0;
    }
}
</style>