增加操作指南内容

index.html

@@ -113,7 +113,14 @@
             background-color: #3498db;
             color: #ffffff;
         }
-
+        .tutorials .MYPdf{
+            z-index: 9999;
+            display: none;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+        }
         /* 后面追加的图片 */
         .myBacImg {
             display: none;
@@ -124,8 +131,46 @@
             top: 0;
             left: 0;
         }
-
-
+        /* pdf */
+        .pdfBack{
+            cursor: pointer;
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            right: 20px;
+            top: 20px;
+            background: url('./images/hotListClose.png');
+            background-size: 100% 100%;
+        }
+        .pdfCon{
+            padding: 20px;
+            font-size: 16px;
+            color: black;
+            width: 1200px;
+            margin: 0 auto;
+            height: 100%;
+            background-color: #fff;
+            overflow-y: auto;
+        }
+        .pdfCon .title{
+            text-align: center;
+        }
+        .pdfCon .title p {
+            text-indent: 0;
+        }
+        .pdfCon a {
+            color: blue;
+        }
+        .pdfCon p {
+            margin: 4px 0;
+            text-indent: 2em;
+        }
+        .pdfCon img {
+            display: block;
+            width: auto;
+            max-width: 100%;
+            margin: 10px auto;
+        }
         .myBacImg .img {
             position: fixed;
             width: 40vw;
@@ -138,6 +183,21 @@
         }
 
         @media screen and (max-width: 600px) {
+            /* pdf */
+            .pdfBack{
+                width: 20px;
+                height: 20px;
+                right: 5px;
+                top: 5px;
+                background: url('./images/hotListClose.png') black;
+                background-size: 100% 100%;
+            }
+            .pdfCon{
+                width: 100vw;
+                padding: 5px;
+                background-color: black;
+                color: #fff;
+            }
             .welcome{
                 position: relative;
                 background-color: rgba(0, 0, 0, 1);
@@ -181,6 +241,99 @@
     </div>
     <!-- 添加的开始导览 -->
     <div class="tutorials">
+        <!-- 点击操作指南出现的界面 -->
+        <div class="MYPdf">
+            <!-- 返回按钮 -->
+            <div class="pdfBack"></div>
+            <!-- 内容 -->
+            <div class="pdfCon">
+                <div class="title">
+                    <h2>安全事故警视厅线上平台</h2>
+                    <h4>使用说明书</h4>
+                    <p>国家管网集团北方管道有限责任公司</p>
+                    <p>2021年12月</p>
+                </div>
+                <div class="inst">
+                    <h3>一、展示内容说明</h3>
+                    <p>本次线上展厅制作，主要材料依据为提供的图文资料。制作了三维展厅场景、开头动画、三维沙盘模型、语音解说、漫画制作。</p>
+                    <p>制作三维展厅场景7个厅，包括序厅、结束厅、5个事故厅；开头动画12秒；三维沙盘模型9个；语音解说51条，每个案例事故经过语音解说；漫画制作3个，锦西输油站“8.28”锅炉干烧事故、太阳升输油站“9.11”储油罐冒顶事故、高压试验违规操作触电死亡。</p>
+                    <h4>1.1 开头动画</h4>
+                    <p>制作开头动画，使用炫彩演绎表现，结合安全事故主题，对警示作用进行突出展示。</p>
+                    <h4>1.2 三维展厅场景</h4>
+                    <p>制作三维展厅场景7个厅，包括序厅、结束厅、5个事故厅。对展厅进行布局、风格设计、场景搭建以及平面渲染，作为事故案例的载体框架，增强展现效果。</p>
+                    <h4>1.3 三维沙盘模型</h4>
+                    <p>还原事故发生的生产场景，更身临其境的感受事故发生过程。</p>
+                    <h4>1.4 语音解说</h4>
+                    <p>还原事故发生的生产场景，更身临其境的感受事故发生过程。</p>
+                    <h4>1.5 漫画展示</h4>
+                    <p>还原事故发生的生产场景，更身临其境的感受事故发生过程。</p>
+                    <br/>
+                    <h3>二、浏览工具说明</h3>
+                    <p>进入展厅后，屏幕下方会出现两个工具栏，包含8个工具，为展厅的快速操作工具。</p>
+                    <img src="./images/pdf/1.png" alt="">
+                    <h4>2.1 自动导览工具</h4>
+                    <p>该工具可以自动切换7个展厅，参观者会依据设置好的漫游点依次浏览每个展厅，无需人工选择干预。</p>
+                    <img src="./images/pdf/2.png" alt="">
+                    <h4>2.2 展厅切换工具</h4>
+                    <p>点击该工具会在下方显示展厅名称，可通过点击展厅名称实现快速跳转，直接把视角转移到相应展厅。</p>
+                    <img src="./images/pdf/3.png" alt="">
+                    <h4>2.3 热点列表工具</h4>
+                    <p>点击该工具会在界面右侧展示五个事故厅名称，点击展厅名称可展开该展厅内所有事故热点列表，点击热点名称可快速跳转到该热点并展开事故详细介绍。</p>
+                    <img src="./images/pdf/4.png" alt="">
+                    <h4>2.4 全景漫游工具</h4>
+                    <p>该工具为默认浏览视角展示，可在展厅内部漫游浏览，通过点击屏幕上热点标识进行视角切换。</p>
+                    <img src="./images/pdf/5.png" alt="">
+                    <h4>2.5 迷你模型工具</h4>
+                    <p>此工具为展厅整体的三维视角展示，可以通过旋转、平移观看展厅整体布置，也可点击任一展厅直接跳转到展厅内部进行浏览。</p>
+                    <img src="./images/pdf/6.png" alt="">
+                    <h4>2.6 俯视图工具</h4>
+                    <p>此工具为展厅整体的俯视图展示，可查看展厅的位置及布局，也可点击任一展厅直接跳转到展厅内部进行浏览。</p>
+                    <img src="./images/pdf/7.png" alt="">
+                    <h4>2.7 声音工具</h4>
+                    <p>进入展厅后默认开启背景音乐，点击该工具可关闭背景音乐。</p>
+                    <img src="./images/pdf/8.png" alt="">
+                    <h4>2.8 全图工具</h4>
+                    <p>点击该工具可全屏显示界面，全屏状态下可点击“还原”工具或“ESC”键恢复原始界面大小。</p>
+                    <img src="./images/pdf/9.png" alt="">
+                    <br/>
+                    <h3>三、浏览操作说明</h3>
+                    <h4>3.1 展厅链接</h4>
+                    <p><a href="https://culture.4dage.com/JHWeb/index.html#/?m=1150_1" target="_blank">https://culture.4dage.com/JHWeb/index.html#/?m=1150_1</a>（用搜狗浏览器或者谷歌浏览器打开）</p>
+                    <h4>3.2 开场视频</h4>
+                    <p>打开链接后，首先是12秒的展厅开场动画，页面下方有三个功能选项：分别为音量调节、全屏显示和更多操作。</p>
+                    <img src="./images/pdf/10.png" alt="">
+                    <h5>（1）音量调节</h5>
+                    <p>点击该工具可调节开场视频音量大小。</p>
+                    <img src="./images/pdf/11.png" alt="">
+                    <h5>（2）全屏显示</h5>
+                    <p>点击该工具可全屏显示视频，全屏状态下点击“还原”工具或“ESC”键即可恢复到原始展示界面。</p>
+                    <img src="./images/pdf/12.png" alt="">
+                    <h5>（3）更多操作</h5>
+                    <p>点击该工具可展开更多操作，包括下载和画中画。</p>
+                    <img src="./images/pdf/13.png" alt="">
+                    <h5>&emsp;&emsp;1）点击“下载”工具即可下载开场视频，指定路径后开始下载。</h5>
+                    <img src="./images/pdf/14.png" alt="">
+                    <h5>&emsp;&emsp;2）点击“画中画”工具可将视频以画中画模式播放，关闭背景界面后视频仍可继续播放，点击画中画界面上的还原工具即可恢复到原始界面。</h5>
+                    <img src="./images/pdf/15.png" alt="">
+                    <h4>3.3 进入展厅</h4>
+                    <p>动画结束后点击“开始浏览”即可进入展厅。</p>
+                    <img src="./images/pdf/16.png" alt="">
+                    <h4>3.4 浏览移动</h4>
+                    <p>双击地板可朝点击方向移动浏览。</p>
+                    <h4>3.5 视角方向</h4>
+                    <p>长按左键，拖动鼠标进行方向变化。鼠标向右拖动，视角方向向左变化；鼠标向左拖动，视角方向向右变化。同时在界面右上角的全局地图中会显示当前位置及当前视角方向。</p>
+                    <img src="./images/pdf/17.png" alt="">
+                    <h4>3.6 案例浏览</h4>
+                    <p>可以直接通过浏览移动观看墙面案例内容（图片、文字描述）；也可通过点击案例热点进行详细信息浏览。</p>
+                    <img src="./images/pdf/18.png" alt="">
+                    <p>点击热点后，会自动播放案例描述，同时出现案例的展现形式（图片、视频），可点击相应展现方式进行浏览。</p>
+                    <p>（1）在图文浏览模式下，可通过左右箭头进行图片翻页展示，同时在图片上单击鼠标右键可选择保存或打印图片。</p>
+                    <img src="./images/pdf/19.png" alt="">
+                    <p>（2）在视频浏览模式下，可以调节视频音量，全屏播放视频、画中画模式播放视频和下载视频。</p>
+                    <img src="./images/pdf/20.png" alt="">
+                </div>
+            </div>
+        </div>
         <div class="btn">
             <div class="myOperation">操作指南</div>
             <div class="myBegin">开始导览</div>
@@ -980,9 +1133,13 @@
             $('.tutorials').css('display', 'none')
         })
         $('.myOperation').click(() => {
-            alert('暂未开放')
+            $('.MYPdf').show()
             // $('.tutorials').css('display','none')
         })
+        //pdf里面点击X
+        $('.pdfBack').click(()=>{
+            $('.MYPdf').hide()
+        })
         // 右侧导航点击显示隐藏
         $('#myHot1').click((e) => {
             if (e.target.tagName === 'SPAN') return