<!-- 楼层功能右下侧hove的时候出现编辑平面图-->
<template>
    <div class='edit_map'>
        <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
            <span class='edit-icon'>
                <a-icon type='edit' style='color:#fff' />
            </span>
        </el-tooltip>

        <div class='hover-div'>
            <el-tooltip class='item' effect='dark' content='111' placement='left'>
                <span class='icon1'>
                    <a-icon type='form' />
                </span>
            </el-tooltip>
            <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
                <span class='icon2' @click='dump'>
                    <a-icon type='form' />
                </span>
            </el-tooltip>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {}
    },
    methods: {
        dump() {}
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.edit_map {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2;
    .edit-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
        border-radius: 50%;
        text-align: center;
        line-height: 48px;
        display: inline-block;
        cursor: pointer;
        // &:hover + .hover-div {
        //     display: block;
        // }
    }
    .hover-div {
        position: absolute;
        bottom: 58px;
        right: 28px;
        // display: none;
        .icon1 {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
            border: 1px solid rgba(31, 36, 41, 0.2);
            font-size: 16px;
            display: inline-block;
            color: #646c73;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .icon2 {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
            border: 1px solid rgba(31, 36, 41, 0.2);
            font-size: 16px;
            display: inline-block;
            color: #646c73;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            margin-top: 15px;
            cursor: pointer;
        }
    }
}
</style>