diff --git a/src/assets/images/components/model-seckill/theme-1-bg.png b/src/assets/images/components/model-seckill/theme-1-bg.png
deleted file mode 100644
index f1460d26..00000000
Binary files a/src/assets/images/components/model-seckill/theme-1-bg.png and /dev/null differ
diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index 5d564fcb..eb880f1b 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -1,10 +1,31 @@
 <template>
     <div :style="style">
-        {{ props.value }}
+        <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="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>
+                    </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">
+                        <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>
+                    </div>
+                </div>
+                <div v-if="form.button_status == '1'" class="flex-row align-c" :style="`color: ${ new_style.head_button_color }`">
+                    <span :style="`font-size: ${ new_style.head_button_size }px;`">{{ form.button_text }}</span>
+                    <el-icon class="iconfont icon-arrow-right" :color="new_style.head_button_color"></el-icon>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer } from '@/utils';
+import { background_computer, common_styles_computer, gradient_computer } from '@/utils';
 
 const props = defineProps({
     value: {
@@ -14,8 +35,48 @@ const props = defineProps({
         },
     },
 });
+const form = computed(() => props.value?.content || {});
+const new_style = computed(() => props.value?.style || {});
+const time_config = [
+    { key: 'hour', value: 12 },
+    { key: 'minute', value: 30 },
+    { key: 'second', value: 52 },
+]
+const time_bg = computed(() => {
+    const { countdown_bg_color_list, countdown_direction } = new_style.value;
+    // 渐变
+    const gradient = { color_list: countdown_bg_color_list, direction: countdown_direction };
+    return gradient_computer(gradient);
+});
+// icon的渐变色处理
+const icon_time_check = () => {
+    return `${ time_bg.value };line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
+}
+
+const seckill_head_style = computed(() => {
+    let style = ``;
+    const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
+    // 渐变
+    const gradient = { color_list: header_background_color_list, direction: header_background_direction };
+    // 背景图
+    const back = { background_img_url: header_background_img_url, background_img_style: header_background_img_style };
+    style += gradient_computer(gradient) + background_computer(back);
+    return style;
+});
 
 const style = computed(() => common_styles_computer(props.value.style.common_style));
 </script>
 <style lang="scss" scoped>
+.seckill-head {
+    padding: 1.5rem 1.3rem;
+    width: 100%;
+    height: 5.1rem;
+    .seckill-title {
+        height: 2.1rem;
+    }
+    .time-config {
+        padding: 0.1rem 0.5rem;
+        line-height: 1.7rem;
+    }
+}
 </style>
diff --git a/src/components/model-seckill/model-seckill-setting.vue b/src/components/model-seckill/model-seckill-setting.vue
index 16e875e7..a4034c39 100644
--- a/src/components/model-seckill/model-seckill-setting.vue
+++ b/src/components/model-seckill/model-seckill-setting.vue
@@ -1,14 +1,15 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-seckill-content :value="value.content" :styles="value.style" :default-config="data_config"></model-seckill-content>
+            <model-seckill-content :value="value.content" :styles="value.style"></model-seckill-content>
         </template>
         <template v-if="type == '2'">
-            <model-seckill-styles :value="value.style" :content="value.content" :default-config="data_config"></model-seckill-styles>
+            <model-seckill-styles :value="value.style" :content="value.content"></model-seckill-styles>
         </template>
     </div>
 </template>
 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 const props = defineProps({
     type: {
         type: String,
@@ -19,14 +20,66 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-const data_config = reactive({
-    // 图片不同风格下的圆角
-    img_radius_0: 4,
-    img_radius_1: 0,
-});
+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 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)}`]);
+    }
+};
 </script>
 <style lang="scss" scoped>
-.auxiliary-line-setting {
-    width: 100%;
-}
 </style>
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index cf54941e..8ede39b6 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -19,28 +19,30 @@
                     <color-picker v-model="form.countdown_color"></color-picker>
                 </el-form-item>
                 <el-form-item label="顶部背景">
