开发第二套皮肤通栏组件

开发第二套皮肤通栏组件

src/layout/components/template/pages/class/sector.vue

@@ -8,7 +8,7 @@
         >
             <div class="sectorItem">
                 <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750311785239902.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
-                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820605601502.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750839704883892.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
             </div>
             <div class="sectorItemTitle">子导航菜单</div>
         </div>

src/store/modules/template.js

@@ -848,8 +848,8 @@ const mutations = {
             state.pageDataStatus.index.adPrice++;
         }
     },
-    //回显模板内容
-    setWebsiteTemplate(state, data) {
+    //清理画布内容
+    clearWebsiteTemplate(state,data){
         //每次进入的时候先清理再回显
         //清理state.webSiteData
         Vue.set(state.webSiteData, 'template', {
@@ -882,10 +882,14 @@ const mutations = {
             "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
         });
         Vue.set(state, 'pageStatus', 1);
-
+    },
+    //回显模板内容
+    setWebsiteTemplate(state, data) {
         if(data==null){
+            this.commit('template/clearWebsiteTemplate');
             console.log("第一次添加模板，无需回显！")
         }else{
+            this.commit('template/clearWebsiteTemplate');
             console.log("编辑模板，开始回显模板内容！")
             console.log(data)
             state.webSiteData.ad.top = data.topAd;

src/views/template/public/componentWindow.vue

@@ -38,7 +38,8 @@
             <div class="componentStyleBoxContent">
                 <!--首页-->
                 <!--1.头条组件 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBoxStyle1">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 1 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle1">
                     <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                         <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png"/>
                         <div class="componentScrollBoxItemTitle">大标题带三个子标题</div>
@@ -64,6 +65,33 @@
                         <div class="componentScrollBoxItemTitle">滚动显示两个大标题</div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 1 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle1">
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750834310580793.jpg"/>
+                        <div class="componentScrollBoxItemTitle">大标题带三个子标题滚动显示</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750834351793480.jpg"/>
+                        <div class="componentScrollBoxItemTitle">大标题带二个子标题滚动显示</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750834356702295.jpg"/>
+                        <div class="componentScrollBoxItemTitle">大标题一个子标题滚动显示</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750834381192075.jpg"/>
+                        <div class="componentScrollBoxItemTitle">滚动显示大标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750834390122808.jpg"/>
+                        <div class="componentScrollBoxItemTitle">滚动显示大标题不带框</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/17508343968448.jpg"/>
+                        <div class="componentScrollBoxItemTitle">大标题带三个子标题不滚动</div>
+                    </div>
+                </div>
                 <!--1.头条组件 end---------------------------------------->
 
                 <!--2.焦点图组件 start---------------------------------------->
@@ -78,7 +106,8 @@
                 <!--2.焦点图组件 end---------------------------------------->
 
                 <!--3.焦点图组件 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBoxStyle3">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 3 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle3">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749019582186582.jpg"/>
@@ -110,10 +139,44 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 3 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750835163730008.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色每组标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750835191400507.jpg"/>
+                            <div class="componentScrollBoxItemTitle">加粗每组标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750835199910442.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色首行标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750835205856449.jpg"/>
+                            <div class="componentScrollBoxItemTitle">加粗首行标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750835219846599.jpg"/>
+                            <div class="componentScrollBoxItemTitle">不加粗标题</div>
+                        </div>
+                    </div>
+                </div>
                 <!--3.焦点图组件 start---------------------------------------->
 
                 <!--4.两列布局新闻组件1 左侧 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBoxStyle2">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 4 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle2">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749102223295015.jpg"/>
@@ -139,10 +202,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 4 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750835971380780.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧大图在上小图在下,右侧标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836006136326.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧标题加粗,右侧大图在上小图在下</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836015933464.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧小图在上大图在下,右侧标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836022442700.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧标题加粗,右侧小图在上大图在下</div>
+                        </div>
+                    </div>
+                </div>
                 <!--4.两列布局新闻组件1 左侧 end---------------------------------------->
 
                 <!--5.两列布局新闻组件1 右侧 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBoxStyle3">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 5 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle3">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749112729438904.jpg"/>
@@ -210,10 +301,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 5 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836353320798.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,右侧标题灰色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836359627269.jpg"/>
+                            <div class="componentScrollBoxItemTitle">右侧图片,左侧标题灰色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836366880797.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,右侧标题带主题色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836374582370.jpg"/>
+                            <div class="componentScrollBoxItemTitle">右侧图片,左侧标题带主题色标记</div>
+                        </div>
+                    </div>
+                </div>
                 <!--5.两列布局新闻组件1 右侧 end---------------------------------------->
 
                 <!--6.两列布局新闻组件2 左侧 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBoxStyle2">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 6 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle2">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749176134863144.jpg"/>
@@ -239,13 +358,41 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 6 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750836985667437.jpg"/>
+                            <div class="componentScrollBoxItemTitle">两列图文图片置顶</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837005616905.jpg"/>
+                            <div class="componentScrollBoxItemTitle">两列图文图片置底</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837011700215.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混合左上右下</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837018186768.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混合右下左上</div>
+                        </div>
+                    </div>
+                </div>
                 <!--6.两列布局新闻组件2 左侧 end---------------------------------------->
 
                 <!--7.两列布局新闻组件2 右侧 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBoxStyle3">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 7 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle3">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                            <img src="	http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749178122927942.jpg"/>
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749178122927942.jpg"/>
                             <div class="componentScrollBoxItemTitle">图片在上，列表在下首标题加粗</div>
                         </div>
                     </div>
@@ -268,10 +415,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 7 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837510282402.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在上，列表在下首标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837527816673.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，列表在上首标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837536264854.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在上，标题在下</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750837554807022.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，标题在上</div>
+                        </div>
+                    </div>
+                </div>
                 <!--7.两列布局新闻组件2 右侧 end---------------------------------------->
 
                 <!--8.两列布局新闻组件3 左侧上半部分 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBoxStyle2">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 8 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle2">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749203040403256.jpg"/>
@@ -297,10 +472,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 8 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838079739186.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表灰色标识</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/175083809079978.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片与文字混合，列表灰色标识</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/175083810049925.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在右，列表灰色标识</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838108187595.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表主题色标识</div>
+                        </div>
+                    </div>
+                </div>
                 <!--8.两列布局新闻组件3 左侧上半部分 end---------------------------------------->
 
                 <!--9.两列布局新闻组件3 左侧下半部分 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 9" class="componentScrollBoxStyle3">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 9 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle3">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749429181784621.jpg"/>
@@ -326,10 +529,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 9 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838346979502.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在上，列表标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838355402392.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，列表标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838361551294.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片与列表混合，标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838367376752.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表主题色标识</div>
+                        </div>
+                    </div>
+                </div>
                 <!--9.两列布局新闻组件3 左侧下半部分 end---------------------------------------->
 
                 <!--10.两列布局新闻组件3 右侧部分 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBoxStyle4">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 10 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle4">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430470981307.jpg"/>
@@ -367,10 +598,44 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 10 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838618610373.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片角标悬浮在上</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/175083862410673.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标与左侧保持间距</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838628582500.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标在左上角对齐</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838637378829.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标与上方保持间距</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750838829779783.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标置于左下角</div>
+                        </div>
+                    </div>
+                </div>
                 <!--10.两列布局新闻组件3 右侧部分 end---------------------------------------->
 
                 <!--11.带广告图文组合 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 11" class="componentScrollBoxStyle2">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 11 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle2">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg"/>
@@ -408,11 +673,39 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 11 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在上，右侧广告在下，加粗标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749453960887626.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在下，加粗标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749453969223756.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在上，加粗标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174945397556612.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在上，右侧广告在下，不加粗</div>
+                        </div>
+                    </div>
+                </div>
                 <!--11.带广告图文组合 end---------------------------------------->
 
                 <!--频道页-->
                 <!--12.频道菜单 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 12" class="componentScrollBoxStyle1">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 12 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle1">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750322353282870.jpg"/>
@@ -450,10 +743,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 12 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle1">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840051832773.jpg"/>
+                            <div class="componentScrollBoxItemTitle">底部分割线，选中高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840069788236.jpg"/>
+                            <div class="componentScrollBoxItemTitle">选中加亮不带分割线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/175084007596622.jpg"/>
+                            <div class="componentScrollBoxItemTitle">底部分割线，选中加底部横线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840086585497.jpg"/>
+                            <div class="componentScrollBoxItemTitle">选中加底部横线，不带分割线</div>
+                        </div>
+                    </div>
+                </div>
                 <!--12.频道菜单 end---------------------------------------->
 
                 <!--13.滚动图文组合 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 13" class="componentScrollBoxStyle1">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 13 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle1">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750323726771115.jpg"/>
@@ -473,10 +794,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 13 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle1">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840640974335.jpg"/>
+                            <div class="componentScrollBoxItemTitle">首行不加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840674639304.jpg"/>
+                            <div class="componentScrollBoxItemTitle">列表带前缀</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840681143856.jpg"/>
+                            <div class="componentScrollBoxItemTitle">首行黑色加粗，列表带前缀</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750840690320549.jpg"/>
+                            <div class="componentScrollBoxItemTitle">首行主题色加粗，列表带前缀</div>
+                        </div>
+                    </div>
+                </div>
                 <!--13.滚动图文组合 end---------------------------------------->
 
                 <!--列表页-->
                 <!--14.主列表 start---------------------------------------->
+                <!--样式1 样式2 一样-->
                 <div v-if="this.$store.state.template.editComponentType == 14" class="componentScrollBoxStyle3">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
@@ -506,7 +855,8 @@
                 <!--14.主列表 end---------------------------------------->
 
                 <!--15.最新资讯 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 15" class="componentScrollBoxStyle4">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 15 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle4">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656919885412.jpg"/>
@@ -556,10 +906,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 15 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841517342507.jpg"/>
+                            <div class="componentScrollBoxItemTitle">上左图片，下方文字</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841553329686.jpg"/>
+                            <div class="componentScrollBoxItemTitle">上右图片，下方文字</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841560855941.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片下左，文字在上</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841566722124.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片下右，文字在上</div>
+                        </div>
+                    </div>
+                </div>
                 <!--15.最新资讯 end---------------------------------------->
 
                 <!--15.热点精选 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 16" class="componentScrollBoxStyle4">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 16 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle4">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750657338556788.jpg"/>
@@ -591,11 +969,39 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 16 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841811939508.jpg"/>
+                            <div class="componentScrollBoxItemTitle">实线分割，前三条高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841826309013.jpg"/>
+                            <div class="componentScrollBoxItemTitle">实线分割，全部高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841833734341.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，前三条高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750841838249063.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，全部高亮</div>
+                        </div>
+                    </div>
+                </div>
                 <!--15.热点精选 end---------------------------------------->
 
                 <!--搜索页-->
                 <!--16.搜索框 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 17" class="componentScrollBoxStyle1">
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 17 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle1">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750728922706490.jpg"/>
@@ -657,10 +1063,38 @@
                         </div>
                     </div>
                 </div>
+                <!--样式2-->
+                <div v-if="this.$store.state.template.editComponentType == 17 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle1">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842329479010.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色搜索按钮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842336116263.jpg"/>
+                            <div class="componentScrollBoxItemTitle">底部投影加白色按钮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842349482694.jpg"/>
+                            <div class="componentScrollBoxItemTitle">黑色搜索按钮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842359742962.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色搜索按钮加投影</div>
+                        </div>
+                    </div>
+                </div>
                 <!--16.搜索框 end---------------------------------------->
 
-                <!--单页列表和单页详情 start---------------------------------------->
-                <div v-if="this.$store.state.template.editComponentType == 18" class="componentScrollBoxStyle4">
+                <!--单页列表和单页详情 左侧悬浮列表 start---------------------------------------->
+                <!--样式1-->
+                <div v-if="this.$store.state.template.editComponentType == 18 && this.$store.state.template.editWebsiteClass == 1" class="componentScrollBoxStyle4">
                     <div class="componentScrollbigBog">
                         <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                             <img src="http://img.bjzxtw.org.cn/pre/image/png/20250624/1750749103943773.png"/>
@@ -722,7 +1156,33 @@
                         </div>
                     </div>
                 </div>
-                <!--单页列表和单页详情 end---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 18 && this.$store.state.template.editWebsiteClass == 2" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842971912654.jpg"/>
+                            <div class="componentScrollBoxItemTitle">仅文字高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842988744725.jpg"/>
+                            <div class="componentScrollBoxItemTitle">文字加背景色</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750842996542815.jpg"/>
+                            <div class="componentScrollBoxItemTitle">仅悬浮加亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750843002791909.jpg"/>
+                            <div class="componentScrollBoxItemTitle">悬浮背景加深</div>
+                        </div>
+                    </div>
+                </div>
+                <!--单页列表和单页详情 左侧悬浮列表 end---------------------------------------->
             </div>
         </div>
         <div class="componentWindowBoxFooter">

src/views/template/templateCreat.vue

@@ -189,6 +189,7 @@ export default {
                 //把回显内容填入画布
                 this.$store.commit('template/setWebsiteTemplate',canvasData);
             }else{
+                this.$store.commit('template/clearWebsiteTemplate');
                 console.log("用户是首次创建模板，无需回显！")
             }
         });