增加房间标签

scene/public/static/css/main.css

@@ -7111,4 +7111,181 @@ a.hasHover.tag-link:hover {
 }
 #menudiv>div>div{
     pointer-events:none;
-}  
+}  
+
+ /* 房间标签的样式 */
+.widgets-doll-labels,
+#otherLabels {
+  overflow: hidden;
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.widgets-doll-labels .room-label {
+  position: absolute;
+  width: 0;
+  height: 0;
+  /*  display: none; */
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: room-label 0.3s ease 0.1s;
+  animation: room-label 0.3s ease 0.1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  cursor: pointer;
+}
+/* .widgets-doll-labels .room-label.visible {
+    display: block
+} */
+.widgets-doll-labels .room-label:not(.noLine):after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 4px;
+  height: 68px;
+  background-image: url("../images/labelline.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  transform: translate(-50%);
+  transition: all 0.3s;
+}
+.widgets-doll-labels .room-label a {
+  display: block;
+  position: absolute;
+  line-height: 22px;
+  top: -66px;
+  transform: translate(-50%, -100%);
+  text-align: center;
+  white-space: nowrap;
+  font-size: 14px;
+  font-style: normal;
+  pointer-events: auto;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background: rgba(210, 210, 210, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+  text-shadow: 0px 1px 3px #000000;
+  min-height: 24px;
+  
+    
+}
+.widgets-doll-labels .room-label a:hover {
+    color:#fff;
+}
+
+.widgets-doll-labels .room-label.selected a{
+    background: rgb(0 0 0 / 88%);
+    border: 2px solid rgb(255 255 255);
+    border-radius: 3px;
+    text-shadow: 0px 1px 3px #ffffff;  
+}    
+.widgets-doll-labels.noLine .room-label a{
+    top: 0; 
+    transform: translate(-50%, -50%);
+    
+}
+
+.widgets-doll-labels.noLine .room-label:after {  /* 从dollhouse转到floorplan */
+    height:0;
+    bottom:-68px;
+} 
+
+.widgets-doll-labels .room-label a::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  width: 10px;
+  height: 10px;
+  background-image: url(../images/doll_label_corner.svg);
+  background-repeat: no-repeat;
+  background-position: top left;
+}
+.widgets-doll-labels.noCorner .room-label a::before {
+    background-image:none;
+}
+
+.widgets-doll-labels .room-label a::after {
+  content: "";
+  position: absolute;
+  left: -1px;
+  bottom: -1px;
+  width: 10px;
+  height: 10px;
+  background-image: url(../images/doll_label_corner.svg);
+  background-repeat: no-repeat;
+  background-position: top left;
+  transform: rotate(270deg);
+}
+.widgets-doll-labels.noCorner .room-label a::after {
+    background-image: none
+}
+
+
+.widgets-doll-labels .room-label a > p {
+  margin: 0;
+  padding: 6px 14px;
+  width: 100%;
+  height: 100%;
+  line-height: 1.5;
+}
+.widgets-doll-labels .room-label a > p::before {
+  content: "";
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  width: 10px;
+  height: 10px;
+  background-image: url(../images/doll_label_corner.svg);
+  background-repeat: no-repeat;
+  background-position: top left;
+  transform: rotate(90deg);
+}
+.widgets-doll-labels.noCorner .room-label a > p::before {
+    background-image: none;
+}
+
+.widgets-doll-labels .room-label a > p::after {
+  content: "";
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 10px;
+  height: 10px;
+  background-image: url(../images/doll_label_corner.svg);
+  background-repeat: no-repeat;
+  background-position: top left;
+  transform: rotate(180deg);
+}
+.widgets-doll-labels.noCorner .room-label a > p::after {
+    background-image: none;
+}
+.widgets-doll-labels .room-label.noLine a {
+  top: 16px;
+}
+.widgets-doll-labels .room-label a span {
+  white-space: nowrap;
+  user-select: none;
+}
+.widgets-doll-labels .room-label.with-entrance:after {
+  display: none;
+}
+.widgets-doll-labels .room-label.with-entrance a {
+  top: 50%;
+  width: 38.5px;
+  height: 15.75px;
+  background-size: 38.5px 15.75px;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.widgets-doll-labels .room-label.with-entrance a span {
+  margin-left: -0.875px;
+  margin-top: -0.875px;
+}

scene/public/static/images/doll_label_corner.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>map_corner  </title>
+    <g id="页面-1" stroke="none" stroke-width="3" fill="none" fill-rule="evenodd">
+        <g id="展示界面-三维" transform="translate(-56.000000, -270.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-15" transform="translate(31.000000, 270.000000)">
+                <g id="形状结合-+-形状结合-蒙版" transform="translate(25.000000, 0.000000)">
+                    <path d="M6,6 L5,6 L5,2.705 L3.301,1 L0,1 L0,0 L3.71522641,0 L6,2.29344795 L6,6 Z" id="map_corner--" transform="translate(3.000000, 3.000000) scale(-1, 1) translate(-3.000000, -3.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

scene/public/static/images/labelline.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="60px" viewBox="0 0 4 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>map_line</title>
+    <defs>
+        <linearGradient x1="50%" y1="50%" x2="50%" y2="11.688261%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="展示界面-三维" transform="translate(-78.000000, -298.000000)" fill="url(#linearGradient-1)">
+            <g id="编组-15" transform="translate(31.000000, 270.000000)">
+                <g id="编组-14" transform="translate(25.000000, 0.000000)">
+                    <polygon id="map_line" points="22 20 26 20 23.9752968 88"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

scene/src/pages/Home.vue

@@ -15,6 +15,10 @@
       <!-- 进度条加载 -->
       <gui-loading />
       <div id="hot"></div>
+
+      <!-- 三维 标签 -->
+      <div class="widgets-doll-labels"></div>
+
       <div id="gui" style="display: none">
         <!-- 退出VR模式按钮 -->
         <div id="vrOff">
@@ -122,7 +126,7 @@ export default {
       hotspots: "",
       loading: true,
       /** 隐藏热点和右侧工具栏 */
-      hideTools: false
+      hideTools: false,
     };
   },
 
@@ -171,8 +175,8 @@ export default {
   },
   async created() {
     // 雷锋故居场景需求，会携带 hideCover=1
-    this.hideTools = Boolean(Number(this.$route.query.hideCover))
-    this.showWelcome = !this.hideTools
+    this.hideTools = Boolean(Number(this.$route.query.hideCover));
+    this.showWelcome = !this.hideTools;
 
     // 发送访问量
     try {
@@ -215,4 +219,5 @@ export default {
   top: 30px;
   left: 30px;
 }
+
 </style>