From be60d672a0a311abcc420433df16fcf00733db16 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 30 Aug 2024 18:40:12 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BC=98=E6=83=A0=E5=88=B8=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=20sws=202024-08-30?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue |   9 +-
 .../common/mult-color-picker/index.vue        |   6 +-
 src/components/common/theme-select/index.vue  |   6 +-
 .../model-article-tabs-styles.vue             |   4 +-
 src/components/model-coupon/index.scss        |   2 -
 src/components/model-coupon/index.vue         | 852 +++++++++++++++---
 .../model-coupon/model-coupon-setting.vue     | 100 +-
 .../model-coupon/model-coupon-styles.vue      |  51 +-
 src/components/page-settings/page-content.vue |   2 +-
 src/layout/components/main/default/coupon.ts  |  20 +-
 src/utils/index.ts                            |  20 +-
 11 files changed, 917 insertions(+), 155 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index fe54f63a..d66f797a 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -5,7 +5,7 @@
             <el-form :model="form" label-width="70">
                 <div class="mb-12">通用</div>
                 <el-form-item label="底部背景">
-                    <div class="flex-col gap-10 w">
+                    <div v-if="isMultBackground" 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>
                         <div class="flex-row jc-sb align-c">
@@ -24,6 +24,9 @@
                         </div>
                         <upload v-model="form.background_img_url" :limit="1" @update:model-value="background_img_url_change"></upload>
                     </div>
+                    <div v-else>
+                        <color-picker v-model="form.color_list[0].color"></color-picker>
+                    </div>
                 </el-form-item>
                 <el-form-item label="内边距">
                     <padding :value="form" @update:value="padding_change"></padding>
@@ -76,6 +79,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isMultBackground: {
+        type: Boolean,
+        default: true,
+    },
 });
 // 初始化表单数据
 const init_form = reactive({
diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index 57b4a94b..bd62f65e 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -54,7 +54,7 @@ let state = reactive({
             color: item.color,
             color_percentage: item.color_percentage,
         };
-    })
+    }),
 });
 const { color_list } = toRefs(state);
 const emit = defineEmits(['update:value']);
@@ -141,7 +141,8 @@ const update_value = () => {
 }
 .mo-input-number {
     :deep(.el-input-number) {
-        .el-input-number__decrease, .el-input-number__increase {
+        .el-input-number__decrease,
+        .el-input-number__increase {
             right: 3.4rem;
         }
     }
@@ -163,5 +164,4 @@ const update_value = () => {
         border-bottom-right-radius: 0.4rem;
     }
 }
-
 </style>
diff --git a/src/components/common/theme-select/index.vue b/src/components/common/theme-select/index.vue
index cd02b1ba..ed132574 100644
--- a/src/components/common/theme-select/index.vue
+++ b/src/components/common/theme-select/index.vue
@@ -36,7 +36,7 @@
             <text v-else class="cr-9">{{ placeholder }}</text>
         </div>
         <div class="theme-icon">
-            <template v-if="temp_data_obj === null || notCleardButton">
+            <template v-if="temp_data_obj === null || !clearButton">
                 <icon name="arrow-right" size="12" color="9"></icon>
             </template>
             <template v-else>
@@ -64,10 +64,10 @@ const props = defineProps({
         type: Array as PropType<data[]>,
         default: () => [],
     },
-    notCleardButton: {
+    clearButton: {
         type: Boolean,
         default: false,
-    }
+    },
 });
 const model_value = defineModel({ type: String, default: '' });
 const { data } = toRefs(props);
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index 2035405c..f1214e3d 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -36,10 +36,12 @@
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
-                <template v-if="theme !== '3'">
+                <template v-if="theme == '0'">
                     <el-form-item label="内容间距">
                         <slider v-model="form.content_spacing"></slider>
                     </el-form-item>
+                </template>
+                <template v-if="theme !== '3'">
                     <el-form-item label="文章间距">
                         <slider v-model="form.article_spacing"></slider>
                     </el-form-item>
diff --git a/src/components/model-coupon/index.scss b/src/components/model-coupon/index.scss
index 69518472..4dcf6e09 100644
--- a/src/components/model-coupon/index.scss
+++ b/src/components/model-coupon/index.scss
@@ -316,7 +316,6 @@
         }
     }
 }
-
 .coupon-theme-5 {
     overflow: hidden;
     .item {
@@ -386,7 +385,6 @@
         }
     }
 }
