sssss - niczhu/seckill GitHub Wiki

    body a {
        text-decoration: none;
        color: black;
    }

    section#quick-goto {
        text-align: left;
        padding: 10px;
        background-color: #fff;
        margin: 5px 0;
    }

    section#quick-goto div {
        display: flex;
        justify-content: flex-start;
    }

    section#quick-goto div a {
        margin-right: 10px;
    }

    /* 标题 */
    .detail-container #context-title {
        background-color: #fff;
        margin: 10px 0;
        padding: 10xp;
    }

    #context-title .title {
        margin-bottom: 10px;
        padding: 10px 15px 10px 15px;
        font-size: 18px;
        font-weight: bold;
    }

    .title-sub-box {
        display: flex;
        /* text-align: center; */
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 10px 40px;
        padding-bottom: 20px;
    }

    #position,
    #publish-time {
        display: inline-block;
        margin-right: 10px;
        padding: 10px 15px;
    }

    #position {
        flex: 2
    }

    #publish-time {
        flex: 5
    }

    #share-bt {
        flex: 1;
        float: right;
        cursor: pointer;
        margin-right: 20px;
        border-radius: 15px;
        font-size: 14px;
        text-align: center;
        align-items: center;
        width: 30px;
        padding: 5px 5px;
        background-color: rgb(121, 248, 248);
    }

    #qrcode-modal {
        display: none;
        position: fixed;
        top: 10%;
        right: 5%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 5px;
    }

    #qrcode-modal img {
        width: 100%;
        height: 100%;
    }

    #qrcode-modal .qr-close {
        font-size: 12px;
        cursor: pointer;
    }

    /* 内容详情 */
    section #context-detail {
        margin-top: 10px;
        background-color: #fff;
        margin: 10px 0;
        padding: 20px;
    }

    #p-vedio,
    #p-context,
    #p-flow {
        margin-top: 10px;
        padding: 0 50px;
    }

    @media screen and (max-width:678px) {
        .title-sub-box {
            flex-wrap: wrap;
            margin: 15px 0;
      
        }
        #position{
            order: 1;
            width: 100%;
text-align: left;

        }
        #publish-time {
            order: 2;
            width: 100%;
text-align: right;
            padding: 0;
        }
        #share-bt{
            /* width: auto; */
            /* display: block; */
            order: 3;
     
            margin-right: 0;
            width: 100%;
text-align: right;
        }

        #p-vedio,
        #p-context,
        #p-flow {
            margin-top: 10px;
            padding: 0;
        }
    }
</style>

<section>
    <div class="detail-container">

        <section title="文章主题">
            <div id="context-title">
                <div class="title">主题: <i>这里是demo的主题</i></div>
                <div class="title-sub-box">
                    <div id="position">当前位置：首页/文档</div>
                    <div id="publish-time">当前时间: 2023-12-14</div>
                    <div id="share-bt" onclick="showQRCode()">转发分享</div>
                </div>
            </div>
        </section>

        <section title="详细内容">
            <div id="context-detail" class="">
                <div id="p-vedio">
                    <div>标题一：java</div>
                    <div>标题一内容：java技术包括很多，jdk，多线程，并发，锁等</div>
                </div>
                <div id="p-flow">
                    <div>标题二：jvm虚拟机</div>
                    <div>标题二内容：jvm虚拟机运行时分为：方法区，堆，本地方法栈，java栈，程序计数器；...</div>
                </div>
                <div id="p-context">
                    <div>标题三：MySQL</div>
                    <div>标题三内容，MySQL 中的 "read-ahead" 机制是用于优化磁盘IO性能的一种技术。...</div>
                </div>
            </div>
        </section>

        <div>&lt;div&gt;这是一个&lt;div&gt;标签&lt;/div&gt;&lt;/div&gt;</div>

    </div>
</section>

<div id="qrcode-modal">
    <img src="qrcode.png" alt="QR Code">
    <div class="qr-close" onclick="hideQRCode()">关闭</div>
</div>

<script>
    function scrollToSection(sectionId) {
        const section = document.getElementById(sectionId);
        section.scrollIntoView({ behavior: 'smooth' });
    }

    function showQRCode() {
        const modal = document.getElementById('qrcode-modal');
        modal.style.display = 'block';
    }

    function hideQRCode() {
        const modal = document.getElementById('qrcode-modal');
        modal.style.display = 'none';
    }
</script>