-                    <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
-                    <div class="flex-row jc-sb align-c">
-                        <div class="size-12">背景图</div>
-                        <el-radio-group v-model="form.header_background_img_style" is-button>
-                            <el-tooltip content="单张" placement="top" effect="light">
-                                <el-radio-button value="0">
-                                    <icon name="single-sheet"></icon>
-                                </el-radio-button>
-                            </el-tooltip>
-                            <el-tooltip content="平铺" placement="top" effect="light">
-                                <el-radio-button value="1">
-                                    <icon name="tile"></icon>
-                                </el-radio-button>
-                            </el-tooltip>
-                            <el-tooltip content="铺满" placement="top" effect="light">
-                                <el-radio-button value="2">
-                                    <icon name="spread-over"></icon>
-                                </el-radio-button>
-                            </el-tooltip>
-                        </el-radio-group>
+                    <div class="flex-col gap-10">
+                        <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                        <div class="flex-row jc-sb align-c">
+                            <div class="size-12">背景图</div>
+                            <el-radio-group v-model="form.header_background_img_style" is-button>
+                                <el-tooltip content="单张" placement="top" effect="light">
+                                    <el-radio-button value="0">
+                                        <icon name="single-sheet"></icon>
+                                    </el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="平铺" placement="top" effect="light">
+                                    <el-radio-button value="1">
+                                        <icon name="tile"></icon>
+                                    </el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="铺满" placement="top" effect="light">
+                                    <el-radio-button value="2">
+                                        <icon name="spread-over"></icon>
+                                    </el-radio-button>
+                                </el-tooltip>
+                            </el-radio-group>
+                        </div>
+                        <upload v-model="form.header_background_img_url" :limit="1"></upload>
                     </div>
-                    <upload v-model="form.header_background_img_url" :limit="1"></upload>
                 </el-form-item>
             </card-container>
             <div class="divider-line"></div>
@@ -82,7 +84,7 @@
                     <color-picker v-model="form.progress_bg_color"></color-picker>
                 </el-form-item>
                 <el-form-item label="选中色">
-                    <mult-color-picker :value="form.progress_actived_color" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
+                    <mult-color-picker :value="form.progress_actived_color_list" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
                 </el-form-item>
                 <el-form-item label="按钮背景">
                     <color-picker v-model="form.progress_button_color"></color-picker>
@@ -115,7 +117,6 @@
     </div>
 </template>
 <script setup lang="ts">
-import { pick } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -163,7 +164,7 @@ const countdown_color_picker_event = (arry: color_list[], type: number) => {
 };
 // 进度条选中的设置
 const progress_color_picker_event = (arry: color_list[], type: number) => {
-    form.value.progress_actived_color = arry;
+    form.value.progress_actived_color_list = arry;
     form.value.progress_actived_direction = type.toString();
 };
 </script>
diff --git a/src/views/layout/components/main/default/seckill.ts b/src/views/layout/components/main/default/seckill.ts
index b977b8e5..ae56990e 100644
--- a/src/views/layout/components/main/default/seckill.ts
+++ b/src/views/layout/components/main/default/seckill.ts
@@ -1,4 +1,6 @@
 import defaultCommon from './index';
