1.head解决抖动问题

2.解决head颜色没有盖全的问题

src/components/common/div-content/index.vue

@@ -3,7 +3,7 @@
         <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
             <el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" />
             <el-icon class="iconfont icon-del" @click.stop="del(index)" />
-            <el-icon :class="['iconfont icon-copy', {'disabled': props.isTabs }] " @click.stop="copy(index)" />
+            <el-icon :class="['iconfont icon-copy', { disabled: props.isTabs }]" @click.stop="copy(index)" />
             <el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" />
             <el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
         </div>
@@ -118,13 +118,17 @@ const props = withDefaults(defineProps<Props>(), {
     diyData: () => [],
     showModelBorder: false,
     isTabs: false,
-    mainContentStyle: ''
+    mainContentStyle: '',
 });
 const diy_data = ref(props.diyData);
 
-watch(() => props.diyData, (val) => {
+watch(
-    diy_data.value = val;
+    () => props.diyData,
-}, {immediate: true, deep: true});
+    (val) => {
+        diy_data.value = val;
+    },
+    { immediate: true, deep: true }
+);
 
 // 模块的class
 const model_class = computed(() => {
@@ -137,11 +141,11 @@ interface com_data {
     style: {
         common_style: {
             floating_up: number;
-        }
+        };
-    }
+    };
 }
 const model_style = computed(() => {
-    return (item: { id: string; key: string, com_data: com_data }) => {
+    return (item: { id: string; key: string; com_data: com_data }) => {
         // 40是容器的上下间距， 60是顶部的高度
         const container_height = window.innerHeight - 100;
         let bottom = 0;
@@ -167,7 +171,7 @@ const model_style = computed(() => {
         if (item.com_data.style.common_style?.floating_up != 0) {
             z_index = `z-index: 1`;
         }
-        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${ item.com_data.style.common_style?.floating_up || 0 }px;${ z_index };`;
+        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${item.com_data.style.common_style?.floating_up || 0}px;${z_index};`;
     };
 });
 
@@ -278,11 +282,10 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 .plug-in-border::before {
     content: '';
     width: calc(100% + 0.4rem);
-    height: calc(100% + 0.4rem);
+    height: 100%;
     position: absolute;
-    top: -0.2rem;
+    top: 0;
     left: -0.2rem;
-    // z-index: 1;
     border: 0.2rem solid $cr-main;
 }
 .plug-in-animation {

src/components/page-settings/index.vue

@@ -128,7 +128,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     transform: translateX(-50%);
     width: 39rem;
     .roll {
-        padding-bottom: 0.9rem;
+        padding-bottom: 1rem;
         margin: 0 auto;
         cursor: pointer;
         z-index: 1;
@@ -154,11 +154,18 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     }
 }
 .page-settings-border {
-    // border: 0.2rem solid $cr-main;
     position: relative;
-    box-shadow: 0px 0 0px 0.2rem $cr-main !important;
     z-index: 3;
     box-sizing: border-box;
+    &::before {
+        content: '';
+        height: 100%;
+        width: calc(100% + 0.4rem);
+        position: absolute;
+        left: -0.2rem;
+        right: -0.2rem;
+        border: 0.2rem solid $cr-main;
+    }
 }
 .logo-outer-style {
     height: 2.8rem;

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

@@ -89,7 +89,7 @@
 
             .model-drag {
                 overflow-y: auto;
-                padding-top: 0.2rem;
+                // padding-top: 0.2rem;
                 max-height: 84.4rem;
                 height: 100%;
                 &::-webkit-scrollbar {
@@ -194,7 +194,8 @@
     transform: translateY(-50%);
     left: 0;
     z-index: 3;
-    .layout-toggle-bar-top, .layout-toggle-bar-bottom {
+    .layout-toggle-bar-top,
+    .layout-toggle-bar-bottom {
         position: absolute;
         width: 0.2rem;
         border-radius: 0.2rem;
@@ -208,7 +209,8 @@
     }
 }
 .layout-toggle-bar-close:hover {
-    .layout-toggle-bar-top, .layout-toggle-bar-bottom {
+    .layout-toggle-bar-top,
+    .layout-toggle-bar-bottom {
         background: $cr-main;
         transition: 1s ease;
     }
@@ -221,7 +223,8 @@
 }
 
 .layout-toggle-bar-open:hover {
-    .layout-toggle-bar-top, .layout-toggle-bar-bottom {
+    .layout-toggle-bar-top,
+    .layout-toggle-bar-bottom {
         background: $cr-main;
         transition: 1s ease;
     }

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

@@ -166,7 +166,7 @@ watchEffect(() => {
         const { immersive_style, up_slide_display } = new_style;
         // 不开启沉浸式 和 上滑显示
         if (immersive_style == '1' || up_slide_display != '1') {
-            top_padding.value = 2;
+            top_padding.value = 0;
         } else {
             top_padding.value = 90;
         }
@@ -432,7 +432,7 @@ const scroll = () => {
 const scoll_top = ref(0);
 const on_scroll_event = (e: any) => {
     scoll_top.value = e.target.scrollTop;
-}
+};
 //#endregion
 //#region 页面设置 导出 导入
 // 在组件挂载时默认执行