diff --git a/src/assets/images/layout/main/foot/cart-checked.png b/src/assets/images/layout/main/foot/cart-checked.png
deleted file mode 100644
index a9c7315a..00000000
Binary files a/src/assets/images/layout/main/foot/cart-checked.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/cart.png b/src/assets/images/layout/main/foot/cart.png
deleted file mode 100644
index 6782acce..00000000
Binary files a/src/assets/images/layout/main/foot/cart.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/category-checked.png b/src/assets/images/layout/main/foot/category-checked.png
deleted file mode 100644
index c0a5868b..00000000
Binary files a/src/assets/images/layout/main/foot/category-checked.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/category.png b/src/assets/images/layout/main/foot/category.png
deleted file mode 100644
index dab409be..00000000
Binary files a/src/assets/images/layout/main/foot/category.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/home-checked.png b/src/assets/images/layout/main/foot/home-checked.png
deleted file mode 100644
index eeb1211e..00000000
Binary files a/src/assets/images/layout/main/foot/home-checked.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/home.png b/src/assets/images/layout/main/foot/home.png
deleted file mode 100644
index 51458312..00000000
Binary files a/src/assets/images/layout/main/foot/home.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/user-checked.png b/src/assets/images/layout/main/foot/user-checked.png
deleted file mode 100644
index b72fd438..00000000
Binary files a/src/assets/images/layout/main/foot/user-checked.png and /dev/null differ
diff --git a/src/assets/images/layout/main/foot/user.png b/src/assets/images/layout/main/foot/user.png
deleted file mode 100644
index d85073c7..00000000
Binary files a/src/assets/images/layout/main/foot/user.png and /dev/null differ
diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index e6d70262..50e65e42 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -54,7 +54,7 @@
                             <el-button @click="mult_del_event">删除{{ upload_type_name }}</el-button>
                             <!-- <el-cascader :show-all-levels="false" clearable></el-cascader> -->
                             <div class="right-classify ml-12">
-                                <transform-category :data="type_data_list" :check-img-ids="check_img_ids" :placeholder="upload_type_name + '移动至'" @call-back="transform_category_event"></transform-category>
+                                <transform-category :data="type_data_list" :check-img-ids="check_img_ids" :type="upload_type_name" :placeholder="upload_type_name + '移动至'" @call-back="transform_category_event"></transform-category>
                             </div>
                         </div>
                         <div class="right-search">
