From f6be46e88c851d09d5d66a2413c9e819e380845c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 14 Aug 2024 17:15:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/mult-color-picker/index.vue            | 4 +++-
 src/components/model-data-magic/components/tabs-styles.vue   | 4 ++--
 src/components/model-data-magic/index.vue                    | 2 +-
 src/components/model-data-magic/model-data-magic-content.vue | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index 38b0f20d..e9d1a943 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -11,7 +11,9 @@
                 <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)"></el-input>
+                        <el-input v-model="item.color_percentage" :maxlength="3" placeholder="请输入百分比" @change="change_color_percentage(index, $event)">
+                            <template #append>%</template>
+                        </el-input>
                     </div>
                     <div v-if="index + 1 !== color_list.length" class="connect-line"></div>
                 </div>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 480aa6c9..2466d94e 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -3,7 +3,7 @@
         <el-form-item label="底部背景">
             <div class="flex-col gap-10 w">
                 <div class="size-12">背景色</div>
-                <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                <mult-color-picker :key="form.carouselKey" :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
                 <div class="flex-row jc-sb align-c">
                     <div class="size-12">背景图</div>
                     <el-radio-group v-model="form.background_img_style" is-button>
@@ -47,7 +47,7 @@
         </el-form-item>
     </card-container>
     <card-container class="mb-8">
-        <carousel-indicator :value="form"></carousel-indicator>
+        <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
     </card-container>
 </template>
 <script setup lang="ts">
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 4bcba7ee..3adb4260 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -20,7 +20,7 @@
                     <div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
                         <template v-if="item.data_style.indicator_style == 'num'">
                             <div :style="item.data_style.indicator_styles" class="dot-item">
-                                <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list }}</span>
+                                <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
                             </div>
                         </template>
                         <template v-else>
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index e7e3db35..ccbfc02f 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -54,7 +54,7 @@ const props = defineProps({
 const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
 // 每个小模块独立的样式
 const data_style = {
-    color_list: [{ color: '#FFD9C3', color_percentage: '' }, { color: '#FFECE2', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }],
+    color_list: [{ color: '#FFD9C3', color_percentage: '0' }, { color: '#FFECE2', color_percentage: '12' }, { color: '#FFFFFF', color_percentage: '30' }],
     direction: '180deg',
     background_img_style: 2,
     background_img_url: [],