世界地图

src/layout/components/useRenderLayout.tsx

@@ -33,10 +33,9 @@ export const useRenderLayout = () => {
         {!hideLeftMenu.value ? (
           <div
             class={[
-              'absolute top-0 left-0 h-full layout-border__right',
+              'absolute top-0 left-0 z-20 h-full layout-border__right',
               { '!fixed z-3000': mobile.value }
-            ]}
-          >
+            ]}>
             {logo.value ? (
               <Logo
                 class={[
@@ -47,8 +46,7 @@ export const useRenderLayout = () => {
                     'w-[var(--left-menu-max-width)]': !appStore.getCollapse
                   }
                 ]}
-                style="transition: all var(--transition-time-02);"
-              ></Logo>
+                style="transition: all var(--transition-time-02);"></Logo>
             ) : undefined}
             <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
           </div>
@@ -66,8 +64,7 @@ export const useRenderLayout = () => {
               'fixed !w-full !left-0': mobile.value
             }
           ]}
-          style="transition: all var(--transition-time-02);"
-        >
+          style="transition: all var(--transition-time-02);">
           <ElScrollbar
             v-loading={pageLoading.value}
             class={[
@@ -78,8 +75,7 @@ export const useRenderLayout = () => {
                 '!h-[calc(100%-var(--tags-view-height))] mt-0':
                   fixedHeader.value && hideTopHeader.value
               }
-            ]}
-          >
+            ]}>
             {!hideTopHeader.value ? (
               <div
                 class={[
@@ -92,16 +88,14 @@ export const useRenderLayout = () => {
                     '!w-full !left-0': hideLeftMenu.value || mobile.value
                   }
                 ]}
-                style="transition: all var(--transition-time-02);"
-              >
+                style="transition: all var(--transition-time-02);">
                 <ToolHeader
                   class={[
                     'bg-[var(--top-header-bg-color)]',
                     {
                       'layout-border__bottom': !tagsView.value
                     }
-                  ]}
-                ></ToolHeader>
+                  ]}></ToolHeader>
 
                 {!hideTopHeader.value && tagsView.value ? (
                   <TagsView class="layout-border__top layout-border__bottom"></TagsView>
@@ -131,9 +125,10 @@ export const useRenderLayout = () => {
             hideTopHeader.value
               ? 'top-0 h-full'
               : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
-          ]}
-        >
-          {!hideLeftMenu.value ? <Menu class="relative layout-border__right !h-full"></Menu> : undefined}
+          ]}>
+          {!hideLeftMenu.value ? (
+            <Menu class="relative layout-border__right !h-full"></Menu>
+          ) : undefined}
           <div
             class={[
               `${prefixCls}-content`,
@@ -146,20 +141,17 @@ export const useRenderLayout = () => {
                 'w-full left-0': hideLeftMenu.value
               }
             ]}
-            style="transition: all var(--transition-time-02);"
-          >
+            style="transition: all var(--transition-time-02);">
             <ElScrollbar
               v-loading={pageLoading.value}
