diff --git a/src/assets/images/components/model-seckill/theme-2.png b/src/assets/images/components/model-seckill/theme-2.png
index 70ff43ce..8a776794 100644
Binary files a/src/assets/images/components/model-seckill/theme-2.png and b/src/assets/images/components/model-seckill/theme-2.png differ
diff --git a/src/assets/images/components/model-seckill/time.png b/src/assets/images/components/model-seckill/time.png
new file mode 100644
index 00000000..d0cacb8e
Binary files /dev/null and b/src/assets/images/components/model-seckill/time.png differ
diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index bd62f65e..f6aa86f8 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -79,7 +79,7 @@ const change_color = (index: number, color: string | null) => {
     update_value();
 };
 const change_color_percentage = (index: number, percentage: number | undefined) => {
-    color_list.value[index].color_percentage = percentage?.toString();
+    color_list.value[index].color_percentage = percentage;
     update_value();
 };
 const update_value = () => {
diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index eb880f1b..4593f88f 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -2,18 +2,27 @@
     <div :style="style">
         <div class="flex-col gap-10">
             <div v-if="form.head_state == '1'" class="seckill-head flex-row align-c jc-sb oh" :style="seckill_head_style">
-                <div class="flex-row align-c">
+                <div :class="['flex-row align-c', {'gap-10': form.theme != '1', 'jc-sb w': form.theme == '2'}]">
                     <div class="seckill-title">
                         <image-empty v-if="form.topic_type == 'image'" v-model="form.topic_src[0]" error-img-style="width:2.1rem; height: 1rem;"></image-empty>
-                        <span v-else :style="`color: ${ new_style.topic_color };font-size: ${ new_style.topic_size }px;`">{{ form.topic_text }}</span>
+                        <span v-else :style="`color: ${ new_style.topic_color };font-size: ${ new_style.topic_size }px;line-height:21px;font-weight:600;`">{{ form.topic_text }}</span>
                     </div>
-                    <div class="pl-6 pr-6 cr-f">|</div>
-                    <span class="size-10 pr-4" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
-                    <div class="flex-row gap-3 jc-c align-c">
+                    <div v-if="form.theme == '1'" class="pl-6 pr-6 cr-f">|</div>
+                    <div class="flex-row align-c gap-4">
+                        <span v-if="form.theme != '4'" class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
+                        <div class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4'? `${ time_bg };padding: 0.3rem 0.4rem;border-radius: 1.1rem;` : '']">
+                        <img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="url_computer('time')" />
                         <template v-for="(item, index) in time_config" :key="item.key">
-                            <div class="time-config size-12" :style="`${ time_bg };color: ${ new_style.countdown_color }`">{{ item.value }}</div>
-                            <div v-if="[0, 1].includes(index)" :style="icon_time_check()">:</div>
+                            <template v-if="form.theme == '4'">
+                                <div class="size-12" :style="`color: ${ new_style.countdown_color }`">{{ item.value }}</div>
+                                <span v-if="[0, 1].includes(index)" class="colon" :style="`color: ${ new_style.countdown_color }`">:</span>
+                            </template>
+                            <template v-else>
+                                <div class="time-config size-12" :style="`${ time_bg };color: ${ new_style.countdown_color }`">{{ item.value }}</div>
+                                <span v-if="[0, 1].includes(index)" class="colon" :style="icon_time_check()">:</span>
+                            </template>
                         </template>
+                        </div>
                     </div>
                 </div>
                 <div v-if="form.button_status == '1'" class="flex-row align-c" :style="`color: ${ new_style.head_button_color }`">
@@ -65,18 +74,33 @@ const seckill_head_style = computed(() => {
 });
 
 const style = computed(() => common_styles_computer(props.value.style.common_style));
+
+const url_computer = (name: string) => {
+    const new_url = ref(new URL(`../../assets/images/components/model-seckill/${name}.png`, import.meta.url).href).value;
+    return new_url;
+};
 </script>
 <style lang="scss" scoped>
 .seckill-head {
     padding: 1.5rem 1.3rem;
     width: 100%;
     height: 5.1rem;
+    border-radius: 0.8rem 0.8rem 0 0;
     .seckill-title {
         height: 2.1rem;
     }
     .time-config {
         padding: 0.1rem 0.5rem;
         line-height: 1.7rem;
+        border-radius: 0.4rem;
     }
 }
+.seckill-head-icon {
+    width: 1.6rem;
+    height: 1.6rem;
+}
+.colon {
+    position: relative;
+    top: -0.1rem;
+}
 </style>
diff --git a/src/components/model-seckill/model-seckill-content.vue b/src/components/model-seckill/model-seckill-content.vue
index 7cbdbf96..391604c2 100644
--- a/src/components/model-seckill/model-seckill-content.vue
+++ b/src/components/model-seckill/model-seckill-content.vue
@@ -28,14 +28,17 @@
                             <el-input v-model="form.topic_text" placeholder="请输入标题文字"></el-input>
                         </el-form-item>
                     </template>
-                    <el-form-item label="按钮状态">
-                        <el-radio-group v-model="form.button_status">
-                            <el-radio v-for="item in base_list.state_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item v-if="form.button_status == '1'" label="按钮文字">
-                        <el-input v-model="form.button_text" placeholder="请输入按钮文字"></el-input>
-                    </el-form-item>
+                    <template v-if="form.theme != '2'">
+                        <el-form-item label="按钮状态">
+                            <el-radio-group v-model="form.button_status">
+                                <el-radio v-for="item in base_list.state_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item v-if="form.button_status == '1'" label="按钮文字">
+                            <el-input v-model="form.button_text" placeholder="请输入按钮文字"></el-input>
+                        </el-form-item>
+                    </template>
+                    
                 </template>
             </card-container>
             <div class="divider-line"></div>
@@ -113,6 +116,10 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
 
+watchEffect(() => {
+    form.value = props.value;
+});
+
 const base_list = {
     state_list: [
         { name: '显示', value: '1' },
diff --git a/src/components/model-seckill/model-seckill-setting.vue b/src/components/model-seckill/model-seckill-setting.vue
index a4034c39..34b5af3a 100644
--- a/src/components/model-seckill/model-seckill-setting.vue
+++ b/src/components/model-seckill/model-seckill-setting.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-seckill-content :value="value.content" :styles="value.style"></model-seckill-content>
+            <model-seckill-content :value="form.content" :styles="form.style" @update:change-theme="change_theme"></model-seckill-content>
         </template>
         <template v-if="type == '2'">
-            <model-seckill-styles :value="value.style" :content="value.content"></model-seckill-styles>
+            <model-seckill-styles :value="form.style" :content="form.content"></model-seckill-styles>
         </template>
     </div>
 </template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
+import { online_url } from '@/utils';
+
 const props = defineProps({
     type: {
         type: String,
@@ -20,64 +22,127 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-const default_data = {
-    topic_color: '',
-    topic_size: 12,
-    head_button_color: '',
-    head_button_size: 12,
-    end_text_color: '',
-    countdown_bg_color_list: [{ color: '', color_percentage: undefined }],
-    countdown_direction: '180deg',
-    countdown_color: '',
-    header_background_color_list: [{ color: '', color_percentage: undefined }],
-    header_background_direction: '180deg',
-    header_background_img_style: '2',
-    header_background_img_url: [],
-    shop_radius: {
-        radius: 8,
-        radius_top_left: 8,
-        radius_top_right: 8,
-        radius_bottom_left: 8,
-        radius_bottom_right: 8,
-    } ,
-    shop_img_radius: {
-        radius: 4,
-        radius_top_left: 4,
-        radius_top_right: 4,
-        radius_bottom_left: 4,
-        radius_bottom_right: 4,
-    },
-    shop_title_color: '',
-    shop_title_typeface: '',
-    shop_title_size: 12,
-    price_color: '',
-    original_price_color: '',
-    seckill_subscript_location: '',
-    seckill_subscript_text_color: '',
-    seckill_subscript_bg_color: '',
-    progress_bg_color: '',
-    progress_actived_color_list: [{ color: '', color_percentage: undefined }],
-    progress_actived_direction: '180deg',
-    progress_button_color: '',
-    progress_button_icon_color: '',
-    progress_text_color: '',
-    is_roll: true,
-    interval_time: 2,
-    rolling_fashion: 'translation',
-}
-const default_config = {
-    style: {
-        theme_1: {},
-        theme_2: {},
-        theme_3: {},
-        theme_4: {},
-        theme_5: {},
-    },
-};
+
+
+const new_url = ref('');
+let default_data:any = {};
+let default_config:any = {};
+onBeforeMount(async () => {
+    new_url.value = await online_url('/static/plugins/seckill/images/diy/').then(res => res);
+    default_data = {
+        content: {
+            topic_type: 'image',
+            topic_src: [{ id: 1, url: new_url.value + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }],
+            topic_text: '限时秒杀',
+        },
+        style: {
+            topic_color: '#fff',
+            topic_size: 18,
+            head_button_color: '#fff',
+            head_button_size: 12,
+            end_text_color: '#fff',
+            countdown_bg_color_list: [{ color: '#fff', color_percentage: undefined }],
+            countdown_direction: '180deg',
+            countdown_color: '#FF1818',
+            header_background_color_list: [{ color: '', color_percentage: undefined }],
+            header_background_direction: '180deg',
+            header_background_img_style: '2',
+            header_background_img_url: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
+            shop_radius: {
+                radius: 8,
+                radius_top_left: 8,
+                radius_top_right: 8,
+                radius_bottom_left: 8,
+                radius_bottom_right: 8,
+            } ,
+            shop_img_radius: {
+                radius: 4,
+                radius_top_left: 4,
+                radius_top_right: 4,
+                radius_bottom_left: 4,
+                radius_bottom_right: 4,
+            },
+            shop_title_color: '',
+            shop_title_typeface: '',
+            shop_title_size: 12,
+            price_color: '',
+            original_price_color: '',
+            seckill_subscript_location: '',
+            seckill_subscript_text_color: '',
+            seckill_subscript_bg_color: '',
+            progress_bg_color: '',
+            progress_actived_color_list: [{ color: '', color_percentage: undefined }],
+            progress_actived_direction: '180deg',
+            progress_button_color: '',
+            progress_button_icon_color: '',
+            progress_text_color: '',
+            is_roll: true,
+            interval_time: 2,
+            rolling_fashion: 'translation',
+        }
+    }
+    default_config = {
+        style: {
+            theme_1: {},
+            theme_2: {
+                content: {
+                    topic_type: 'image',
+                    topic_src: [{ id: 1, url: new_url.value + 'header-title-2.png', original: '标题2', title: '标题2', ext: '.png', type: 'img' }],
+                    button_status: '0',
+                },
+                style: {
+                    topic_color: '#000',
+                    end_text_color: '#666',
+                    header_background_color_list: [{ color: '#FFE0E0', color_percentage: undefined },{ color: '#FFEFEF', color_percentage: 50 }, { color: '#FFFFFF', color_percentage: undefined }],
+                    header_background_img_url: [],
+                    countdown_bg_color_list: [{ color: '#FF4909', color_percentage: undefined }, { color: '#FF8E4D', color_percentage: undefined }],
+                    countdown_direction: '180deg',
+                    countdown_color: '#fff',
+                }
+            },
+            theme_3: {
+                content: {
+                    topic_type: 'text',
+                    topic_src: [],
+                    button_status: '1',
+                },
+                style: {
+                    topic_color: '#000',
+                    head_button_color: '#000',
+                    end_text_color: '#666',
+                    header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+                    header_background_img_url: [],
+                    countdown_bg_color_list: [{ color: '#000', color_percentage: undefined }],
+                    countdown_direction: '180deg',
+                    countdown_color: '#fff',
+                }
+            },
+            theme_4: {
+                content: {
+                    topic_type: 'text',
+                    topic_src: [],
+                    button_status: '1',
+                },
+                style: {
+                    topic_color: '#000',
+                    head_button_color: '#000',
+                    end_text_color: '',
+                    header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+                    header_background_img_url: [],
+                    countdown_bg_color_list: [{ color: '#FF5000', color_percentage: undefined }],
+                    countdown_direction: '180deg',
+                    countdown_color: '#fff',
+                }
+            },
+        },
+    };
+})
 const form = ref(props.value);
 const change_theme = (val: string) => {
     if (val) {
-        form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data), (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
+        form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data.style), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
+        form.value.content = Object.assign({}, form.value.content, cloneDeep(default_data.content), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
+        console.log(form.value.content);     
     }
 };
 </script>
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index 8ede39b6..b22abdb6 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -9,7 +9,7 @@
                 <el-form-item label="按钮设置">
                     <color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :type-list="['color', 'size']"></color-text-size-group>
                 </el-form-item>
-                <el-form-item label="距离结束">
+                <el-form-item v-if="data.theme != '4'" label="距离结束">
                     <color-picker v-model="form.end_text_color"></color-picker>
                 </el-form-item>
                 <el-form-item label="数字背景">
diff --git a/src/utils/index.ts b/src/utils/index.ts
index fcc4d846..cdfde37b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -67,7 +67,7 @@ export function gradient_handle(color_list: color_list[], direction: string, is_
             if (color_list.length == 1) {
                 container_common_styles += ` ${item.color_percentage || 0}%, ${item.color} 100%`;
             } else {
-                if (!isEmpty(item.color_percentage)) {
+                if (typeof item.color_percentage === "number") {
                     if (index == color_list.length - 1) {
                         container_common_styles += ` ${item.color_percentage}%`;
                     } else {
diff --git a/src/views/layout/components/main/default/seckill.ts b/src/views/layout/components/main/default/seckill.ts
index ae56990e..891c3779 100644
--- a/src/views/layout/components/main/default/seckill.ts
+++ b/src/views/layout/components/main/default/seckill.ts
@@ -72,7 +72,7 @@ const defaultSeckill: DefaultSeckill = {
     },
     style: {
         topic_color: '#fff',
-        topic_size: 14,
+        topic_size: 18,
         head_button_color: '#fff',
         head_button_size: 12,
         end_text_color: '#fff',