feat: 修改全景查看器

public/static/kankan.html

@@ -6,16 +6,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
-    .select .option::-webkit-scrollbar {
+    .select::-webkit-scrollbar {
       width: 10px;
     }
 
-    .select .option::-webkit-scrollbar-track {
+    .select::-webkit-scrollbar-track {
       background: rgba(0, 0, 0, .3);
       border-radius: 10px;
     }
 
-    .select .option::-webkit-scrollbar-thumb {
+    .select::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, .3);
       border-radius: 10px;
     }
@@ -41,12 +41,13 @@
       z-index: 10;
       bottom: 15px;
       display: flex;
-      align-items: center;
+      align-items: end;
 
     }
 
-    .map div {
-      margin-right: 5px;
+    .map .select:last-child {
+      transform: translateX(10px);
+      /* margin-right: 5px; */
     }
 
     .select {
@@ -59,16 +60,13 @@
       overflow: hidden;
       transition: all .3s;
       padding: 5px 8px;
-      min-width: 30px;
       position: absolute;
-      bottom: 100%;
       margin-bottom: 0;
-      max-height: calc(100vh - 80px);
-      overflow-y: auto;
-      max-width: 30px;
-      text-overflow:ellipsis;
+      text-overflow: ellipsis;
       white-space: nowrap;
+      text-align: center;
     }
+
     #modes {
       min-width: auto;
     }
@@ -81,22 +79,38 @@
     #modes {
       max-width: initial;
       padding: 0;
+
+
     }
+
     #mode,
-    #modes  li {
-    width: 30px;
-    height: 30px !important;
-    /* height: auto; */
-    /* min-width: auto; */
-    padding: 5px;
-    display: flex
-;
-    align-items: center;
-    justify-content: center;
+    #modes li {
+      width: 30px;
+      height: 30px !important;
+      /* height: auto; */
+      /* min-width: auto; */
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-    #modes  .active {
-      display: none;
+
+    .select .active {
+      position: relative;
+    }
+
+    .select .active::after {
+      position: absolute;
+      content: "";
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAACCAYAAAAesF8hAAAAAXNSR0IArs4c6QAAAFlJREFUKFOVj8EKgDAMQ98OXtT//9PpsRJYpJQ58BCakLYkLSI24ABOYB9cegXt2q830vb1+yrogHCPKe6dLy4/e9a9pQI58J8yq6Iq4KA5xCzMrGgN7rt3PmYWNgUKFvBpAAAAAElFTkSuQmCC) no-repeat;
+      width: 24px;
+      height: 1px;
+      background-size: 100% 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 5px;
     }
+
     .select .value {
       background: rgba(0, 0, 0, .3);
       border-radius: 6px 6px 6px 6px;
@@ -104,6 +118,10 @@
       padding: 5px 8px;
     }
 
+    .select .value {
+      display: none !important;
+    }
+
     .select .place {
       height: 5px;
     }
@@ -111,11 +129,12 @@
     .select .value,
     .select .option li {
       height: 36px;
+      text-align: center;
       cursor: pointer;
+      text-align: center;
       font-size: 14px;
       line-height: 40px;
       max-width: 83vw;
-      text-align: left;
       position: relative;
       color: #fff;
       text-overflow: ellipsis;
@@ -123,9 +142,33 @@
       white-space: nowrap;
     }
 
-    .select .option li.active {
-      display: none;
-      color: #00c8af !important;
+    .select {
+      border-radius: 6px 6px 6px 6px;
+      height: 40px;
+      position: relative;
+      transition: height .3s linear;
+      overflow: hidden;
+      padding: 5px 2px;
+      background: rgba(0, 0, 0, .3);
+      max-height: calc(100vh - 40px);
+    }
+
+    .select:hover {
+      height: var(--height);
+      /* overflow: auto; */
+    }
+
+    .select .option {
+      padding: 0;
+      transform: translate(0, calc(var(--top)));
+      margin-top: 0;
+      background: none;      
+      position: relative;
+      max-width: 50px;
+    }
+
+    .select:hover .option {
+      transform: translate(0, 0);
     }
   </style>
 </head>
@@ -139,7 +182,7 @@
       <div class="value" id="floor"></div>
     </div>
     <div class="select">
-      <ul class="option" id="modes" style="display: block;">
+      <ul class="option" id="modes" style="display: block; width: 40px">
         <li attr-id="panorama"> <img src="./kankan-icons/show_roam_n.svg"></li>
         <li attr-id="floorplan"><img src="./kankan-icons/show_plane_n.svg"></li>
         <li attr-id="dollhouse"><img src="./kankan-icons/show_3d_n.svg"></li>
@@ -170,12 +213,14 @@
       if ($old) {
         $old.classList.remove('active')
       }
+      const $items = document.querySelectorAll(`#floors > li`)
       const $item = document.querySelector(`#floors > li[attr-id='${id}']`)
-      
+
       $item && $item.classList.add('active')
 
       if ($item) {
         document.querySelector('#floor').innerHTML = $item.innerHTML
+        document.querySelector('#floors').style.setProperty('--top', (-Array.from($items).indexOf($item)) * 36 + 'px')
       }
     }
 