-            class={[
-              `${prefixCls}-content-scrollbar`,
-              {
-                '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
-                  fixedHeader.value && tagsView.value && !hideTopHeader.value,
-                '!h-[calc(100%)] mt-0':
-                  fixedHeader.value && hideTopHeader.value
-              }
-            ]}
-            >
+              class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                    fixedHeader.value && tagsView.value && !hideTopHeader.value,
+                  '!h-[calc(100%)] mt-0': fixedHeader.value && hideTopHeader.value
+                }
+              ]}>
               {!hideTopHeader.value && tagsView.value ? (
                 <TagsView
                   class={[
@@ -167,14 +159,19 @@ export const useRenderLayout = () => {
                     {
                       '!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
                       'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && collapse.value && fixedHeader.value && !hideTopHeader.value,
+                        !hideLeftMenu.value &&
+                        collapse.value &&
+                        fixedHeader.value &&
+                        !hideTopHeader.value,
                       'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && !hideTopHeader.value,
+                        !hideLeftMenu.value &&
+                        !collapse.value &&
+                        fixedHeader.value &&
+                        !hideTopHeader.value,
                       '!w-full !left-0': hideLeftMenu.value || hideTopHeader.value
                     }
                   ]}
-                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
-                ></TagsView>
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
               ) : undefined}
 
               <AppView></AppView>
@@ -195,8 +192,7 @@ export const useRenderLayout = () => {
               {
                 'layout-border__bottom': !tagsView.value
               }
-            ]}
-          >
+            ]}>
             {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
             <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
             <ToolHeader></ToolHeader>
@@ -206,8 +202,7 @@ export const useRenderLayout = () => {
           class={[
             `${prefixCls}-content`,
             hideTopHeader.value ? 'w-full h-full' : 'w-full h-[calc(100%-var(--top-tool-height))]'
-          ]}
-        >
+          ]}>
           <ElScrollbar
             v-loading={pageLoading.value}
             class={[
@@ -217,19 +212,18 @@ export const useRenderLayout = () => {
                   fixedHeader.value && tagsView.value && !hideTopHeader.value,
                 '!h-full mt-0': hideTopHeader.value
               }
-            ]}
-          >
+            ]}>
             {!hideTopHeader.value && tagsView.value ? (
               <TagsView
                 class={[
                   'layout-border__bottom layout-border__top relative',
                   {
-                    '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value && !hideTopHeader.value,
+                    '!fixed w-full top-[var(--top-tool-height)] left-0':
+                      fixedHeader.value && !hideTopHeader.value,
                     '!fixed w-full top-0 left-0': hideTopHeader.value
                   }
                 ]}
-                style="transition: width var(--transition-time-02), left var(--transition-time-02);"
-              ></TagsView>
+                style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
             ) : undefined}
 
             <AppView></AppView>
@@ -254,8 +248,7 @@ export const useRenderLayout = () => {
             hideTopHeader.value
               ? 'top-0 h-full'
               : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
-          ]}
-        >
+          ]}>
           {!hideLeftMenu.value ? <TabMenu></TabMenu> : undefined}
           <div
             class={[
@@ -273,19 +266,17 @@ export const useRenderLayout = () => {
                 'w-full left-0': hideLeftMenu.value
               }
             ]}
-            style="transition: all var(--transition-time-02);"
-          >
+            style="transition: all var(--transition-time-02);">
             <ElScrollbar
               v-loading={pageLoading.value}
-            class={[
-              `${prefixCls}-content-scrollbar`,
-              {
-                '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
-                  fixedHeader.value && tagsView.value && !hideTopHeader.value,
-                '!h-full mt-0': hideTopHeader.value
-              }
-            ]}
-            >
+              class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                    fixedHeader.value && tagsView.value && !hideTopHeader.value,
+                  '!h-full mt-0': hideTopHeader.value
+                }
+              ]}>
               {!hideTopHeader.value && tagsView.value ? (
                 <TagsView
                   class={[
@@ -294,17 +285,32 @@ export const useRenderLayout = () => {
                       '!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
                       '!fixed top-0 left-0 z-10 w-full': hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && collapse.value && fixedHeader.value && !fixedMenu.value && !hideTopHeader.value,
+                        !hideLeftMenu.value &&
+                        collapse.value &&
+                        fixedHeader.value &&
+                        !fixedMenu.value &&
+                        !hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && !fixedMenu.value && !hideTopHeader.value,
+                        !hideLeftMenu.value &&
+                        !collapse.value &&
+                        fixedHeader.value &&
+                        !fixedMenu.value &&
+                        !hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-min-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value,
+                        !hideLeftMenu.value &&
+                        collapse.value &&
+                        fixedHeader.value &&
+                        fixedMenu.value &&
+                        !hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-max-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value
+                        !hideLeftMenu.value &&
+                        !collapse.value &&
+                        fixedHeader.value &&
+                        fixedMenu.value &&
+                        !hideTopHeader.value
                     }
                   ]}
-                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
-                ></TagsView>
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
               ) : undefined}
 
               <AppView></AppView>

src/views/Home/index3.vue

@@ -928,6 +928,7 @@ onBeforeUnmount(() => {
 
 .home-map-page {
   position: relative;
+  z-index: 0;
   width: 100%;
   height: 100%;
   min-height: 100vh;