style: --

css/main.css

@@ -2750,16 +2750,13 @@ body, html {
     color: #fff
 }
 
-.model-title {
-    top: 19%;
-    display: block;
-    padding: 0 4px;
-    font-size: 38px;
-    letter-spacing: .75px;
-    color: rgba(255, 255, 255, 1);
-    margin: 0;
-    hyphens: auto;
-    line-height: 45px
+#model-title {
+    padding: 0 20px;
+    height: 42px;
+    width: max-content;
+    min-width: 100px;
+    color: #fff;
+    background: url('../images/infoBg.png') no-repeat center / 100% 100%;
 }
 
 #loaderCoBrand {
@@ -3356,10 +3353,6 @@ a.hasHover:hover, a:active {
     padding-right: 30px
 }
 
-.right .ui-icon.wide {
-    padding-left: 30px
-}
-
 .mobile-only {
     display: none
 }
@@ -3390,12 +3383,12 @@ a.hasHover:hover, a:active {
 }
 
 .pinTop.left {
-    left: 50%;
-    z-index: 99;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    transform: translateX(-50%);
+    position: absolute;
+    z-index: 9997;
+    top: 10px;
+    left: 10px;
+    height: 42px;
+    color: #fff;
 }
 
 .pinTop.right {
@@ -3439,26 +3432,31 @@ a.hasHover:hover, a:active {
     -webkit-transition: all .5s
 }
 
+.rightViewContainer {
+    display: flex;;
+}
+
 .pinBottom.center {
     left: 50%;
-    width: 0;
-    z-index: 50
+    bottom: 30px;
+    transform: translateX(-50%);
+    z-index: 50;
 }
 
 .pinBottom.right {
     float: right;
     right: 0;
+    padding: 10px 0;
     text-shadow: 0 0 1px rgba(0, 0, 0, .6);
     z-index: 50;
-    bottom: 10px;
+    bottom: 30px;
 }
 
 .pinBottom.left {
     z-index: 50;
-    background: rgba(0, 0, 0, 0.2);
     border-radius: 10px;
-    left: 10px;
-    bottom: 10px;
+    left: 0;
+    bottom: 30px;
 }
 
 .pinBottom.left .icon {
@@ -3466,28 +3464,39 @@ a.hasHover:hover, a:active {
 }
 
 .viewContainer {
-    float: left;
-    position: relative
+    display: flex;
+    align-items: center;
 }
 
-.viewContainer>div {
-    float: left
+.copyright {
+  white-space: nowrap;
+  font-size: 12px;
+  color: white;
+  text-align: center;
+}
+
+.describe {
+    display: none !important;
+}
+
+#gui-modes-map .active img.hide,
+#gui-modes-map .opened img.hide {
+    display: block !important;
+}
+#gui-modes-map .active img,
+#gui-modes-map .opened img {
+    display: none;
 }
 
 #gui-modes-map>div[rel] {
     float: left;
-    width: 94px;
-    height: 48px;
+    width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
 }
 