-
 .coupon-theme-6 {
     overflow: hidden;
     .item {
diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue
index 8a9bbd4e..1ad1f92a 100644
--- a/src/components/model-coupon/index.vue
+++ b/src/components/model-coupon/index.vue
@@ -1,140 +1,144 @@
 <template>
-    <div :style="style_container">
-        <div class="re" :style="style_content">
-            <template v-if="theme == '1'">
-                <div class="coupon-theme-1">
-                    <div class="item">
-                        <div class="coupon-theme-1-content tc">
-                            <div class="name">满200元使用</div>
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
+    <div class="coupon-theme-container">
+        <div class="re" :style="style_container">
+            <el-scrollbar>
+                <template v-if="theme == '1'">
+                    <div class="coupon-theme-1">
+                        <div v-for="item in list" :key="item" class="item">
+                            <div class="coupon-theme-1-content tc">
+                                <div class="name">满200元使用</div>
+                                <div class="price">
+                                    <span class="symbol">¥</span>
+                                    <span class="number">30</span>
+                                </div>
                             </div>
+                            <div class="coupon-btn">立即领取</div>
                         </div>
-                        <div class="coupon-btn">立即领取</div>
                     </div>
-                </div>
-            </template>
-            <template v-else-if="theme == '2'">
-                <div class="oh coupon-theme-2">
-                    <div class="item">
-                        <div class="tc">
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
-                            </div>
-                            <div class="name">满200元使用</div>
-                            <div class="desc">指定商品可用</div>
-                        </div>
-                        <div class="coupon-btn"></div>
-                    </div>
-                </div>
-            </template>
-            <template v-else-if="theme == '3'">
-                <div class="coupon-theme-3">
-                    <div class="item">
-                        <div class="left">
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
-                            </div>
-                            <div class="text">
+                </template>
+                <template v-else-if="theme == '2'">
+                    <div class="coupon-theme-2">
+                        <div v-for="item in list" :key="item" class="item">
+                            <div class="tc">
+                                <div class="price">
+                                    <span class="symbol">¥</span>
+                                    <span class="number">30</span>
+                                </div>
                                 <div class="name">满200元使用</div>
                                 <div class="desc">指定商品可用</div>
-                                <div class="limit">(限领一张)</div>
                             </div>
-                        </div>
-                        <div class="right">
-                            <div class="coupon-btn">
-                                <text>立即领取</text>
-                                <icon name="arrow-right-o" class="icon"></icon>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template v-else-if="theme == '4'">
-                <div class="coupon-theme-4">
-                    <div class="left">
-                        <div class="item">
-                            <div class="type">通用券</div>
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
-                            </div>
-                            <div class="name">满200元使用</div>
-                        </div>
-                    </div>
-                    <div class="right">
-                        <div class="re z-i flex-col jc-c align-c">
-                            <div class="title">先领券 再购物</div>
-                            <div class="desc">领券下单·享购物优惠</div>
-                            <div class="coupon-btn">领取全部</div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template v-else-if="theme == '5'">
-                <div class="coupon-theme-5">
-                    <div class="item">
-                        <div class="left">
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
-                            </div>
-                            <div class="name">满200元使用</div>
-                        </div>
-                        <div class="right">
-                            <div class="coupon-btn">领取</div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template v-else-if="theme == '6'">
-                <div class="coupon-theme-6">
-                    <div class="item">
-                        <div class="top">
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
-                            </div>
-                            <div class="name">满200元使用</div>
-                        </div>
-                        <div class="bottom">
                             <div class="coupon-btn">立即领取</div>
                         </div>
                     </div>
-                </div>
-            </template>
-            <template v-else-if="theme == '7'">
-                <div class="coupon-theme-7">
-                    <div class="item">
-                        <div class="left">
-                            <div class="price">
-                                <span class="symbol">¥</span>
-                                <span class="number">30</span>
+                </template>
+                <template v-else-if="theme == '3'">
+                    <div class="coupon-theme-3">
+                        <div v-for="item in list" :key="item" class="item">
+                            <div class="left">
+                                <div class="price">
+                                    <span class="symbol">¥</span>
+                                    <span class="number">30</span>
+                                </div>
+                                <div class="text">
+                                    <div class="name">满200元使用</div>
+                                    <div class="desc">指定商品可用</div>
+                                    <div class="limit">(限领一张)</div>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <div class="coupon-btn">
+                                    <text>立即领取</text>
+                                    <icon name="arrow-right-o" class="icon"></icon>
+                                </div>
                             </div>
-                            <div class="name">满200元使用</div>
-                        </div>
-                        <div class="right">
-                            <div class="coupon-btn">立即领取</div>
                         </div>
                     </div>
-                </div>
-            </template>
+                </template>
+                <template v-else-if="theme == '4'">
+                    <div class="coupon-theme-4">
+                        <el-scrollbar>
+                            <div class="left">
+                                <div v-for="item in list" :key="item" class="item">
+                                    <div class="type">通用券</div>
+                                    <div class="price">
+                                        <span class="symbol">¥</span>
+                                        <span class="number">30</span>
+                                    </div>
+                                    <div class="name">满200元使用</div>
+                                </div>
+                            </div>
+                        </el-scrollbar>
+                        <div class="right">
+                            <div class="re z-i flex-col jc-c align-c">
+                                <div class="title">先领券 再购物</div>
+                                <div class="desc">领券下单·享购物优惠</div>
+                                <div class="coupon-btn">领取全部</div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="theme == '5'">
+                    <div class="coupon-theme-5">
+                        <div v-for="item in list" :key="item" class="item">
+                            <div class="left">
+                                <div class="price">
+                                    <span class="symbol">¥</span>
+                                    <span class="number">30</span>
+                                </div>
+                                <div class="name">满200元使用</div>
+                            </div>
+                            <div class="right">
+                                <div class="coupon-btn">领取</div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="theme == '6'">
+                    <div class="coupon-theme-6">
+                        <div v-for="item in list" :key="item" class="item">
+                            <div class="top">
+                                <div class="price">
+                                    <span class="symbol">¥</span>
+                                    <span class="number">30</span>
+                                </div>
+                                <div class="name">满200元使用</div>
+                            </div>
+                            <div class="bottom">
+                                <div class="coupon-btn">立即领取</div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="theme == '7'">
+                    <div class="coupon-theme-7">
+                        <div v-for="item in list" :key="item" class="item">
+                            <div class="left">
+                                <div class="price">
+                                    <span class="symbol">¥</span>
+                                    <span class="number">30</span>
+                                </div>
+                                <div class="name">满200元使用</div>
+                            </div>
+                            <div class="right">
+                                <div class="coupon-btn">立即领取</div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </el-scrollbar>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer } from '@/utils';
+import { common_styles_computer, gradient_computer } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
     },
 });
