shaogen1995
/
JHHYJST


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="四维时代">
    <meta property="og:title" content="四维时代">
    <meta property="og:description" content="四维时代">
    <meta property="og:image:type" content="image/jpg">
    <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon.png" class="keep">
    <link rel="stylesheet" href="css/oldVer/main0.css">
    <link rel="stylesheet" href="css/main.css?v=2.25">
    <!-- <link rel="stylesheet" href="/CAD/cad.css?v=2.25"> -->
    <script>
        var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
        if (number.indexOf("&") != -1) {
            number = number.substring(0, number.indexOf("&"));
        }
        if (number.indexOf("#") != -1) {
            number = number.substring(0, number.indexOf("#"));
        }
    </script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?73402bb08ff95cb21b7f1673250c532d";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script class="build keep">
        if (window.performance) {
            window.navigationStart = window.performance.timing.navigationStart;
        } else {
            window.navigationStart = Date.now() + 300;
        }
    </script>
    <style>
        #consoleLog {
            width: 120px;
            height: 153px;
            position: absolute;
            right: 0px;
            bottom: 160px;
            z-index: 999999;
            color: black;
            opacity: 0.9;
            font-size: 12px;
        }

        .welcome {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: 100%;
            height: 100%;
        }

        .welcome video {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .8);
        }

        .jumpvideo {
            cursor: pointer;
            position: absolute;
            top: 50px;
            right: 20px;
            z-index: 2;
            background-color: #3498db;
            color: #ffffff;
            padding: 5px 9px;
            display: none;
        }

        .tutorials {
            background-color: rgba(0, 0, 0, .7);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9998;
            width: 100%;
            height: 100%;
        }

        .tutorials .btn {
            position: absolute;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            width: 360px;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .tutorials .btn>div {
            border-radius: 5px;
            width: 75px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            z-index: 2;
            background-color: #3498db;
            color: #ffffff;
        }
        .tutorials .MYPdf{
            z-index: 9999;
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: black;
        }
        /* 后面追加的图片 */
        .myBacImg {
            display: none;
            z-index: 1;
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
        }
        /* pdf */
        .pdfBack{
            cursor: pointer;
            position: fixed;
            z-index: 9999;
            width: 30px;
            height: 30px;
            right: 20px;
            top: 20px;
        }
        .pdfBack>img{
            width: 100%;
            height: 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;
            height: 40vw;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url('./images/add/myBacImg.png');
            background-size: 100% 100%;
        }

        @media screen and (max-width: 600px) {
            /* pdf */
            .pdfBack{
                width: 20px;
                height: 20px;
                right: 5px;
                top: 5px;
                background-color: black;
            }
            .pdfBack>img {
                width: 100%;
                height: 100%;
            }
            .pdfCon{
                width: 100vw;
                padding: 5px;
                background-color: black;
                color: #fff;
            }
            .welcome{
                position: relative;
                background-color: rgba(0, 0, 0, 1);
            }
            /* .welcome video{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            } */
            .tutorials{
                background-color: rgba(0, 0, 0, .8);
            }
            .tutorials .btn {
                width: 80px;
                display: block;
            }
            .tutorials .btn >div {
                margin-bottom: 15px;
            }
            .myBacImg .img{
                background: url('./images/add/imgMo.png');
                background-size: 100% 100%;
                width: 80vw;
                height: 80vw;
            }
            .pinBottom.left{
                transform: translateX(0);
            }
        }
        /* 使用指南隐藏 */
        .nav-icon{
            display: none !important;
        }
    </style>
</head>

<body>
    <div class="welcome">
        <video class="beginVideo" autoplay muted controls src="./video/welcome.mp4"></video>
        <div class="jumpvideo">跳过</div>
    </div>
    <!-- 添加的开始导览 -->
    <div class="tutorials">
        <!-- 点击操作指南出现的界面 -->
        <div class="MYPdf">
            <!-- 返回按钮 -->
            <div class="pdfBack">
                <img src="./images/hotListClose.png" alt="">
            </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>
        </div>
    </div>
    <div id="hot">
    </div>
    <div id="popup">
        <div class="popup-content">

        </div>
        <div id="closepop">close</div>
    </div>
    <div class="sidecontent" style="width:35%">
        <h1><span class="side-client-close">关闭</span></h1>
        <image id="sideimg" style="width:90%" /><br />
        <p id="text">
        </p>
    </div>
    <div id="gui-thumb" style="display: none;"></div>
    <div id="player" style="display: none;">
       <!-- 后面加的图片 -->
       <div class="myBacImg">
        <div class="img">
        </div>
    </div>
    </div>
     
    <div id="gui-parent">
        <div id="memory-info"
            style="display:none; position:fixed; right:10px; top:10px; background-color:#eeeeee; color:#222222; padding:3px 10px 3px 10px; font-size:100%;">
            GPU memory used: <span id="memory-gpu"></span>
        </div>
        <div id="gui-loading" class="message-outer darkGlass" style="display: none;">
            <h2 class="model-title"></h2>
            <div class="message-inner">
                <div class="loadingLogo">
                    <div class="img">
                    </div>
                </div>
                <div class="progressbar" data-perc="100">
                    <div class="label">
                        <div class="perc">0%</div>
                    </div>
                    <div class="bar"><span></span></div>
                </div>
                <div id="loaderCoBrand">
                    <div class="vert-align">
                    </div>
                </div>
                <div class="bottom-logo">
                    <div class="img"></div>
                </div>
                <div class="specialPower">
                    <span class="powered-by">{[{ POWERED_BY }]}</span>
                    &#xA0;<div class="img"></div>
                </div>
            </div>
        </div>
        <div id="gui" style="display: none;">
            <div id="vrOff">
                <img id="vrOffImg" src="images/vrOffImg.png" alt="">
            </div>
            <div id="hotListWrap">
                <div id="hotListTitle">
                    <div>
                        <span id="hotListText">热点列表</span>
                        <img id="hotListIcon" src="images/hotlist.png" alt="">
                    </div>

                </div>
                <div id="hotListContent">
                    <ul id="myHot1" style="display: block;">三违类事故厅</ul>
                    <ul id="myHot2">技能缺乏类事故厅</ul>
                    <ul id="myHot3">第三方损坏管道类事故厅</ul>
                    <ul id="myHot4">设备缺陷类事故厅</ul>
                    <ul id="myHot5">自然灾害事故厅</ul>
                    <!-- <ul>
                    </ul> -->
                </div>
                <div id="hotListBottom">
                    <img id="hotListClose" src="images/hotListClose.png" alt="">
                </div>
            </div>
            <div class="pinTop left">
                <div id="model-title">
                    <div class="title-row">
                        <div id="title-toggle">
                            <a>
                                <i class="icon icon-dpad-left"></i>
                            </a>
                        </div>
                        <div id="title-container-wrapper" rel="tooltip" data-placement="bottom" data-html="true">
                            <div class="title-container  meta-toggle">
                                <div class="co-brand">
                                    {[{ PRESENTED_BY }]}<span class="title" id="cobrandTitle"></span>
                                </div>
                                <div id="title-logo">
                                    <i></i>
                                </div>
                                <div id="gui-name" class="titleText"></div>
                                <a id="more-hint"><i class="icon icon-dpad-down"></i></a>
                                <a id="less-hint"><i class="icon icon-dpad-up"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="meta-info-wrapper">
                    <div id="meta-info" class="darkGlass">
                        <div id="meta-description"></div>
                        <div class="contact-info">
                            <i class="icon icon-user pull-left"></i>
                            &#xA0;<div id="contact-data"></div>
                        </div>
                        <div class="address">
                            <i class="icon icon-pin"></i>
                            <span id="addressTxt"></span>
                        </div>
                        <div id="tag-toggles" class="menu-toggles hidden">
                            <span>{[{ MATTERTAG_CONTENT }]}</span>
                            <div id="tag-inputs" class="menu-radios">
                                <div id="show-tag" class="menu-radio-show">
                                    <input id="radio-tag-show" type="radio" name="tags" value="show">
                                    <label for="radio-tag-show">{[{ SHOW }]}</label>
                                </div>
                                <div id="hide-tag" class="menu-radio-hide">
                                    <input id="radio-tag-hide" type="radio" name="tags" value="hide">
                                    <label for="radio-tag-hide">{[{ HIDE }]}</label>
                                </div>
                            </div>
                        </div>
                        <div id="labels-toggles" class="menu-toggles hidden">
                            <span>Labels</span>
                            <div id="labels-inputs" class="menu-radios">
                                <div id="show-label" class="menu-radio-show">
                                    <input id="radio-labels-show" type="radio" name="labels" value="show">
                                    <label for="radio-labels-show">Show</label>
                                </div>
                                <div id="hide-label" class="menu-radio-hide">
                                    <input id="radio-labels-hide" type="radio" name="labels" value="hide">
                                    <label for="radio-labels-hide">Hide</label>
                                </div>
                            </div>
                        </div>
                        <div id="share-origin" class="hidden">
                            <hr>
                            <div>
                                <i class="icon icon-ext-link"></i>
                                <div id="share-link-wrapper"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pinBottom-container">
                <div class="pinBottom center">
                    <div id="view-controllers">
                        <!-- <div id="gui-modes-dollhouse" class="darkGlass">
                                <span class="mode">{[{ DOLLHOUSE }]}</span>
                            </div> -->
                        <!-- <div id="gui-modes-floorplan" class="darkGlass">
                                <span class="mode">{[{ FLOOR_PLAN }]}</span>
                            </div> -->
                    </div>
                </div>
                <!-- <div class="pinBottom zoomPanel">
                        <div id="gui-zoomin" class="buttonZoom buttonZoomIn buttonZoomEnabled" data-placement="top">
                            <div class="buttonZoomContent">
                                <a>
                                    <i rel="tooltip" title="{[{ ZOOM_IN }]}" class="icon icon-plus"></i>
                                </a>
                            </div>
                        </div>
                        <div id="gui-zoomout" class="buttonZoom buttonZoomOut buttonZoomEnabled" data-placement="top">
                            <div class="buttonZoomContent">
                                <a>
                                    <i rel="tooltip" title="{[{ ZOOM_OUT }]}" class="icon icon-minus"></i>
                                </a>
                            </div>
                        </div>
                    </div> -->
                <div class="pinBottom left">
                    <div class="viewContainer">
                        <!-- <div id="pullTab" class="ui-icon darkGlass">
                                <a>
                                    <i rel="tooltip" title="{[{ OPEN_HIGHLIGHTS }]}" class="icon icon-dpad-up"></i>
                                </a>
                            </div> -->
                        <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
                            <a>
                                <img rel="tooltip" src="images/play.png" width="24" height="24"
                                    data-original-title="播放">
                            </a>
                        </div>
                        <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
                            <a>
                                <img src="images/play.png" width="24" height="24">
                            </a>
                        </div>
                        <div id="pause" class="ui-icon" style="display: none;">
                            <a>
                                <img rel="tooltip" title="暂停" src="images/pause.png" width="24" height="24">
                            </a>
                        </div>
                        <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
                            <a>
                                <i rel="tooltip" title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
                            </a>
                        </div>
                        <!-- <div id="gui-modes-inside" class="ui-icon">
                                <a>
                                    <i rel="tooltip" title="{[{ EXPLORE_3D_SPACE }]}" class="icon icon-inside"></i>
                                </a>
                            </div> -->
                        <!-- <div id="gui-modes-outside" class="ui-icon">
                                <a>
                                    <i rel="tooltip" title="{[{ VIEW_DOLLHOUSE }]}" class="icon icon-dollhouse"></i>
                                </a>
                            </div> -->
                        <div id="gui-modes-map" class="ui-icon double active">
                            <div data-original-title="导览" id="pullTab" rel="tooltip" title="">
                                <img class="icon icon-inside" src="images/auto.png" title="导览" />
                            </div>
                            <div data-original-title="热点列表" id="hotList" rel="tooltip" title="" style="display: none">
                                <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
                            </div>
                            <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip" title="" class="">
                                <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
                            </div>
                            <div data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip" title="" class="">
                                <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
                            </div>
                            <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="">
                                <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
                            </div>
                            <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none;">
                                <img class="icon icon-inside" src="images/VR.png" title="VR" />
                            </div>
                            <div data-original-title="消除外壳" id="gui-remove-face" rel="tooltip" title=""
                                style="display: none; float: left;">
                                <img class="icon icon-inside" src="images/face.jpg" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pinBottom right hideTarget">
                    <div class="rightViewContainer clearfix">
                        <div class="gui-floor">
                            <div class="gui-floor-title"></div>
                            <div class="gui-floor-icon"><span class="gui-floor-number"></span></div>
                            <!-- <i class="icon icon-dpad-up"></i> -->
                            <div class="container"></div>
                        </div>
                        <div id="volume" class="ui-icon wide">
                            <a>
                                <img src="images/Volume btn_on.png" width="24" height="24">
                            </a>
                        </div>
                        <div id="vr" class="ui-icon wide hidden" style="display: none;">
                            <a>
                                <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
                            </a>
                        </div>
                        <div id="sharing" class="ui-icon wide hidden" style="display: none;">
                            <a>
                                <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
                            </a>
                        </div>
                        <div id="gui-fullscreen" class="ui-icon wide" data-placement="top" rel="tooltip"
                            title="{[{ VIEW_FULLSCREEN }]}">
                            <a>
                                <i class="icon icon-fullscreen"></i>
                            </a>
                        </div>
                        <div id="gui-fullscreen-exit" class="ui-icon wide" data-placement="top" rel="tooltip"
                            title="{[{ EXIT_FULLSCREEN }]}" style="display: none;">
                            <a>
                                <i class="icon icon-fullscreen-exit"></i>
                            </a>
                        </div>
                        <div class="pull-right terms terms2">
                            <a>{[{ TERMS }]}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="drawer-container">
                <div id="drawer" class="fullWidth">
                    <div class="frame-container darkGlass">
                        <div id="scrollFrame" class="frame">
                            <ul id="thumb-container" class="slidee"></ul>
                        </div>
                        <div class="scrollbar" id="scroller">
                            <div class="handle"></div>
                        </div>
                    </div>
                </div>
                <div id="playHead">
                    <div id="status">
                        <span class="curIdx">1</span>
                        of <span class="totalSteps"></span>
                    </div>
                    <div id="progressBar"></div>
                </div>
            </div>
            <div id="myCompany">
                <img src="./images/btm_logo.png" alt="">
                <span>提供技术支持</span>
            </div>
        </div>
        <div class="webvr-popup" style="display:none">
            <div class="messaging">
                <div class="page p1">
                    <div class="title">{[{ WEBVR_FOR_DAYDREAM }]}</div>
                    <img class="image device-headset-side">
                    <div class="enter-button">{[{ WEBVR_ENTER_WEBVR }]}</div>
                    <span class="hrule"></span>
                    <div class="alt-help">
                        <span class="open-with-app">{[{ VR_APP_OPEN }]}</span>
                    </div>
                </div>
                <div class="page p2 hidden">
                    <div class="title">{[{ VR_WHAT_YOU_NEED }]}</div>
                    <ul class="tabs">
                        <li class="tabbutton" id="tabcardboard">{[{ VR_GOOGLE_CARDBOARD }]}</li>
                        <li class="tabbutton" id="tabdaydream">{[{ VR_GOOGLE_DAYDREAM }]}</li>
                        <li class="tabbutton" id="tabnative">{[{ VR_APP }]}</li>
                    </ul>
                    <div class="tab-content webvr">
                        <img class="image device-headset">
                        <span class="detail headset">
                            <u>{[{ VR_GOOGLE_CARDBOARD }]}</u>
                        </span>
                        <img class="image device-phone">
                        <span class="detail phone">
                            <p>
                                <b>
                                    <u>{[{ VR_COMPATIBLE_ANDROID }]}</u>
                                </b>
                            </p>
                            <p>{[{ VR_ANDROID_DETAIL }]}</p>
                        </span>
                        <div class="detail daydream-label">{[{ VR_NEED_DAYDREAM }]}</div>
                    </div>
                    <div class="tab-content native hidden">
                        <div class="badge-label">{[{ VR_APP_FOR_ANDROID }]}</div>
                        <span>
                            <img class="image badge-cardboard">
                            <img class="image badge-oculus">
                        </span>
                    </div>
                </div>
            </div>
            <div class="close">
                <a>
                    <i class="icon icon-close"></i>
                </a>
            </div>
            <div class="footer">
                <div class="help">
                    <a>{[{ HELP }]}</a>
                </div>
                <div>|</div>
                <div class="terms">
                    <a>{[{ MATTERPORT_TERMS }]}</a>
                </div>
                <!-- <img src="images/glyph.svg"> -->
            </div>
        </div>
        <div id="gui-spinner" style="display: none;">
            <div class="gui-spinner-icon"></div>
        </div>
        <div id="gui-message" class="message-outer darkGlass" style="display: none;">
            <h2 class="model-title"></h2>
            <div class="message-inner">
                <div class="message-content">
                    <a id="button-play">
                        <i class="icon icon-play"></i>
                    </a>
                    <div class="explore">{[{ EXPLORE_3D_SPACE }]}</div>
                </div>
            </div>
        </div>
        <div id="share-modal" style="display: none;">
            <div class="title">{[{ SOCIAL_SHARING }]}</div>
            <div id="share-outer">
                <div class="share-to">{[{ SHARE_TO }]}</div>
                <div class="share-images">
                    <a id="facebook-share">
                        <div class="share-button">
                            <span class="faceBookLink">
                                <i class="icon icon-facebook"></i>
                            </span>
                        </div>
                    </a>
                    <a id="twitter-share">
                        <div class="share-button">
                            <span class="twitterLink">
                                <i class="icon icon-twitter"></i>
                            </span>
                        </div>
                    </a>
                    <a id="mail-share">
                        <div class="share-button">
                            <span class="mailLink">
                                <i class="icon icon-email"></i>
                            </span>
                        </div>
                    </a>
                </div>
                <div class="direct-link">{[{ SHARE_LINK }]}</div>
                <div id="share-url">
                    <span id="share-url-text"></span>
                </div>
                <div id="copy-success" class="hidden">
                    <span id="copy-success-text">{[{ SHARE_COPIED }]}</span>
                </div>
            </div>
            <div id="share-close" class="close">
                <i class="icon icon-close"></i>
            </div>
        </div>
        <div id="terms-modal" class="fadeOut" style="display: none;">
            <div id="terms-text"></div>
            <div class="close">
                <a>
                    <i class="icon icon-close"></i>
                </a>
            </div>
        </div>
        <div class="gui-error message-outer" style="display: none;">
            <div class="message-inner">
                <div class="message-content">
                    <div class="error-problem-text"></div>
                    <div class="error-solution-text"></div>
                    <div class="error-explanation"></div>
                    <div class="error-actions"></div>
                </div>
            </div>
        </div>
        <div id="help-dialog" class="nav-help-dialog" style="display: none;">
            <div class="nav-help-elements">
                <div class="help-tabs">
                    <div class="navigation-tab">
                        <span>{[{ HELP_NAVIGATION_TAB }]}</span>
                    </div>
                    <div class="more-help-tab">
                        <span>{[{ HELP_MORE_HELP_TAB }]}</span>
                    </div>
                </div>
            </div>
            <div id="navigation-help-wrapper">
                <div id="navigation-help" class="help outer">
                    <div class="interactions left">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <hr>
                        <div class="bottom-info"></div>
                        <img class="keyboard">
                    </div>
                    <div class="interactions middle">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <hr>
                        <div class="bottom-info"></div>
                        <img class="keyboard">
                    </div>
                    <div class="interactions right">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <hr>
                        <div class="bottom-info"></div>
                        <img class="keyboard">
                    </div>
                </div>
            </div>
            <div id="more-help-wrapper">
                <div id="more-help">
                    <div class="ui-instructions more-help-hlr">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-tour">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-dollhouse">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-inside">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-360">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-floors">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-tag">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-vr">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-fullscreen">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-zoom">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                </div>
            </div>
            <div class="close">
                <a>
                    <i class="icon icon-close"></i>
                </a>
            </div>
        </div>
        <div id="vr-modal" class="vr-popup" style="display: none;">
            <div class="title">{[{ VR_VIEW_SPACE }]}</div>
            <div class="outer">
                <div class="inner">
                    <h3 class="vr-popup-title">
                        <span class="show-supported p1">
                            <p class="center">{[{ VR_SHOW_SUPPORTED }]}</p>
                        </span>
                        <span class="show-unsupported p1">{[{ VR_SHOW_UNSUPPORTED }]}</span>
                        <span class="show-ios p1">
                            {[{ VR_SHOW_IOS_1 }]}<br>
                            <br>
                        </span>
                        <span class="show-ios p2">{[{ VR_WHAT_YOU_NEED }]}</span>
                    </h3>
                    <div class="vr-images">
                        <div class="img-container cardboard first">
                            <img class="vr-sm-image first">
                            <div class="vr-img-caption first">
                                <span class="show-supported show-desktop show-ios p1">
                                    <b class="cardboard">{[{ VR_GOOGLE_CARDBOARD }]}</b>
                                    <b class="gearvr hidden">{[{ VR_SAMSUNG_GEAR_VR }]}</b>
                                </span>
                                <span class="show-supported show-unsupported show-desktop p2">{[{ VR_NEED_CARDBOARD
                                    }]}</span>
                                <span class="show-supported show-unsupported show-desktop p3">{[{ VR_NEED_SAMSUNG
                                    }]}</span>
                                <span class="show-ios p2">
                                    <b>{[{ VR_GOOGLE_CARDBOARD }]}</b>
                                    <br>
                                    <br>
                                </span>
                            </div>
                        </div>
                        <div class="front-close">
                            <span class="front-close-x">&#x2715;</span>
                        </div>
                        <div class="img-container gearvr second">
                            <img class="vr-sm-image second">
                            <div class="vr-img-caption second">
                                <span class="show-supported show-desktop p1">
                                    <b>{[{ VR_SAMSUNG_GEAR_VR }]}</b>
                                </span>
                                <span class="show-supported p2">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_ANDROID }]}</b>
                                    </p>
                                    <p>{[{ VR_ANDROID_DETAIL }]}</p>
                                </span>
                                <span class="show-desktop p2">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_IPHONES_1 }]}</b>
                                    </p>
                                    <p>{[{ VR_COMPATIBLE_IPHONES_2 }]}</p>
                                </span>
                                <span class="show-ios p2">
                                    <p>
                                        <b b id="vr-compatible-iphones-3">{[{ VR_COMPATIBLE_IPHONES_3 }]}</b>
                                    </p>
                                    <p id="vr-compatible-iphones-2b">{[{ VR_COMPATIBLE_IPHONES_2 }]}</p>
                                </span>
                                <span class="show-unsupported p1 p2">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_ANDROID }]}</b>
                                    </p>
                                    <p>{[{ VR_ANDROID_DETAIL }]}</p>
                                </span>
                                <span class="show-supported show-unsupported show-desktop p3">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_SAMSUNG }]}</b>
                                    </p>
                                    <p>{[{ VR_SAMSUNG_DETAIL }]}</p>
                                </span>
                            </div>
                        </div>
                        <div class="img-container third">
                            <img class="vr-sm-image third">
                            <div class="vr-img-caption third">
                                <span class="show-supported show-unsupported show-ios p2">
                                    <p>
                                        <b>{[{ VR_APP_FOR_CARDBOARD }]}</b>
                                    </p>
                                    <p>
                                        <a class="cardboardLink">{[{ VR_DOWNLOAD_HERE }]}</a>
                                    </p>
                                </span>
                                <span class="show-desktop p2">
                                    <p>
                                        <b>{[{ VR_ANDROID_DVICES }]}</b>
                                    </p>
                                    <p>{[{ VR_ANDROID_DETAIL }]}</p>
                                </span>
                                <span class="show-supported show-unsupported p3">
                                    <p>
                                        <b>{[{ VR_APP_FOR_SAMSUNG }]}</b>
                                    </p>
                                    <p>
                                        <a class="gearLink">{[{ VR_DOWNLOAD_HERE }]}</a>
                                    </p>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="vr-popup-body">
                        <span class="show-supported p1">
                            <p>
                                <i>{[{ VR_REQUIRE_HEADSET }]}</i>
                            </p>
                            <br>
                            <p>
                                <i>{[{ VR_REDIRECT_TO_STORE }]}</i>
                            </p>
                            <br>
                            <p class="improper-embed hidden">
                                <i>{[{ VR_IMPROPER_EMBED }]}</i>
                            </p>
                        </span>
                        <span class="show-ios p1">
                            <p>
                                <i id="show-ios-2">{[{ VR_SHOW_IOS_2 }]}</i>
                            </p>
                        </span>
                        <span class="show-desktop p1">
                            <p></p>
                            <h3>{[{ VR_OPEN_ANDROID_LINK }]}</h3>
                            <p>
                                <br>
                            </p>
                            <p class="logo-button">
                                <span class="modelLink"></span>
                            </p>
                            <br>
                            <br>
                            <p></p>
                            <h3>{[{ VR_ANDROID_OPTIONS }]}</h3>
                            <p></p>
                        </span>
                    </div>
                </div>
                <div class="vr-buttons">
                    <div class="next-button"></div>
                    <div class="prev-button">{[{ VR_PREVIOUS_CAPS }]}</div>
                    <div class="vr-arrows prev-container">
                        <!-- <img class="prev-arrow" src="images/arrow.png"> -->
                    </div>
                    <div class="vr-arrows next-container">
                        <!-- <img class="next-arrow" src="images/arrow.png"> -->
                    </div>
                </div>
                <div class="vr-page"></div>
                <div class="close">
                    <a>
                        <i class="icon icon-close"></i>
                    </a>
                </div>
            </div>
        </div>
        <div id="quick-blackout" class="quick" style="display: none;"></div>
        <div id="quick-logo" class="quick-brand" style="display: none;">
            <!-- <img src="images/powered-by-4dage.svg"> -->
        </div>
        <div id="hover-top" class="hover-row" style="display: none;"></div>
        <div id="hover-bottom" class="hover-row" style="display: none;"></div>
        <div id="call-to-action">
            <div id="pause-overlay" style="display: none;">
                <div id="pause-icon">
                    <a>
                        <i class="icon icon-pause"></i>
                    </a>
                </div>
            </div>
            <div id="interaction-modal">
                <div id="interaction-modal-inner">
                    <!-- <div class="tour-title">
                            <span class="desktop-title">{[{ DESKTOP_SHORT_CTA }]}</span>
                            <span class="mobile-title">{[{ MOBILE_SHORT_CTA }]}</span>
                        </div>
                        <div class="interaction left">
                            <h2 class="top-info"></h2>
                            <img class="big-image">
                            <hr>
                            <img class="keyboard">
                        </div>
                        <div class="interaction middle">
                            <h2 class="top-info"></h2>
                            <img class="big-image">
                            <hr>
                            <img class="keyboard">
                        </div>
                        <div class="interaction right">
                            <h2 class="top-info"></h2>
                            <img class="big-image">
                            <hr>
                            <img class="keyboard">
                        </div> -->
                    <div class="nav-icon">
                        <img src="images/pc_step1.png" class="icon" title="导览" data-page="1">
                        <div class="nav-help-button">
                            <div class="next-button nav-help-page" data-id="plus"></div>
                            <div class="prev-button nav-help-page"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tag-billboards" style="display: none;"></div>

    </div>

    <script>
        var changeLog = () => {

            if (number == "TEST" && browser.isMobile()) {
                var textarea = document.createElement('textarea');
                textarea.id = "consoleLog";

                document.getElementsByTagName("body")[0].appendChild(textarea);
                var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
                var exchange = function (o) {
                    console["old" + o] = console[o];
                    console[o] = function (str) {
                        console["old" + o](str);
                        var t = document.getElementById("consoleLog").innerHTML;
                        document.getElementById("consoleLog").innerHTML = str + "\n\n" + t;
                    }
                }

                for (var i = 0; i < list.length; i++) {
                    exchange(list[i])
                }

            }

        }
    </script>


    <script src="js/lib/jquery-2.1.1.min.js" class="build keep"></script>
    <script src="js/lib/player-0.0.12.min.js" class="build keep"></script>

    <!-- <script src="js/lib/video.min.js" class="build keep"></script> -->
    <script src="js/Tween.js"></script>
    <!-- <script src="js/app-preheater.js?v=2.25.6-0-gd87e5b1"></script> -->
    <script src="js/SpecialScene.js"></script>
    <script src="js/manage.js"></script>
    <!-- <script src="js/stats.min.js"></script> -->
    <script src="js/Hot.js"></script>
    <script src="js/main_2020_show.js"></script>
    <script src="js/lib/OBJLoader.js"></script>
    <script src="js/shiyou.js"></script>

    <!-- 地图的引入 -->
    <script src="js/bundle.js"></script>
    <script src="js/loadCAD.js"></script>
    <script>
        $('.myBegin').click(() => {
            $('.tutorials').css('display', 'none')
        })
        $('.myOperation').click(() => {
            $('.MYPdf').show()
            // $('.tutorials').css('display','none')
        })
        //pdf里面点击X
        $('.pdfBack').click(()=>{
            $('.MYPdf').hide()
        })
        // 右侧导航点击显示隐藏
        $('#myHot1').click((e) => {
            if (e.target.tagName === 'SPAN') return
            if ($('#myHot1 > li').css('display') === 'none') $('#myHot1 > li').css('display', 'block')
            else $('#myHot1 > li').css('display', 'none')
            $('#myHot2 > li').css('display', 'none')
            $('#myHot3 > li').css('display', 'none')
            $('#myHot4 > li').css('display', 'none')
            $('#myHot5 > li').css('display', 'none')
        })
        $('#myHot2').click((e) => {
            if (e.target.tagName === 'SPAN') return
            $('#myHot1 > li').css('display', 'none')
            if ($('#myHot2 > li').css('display') === 'none') $('#myHot2 > li').css('display', 'block')
            else $('#myHot2 > li').css('display', 'none')
            $('#myHot3 > li').css('display', 'none')
            $('#myHot4 > li').css('display', 'none')
            $('#myHot5 > li').css('display', 'none')
        })
        $('#myHot3').click((e) => {
            if (e.target.tagName === 'SPAN') return
            $('#myHot1 > li').css('display', 'none')
            $('#myHot2 > li').css('display', 'none')
            if ($('#myHot3 > li').css('display') === 'none') $('#myHot3 > li').css('display', 'block')
            else $('#myHot3 > li').css('display', 'none')
            $('#myHot4 > li').css('display', 'none')
            $('#myHot5 > li').css('display', 'none')
        })
        $('#myHot4').click((e) => {
            if (e.target.tagName === 'SPAN') return
            $('#myHot1 > li').css('display', 'none')
            $('#myHot2 > li').css('display', 'none')
            $('#myHot3 > li').css('display', 'none')
            if ($('#myHot4 > li').css('display') === 'none') $('#myHot4 > li').css('display', 'block')
            else $('#myHot4 > li').css('display', 'none')
            $('#myHot5 > li').css('display', 'none')
        })
        $('#myHot5').click((e) => {
            if (e.target.tagName === 'SPAN') return
            $('#myHot1 > li').css('display', 'none')
            $('#myHot2 > li').css('display', 'none')
            $('#myHot3 > li').css('display', 'none')
            $('#myHot4 > li').css('display', 'none')
            if ($('#myHot5 > li').css('display') === 'none') $('#myHot5 > li').css('display', 'block')
            else $('#myHot5 > li').css('display', 'none')
        })
        //点击开始导览播放音乐
        $('.myBegin').click(()=>{
            manage.switchBgmState(true)
            cad.setSign({x:8.682999610900879,y:21.323999404907227},267.7512054767344)
        })
        //点击跳过关闭视频
        $('.jumpvideo').click(()=>{
            $('.beginVideo')[0].pause()
        })
    </script>


</body>

</html>