-#gui-modes-map>div[rel]:hover, .pinBottom.right .rightViewContainer>div:hover, #play:hover {
-    background: rgba(0, 0, 0, 0.25);
-}
-
 /*#gui-modes-map > div:hidden{ border-top-right-radius: 10px; border-bottom-right-radius:10px; }*/
 
 .zoomPanel {
@@ -3662,11 +3671,6 @@ a.hasHover:hover, a:active {
     padding: 10px
 }
 
-.gui-floor, .viewContainer {
-    float: left;
-    position: relative
-}
-
 .bottomShare.shareContainer .icoContainer {
     width: 30.33%
 }
@@ -3689,10 +3693,6 @@ a.hasHover:hover, a:active {
     content: '\e600'
 }
 
-.viewContainer>div {
-    float: left
-}
-
 .gui-floor {
     width: 48px;
     margin-right: 10px;
@@ -3792,20 +3792,13 @@ a.hasHover:hover, a:active {
 }
 
 .pinBottom.right .ui-icon {
-    padding: 0;
-    margin-right: 0px;
-    float: left;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    margin-right: 10px;
+    width: 70px;
+    text-align: center;
 }
 
-#volume>a, #gui-fullscreen>a, #gui-fullscreen-exit>a {
-    display: flex;
-    width: 48px;
-    height: 48px;
-    justify-content: center;
-    align-items: center;
+.pinBottom.right .ui-icon img {
+    width: 44px;
+    height: 44px;
 }
 
 #volume {
@@ -3878,8 +3871,7 @@ a.hasHover:hover, a:active {
 
 #play, #pause {
     position: relative;
-    width: 94px;
-    height: 48px;
+    width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -3917,9 +3909,10 @@ a.hasHover:hover, a:active {
     text-align: center
 }
 
-#gui-modes-map div img {
-    width: 24px;
-    height: 24px;
+#gui-modes-map div img,
+#pause img, #play img {
+    width: 44px;
+    height: 44px;
 }
 
 #pullTab i {
@@ -3936,10 +3929,6 @@ a.hasHover:hover, a:active {
     width: 100%
 }
 
-#gui-parent #pullTab.opened, #gui-parent #gui-modes-map>div.active {
-    background: rgba(0, 0, 0, 0.3);
-}
-
 #pullTab.opened .icon-dpad-up:before {
     content: "\e601"
 }
@@ -3973,11 +3962,12 @@ a.hasHover:hover, a:active {
     transition-property: height, bottom;
     transition-duration: .5s;
     pointer-events: all;
+    background-color: #911212;
     z-index: 50
 }
 
 #drawer.open {
-    height: 130px
+    height: 140px
 }
 
 #drawer-container.drawerOpen #drawer.open {
@@ -3989,31 +3979,31 @@ a.hasHover:hover, a:active {
 }
 
 #drawer.open.noScroll {
-    height: 107px
+    height: 137px
 }
 
 #drawer-container.drawerOpen #drawer.open.noScroll, #drawer.open.noScroll.playing {
-    height: 113px
+    height: 143px
 }
 
 #gui .pinBottom.open {
-    bottom: 140px
+    bottom: 170px
 }
 
 #gui .pinBottom.open.noScroll {
-    bottom: 117px
+    bottom: 147px
 }
 
 #gui .pinBottom.open.playing {
-    bottom: 150px
+    bottom: 180px
 }
 
 #gui .pinBottom-container.drawerOpen .pinBottom.open.noScroll.playing {
-    bottom: 127px;
+    bottom: 157px;
 }
 
 #gui .pinBottom.open.noScroll.playing {
-    bottom: 135px;
+    bottom: 165px;
 }
 
 #gui #drawer.playing, #gui .pinBottom.playing {
