tremble 4 年之前
父节点
当前提交
53518c67c4

+ 2 - 0
web/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "swiper": "^6.7.5",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

二进制
web/public/favicon.ico


二进制
web/public/static/images/musicoff.png


二进制
web/public/static/images/musicon.png


二进制
web/public/static/images/shareoff.png


二进制
web/public/static/images/shareon.png


+ 0 - 853
web/public/static/index.html

@@ -1,853 +0,0 @@
-<!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;
-        }
-    
-    </style>
-</head>
-
-<body>
-    <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>
-    <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">
-                        <h2 id="loaderCoBrandName">四维时代提供技术支持</h2>
-                    </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>
-                    </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"
-                style="width:100%;position:absolute;bottom:20px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);">
-                四维时代提供技术支持
-            </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 class="cad">
-            <div id="cad"></div>
-        </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/myShow.js"></script>
-    <script src="js/SpecialScene.js"></script>
-    <script src="js/manage.js"></script>
-    
-    <script src="js/stats.min.js"></script>
-    <script src="js/overlay.js"></script>
-    <!-- <script src="js/stats.min.js"></script> -->
-    
-    
-    <script src="js/main_2020_show.js"></script>
-    
-    <script src="/CAD/bundle.js"></script>
-
-
-    <script src="js/loadCAD.js"></script>
-    
-    
-    
-</body>
-
-</html>

+ 8 - 12
web/public/static/js/manage.js

@@ -141,17 +141,13 @@ Manage.prototype.loadAudio = function() { //相关:g_tourAudio \  g_playAudio
     
     
     
-    $("#volume").find("a").on("click", ()=> { 
+    // $("#volume div").on("click", ()=> { 
+    //     console.log('====================================');
+    //     console.log(1111);
+    //     console.log('====================================');
          
-        if($("#volume img")[0].src.indexOf("btn_on.png")>-1)
-        { 
-            this.switchBgmState(true); 
-        }
-        else if($("#volume img")[0].src.indexOf("btn_off.png")>-1)
-        {
-            this.switchBgmState(false);    
-        }
-    }) 
+        
+    // }) 
 
     
     
@@ -163,14 +159,14 @@ Manage.prototype.switchBgmState = function(state){
         console.log('begin play bgm');
         g_play = 1; 
         g_playAudio = g_bgAudio;
-        $("#volume a img").attr("src", "./images/Volume btn_off.png")
+        $("#volume img").attr("src", "./static/images/musicoff.png")
         $("#volume").attr("title", "关闭声音");
         g_tourAudio && g_tourAudio.pause()
     }
     var paused = function(){ 
         g_play = 0;
         g_playAudio == g_bgAudio && (g_playAudio =  null)
-        $("#volume a img").attr("src", "./images/Volume btn_on.png")
+        $("#volume img").attr("src", "./static/images/musicon.png")
         $("#volume").attr("title", "打开声音");
     }
     

二进制
web/src/assets/images/icon/musicoff.png


二进制
web/src/assets/images/icon/musicon.png


二进制
web/src/assets/images/icon/shareoff.png


二进制
web/src/assets/images/icon/shareon.png


二进制
web/src/assets/images/project/mb_hostpot.jpg


二进制
web/src/assets/images/project/mobile.jpg


二进制
web/src/assets/images/project/qrcode.png


二进制
web/src/assets/videos/4k.mp4


+ 134 - 13
web/src/components/hotspot/image.vue

@@ -1,29 +1,69 @@
 <template>
-  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/hotspot_bg.jpg')})`}">
-    <div class="title">{{hotspot.title}}</div>
-    <div class="img-con">
-      <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
-      <img :src="hotspot.images[active]" alt="">
-      <span @click="active+=1" :class="{noshow:active>=hotspot.images.length - 1}">下一张</span>
+    <div v-if="!isMobile" class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/hotspot_bg.jpg')})`}">
+      <div class="title">{{hotspot.title}}</div>
+      <div class="img-con">
+        <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
+        <img :src="hotspot.images[active]" alt="">
+        <span @click="active+=1" :class="{noshow:active>=hotspot.images.length - 1}">下一张</span>
+        <ul class="pagna">
+          <li v-for="(item,i) in hotspot.images" :class="{active:i==active}" :key="i"></li>
+        </ul>
+      </div>
+      <div class="desc" v-html="hotspot.content">
+      </div>
+    </div>
+    <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
+      <div class="title">{{hotspot.title}}</div>
+      <swiper ref="listSwiper" class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
+        <swiper-slide  class="swiper-slide" v-for="(item,index) in hotspot.images" :key="index">
+          <div class="sl-item">
+            <img :src="item">
+          </div>
+        </swiper-slide>
+      </swiper>
       <ul class="pagna">
-        <li v-for="(item,i) in hotspot.images" :class="{active:i==active}" :key="i"></li>
+        <li v-for="(item,i) in hotspot.images" :class="{active: i == mbactive}" :key="i"></li>
       </ul>
+      <div class="desc">
+        <p>简介:</p>
+        <div v-html="hotspot.content"></div>
+      </div>
     </div>
-
-    <div class="desc" v-html="hotspot.content">
-    </div>
-  </div>
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import 'swiper/swiper-bundle.css'
+
 export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
   props:['hotspot'],
   data(){
     return {
-      active:0
+      active:0,
+      mbactive:0
     }
   },
-  methods:{
+  computed:{
+    swiperOption() {
+      let that = this
+      return {
+        slidesPerView: 'auto',
+        autoplay: false,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        loop: false,
+        on:{
+          slideChangeTransitionEnd:function () {
+            that.mbactive = this.realIndex
+            console.log(that.mbactive);
+          }
+        }
+      }
+    }
   }
 }
 </script>
@@ -105,4 +145,85 @@ export default {
     overflow-y: auto;
   }
 }
