update2042

web/public/scene.html

@@ -9,6 +9,8 @@
     <meta name="format-detection" content="telephone=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css"/>
+    <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/tooltipster.bundle.min.css"/>
+    <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/tooltipster-sideTip-borderless.min.css"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/>
     <script>
@@ -41,6 +43,8 @@
     <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/OBJLoader.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/CAD/bundle.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/CAD/loadCAD.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/tooltipster.bundle.js"></script>
+    
     <div id="app"></div>
   </body>
 </html>

web/public/static/css/main.css

@@ -3703,7 +3703,8 @@ a.hasHover:hover, a:active {
 .gui-floor-title {
     display: none;
     overflow: hidden;
-    white-space: nowrap
+    white-space: nowrap;
+    font-size: 12px;
 }
 
 .gui-floor-icon {
@@ -3991,7 +3992,7 @@ a.hasHover:hover, a:active {
 }
 
 #gui .pinBottom.open.playing {
-    bottom: 150px
+    bottom: 170px
 }
 
 #gui .pinBottom-container.drawerOpen .pinBottom.open.noScroll.playing {

web/public/static/css/tooltipster-sideTip-borderless.min.css

@@ -0,0 +1,65 @@
+.tooltipster-sidetip.tooltipster-borderless .tooltipster-box {
+  border: none;
+  background: #1b1b1b;
+  background: rgba(10, 10, 10, 0.9);
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom
+  .tooltipster-box {
+  margin-top: 8px;
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-box {
+  margin-right: 8px;
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-box {
+  margin-left: 8px;
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-box {
+  margin-bottom: 8px;
+}
+.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow {
+  height: 8px;
+  margin-left: -8px;
+  width: 16px;
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-arrow,
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-right
+  .tooltipster-arrow {
+  height: 16px;
+  margin-left: 0;
+  margin-top: -8px;
+  width: 8px;
+}
+.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow-background {
+  display: none;
+}
+.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow-border {
+  border: 8px solid transparent;
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom
+  .tooltipster-arrow-border {
+  border-bottom-color: #1b1b1b;
+  border-bottom-color: rgba(10, 10, 10, 0.9);
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-left
+  .tooltipster-arrow-border {
+  border-left-color: #1b1b1b;
+  border-left-color: rgba(10, 10, 10, 0.9);
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-right
+  .tooltipster-arrow-border {
+  border-right-color: #1b1b1b;
+  border-right-color: rgba(10, 10, 10, 0.9);
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-top
+  .tooltipster-arrow-border {
+  border-top-color: #1b1b1b;
+  border-top-color: rgba(10, 10, 10, 0.9);
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom
+  .tooltipster-arrow-uncropped {
+  top: -8px;
+}
+.tooltipster-sidetip.tooltipster-borderless.tooltipster-right
+  .tooltipster-arrow-uncropped {
+  left: -8px;
+}

web/public/static/css/tooltipster.bundle.min.css

@@ -0,0 +1,278 @@
+.tooltipster-fall,
+.tooltipster-grow.tooltipster-show {
+  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+.tooltipster-base {
+  display: flex;
+  pointer-events: none;
+  position: absolute;
+}
+.tooltipster-box {
+  flex: 1 1 auto;
+}
+.tooltipster-content {
+  box-sizing: border-box;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+}
+.tooltipster-ruler {
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+}
+.tooltipster-fade {
+  opacity: 0;
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -ms-transition-property: opacity;
+  transition-property: opacity;
+}
+.tooltipster-fade.tooltipster-show {
+  opacity: 1;
+}
+.tooltipster-grow {
+  -webkit-transform: scale(0, 0);
+  -moz-transform: scale(0, 0);
+  -o-transform: scale(0, 0);
+  -ms-transform: scale(0, 0);
+  transform: scale(0, 0);
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -o-transition-property: -o-transform;
+  -ms-transition-property: -ms-transform;
+  transition-property: transform;
+  -webkit-backface-visibility: hidden;
+}
+.tooltipster-grow.tooltipster-show {
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  -o-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  transform: scale(1, 1);
+  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+.tooltipster-swing {
+  opacity: 0;
+  -webkit-transform: rotateZ(4deg);
+  -moz-transform: rotateZ(4deg);
+  -o-transform: rotateZ(4deg);
+  -ms-transform: rotateZ(4deg);
+  transform: rotateZ(4deg);
+  -webkit-transition-property: -webkit-transform, opacity;
+  -moz-transition-property: -moz-transform;
+  -o-transition-property: -o-transform;
+  -ms-transition-property: -ms-transform;
+  transition-property: transform;
+}
+.tooltipster-swing.tooltipster-show {
+  opacity: 1;
+  -webkit-transform: rotateZ(0);
+  -moz-transform: rotateZ(0);
+  -o-transform: rotateZ(0);
+  -ms-transform: rotateZ(0);
+  transform: rotateZ(0);
+  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1);
+  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
+  -moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
+  -ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
+  -o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
+  transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
+}
+.tooltipster-fall {
+  -webkit-transition-property: top;
+  -moz-transition-property: top;
+  -o-transition-property: top;
+  -ms-transition-property: top;
+  transition-property: top;
+  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+.tooltipster-fall.tooltipster-initial {
+  top: 0 !important;
+}
+.tooltipster-fall.tooltipster-dying {
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -o-transition-property: all;
+  -ms-transition-property: all;
+  transition-property: all;
+  top: 0 !important;
+  opacity: 0;
+}
+.tooltipster-slide {
+  -webkit-transition-property: left;
+  -moz-transition-property: left;
+  -o-transition-property: left;
+  -ms-transition-property: left;
+  transition-property: left;
+  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+.tooltipster-slide.tooltipster-initial {
+  left: -40px !important;
+}
+.tooltipster-slide.tooltipster-dying {
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -o-transition-property: all;
+  -ms-transition-property: all;
+  transition-property: all;
+  left: 0 !important;
+  opacity: 0;
+}
+@keyframes tooltipster-fading {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.tooltipster-update-fade {
+  animation: tooltipster-fading 0.4s;
+}
+@keyframes tooltipster-rotating {
+  25% {
+    transform: rotate(-2deg);
+  }
+  75% {
+    transform: rotate(2deg);
+  }
+  100% {
+    transform: rotate(0);
+  }
+}
+.tooltipster-update-rotate {
+  animation: tooltipster-rotating 0.6s;
+}
+@keyframes tooltipster-scaling {
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.tooltipster-update-scale {
+  animation: tooltipster-scaling 0.6s;
+}
+.tooltipster-sidetip .tooltipster-box {
+  background: linear-gradient(-180deg, rgba(234, 219, 198, 0.8),rgba(153, 127, 103, 1));
+  border-radius: 20px;
+}
+.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
+  margin-top: 8px;
+}
+.tooltipster-sidetip.tooltipster-left .tooltipster-box {
+  margin-right: 8px;
+}
+.tooltipster-sidetip.tooltipster-right .tooltipster-box {
+  margin-left: 8px;
+}
+.tooltipster-sidetip.tooltipster-top .tooltipster-box {
+  margin-bottom: 8px;
+}
+.tooltipster-sidetip .tooltipster-content {
+  color: #fff;
+  line-height: 18px;
+  padding: 6px 14px;
+}
+.tooltipster-sidetip .tooltipster-arrow {
+  overflow: hidden;
+  position: absolute;
+}
+.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
+  height: 10px;
+  margin-left: -10px;
+  top: 0;
+  width: 20px;
+}
+.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
+  height: 20px;
+  margin-top: -10px;
+  right: 0;
+  top: 0;
+  width: 10px;
+}
+.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
+  height: 20px;
+  margin-top: -10px;
+  left: 0;
+  top: 0;
+  width: 10px;
+}
+.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
+  bottom: -2px;
+  height: 10px;
+  margin-left: -10px;
+  width: 20px;
+}
+.tooltipster-sidetip .tooltipster-arrow-background,
+.tooltipster-sidetip .tooltipster-arrow-border {
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+.tooltipster-sidetip .tooltipster-arrow-background {
+  border: 10px solid transparent;
+}
+.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
+  border-bottom-color: rgba(153, 127, 103, 1);
+  left: 0;
+  top: 3px;
+}
+.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
+  border-left-color: rgba(153, 127, 103, 1);
+  left: -3px;
+  top: 0;
+}
+.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
+  border-right-color: rgba(153, 127, 103, 1);
+  left: 3px;
+  top: 0;
+}
+.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
+  border-top-color: rgba(153, 127, 103, 1);
+  left: 0;
+  top: -3px;
+}
+.tooltipster-sidetip .tooltipster-arrow-border {
+  border: 10px solid transparent;
+  left: 0;
+  top: 0;
+}
+.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
+  border-bottom-color: rgba(153, 127, 103, 1);
+}
+.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
+  border-left-color: rgba(153, 127, 103, 1);
+}
+.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
+  border-right-color: rgba(153, 127, 103, 1);
+}
+.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
+  border-top-color: rgba(153, 127, 103, 1);
+}
+.tooltipster-sidetip .tooltipster-arrow-uncropped {
+  position: relative;
+}
+.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
+  top: -10px;
+}
+.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
+  left: -10px;
+}

web/src/assets/style/public.less

@@ -100,12 +100,25 @@ html,body{
   .brightnessBigW{
     &::before{
       content: '';
-      backdrop-filter: blur(10px) brightness(80%)!important;
+      backdrop-filter: blur(2px) brightness(90%) !important;
       background-color: rgba(255,255,255, 0.14)!important;
     }
   }  
 }
 
+
+.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
+	background: grey!important;
+	border: 3px solid red;
+	border-radius: 6px;
+	box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
+}
+
+.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
+	color: blue;
+	padding: 8px;
+}
+
 @fudu:10px;
 
 @keyframes cloud {

web/src/components/hotspot/iframe.vue

@@ -65,11 +65,11 @@ export default {
     width: 70%;
     color: #fff;
     text-align: center;
-    line-height: 1.5;
-    max-height: 250px;
+    line-height: 1.8;
+    max-height: 120px;
     overflow-y: auto;
     font-size: 16px;
-    padding: 0 50px;
+    padding: 0;
   }
 }
 