@@ -4043,10 +4033,11 @@ a.hasHover:hover, a:active {
 }
 
 .frame {
-    width: calc(100% - 20px);
-    height: 97px;
-    margin: 9px 10px;
-    float: left
+    padding-top: 8px;
+    width: 100%;
+    height: 132px;
+    float: left;
+    position: relative;
 }
 
 .frame.noScroll {
@@ -4054,7 +4045,7 @@ a.hasHover:hover, a:active {
 }
 
 .frame .slidee {
-    margin: 0;
+    margin: 0 auto;
     padding: 0;
     height: 100%;
     list-style: none
@@ -4068,24 +4059,20 @@ a.hasHover:hover, a:active {
 }
 
 .frame .slidee li .overlay {
-    position: absolute;
-    bottom: 2px;
-    left: 2px;
-    width: 130px;
-    height: 20px;
-    padding: 6px;
-    color: #fff;
-    background-color: rgba(0, 0, 0, .7);
+    height: 30px;
+    line-height: 30px;
+    padding: 0;
+    color: #FFF6D2;
     overflow: hidden;
     white-space: nowrap;
-    font-weight: 100;
     text-align: center;
-    line-height: 4px;
     z-index: 100;
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
+    position: absolute;
+    width: 100%;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .frame .slidee li .mark360View, .frame .slidee li .markInsideView {
@@ -4105,13 +4092,14 @@ a.hasHover:hover, a:active {
 }
 
 .frame .slidee li img {
-    border: 2px solid transparent;
-    transition: all .5s
+    border: 3px solid transparent;
+    transition: all .5s;
+    border-radius: 10px;
 }
 
 .frame .slidee li.thumbImg.hasHover>img:hover {
     opacity: 1;
-    border-color: #fff
+    border-color: #FFF6D2;
 }
 
 .playing .frame .slidee li.thumbImg.hasHover>img:hover {
@@ -4131,22 +4119,23 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li.thumbImg.active>img, .frame .slidee li.thumbImg.hasHover.active>img:hover {
     opacity: 1;
-    border-color: #00b4ed
+    border: 2px solid #911212;
+}
+
+.frame .slidee li.thumbImg.active>.overlay, .frame .slidee li.thumbImg.hasHover.active>.overlay:hover {
+    color: #fff6d2;
 }
 
 .scrollbar {
-    width: calc(100% - 10px);
-    margin: 0 5px;
+    width: 100%;
     height: 8px;
     float: left;
-    border-radius: 5px;
-    background: rgba(0, 0, 0, .75)
 }
 
 .scrollbar .handle {
     width: 100px;
     height: 100%;
-    background: rgba(255, 255, 255, .75);
+    background: #fff;
     border-radius: 5px
 }
 
@@ -4170,7 +4159,7 @@ a.hasHover:hover, a:active {
     left: 0;
     transition-property: bottom;
     transition-duration: .5s;
-    background-color: #000;
+    background: #911212;
     z-index: 50
 }
 
@@ -4203,14 +4192,14 @@ a.hasHover:hover, a:active {
 
 #progressBar .step::before {
     content: '';
-    background-color: #575757;
+    background-color: #ffffff;
     width: 100%;
     height: 100%;
     display: block
 }
 
 #progressBar .step.active::before, #progressBar .step.recent::before {
-    background-color: #00b4ed
+    background-color: #d6b970
 }
 
 #progressBar .step.upcoming::before {
@@ -4345,26 +4334,31 @@ a.hasHover:hover, a:active {
 }
 
 @media only screen and (max-width: 487px), (max-height:487px) {
-    #thumb-container .thumbImg img, .frame {
-        height: 77px
+    .frame{
+        height: 107px;
+        display: block;
+    }
+    #thumb-container .thumbImg img{
+        height: 77px;
+        display: block;
     }
     .frame .slidee li, .frame .slidee li .overlay {
-        width: 103px
+        width: 106px
     }
     #drawer-container.drawerOpen #drawer.open.noScroll {
-        height: 94px
+        height: 124px
     }
     #drawer.open.noScroll, #drawer.open.noScroll.playing {
-        height: 88px
+        height: 118px
     }
     .pinBottom-container.drawerOpen.duringTour {
         bottom: 6px
     }
     #gui .pinBottom.open.noScroll {
-        bottom: 93px
+        bottom: 123px
     }
     .pinBottom.open.noScroll.playing {
-        bottom: 108px
+        bottom: 138px
     }
 }
 
@@ -6174,7 +6168,7 @@ a.hasHover.tag-link:hover {
     cursor: text
 }
 
-#meta-info-wrapper, #model-title.fadeOut, .pinTop.left, .pinTop.left.closed #meta-info-wrapper, .pinTop.left.closed #model-title {
+#meta-info-wrapper, #model-title.fadeOut {
     pointer-events: none
 }
 
@@ -6250,11 +6244,6 @@ a.hasHover.tag-link:hover {
     border-radius: 0
 }
 