+const list = 10;
 
-const style_content = ref('');
 const style_container = ref('');
 watch(
     props.value,
@@ -147,7 +151,627 @@ watch(
     { immediate: true, deep: true }
 );
 const theme = computed(() => props.value?.content?.theme);
+const theme_style = computed(() => {
+    const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
+    const new_background_inside = gradient_computer({ color_list: props.value?.style?.background_inside, direction: props.value?.style?.direction_inside }, false);
+    const new_btn_background = gradient_computer({ color_list: props.value?.style?.btn_background, direction: props.value?.style?.btn_direction }, false);
+    console.log({
+        price_color: props.value?.style?.price_color,
+        name_color: props.value?.style?.name_color,
+        // 判断是否向对象添加desc_color属性
+        ...(!['1', '5', '6', '7'].includes(theme.value) && { desc_color: props.value?.style?.desc_color }),
+        ...(!['1', '2', '4', '5', '6', '7'].includes(theme.value) && { limit_send_count: props.value?.style?.limit_send_count }),
+        ...(!['3', '5', '6', '7'].includes(theme.value) && { btn_background: new_btn_background }),
+        btn_color: props.value?.style?.btn_color,
+        ...(!['2'].includes(theme.value) && { background: new_background }),
+        ...(!['1', '2', '5', '7'].includes(theme.value) && { background_inside: new_background_inside }),
+        ...(!['3', '4'].includes(theme.value) && { spacing: props.value?.style?.spacing + 'px' }),
+    });
+    return {
+        price_color: props.value?.style?.price_color,
+        name_color: props.value?.style?.name_color,
+        // 判断是否向对象添加desc_color属性
+        ...(!['1', '5', '6', '7'].includes(theme.value) && { desc_color: props.value?.style?.desc_color }),
+        ...(!['1', '2', '4', '5', '6', '7'].includes(theme.value) && { limit_send_count: props.value?.style?.limit_send_count }),
+        ...(!['5', '6', '7'].includes(theme.value) && { btn_background: new_btn_background }),
+        btn_color: props.value?.style?.btn_color,
+        ...(!['2'].includes(theme.value) && { background: new_background }),
+        ...(!['1', '2', '5', '7'].includes(theme.value) && { background_inside: new_background_inside }),
+        spacing: props.value?.style?.spacing + 'px',
+        ...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { type_background: props.value?.style?.type_background }),
+        ...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { type_color: props.value?.style?.type_color }),
+        ...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { content_title_color: props.value?.style?.content_title_color }),
+        ...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { content_desc_color: props.value?.style?.content_desc_color }),
+    };
+});
+const theme_3_border_style = computed(() => {
+    return props.value?.style?.background[0].color;
+});
+const theme_7_background_style = computed(() => {
+    if (props.value?.style?.common_style.color_list.length > 0) {
+        return props.value?.style?.common_style.color_list[0].color;
+    } else {
+        return '#fff';
+    }
+});
 </script>
 <style lang="scss" scoped>
