1.导航组新增间距字段

src/components/model-nav-group/index.ts

@@ -2,7 +2,7 @@ interface nav_group {
     id: string;
     img: uploadList[];
     title: string;
-    link: object,
+    link: object;
 }
 
 interface nav_group_content {
@@ -14,6 +14,7 @@ interface nav_group_content {
 }
 
 interface nav_group_styles {
+    space: number;
     radius: number;
     radius_top_left: number;
     radius_top_right: number;
@@ -30,6 +31,6 @@ interface nav_group_styles {
     color: string;
     title_color: string;
     title_size: number;
+    title_space: number;
     common_style: object;
 }
-

src/components/model-nav-group/index.vue

@@ -3,8 +3,8 @@
         <div :style="style_img_container">
             <el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll" @change="carousel_change">
                 <el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
-                    <div ref="bannerImg" class="flex flex-wrap gap-x-10">
-                        <div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c">
+                    <div ref="bannerImg" class="flex flex-wrap" :style="nav_space">
+                        <div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col align-c" :style="nav_title_space">
                             <div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
                                 <image-empty v-model="item1.img[0]" :style="img_style"></image-empty>
                             </div>
@@ -74,6 +74,10 @@ const indicator_style = computed(() => {
     }
     return indicator_styles;
 });
+// 导航间距
+const nav_space = computed(() => 'row-gap:' + (new_style.value?.space || '0') + 'px');
+// 导航标题间距
+const nav_title_space = computed(() => 'row-gap:' + (new_style.value?.title_space || '0') + 'px');
 // 获取轮播图片的节点
 const bannerImg = ref();
 // 轮播图自适应高度

src/components/model-nav-group/model-nav-group-styles.vue

@@ -1,6 +1,12 @@
 <template>
     <div class="common-style-height">
         <el-form :model="form" label-width="80">
+            <card-container>
+                <div class="mb-12">导航组</div>
+                <el-form-item label="间距">
+                    <slider v-model="form.space"></slider>
+                </el-form-item>
+            </card-container>
             <card-container>
                 <div class="mb-12">图片样式</div>
                 <el-form-item label="圆角">
@@ -32,6 +38,9 @@
                 <el-form-item label="标题字号">
                     <slider v-model="form.title_size" :max="100"></slider>
                 </el-form-item>
+                <el-form-item label="标题间距">
+                    <slider v-model="form.title_space" :max="100"></slider>
+                </el-form-item>
             </card-container>
         </el-form>
         <div class="divider-line"></div>
@@ -46,6 +55,7 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
     value: () => ({
+        space: 0,
         radius: 0,
         radius_top_left: 0,
         radius_top_right: 0,
@@ -68,6 +78,7 @@ const props = withDefaults(defineProps<Props>(), {
         color: '#DDDDDD',
         title_color: '#000',
         title_size: 12,
+        title_space: 10,
         common_style: {},
     }),
 });

src/config/const/nav-group.ts

@@ -15,6 +15,7 @@ interface defaultSearch {
         nav_content_list: nav_group[];
     };
     style: {
+        space: number;
         radius: number;
         radius_top_left: number;
         radius_top_right: number;
@@ -31,6 +32,7 @@ interface defaultSearch {
         color: string;
         title_color: string;
         title_size: number;
+        title_space: number;
         common_style: object;
     };
 }
@@ -69,6 +71,7 @@ const defaultSearch: defaultSearch = {
         ],
     },
     style: {
+        space: 10,
         radius: 0,
         radius_top_left: 0,
         radius_top_right: 0,
@@ -91,6 +94,7 @@ const defaultSearch: defaultSearch = {
         color: '#DDDDDD',
         title_color: '#000',
         title_size: 12,
+        title_space: 10,
         common_style: {
             ...defaultCommon,
             padding_top: 9,