web/src/components/hotspot/image.vue

@@ -159,10 +159,10 @@ export default {
     color: #fff;
     text-align: center;
     line-height: 1.8;
-    max-height: 250px;
+    max-height: 120px;
     overflow-y: auto;
     font-size: 16px;
-    padding: 0 50px;
+    padding: 0;
   }
 }
 

web/src/components/hotspot/video.vue

@@ -139,16 +139,16 @@ export default {
     padding: 0 50px;
     margin-bottom: 10px;
   }
-  .desc{
+    .desc{
     margin: 0 auto;
     width: 70%;
     color: #fff;
     text-align: center;
     line-height: 1.8;
-    max-height: 250px;
+    max-height: 120px;
     overflow-y: auto;
     font-size: 16px;
-    padding: 0 50px;
+    padding: 0;
   }
 }
 

web/src/views/collection/Collection.vue

@@ -29,9 +29,7 @@
 <script>
 
 export default {
-  props:{
-    itemData:Array,
-  },
+  props:['itemData'],
   components:{
   },
   data(){

web/src/views/index/index.vue

@@ -3,7 +3,7 @@
     <video ref="bgv" class="bgvideo" loop muted :src="require('@/assets/video/bg.mp4')"></video>
     <div class="index_con" v-if="isshowall">
       <div class="i_left" :class="isshow?'animate__animated animate__zoomIn':''">
-        <div class="i_top brightnessW" >
+        <div class="i_top" >
           <img :src="require('@/assets/images/logo@2x.png')" alt="" />
         </div>
         <div class="i_btm">
@@ -150,8 +150,9 @@ export default {
           });
         }
       }
