<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit:cover">
    <title>安全常识</title>
    <script src="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
    <script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
    <div id="app">
        <div class="wrapper">
            <!-- 标题与日期 -->
            <div class="info-section">
                <div class="title-wrapper">
                    <h3 class="video-title">{{detailInfo.name}}</h3>
                    <p class="video-date">日期：{{detailInfo.uploadsDate}}</p>
                </div>
                
            </div>

            <!-- 新增：附件链接区域 -->
            <div class="attachment-section">
                <div class="attachment-list">
                    <div class="attachment-link" @click="previewFile">
                        <van-icon name="paperclip" size="0.32rem" />
                        <span>{{detailInfo.fileName}}</span>
                    </div>
                </div>
            </div>
            
            <!-- 两列图文列表 -->
            <div style="padding: .2rem .3rem;" v-html="detailInfo.content">
               收快递费了时代峰峻
            </div>
        </div>

        <!-- PDF预览模态框 -->
        <div class="pdf-modal" id="pdfModal">
            <!-- <div class="control-btn" onclick="closePreview()">关闭</div> -->
            <div class="pdf-container" style="padding-top: 1rem;">
                <div id="pdfViewer"></div> <!-- PDF内容渲染区 -->
                <div class="pdf-controls">
                    <div class="control-btn" onclick="prevPage()">上一页</div>
                    <span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页</span>
                    <div class="control-btn" onclick="nextPage()">下一页</div>

                    <!-- 新增缩放按钮 -->
                <!--   <div class="control-btn" onclick="zoomIn()">放大</div>
                    <div class="control-btn" onclick="zoomOut()">缩小</div>
                    <span>缩放：<span id="currentScale">120%</span></span> -->

                </div>
                <van-icon name="cross" class="close-btn" onclick="closePreview()" />
            </div>
        </div>


    </div>
</body>
</html>