-#model-title, .title-container {
-    position: relative;
-    height: 38px;
-}
-
 /*.pinTop.left.fadeOut,.pinTop.left.fadeOut #meta-info-wrapper {
     -webkit-transition: all .5s;
     transition: all .5s;
@@ -6262,47 +6251,19 @@ a.hasHover.tag-link:hover {
     pointer-events: none
 }*/
 
-#model-title {
-    font-weight: 100;
-    z-index: 20;
-    opacity: 1;
-    -webkit-transition: all .3s;
-    transition: all .3s;
-    pointer-events: all;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    padding: 0 10px;
-    min-width: 180px;
-}
-
-#model-title:hover {
-    background: rgba(0, 0, 0, 0.5);
-}
-
-#model-title.expand {
-    background: rgba(0, 0, 0, 0.5);
-}
-
 .title-row {
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
+    height: inherit;
 }
 
 #title-container-wrapper {
-    overflow: hidden;
-    width: 100%;
+    height: inherit;
 }
 
 .title-container {
     width: 100%;
+    height: inherit;
     white-space: nowrap;
     display: flex;
-    margin-left: 1px;
-    -webkit-transition: all .4s ease-in-out;
-    transition: all .4s ease-in-out;
-    justify-content: space-between;
     align-items: center;
 }
 
@@ -6310,20 +6271,27 @@ a.hasHover.tag-link:hover {
     cursor: default
 }
 
-#less-hint, #more-hint {
-    font-weight: 400;
-    font-size: 10px;
-}
-
-.title-container #less-hint, .title-container.expand #more-hint, .title-container.no-meta #less-hint, .title-container.no-meta #more-hint, .title-container.share-only #less-hint, .title-container.share-only #more-hint {
-    display: none
+#title-toggle {
+    display: none;
 }
-
-.title-container #more-hint, .title-container.expand #less-hint {
+#more-hint,
+#less-hint {
     display: flex;
     align-items: center;
-    height: 100%;
-    padding-left: 12px;
+    justify-content: center;
+    margin-left: 20px;
+    padding-left: 20px;
+    width: 19px;
+    height: 50%;
+    box-sizing: content-box;
+    border-left: 1px solid #fff;
+}
+#more-hint i,
+#less-hint i {
+    display: block;
+    width: 19px;
+    height: 10px;
+    background: url('../images/infoIcon.png') no-repeat center / contain;
 }
 
 /*.meta-toggle.hasHover:hover,.meta-toggle:active {
@@ -6331,34 +6299,6 @@ a.hasHover.tag-link:hover {
     color: #fff
 }*/
 
-#title-toggle {
-    float: left;
-    text-align: center;
-    height: 52px;
-    font-size: 18px;
-    pointer-events: all;
-    line-height: 52px;
-    padding-top: 2px;
-    display: none;
-}
-
-#title-logo {
-    margin-right: 6px;
-}
-
-#title-logo i {
-    display: block;
-    width: 18px;
-    height: 18px;
-    /* background: url("../images/4dage-logo.png")left top no-repeat; */
-    background-size: 100%;
-}
-
-#title-toggle.hasHover:hover, #title-toggle:active {
-    background-color: rgba(0, 0, 0, .75);
-    color: #fff
-}
-
 .co-brand {
     color: rgba(255, 255, 255, .7);
     font-size: 12px;
@@ -6383,12 +6323,6 @@ a.hasHover.tag-link:hover {
     align-items: center;
 }
 
-#gui-name.noCoBrand {
-    /* width: 300px; */
-    float: left;
-    height: 100%;
-}
-
 .pinTop.left .title-container {
     right: 0;
     margin-right: 0
@@ -6421,12 +6355,14 @@ a.hasHover.tag-link:hover {
     position: relative;
     bottom: 100%;
     width: 100%;
-    padding: 10px;
-    white-space: normal;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 19px;
+    backdrop-filter: blur(10px);
+    line-height: 25px;
+    font-size: 1.2em;
+    padding: 30px;
+    text-indent: 2em;
+    letter-spacing: 2px;
     border-radius: 10px;
+    background: rgba(94, 27, 19, .6431372549019608);
     -webkit-transtion: all .4s ease-in-out;
     transition: all .4s ease-in-out
 }
@@ -6461,14 +6397,14 @@ a.hasHover.tag-link:hover {
 }
 
 #meta-info-wrapper {
-    width: 360px;
+    width: 300px;
     overflow: hidden;
     position: relative;
-    top: 14px;
+    top: 10px;
 }
 
 #meta-info-wrapper.expand {