@@ -201,6 +246,7 @@
       $floors.parentElement.addEventListener('mouseleave', () => {
         $floors.style.display = 'block'
       })
+      document.querySelector('#floors').parentElement.style.setProperty('--height', floors.length * 36 + 'px')
     }
 
     const setCurrentMode = id => {
@@ -210,8 +256,10 @@
       }
       const $item = document.querySelector(`#modes > li[attr-id='${id}']`)
       $item && $item.classList.add('active')
+      const $items = document.querySelectorAll(`#modes > li`)
 
       document.querySelector('#mode').innerHTML = $item.innerHTML
+      document.querySelector('#modes').style.setProperty('--top', (- Array.from($items).indexOf($item)) * 40 + 'px')
     }
 
     const renderModes = () => {
@@ -233,7 +281,7 @@
       })
       setCurrentMode('panorama')
 
-
+      document.querySelector('#modes').parentElement.style.setProperty('--height', 3 * 40 + 'px')
     }
 
 
@@ -283,6 +331,31 @@
       initKankan()
     }
     init()
+
+
+    document.querySelectorAll('.select').forEach(container => {
+      // 存储初始滚动位置
+      let initialScrollTop = 0;
+      let timeout
+      // 鼠标进入时记录初始位置
+      container.addEventListener("mouseenter", () => {
+        initialScrollTop = container.scrollTop;
+
+        timeout = setTimeout(() => {
+          console.log(container.offsetHeight, container.querySelector('.option').offsetHeight)
+          if (container.offsetHeight < container.querySelector('.option').offsetHeight) {
+            container.style.overflow = 'auto'
+          }
+        }, 400)
+      });
+
+      // 鼠标离开时复位
+      container.addEventListener("mouseleave", () => {
+        container.scrollTop = initialScrollTop;
+        clearTimeout(timeout)
+            container.style.overflow = 'hidden'
+      });
+    })
   </script>
 
   <script>

src/core/components/line-icon/icon.vue

@@ -230,30 +230,30 @@ watch(
 );
 operateMenus.splice(0, 2);
 operateMenus.splice(1, 2);
-// if (props.data.type === "align-bottom" || props.data.type === "align-bottom-fix") {
-operateMenus.splice(
-  operateMenus.length - 2,
-  0,
-  // {
-  //   label: "内外翻转",
-  //   handler: () => {
-  //     emit("updateShape", {
-  //       ...data.value,
-  //       openSide: data.value.openSide === "LEFT" ? "RIGHT" : "LEFT",
-  //     });
-  //   },
-  // },
-  {
-    label: "翻转",
-    handler: () => {
-      emit("updateShape", {
-        ...data.value,
-        openSide: data.value.openSide === "LEFT" ? "RIGHT" : "LEFT",
-        startLen: data.value.endLen,
-        endLen: data.value.startLen,
-      });
-    },
-  }
-);
-// }
+if (props.data.type === "align-bottom" || props.data.type === "align-bottom-fix") {
+  operateMenus.splice(
+    operateMenus.length - 2,
+    0,
+    // {
+    //   label: "内外翻转",
+    //   handler: () => {
+    //     emit("updateShape", {
+    //       ...data.value,
+    //       openSide: data.value.openSide === "LEFT" ? "RIGHT" : "LEFT",
+    //     });
+    //   },
+    // },
+    {
+      label: "翻转",
+      handler: () => {
+        emit("updateShape", {
+          ...data.value,
+          openSide: data.value.openSide === "LEFT" ? "RIGHT" : "LEFT",
+          startLen: data.value.endLen,
+          endLen: data.value.startLen,
+        });
+      },
+    }
+  );
+}
 </script>