From 3cfc467bf6d7d2332863699daaef8c4934555f5c 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:03:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B8=90=E5=8F=98=E7=9A=84?=
 =?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/common-styles/index.vue |  10 +-
 .../common/flex-gradients-create/index.vue    |   2 +
 src/components/common/magic-cube/index.vue    |  25 +++-
 .../common/mult-color-picker/index.vue        |  25 ++--
 .../components/tabs-content.vue               |   3 +-
 .../components/tabs-styles.vue                |   4 +-
 src/components/model-data-magic/index.vue     | 122 ++++++++++++++++--
 .../model-data-magic-content.vue              |  38 ++++--
 src/components/model-notice/index.vue         |   3 +-
 src/components/model-shop-list/index.vue      |   3 +-
 src/components/model-user-info/index.vue      |   2 +-
 .../model-user-info-styles.vue                |   2 +-
 src/components/page-settings/index.ts         |   2 +-
 src/components/page-settings/page-content.vue |   2 +-
 src/layout/components/main/default/custom.ts  |   2 +-
 .../components/main/default/footer-nav.ts     |   2 +-
 .../components/main/default/header-nav.ts     |   6 +-
 src/layout/components/main/default/index.ts   |   2 +-
 src/layout/components/main/default/notice.ts  |   9 +-
 src/layout/components/main/default/search.ts  |   2 +-
 .../components/main/default/shop-list.ts      |   9 +-
 .../components/main/default/shop-tabs.ts      |   9 +-
 .../components/main/default/text-title.ts     |   1 -
 .../components/main/default/user-info.ts      |   4 +-
 src/types/global.d.ts                         |   8 +-
 src/utils/index.ts                            |  36 ++++--
 26 files changed, 240 insertions(+), 93 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index a9788e4a..053c1421 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -83,9 +83,9 @@ const props = defineProps({
 });
 // 初始化表单数据
 const init_form = reactive({
-    direction: '0deg',
+    direction: '180deg',
     background_img_url: [] as uploadList[],
-    color_list: [''],
+    color_list: [{ color: '', color_percentage: '' }],
     background_img_style: 2,
     padding: 0,
     padding_top: 0,
@@ -111,7 +111,11 @@ const init_form = reactive({
 // value 和初始化数据合并数据
 let form = reactive(Object.assign({}, init_form, props.value));
 const emit = defineEmits(['update:value']);
-const mult_color_picker_event = (arry: string[], type: number) => {
+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();
     emit('update:value', form);
diff --git a/src/components/common/flex-gradients-create/index.vue b/src/components/common/flex-gradients-create/index.vue
index 73ac073f..43d1d026 100644
--- a/src/components/common/flex-gradients-create/index.vue
+++ b/src/components/common/flex-gradients-create/index.vue
@@ -12,6 +12,7 @@
 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 list_page {
     color: string;
+    color_percentage: string;
 }
 interface Props {
     colorList: list_page[];
@@ -25,6 +26,7 @@ const list = ref(props.colorList);
 // 默认值
 const reset_event = (index: number) => {
     list.value[index].color = props.defaultColor;
+    list.value[index].color_percentage = '';
 };
 </script>
 
diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index c5d94b19..48d90098 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -22,7 +22,7 @@
                         {{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
                         像素
                         <template v-if="props.type == 'data'">
-                            <div class="mt-12">共有3个商品</div>
+                            <div>{{ data_title(item) }}</div>
                         </template>
                     </div>
                 </template>
@@ -33,6 +33,11 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
+interface content {
+    data_type: string;
+    product_list: Array<string>;
+    img_list: Array<string>;
+}
 interface CubeItem {
     start: {
         x: number;
@@ -42,9 +47,8 @@ interface CubeItem {
         x: number;
         y: number;
     };
-    img?: uploadList[],
-    img_list?: any,
-    data_list?: any
+    img?: uploadList[];
+    data_content?: content
 }
 
 interface Props {
@@ -210,9 +214,16 @@ const selected_click = (index: number) => {
     selected_active.value = index;
     emits('selected_click', index);
 };
-const tips = () => {
-    console.log(selectedList.value[selected_active.value].img_list);
-    console.log(selectedList.value[selected_active.value].data_list);
+const data_title = (item: CubeItem) => {
+    let title = `共有`;
+    if (item.data_content) {
+        if (item.data_content.data_type == 'commodity') {
+            title += `${ item.data_content.product_list.length }个商品`;
+        } else {
+            title += `${ item.data_content.img_list.length }个图片`;
+        }
+    }
+    return title;
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index 58637a18..38b0f20d 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -1,15 +1,18 @@
 <template>
     <div class="mult-color-picker">
         <el-radio-group v-model="direction_type" @change="direction_type_change">
-            <el-radio value="0deg">横向</el-radio>
+            <el-radio value="180deg">横向</el-radio>
             <el-radio value="90deg">纵向</el-radio>
-            <el-radio value="315deg">左斜</el-radio>
-            <el-radio value="45deg">右斜</el-radio>
+            <el-radio value="45deg">左斜</el-radio>
+            <el-radio value="315deg">右斜</el-radio>
         </el-radio-group>
         <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">
-                    <el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" @change="change_color(index, $event)" />
+                    <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>
+                    </div>
                     <div v-if="index + 1 !== color_list.length" class="connect-line"></div>
                 </div>
                 <template v-if="index == 0">
@@ -46,7 +49,8 @@ let color_list = reactive(
     //将数组['#fff']改为对象数组
     props.value.map((item: any) => {
         return {
-            color: item,
+            color: item.color,
+            color_percentage: item.color_percentage,
         };
     })
 );
@@ -56,7 +60,7 @@ const direction_type_change = (type: any) => {
     update_value();
 };
 const reset_event = () => {
-    color_list = [{ color: '' }];
+    color_list = [{ color: '', color_percentage: '' }];
     update_value();
 };
 const del_event = (index: number) => {
@@ -64,16 +68,19 @@ const del_event = (index: number) => {
     update_value();
 };
 const add_event = () => {
-    color_list.push({ color: '' });
+    color_list.push({ color: '', color_percentage: '' });
     update_value();
 };
 const change_color = (index: number, color: string | null) => {
     color_list[index].color = color;
     update_value();
 };
+const change_color_percentage = (index: number, percentage: string | null) => {
+    color_list[index].color_percentage = percentage;
+    update_value();
+};
 const update_value = () => {
-    let new_color_list = color_list.map((item) => item.color) || [];
-    emit('update:value', new_color_list, direction_type.value);
+    emit('update:value', color_list, direction_type.value);
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 133d36ad..4f324d14 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -34,7 +34,7 @@
     </card-container>
     <card-container v-else class="mb-8">
         <div class="mb-12">商品设置</div>
-        <drag :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
+        <drag :key="form.product_list" :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
             <template #default="{ row }">
                 <upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
                 <el-image :src="row.url" fit="contain" class="img">
@@ -50,7 +50,6 @@
             </template>
         </drag>
         <el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
-
     </card-container>
 </template>
 <script setup lang="ts">
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 8ac64867..480aa6c9 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -61,8 +61,8 @@ const props = defineProps({
 const form = ref(props.value);
 
 const mult_color_picker_event = (arry: string[], type: number) => {
-    form.value.user_id_color_list = arry;
-    form.value.user_id_direction = type.toString();
+    form.value.color_list = arry;
+    form.value.direction = type.toString();
 };
 
 watchEffect(() => {
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index d8c4f789..4bcba7ee 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -1,7 +1,6 @@
 <template>
     <div ref="container" class="img-magic" :style="style_container">
         <div class="w h re outer-style">
-            {{ data_list }}
             <!-- 风格9 -->
             <template v-if="form.style_actived == 8">
                 <div class="flex-row align-c jc-c style-size flex-wrap">
@@ -11,16 +10,31 @@
                 </div>
             </template>
             <template v-else>
-                <div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
-                    <!-- <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty> -->
+                <div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${selected_style(item)} ${ item.data_style.background_style }`">
+                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :height="`${ getSelectedHeight(item) }px`" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                        <el-carousel-item v-for="(item2, index) in item.data_content.product_list" :key="index">
+                            {{ item2 }}
+                            {{ item.actived_index }}
+                        </el-carousel-item>
+                    </el-carousel>
+                    <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>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div v-for="(item3, index2) in item.data_content.product_list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
+                        </template>
+                    </div>
                 </div>
             </template>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, radius_computer } from '@/utils';
-
+import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -36,7 +50,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
-const data_list = computed(() => form.value.data_magic_list);
+// const data_list = computed(() => form.value.data_magic_list);
 const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
 const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
 // 图片间距设置
@@ -64,7 +78,6 @@ interface CubeItem {
         x: number;
         y: number;
     };
-    img: string;
 }
 const density = ref('4');
 //单元魔方宽度。
@@ -92,10 +105,80 @@ const selected_style = (item: CubeItem) => {
 };
 // 计算成百分比
 const percentage = (num: number) => {
-    const marks = (num / div_width.value) * 100;
-    return marks.toFixed(4) + '%';
+    return percentage_count(num, div_width.value);
 };
 //#endregion
+//#region 组装页面显示的数据
+interface data_magic {
+    start: object;
+    end: object;
+    actived_index: number;
+    data_content: any;
+    data_style: any;
+}
+const old_list = ref<any>({});
+const data_magic_list = ref<data_magic[]>([]);
+watch(props.value.content, (val) => {
+    const data = val.data_magic_list;
+    data.actived_index = 0;
+    data.forEach((item: data_magic) => {
+        const data_content = item.data_content;
+        const data_style = item.data_style;
+        const key = data_style.carouselKey;
+        // 指示器样式
+        data_style.indicator_styles = indicator_style(data_style);
+        data_style.background_style = background_style(data_style);
+        // 获取旧数据
+        if (!isEmpty(old_list.value[key])) {
+            let old_data = old_list.value[key];
+            const { is_roll, rotation_direction, interval_time } = data_style;
+            // 判断跟历史的是否相等，不相等更新组件时间
+            if (old_data.interval_time != interval_time || old_data.is_roll != is_roll || old_data.rotation_direction != rotation_direction) {
+                // 记录历史保存的时间
+                old_data = {
+                    interval_time: interval_time,
+                    is_roll: is_roll,
+                    rotation_direction: rotation_direction
+                };
+                // 更新轮播图的key，确保更换时能重新更新轮播图
+                data_style.carouselKey = get_math();
+            }
+        }
+    });
+    data_magic_list.value = data;
+})
+
+const background_style = (item: any) => {
+    return gradient_computer(item) + background_computer(item);
+};
+// 指示器的样式
+const indicator_style = (item: any) => {
+    let indicator_styles = '';
+    if (!isEmpty(item.indicator_radius)) {
+        indicator_styles += radius_computer(item.indicator_radius)
+    }
+    const size = item?.indicator_size || 5;
+    if (item.indicator_style == 'num') {
+        indicator_styles += `color: ${item?.color || '#DDDDDD'};`;
+        indicator_styles += `font-size: ${size}px;`;
+    } else if (item.indicator_style == 'elliptic') {
+        indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
+        indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+    } else {
+        indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
+        indicator_styles += `width: ${size}px; height: ${size}px;`;
+    }
+    return indicator_styles;
+};
+const style_actived_color = (item: any, index: number) => {
+   return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
+}
+//#endregion
+const carousel_change = (index: number, key: number) => {
+    if (data_magic_list.value[key]) {
+        data_magic_list.value[key].actived_index = index;
+    }
+}
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 </script>
@@ -106,20 +189,24 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
     width: 100%;
     overflow: hidden;
 }
+
 .cube-selected {
     position: absolute;
     text-align: center;
     color: $cr-main;
     box-sizing: border-box;
 }
+
 .outer-style {
     width: calc(100% + v-bind(outer_spacing));
     height: calc(100% + v-bind(outer_spacing));
     margin: v-bind(outer_sx);
 }
+
 .img-spacing-border {
     padding: v-bind(spacing);
 }
+
 .style-size {
     height: 100%;
     width: 100%;
@@ -139,12 +226,29 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
         position: relative;
     }
 }
+.dot-center {
+    left: 50%;
+    transform: translateX(-50%);
+}
+.dot-right {
+    right: 0;
+}
+.dot {
+    z-index: 3;
+    bottom: 6px;
+    .dot-item {
+        margin: 0 0.3rem;
+    }
+}
+
 :deep(.el-image) {
     height: 100%;
     width: 100%;
+
     .el-image__inner {
         object-fit: cover;
     }
+
     .image-slot img {
         width: 6rem;
     }
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 a5083371..e7e3db35 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -20,7 +20,7 @@
                             <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
                                 <div class="cube-selected-text">
                                     <template v-if="[0, 1].includes(index)">375 x 375 像素</template> 
-                                    <template v-else>250 x 375 像素</template> 
+                                    <template v-else>250 x 375 像素</template>
                                 </div>
                             </div>
                         </div>
@@ -42,6 +42,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { get_math } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -53,8 +54,8 @@ const props = defineProps({
 const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
 // 每个小模块独立的样式
 const data_style = {
-    color_list: ['#FFD9C3', '#FFECE2', '#FFFFFF'],
-    direction: '90deg',
+    color_list: [{ color: '#FFD9C3', color_percentage: '' }, { color: '#FFECE2', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }],
+    direction: '180deg',
     background_img_style: 2,
     background_img_url: [],
     is_roll: true,
@@ -86,20 +87,25 @@ const data_content = {
     heading_title: '',
     subtitle: '',
     product_list:[],
-    img_list:[]
+    img_list:[
+        {
+            carousel_img: [],
+            carousel_link: {},
+        }
+    ]
 }
 
 // 不同风格的数据
 const style_show_list = [
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 4, y: 4} }], // 风格1
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 4} }], // 风格2
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 4, y: 4} }],// 风格3
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 2, y: 4} }, { start: {x: 3, y: 3},end: {x: 4, y: 4} }],// 风格4
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 3, y: 3},end: {x: 4, y: 4} }],// 风格5
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 1, y: 3},end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 4} }],// 风格6
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 2, y: 4} }, { start: {x: 3, y: 3},end: {x: 4, y: 4} }],// 风格7
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 3, y: 3},end: {x: 3, y: 4} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }],// 风格8
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 3, y: 3},end: {x: 3, y: 4} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }],// 风格9
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }], // 风格1
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }], // 风格2
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }],// 风格3
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格4
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格5
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }],// 风格6
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格7
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格8
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格9
 ]
 const tabs_name = ref('content');
 const state = reactive({
@@ -148,8 +154,12 @@ const style_click = (index: number) => {
 const magic_list = (index: number) => {
     return cloneDeep(style_show_list[index]).map((item) => ({
         ...item,
+        actived_index: 0,
         data_content: cloneDeep(data_content),
-        data_style: cloneDeep(data_style)
+        data_style: {
+            ...cloneDeep(data_style),
+            carouselKey: get_math(),
+        }
     }));
 }
 
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index 483ae143..68ba6ac8 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -61,8 +61,7 @@ const img_style = ref('');
 // 标题的设置
 const topic_style = computed(() => {
     // 标题渐变色处理
-    const color_list = new_style.value.topic_color_list.map((item: { color: string }) => item.color) || [];
-    const gradient = gradient_handle(color_list, '90deg');
+    const gradient = gradient_handle(new_style.value.topic_color_list, '90deg');
     // 标题设置
     return `color:${ new_style.value.topic_color }; font-size: ${ new_style.value.topic_size }px; font-weight: ${ new_style.value.topic_typeface }; ${ gradient }`;
 });
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 7190e1c8..41753c1c 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -221,8 +221,7 @@ const style_config = (typeface: string, size: number, color: string | object, ty
 } 
 // 按钮渐变色处理
 const button_gradient = () => {
-    const color_list = new_style.value.shop_button_color.map((item: { color: string }) => item.color) || [];
-    return gradient_handle(color_list, '90deg');
+    return gradient_handle(new_style.value.shop_button_color, '90deg');
 }
 // 公共样式
 const style_container = computed(() => {
diff --git a/src/components/model-user-info/index.vue b/src/components/model-user-info/index.vue
index 7f541534..ec97a920 100644
--- a/src/components/model-user-info/index.vue
+++ b/src/components/model-user-info/index.vue
@@ -61,7 +61,7 @@ const base_data = reactive({
     // 用户名字号
     user_name_size: 16,
     // 用户ID颜色
-    user_id_color_list: ['rgba(254, 184, 143, 1)', 'rgba(255, 227, 220, 1)'],
+    user_id_color_list: [{color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, {color: 'rgba(255, 227, 220, 1)', color_percentage: ''}],
     // 用户ID颜色
     user_id_color: 'rgba(0, 0, 0, 1)',
     // 用户ID方向
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 ce43fbfe..5580aa20 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: ['rgba(254, 184, 143, 1)', 'rgba(255, 227, 220, 1)'],
+                user_id_color_list: [{ color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, { color: 'rgba(255, 227, 220, 1)', color_percentage: '' }],
                 user_id_color: 'rgba(0, 0, 0, 1)',
                 user_id_direction: '90deg',
                 user_id_weight: '400',
diff --git a/src/components/page-settings/index.ts b/src/components/page-settings/index.ts
index 3aa7ac03..a1b7c357 100644
--- a/src/components/page-settings/index.ts
+++ b/src/components/page-settings/index.ts
@@ -1,6 +1,6 @@
 type page_content = {
     title: string;
-    color_list: string[];
+    color_list: color_list[];
     direction: string;
     background_img_style: string;
     background_img_url: uploadList[];
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 9463c8fc..caee56c0 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -37,7 +37,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const form = reactive(props.value);
-const mult_color_picker_event = (arry: string[], type: number) => {
+const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.color_list = arry;
     form.direction = type.toString();
 };
diff --git a/src/layout/components/main/default/custom.ts b/src/layout/components/main/default/custom.ts
index 29e8de7b..f548e984 100644
--- a/src/layout/components/main/default/custom.ts
+++ b/src/layout/components/main/default/custom.ts
@@ -20,7 +20,7 @@ const defaultSearch: defaultSearch = {
     style: {
         common_style: {
             ...defaultCommon,
-            color_list: ['rgb(244, 252, 255)'],
+            color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: '' }],
         }
     },
 };
diff --git a/src/layout/components/main/default/footer-nav.ts b/src/layout/components/main/default/footer-nav.ts
index 51056019..48b60608 100644
--- a/src/layout/components/main/default/footer-nav.ts
+++ b/src/layout/components/main/default/footer-nav.ts
@@ -25,7 +25,7 @@ const defaultFooterNav: DefaultFooterNav = {
     style: {
         text_color_checked: 'rgba(204, 204, 204, 1)',
         default_text_color: 'rgba(0, 0, 0, 1)',
-        common_style: { ...defaultCommon, color_list: ['rgba(255,255,255,1)'] },
+        common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: '' }]},
     },
 };
 
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index 6523273d..ee7197e0 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -1,6 +1,6 @@
 interface DefaultFooterNav {
     content: {
-        color_list: string[];
+        color_list: color_list[];
         title: string;
         direction: string;
         background_img_style: number;
@@ -9,9 +9,9 @@ interface DefaultFooterNav {
 }
 const defaultFooterNav: DefaultFooterNav = {
     content: {
-        color_list: ['#f5f5f5'],
+        color_list: [{ color: '#f5f5f5', color_percentage: '' }],
         title: '',
-        direction: '0deg',
+        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 efe85a25..2e5b02ff 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_list: [{ color: '', color_percentage: '' }],
     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 18628f71..7f73baa9 100644
--- a/src/layout/components/main/default/notice.ts
+++ b/src/layout/components/main/default/notice.ts
@@ -7,9 +7,6 @@ interface carousel_list {
     notice_link: object;
     is_show: boolean;
 }
-interface color_list {
-    color: string;
-}
 interface defaultSearch {
     content: {
         notice_style: string;
@@ -61,10 +58,12 @@ const defaultSearch: defaultSearch = {
         news_size: 15,
         topic_color_list: [
             {
-                color: ''
+                color: '',
+                color_percentage: ''
             },
             {
-                color: ''
+                color: '',
+                color_percentage: ''
             }
         ],
         topic_color: '#000',
diff --git a/src/layout/components/main/default/search.ts b/src/layout/components/main/default/search.ts
index 04c3c998..e95ade89 100644
--- a/src/layout/components/main/default/search.ts
+++ b/src/layout/components/main/default/search.ts
@@ -54,7 +54,7 @@ const defaultSearch: defaultSearch = {
         text_size: 15,
         common_style: {
             ...defaultCommon,
-            color_list: ['#ffffff'],
+            color_list: [{ color: '#ffffff', color_percentage: '' }],
             padding_top: 9,
             padding_bottom: 9,
             padding_left: 15,
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index beeba1f1..0fc0bed4 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -1,7 +1,4 @@
 import defaultCommon from './index';
-interface color_list {
-    color: string;
-}
 interface DefaultProductList {
     content: {
         product_style: string;
@@ -100,10 +97,12 @@ const defaultProductList: DefaultProductList = {
         shop_button_size: 12,
         shop_button_color: [
             {
-                color: '#2a94ff'
+                color: '#2a94ff',
+                color_percentage: ''
             },
             {
-                color: '#2a94ff'
+                color: '#2a94ff',
+                color_percentage: ''
             }
         ],
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 82ebfdeb..2624531b 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -11,9 +11,6 @@ interface articleTabsList {
     sort_rules: string;
     product_list: [];
 }
-interface color_list {
-    color: string;
-}
 interface DefaultProductList {
     content: {
         tabs_style: string;
@@ -127,10 +124,12 @@ const defaultProductList: DefaultProductList = {
         shop_button_size: 12,
         shop_button_color: [
             {
-                color: '#2a94ff'
+                color: '#2a94ff',
+                color_percentage: ''
             },
             {
-                color: '#2a94ff'
+                color: '#2a94ff',
+                color_percentage: ''
             }
         ],
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
diff --git a/src/layout/components/main/default/text-title.ts b/src/layout/components/main/default/text-title.ts
index e1c0a462..169705e9 100644
--- a/src/layout/components/main/default/text-title.ts
+++ b/src/layout/components/main/default/text-title.ts
@@ -60,7 +60,6 @@ const defaultSearch: defaultSearch = {
             padding_bottom: 15,
             padding_left: 15,
             padding_right: 15,
-            color_list: ['']
         }
     },
 };
diff --git a/src/layout/components/main/default/user-info.ts b/src/layout/components/main/default/user-info.ts
index cd8b9b0f..bcf0ccf7 100644
--- a/src/layout/components/main/default/user-info.ts
+++ b/src/layout/components/main/default/user-info.ts
@@ -10,7 +10,7 @@ interface DefaultUserInfo {
         user_name_color: string;
         user_name_weight: string;
         user_name_size: number;
-        user_id_color_list: string[];
+        user_id_color_list: color_list[];
         user_id_color: string;
         user_id_direction: string;
         user_id_weight: string;
@@ -39,7 +39,7 @@ const defaultUserInfo: DefaultUserInfo = {
         user_name_color: 'rgba(0, 0, 0, 1)',
         user_name_weight: '500',
         user_name_size: 16,
-        user_id_color_list: ['rgba(254, 184, 143, 1)', 'rgba(255, 227, 220, 1)'],
+        user_id_color_list: [{color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, {color: 'rgba(255, 227, 220, 1)', color_percentage: ''}],
         user_id_color: 'rgba(0, 0, 0, 1)',
         user_id_direction: '90deg',
         user_id_weight: '400',
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 91d5b5ed..541e4265 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -9,11 +9,15 @@ declare global {
         name: string;
         key: string;
     }
+    interface color_list {
+        color: string;
+        color_percentage: string;
+    }
     /**
      * 渐变色参数集合
      */
     interface gradientStyle {
-        color_list: string[];
+        color_list: color_list[];
         direction: string;
     }
     /**
@@ -71,7 +75,7 @@ declare global {
      * 通用样式参数
      */
     type componentsCommonCommonStyle = {
-        color_list: string[];
+        color_list: color_list[];
         direction: string;
         background_img_style: number;
         padding: number;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 7fda39f1..bf596efe 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,4 @@
+import { isEmpty } from "lodash";
 /**
  * 判断一个对象是否为空。
  *
@@ -31,29 +32,40 @@ export function gradient_computer(new_style: gradientStyle) {
  * @param direction 渐变的方向，可以是角度或其他CSS支持的渐变方向。
  * @returns 返回一个字符串，包含生成的线性渐变样式。
  */
-export function gradient_handle(color_list: string[], direction: string) {
+export function gradient_handle(color_list: color_list[], direction: string) {
+    console.log(color_list, direction);
     let container_common_styles = ``;
     if (color_list && color_list.length > 0) {
-        container_common_styles += `background: linear-gradient(${direction || '0deg'},`;
-        // 颜色反转
+        container_common_styles += `background: linear-gradient(${direction || '180deg'},`;
+
         const new_color_list = JSON.parse(JSON.stringify(color_list));
-        const reverse_color = new_color_list.reverse();
-        reverse_color.forEach((item: any, index: number) => {
-            container_common_styles += `${item ? item : 'rgb(255 255 255 / 0%)'}`;
+        new_color_list.forEach((item: any, index: number) => {
+            container_common_styles += `${item.color ? item.color : 'rgb(255 255 255 / 0%)'}`;
             if (color_list.length == 1) {
-                container_common_styles += ` 0%, ${item} 100%`;
+                container_common_styles += ` ${ item.color_percentage || 0 }%, ${ item.color } 100%`;
             } else {
-                if (index == color_list.length - 1) {
-                    container_common_styles += ` 100%`;
-                } else if (index == 0) {
-                    container_common_styles += ` 0%,`;
+                if (!isEmpty(item.color_percentage)) {
+                    if (index == color_list.length - 1) {
+                        container_common_styles += ` ${ item.color_percentage }%`;
+                    } else {
+                        container_common_styles += ` ${ item.color_percentage }%,`;
+                    }
                 } else {
-                    container_common_styles += ` ${(100 / color_list.length) * index}%,`;
+                    if (index == color_list.length - 1) {
+                        container_common_styles += ` 100%`;
+                    } else if (index == 0) {
+                        container_common_styles += ` 0%,`;
+                    } else {
+                        container_common_styles += ` ${(100 / color_list.length) * index}%,`;
+                    }
                 }
+                
             }
         });
         container_common_styles += `);`;
     }
+    console.log(container_common_styles);
+
     return container_common_styles;
 }