diff --git a/src/components/base/color-picker/index.vue b/src/components/base/color-picker/index.vue
index b1e572e3..813230c7 100644
--- a/src/components/base/color-picker/index.vue
+++ b/src/components/base/color-picker/index.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="flex-row align-c gap-12">
-        <el-color-picker v-model="color" show-alpha :predefine="predefine_colors" @change="color_picker_change"  />
+        <el-color-picker v-model="color" :predefine="predefine_colors" @change="color_picker_change"  />
         <icon name="reset" color="primary" size="16" :class="['c-pointer', { disable: color == defaultColor }]" @click="reset_event"></icon>
     </div>
 </template>
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
+import { predefine_colors } from '@/utils';
 
-const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
 interface Props {
     defaultColor?: string;
 }
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 6d9682b9..f58a6859 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -78,10 +78,14 @@ const props = defineProps({
     }
 });
 // 初始化表单数据
+interface color_form {
+    color: string;
+    color_percentage: number | undefined;
+}
 const init_form = reactive({
     direction: '180deg',
     background_img_url: [] as uploadList[],
-    color_list: [{ color: '', color_percentage: '' }],
+    color_list: [{ color: '', color_percentage: undefined }] as color_form[],
     background_img_style: 2,
     padding: 0,
     padding_top: 0,
@@ -107,10 +111,7 @@ const init_form = reactive({
 // value 和初始化数据合并数据
 let form = reactive(Object.assign({}, init_form, props.value));
 const emit = defineEmits(['update:value']);
-interface color_form {
-    color: string;
-    color_percentage: string;
-}
+
 const mult_color_picker_event = (arry: color_form[], type: number) => {
     form.color_list = arry;
     form.direction = type.toString();
diff --git a/src/components/common/flex-gradients-create/index.vue b/src/components/common/flex-gradients-create/index.vue
index 43d1d026..bf2e317d 100644
--- a/src/components/common/flex-gradients-create/index.vue
+++ b/src/components/common/flex-gradients-create/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-for="(item, index) in list" :key="index" class="flex-row align-s gap-12">
         <div class="flex-col">
-            <el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" />
+            <el-color-picker v-model="item.color" :predefine="predefine_colors" />
             <div v-if="index == 0" class="connect-line"></div>
         </div>
         <icon name="reset" color="primary" size="16" class="c-pointer" @click="reset_event(index)"></icon>
@@ -9,10 +9,10 @@
 </template>
 
 <script setup lang="ts">
-const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
+import { predefine_colors } from '@/utils';
 interface list_page {
     color: string;
-    color_percentage: string;
+    color_percentage: number | undefined;
 }
 interface Props {
     colorList: list_page[];
@@ -26,7 +26,7 @@ const list = ref(props.colorList);
 // 默认值
 const reset_event = (index: number) => {
     list.value[index].color = props.defaultColor;
-    list.value[index].color_percentage = '';
+    list.value[index].color_percentage = undefined;
 };
 </script>
 
diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index 644f8ad0..57b4a94b 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -9,10 +9,10 @@
         <div class="flex-col">
             <div v-for="(item, index) in color_list" :key="index" class="flex-row align-s gap-12">
                 <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)" />
+                    <div class="flex-row align-c gap-12">
+                        <el-color-picker v-model="item.color" :predefine="predefine_colors" @change="change_color(index, $event)" />
                         <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>
+                            <el-input-number v-model="item.color_percentage" :max="999" placeholder="百分比" controls-position="right" class="number-show" @change="change_color_percentage(index, $event)"></el-input-number>
                             <div class="define-append">%</div>
                         </div>
                     </div>
@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import { predefine_colors } from '@/utils';
 const props = defineProps({
     type: {
         type: String,
@@ -46,7 +47,6 @@ const props = defineProps({
         },
     },
 });
-const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
 const direction_type = ref(props.type);
 let state = reactive({
     color_list: props.value.map((item: any) => {
@@ -63,7 +63,7 @@ const direction_type_change = (type: any) => {
     update_value();
 };
 const reset_event = () => {
-    color_list.value = [{ color: '', color_percentage: '' }];
+    color_list.value = [{ color: '', color_percentage: undefined }];
     update_value();
 };
 const del_event = (index: number) => {
@@ -71,7 +71,7 @@ const del_event = (index: number) => {
     update_value();
 };
 const add_event = () => {
-    color_list.value.push({ color: '', color_percentage: '' });
+    color_list.value.push({ color: '', color_percentage: undefined });
     update_value();
 };
 const change_color = (index: number, color: string | null) => {
diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue
index 6ff35024..60f904a0 100644
--- a/src/components/model-coupon/model-coupon-setting.vue
+++ b/src/components/model-coupon/model-coupon-setting.vue
@@ -29,9 +29,9 @@ const default_config = {
             desc_color: '#FF3830',
             // 主题1时不显示
             limit_send_count: '#999',
-            btn_background: [{ color: '#FF3830', color_percentage: '' }],
+            btn_background: [{ color: '#FF3830', color_percentage: undefined }],
             btn_color: '#FF3830',
-            background: [{ color: '#FFF1E1', color_percentage: '' }],
+            background: [{ color: '#FFF1E1', color_percentage: undefined }],
             spacing: 20,
         },
         theme_2: {
@@ -40,10 +40,10 @@ const default_config = {
             desc_color: '#999',
             // 主题2时不显示
             limit_send_count: '#999',
-            btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
+            btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
             btn_color: '#fff',
             // 当为主题2时，不显示
-            background: [{ color: '#fff', color_percentage: '' }],
+            background: [{ color: '#fff', color_percentage: undefined }],
             spacing: 15,
             common_style: {
                 background_img_url: [{ url: 'http://shopxo.com/static/upload/images/common/2024/08/28/1724815957918121.png' }],
@@ -54,9 +54,9 @@ const default_config = {
             name_color: '#FF3830',
             desc_color: '#FF3830',
             limit_send_count: '#999',
-            btn_background: [{ color: '#FF3830', color_percentage: '' }],
+            btn_background: [{ color: '#FF3830', color_percentage: undefined }],
             btn_color: '#FF3830',
-            background: [{ color: '#FFF1E1', color_percentage: '' }],
+            background: [{ color: '#FFF1E1', color_percentage: undefined }],
             // 当为主题34时，间距不给予修改，优惠券沾满整行
             spacing: 0,
         },
@@ -66,9 +66,9 @@ const default_config = {
             desc_color: '#333',
             // 主题4时不显示
             limit_send_count: '#999',
-            btn_background: [{ color: '#fff', color_percentage: '' }],
+            btn_background: [{ color: '#fff', color_percentage: undefined }],
             btn_color: '#FF3830',
-            background: [{ color: '#FFF1E1', color_percentage: '' }],
+            background: [{ color: '#FFF1E1', color_percentage: undefined }],
             // 当为主题34时，间距不给予修改，优惠券沾满整行
             spacing: 0,
         },
@@ -80,9 +80,9 @@ const default_config = {
             // 主题5时不显示
             limit_send_count: '#999',
             // 主题5时不显示
-            btn_background: [{ color: '#fff', color_percentage: '' }],
+            btn_background: [{ color: '#fff', color_percentage: undefined }],
             btn_color: '#fff',
-            background: [{ color: '#FFF1E1', color_percentage: '' }],
+            background: [{ color: '#FFF1E1', color_percentage: undefined }],
             spacing: 10,
         },
         theme_6: {
@@ -93,9 +93,9 @@ const default_config = {
             // 主题6时不显示
             limit_send_count: '#999',
             // 主题6时不显示
-            btn_background: [{ color: '#fff', color_percentage: '' }],
+            btn_background: [{ color: '#fff', color_percentage: undefined }],
             btn_color: '#fff',
-            background: [{ color: '#FF3830', color_percentage: '' }],
+            background: [{ color: '#FF3830', color_percentage: undefined }],
             spacing: 10,
         },
         theme_7: {
@@ -106,11 +106,11 @@ const default_config = {
             // 主题7时不显示
             limit_send_count: '#999',
             // 主题7时不显示
-            btn_background: [{ color: '#E1B47A', color_percentage: '' }],
+            btn_background: [{ color: '#E1B47A', color_percentage: undefined }],
             btn_color: '#fff',
             background: [
-                { color: '#FF3830', color_percentage: '' },
-                { color: '#E1B47A', color_percentage: '' },
+                { color: '#FF3830', color_percentage: undefined },
+                { color: '#E1B47A', color_percentage: undefined },
             ],
             spacing: 10,
         },
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 641a8071..d9258079 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -55,7 +55,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: '0' }, { color: '#FFECE2', color_percentage: '12' }, { color: '#FFFFFF', color_percentage: '30' }],
+    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: [],
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 202a0067..64dbac70 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -35,7 +35,7 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item label="显示数量">
-                            <el-input-number v-model="form.number" :min="1" :max="100" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
+                            <el-input-number v-model="form.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
                         </el-form-item>
                         <el-form-item label="排序类型">
                             <el-radio-group v-model="form.sort">
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index a1dd8f9c..3f148084 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -56,7 +56,7 @@
                                             </el-select>
                                         </el-form-item>
                                         <el-form-item label="显示数量">
-                                            <el-input-number v-model="row.number" :min="1" :max="100" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
+                                            <el-input-number v-model="row.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
                                         </el-form-item>
                                         <el-form-item label="排序类型">
                                             <el-radio-group v-model="row.sort">
diff --git a/src/components/model-user-info/index.vue b/src/components/model-user-info/index.vue
index c84446c3..5cafbace 100644
--- a/src/components/model-user-info/index.vue
+++ b/src/components/model-user-info/index.vue
@@ -66,8 +66,8 @@ const base_data = reactive({
     user_name_size: 16,
     // 用户ID颜色
     user_id_color_list: [
-        { color: 'rgba(254, 184, 143, 1)', color_percentage: '' },
-        { color: 'rgba(255, 227, 220, 1)', color_percentage: '' },
+        { color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
+        { color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
     ],
     // 用户ID颜色
     user_id_color: 'rgba(0, 0, 0, 1)',
diff --git a/src/components/model-user-info/model-user-info-styles.vue b/src/components/model-user-info/model-user-info-styles.vue
index 5580aa20..d9dd65a4 100644
--- a/src/components/model-user-info/model-user-info-styles.vue
+++ b/src/components/model-user-info/model-user-info-styles.vue
@@ -102,7 +102,7 @@ const props = defineProps({
                 user_name_color: 'rgba(0, 0, 0, 1)',
                 user_name_weight: '500',
                 user_name_size: 16,
-                user_id_color_list: [{ color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, { color: 'rgba(255, 227, 220, 1)', color_percentage: '' }],
+                user_id_color_list: [{ color: 'rgba(254, 184, 143, 1)', color_percentage: undefined}, { color: 'rgba(255, 227, 220, 1)', color_percentage: undefined }],
                 user_id_color: 'rgba(0, 0, 0, 1)',
                 user_id_direction: '90deg',
                 user_id_weight: '400',
diff --git a/src/layout/components/main/default/article-tabs.ts b/src/layout/components/main/default/article-tabs.ts
index 83bbdf3a..d60d2098 100644
--- a/src/layout/components/main/default/article-tabs.ts
+++ b/src/layout/components/main/default/article-tabs.ts
@@ -69,7 +69,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
         field_show: ['0', '1'],
     },
     style: {
-        tabs_checked: [{ color: '#FF2222', color_percentage: '' }, { color: '#FF9898', color_percentage: '' }],
+        tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
diff --git a/src/layout/components/main/default/coupon.ts b/src/layout/components/main/default/coupon.ts
index a7582401..7edd3ee6 100644
--- a/src/layout/components/main/default/coupon.ts
+++ b/src/layout/components/main/default/coupon.ts
@@ -38,10 +38,10 @@ const defaultCoupoin: DefaultCoupon = {
         name_color: '#FF3830',
         desc_color: '#FF3830',
         limit_send_count: '#999',
-        btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
+        btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
         btn_direction: '90deg',
         btn_color: '#FF3830',
-        background: [{ color: '#FFF1E1', color_percentage: '' }],
+        background: [{ color: '#FFF1E1', color_percentage: undefined }],
         direction: '90deg',
         spacing: 10,
         common_style: defaultCommon,
diff --git a/src/layout/components/main/default/custom.ts b/src/layout/components/main/default/custom.ts
index 7dab387a..7ec66b3d 100644
--- a/src/layout/components/main/default/custom.ts
+++ b/src/layout/components/main/default/custom.ts
@@ -23,7 +23,7 @@ const defaultSearch: defaultSearch = {
     style: {
         common_style: {
             ...defaultCommon,
-            color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: '' }],
+            color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
         }
     },
 };
diff --git a/src/layout/components/main/default/footer-nav.ts b/src/layout/components/main/default/footer-nav.ts
index 19c71b95..aa82083b 100644
--- a/src/layout/components/main/default/footer-nav.ts
+++ b/src/layout/components/main/default/footer-nav.ts
@@ -28,7 +28,7 @@ const defaultFooterNav: DefaultFooterNav = {
     style: {
         text_color_checked: 'rgba(255, 0, 0, 1)',
         default_text_color: 'rgba(0, 0, 0, 1)',
-        common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: '' }] },
+        common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: undefined }] },
     },
 };
 
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index 37881555..91d69cbe 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -29,7 +29,7 @@ const defaultFooterNav: DefaultFooterNav = {
     },
     style: {
         background_type: 'color_image',
-        background_color_list: [{ color: '#fff', color_percentage: '' }],
+        background_color_list: [{ color: '#fff', color_percentage: undefined }],
         background_direction: '180deg',
         background_img_style: 2,
         background_img_url: [],
diff --git a/src/layout/components/main/default/index.ts b/src/layout/components/main/default/index.ts
index 2e5b02ff..9932ed7f 100644
--- a/src/layout/components/main/default/index.ts
+++ b/src/layout/components/main/default/index.ts
@@ -1,6 +1,6 @@
 const defaultCommon: componentsCommonCommonStyle = {
     direction: '90deg',
-    color_list: [{ color: '', color_percentage: '' }],
+    color_list: [{ color: '', color_percentage: undefined }],
     background_img_style: 2,
     padding: 0,
     padding_top: 0,
diff --git a/src/layout/components/main/default/notice.ts b/src/layout/components/main/default/notice.ts
index 02ea2134..91ddd0ca 100644
--- a/src/layout/components/main/default/notice.ts
+++ b/src/layout/components/main/default/notice.ts
@@ -63,11 +63,11 @@ const defaultSearch: defaultSearch = {
         topic_color_list: [
             {
                 color: '',
-                color_percentage: '',
+                color_percentage: undefined,
             },
             {
                 color: '',
-                color_percentage: '',
+                color_percentage: undefined,
             },
         ],
         topic_color: '#000',
diff --git a/src/layout/components/main/default/search.ts b/src/layout/components/main/default/search.ts
index cd9252de..8172d50d 100644
--- a/src/layout/components/main/default/search.ts
+++ b/src/layout/components/main/default/search.ts
@@ -61,7 +61,7 @@ const defaultSearch: defaultSearch = {
     style: {
         icon_color: '#ccc',
         button_inner_color: '#fff',
-        color_list: [{ color: '#FF973D', color_percentage: '' }, { color: '#FF3131', color_percentage: '' }],
+        color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
         direction: '90deg',
         background_img_style: '',
         background_img_url: [],
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index 1f303703..b3dc5b11 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -111,11 +111,11 @@ const defaultProductList: DefaultProductList = {
         shop_button_color: [
             {
                 color: '#FF3D53',
-                color_percentage: ''
+                color_percentage: undefined
             },
             {
                 color: '#D73A3A',
-                color_percentage: ''
+                color_percentage: undefined
             }
         ],
         shop_button_text_color: '#fff',
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 572e4461..013d26fa 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -85,7 +85,7 @@ const defaultProductList: DefaultProductList = {
         shop_button_size: '1',
     },
     style: {
-        tabs_checked: [{ color: '#FF2222', color_percentage: '' }, { color: '#FF9898', color_percentage: '' }],
+        tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
@@ -135,11 +135,11 @@ const defaultProductList: DefaultProductList = {
         shop_button_color: [
             {
                 color: '#FF3D53',
-                color_percentage: ''
+                color_percentage: undefined
             },
             {
                 color: '#D73A3A',
-                color_percentage: ''
+                color_percentage: undefined
             }
         ],
         shop_button_text_color: '#fff',
diff --git a/src/layout/components/main/default/tabs.ts b/src/layout/components/main/default/tabs.ts
index 088c68e5..ee0b337e 100644
--- a/src/layout/components/main/default/tabs.ts
+++ b/src/layout/components/main/default/tabs.ts
@@ -39,7 +39,7 @@ const defaultTabs: defaultTabs = {
         ],
     },
     style: {
-        tabs_checked: [{ color: '#FF2222', color_percentage: '' }, { color: '#FF9898', color_percentage: '' }],
+        tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
diff --git a/src/layout/components/main/default/user-info.ts b/src/layout/components/main/default/user-info.ts
index 8437f155..69f5081d 100644
--- a/src/layout/components/main/default/user-info.ts
+++ b/src/layout/components/main/default/user-info.ts
@@ -39,8 +39,8 @@ const defaultUserInfo: DefaultUserInfo = {
         user_name_weight: '500',
         user_name_size: 16,
         user_id_color_list: [
-            { color: 'rgba(254, 184, 143, 1)', color_percentage: '' },
-            { color: 'rgba(255, 227, 220, 1)', color_percentage: '' },
+            { color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
+            { color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
         ],
         user_id_color: 'rgba(0, 0, 0, 1)',
         user_id_direction: '90deg',
@@ -56,7 +56,7 @@ const defaultUserInfo: DefaultUserInfo = {
         stats_number_size: 16,
         common_style: {
             ...defaultCommon,
-            color_list: [{ color: '#fff', color_percentage: '' }],
+            color_list: [{ color: '#fff', color_percentage: undefined }],
         },
     },
 };
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7578f731..4b681931 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -182,3 +182,8 @@ div:focus {
     }
 }
 // 链接弹窗表格用到  ------ end
+
+
+.el-color-predefine__colors .el-color-predefine__color-selector{
+    box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1);
+}
\ No newline at end of file
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index d3cb1eca..aa479d8c 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -15,7 +15,7 @@ declare global {
     }
     interface color_list {
         color: string;
-        color_percentage: string;
+        color_percentage: number | undefined;
     }
     /**
      * 渐变色参数集合
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2d5c7ee9..1cf7e804 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
 import { isEmpty } from 'lodash';
+export const predefine_colors = [ '#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
 /**
  * 判断一个对象是否为空。
  *