<template>
    <div class="myDivider">
        <a-tooltip>
            <template slot="title">
                点击可预览
            </template>
            <img :src="url" alt="" class="img-box" @click="()=>visible=true">
        </a-tooltip>
        <div v-show="visible" class="preview-box">
            <a-icon type="close" class="close-btn" @click="()=>visible=false" />
            <div class="modal-img-box">
                <img :src="url" alt="" class="img-box-big">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['url'],
        components: {
        },
        data() {
            return {
                visible: false,
            }
        },
        components: {
        },
        mounted() {
        },
        methods: {

        }
    }
</script>
<style scoped>
    .img-box {
        max-width: 200px;
        max-height: 100px;
        min-width: 150px;
        cursor: pointer;
    }

    .preview-box {
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0, 0.6);
        top: 0;
        left: 0;
    }

    .close-btn {
        font-size: 45px;
        color: #fff;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .modal-img-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .img-box-big {
        max-width: 70%;
        max-height: 600px;
        min-width: 300px;
    }
</style>