-      
     })
+    
+    this.date = formatDate(new Date());
     setInterval(() => {
       this.date = formatDate(new Date());
     }, 1000);
@@ -200,8 +201,9 @@ export default {
         background-size: cover;
         position: relative;
         border-top: 8px #34A78E solid;
+        background: rgba(255, 255, 255, 0.5);
         &::before{
-          backdrop-filter: blur(10px) brightness(120%) !important;
+          backdrop-filter: none!important;
         }
         > img {
           width: 100%;

web/src/views/scene/gui/menu.vue

@@ -16,8 +16,9 @@
         <div class="viewContainer">
           <div
             id="previous"
-            class="previous desktop-only ui-icon"
+            class="previous desktop-only ui-icon tooltip"
             style="display: none"
+            title="播放"
           >
             <a>
               <img
@@ -38,7 +39,8 @@
           >
             <a>
               <img
-                title=""
+                title="自动导览"
+                class="tttttt"
                 :src="require('@/assets/images/icon/bigscene/play.png')"
                 width="24"
                 height="24"
@@ -49,7 +51,8 @@
             <a>
               <img
                 rel="tooltip"
-                title=""
+                title="自动导览"
+                class="tttttt"
                 :src="require('@/assets/images/icon/bigscene/pause.png')"
                 width="24"
                 height="24"
@@ -71,13 +74,14 @@
               ></i>
             </a>
           </div>
-          <div id="gui-modes-map" class="ui-icon double active">
+          <div id="gui-modes-map"  class="ui-icon double active">
             <div
               data-original-title="导览"
               @click="isGuide = !isGuide"
               id="pullTab"
               rel="tooltip"
-              title=""
+              title="导览片段"
+              class="tttttt"
             >
               <img
                 class="icon icon-inside"
@@ -93,6 +97,8 @@
               data-original-title="全景漫游"
               id="gui-modes-inside"
               rel="tooltip"
+              title="全景漫游"
+              class="tttttt"
             >
               <img
                 class="icon icon-inside"
@@ -108,6 +114,8 @@
               data-original-title="迷你模型"
               id="gui-modes-dollhouse"
               rel="tooltip"
+              title="迷你模型"
+              class="tttttt"
             >
               <img
                 class="icon icon-inside"
@@ -124,7 +132,8 @@
               data-original-title="俯视图"
               id="gui-modes-floorplan"
               rel="tooltip"
-              title=""
+              title="俯视图"
+              class="tttttt"
             >
               <img
                 class="icon icon-inside"
@@ -137,14 +146,15 @@
             </div>
 
             <div rel="music">
-              <img class="icon" :src="require('@/assets/images/icon/bigscene/musicon.png')" />
+              <img title="音频"
+              class="tttttt icon" :src="require('@/assets/images/icon/bigscene/musicon.png')" />
             </div>
 
 
             <div class="submenu">
-              <img @click="isShowList=!isShowList" :src="require(`@/assets/images/icon/bigscene/menu${isShowList?'_active':''}.png`)" />
+              <img title="更多菜单" class="tttttt" @click="isShowList=!isShowList" :src="require(`@/assets/images/icon/bigscene/menu${isShowList?'_active':''}.png`)" />
               <ul class="ul" :class="{'activeUl':isShowList}">
-                <li v-for="(item,i) in subList" :key="i">
+                <li :title="item.name" class="tttttt" v-for="(item,i) in subList" :key="i">
                   <img @click="clickItem(item)" :src="require(`@/assets/images/icon/bigscene/sublist/${item.img + (subActive==item.img?'_active':'')}.png`)" alt="">
                 </li>
               </ul>
@@ -207,9 +217,9 @@
         <!-- <xunirenwu :active="xunirenwu"/> -->
 
         <div class="commentator">
-          <img class="icon" @click="clickItem({ id: 5, current: xunirenwu, img: 'commentator'})" :src="require('@/assets/images/icon/bigscene/change.png')" />
+          <img  title="虚拟人物切换" class="tttttt icon" @click="clickItem({ id: 5, current: xunirenwu, img: 'commentator'})" :src="require('@/assets/images/icon/bigscene/change.png')" />
         </div>
-        <div class="gui-floor">
+        <div class="gui-floor tttttt" title="楼层切换">
           <div class="gui-floor-title"></div>
           <div class="gui-floor-icon">
             <span class="gui-floor-number"></span>
@@ -218,8 +228,8 @@
         </div>
         <div class="bgandshare">
           <div class="ui-icon wide">
-              <img id="gui-fullscreen" :src="require('@/assets/images/icon/bigscene/fullscreen.png')" />
-              <img id="gui-fullscreen-exit" style="display: none" :src="require('@/assets/images/icon/bigscene/screen.png')" />
+              <img id="gui-fullscreen" title="全屏" class="tttttt" :src="require('@/assets/images/icon/bigscene/fullscreen.png')" />
+              <img id="gui-fullscreen-exit" title="退出全屏" class="tttttt" style="display: none" :src="require('@/assets/images/icon/bigscene/screen.png')" />
           </div>
         </div>
         <div id="volume" class="ui-icon wide">
@@ -325,6 +335,11 @@ export default {
       this.$bus.$on('resetbtnactive',()=>{
         this.subActive = ''
       })
+
+      // title提示语
+      $('.tttttt').tooltipster({
+          delay: 300,
+      });
   },
   methods: {
     clickItem(item){
@@ -432,6 +447,7 @@ export default {
     max-width: 0;
     overflow: hidden;
     transition: .3s ease all;
+    min-height: 50px;
     >li{
       margin: 0 13px;
       >img{