From b49154d54f01067056f5309f60f3cb2d2da6ba0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 29 Aug 2024 10:58:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=94=B9=E5=8F=98=E7=9A=84?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/mult-color-picker/index.vue        | 36 ++++++++++++++++---
 src/components/model-nav-group/index.vue      |  2 +-
 .../components/main/default/nav-group.ts      |  2 +-
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index a35155cb..644f8ad0 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -11,9 +11,10 @@
                 <div class="flex-col">
                     <div class="flex-row align-s gap-12">
                         <el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" @change="change_color(index, $event)" />
-                        <el-input v-model="item.color_percentage" :maxlength="3" placeholder="请输入百分比" @change="change_color_percentage(index, $event)">
-                            <template #append>%</template>
-                        </el-input>
+                        <div class="re mo-input-number">
+                            <el-input-number v-model="item.color_percentage" :max="999" label="请输入百分比" type="number" controls-position="right" class="number-show" @change="change_color_percentage(index, $event)"></el-input-number>
+                            <div class="define-append">%</div>
+                        </div>
                     </div>
                     <div v-if="index + 1 !== color_list.length" class="connect-line"></div>
                 </div>
@@ -77,8 +78,8 @@ const change_color = (index: number, color: string | null) => {
     color_list.value[index].color = color;
     update_value();
 };
-const change_color_percentage = (index: number, percentage: string | null) => {
-    color_list.value[index].color_percentage = percentage;
+const change_color_percentage = (index: number, percentage: number | undefined) => {
+    color_list.value[index].color_percentage = percentage?.toString();
     update_value();
 };
 const update_value = () => {
@@ -138,4 +139,29 @@ const update_value = () => {
         color: $cr-primary-dark;
     }
 }
+.mo-input-number {
+    :deep(.el-input-number) {
+        .el-input-number__decrease, .el-input-number__increase {
+            right: 3.4rem;
+        }
+    }
+    .number-show {
+        :deep(.el-input__wrapper .el-input__inner) {
+            text-align: left;
+        }
+    }
+    .define-append {
+        right: 0.1rem;
+        top: 0.2rem;
+        background: #f5f7fa;
+        color: #999;
+        height: 3rem;
+        padding: 0 1rem;
+        position: absolute;
+        font-size: 1.2rem;
+        border-top-right-radius: 0.4rem;
+        border-bottom-right-radius: 0.4rem;
+    }
+}
+
 </style>
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 8697b3e9..6ebde460 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -12,7 +12,7 @@
                 </div>
             </el-carousel-item>
         </el-carousel>
-        <div v-if="form.display_style == 'slide' && new_style.is_show" :style="{ 'justify-content': new_style?.indicator_location || 'center'}" class="dot flex mt-10">
+        <div v-if="form.display_style == 'slide' && new_style.is_show" :style="{ 'justify-content': new_style?.indicator_location || 'center'}" class="dot flex mt-10 mb-4">
             <template v-if="new_style.indicator_style == 'num'">
                 <div :style="indicator_style" class="dot-item">
                     <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ nav_content_list.length }}</span>
diff --git a/src/layout/components/main/default/nav-group.ts b/src/layout/components/main/default/nav-group.ts
index 0d6bf0b0..30fd7c67 100644
--- a/src/layout/components/main/default/nav-group.ts
+++ b/src/layout/components/main/default/nav-group.ts
@@ -94,7 +94,7 @@ const defaultSearch: defaultSearch = {
         common_style: {
             ...defaultCommon,
             padding_top: 9,
-            padding_bottom: 9,
+            padding_bottom: 5,
             padding_left: 15,
             padding_right: 15,
         },