修改模块顺序和关键字间距

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

@@ -19,10 +19,10 @@
                     </div>
                 </el-form-item>
                 <el-form-item v-if="isFloatingUp" label="组件上浮">
-                    <slider v-model="form.floating_up" :min="0" :max="100"></slider>
+                    <slider v-model="form.floating_up" :min="0" :max="200"></slider>
                 </el-form-item>
-                <el-form-item v-if="isFloatingUp" label="是否置底">
-                    <el-switch v-model="form.is_bottom_up" active-value="1" inactive-value="0" />
+                <el-form-item v-if="isFloatingUp" label="组件层级">
+                    <slider v-model="form.module_z_index" :min="0" :max="10"></slider>
                 </el-form-item>
                 <el-form-item label="内边距">
                     <padding :value="form" @update:value="padding_change"></padding>

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

@@ -151,7 +151,7 @@ interface com_data {
     style: {
         offset_number_percentage: string,
         common_style: {
-            is_bottom_up: string;
+            module_z_index: number;
             floating_up: number;
         };
     };
@@ -180,13 +180,7 @@ const model_style = computed(() => {
             }
         }
         // 默认组件z-index为1
-        let z_index = 'z-index: 1';
-        // 如果开通上浮显示的时候，会改变他的z-index值
-        if (item.com_data.style.common_style?.is_bottom_up == '1') {
-            z_index = 'z-index: 0';
-        } else {
-            z_index = 'z-index: 1';
-        }
+        let z_index = `z-index: ${ item.com_data.style.common_style?.module_z_index || 0}`;
         item.com_data.style.offset_number_percentage = (bottom / window.innerHeight).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;${z_index};`;
     };
@@ -398,7 +392,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
     position: fixed;
     max-width: 39rem;
     margin: 0 auto;
-    z-index: 3;
+    z-index: 13;
 }
 .main-content {
     max-width: 39rem;

src/components/model-title/index.vue

@@ -15,8 +15,10 @@
                     </div>
                     <div class="flex-row gap-10 align-c right-0 abs">
                         <template v-if="form.keyword_show == '1'">
-                            <div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
-                                {{ item.title }}
+                            <div class="flex-row align-c" :style="'gap:' + new_style.keyword_spacing + 'px;'">
+                                <div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
+                                    {{ item.title }}
+                                </div>
                             </div>
                         </template>
                         <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>

src/components/model-title/model-title-styles.vue

@@ -59,6 +59,9 @@
                 <el-form-item label="文字大小">
                     <slider v-model="form.keyword_size" :max="100"></slider>
                 </el-form-item>
+                <el-form-item label="间距">
+                    <slider v-model="form.keyword_spacing" :min="0" :max="50"></slider>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>

src/components/page-settings/index.vue

@@ -177,7 +177,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     position: v-bind(position);
     top: 0;
     left: 50%;
-    z-index: 3;
+    z-index: 13;
     transform: translateX(-50%);
     width: 39rem;
     .roll {

src/config/const/index.ts

@@ -3,7 +3,7 @@ const defaultCommon: componentsCommonCommonStyle = {
     color_list: [{ color: '', color_percentage: undefined }],
     background_img_style: '0',
     floating_up: 0,
-    is_bottom_up: '0',
+    module_z_index: 0,
     padding_top_safe_value: 0, // 安全距离值，在顶部时，需要加上安全距离，防止遮挡
     padding: 0,
     padding_top: 0,

src/config/const/title.ts

@@ -34,6 +34,7 @@ interface defaultSearch {
         title_line: string;
         keyword_color: string;
         keyword_size: number;
+        keyword_spacing: number;
         right_color: string;
         right_size: number;
         common_style: object;
@@ -85,6 +86,7 @@ const defaultSearch: defaultSearch = {
         // 关键字设置
         keyword_color: '#000',
         keyword_size: 12,
+        keyword_spacing: 10,
         // 右侧更多按钮设置
         right_color: '#999',
         right_size: 12,

src/types/global.d.ts

@@ -88,7 +88,7 @@ declare global {
         direction: string;
         background_img_style: string;
         floating_up: number;
-        is_bottom_up: string;
+        module_z_index: number;
         padding_top_safe_value: number;
         padding: number;
         padding_top: number;

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

@@ -77,7 +77,7 @@
                 bottom: 0;
                 left: 50%;
                 transform: translateX(-50%);
-                z-index: 2;
+                z-index: 12;
                 .roll {
                     border-top: 0.1rem solid #f5f5f5;
                     height: 4rem;