1.代码优化

sws 2024-09-03

src/views/layout/components/main/index.scss

@@ -73,9 +73,11 @@
         justify-content: center;
         overflow: hidden;
         height: 100%;
+        padding: 2rem 0;
         .model-content {
             position: relative;
-            height: 84.6rem;
+            max-height: 84.6rem;
+            height: 100%;
             .model-bottom {
                 position: absolute;
                 bottom: 0;
@@ -95,6 +97,7 @@
                 overflow-y: auto;
                 padding-top: 0.2rem;
                 max-height: 84.4rem;
+                height: 100%;
                 &::-webkit-scrollbar {
                     display: none;
                 }
@@ -102,6 +105,10 @@
                     width: 39rem;
                     background: #f5f5f5;
                     margin: 0 auto;
+                    min-height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: stretch;
                     .drag-area .float-window {
                         position: fixed;
                         max-width: 39rem;
@@ -112,6 +119,13 @@
                         max-width: 39rem;
                         overflow: hidden;
                     }
+                    .model-wall-content {
+                        min-height: 100%;
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: stretch;
+                    }
                 }
             }
             // 悬浮按钮控制， 未选中情况下宽度自适应
@@ -139,6 +153,7 @@
                 position: absolute;
                 top: -0.2rem;
                 left: -0.2rem;
+                z-index: 1;
                 border: 0.2rem solid $cr-main;
             }
             .plug-in-animation {
@@ -279,7 +294,7 @@
         transition: 0.4s ease;
     }
     .drawer-drag-bg {
-        background: #F2F8FF;
+        background: #f2f8ff;
     }
     .drawer-drag-area {
         height: calc(100% - 6rem);
@@ -288,8 +303,8 @@
     .drawer-drag {
         cursor: move;
     }
-    .drawer-drag:hover{
-        background: #F2F8FF;
+    .drawer-drag:hover {
+        background: #f2f8ff;
         .iconfont.icon-close-b {
             display: block !important;
         }
@@ -297,7 +312,7 @@
     .iconfont.icon-close-b {
         right: 1rem;
         top: 1.4rem;
-        color: #8A8A8A;
+        color: #8a8a8a;
         cursor: pointer;
     }
-}
+}

src/views/layout/components/main/index.vue

@@ -46,7 +46,7 @@
                     <!-- 页面设置 -->
                     <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                     <div class="model-wall" :style="content_style">
-                        <div :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
+                        <div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
                             <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
                                 <div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
                                     <div v-if="item.show_tabs" class="plug-in-right" chosenClass="close">
@@ -207,8 +207,6 @@ const top_margin = ref(0);
 const content_style = ref('');
 const main_content_style = ref('');
 const bottom_navigation_show = ref(true);
-const container_min_height = ref(681);
-const height = computed(() => container_min_height.value + 'px');
 watchEffect(() => {
     const data = page_data.value.com_data;
     if (data) {
@@ -223,11 +221,9 @@ watchEffect(() => {
         const { immersive_style, up_slide_display } = new_style;
         // 不开启沉浸式 和 上滑显示
         if (immersive_style || !up_slide_display) {
-            top_padding.value = 2;
-            container_min_height.value = 681 + 88;
+            top_padding.value = 0;
         } else {
             top_padding.value = 90;
-            container_min_height.value = 681;
         }
         // 开启沉浸式并且没有开通上滑显示
         if (immersive_style && !up_slide_display) {
@@ -235,12 +231,6 @@ watchEffect(() => {
         } else {
             top_margin.value = 0;
         }
-        // 开启沉浸式时要加上顶部的高度，关闭底部导航的时候要加上底部的高度
-        if (bottom_navigation_show.value) {
-            container_min_height.value = container_min_height.value - footer_nav_counter_store.padding_footer;
-        } else {
-            container_min_height.value = container_min_height.value + footer_nav_counter_store.padding_footer;
-        }
     }
 });
 
@@ -616,6 +606,10 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 <style lang="scss" scoped>
 @import 'index.scss';
 .drag-area {
-    min-height: v-bind(height);
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
 }
 </style>