+
+@position:62px;
+.mbimages{
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% calc(100% + @position);
+  background-position: 0 -@position;
+  text-align: center;
+  .title{
+    width: 90%;
+    padding: 10px;
+    display: inline-block;
+    color: #DBA761;
+    font-weight: bold;
+    font-size: 18px;
+    background: #BC1515;
+    border-radius: 60px;
+    margin: 20px auto;
+  }
+  .swiper-wrapper {
+    height: 250px;
+    padding: 0;
+    .swiper-slide  {
+      width: 85%;
+      transform-style: preserve-3d;
+      position: relative;
+      height: 100%;
+      margin: 0 10px;
+      .sl-item{
+        position: absolute;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        transform: translateX(-50%);
+        width: 100%;
+        overflow: hidden;
+        border: 4px solid #BC1515;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        background-color: #757477;
+        >img{
+          height: 100%;
+          transform: translateX(-50%);
+          position: absolute;
+          left: 50%;
+        }
+      }
+    }
+  }
+  .pagna{
+    text-align: center;
+    z-index: 999;
+    >li{
+      width: 40px;
+      height: 4px;
+      background: #BC1515;
+      display: inline-block;
+      margin: 0 4px;
+      &.active{
+        background: #DBA761;
+      }
+    }
+  }
+  .desc{
+    color: #DBA761;
+    text-align: left;
+    width: 85%;
+    margin: 20px auto 0;
+    p{
+      font-size: 16px;
+      font-weight: bold;
+    }
+    div{
+      font-size: 14px;
+      margin-top: 10px;
+      line-height: 1.5;
+      max-height: 50vh;
+      overflow-y: auto;
+    }
+  }
+}
 </style>

+ 1 - 1
web/src/components/hotspot/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import UIHotspot from './index.vue'
 
 
-const Hotspot = Vue.extend(UIHotspot)
+let Hotspot = Vue.extend(UIHotspot)
 
 
 let hotspotInstance = ''

+ 16 - 0
web/src/components/hotspot/index.vue

@@ -66,4 +66,20 @@ export default {
     cursor: pointer;
   }
 }
+
+@media only screen and (max-width: 487px) {
+.hotspotcon{
+  .close{
+    position: fixed;
+    top: unset;
+    right: unset;
+    bottom: 4%;
+    transform: translateX(-50%);
+    left: 50%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+  }
+}
+}
 </style>

+ 36 - 5
web/src/components/kangri/index.vue

@@ -1,29 +1,59 @@
 <template>
   <div id="kangri" class="kangri">
     <div class="kangricon">