-    pointer-events: auto
+    pointer-events: auto;
 }
 
 #call-to-action #pause-overlay {
@@ -6920,6 +6856,18 @@ a.hasHover.tag-link:hover {
     box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 5px, rgba(0, 0, 0, 0.7) 0px 0px 5px inset;
 }
 
+#myCompany {
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: white;
+    text-align: center;
+    transform: translateX(-50%);
+    z-index: 1;
+}
+
 #myCompany.JLogo {
     height: 30px;
 }
@@ -6959,6 +6907,24 @@ a.hasHover.tag-link:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
+@keyframes scroll-data {
+    0% {
+        margin-left: 0;
+        transform: translateX(0);
+    }
+    10% {
+        margin-left: 0;
+        transform: translateX(0);
+    }
+    90% {
+        margin-left: 100%;
+        transform: translateX(-100%);
+    }
+    100% {
+        margin-left: 100%;
+        transform: translateX(-100%);
+    }
+}
 @media only screen and (max-width: 1000px) {
     .progressbar {
         width: 60%;
@@ -6968,6 +6934,42 @@ a.hasHover.tag-link:hover {
         top: 60px;
         right: 5px;
     }
+    .viewContainer>div img,
+    .pinBottom.right .ui-icon img {
+        width: 33px !important;
+        height: 33px !important;
+    }
+    .rightViewContainer {
+        flex-direction: column;
+    }
+    #scrollFrame {
+        padding: 8px 15px 0;
+    }
+    .scroll-wrap-detail {
+        max-width: 120px;
+    }
+    #gui-name {
+        display: block;
+        float: left;
+        animation: scroll-data 7s linear infinite alternate;
+    }
+    .scroll-wrap {
+        max-width: 100%;
+        display: inline-block;
+        vertical-align: top;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    .pinTop.left {
+        top: 20px;
+    }
+    #meta-info-wrapper {
+        left: -10px;
+        width: 100vw;
+    }
+    #meta-info {
+        padding: 15px;
+    }
 }
 
 @media only screen and (max-width: 700px) {
@@ -6983,11 +6985,6 @@ a.hasHover.tag-link:hover {
 }
 
 @media only screen and (max-width: 680px) {
-    .pinTop.left {
-        left: 50%;
-        transform: translateX(-50%);
-        align-items: center;
-    }
     .title-row {
         justify-content: center;
     }
@@ -6997,12 +6994,18 @@ a.hasHover.tag-link:hover {
     #gui-modes-map>div[rel]:hover, #play:hover {
         background: transparent;
     }
-    .pinBottom.right .ui-icon {
-        margin-right: 5px;
-    }
+    /* #volume{
+        z-index: 9999;
+        position: absolute;
+        left: 10px;
+        bottom: 5px;
+    } */
     .pinBottom.right, .pinBottom.left {
         bottom: 5px;
     }
+    .pinBottom.right {
+        right: 5px;
+    }
     .pinBottom.left {
         left: 5px;
     }
@@ -7011,10 +7014,13 @@ a.hasHover.tag-link:hover {
         flex-direction: column;
     }
     #play, #pause {
-        width: 64px;
+        width: 50px;
+        margin-bottom: 10px;
     }
-    #gui-modes-map>div[rel] {
-        width: 64px;
+    #gui-modes-map>div[rel],
+    .rightViewContainer > div {
+        width: 50px !important;
+        margin-bottom: 10px;
     }
     .progressbar {
         width: 70%;
@@ -7038,8 +7044,8 @@ a.hasHover.tag-link:hover {
 
 
 @media screen and (orientation: landscape) {
-	.viewContainer, #gui-modes-map {
-        display: block !important;
+    .viewContainer {
+        padding: 10px 20px 10px 10px;
     }
 }
 
@@ -7047,9 +7053,6 @@ a.hasHover.tag-link:hover {
     #gui-name {
         font-size: 16px;
     }
-    #meta-info-wrapper {
-        width: 100vw;
-    }
     #meta-info {
         font-size: 12px;
     }

index.html

@@ -90,13 +90,13 @@
         </div>
         <div id="gui" style="display: none;">
             <div id="vrOff">
-                <img id="vrOffImg" src="images/vrOffImg.png" alt="">
+                <img id="vrOffImg" src="images/icon/vrOffImg.png" alt="">
             </div>
             <div id="hotListWrap">
                 <div id="hotListTitle">
                     <div>
                         <span id="hotListText">热点列表</span>
-                        <img id="hotListIcon" src="images/hotlist.png" alt="">
+                        <img id="hotListIcon" src="images/icon/hotlist.png" alt="">
                     </div>
 
                 </div>
@@ -105,7 +105,7 @@
                     </ul>
                 </div>
                 <div id="hotListBottom">
-                    <img id="hotListClose" src="images/hotListClose.png" alt="">
+                    <img id="hotListClose" src="images/icon/hotListClose.png" alt="">
                 </div>
             </div>
             <div class="pinTop left">
@@ -124,15 +124,18 @@
                                 <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 class="scroll-wrap-detail">
+                                    <div class="scroll-wrap">
+                                        <div id="gui-name" class="titleText"></div>
+                                    </div>
+                                </div>
+                                <a id="more-hint"><i></i></a>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div id="meta-info-wrapper">
-                    <div id="meta-info" class="darkGlass">
+                    <div id="meta-info">
                         <div id="meta-description"></div>
                         <div class="contact-info">
                             <i class="icon icon-user pull-left"></i>
@@ -188,6 +191,11 @@
                                 <span class="mode">{[{ FLOOR_PLAN }]}</span>
                             </div> -->
                     </div>
+
+                    <div class="copyright">
+                        <p>珠海市自然资源局</p>
+                        <p>珠海市自然资源与规划技术中心</p>
+                    </div>
                 </div>
                 <!-- <div class="pinBottom zoomPanel">
                         <div id="gui-zoomin" class="buttonZoom buttonZoomIn buttonZoomEnabled" data-placement="top">
@@ -214,18 +222,18 @@
                             </div> -->
                         <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
                             <a>
-                                <img rel="tooltip" title="" src="images/play.png" width="24" height="24"
+                                <img rel="tooltip" title="" src="images/icon/play.png" width="24" height="24"
                                     data-original-title="播放">
                             </a>
                         </div>
                         <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
                             <a>
-                                <img title="" src="images/play.png" width="24" height="24">
+                                <img title="" src="images/icon/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"
+                                <img rel="tooltip" title="" src="images/icon/pause.png" width="24" height="24"
                                     data-original-title="暂停">
                             </a>
                         </div>
@@ -246,74 +254,55 @@
                             </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="navigation icon" />
+                                <img class="icon icon-inside describe" src="images/icon/auto.png" title="navigation icon" />
+                                <div>
+                                    <img class="icon icon-inside" src="images/icon/auto.png" title="navigation icon" />
+                                    <img class="icon icon-inside hide" src="images/icon/auto_active.png" title="navigation icon" />
+                                </div>
                             </div>
                             <div data-original-title="热点列表" id="hotList" rel="tooltip" title="" style="display: none">
-                                <img class="icon icon-inside" src="images/hotlist.png" title="navigation icon" />
+                                <img class="icon icon-inside" src="images/icon/hotlist.png" title="navigation icon" />
                             </div>
                             <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip" title="" class="">
-                                <img class="icon icon-inside" src="images/inside.png" title="navigation icon" />
+                                <img class="icon icon-inside" src="images/icon/inside.png" title="navigation icon" />
+                                <img class="icon icon-inside hide" src="images/icon/inside_active.png" title="navigation icon" />
                             </div>
                             <div data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip" title="" class="">
-                                <img class="icon icon-inside" src="images/dollhouse.png" title="navigation icon" />
+                                <img class="icon icon-inside" src="images/icon/dollhouse.png" title="navigation icon" />
+                                <img class="icon icon-inside hide" src="images/icon/dollhouse_active.png" title="navigation icon" />
                             </div>
                             <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="">
-                                <img class="icon icon-inside" src="images/floor.png" title="navigation icon" />
+                                <img class="icon icon-inside" src="images/icon/floor.png" title="navigation icon" />
+                                <img class="icon icon-inside hide" src="images/icon/floor_active.png" title="navigation icon" />
                             </div>
                             <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none;">
-                                <img class="icon icon-inside" src="images/VR.png" title="navigation icon" />
+                                <img class="icon icon-inside" src="images/icon/VR.png" title="navigation icon" />
                             </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" title="navigation icon" />
+                                <img class="icon icon-inside" src="images/icon/face.jpg" title="navigation icon" />
                             </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">
+                                <img src="images/icon/musicAc.png">
                             </a>
                         </div>
-                        <div id="vr" class="ui-icon wide hidden" style="display: none;">
+                        <div id="clear" class="ui-icon wide">
                             <a>
-                                <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+                                <img src="images/icon/clear.png">
                             </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 class="frame-container">
                         <div id="scrollFrame" class="frame">
                             <ul id="thumb-container" class="slidee"></ul>
                         </div>
@@ -330,10 +319,7 @@
                     <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);">