diff --git a/src/components/common/upload/transform-category.vue b/src/components/common/upload/transform-category.vue
index de7b3d9f..eceed778 100644
--- a/src/components/common/upload/transform-category.vue
+++ b/src/components/common/upload/transform-category.vue
@@ -38,6 +38,10 @@ const props = defineProps({
         type: String,
         default: () => '',
     },
+    type: {
+        type: String,
+        default: '图片', // tree/list
+    },
 });
 interface cascaderData {
     value: string;
@@ -153,7 +157,7 @@ const confirm = () => {
         });
     } else {
         if (!props.checkImgIds) {
-            ElMessage.warning('请先选择图片!');
+            ElMessage.warning('请先选择' + props.type + '!');
         }
         if (!category_id.value) {
             ElMessage.warning('请先选择分组!');
diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index 4e61f905..af21cf39 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="oh" :style="style_container">
         <div class="re oh" :style="style">
-            <div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
+            <div v-if="!['4'].includes(article_theme)" class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
                 <template v-for="(item, index) in data_list" :key="index">
                     <div class="item bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
                         <template v-if="article_theme !== '3'">
@@ -25,6 +25,30 @@
                     </div>
                 </template>
             </div>
+            <div v-else class="oh" :class="article_theme_class">
+                <el-carousel :key="carousel_key" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll ? true : false">
+                    <el-carousel-item v-for="(item1, index1) in article_carousel_list" :key="index1" class="flex" :style="article_spacing">
+                        <div v-for="(item, index) in item1.carousel_list" :key="index" class="item bg-f oh flex-col" :style="article_style">
+                            <template v-if="item.new_cover.length > 0">
+                                <image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
+                            </template>
+                            <template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
+                            <div class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
+                                <div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                <div class="flex-row jc-sb gap-8 align-e mt-10">
+                                    <div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
+                                    <div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
+                                        <icon name="eye"></icon>
+                                        <div>
+                                            {{ item.data.access_count ? item.data.access_count : '16' }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
         </div>
     </div>
 </template>
@@ -57,7 +81,6 @@ interface ArticleList {
     new_title: string;
     new_cover: uploadList[];
 }
-const containerRef = ref<HTMLElement | null>(null);
 // 数据
 const data_list = ref<ArticleList[]>([]);
 // 风格
@@ -81,8 +104,7 @@ const content_spacing = ref('');
 // 文章间距
 const article_spacing = ref('');
 const article_spacing_children = ref('');
-const article_item_width = ref('104');
-const article_item_height = ref('104');
+const article_item_height = ref('155');
 
 const article_style = ref({});
 const default_data_list: ArticleList = {
@@ -91,8 +113,16 @@ const default_data_list: ArticleList = {
     new_title: '测试文章标题',
     new_cover: [],
 };
-const get_auto_data_list = async (new_content: any) => {
-    const { category, number, sort, sort_rules, is_cover } = new_content;
+// 轮播图列数
+const carousel_col = ref('2');
+// 轮播图key值
+const carousel_key = ref('0');
+// 轮播图定时轮播
+const interval_time = ref(2000);
+// 轮播图是否滚动
+const is_roll = ref(1);
+const get_auto_data_list = async () => {
+    const { category, number, sort, sort_rules, is_cover } = new_content.value;
     const new_data = {
         article_keywords: '',
         article_category_ids: category.join(','),
@@ -116,32 +146,44 @@ const get_auto_data_list = async (new_content: any) => {
         data_list.value = Array(4).fill(default_data_list);
     }
 };
-const data_type_is_change = ref(0);
-watch(
-    () => data_type_is_change.value,
-    (newVal, oldValue) => {
-        if (newVal !== oldValue && String(newVal) === '1') {
-            get_auto_data_list(props.value?.content);
+
+const new_content = computed(() => props.value?.content || {});
+const new_style = computed(() => props.value?.style || {});
+watchEffect(() => {
+    if (new_content.value.data_type == '0') {
+        if (!isEmpty(new_content.value.data_list)) {
+            data_list.value = new_content.value.data_list;
+            data_list.value = cloneDeep(new_content.value.data_list);
+        } else {
+            data_list.value = Array(4).fill(default_data_list);
         }
-    },
-    { deep: true }
-);
+    } else {
+        get_auto_data_list();
+    }
+});
+// 轮播宽度
+const multicolumn_columns_width = computed(() => {
+    const { carousel_col } = toRefs(new_content.value);
+    // 计算间隔的空间。(gap * gap数量) / 模块数量
+    let gap = carousel_col.value !== '0' ? (new_style.value.article_spacing * carousel_col.value) / (Number(carousel_col.value) + 1) : '0';
+    return `calc(${100 / (Number(carousel_col.value) + 1)}% - ${gap}px)`;
+});
+// 文章内容高度
+const article_name_height_computer = computed(() => {
+    return new_style.value.name_size * 2.4 + 'px';
+});
+const article_name_line_height_computer = computed(() => {
+    return new_style.value.name_size * 1.2 + 'px';
+});
+// 轮播高度
+const carousel_height_computer = computed(() => {
+    return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
+});
 watch(
     props.value,
     (newVal, oldValue) => {
         const new_content = newVal?.content;
         const new_style = newVal?.style;
-        // 内容
-        data_type_is_change.value = new_content.data_type;
-        if (String(new_content.data_type) === '0') {
-            if (!isEmpty(new_content.data_list)) {
-                data_list.value = new_content.data_list;
-                data_list.value = cloneDeep(new_content.data_list);
-            } else {
-                data_list.value = Array(4).fill(default_data_list);
-            }
-        }
-
         article_theme.value = new_content.theme;
         field_show.value = new_content.field_show;
         // 样式
@@ -169,7 +211,13 @@ watch(
         } else if (article_theme.value == '3') {
             style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
         } else if (article_theme.value == '4') {
-            article_item_width.value = `${new_style.article_width}px`;
+            // 更新轮播图的key，确保更换时能重新更新轮播图
+            carousel_col.value = new_content.carousel_col || '1';
+            carousel_key.value = new_style.interval_time + new_style.is_roll;
+            // 滚动时间
+            interval_time.value = (new_style.interval_time || 2) * 1000;
+            // 是否滚动修改
+            is_roll.value = new_style.is_roll;
             article_item_height.value = `${new_style.article_height}px`;
             article_style.value += content_radius.value;
         }
@@ -177,7 +225,7 @@ watch(
             style_container.value = common_styles_computer(new_style.common_style);
         }
     },
-    { immediate: true, deep: true }
+    { deep: true, immediate: true }
 );
 const article_theme_class = computed(() => {
     switch (article_theme.value) {
@@ -189,10 +237,33 @@ const article_theme_class = computed(() => {
             return 'style3 flex-col';
         case '3':
             return 'style4 flex-col';
-        case '4':
-            return 'style5 flex-row';
+        default:
+            return 'style5';
+    }
+});
+
+interface ArticleCarouselList {
+    carousel_list: ArticleList[];
+}
+const article_carousel_list = computed(() => {
+    // 深拷贝一下，确保不会出现问题
+    const cloneList = cloneDeep(data_list.value);
+    // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+    if (cloneList.length > 0) {
+        // 每页显示的数量
+        const num = Number(carousel_col.value) + 1;
+        // 存储数据显示
+        let nav_list: ArticleCarouselList[] = [];
+        // 拆分的数量
+        const split_num = Math.ceil(cloneList.length / num);
+        for (let i = 0; i < split_num; i++) {
+            nav_list.push({ carousel_list: cloneList.slice(i * num, (i + 1) * num) });
+        }
+        return nav_list;
+    } else {
+        // 否则的话，就返回全部的信息
+        return [{ carousel_list: cloneList }];
     }
-    return `style${article_theme.value}`;
 });
 </script>
 <style lang="scss" scoped>
@@ -232,12 +303,24 @@ const article_theme_class = computed(() => {
 }
 .style5 {
     .item {
-        min-width: v-bind(article_item_width);
-        width: v-bind(article_item_width);
+        width: v-bind(multicolumn_columns_width);
+        min-width: v-bind(multicolumn_columns_width);
         .img {
             width: 100%;
-            height: v-bind(article_item_height);
+            max-height: v-bind(article_item_height);
+        }
+        .title {
+            height: v-bind(article_name_height_computer);
+            line-height: v-bind(article_name_line_height_computer);
         }
     }
 }
+
+:deep(.el-carousel) {
+    width: 100%;
+    .el-carousel__container {
+        // height: v-bind(article_item_height);
+        height: v-bind(carousel_height_computer);
+    }
+}
 </style>
diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue
index d26842a5..063cfe82 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -23,7 +23,6 @@
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
-
                 <template v-if="theme == '0'">
                     <el-form-item label="内容间距">
                         <slider v-model="form.content_spacing"></slider>
@@ -35,14 +34,24 @@
                     </el-form-item>
                 </template>
                 <template v-if="theme == '4'">
-                    <el-form-item label="内容宽度">
-                        <slider v-model="form.article_width" :max="1000"></slider>
-                    </el-form-item>
                     <el-form-item label="内容高度">
                         <slider v-model="form.article_height" :max="1000"></slider>
                     </el-form-item>
                 </template>
             </card-container>
+            <div class="divider-line"></div>
+            <template v-if="theme == '4'">
+                <card-container>
+                    <div class="mb-12">轮播设置</div>
+                    <el-form-item label="自动轮播">
+                        <el-switch v-model="form.is_roll" :active-value="1" :inactive-value="0" />
+                    </el-form-item>
+                    <el-form-item label="间隔时间">
+                        <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+                    </el-form-item>
+                </card-container>
+                <div class="divider-line"></div>
+            </template>
         </el-form>
         <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index 25e30508..8ead6ff1 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -24,6 +24,7 @@ watch(
         new_data.content.theme = new_data.content.article_theme;
         new_data.content.data_type = new_data.content.tabs_list[0].data_type;
         new_data.content.category = new_data.content.tabs_list[0].category;
+        new_data.content.carousel_col = new_data.content.article_carousel_col;
         new_data.content.data_list = new_data.content.tabs_list[0].data_list;
         new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
         new_data.content.number = new_data.content.tabs_list[0].number;
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 1973e325..e691147f 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -16,6 +16,11 @@
                         <el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="form.theme == '4'" label="轮播列数">
+                    <el-radio-group v-model="form.article_carousel_col">
+                        <el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -123,6 +128,12 @@ const base_list = reactive({
         { name: '无图模式', value: '3' },
         { name: '左右滑动展示', value: '4' },
     ],
+    carousel_col_list: [
+        { name: '单列展示', value: '0' },
+        { name: '两列展示', value: '1' },
+        { name: '三列展示', value: '2' },
+        { name: '四列展示', value: '3' },
+    ],
     data_type_list: [
         { name: '选择文章', value: '0' },
         { name: '筛选文章', value: '1' },
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 1a481276..394469dd 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -50,14 +50,24 @@
                     </el-form-item>
                 </template>
                 <template v-if="theme == '4'">
-                    <el-form-item label="内容宽度">
-                        <slider v-model="form.article_width" :max="1000"></slider>
-                    </el-form-item>
                     <el-form-item label="内容高度">
                         <slider v-model="form.article_height" :max="1000"></slider>
                     </el-form-item>
                 </template>
             </card-container>
+            <div class="divider-line"></div>
+            <template v-if="theme == '4'">
+                <card-container>
+                    <div class="mb-12">轮播设置</div>
+                    <el-form-item label="自动轮播">
+                        <el-switch v-model="form.is_roll" :active-value="1" :inactive-value="0" />
+                    </el-form-item>
+                    <el-form-item label="间隔时间">
+                        <slider v-model="form.interval_time" :max="100"></slider>
+                    </el-form-item>
+                </card-container>
+                <div class="divider-line"></div>
+            </template>
         </el-form>
         <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 1de9f125..f21f0d5b 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -56,7 +56,7 @@
                                     </div>
                                     <div v-if="form.is_shop_show">
                                         <template v-if="form.shop_type == 'text'">
-                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
+                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
                                         </template>
                                         <template v-else>
                                             <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
@@ -83,7 +83,7 @@
                                 </div>
                                 <div v-if="form.is_shop_show">
                                     <template v-if="form.shop_type == 'text'">
-                                        <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
+                                        <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
                                     </template>
                                     <template v-else>
                                         <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
@@ -132,7 +132,7 @@
                                     </div>
                                     <div v-if="form.is_shop_show">
                                         <template v-if="form.shop_type == 'text'">
-                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
+                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
                                         </template>
                                         <template v-else>
                                             <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
@@ -206,23 +206,23 @@ const default_list = {
             bg_color: '#EA3323',
             br_color: '',
             color: '#fff',
-            url: ''
+            url: '',
         },
         {
             name: '包邮',
             bg_color: '',
             br_color: '#EA3323',
             color: '#EA3323',
-            url: ''
+            url: '',
         },
         {
             name: '领劵',
             bg_color: '',
             br_color: '#EA9223',
             color: '#EA9223',
-            url: ''
-        }
-    ]
+            url: '',
+        },
+    ],
 };
 const list = ref<data_list[]>([]);
 
@@ -369,15 +369,15 @@ const button_gradient = () => {
     return gradient_handle(new_style.value.shop_button_color, '90deg');
 };
 // icon标志显示样式
-const icon_style = (item: { bg_color: string; color: string; br_color: string; }) => {
+const icon_style = (item: { bg_color: string; color: string; br_color: string }) => {
     let style = `background: ${item.bg_color};color: ${item.color};`;
     if (!isEmpty(item.br_color)) {
-        style += `border: 1px solid ${item.br_color};`
+        style += `border: 1px solid ${item.br_color};`;
     } else {
-        style += `border: 1px solid ${item.bg_color};`
+        style += `border: 1px solid ${item.bg_color};`;
     }
     return style;
-}
+};
 // 公共样式
 const style_container = computed(() => {
     if (props.isCommonStyle) {
@@ -391,16 +391,16 @@ const style_container = computed(() => {
 // 记录当前显示的轮播图的数据
 // 不换行显示
 const multicolumn_columns_width = computed(() => {
-    const { single_line_number } = toRefs(form.value);
-    // 计算间隔的空间。(gap * gap数量) / 模块数量 
-    let gap = (new_style.value.content_outer_spacing * (single_line_number.value - 1)) / single_line_number.value;
-    return `calc(${ 100 / single_line_number.value }% - ${ gap }px)` ;
+    const { carousel_col } = toRefs(form.value);
+    // 计算间隔的空间。(gap * gap数量) / 模块数量
+    let gap = (new_style.value.content_outer_spacing * (carousel_col.value - 1)) / carousel_col.value;
+    return `calc(${100 / carousel_col.value}% - ${gap}px)`;
 });
 const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
 const interval_list = ref({
     time: 2000,
     is_roll: true,
-    notice_length: 1
+    notice_length: 1,
 });
 interface nav_list {
     split_list: data_list[];
@@ -411,7 +411,7 @@ const shop_content_list = computed(() => {
     // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
     if (cloneList.length > 0) {
         // 每页显示的数量
-        const num = form.value.single_line_number;
+        const num = form.value.carousel_col;
         // 存储数据显示
         let nav_list: nav_list[] = [];
         // 拆分的数量
@@ -424,7 +424,7 @@ const shop_content_list = computed(() => {
         // 否则的话，就返回全部的信息
         return [{ split_list: cloneList }];
     }
-})
+});
 // 轮播图定时显示
 const interval_time = ref(2000);
 // 轮播图是否滚动
@@ -447,7 +447,7 @@ watchEffect(() => {
         interval_list.value = {
             time: time,
             is_roll: display_is_roll,
-            notice_length: notice_length
+            notice_length: notice_length,
         };
         // 更新轮播图的key，确保更换时能重新更新轮播图
         carouselKey.value = get_math();
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index e6f558a0..7f73ee10 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -8,8 +8,8 @@
                         <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item v-if="form.theme == '5'" label="单行显示">
-                    <el-radio-group v-model="form.single_line_number" class="ml-4">
+                <el-form-item v-if="form.theme == '5'" label="轮播列数">
+                    <el-radio-group v-model="form.carousel_col" class="ml-4">
                         <el-radio :value="1">1个</el-radio>
                         <el-radio :value="2">2个</el-radio>
                         <el-radio :value="3">3个</el-radio>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index d19203b2..3fba7ff1 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -16,8 +16,8 @@
                         <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item v-if="form.theme == '5'" label="单行显示">
-                    <el-radio-group v-model="form.single_line_number" class="ml-4">
+                <el-form-item v-if="form.theme == '5'" label="轮播列数">
+                    <el-radio-group v-model="form.carousel_col" class="ml-4">
                         <el-radio :value="1">1个</el-radio>
                         <el-radio :value="2">2个</el-radio>
                         <el-radio :value="3">3个</el-radio>
diff --git a/src/router/index.ts b/src/router/index.ts
index a0dbdaca..7d195ce2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,16 +24,6 @@ export const constantRoutes: RouteRecordRaw[] = [
                 name: 'Dashboard',
                 meta: { title: 'dashboard', icon: 'homepage', affix: true },
             },
-            {
-                path: '401',
-                component: () => import('@/views/error-page/401.vue'),
-                meta: { hidden: true },
-            },
-            {
-                path: '404',
-                component: () => import('@/views/error-page/404.vue'),
-                meta: { hidden: true },
-            },
         ],
     },
 ];
@@ -52,7 +42,16 @@ const router = createRouter({
  * 重置路由
  */
 export function resetRouter() {
-    router.replace({ path: '/login' });
+    router.replace({ path: '/dashboard' });
 }
+// 重定向到首页的守卫
+router.beforeEach((to, from, next) => {
+    if (to.matched.length === 0) {
+        //如果未匹配到路由
+        from.name ? next({ name: from.name }) : next({ path: '/' });
+    } else {
+        next();
+    }
+});
 
 export default router;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8913256a..b9e0292a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -187,12 +187,21 @@ p {
 }
 // 链接弹窗表格用到  ------ end
 
-
-.el-color-predefine__colors .el-color-predefine__color-selector{
+.el-color-predefine__colors .el-color-predefine__color-selector {
     box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1);
 }
 .el-color-picker .el-color-picker__trigger .el-color-picker__color {
     background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
     background-size: 12px 12px;
-    background-position: 0 0, 6px 0, 6px -6px, 0 6px;
-}
\ No newline at end of file
+    background-position:
+        0 0,
+        6px 0,
+        6px -6px,
+        0 6px;
+}
+
+// 全屏轮播大小调整
+.loading-custom {
+    --el-loading-spinner-size: 13rem;
+    --el-loading-fullscreen-spinner-size: 13rem;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 204ec433..fcc4d846 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -328,14 +328,14 @@ export const tabs_style = (color: string, style: string | number | boolean | und
  * 如果环境变量VITE_APP_BASE_API被设置为'/dev-api'，则从本地开发环境中导入临时数据
  * 否则，从cookie中获取资源主机地址
  * 这种设计允许开发者在不同的环境中灵活切换资源URL的来源，以适应不同的开发和生产需求
- *
+ * @param directory {string} - 资源目录名称
  * @returns {Promise<string>} 返回一个Promise，解析为包含资源URL的字符串
  */
-export const online_url = async () => {
+export const online_url = async (directory: string) => {
     if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
         let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../temp.d' : '../../temp_pro.d');
-        return temp_data.default.temp_attachment_host + '/static/app/tabbar/';
+        return temp_data.default.temp_attachment_host + directory;
     } else {
-        return get_cookie('attachment_host') + '/static/app/tabbar/';
+        return get_cookie('attachment_host') + directory;
     }
 };
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
deleted file mode 100644
index e34b93d8..00000000
--- a/src/views/error-page/401.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
-<script lang="ts">
-export default {
-    name: 'Page401',
-};
-</script>
-
-<script setup lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useRouter } from 'vue-router';
-
-const state = reactive({
-    errGif: `../../assets/401_images/401.gif`,
-    ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
-    dialogVisible: false,
-});
-
-const { errGif, ewizardClap, dialogVisible } = toRefs(state);
-
-const router = useRouter();
-
-function back() {
-    router.back();
-}
-</script>
-
-<template>
-    <div class="errPage-container">
-        <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back"> 返回 </el-button>
-        <el-row>
-            <el-col :span="12">
-                <h1 class="text-jumbo text-ginormous">Oops!</h1>
-                gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
-                <h2>你没有权限去该页面</h2>
-                <h6>如有不满请联系你领导</h6>
-                <ul class="list-unstyled">
-                    <li>或者你可以去:</li>
-                    <li class="link-type">
-                        <router-link to="/dashboard"> 回首页 </router-link>
-                    </li>
-                    <li class="link-type">
-                        <a href="https://www.taobao.com/">随便看看</a>
-                    </li>
-                    <li>
-                        <a href="#" @click.prevent="dialogVisible = true">点我看图</a>
-                    </li>
-                </ul>
-            </el-col>
-            <el-col :span="12">
-                <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
-            </el-col>
-        </el-row>
-        <el-dialog v-model="dialogVisible" title="随便看">
-            <img :src="ewizardClap" class="pan-img" />
-        </el-dialog>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.errPage-container {
-    width: 800px;
-    max-width: 100%;
-    margin: 100px auto;
-
-    .pan-back-btn {
-        color: #fff;
-        background: #008489;
-        border: none !important;
-    }
-
-    .pan-gif {
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pan-img {
-        display: block;
-        width: 100%;
-        margin: 0 auto;
-    }
-
-    .text-jumbo {
-        font-size: 60px;
-        font-weight: 700;
-        color: #484848;
-    }
-
-    .list-unstyled {
-        font-size: 14px;
-
-        li {
-            padding-bottom: 5px;
-        }
-
-        a {
-            color: #008489;
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-}
-</style>
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
deleted file mode 100644
index b95dab94..00000000
--- a/src/views/error-page/404.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
-<script lang="ts">
-export default {
-    name: 'Page404',
-};
-</script>
-
-<script setup lang="ts">
-function message() {
-    return 'The webmaster said that you can not enter this page...';
-}
-</script>
-
-<template>
-    <div class="wscn-http404-container"></div>
-</template>
-
-<style lang="scss" scoped>
-.wscn-http404-container {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.wscn-http404 {
-    position: relative;
-    width: 1200px;
-    padding: 0 50px;
-    overflow: hidden;
-
-    .pic-404 {
-        position: relative;
-        float: left;
-        width: 600px;
-        overflow: hidden;
-
-        &__parent {
-            width: 100%;
-        }
-
-        &__child {
-            position: absolute;
-
-            &.left {
-                top: 17px;
-                left: 220px;
-                width: 80px;
-                opacity: 0;
-                animation-name: cloudLeft;
-                animation-duration: 2s;
-                animation-timing-function: linear;
-                animation-delay: 1s;
-                animation-fill-mode: forwards;
-            }
-
-            &.mid {
-                top: 10px;
-                left: 420px;
-                width: 46px;
-                opacity: 0;
-                animation-name: cloudMid;
-                animation-duration: 2s;
-                animation-timing-function: linear;
-                animation-delay: 1.2s;
-                animation-fill-mode: forwards;
-            }
-
-            &.right {
-                top: 100px;
-                left: 500px;
-                width: 62px;
-                opacity: 0;
-                animation-name: cloudRight;
-                animation-duration: 2s;
-                animation-timing-function: linear;
-                animation-delay: 1s;
-                animation-fill-mode: forwards;
-            }
-
-            @keyframes cloudLeft {
-                0% {
-                    top: 17px;
-                    left: 220px;
-                    opacity: 0;
-                }
-
-                20% {
-                    top: 33px;
-                    left: 188px;
-                    opacity: 1;
-                }
-
-                80% {
-                    top: 81px;
-                    left: 92px;
-                    opacity: 1;
-                }
-
-                100% {
-                    top: 97px;
-                    left: 60px;
-                    opacity: 0;
-                }
-            }
-
-            @keyframes cloudMid {
-                0% {
-                    top: 10px;
-                    left: 420px;
-                    opacity: 0;
-                }
-
-                20% {
-                    top: 40px;
-                    left: 360px;
-                    opacity: 1;
-                }
-
-                70% {
-                    top: 130px;
-                    left: 180px;
-                    opacity: 1;
-                }
-
-                100% {
-                    top: 160px;
-                    left: 120px;
-                    opacity: 0;
-                }
-            }
-
-            @keyframes cloudRight {
-                0% {
-                    top: 100px;
-                    left: 500px;
-                    opacity: 0;
-                }
-
-                20% {
-                    top: 120px;
-                    left: 460px;
-                    opacity: 1;
-                }
-
-                80% {
-                    top: 180px;
-                    left: 340px;
-                    opacity: 1;
-                }
-
-                100% {
-                    top: 200px;
-                    left: 300px;
-                    opacity: 0;
-                }
-            }
-        }
-    }
-
-    .bullshit {
-        position: relative;
-        float: left;
-        width: 300px;
-        padding: 30px 0;
-        overflow: hidden;
-
-        &__oops {
-            margin-bottom: 20px;
-            font-size: 32px;
-            font-weight: bold;
-            line-height: 40px;
-            color: #1482f0;
-            opacity: 0;
-            animation-name: slideUp;
-            animation-duration: 0.5s;
-            animation-fill-mode: forwards;
-        }
-
-        &__headline {
-            margin-bottom: 10px;
-            font-size: 20px;
-            font-weight: bold;
-            line-height: 24px;
-            color: #222;
-            opacity: 0;
-            animation-name: slideUp;
-            animation-duration: 0.5s;
-            animation-delay: 0.1s;
-            animation-fill-mode: forwards;
-        }
-
-        &__info {
-            margin-bottom: 30px;
-            font-size: 13px;
-            line-height: 21px;
-            color: grey;
-            opacity: 0;
-            animation-name: slideUp;
-            animation-duration: 0.5s;
-            animation-delay: 0.2s;
-            animation-fill-mode: forwards;
-        }
-
-        &__return-home {
-            display: block;
-            float: left;
-            width: 110px;
-            height: 36px;
-            font-size: 14px;
-            line-height: 36px;
-            color: #fff;
-            text-align: center;
-            cursor: pointer;
-            background: #1482f0;
-            border-radius: 100px;
-            opacity: 0;
-            animation-name: slideUp;
-            animation-duration: 0.5s;
-            animation-delay: 0.3s;
-            animation-fill-mode: forwards;
-        }
-
-        @keyframes slideUp {
-            0% {
-                opacity: 0;
-                transform: translateY(60px);
-            }
-
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-}
-</style>
diff --git a/src/views/layout/components/main/default/article-list.ts b/src/views/layout/components/main/default/article-list.ts
index c13922d7..acca3baa 100644
--- a/src/views/layout/components/main/default/article-list.ts
+++ b/src/views/layout/components/main/default/article-list.ts
@@ -36,8 +36,9 @@ interface DefaultArticleList {
         padding: paddingStyle;
         article_spacing: number;
         content_spacing: number;
-        article_width: number;
         article_height: number;
+        interval_time: number; //滚动时间
+        is_roll: number;
         common_style: object;
     };
 }
@@ -91,8 +92,9 @@ const defaultArticleList: DefaultArticleList = {
         },
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
-        article_width: 155, // 文章宽度
-        article_height: 155, // 文章宽度
+        article_height: 155, // 文章高度
+        interval_time: 2, //滚动时间
+        is_roll: 1, // 是否轮播
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
     },
 };
diff --git a/src/views/layout/components/main/default/article-tabs.ts b/src/views/layout/components/main/default/article-tabs.ts
index 8ed02e33..18d6d84a 100644
--- a/src/views/layout/components/main/default/article-tabs.ts
+++ b/src/views/layout/components/main/default/article-tabs.ts
@@ -22,6 +22,7 @@ interface DefaultArticleTabs {
         tabs_theme: string;
         tabs_top_up: boolean;
         article_theme: string;
+        article_carousel_col: string;
         tabs_list: articleTabsList[];
         field_show: string[];
     };
@@ -49,8 +50,9 @@ interface DefaultArticleTabs {
         padding: paddingStyle;
         article_spacing: number;
         content_spacing: number;
-        article_width: number;
         article_height: number;
+        interval_time: number; //滚动时间
+        is_roll: number;
         common_style: object;
     };
 }
@@ -59,6 +61,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
         tabs_theme: '0',
         tabs_top_up: true,
         article_theme: '0',
+        article_carousel_col: '2',
         tabs_list: [
             { id: '1', title: '热门推荐', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
             { id: '2', title: '测试一', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
@@ -70,7 +73,10 @@ const defaultArticleTabs: DefaultArticleTabs = {
         field_show: ['0', '1'],
     },
     style: {
-        tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
+        tabs_checked: [
+            { color: '#FF2222', color_percentage: undefined },
+            { color: '#FF9898', color_percentage: undefined },
+        ],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
@@ -114,8 +120,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
         },
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
-        article_width: 155, // 文章宽度
-        article_height: 155, // 文章宽度
+        article_height: 155, // 文章高度
+        interval_time: 2, //滚动时间
+        is_roll: 1, // 是否轮播
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
     },
 };
diff --git a/src/views/layout/components/main/default/footer-nav.ts b/src/views/layout/components/main/default/footer-nav.ts
index aa82083b..e8bfe579 100644
--- a/src/views/layout/components/main/default/footer-nav.ts
+++ b/src/views/layout/components/main/default/footer-nav.ts
@@ -1,7 +1,7 @@
 import defaultCommon from './index';
 import { online_url } from '@/utils';
 
-const new_url = await online_url();
+const new_url = await online_url('/static/app/tabbar/');
 interface DefaultFooterNav {
     content: {
         nav_style: string;
diff --git a/src/views/layout/components/main/default/shop-list.ts b/src/views/layout/components/main/default/shop-list.ts
index e42b647f..5003b51d 100644
--- a/src/views/layout/components/main/default/shop-list.ts
+++ b/src/views/layout/components/main/default/shop-list.ts
@@ -3,7 +3,7 @@ interface DefaultProductList {
     content: {
         theme: string;
         data_type: string;
-        single_line_number: number;
+        carousel_col: number;
         category: string[];
         data_ids: string[];
         product_show_list: string[];
@@ -54,7 +54,7 @@ const defaultProductList: DefaultProductList = {
     content: {
         theme: '0',
         data_type: '0',
-        single_line_number: 3,
+        carousel_col: 3,
         product_show_list: [],
         data_list: [],
         category: [],
diff --git a/src/views/layout/components/main/default/shop-tabs.ts b/src/views/layout/components/main/default/shop-tabs.ts
index 1f835574..0282b5c9 100644
--- a/src/views/layout/components/main/default/shop-tabs.ts
+++ b/src/views/layout/components/main/default/shop-tabs.ts
@@ -17,7 +17,7 @@ interface DefaultProductList {
         tabs_theme: string;
         tabs_top_up: boolean;
         theme: string;
-        single_line_number: number,
+        carousel_col: number;
         tabs_list: articleTabsList[];
         is_show: string[];
         is_shop_show: boolean;
@@ -31,20 +31,20 @@ interface DefaultProductList {
     style: {
         tabs_checked: color_list[];
         tabs_direction: string;
-        tabs_weight_checked: string,
-        tabs_size_checked: number,
-        tabs_color_checked: string,
-        tabs_weight: string,
-        tabs_size: number,
-        tabs_color: string,
+        tabs_weight_checked: string;
+        tabs_size_checked: number;
+        tabs_color_checked: string;
+        tabs_weight: string;
+        tabs_size: number;
+        tabs_color: string;
         tabs_spacing: number;
         shop_padding: paddingStyle;
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
         content_outer_spacing: number;
         content_outer_height: number;
-        is_roll: boolean,
-        interval_time: number,
+        is_roll: boolean;
+        interval_time: number;
         content_spacing: number;
         shop_title_typeface: string;
         shop_title_size: number;
@@ -58,10 +58,10 @@ interface DefaultProductList {
         shop_score_typeface: string;
         shop_score_size: number;
         shop_score_color: string;
-        shop_button_typeface:string;
+        shop_button_typeface: string;
         shop_button_size: number;
         shop_button_color: color_list[];
-        shop_button_text_color: string,
+        shop_button_text_color: string;
         shop_icon_size: number;
         shop_icon_color: string;
         common_style: object;
@@ -72,10 +72,10 @@ const defaultProductList: DefaultProductList = {
         tabs_theme: '0',
         tabs_top_up: false,
         theme: '0',
-        single_line_number: 3,
+        carousel_col: 3,
         tabs_list: [
-            { id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4,  sort: '0', sort_rules: '0', data_list: [] },
-            { id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4,  sort: '0', sort_rules: '0', data_list: [] },
+            { id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
+            { id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
             { id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
             { id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
         ],
@@ -89,7 +89,10 @@ const defaultProductList: DefaultProductList = {
         shop_button_size: '1',
     },
     style: {
-        tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
+        tabs_checked: [
+            { color: '#FF2222', color_percentage: undefined },
+            { color: '#FF9898', color_percentage: undefined },
+        ],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
@@ -99,10 +102,10 @@ const defaultProductList: DefaultProductList = {
         tabs_color: 'rgba(51,51,51,1)',
         tabs_spacing: 20,
         shop_padding: {
-            padding: 10, 
-            padding_top: 10, 
-            padding_bottom: 10, 
-            padding_left: 10, 
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
             padding_right: 10,
         },
         shop_img_radius: {
@@ -125,32 +128,32 @@ const defaultProductList: DefaultProductList = {
         is_roll: true,
         interval_time: 2,
         shop_title_typeface: '500',
-        shop_title_size: 14,    
-        shop_title_color: "#333333",
+        shop_title_size: 14,
+        shop_title_color: '#333333',
         shop_price_typeface: '500',
         shop_price_size: 18,
-        shop_price_color: "#EA3323;",
+        shop_price_color: '#EA3323;',
         shop_sold_number_typeface: '400',
         shop_sold_number_size: 10,
-        shop_sold_number_color: "#999999",
+        shop_sold_number_color: '#999999',
         shop_score_typeface: '400',
         shop_score_size: 10,
-        shop_score_color: "#999999",
-        shop_button_typeface:'400',
+        shop_score_color: '#999999',
+        shop_button_typeface: '400',
         shop_button_size: 12,
         shop_button_color: [
             {
                 color: '#FF3D53',
-                color_percentage: undefined
+                color_percentage: undefined,
             },
             {
                 color: '#D73A3A',
-                color_percentage: undefined
-            }
+                color_percentage: undefined,
+            },
         ],
         shop_button_text_color: '#fff',
         shop_icon_size: 10,
-        shop_icon_color: "#fff",
+        shop_icon_color: '#fff',
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, 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 7a30bdb0..bc3a7aac 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -2,9 +2,9 @@
     <!-- 左侧模块 -->
     <div class="siderbar flex-col">
         <el-collapse v-model="activeNames">
-            <el-collapse-item v-for="(com, i) in components" :key="i" :title="com.title" :name="com.key">
-                <VueDraggable v-model="com.item" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
-                    <div v-for="item in com.item" :key="item.key" class="item">
+            <el-collapse-item v-for="(com, i) in components" :key="i" :title="com.name" :name="com.key">
+                <VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
+                    <div v-for="item in com.data" :key="item.key" class="item">
                         <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
                         <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
                             <img class="img radius-xs" :src="url_computer(item.key)" />
@@ -168,8 +168,9 @@ import { background_computer, get_math, gradient_computer, padding_computer, rad
 import { cloneDeep } from 'lodash';
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import defaultSettings from './index';
-import { footerNavCounterStore } from '@/store';
+import { footerNavCounterStore, commonStore } from '@/store';
 const footer_nav_counter_store = footerNavCounterStore();
+const common_store = commonStore();
 const app = getCurrentInstance();
 import { isEmpty } from 'lodash';
 const props = defineProps({
@@ -255,48 +256,50 @@ watch(
 
 // 父组件调用的方法
 const emits = defineEmits(['rightUpdate']);
-const activeNames = reactive(['1', '2', '3']);
-const components = reactive([
-    {
-        title: '基础组件',
-        key: '1',
-        item: [
-            { 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: '自定义' },
-        ],
-    },
-    {
-        title: '营销组件',
-        key: '2',
-        item: [
-            { key: 'coupon', name: '优惠券' },
-            { key: 'seckill', name: '秒杀' }
-        ],
-    },
-    {
-        title: '工具组件',
-        key: '3',
-        item: [
-            { key: 'float-window', name: '悬浮按钮' },
-            { key: 'text-title', name: '文本标题' },
-            { key: 'auxiliary-blank', name: '辅助空白' },
-            { key: 'row-line', name: '横线' },
-            { key: 'rich-text', name: '富文本' },
-        ],
-    },
+const activeNames = reactive(['base', 'plugins', 'tool']);
+interface componentsData {
+    name: string;
+    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 url_computer = (name: string) => {
     const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value;
@@ -555,6 +558,15 @@ const scroll = () => {
 // 在组件挂载时默认执行
 onMounted(() => {
     page_settings();
+    nextTick(() => {
+        const interval = setInterval(() => {
+            // 获取分类
+            if (common_store.common.module_list.length > 0) {
+                components.value = common_store.common.module_list;
+                clearInterval(interval);
+            }
+        }, 1000);
+    });
 });
 //页面设置
 const page_settings = () => {
diff --git a/src/views/layout/components/navbar/index.vue b/src/views/layout/components/navbar/index.vue
index 746f9b4d..dc5eb529 100644
--- a/src/views/layout/components/navbar/index.vue
+++ b/src/views/layout/components/navbar/index.vue
@@ -2,7 +2,7 @@
     <!-- 顶部导航栏 -->
     <div class="navbar">
         <div class="nav-left">
-            <icon name="arrow-left" color="f">返回</icon>
+            <!-- <icon name="arrow-left" color="f">返回</icon> -->
             <div class="flex-row align-c">
                 <div class="name">
                     <div class="flex-row align-c gap-10 c-pointer" @click="dialog_visible = true">
@@ -27,17 +27,17 @@
             </div>
         </template>
         <div class="content pa-20">
-            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="70" status-icon>
-                <el-form-item label="上传头像">
+            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="50" status-icon>
+                <el-form-item label="封面">
                     <upload v-model="form.logo" :limit="1"></upload>
                 </el-form-item>
-                <el-form-item label="模版名称" prop="name">
-                    <el-input v-model="form.name" placeholder="请输入模版名称" />
+                <el-form-item label="名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入名称" />
                 </el-form-item>
-                <el-form-item label="模版描述">
-                    <el-input v-model="form.describe" placeholder="请输入模版描述" :rows="4" type="textarea" />
+                <el-form-item label="描述">
+                    <el-input v-model="form.describe" placeholder="请输入描述" :rows="4" type="textarea" />
                 </el-form-item>
-                <el-form-item label="模版开关">
+                <el-form-item label="开关">
                     <el-switch v-model="form.is_enable" active-value="1" inactive-value="0"></el-switch>
                 </el-form-item>
             </el-form>
@@ -110,7 +110,7 @@ const confirm_event = async (formEl: FormInstance | undefined) => {
 <style lang="scss" scoped>
 .navbar {
     height: 8rem;
-    padding: 0 3.7rem;
+    padding: 0 3rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -119,21 +119,21 @@ const confirm_event = async (formEl: FormInstance | undefined) => {
         display: flex;
         align-items: center;
         .name {
-            padding-left: 2rem;
-            margin: 0 2rem;
+            // padding-left: 2rem;
+            // margin: 0 2rem;
             color: #fff;
             position: relative;
-            &::before {
-                content: '';
-                display: inline-block;
-                width: 0.1rem;
-                height: 65%;
-                background-color: #fff;
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
-            }
+            // &::before {
+            //     content: '';
+            //     display: inline-block;
+            //     width: 0.1rem;
+            //     height: 65%;
+            //     background-color: #fff;
+            //     position: absolute;
+            //     left: 0;
+            //     top: 50%;
+            //     transform: translateY(-50%);
+            // }
             .img {
                 width: 2.2rem;
                 height: 2.2rem;
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 43efe0a7..1a6562a5 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-wrapper no-copy">
+    <div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
         <template v-if="!is_empty">
             <navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
             <div class="app-wrapper-content flex-row">
@@ -64,6 +64,7 @@ const form = ref<diy_data_item>({
 const diy_data_item = ref({});
 
 const key = ref('');
+const api_count = ref(0);
 
 const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
     diy_data_item.value = item;
@@ -90,15 +91,20 @@ const init = () => {
         if (html_index !== -1) {
             new_data.id = new_data.id.substring(0, html_index);
         }
-    }
-    if (new_data.id) {
-        DiyAPI.getInit(new_data).then((res: any) => {
-            if (res.data) {
-                form.value = form_data_transfor_diy_data(res.data);
-            } else {
-                is_empty.value = true;
-            }
-        });
+        if (new_data.id) {
+            DiyAPI.getInit(new_data).then((res: any) => {
+                if (res.data) {
+                    form.value = form_data_transfor_diy_data(res.data);
+                    api_count.value += 1;
+                    loading_event(api_count.value);
+                } else {
+                    is_empty.value = true;
+                }
+            });
+        }
+    } else {
+        api_count.value = 1;
+        loading_event(api_count.value);
     }
 };
 
@@ -113,8 +119,19 @@ const common_init = () => {
         // module_list ---- 模块列表
         //page_link_list ---- 页面链接
         common_store.set_common(res.data);
+        api_count.value += 1;
+        loading_event(api_count.value);
     });
 };
+// 加载动画
+const loading = ref(true);
+const loading_event = (count: number) => {
+    if (count == 2) {
+        setTimeout(() => {
+            loading.value = false;
+        }, 500);
+    }
+};
 //#endregion 页面初始化数据 ---------------------end
 
 //#region 顶部导航回调方法 ---------------------start
@@ -125,9 +142,9 @@ const save = () => {
     formmat_form_data(form.value);
 };
 const save_close = () => {
-    formmat_form_data(form.value);
+    formmat_form_data(form.value, true);
 };
-const formmat_form_data = (data: diy_data_item) => {
+const formmat_form_data = (data: diy_data_item, close: boolean = false) => {
     const clone_form = cloneDeep(data);
     clone_form.header.show_tabs = true;
     clone_form.footer.show_tabs = false;
@@ -143,6 +160,13 @@ const formmat_form_data = (data: diy_data_item) => {
     const new_data = diy_data_transfor_form_data(clone_form);
     DiyAPI.save(new_data).then((res) => {
         ElMessage.success('保存成功');
+        if (!close) return;
+        ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
+            .then(() => {
+                // 关闭页面
+                window.close();
+            })
+            .catch(() => {});
     });
 };
 //#endregion 顶部导航回调方法 ---------------------end