+import { online_url } from '@/utils';
+const new_url = await online_url('/static/plugins/seckill/images/diy/');
 interface DefaultSeckill {
     content: {
         head_state: string;
@@ -18,14 +20,14 @@ interface DefaultSeckill {
     };
     style: {
         topic_color: string;
-        topic_size: string;
+        topic_size: number;
         head_button_color: string;
-        head_button_size: string;
+        head_button_size: number;
         end_text_color: string;
-        countdown_bg_color_list: string;
+        countdown_bg_color_list: color_list[];
         countdown_direction: string;
         countdown_color: string;
-        header_background_color_list: string;
+        header_background_color_list: color_list[];
         header_background_direction: string;
         header_background_img_style: string;
         header_background_img_url: uploadList[];
@@ -33,14 +35,14 @@ interface DefaultSeckill {
         shop_img_radius: radiusStyle;
         shop_title_color: string;
         shop_title_typeface: string;
-        shop_title_size: string;
+        shop_title_size: number;
         price_color: string;
         original_price_color: string;
         seckill_subscript_location: string;
         seckill_subscript_text_color: string;
         seckill_subscript_bg_color: string;
         progress_bg_color: string,
-        progress_actived_color: string,
+        progress_actived_color_list: color_list[],
         progress_actived_direction: string,
         progress_button_color: string,
         progress_button_icon_color: string,
@@ -55,11 +57,11 @@ const defaultSeckill: DefaultSeckill = {
     content: {
         head_state: '1',
         theme: '1',
-        topic_type: 'text',
-        topic_src: [],
-        topic_text: '',
+        topic_type: 'image',
+        topic_src: [{ id: 1, url: new_url + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }],
+        topic_text: '限时秒杀',
         button_status: '1',
-        button_text: '',
+        button_text: '更多',
         shop_style_type: '1',
         single_line_number: 3,
         shop_number: 10,
@@ -69,18 +71,18 @@ const defaultSeckill: DefaultSeckill = {
         subscript_text: '秒杀'
     },
     style: {
-        topic_color: '',
-        topic_size: '',
-        head_button_color: '',
-        head_button_size: '',
-        end_text_color: '',
-        countdown_bg_color_list: '',
+        topic_color: '#fff',
+        topic_size: 14,
+        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: '',
-        header_background_color_list: '',
+        countdown_color: '#FF1818',
+        header_background_color_list: [{ color: '', color_percentage: undefined }],
         header_background_direction: '180deg',
         header_background_img_style: '2',
-        header_background_img_url: [],
+        header_background_img_url: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
         shop_radius: {
             radius: 8,
             radius_top_left: 8,
@@ -97,22 +99,22 @@ const defaultSeckill: DefaultSeckill = {
         },
         shop_title_color: '',
         shop_title_typeface: '',
-        shop_title_size: '',
+        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: '',
+        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: '',
-        common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
+        rolling_fashion: 'translation',
+        common_style: { ...defaultCommon, padding: 0, padding_top: 2, padding_bottom: 10, padding_left: 10, padding_right: 10 },
     },
 };
 
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index bc3a7aac..be21197f 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -262,45 +262,7 @@ interface componentsData {
     key: string;
     data: componentsData[];
 }
-const components = ref<componentsData[]>([
-    // {
-    //     name: '基础组件',
-    //     key: 'base',
-    //     data: [
-    //         { key: 'carousel', name: '轮播图' },
-    //         { key: 'search', name: '搜索框' },
-    //         { key: 'nav-group', name: '导航组' },
-    //         { key: 'notice', name: '公告' },
-    //         { key: 'video', name: '视频' },
-    //         { key: 'user-info', name: '用户信息' },
-    //         { key: 'tabs', name: '选项卡' },
-    //         { key: 'article-tabs', name: '文章选项卡' },
-    //         { key: 'shop-tabs', name: '商品选项卡' },
-    //         { key: 'article-list', name: '文章列表' },
-    //         { key: 'shop-list', name: '商品列表' },
-    //         { key: 'img-magic', name: '图片魔方' },
-    //         { key: 'data-magic', name: '数据魔方' },
-    //         { key: 'hot-zone', name: '热区' },
-    //         { key: 'custom', name: '自定义' },
-    //     ],
-    // },
-    // {
-    //     name: '营销组件',
-    //     key: 'plugins',
-    //     data: [{ key: 'coupon', name: '优惠券' }],
-    // },
-    // {
-    //     name: '工具组件',
-    //     key: 'tool',
-    //     data: [
-    //         { key: 'float-window', name: '悬浮按钮' },
-    //         { key: 'text-title', name: '文本标题' },
-    //         { key: 'auxiliary-blank', name: '辅助空白' },
-    //         { key: 'row-line', name: '横线' },
-    //         { key: 'rich-text', name: '富文本' },
-    //     ],
-    // },
-]);
+const components = ref<componentsData[]>([]);
 const url_computer = (name: string) => {
     const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value;
     return new_url;