-      <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
-      <img :src="require('@/assets/images/project/cards-bg.png')" alt="">
-      <span @click="active+=1" :class="{noshow:active>=2}">下一张</span>
+      <span @click="active-=1,autoplay()" :class="{noshow:active<=0}">上一张</span>
+      <video ref="video" autoplay>
+        <source :src="require(`@/assets/videos/${videocon[active].video}`)" type="video/mp4">
+      </video> 
+      <span @click="active+=1,autoplay()" :class="{noshow:active>=2}">下一张</span>
     </div>
   </div>
 </template>
 
 <script>
+let videocon = [
+  {
+    id:'1',
+    video:'chen.mp4'
+  },
+  {
+    id:'2',
+    video:'li.mp4'
+  },
+  {
+    id:'3',
+    video:'mao.mp4'
+  }
+]
 export default {
   data(){
     return {
-      active:''
+      videocon,
+      active:0
     }
   },
   methods:{
     changeVideo(item){
       this.active = item.id
+    },
+    autoplay(){
+      this.$nextTick(()=>{
+        this.$refs.video.play()
+      })
     }
+  },
+  mounted(){
+    this.autoplay()
   }
 }
 </script>
 
 <style lang="less" scoped>
+.noshow{
+  opacity: 0!important;;
+  pointer-events: none!important;;
+}
+
 .kangri{
   width: 100%;
   height: 100%;
@@ -39,9 +69,10 @@ export default {
    justify-content: center;
    pointer-events: none!important;
    align-items: center;
-   >img{
+   >video{
      width: 50%;
      height: 100%;
+     pointer-events: auto;
    }
    >span{
       pointer-events: auto;

+ 0 - 130
web/src/components/popupLayout/Broadcast.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div class="ui-broadcast" @click="close">
-      <img class="close"  @click="close" :src="require('@/assets/images/icon/close.png')">
-      <div class="ui-con" @click.stop>
-        <div class="img-con img-k">
-          <iframe :src="item.link" frameborder="0"></iframe>
-        </div>
-      </div>
-     <div class="full" v-if="isFull" @click.stop>
-      <img class="full-btn"  @click="close" :src="`${$cdn}images/close-full.png`" alt="">
-    </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data(){
-    return {
-      isFull:false
-    };
-  },
-  mounted(){
-    console.log(this.item);
-  },
-  methods:{
-    close(){
-      this.$hideBroadcast()
-      this.$bus.$emit('showHover',true)
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import '../../assets/style/globalVars.less';
-
-.ui-broadcast{
-  height: 100%;
-  position: fixed;
-  z-index: 9999;
-  top: 0;
-  left: 0;
-  width: 100%;
-  .close{
-    position: absolute;
-    top: 85px;
-    right: 10%;
-    width: 36px;
-    cursor: pointer;
-    z-index: 9999;
-  }
-  .ui-con{
-    top: 48%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    text-align: center;
-    width: 60%;
-    position: relative;
-    font-size: 0;
-    border-radius: 10px;
-    overflow: hidden;
-    box-sizing: border-box;
-    iframe,video{
-      width: 100%;
-      min-height: 550px;
-    }
-    img{
-      width: 100%;
-      height: auto;
-    }
-  }
-  .full{
-    width: 100%;
-    height: 100%;
-    z-index: 999;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    iframe{
-      width: 100%;
-      height: 100%;
-    }
-    .full-btn{
-      width: 50px;
-      position: absolute;
-      right: 12px;
-      top: 30px;
-      cursor: pointer;
-    }
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .ui-broadcast{
-  .close{
-    position: absolute;
-    bottom: 57px;
-    top: unset;
-    left: 50%;
-    right: unset;
-    transform: translateX(-50%);
-    width: 22px;
-    cursor: pointer;
-    z-index: 9999;
-  }
-  .ui-con{
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    border-radius: 0;
-    transform: none;
-    .img-con{
-      height: 100%;
-      iframe,video{
-        width: 100%;
-        height: 100%;
-      }
-      img{
-        width: 100%;
-        height: auto;
-      }
-    }
-  }
- 
-}
-}
-</style>

+ 135 - 0
web/src/components/popupLayout/Share.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="wrapper">
+    <div class="ui-broadcast" @click.stop>
+      <img class="close"  @click="close" :src="require('@/assets/images/project/close.png')">
+      <div class="title">
+        <p>红色热土不朽丰碑</p>
+        <p>中国共产党领导广东新民主主义</p>
+        <p>革命历史革命展</p>
+      </div>
+      <div class="qrcode">
+        <img :src="require('@/assets/images/project/qrcode.png')">
+      </div>
+      <div class="share_btn">
+        复制分享链接
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return {
+    };
+  },
+  mounted(){
+  },
+  methods:{
+    close(){
+      this.$hideShare()
+      this.$bus.$emit('closeShare')
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  .ui-broadcast{
+    width: 530px;
+    position: fixed;
+    padding: 48px 0;
+    z-index: 9999;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    background: rgba(188, 21, 21, 0.9);
+    text-align: center;
+    .title{
+      font-size: 30px;
+      line-height: 1.5;
+      font-weight: bold;
+      color: #DBA761;
+    }
+    .qrcode{
+      width: 260px;
+      margin: 32px auto 44px;
+      >img{
+        width: 100%;
+      }
+    }
+    .share_btn{
+      font-size: 20px;
+      width: 260px;
+      cursor: pointer;
+      padding: 10px 40px;
+      color: #FFFFFF;
+      border-radius: 76px;
+      border: 2px solid #DBA761;
+      margin: 0 auto;
+    }
+    .close{
+      position: absolute;
+      top: -20px;
+      cursor: pointer;
+      right: -20px;
+      width: 40px;
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+ .wrapper{
+   z-index: 99999;
+  .ui-broadcast{
+    width: 88%;
+    position: fixed;
+    padding: 28px 0 30%;
+    top: 46%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    background: rgba(188, 21, 21, 0.9);
+    text-align: center;
+    .title{
+      font-size: 18px;
+      line-height: 1.5;
+      font-weight: bold;
+      color: #DBA761;
+    }
+    .qrcode{
+      width: 60%;
+      margin: 20px auto 30px;
+      >img{
+        width: 100%;
+      }
+    }
+    .share_btn{
+      font-size: 16px;
+      width: 60%;
+      cursor: pointer;
+      padding: 10px 40px;
+      color: #FFFFFF;
+      border-radius: 76px;
+      border: 2px solid #DBA761;
+      margin: 0 auto;
+    }
+    .close{
+      position: absolute;
+      top: unset;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: pointer;
+      right: unset;
+      bottom: 6%;
+      width: 40px;
+    }
+  }
+}
+
+}
+</style>

+ 12 - 12
web/src/components/popupLayout/index.js

@@ -1,10 +1,10 @@
 import Vue from 'vue'
 import UILoading from './Loading.vue'
-import UIBroadcast from './Broadcast.vue'
+import UIShare from './Share.vue'
 
 
 const Loading = Vue.extend(UILoading)
-const Broadcast = Vue.extend(UIBroadcast)
+const Share = Vue.extend(UIShare)
 
 
 let loadingInstance = ''
@@ -32,25 +32,25 @@ export function $hideLoading() {
 
 
 
-let broadcastInstance = ''
-export function $showBroadcast(data={}) {
-    if (broadcastInstance) {
+let shareInstance = ''
+export function $showShare(data={}) {
+    if (shareInstance) {
         return
     }
-    broadcastInstance = new Broadcast({
+    shareInstance = new Share({
         data
     }).$mount()
 
-    document.body.appendChild(broadcastInstance.$el)
+    document.body.appendChild(shareInstance.$el)
 
     Vue.nextTick(() => {
-        broadcastInstance.show = true
+        shareInstance.show = true
     })
 }
 
-export function $hideBroadcast() {
-    if (broadcastInstance) {
-        document.body.removeChild(broadcastInstance.$el)
-        broadcastInstance = ''
+export function $hideShare() {
+    if (shareInstance) {
+        document.body.removeChild(shareInstance.$el)
+        shareInstance = ''
     }
 }

+ 50 - 2
web/src/components/welcome/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="welcome">
-      <img class="bg" :src="require('@/assets/images/project/pc.jpg')" alt="">
+      <img class="bg" :src="require(`@/assets/images/project/${isMobile?'mobile.jpg':'pc.jpg'}`)" alt="">
       <span class="btn" >
         <img draggable="false" @click="$emit('close')" :src="require('@/assets/images/project/btn.png')" alt="">
       </span>
@@ -37,8 +37,8 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #000;
   z-index: 999;
+  font-size: 0;
   transition: all ease 0.3s;
   .bg{
     width: 100%;
@@ -118,4 +118,52 @@ export default {
       display: inline-block;
     }
   }
+
+@media only screen and (max-width: 487px) {
+  .welcome{
+ 
+  .bg{
+   
+  }
+  .btn{
+    position: absolute;
+    bottom: 70px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 99;
+    font-size: 0;
+    color: #FCD67B;
+    border-radius: 44px;
+    display: inline-block;
+    cursor: pointer;
+    letter-spacing: 2px;
+    max-width: 200px;
+    width: 50%;
+    >img{
+      width: 100%;
+    }
+  }
+}
+.logo{
+  .l{
+    position: fixed;
+    top: 10px;
+    width: 60%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+  }
+
+  .r{
+    position: fixed;
+    top: unset;
+    right: unset;
+    bottom: 20px;
+    width: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+}
 </style>

+ 0 - 571
web/src/data/collection.js

@@ -1,571 +0,0 @@
-const data = [
-  /*
-  第一展区
-  name 藏品名称
-  describe 藏品描述
-  type 1-> 第一展区,以此类推
-  id 序号
-  link 三维建模链接地址
-  img 藏品封面图
-  */
-  {
-      name: '第三次党代会精神传达提纲',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 1,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
-      img: '1'
-  },
-
-  {
-      name: '政治工作部宣传处呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 2,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
-      img: '2'
-  },
-
-  {
-      name: '总政治部呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 3,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
-      img: '3'
-  },
-
-  {
-      name: '四川省总队通报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 4,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
-      img: '4'
-  },
-
-  {
-      name: '四川省总队通令',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 5,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
-      img: '5'
-  },
-
-  {
-      name: '帮助武警部队发展农副业生产的通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 6,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
-      img: '6'
-  },
-
-  {
-      name: '中共中央批转公安部党组通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 7,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
-      img: '7'
-  },
-
-  {
-      name: '一份交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 8,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
-      img: '8'
-  },
-
-  {
-      name: '交接书封面',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 9,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
-      img: '9'
-  },
-
-  {
-      name: '四川省公安厅文件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 10,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
-      img: '10'
-  },
-
-  {
-      name: '领导管理体制的决定',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 11,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
-      img: '11'
-  },
-
-  {
-      name: '执勤部队交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 12,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
-      img: '12'
-  },
-
-  {
-      name: '传真电报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 13,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
-      img: '13'
-  },
-
-  {
-      name: '政治部批复',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 14,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
-      img: '14'
-  },
-
-  {
-      name: '关于平息成都严重骚乱事件的战斗报告',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 15,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
-      img: '15'
-  },
-
-  {
-      name: '关于赴藏执行紧急任务的指示',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 16,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
-      img: '16'
-  },
-
-  {
-      name: '关于持续兴起学习贯彻党的十九大精神',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 17,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
-      img: '17'
-  },
-
-  {
-      name: '关于认真学习贯彻党的十九大精神的实施方案',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 18,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
-      img: '18'
-  },
-
-  {
-      name: '十九大精神阶段性总结',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 19,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
-      img: '19'
-  },
-
-  {
-      name: '十九大宣传工作措施',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 20,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
-      img: '20'
-  },
-
-  /*
-  第二展区
-  name 藏品名称
-  describe 藏品描述
-  type 1-> 第一展区,以此类推
-  id 序号
-  link 三维建模链接地址
-  img 藏品封面图
-  */
- {
-  name: '第三次党代会精神传达提纲',
-  describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-  type: 2,
-  id: 1,
-  link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
-  img: '1'
-  },
-
-  {
-      name: '政治工作部宣传处呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 2,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
-      img: '2'
-  },
-
-  {
-      name: '总政治部呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 3,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
-      img: '3'
-  },
-
-  {
-      name: '四川省总队通报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 4,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
-      img: '4'
-  },
-
-  {
-      name: '四川省总队通令',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 5,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
-      img: '5'
-  },
-
-  {
-      name: '帮助武警部队发展农副业生产的通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 6,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
-      img: '6'
-  },
-
-  {
-      name: '中共中央批转公安部党组通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 7,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
-      img: '7'
-  },
-
-  {
-      name: '一份交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 8,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
-      img: '8'
-  },
-
-  {
-      name: '交接书封面',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 9,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
-      img: '9'
-  },
-
-  {
-      name: '四川省公安厅文件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 10,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
-      img: '10'
-  },
-
-  {
-      name: '领导管理体制的决定',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 11,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
-      img: '11'
-  },
-
-  {
-      name: '执勤部队交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 12,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
-      img: '12'
-  },
-
-  {
-      name: '传真电报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 13,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
-      img: '13'
-  },
-
-  {
-      name: '政治部批复',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 14,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
-      img: '14'
-  },
-
-  {
-      name: '关于平息成都严重骚乱事件的战斗报告',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 15,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
-      img: '15'
-  },
-
-  {
-      name: '关于赴藏执行紧急任务的指示',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 16,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
-      img: '16'
-  },
-
-  {
-      name: '关于持续兴起学习贯彻党的十九大精神',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 17,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
-      img: '17'
-  },
-
-  {
-      name: '关于认真学习贯彻党的十九大精神的实施方案',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 18,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
-      img: '18'
-  },
-
-  {
-      name: '十九大精神阶段性总结',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 19,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
-      img: '19'
-  },
-
-  {
-      name: '十九大宣传工作措施',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 20,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
-      img: '20'
-  },
-
-  /*
-      第三展区
-      name 藏品名称
-      describe 藏品描述
-      type 1-> 第一展区,以此类推
-      id 序号
-      link 三维建模链接地址
-      img 藏品封面图
-      */
-  {
-      name: '第三次党代会精神传达提纲',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 1,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
-      img: '1'
-  },
-
-  {
-      name: '政治工作部宣传处呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 2,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
-      img: '2'
-  },
-
-  {
-      name: '总政治部呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 3,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
-      img: '3'
-  },
-
-  {
-      name: '四川省总队通报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 4,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
-      img: '4'
-  },
-
-  {
-      name: '四川省总队通令',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 5,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
-      img: '5'
-  },
-
-  {
-      name: '帮助武警部队发展农副业生产的通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 6,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
-      img: '6'
-  },
-
-  {
-      name: '中共中央批转公安部党组通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 7,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
-      img: '7'
-  },
-
-  {
-      name: '一份交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 8,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
-      img: '8'
-  },
-
-  {
-      name: '交接书封面',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 9,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
-      img: '9'
-  },
-
-  {
-      name: '四川省公安厅文件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 10,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
-      img: '10'
-  },
-
-  {
-      name: '领导管理体制的决定',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 11,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
-      img: '11'
-  },
-
-  {
-      name: '执勤部队交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 12,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
-      img: '12'
-  },
-
-  {
-      name: '传真电报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 13,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
-      img: '13'
-  },
-
-  {
-      name: '政治部批复',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 14,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
-      img: '14'
-  },
-
-  {
-      name: '关于平息成都严重骚乱事件的战斗报告',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 15,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
-      img: '15'
-  },
-
-  {
-      name: '关于赴藏执行紧急任务的指示',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 16,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
-      img: '16'
-  },
-
-  {
-      name: '关于持续兴起学习贯彻党的十九大精神',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 17,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
-      img: '17'
-  },
-
-  {
-      name: '关于认真学习贯彻党的十九大精神的实施方案',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 18,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
-      img: '18'
-  },
-
-  {
-      name: '十九大精神阶段性总结',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 19,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
-      img: '19'
-  },
-
-  {
-      name: '十九大宣传工作措施',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 20,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
-      img: '20'
-  },
-
-]
-
-export default { data }

+ 6 - 5
web/src/mixins/index.js

@@ -1,11 +1,10 @@
 import Vue from 'vue'
 import browser from '@/utils/browser'
 
-// import {
-//   $showLoading,
-//   $showBroadcast,
-//   $hideBroadcast,
-// } from '@/components/popupLayout'
+import {
+  $showShare,
+  $hideShare,
+} from '@/components/popupLayout'
 
 import {$showHotspot,$hideHotspot } from '@/components/hotspot/index.js'
 
@@ -19,6 +18,8 @@ Vue.mixin({
         }
     },
     methods: {
+      $showShare,
+      $hideShare,
       $showHotspot,
       $hideHotspot
       // $showLoading,

+ 3 - 3
web/src/pages/Home.vue

@@ -83,8 +83,8 @@ import UIKangri from '@/components/kangri';
 
 
 
-const HuiYi = Vue.extend(UIHuiyi)
-const KangRi = Vue.extend(UIKangri)
+let HuiYi = Vue.extend(UIHuiyi)
+let KangRi = Vue.extend(UIKangri)
 
 export default {
   name: 'Home',
@@ -105,7 +105,7 @@ export default {
  
   data(){
       return {
-          showWelcome: false,
+          showWelcome: true,
           hotspots:''
       }
   },

+ 106 - 23
web/src/views/gui/menu.vue

@@ -81,7 +81,7 @@
                 title="navigation icon"
               />
             </div>
-            
+
             <div
               data-original-title="全景漫游"
               id="gui-modes-inside"
@@ -177,11 +177,9 @@
             </div>
           </div>
         </div>
-
       </div>
     </div>
 
-
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
         <div class="gui-floor">
@@ -191,14 +189,24 @@
           </div>
           <div class="container"></div>
         </div>
-        <div id="volume" class="ui-icon wide">
-          <a>
-            <img
-              :src="require('@/assets/images/Volume btn_on.png')"
-              width="24"
-              height="24"
-            />
-          </a>
+        <div class="bgandshare">
+          <div id="volume" @click="switchBGM" class="ui-icon wide">
+            <div>
+              <img :src="require('@/assets/images/icon/musicon.png')" />
+            </div>
+          </div>
+
+          <div @click="isShare = !isShare">
+            <div>
+              <img
+                :src="
+                  require(`@/assets/images/icon/share${
+                    !isShare ? 'on' : 'off'
+                  }.png`)
+                "
+              />
+            </div>
+          </div>
         </div>
         <div id="vr" class="ui-icon wide hidden" style="display: none">
           <a>
@@ -250,31 +258,46 @@
 </template>
 
 <script>
-
 export default {
-  components:{
-  },
+  components: {},
   data() {
     return {
       isGuide: true,
-     
+      isShare: false,
     };
   },
-  computed: {
-   
+  computed: {},
+  watch:{
+    isShare(newVal){
+      if (newVal) {
+        this.$showShare()
+      }
+    }
+  },
+  mounted(){
+      this.$bus.$on('closeShare',()=>{
+        this.isShare = false
+      })
   },
   methods: {
-  
+    switchBGM() {
+      if ($("#volume img")[0].src.indexOf("on.png") > -1) {
+        window.manage.switchBgmState(true);
+      } else if ($("#volume img")[0].src.indexOf("off.png") > -1) {
+        window.manage.switchBgmState(false);
+      }
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
-@wh:90px;
-@margin:10px;
-#play, #pause{
+@wh: 90px;
+@margin: 10px;
+#play,
+#pause {
   margin-right: @margin;
-  img{
+  img {
     width: @wh;
     height: @wh;
   }
@@ -301,4 +324,64 @@ export default {
   }
 }
 
-</style>
+.bgandshare {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > div {
+    background: none !important;
+    width: @wh!important;
+    cursor: pointer;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+@media only screen and (max-width: 487px) {
+  @wh: 70px;
+  #play,
+  #pause {
+    margin-right: @margin;
+    img {
+      width: @wh;
+      height: @wh;
+    }
+  }
+  #gui-modes-map {
+    > div {
+      margin-right: @margin;
+      > img {
+        width: @wh;
+        height: @wh;
+        display: block;
+      }
+      .active {
+        display: none;
+      }
+    }
+    .active {
+      > img {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+    }
+  }
+
+  .bgandshare {
+    display: flex;
+    position: fixed;
+    top: 12%;
+    right: 6px;
+    flex-direction: column;
+    > div {
+      width: @wh!important;
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>