-                珠海市自然资源局<br/>
-                珠海市自然资源与规划技术中心
+            <div id="myCompany">
             </div>
         </div>
         <div class="webvr-popup" style="display:none">
@@ -392,7 +378,7 @@
                 <div class="terms">
                     <a>{[{ MATTERPORT_TERMS }]}</a>
                 </div>
-                <!-- <img src="images/glyph.svg"> -->
+                <!-- <img src="images/icon/glyph.svg"> -->
             </div>
         </div>
         <div id="gui-spinner" style="display: none;">
@@ -705,10 +691,10 @@
                     <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"> -->
+                        <!-- <img class="prev-arrow" src="images/icon/arrow.png"> -->
                     </div>
                     <div class="vr-arrows next-container">
-                        <!-- <img class="next-arrow" src="images/arrow.png"> -->
+                        <!-- <img class="next-arrow" src="images/icon/arrow.png"> -->
                     </div>
                 </div>
                 <div class="vr-page"></div>
@@ -721,7 +707,7 @@
         </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"> -->
+            <!-- <img src="images/icon/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>
@@ -790,6 +776,52 @@
     <script src="js/SpecialScene.js"></script>
     <script src="js/manage.js"></script>
     <script src="js/main_2018_b.js"></script>
+    <script>
+        (function() {
+            var clearButton = document.getElementById('clear');
+            if (!clearButton) return;
+            var clearImage = clearButton.querySelector('img');
+            var pinBottomLeft = document.querySelector('.pinBottom.left');
+            var pinTopLeft = document.querySelector('.pinTop.left');
+            var rightView = document.querySelector('.rightViewContainer');
+            var active = false;
+            var originalDisplays = new Map();
+
+            function setClearActive(isActive) {
+                if (clearImage) {
+                    clearImage.src = isActive ? 'images/icon/clearAc.png' : 'images/icon/clear.png';
+                }
+                if (pinBottomLeft) {
+                    if (!originalDisplays.has(pinBottomLeft)) {
+                        originalDisplays.set(pinBottomLeft, getComputedStyle(pinBottomLeft).display);
+                    }
+                    pinBottomLeft.style.display = isActive ? 'none' : originalDisplays.get(pinBottomLeft);
+                }
+                if (pinTopLeft) {
+                    if (!originalDisplays.has(pinTopLeft)) {
+                        originalDisplays.set(pinTopLeft, getComputedStyle(pinTopLeft).display);
+                    }
+                    pinTopLeft.style.display = isActive ? 'none' : originalDisplays.get(pinTopLeft);
+                }
+                if (rightView) {
+                    Array.prototype.forEach.call(rightView.children, function(child) {
+                        if (child !== clearButton) {
+                            if (!originalDisplays.has(child)) {
+                                originalDisplays.set(child, getComputedStyle(child).display);
+                            }
+                            child.style.display = isActive ? 'none' : originalDisplays.get(child);
+                        }
+                    });
+                }
+            }
+
+            clearButton.addEventListener('click', function(event) {
+                event.preventDefault();
+                active = !active;
+                setClearActive(active);
+            });
+        })();
+    </script>
     <script type="text/javascript">document.write(unescape("%3Cspan id='_ideConac' %3E%3C/span%3E%3Cscript  src='https://dcs.conac.cn/js/nis/44/04/00/c340441de8d96671f89de03d0fee5436/11440400MB2C91840T-20007750.js' type='text/javascript'%3E%3C/script%3E"));</script>
 </body>
 

