{extend name="base/header" /}
{block name="body"}

<style>
    .layui-table .widthtd{ width: 120px;}
    .clss_contnet { margin-top: 10px; font-size: 14px;}
    .clss_contnet img{ max-width: 100%;}
    /* 自定义代码块样式 */
    pre {
        position: relative;
        border-radius: 10px;
        margin: 25px 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .copy-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: none;
        border-radius: 6px;
        color: white;
        padding: 8px 15px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        z-index: 10;
    }

    .copy-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
    }

    .copy-btn:active {
        transform: translateY(0);
    }

    .copy-btn.success {
        background: rgba(46, 204, 113, 0.9);
    }

    .copy-btn i {
        font-size: 16px;
    }

    code {
        font-family: 'Fira Code', 'Consolas', monospace;
        font-size: 15px;
        line-height: 1.5;
    }


</style>
<link rel="stylesheet" href="{STATIC__PATH}/admin/wangedit/github-dark.min.css">
<div style="margin: 0px 10px">
    <table class="layui-table">
        <tbody>
        <tr>
            <td class="widthtd"><strong>视频</strong></td>
            <td colspan="4">

                {if $info.tv_file}
                <div style="text-align: center; width: 100%; height: 300px; margin: 0px auto;" ><video width="100%" height="100%"  controls autoplay>
                     <source width="100%" height="100%" style="object-fit: cover;" src="{$info.tv_file.fileurl}" type="video/mp4">
                    </video>
                </div>
                {/if}
            </td>

        </tr>
        <tr>
            <td class="widthtd"><strong>图文</strong></td>
            <td colspan="4">

                <div class="clss_contnet">
                    {$info.content|raw}

                </div>
            </td>

        </tr>

        </tbody>
    </table>






</div>
{/block}
{block name="script"}
<script src="{STATIC__PATH}/admin/wangedit/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
<script>
    // 初始化代码高亮
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre code').forEach((el) => {
            hljs.highlightElement(el);

            // 创建复制按钮
            const copyBtn = document.createElement('button');
            copyBtn.className = 'copy-btn';
            copyBtn.innerHTML = '<i class="far fa-copy"></i> 复制';

            // 添加到代码块
            const pre = el.parentElement;
            pre.appendChild(copyBtn);

            // 添加复制功能
            copyBtn.addEventListener('click', () => {
                const textArea = document.createElement('textarea');
                textArea.value = el.textContent;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);

                // 显示复制成功反馈
                copyBtn.innerHTML = '<i class="fas fa-check"></i> 已复制!';
                copyBtn.classList.add('success');

                // 3秒后恢复原状
                setTimeout(() => {
                    copyBtn.innerHTML = '<i class="far fa-copy"></i> 复制';
                    copyBtn.classList.remove('success');
                }, 2000);
            });
        });
    });


    layui.use(['buildItems', 'form', 'laydate', 'util','vinfo','element'], function () {

        var layer = layui.layer,table=layui.table,form=layui.form,admin=layui.admin;



    });
    $(".imgclick").click(function (){

        var src = $(this).attr('src'), alt = $(this).attr('alt');
        layer.photos({photos:{data:[{alt:alt,src:src}],start:'0'},anim:5,shade:[0.4,'#000']});
    });

    var callbackdata = function () {

    };

</script>
{/block}