gulp-bird/tools/createQRcode/createQRcode.html

bird-v2

<li class="bird-tools__item bird-tools_qrcode">
    <a class="bird-tools__btn_qrcode" href="javascript:void(0)" onclick="birdToolsShowQRcode()">
        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="70%" height="70%">
            <defs>
                <style/>
            </defs>
            <path d="M131.176 610.808H63.964V946.87h403.274v-67.213H131.176v-268.85zm0-470.49h336.062V73.103H63.964V409.17h67.212V140.316zm761.745 739.34H556.857v67.212h403.277V610.808H892.92v268.85zm0-806.554H556.857v67.213H892.92V409.17h67.213V73.103H892.92zM63.965 543.594h896.17V476.38H63.964v67.215z"
                fill="#fff" />
        </svg>
    </a>
    <div class="bird-tools_qrcode-content" onclick="birdToolsHideQRcode()"></div>
</li>

<style>
    /* 二维码 */
    .bird-tools_qrcode-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.68);
        z-index: 9999999;

        visibility: hidden;
        opacity: 0;
    }

    .bird-tools_qrcode-content.show {
        visibility: visible;
        opacity: 1;
        transition: all linear .2s;
    }

    .bird-tools_qrcode-content img {
        min-width: 40vw;
        max-width: 70vw;
        max-height: 70vw;
    }
</style>
<script>
    var qrcode = document.querySelector('.bird-tools_qrcode-content');
    function birdToolsShowQRcode() {
        qrcode.classList.add('show');
    }
    function birdToolsHideQRcode() {
        qrcode.classList.remove('show');
    }

</script>