perfect_层级关系

src/views/Index.vue

@@ -5,7 +5,7 @@
     <div class="design-body">
       <Graphics />
       <View />
-      <div style="border-left: 1px solid var(--color-border); z-index: 7">
+      <div style="border-left: 1px solid var(--color-border); z-index: 2">
         <FileProps v-if="selections.mode === SelectionMode.File" />
         <PenProps v-else-if="selections.mode === SelectionMode.Pen" />
         <PensProps v-else />

src/views/components/Graphics.vue

@@ -507,8 +507,12 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
   } else if (item['3d']) {
     data = {
       name: 'iframe',
-      width: 400,
-      height: 300,
+      x: 0,
+      y: 0,
+      tags: ['meta3d'],
+      zIndex: 1,
+      width: meta2d.store.data.width || meta2d.store.options.width,
+      height: meta2d.store.data.height || meta2d.store.options.height,
       externElement: true,
       iframe: 'https://view3d.le5le.com/?id=' + (item._id || item.id),
     };
@@ -1049,7 +1053,8 @@ onUnmounted(() => {
 .graphics {
   display: flex;
   flex-direction: column;
-
+  background-color: var(--color-background);
+  z-index: 2;
   .input-search {
     flex-shrink: 0;
     height: 40px;

src/views/components/Header.vue

@@ -1028,7 +1028,9 @@ const changeDisableAnchor = () => {
 .app-header {
   display: flex;
   height: 40px;
-
+  background-color: var(--color-background);
+  position: relative;
+  z-index: 2;
   .logo {
     display: flex;
     padding: 0 16px;

src/views/components/View.vue

@@ -1551,6 +1551,7 @@ const onSuccessChargeCloud = () => {
     height: 40px;
     flex-shrink: 0;
     padding: 0 12px;
+    z-index: 2;
 
     a {
       display: flex;
@@ -1578,6 +1579,7 @@ const onSuccessChargeCloud = () => {
   #meta2d {
     border-top: 1px solid var(--color-background-input);
     height: calc(100vh - 81px);
+    z-index: 1;
 
     :deep(.meta2d-map) {
       background: var(--color-background);