修改向上浮动内容

src/components/common/carousel-indicator/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mb-12">指示器设置</div>
     <el-form-item label="是否显示">
-        <el-switch v-model="form.is_show" size="large" active-value="1" inactive-value="0"/>
+        <el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
     </el-form-item>
     <template v-if="form.is_show == '1'">
         <el-form-item label="指示器样式">

src/components/common/common-styles/index.vue

@@ -28,6 +28,9 @@
                         <color-picker v-model="form.color_list[0].color"></color-picker>
                     </div>
                 </el-form-item>
+                <el-form-item label="组件上浮">
+                    <el-input-number v-model="form.floating_up" :min="0" :max="100" controls-position="right" />
+                </el-form-item>
                 <el-form-item label="内边距">
                     <padding :value="form" @update:value="padding_change"></padding>
                 </el-form-item>
@@ -70,6 +73,7 @@ const props = defineProps({
             background_img: [] as uploadList[],
             color_list: [{ color: '', color_percentage: undefined }] as color_list[],
             background_img_style: 2,
+            floating_up: 0,
             padding: 0,
             padding_top: 0,
             padding_bottom: 0,
@@ -139,4 +143,9 @@ const padding_change = (padding: any) => {
 .common-styles {
     width: 100%;
 }
+:deep(.el-input-number.is-controls-right .el-input__wrapper) {
+    .el-input__inner {
+        text-align: left;
+    }
+}
 </style>

src/types/global.d.ts

@@ -87,6 +87,7 @@ declare global {
         color_list: color_list[];
         direction: string;
         background_img_style: number;
+        floating_up: number;
         padding: number;
         padding_top: number;
         padding_bottom: number;

src/views/layout/components/main/default/index.ts

@@ -2,6 +2,7 @@ const defaultCommon: componentsCommonCommonStyle = {
     direction: '90deg',
     color_list: [{ color: '', color_percentage: undefined }],
     background_img_style: 2,
+    floating_up: 0,
     padding: 0,
     padding_top: 0,
     padding_bottom: 0,

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

@@ -137,7 +137,7 @@
             .plug-in-border {
                 position: relative;
                 // border: 0.2rem solid $cr-main;
-                z-index: 1;
+                // z-index: 1;
                 box-sizing: border-box;
             }
             .plug-in-border::before {

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

@@ -288,9 +288,15 @@ const model_class = computed(() => {
         return ['plug-in-table', { 'plug-in-border': item.show_tabs == '1', 'float-window': item.key == 'float-window', 'plug-in-animation': item.show_tabs != '1' && show_model_border }];
     };
 });
-
+interface com_data {
+    style: {
+        common_style: {
+            floating_up: number;
+        }
+    }
+}
 const model_style = computed(() => {
-    return (item: { id: string; key: string }) => {
+    return (item: { id: string; key: string, com_data: com_data }) => {
         // 40是容器的上下间距， 60是顶部的高度
         const container_height = window.innerHeight - 100;
         let bottom = 0;
@@ -312,9 +318,10 @@ const model_style = computed(() => {
                 bottom = container_height - 60 + height;
             }
         }
-        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : '';
+        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${ item.com_data.style.common_style?.floating_up || 0 }px;`;
     };
 });
+
 const icon_arrow_disable = computed(() => {
     return (item_key: string, index: number, key: string) => {
         return arrow_disable_method(item_key, index, key) ? '' : 'disabled';
@@ -360,7 +367,6 @@ interface FloatBottom {
     [key: string]: string;
 }
 const float_bottom = reactive<FloatBottom>({});
-const float_location = reactive<FloatBottom>({});
 
 // 开始拖拽的时候显示位置提示
 const onStart = () => {
@@ -608,7 +614,6 @@ const footer_nav_event = () => {
 //#endregion
 const float_bottom_change = (val: { bottom: string; location: string }, id: string) => {
     float_bottom[id] = val.bottom;
-    float_location[id] = val.location;
 };
 </script>