<!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 type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
    <div id="app">
        <div class="wrapper">
            <!-- 视频播放区域 -->
            <div class="video-container">
                <!-- <video src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4"></video> -->
                <video id="myVideo" :poster="detailInfo.videoCover" controls>
                    <!-- <source src="video1.mp4" crossorigin type="video/mp4"> -->
                    <!-- <source src="test/testVideo.mp4" type="video/mp4"> -->
					 <!-- <source src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4" crossorigin type="video/mp4"> -->
					 <source :src="detailInfo.videoUrl" type="video/mp4">
                    您的浏览器不支持HTML5视频播放
                </video>
            </div>


           

            <!-- 标题与日期 -->
            <div class="info-section">
                <div class="title-wrapper">
                    <img class="title-icon" src="../image/code/video.png">
                    <h3 class="video-title">{{detailInfo.name}}</h3>
                </div>
                <p class="video-date">日期：{{ detailInfo.uploadsDate }}</p>
            </div>

            <!-- 两列图文列表 -->
            <!-- <div class="grid-list">
                <div class="grid-item" v-for="item in 11" :key="item.id">
                    <img class="grid-item-image" src="https://dummyimage.com/340x206" alt="相关内容封面">
                    <p class="grid-item-text">{{ item }}</p>
                </div>
            </div> -->
        </div>
    </div>
</body>
</html>