Pre Merge pull request !536 from 英狐/master

src/components/DiyEditor/components/mobile/NavigationBar/index.vue

@@ -28,10 +28,13 @@ const props = defineProps<{ property: NavigationBarProperty }>()
 
 // 背景
 const bgStyle = computed(() => {
-  const background =
+  let background =
     props.property.bgType === 'img' && props.property.bgImg
       ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
       : props.property.bgColor
+  if (!background && props.property.styleType === 'inner') {
+    background = 'transparent'
+  }
   return { background }
 })
 // 单元格列表

src/components/DiyEditor/index.vue

@@ -34,20 +34,6 @@
       <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
       <!-- 中心：设计区域（ComponentContainer） -->
       <div class="editor-center page-prop-area" @click="handlePageSelected">
-        <!-- 手机顶部 -->
-        <div class="editor-design-top">
-          <!-- 手机顶部状态栏 -->
-          <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
-          <!-- 手机顶部导航栏 -->
-          <ComponentContainer
-            v-if="showNavigationBar"
-            :component="navigationBarComponent"
-            :show-toolbar="false"
-            :active="selectedComponent?.id === navigationBarComponent.id"
-            @click="handleNavigationBarSelected"
-            class="cursor-pointer!"
-          />
-        </div>
         <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
         <div
           v-for="(component, index) in pageComponents"
@@ -60,7 +46,6 @@
             :property="component.property"
           />
         </div>
-        <!-- 手机页面编辑区域 -->
         <el-scrollbar
           height="100%"
           wrap-class="editor-design-center page-prop-area"
@@ -70,6 +55,21 @@
             backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
           }"
         >
+          <!--手机顶部-->
+          <div class="editor-design-top" :class="showNavigationBar && navigationBarComponent.property.styleType === 'inner' ? 'editor-design-top-inner' : ''">
+            <!-- 手机顶部状态栏 -->
+            <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
+            <!-- 手机顶部导航栏 -->
+            <ComponentContainer
+              v-if="showNavigationBar"
+              :component="navigationBarComponent"
+              :show-toolbar="false"
+              :active="selectedComponent?.id === navigationBarComponent.id"
+              @click="handleNavigationBarSelected"
+              class="cursor-pointer!"
+            />
+          </div>
+          <!-- 手机页面编辑区域 -->
           <draggable
             class="page-prop-area drag-area"
             v-model="pageComponents"
@@ -493,7 +493,9 @@ $toolbar-height: 42px;
       flex: 1 1 0;
       flex-direction: column;
       justify-content: center;
-
+      /* 如果父级元素设置了transform属性，position:relative/absolute/fixed会基于此定位 */
+      transform: translate(0, 0);
+      
       /* 手机顶部 */
       .editor-design-top {
         display: flex;
@@ -508,7 +510,15 @@ $toolbar-height: 42px;
           background-color: #fff;
         }
       }
-
+      
+      .editor-design-top-inner {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+      }
+      
       /* 手机底部导航 */
       .editor-design-bottom {
         width: $phone-width;
@@ -531,6 +541,8 @@ $toolbar-height: 42px;
           .drag-area {
             width: 100%;
             height: 100%;
+            /* fix：子元素添加margin-top影响父元素 */
+            display: inline-block;
           }
         }
       }