<template>
    <div class='picDia'>
        <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
            <!-- <img
                src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                alt
            />-->
            <rotation v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:700px;'></rotation>
            <span class='close' @click='close'>X</span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            mode: 'top',
            rotationImg: []
        }
    },
    methods: {
        showModal(params) {
            this.dialogVisible = true
            this.rotationImg = params
        },
        close() {
            this.dialogVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
.picDia {
    img {
        width: 100%;
        height: 100%;
    }
}
.close {
    display: block;
    position: absolute;
    right: -40px;
    font-size: 20px;
    color: #fff;
    top: -30px;
    z-index: 10;
    cursor: pointer;
}
</style>
<style lang='less'>
.picDia {
    .el-dialog {
        height: 90%;
        margin-top: 5vh !important;
        position: relative;
        .el-dialog__header {
            padding: 0;
        }
        .el-dialog__body {
            padding: 0;
        }
    }
}
</style>