feat: map

index.html

@@ -26,6 +26,7 @@
     </noscript>
     <div id="app"></div>
     <script src="/js/lib/jquery-2.1.1.min.js"></script>
+    <script src="//4dkk.4dage.com/v4/www/viewer/static/lib/flv.min.js"></script>
     <script src="//4dkk.4dage.com/v4/sdk/4.14.3/kankan-sdk-deps.js"></script>
     <script src="//4dkk.4dage.com/v4/sdk/4.14.3/kankan-sdk.js"></script>
     <script type="module" src="/src/index/main.ts"></script>

src/index/views/home/components/guide/index.scss

@@ -4,8 +4,10 @@
   bottom: 0px;
   width: 100%;
   pointer-events: none;
+  will-change: bottom;
   transition-property: bottom, opacity;
   transition-duration: 0.5s;
+  transition-timing-function: linear;
   z-index: var(--z-index-normal);
 }
 

src/index/views/home/components/menu/index.scss

@@ -2,7 +2,8 @@
   position: absolute;
   bottom: 10px;
   width: 100%;
-  transition: all 0.5s;
+  will-change: bottom;
+  transition: bottom linear 0.5s;
   z-index: var(--z-index-top);
 
   &.open {

src/index/views/home/index.scss

@@ -38,7 +38,7 @@
   width: 100%;
   height: 100%;
 
-  canvas {
+  .player canvas {
     position: relative;
     left: 0;
     top: 0;
@@ -83,6 +83,12 @@
   }
 }
 
+[xui_min_map] {
+  top: 20px !important;
+  right: 20px !important;
+  transition: all 0.3s;
+}
+
 @media only screen and (max-width: 600px) {
   .home {
     &_logo {
@@ -93,4 +99,11 @@
       }
     }
   }
+
+  [xui_min_map] {
+    width: 102px !important;
+    height: 100px !important;
+    top: 10px !important;
+    right: 10px !important;
+  }
 }

src/index/views/home/index.tsx

@@ -32,6 +32,12 @@ export default defineComponent({
         server: 'https://www.4dkankan.com',
       });
 
+      kankan.use('MinMap', {
+        theme: {
+          camera_fillStyle: '#000000',
+        },
+      });
+
       // 热点
       kankan
         .use('TagView', {