js/main_2018_b.js

@@ -6129,7 +6129,13 @@ window.Modernizr = function(n, e, t) {
                 C(e.currentFloor, n.mode)),
                 r(),
                 o(t, t.player),
-                $("#gui").fadeIn(1500),
+                $("#gui").fadeIn(1500, function() {
+                    // 显示meta-info-wrapper 3秒然后收起
+                    de.toggleMeta();
+                    setTimeout(function() {
+                        de.toggleMeta();
+                    }, 3000);
+                }),
                 je.highlight.visible && (2 !== Q.startHighlights || e.has360Views) && setTimeout(function() {
                     a(),
                     (!e.has360Views && 1 !== Q.startHighlights || e.has360Views && 0 === Q.startHighlights) && setTimeout(a, 2e3)
@@ -7113,18 +7119,18 @@ window.Modernizr = function(n, e, t) {
             }),
 			$("#volume").find("a").on("click", function(e) {//xzw 声音
                 l(e);
-                if($("#volume img")[0].src.indexOf("btn_on.png")>-1)
+                if($("#volume img")[0].src.indexOf("musicAc.png")>-1)
 				{
 					g_play = 0; 
 					//g_bgAudio.pause();
 					//g_tourAudio.pause();  //g_tourAudio.volume = 0;//ios 无法改变音量 
  					g_playAudio && g_playAudio.pause();
 					
-					$("#volume img").attr("src", "./images/Volume btn_off.png");
-					$("#volume").attr("title", "关闭声音");
+					$("#volume img").attr("src", "./images/icon/music.png");
+					$("#volume").attr("title", "打开声音");
 					
 				}
-				else if($("#volume img")[0].src.indexOf("btn_off.png")>-1)
+				else if($("#volume img")[0].src.indexOf("music.png")>-1)
 				{
 					g_play = 1; 
 					g_playAudio && g_playAudio.play() 
@@ -7133,8 +7139,8 @@ window.Modernizr = function(n, e, t) {
 					 
 				 
 					
-					$("#volume img").attr("src", "./images/Volume btn_on.png");
-					$("#volume").attr("title", "打开声音");
+					$("#volume img").attr("src", "./images/icon/musicAc.png");
+					$("#volume").attr("title", "关闭声音");
 				} 
                 
             }),