From a1ad14ad46ead36371e232871f975c2a44f6e805 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 11 Oct 2024 13:42:58 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=AF=BC=E8=88=AA=E7=BB=84=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-nav-group/index.ts               |  5 +++--
 src/components/model-nav-group/index.vue              |  8 ++++++--
 .../model-nav-group/model-nav-group-styles.vue        | 11 +++++++++++
 src/config/const/nav-group.ts                         |  4 ++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/model-nav-group/index.ts b/src/components/model-nav-group/index.ts
index 28821ddb..5f3738ce 100644
--- a/src/components/model-nav-group/index.ts
+++ b/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;
 }
-
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 372cd770..6331d876 100644
--- a/src/components/model-nav-group/index.vue
+++ b/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();
 // 轮播图自适应高度
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index d09b00a1..c4c73580 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/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: {},
     }),
 });
diff --git a/src/config/const/nav-group.ts b/src/config/const/nav-group.ts
index b65a109d..57375070 100644
--- a/src/config/const/nav-group.ts
+++ b/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,