-@import './index.scss';
+.coupon-theme-1 {
+    display: flex;
+    flex-direction: row;
+    gap: v-bind('theme_style.spacing');
+    .item {
+        flex-basis: auto;
+        flex-shrink: 0;
+        background: v-bind('theme_style.background');
+        width: 9rem;
+        height: 9rem;
+        border-radius: 1rem;
+        margin-top: 1rem;
+        .name {
+            padding: 0.5rem;
+            font-size: 1rem;
+            color: v-bind('theme_style.name_color');
+        }
+        .price {
+            color: v-bind('theme_style.price_color');
+            padding: 0.5rem 0 0.8rem 0;
+            .symbol {
+                font-size: 1.2rem;
+                position: relative;
+                bottom: 0.3rem;
+            }
+            .number {
+                font-size: 3.8rem;
+                line-height: 2.4rem;
+                font-weight: 500;
+                padding-left: 0.4rem;
+            }
+        }
+        .coupon-theme-1-content {
+            width: calc(100% - 1rem);
+            margin: 0 0.5rem;
+            background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png');
+            background-size: 100% 100%;
+            position: relative;
+            top: -1rem;
+        }
+
+        .coupon-btn {
+            margin: 0 auto;
+            width: 7.1rem;
+            height: 1.756rem;
+            line-height: 1.756rem;
+            text-align: center;
+            font-size: 0.9rem;
+            color: v-bind('theme_style.btn_color');
+            background: v-bind('theme_style.btn_background');
+            border-radius: 2.3rem;
+            position: relative;
+            top: -0.2rem;
+        }
+    }
+}
+.coupon-theme-2 {
+    display: flex;
+    flex-direction: row;
+    gap: v-bind('theme_style.spacing');
+    .item {
+        flex-basis: auto;
+        flex-shrink: 0;
+        background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
+        background-size: 100% 100%;
+        width: 8.5rem;
+        height: 10rem;
+        padding: 0.5rem;
+        .price {
+            color: v-bind('theme_style.price_color');
+            padding: 0.3rem 0;
+            .symbol {
+                font-size: 0.8rem;
+            }
+            .number {
+                font-size: 2.6rem;
+                font-weight: 500;
+                padding-left: 0.4rem;
+            }
+        }
+        .name {
+            font-size: 0.8rem;
+            color: v-bind('theme_style.name_color');
+            font-weight: 500;
+            margin-bottom: 0.4rem;
+        }
+        .desc {
+            font-size: 0.8rem;
+            color: v-bind('theme_style.desc_color');
+        }
+
+        .coupon-btn {
+            margin: 0 auto;
+            width: 5.5rem;
+            height: 1.6rem;
+            line-height: 1.6rem;
+            text-align: center;
+            font-size: 0.9rem;
+            color: v-bind('theme_style.btn_color');
+            background: v-bind('theme_style.btn_background');
+            border-radius: 2.3rem;
+            margin-top: 0.5rem;
+        }
+    }
+}
+.coupon-theme-3 {
+    display: flex;
+    gap: v-bind('theme_style.spacing');
+    .item {
+        overflow: hidden;
+        border-radius: 1.6rem;
+        flex-basis: auto;
+        flex-shrink: 0;
+        background: v-bind('theme_style.background');
+        width: 100%;
+        padding: 0.8rem;
+        display: flex;
+        .left {
+            flex: 1;
+            width: 0;
+            background: v-bind('theme_style.background_inside');
+            border-radius: 0.8rem;
+            padding: 0.6rem 1.2rem 0.3rem 1.2rem;
+            display: flex;
+            align-items: center;
+            .price {
+                text-align: center;
+                width: 10rem;
+                position: relative;
+                display: flex;
+                align-items: flex-start;
+                color: v-bind('theme_style.price_color');
+                &::before {
+                    content: '';
+                    position: absolute;
+                    right: 0;
+                    top: -3rem;
+                    bottom: -3rem;
+                    width: 0.1rem;
+                    height: calc(100% + 6rem);
+                    border-left: 0.1rem dashed v-bind('theme_3_border_style');
+                }
+                .symbol {
+                    font-size: 2.4rem;
+                    font-weight: 600;
+                }
+                .number {
+                    font-size: 4.6rem;
+                    font-weight: 600;
+                    padding-left: 0.4rem;
+                    line-height: 4rem;
+                }
+            }
+            .text {
+                flex: 1;
+                width: 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .name {
+                    font-size: 1.8rem;
+                    color: v-bind('theme_style.name_color');
+                    font-weight: 500;
+                    line-height: 2.5rem;
+                }
+                .desc {
+                    font-size: 1.4rem;
+                    font-weight: 500;
+                    color: v-bind('theme_style.desc_color');
+                    line-height: 2rem;
+                }
+                .limit {
+                    color: v-bind('theme_style.limit_send_count');
+                    font-size: 1.2rem;
+                    line-height: 1.4rem;
+                }
+            }
+        }
+        .right {
+            width: 8.6rem;
+            position: relative;
+            padding: 0 1.8rem;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            &::before {
+                content: '';
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 200%;
+                height: 200%;
+                background: v-bind('theme_style.background');
+                left: -1.6rem;
+                border-radius: 100%;
+            }
+            .coupon-btn {
+                color: v-bind('theme_style.btn_color');
+                position: relative;
+                font-size: 1.8rem;
+                font-weight: 500;
+                text-align: center;
+                .icon {
+                    font-size: 2rem;
+                }
+            }
+        }
+    }
+}
+.coupon-theme-4 {
+    overflow: hidden;
+    border-radius: 1.6rem;
+    padding: 0.8rem;
+    display: flex;
+    background: v-bind('theme_style.background');
+    .left {
+        width: 21.4rem;
+        display: flex;
+        flex-direction: row;
+        gap: v-bind('theme_style.spacing');
+        .item {
+            overflow: hidden;
+            flex-basis: auto;
+            flex-shrink: 0;
+            width: 7.2rem;
+            height: 7.2rem;
+            background: v-bind('theme_style.background_inside');
+            border-radius: 1rem;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 0.4rem;
+            .type {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                background: v-bind('theme_style.type_background');
+                color: v-bind('theme_style.type_color');
+                font-size: 1rem;
+                line-height: 1.4rem;
+                &::before {
+                    content: '';
+                    position: absolute;
+                    width: 1.5rem;
+                    height: 3rem;
+                    background: v-bind('theme_style.type_background');
+                    left: -0.8rem;
+                    border-radius: 100%;
+                    top: -1.6rem;
+                    z-index: -1;
+                }
+                &::after {
+                    content: '';
+                    position: absolute;
+                    width: 1.5rem;
+                    height: 3rem;
+                    background: v-bind('theme_style.type_background');
+                    right: -0.8rem;
+                    border-radius: 100%;
+                    top: -1.6rem;
+                    z-index: -1;
+                }
+            }
+            .price {
+                text-align: center;
+                position: relative;
+                display: flex;
+                align-items: flex-end;
+                color: v-bind('theme_style.price_color');
+                .symbol {
+                    font-size: 1.2rem;
+                }
+                .number {
+                    font-size: 2.4rem;
+                    line-height: 2.4rem;
+                    font-weight: 600;
+                    padding-left: 0.4rem;
+                }
+            }
+            .name {
+                font-size: 1.1rem;
+                color: v-bind('theme_style.name_color');
+                line-height: 1.6rem;
+            }
+        }
+    }
+    .right {
+        flex: 1;
+        width: 0;
+        position: relative;
+        &::before {
+            content: '';
+            width: 18rem;
+            height: 18rem;
+            position: absolute;
+            left: -0.7rem;
+            top: 50%;
+            transform: translateY(-50%);
+            border-radius: 100%;
+            background: v-bind('theme_style.background');
+        }
+        .title {
+            font-size: 1.6rem;
+            font-weight: 500;
+            color: v-bind('theme_style.content_title_color');
+            line-height: 2.2rem;
+        }
+        .desc {
+            margin-top: 0.3rem;
+            font-size: 1.2rem;
+            line-height: 1.7rem;
+            color: v-bind('theme_style.content_desc_color');
+        }
+        .coupon-btn {
+            width: 7.2rem;
+            height: 2.2rem;
+            font-size: 1.2rem;
+            line-height: 2.2rem;
+            background: v-bind('theme_style.btn_background');
+            color: v-bind('theme_style.btn_color');
+            text-align: center;
+            border-radius: 1.2rem;
+            margin-top: 0.6rem;
+        }
+    }
+}
+.coupon-theme-5 {
+    display: flex;
+    flex-direction: row;
+    gap: v-bind('theme_style.spacing');
+    .item {
+        flex-basis: auto;
+        flex-shrink: 0;
+        border-radius: 0.6rem;
+        width: 12.6rem;
+        height: 6.4rem;
+        position: relative;
+        .left {
+            position: absolute;
+            left: 0;
+            width: 10rem;
+            height: 100%;
+            background-image: url('../../assets/images/components/model-coupon/theme-5-bg.png');
+            background-size: 100% 100%;
+            padding: 0.6rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 1;
+            .price {
+                text-align: center;
+                position: relative;
+                display: flex;
+                align-items: end;
+                color: v-bind('theme_style.price_color');
+                margin-bottom: 0.5rem;
+                .symbol {
+                    font-size: 1.2rem;
+                    font-weight: 500;
+                }
+                .number {
+                    font-size: 2.4rem;
+                    font-weight: 500;
+                    line-height: 20px;
+                    padding-left: 0.4rem;
+                }
+            }
+            .name {
+                font-size: 1.2rem;
+                color: v-bind('theme_style.name_color');
+            }
+        }
+        .right {
+            width: 4.6rem;
+            padding-left: 2rem;
+            border-radius: 0.6rem;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            height: 100%;
+            background: v-bind('theme_style.background');
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .coupon-btn {
+                color: v-bind('theme_style.btn_color');
+                position: relative;
+                font-size: 1.2rem;
+                font-weight: 500;
+                text-align: center;
+                writing-mode: vertical-lr;
+                letter-spacing: 5px;
+            }
+        }
+    }
+}
+.coupon-theme-6 {
+    display: flex;
+    gap: v-bind('theme_style.spacing');
+    .item {
+        flex-basis: auto;
+        flex-shrink: 0;
+        border-radius: 1.2rem;
+        padding: 0.6rem;
+        width: 14rem;
+        height: 10rem;
+        position: relative;
+        background: v-bind('theme_style.background');
+        .top {
+            width: 100%;
+            padding: 0.4rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 1;
+            background: v-bind('theme_style.background_inside');
+            border-radius: 0.6rem;
+            position: relative;
+            overflow: hidden;
+            &::before {
+                content: '';
+                position: absolute;
+                left: -0.7rem;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 1.4rem;
+                height: 1.4rem;
+                background: v-bind('theme_style.background');
+                border-radius: 50%;
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                right: -0.7rem;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 1.4rem;
+                height: 1.4rem;
+                background: v-bind('theme_style.background');
+                border-radius: 50%;
+            }
+            .price {
+                text-align: center;
+                position: relative;
+                display: flex;
+                align-items: end;
+                color: v-bind('theme_style.price_color');
+                margin-bottom: 0.1rem;
+                .symbol {
+                    font-size: 2.2rem;
+                    font-weight: 500;
+                }
+                .number {
+                    font-size: 3.2rem;
+                    font-weight: 500;
+                    line-height: 32px;
+                    padding-left: 0.4rem;
+                }
+            }
+            .name {
+                font-size: 1.2rem;
+                color: v-bind('theme_style.name_color');
+            }
+        }
+        .bottom {
+            margin-top: 0.6rem;
+            text-align: center;
+            .coupon-btn {
+                color: v-bind('theme_style.btn_color');
+                position: relative;
+                font-size: 1.6rem;
+                line-height: 2.2rem;
+                font-weight: 500;
+                text-align: center;
+            }
+        }
+    }
+}
+.coupon-theme-7 {
+    display: flex;
+    gap: v-bind('theme_style.spacing');
+    .item {
+        flex-basis: auto;
+        flex-shrink: 0;
+        border-radius: 0.4rem;
+        width: 11.8rem;
+        height: 6.4rem;
+        position: relative;
+        background: v-bind('theme_style.background');
+        overflow: hidden;
+        display: flex;
+        &::before {
+            content: '';
+            position: absolute;
+            left: 8rem;
+            top: -0.6rem;
+            width: 1.2rem;
+            height: 1.2rem;
+            background-color: v-bind(theme_7_background_style);
+            border-radius: 50%;
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            left: 8rem;
+            bottom: -0.6rem;
+            width: 1.2rem;
+            height: 1.2rem;
+            background-color: v-bind(theme_7_background_style);
+            border-radius: 50%;
+        }
+        .left {
+            width: 8.6rem;
+            padding: 0.4rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            .price {
+                text-align: center;
+                position: relative;
+                display: flex;
+                align-items: end;
+                color: v-bind('theme_style.price_color');
+                margin-bottom: 0.5rem;
+                .symbol {
+                    font-size: 1.2rem;
+                    font-weight: 500;
+                }
+                .number {
+                    font-size: 2.4rem;
+                    font-weight: 500;
+                    line-height: 2rem;
+                    padding-left: 0.4rem;
+                }
+            }
+            .name {
+                font-size: 1.2rem;
+                color: v-bind('theme_style.name_color');
+            }
+        }
+        .right {
+            flex: 1;
+            width: 0;
+            padding-left: 0.7rem;
+            position: relative;
+            &::before {
+                content: '';
+                position: absolute;
+                left: -0.05rem;
+                top: 0;
+                bottom: 0;
+                width: 0;
+                height: 100%;
+                border: 0.1rem dashed v-bind(theme_7_background_style);
+                opacity: 0.61;
+            }
+            .coupon-btn {
+                padding: 0.4rem;
+                width: 100%;
+                color: v-bind('theme_style.btn_color');
+                font-size: 1.1rem;
+                font-weight: 500;
+                text-align: center;
+                writing-mode: vertical-lr;
+                letter-spacing: 3px;
+            }
+        }
+    }
+}
 </style>
diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue
index 3426fffd..48bc0689 100644
--- a/src/components/model-coupon/model-coupon-setting.vue
+++ b/src/components/model-coupon/model-coupon-setting.vue
@@ -29,10 +29,21 @@ const default_config = {
             desc_color: '#FF3830',
             // 主题1时不显示
             limit_send_count: '#999',
-            btn_background: [{ color: '#FF3830', color_percentage: undefined }],
+            btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
+            btn_direction: '90deg',
             btn_color: '#FF3830',
-            background: [{ color: '#FFF1E1', color_percentage: undefined }],
+            background: [{ color: '#FF3830', color_percentage: undefined }],
+            direction: '90deg',
+            // 主题1时不显示
+            background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
+            // 主题1时不显示
+            direction_inside: '90deg',
             spacing: 20,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
         theme_2: {
             price_color: '#FF3830',
@@ -40,22 +51,44 @@ const default_config = {
             desc_color: '#999',
             // 主题2时不显示
             limit_send_count: '#999',
-            btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
+            btn_background: [{ color: '#FF3830', color_percentage: undefined }],
+            btn_direction: '90deg',
             btn_color: '#fff',
             // 当为主题2时，不显示
             background: [{ color: '#fff', color_percentage: undefined }],
+            // 当为主题2时，不显示
+            direction: '90deg',
+            // 主题2时不显示
+            background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
+            // 主题2时不显示
+            direction_inside: '90deg',
             spacing: 15,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
         theme_3: {
             price_color: '#FF3830',
             name_color: '#FF3830',
             desc_color: '#FF3830',
             limit_send_count: '#999',
+            // 主题3时不显示
             btn_background: [{ color: '#FF3830', color_percentage: undefined }],
-            btn_color: '#FF3830',
-            background: [{ color: '#FFF1E1', color_percentage: undefined }],
-            // 当为主题34时，间距不给予修改，优惠券沾满整行
-            spacing: 0,
+            // 主题3时不显示
+            btn_direction: '90deg',
+            btn_color: '#fff',
+            background: [{ color: '#FF3830', color_percentage: undefined }],
+            direction: '90deg',
+            background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
+            direction_inside: '90deg',
+            spacing: 8,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
         theme_4: {
             price_color: '#FF3830',
@@ -64,10 +97,18 @@ const default_config = {
             // 主题4时不显示
             limit_send_count: '#999',
             btn_background: [{ color: '#fff', color_percentage: undefined }],
+            btn_direction: '90deg',
             btn_color: '#FF3830',
-            background: [{ color: '#FFF1E1', color_percentage: undefined }],
-            // 当为主题34时，间距不给予修改，优惠券沾满整行
-            spacing: 0,
+            background: [{ color: '#ff3830', color_percentage: undefined }],
+            direction: '90deg',
+            background_inside: [{ color: '#fff', color_percentage: undefined }],
+            direction_inside: '90deg',
+            spacing: 8,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
         theme_5: {
             price_color: '#FF3830',
@@ -78,9 +119,24 @@ const default_config = {
             limit_send_count: '#999',
             // 主题5时不显示
             btn_background: [{ color: '#fff', color_percentage: undefined }],
+            // 主题5时不显示
+            btn_direction: '90deg',
             btn_color: '#fff',
-            background: [{ color: '#FFF1E1', color_percentage: undefined }],
+            background: [
+                { color: '#FFA273', color_percentage: undefined },
+                { color: '#FF3030', color_percentage: undefined },
+            ],
+            direction: '90deg',
+            // 主题5时不显示
+            background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
+            // 主题5时不显示
+            direction_inside: '90deg',
             spacing: 10,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
         theme_6: {
             price_color: '#FF3830',
@@ -91,9 +147,19 @@ const default_config = {
             limit_send_count: '#999',
             // 主题6时不显示
             btn_background: [{ color: '#fff', color_percentage: undefined }],
+            // 主题6时不显示
+            btn_direction: '90deg',
             btn_color: '#fff',
             background: [{ color: '#FF3830', color_percentage: undefined }],
+            direction: '90deg',
+            background_inside: [{ color: '#fff', color_percentage: undefined }],
+            direction_inside: '90deg',
             spacing: 10,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
         theme_7: {
             price_color: '#fff',
@@ -104,13 +170,23 @@ const default_config = {
             limit_send_count: '#999',
             // 主题7时不显示
             btn_background: [{ color: '#E1B47A', color_percentage: undefined }],
+            btn_direction: '90deg',
             btn_color: '#fff',
             background: [
-                { color: '#FF3830', color_percentage: undefined },
+                { color: '#F4DBA5', color_percentage: undefined },
                 { color: '#E1B47A', color_percentage: undefined },
             ],
             direction: '90deg',
+            // 主题7时不显示
+            background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
+            // 主题7时不显示
+            direction_inside: '90deg',
             spacing: 10,
+            // 风格4字段
+            type_color: '#FF3830',
+            type_background: '#FFF1E1',
+            content_title_color: '#fff',
+            content_desc_color: '#fff',
         },
     },
     common_style: {
diff --git a/src/components/model-coupon/model-coupon-styles.vue b/src/components/model-coupon/model-coupon-styles.vue
index a4f85637..3705f250 100644
--- a/src/components/model-coupon/model-coupon-styles.vue
+++ b/src/components/model-coupon/model-coupon-styles.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="styles">
-        <el-form :model="form" label-width="70">
+        <el-form :model="form" label-width="75">
             <card-container class="mb-8">
                 <div class="mb-12">优惠券样式</div>
                 <el-form-item label="金额">
@@ -14,24 +14,40 @@
                         <color-picker v-model="form.desc_color" :default-color="clone_form.desc_color"></color-picker>
                     </el-form-item>
                 </template>
+                <template v-if="!['1', '2', '3', '5', '6', '7'].includes(theme)">
+                    <el-form-item label="券类型颜色">
+                        <color-picker v-model="form.type_color" :default-color="clone_form.type_color"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="券类型背景">
+                        <color-picker v-model="form.type_background" :default-color="clone_form.type_background"></color-picker>
+                    </el-form-item>
+                </template>
                 <template v-if="!['1', '2', '4', '5', '6', '7'].includes(theme)">
                     <el-form-item label="数量限制">
                         <color-picker v-model="form.limit_send_count" :default-color="clone_form.limit_send_count"></color-picker>
                     </el-form-item>
                 </template>
                 <template v-if="!['2'].includes(theme)">
-                    <el-form-item label="背景">
-                        <mult-color-picker :value="form.background" :type="form.direction"></mult-color-picker>
+                    <el-form-item :label="(['3', '4', '6'].includes(theme) ? '外' : '') + '背景'">
+                        <template v-if="!['3', '4', '6'].includes(theme)">
+                            <mult-color-picker :value="form.background" :type="form.direction" @update:value="background_event"></mult-color-picker>
+                        </template>
+                        <template v-else>
+                            <color-picker v-model="form.background[0].color" :default-color="clone_form.background[0].color"></color-picker>
+                        </template>
                     </el-form-item>
                 </template>
-                <template v-if="!['3', '4'].includes(theme)">
-                    <el-form-item label="间距">
-                        <slider v-model="form.spacing"></slider>
+                <template v-if="!['1', '2', '5', '7'].includes(theme)">
+                    <el-form-item label="内背景">
+                        <mult-color-picker :value="form.background_inside" :type="form.direction_inside" @update:value="background_inside_event"></mult-color-picker>
                     </el-form-item>
                 </template>
-                <template v-if="!['5', '6', '7'].includes(theme)">
+                <el-form-item label="间距">
+                    <slider v-model="form.spacing"></slider>
+                </el-form-item>
+                <template v-if="!['3', '5', '6', '7'].includes(theme)">
                     <el-form-item label="按钮背景">
-                        <mult-color-picker :value="form.btn_background" :type="form.btn_direction"></mult-color-picker>
+                        <mult-color-picker :value="form.btn_background" :type="form.btn_direction" @update:value="btn_background_event"></mult-color-picker>
                     </el-form-item>
                 </template>
                 <el-form-item label="按钮文字">
@@ -40,7 +56,7 @@
             </card-container>
         </el-form>
         <div class="divider-line"></div>
-        <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
+        <common-styles class="styles-height" :value="form.common_style" :is-mult-background="theme !== '7'" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -59,6 +75,23 @@ const emit = defineEmits(['update:value']);
 // 默认值
 let form = reactive(props.value);
 let clone_form = cloneDeep(props.value);
+
+const background_event = (arry: color_list[], type: number) => {
+    form.background = arry;
+    form.direction = type.toString();
+    emit('update:value', form);
+};
+const background_inside_event = (arry: color_list[], type: number) => {
+    form.background_inside = arry;
+    form.direction_inside = type.toString();
+    emit('update:value', form);
+};
+
+const btn_background_event = (arry: color_list[], type: number) => {
+    form.btn_background = arry;
+    form.btn_direction = type.toString();
+    emit('update:value', form);
+};
 const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index d36e5625..a378dd67 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -3,7 +3,7 @@
         <el-form :model="form" label-width="70">
             <card-container>
                 <el-form-item label="选择风格">
-                    <theme-select v-model="form.theme" :data="base_list.themeList" :not-cleard-button="true" @update:model-value="themeChange"></theme-select>
+                    <theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
                 </el-form-item>
                 <template v-if="['1', '2', '3'].includes(form.theme)">
                     <el-form-item v-if="['2', '3'].includes(form.theme)" label="logo">
diff --git a/src/layout/components/main/default/coupon.ts b/src/layout/components/main/default/coupon.ts
index 3d1b2de6..721d45b2 100644
--- a/src/layout/components/main/default/coupon.ts
+++ b/src/layout/components/main/default/coupon.ts
@@ -18,8 +18,15 @@ interface DefaultCoupon {
         btn_color: string;
         background: color_list[];
         direction: string;
+        background_inside: color_list[];
+        direction_inside: string;
         spacing: number;
         common_style: object;
+        // 风格4字段
+        type_color: string;
+        type_background: string;
+        content_title_color: string;
+        content_desc_color: string;
     };
 }
 const defaultCoupoin: DefaultCoupon = {
@@ -41,10 +48,19 @@ const defaultCoupoin: DefaultCoupon = {
         btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
         btn_direction: '90deg',
         btn_color: '#FF3830',
-        background: [{ color: '#FFF1E1', color_percentage: undefined }],
+        background: [{ color: '#FF3830', color_percentage: undefined }],
         direction: '90deg',
-        spacing: 10,
+        // 内背景
+        background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
+        direction_inside: '90deg',
+        spacing: 20,
         common_style: { ...defaultCommon, padding_left: 18, padding_right: 18, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
+
+        // 风格4字段
+        type_color: '#FF3830',
+        type_background: '#FFF1E1',
+        content_title_color: '#fff',
+        content_desc_color: '#fff',
     },
 };
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1cf7e804..204ec433 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +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'];
+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'];
 /**
  * 判断一个对象是否为空。
  *
@@ -40,22 +40,26 @@ export function is_obj(obj: unknown): boolean {
  * @param {string[], string} path
  * @returns {string}
  */
-export function gradient_computer(new_style: gradientStyle) {
+export function gradient_computer(new_style: gradientStyle, is_return_all: boolean = true) {
     let color_list = new_style.color_list;
     let direction = new_style.direction;
-    return gradient_handle(color_list, direction);
+    return gradient_handle(color_list, direction, is_return_all);
 }
 /**
  * 根据给定的颜色列表和方向生成一个线性渐变的CSS样式字符串。
  *
  * @param color_list 颜色列表，包含渐变中的各个颜色值。
  * @param direction 渐变的方向，可以是角度或其他CSS支持的渐变方向。
+ * @param is_return_all 是否返回所有样式，包括渐变类型、颜色列表和方向。默认为false，只返回渐变样式。
  * @returns 返回一个字符串，包含生成的线性渐变样式。
  */
-export function gradient_handle(color_list: color_list[], direction: string) {
+export function gradient_handle(color_list: color_list[], direction: string, is_return_all: boolean = true) {
     let container_common_styles = ``;
     if (color_list && color_list.length > 0) {
-        container_common_styles += `background: linear-gradient(${direction || '180deg'},`;
+        if (is_return_all) {
+            container_common_styles += `background:`;
+        }
+        container_common_styles += `linear-gradient(${direction || '180deg'},`;
 
         const new_color_list = JSON.parse(JSON.stringify(color_list));
         new_color_list.forEach((item: any, index: number) => {
@@ -80,9 +84,11 @@ export function gradient_handle(color_list: color_list[], direction: string) {
                 }
             }
         });
-        container_common_styles += `);`;
+        container_common_styles += `)`;
+        if (is_return_all) {
+            container_common_styles += `;`;
+        }
     }
-
     return container_common_styles;
 }