选择组件风格

选择组件风格

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

@@ -12,45 +12,45 @@
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6,imgTitleSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png" @click="addIndexModule('imgTitleSector',6,imgTitleSector)"/>
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('bannerSector',34,bannerSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/bannerSector.png" @click="addIndexModule('bannerSector',34,bannerSector)"/>
+        <img src="@/assets/template/sector/bannerSector.png"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('manyPictureSector',41,manyPictureSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/moreServicesSector.png" @click="addIndexModule('manyPictureSector',41,manyPictureSector)"/>
+        <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('commentSector',40,commentSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png" @click="addIndexModule('commentSector',40,commentSector)"/>
+        <img src="@/assets/template/sector/commentSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('listSector',28,listSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/newsSector.png" @click="addIndexModule('listSector',28,listSector)"/>
+        <img src="@/assets/template/sector/newsSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('onlyImgSector',24,onlyImgSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgSector.png" @click="addIndexModule('onlyImgSector',24,onlyImgSector)"/>
+        <img src="@/assets/template/sector/imgSector.png"/> 
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('friendShipLinkSector',15,friendShipLinkSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/linkSector.png" @click="addIndexModule('friendShipLinkSector',15,friendShipLinkSector)"/>
+        <img src="@/assets/template/sector/linkSector.png"/>
       </div>
       <div class="sectorItemTitle">友情链接</div>
     </div>
@@ -78,7 +78,8 @@ export default {
         sectorName:"imgTitleSector",//板块名称
         componentList:[
           {
-            component_type:3,
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
             component_name:"",
             sort:1,
             componentList:[]//该组件不请求指定类型的数据，但是后端需要返回imgUrl
@@ -93,6 +94,7 @@ export default {
         componentList:[
           {
             component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
             component_name:"mainTitle",//组件名称
             sort:1,//组件排序
             componentData:{//该组件请求的数据
@@ -110,6 +112,7 @@ export default {
           },
           {
             component_type:1,
+            component_style:1,
             component_name:"banner",
             sort:2,
             componentData:{
@@ -123,6 +126,7 @@ export default {
           },
           {
             component_type:1,
+            component_style:1,
             component_name:"tabsNews",
             sort:3,
             componentData:{
@@ -145,6 +149,7 @@ export default {
         componentList:[
           {
             component_type:7, //纯文本
+            component_style:1,
             component_name:"styleTitle",
             sort:1,
             componentData:{
@@ -153,12 +158,14 @@ export default {
           },
           {
             component_type:6, //静态组件无需传递数据
+            component_style:1,//该组件使用哪个展示样式
             component_name:"fivePicture",
             sort:2,
             componentData:{}
           },
           {
             component_type:1,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"tabsNews",
             sort:3,
             componentData:{
@@ -173,6 +180,7 @@ export default {
           },
           {
             component_type:1,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"tabsNews",
             sort:4,
             componentData:{
@@ -195,6 +203,7 @@ export default {
         componentList:[
           {
             component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
             component_name:"styleTitle",
             sort:1,
             componentData:{
@@ -203,6 +212,7 @@ export default {
           },
           {
             component_type:1,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"tabsCalendarNews",
             sort:2,
             componentData:{
@@ -218,6 +228,7 @@ export default {
           },
           {
             component_type:8,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"calendar", //评论组件无需提交数据
             sort:3,
             componentData:{}
@@ -232,6 +243,7 @@ export default {
         componentList:[
           {
             component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
             component_name:"styleTitle",
             sort:1,
             componentData:{
@@ -240,6 +252,7 @@ export default {
           },
           {
             component_type:1,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"listNews",
             sort:2,
             componentData:{
@@ -254,6 +267,7 @@ export default {
           },
           {
             component_type:1,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"listNews",
             sort:3,
             componentData:{
@@ -276,6 +290,7 @@ export default {
         componentList:[
           {
             component_type:1,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"",
             sort:1,
             componentData:{
@@ -298,6 +313,7 @@ export default {
         componentList:[
           {
             component_type:4,
+            component_style:1,//该组件使用哪个展示样式
             component_name:"",
             sort:1,
             componentData:{}

src/store/modules/template.js

@@ -43,12 +43,14 @@ const state = {
   //2.站点数据 end------------------------------------------------------------>
 
   //3.网站数据 start------------------------------------------------------------>
-  editWindowStatus:false,//编辑弹出框是否显示
+  editWindowStatus:false,//编辑组件弹出框是否显示
+  editComponentWindowStatus:false,//选择组件样式弹出框是否显示
   editWindowTitle:"",//编辑弹出框标题
   editSectorId:0,//当前正在编辑的板块id
   editComponentSort:0,//当前正在编辑的组件id
   editComponentType:0,//当前正在编辑的组件类型
   editComponentSize:0,//当前组件展示的条数
+  editComponentStyle:0,//当前编辑的组件样式
 
   webSiteData:{
     //1.base网站基本信息
@@ -91,7 +93,7 @@ const mutations = {
   setPageStatus(state,num){
     state.pageStatus = num;
   },
-  //打开编辑弹出框
+  //打开编辑组件弹出框
   setEditWindowStatus(state,data){
     console.log(data);
     state.editWindowStatus = true;
@@ -100,7 +102,7 @@ const mutations = {
     state.editComponentType = data.type;
     state.editComponentSize = data.size;
   },
-  //关闭编辑弹出框
+  //关闭编辑组件弹出框
   closeEditWindowStatus(state){
     state.editWindowStatus = false;
     state.editSectorId = "";
@@ -108,6 +110,22 @@ const mutations = {
     state.editComponentType = "";
     state.editComponentSize = "";
   },
+  //打开选择组件样式弹出框
+  setComponentStyleStatus(state,data){
+    state.editComponentWindowStatus = true;
+    state.editSectorId = data.id;
+    state.editComponentSort = data.sort;
+    state.editComponentType = data.type;
+    state.editComponentStyle = data.style;
+  },
+  //关闭选择组件样式弹出框
+  closeComponentStyleStatus(state){
+    state.editComponentWindowStatus = false;
+    state.editSectorId = "";
+    state.editComponentSort = "";
+    state.editComponentType = "";
+    state.editComponentStyle = "";
+  },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
   //添加首页板块

src/views/template/public/componentWindow.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="componentWindowBox">
+    <!--开发助手-->
+    <div class="testAssistant">
+      <div class="testAssistantTitle">
+        开发助手：当前窗口在正式版本中将被移除。
+      </div>
+      <div class="testAssistantContent">
+        <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
+        <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
+        <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
+        <div class="testAssistantContentItem"><span>组件style:</span>{{this.$store.state.template.pageData.index[id].sectorData.componentList[sort].component_style}}</div>
+      </div>
+    </div>
+    <div class="componentStyleBox">
+      <div class="componentStyleBoxContent">
+        <!--3=广告组件-->
+        <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
+          <table>
+            <tr>
+              <td><div class="componentScrollBoxItem active"><img src="@/assets/template/component/style1imgTitle.png"/></div></td>
+              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style2imgTitle.png"/></div></td>
+              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style3imgTitle.png"/></div></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+    </div>
+    <div class="componentWindowBoxFooter">
+      <el-button type="info" @click="closeEditWindow">取消</el-button>
+      <el-button type="primary" @click="submitData">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      //选择的组件样式
+      useStyleNumber:0,
+    }
+  },
+  methods: {
+    closeEditWindow(){
+      this.$store.commit('template/closeComponentStyleStatus');
+    },
+    submitData(){
+      
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .componentWindowBox {
+    .componentStyleBox {
+      height: 220px;
+      margin-bottom: 20px;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      clear: both;
+      .componentScrollBox {
+        height: 200px;
+        display: flex; /* 使用 flex */
+        flex-wrap: wrap; /* 换行 */
+        .componentScrollBoxItem {
+          width: 200px;
+          height: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 10px;
+          background: #F5F7FB;
+          border:1px solid #F5F7FB;
+ 
+          img {
+            width: 100%;
+          }
+          &:hover {
+            border:1px solid #19499F;
+            cursor: pointer;
+          }
+        }
+        .active {
+          border:1px solid #19499F;
+        }
+      }
+    }
+    .componentWindowBoxFooter {
+      text-align: right;
+    }
+  }
+</style>

src/views/template/public/convertBtn.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="templateEditBtnBox" @click="openComponentListWindow">
+    <i class="el-icon-scissors"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    openComponentListWindow(){
+      let style = this.$store.state.template.pageData.index[this.id].sectorData.componentList[this.sort].component_style;
+      let data = {
+        id:this.id,
+        sort:this.sort,
+        type:this.type,
+        style:style
+      }
+      console.log(data);
+      this.$store.commit('template/setComponentStyleStatus',data);
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #000;
+    background: #fff;
+    border: 1px solid #000;
+    border-radius: 5px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 14px;
+    transition: all 0.3s;
+    z-index: 999;
+    &:hover {
+      color: #fff;
+      background: #000;
+    }
+  }
+</style>

src/views/template/public/editWindow.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="editWindowBox">
     <div class="editWindowBoxContent">
+      <!--组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论-->
       <!--开发助手-->
       <div class="testAssistant">
         <div class="testAssistantTitle">
@@ -13,10 +14,13 @@
           <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
         </div>
       </div>
-      <!--普通新闻类型-->
+      <!--1.普通新闻类型-->
       <div v-if="this.$store.state.template.editComponentType == 1">
         <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
-          <el-form-item label="网站导航：" :label-width="formLabelWidth" class="custom-align-right">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="新闻列表" disabled/>
+          </el-form-item>
+          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
             <el-cascader :key="oneParentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
@@ -24,9 +28,12 @@
           </el-form-item>
         </el-form>
       </div>
-      <!--tabs类型-->
+      <!--2.tabs类型-->
       <div v-if="this.$store.state.template.editComponentType == 2">
         <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="新闻选项卡" disabled/>
+          </el-form-item>
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
             <el-cascader :key="moreParentKey" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader>
           </el-form-item>
@@ -35,15 +42,52 @@
           </el-form-item>
         </el-form>
       </div>
-      <!--广告-->
+      <!--3.广告-->
       <div v-if="this.$store.state.template.editComponentType == 3">
         <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="广告" disabled/>
+          </el-form-item>
           <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
-            <el-input v-model="form.type3data.adsName" placeholder="请输入广告位名称" disabled/>
+            <el-input v-model="form.type3data.adsName" placeholder="请输入广告位名称"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--4.友情链接-->
+      <div v-if="this.$store.state.template.editComponentType == 4">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="友情链接暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--6.静态-->
+      <div v-if="this.$store.state.template.editComponentType == 6">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="静态组件暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--7.文字-->
+      <div v-if="this.$store.state.template.editComponentType == 7">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="文本" disabled/>
+          </el-form-item>
+          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
+            <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--8.评论组件-->
+      <div v-if="this.$store.state.template.editComponentType == 8">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="评论组件暂不支持编辑" disabled/>
           </el-form-item>
         </el-form>
       </div>
-      
 
     </div>
     <div class="editWindowBoxFooter">
@@ -70,7 +114,7 @@ export default {
     }
     const validateEmpty = (rule,value,callback) => {
       if (!value || value.trim() === "") {
-        callback(new Error('请填写广告位名称！'));
+        callback(new Error('该项不能为空！'));
       } else {
         callback();
       }
@@ -92,11 +136,15 @@ export default {
         //广告
         type3data:{
           adName:""
+        },
+        //文字
+        type7data:{
+          titleName:""
         }
       },
       formRules:{
         pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
-        adsName: [{required:true,trigger:'blur',message:'请填写广告位名称！',validator:validateEmpty}],
+        adsName: [{required:true,trigger:'blur',message:'请填写标题名称！',validator:validateEmpty}],
       },
       //获取单个导航id start---------------------------------------->
       oneParentKey:0,

src/views/template/style/1/bannerSector.vue

@@ -8,7 +8,8 @@
         <banner :id="id" :sort="2"/>
       </div>
       <div class="NewsListBox">
-        <tabsNews :id="id" :sort="3"/>
+        <!-- <tabsNews :id="id" :sort="3"/> -->
+        <bgGreyNews :id="id" :sort="3"/>
       </div>
     </div>
   </div>
@@ -18,14 +19,14 @@
 import mainTitle from './components/mainTitle.vue'
 import banner from './components/banner.vue'
 import tabsNews from './components/tabsNews.vue'
-import editBtn from '../../public/editBtn.vue'
+import bgGreyNews from './components/bgGreyNews.vue'
 
 export default {
   components: {
     mainTitle,
     banner,
     tabsNews,
-    editBtn
+    bgGreyNews
   },
   props: {
     id:{
@@ -60,9 +61,6 @@ export default {
       border: 1px dashed #5570F1;
       transition: all 0.3s;
       width: 80%;
-      &:hover {
-        background: #e7ebff;
-      }
     }
     .itemBottomBox {
       border: 1px dashed #5570F1;
@@ -77,9 +75,6 @@ export default {
         border: 1px dashed #5570F1;
         width: 55%;
         height: 226px;
-        &:hover {
-          background: #e7ebff;
-        }
       }
       .NewsListBox {
         position: relative;
@@ -88,9 +83,6 @@ export default {
         box-sizing: border-box;
         padding-left: 20px;
         height: 226px;
-        &:hover {
-          background: #e7ebff;
-        }
       }
     }
     

src/views/template/style/1/commentSector.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="commentSectorBox">
     <div class="commentSectorBoxTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="commentSectorBoxContent">
       <div class="tabsCalendarNewsBox">
-        <tabsCalendarNews />
+        <tabsCalendarNews :id="id" :sort="2"/>
       </div>
       <div class="calendarBox">
-        <calendar />
+        <calendar :id="id" :sort="3"/>
       </div>
     </div>
   </div>

src/views/template/style/1/components/advertisement/1.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/component/style1imgTitle.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 60px;
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+</style>

src/views/template/style/1/components/advertisement/2.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/sector/imgTitleSector.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 60px;
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+</style>

src/views/template/style/1/components/advertisement/3.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/sector/imgTitleSector.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 60px;
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+</style>

src/views/template/style/1/components/bgGreyNews.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="bgGreyNewsBox">
+    <editBtn :id="id" :sort="1" :type="2" :size="6"/>
+    <div class="bgGreyNews">
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bgGreyNewsBox {
+    background: #F2F2F2;
+    height: 100%;
+    .bgGreyNews {
+      a {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid #D1D1D1;
+        font-size: 16px;
+        color: #333;
+        height: 37px;
+        line-height: 37px;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+      a:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+</style>
+

src/views/template/style/1/components/calendar.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="calendarMainBox">
+    <editBtn :id="id" :sort="sort" :type="6"/>
     <div class="calendarTitle">
       <span>三农调查</span>
     </div>
@@ -15,9 +16,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: { 
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -36,6 +48,7 @@ export default {
 <style scoped lang="less">
   .calendarMainBox {
     overflow: hidden;
+    position: relative;
     .calendarTitle {
       height: 40px;
       line-height: 40px;

src/views/template/style/1/components/fivePicture.vue

@@ -1,17 +1,29 @@
 <template>
   <div class="fivePictureBox">
-    <div><img src="@/assets/template/component/pictureTitle1.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle2.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle3.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle4.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle5.png"/></div>
+    <editBtn :id="id" :sort="sort" :type="6"/>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle1.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle2.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle3.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle4.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle5.png"/></div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -34,7 +46,8 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding: 20px 0;
-    div {
+    position: relative;
+    .fivePictureItem {
       width: 20%;
       display: flex;
       justify-content: center;

src/views/template/style/1/components/friendShipLink.vue

@@ -1,11 +1,22 @@
 <template>
   <div class="friendShipLinkBox">
+    <editBtn :id="id" :sort="sort" :type="4"/>
     <div class="friendShipLinkImgItemBox">
-      <img src="@/assets/template/component/link1.png">
-      <img src="@/assets/template/component/link2.png">
-      <img src="@/assets/template/component/link1.png">
-      <img src="@/assets/template/component/link1.png">
-      <img src="@/assets/template/component/link2.png">
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
     </div>
     <div class="friendShipLinkTextItemBox">
       <a href="javascript:;">中国教育网</a>
@@ -21,9 +32,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue';
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -41,6 +63,8 @@ export default {
 
 <style scoped lang="less">
   .friendShipLinkBox {
+    position: relative;
+    width: 100%;
     .friendShipLinkImgItemBox {
       height: 80px;
       display: flex;
@@ -48,8 +72,14 @@ export default {
       align-items: flex-start;
       justify-content: space-between;
       padding: 20px 0;
-      img {
-        width: 19%;
+      div {
+        width: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 50%;
+        }
       }
     }
     .friendShipLinkTextItemBox {

src/views/template/style/1/components/listNews.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="listNewsBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="5"/>
     <div class="listNewsTitle">
       <div class="listNewsStyleBorder">新闻列表标题</div>
     </div>
@@ -29,9 +30,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -51,6 +63,7 @@ export default {
 
 <style scoped lang="less">
   .listNewsBox {
+    position: relative;
     .listNewsTitle {
       color: #19499F;
       font-size: 22px;

src/views/template/style/1/components/styleTitle.vue

@@ -1,13 +1,27 @@
 <template>
   <div class="styleTitleBox">
-    <div :class="['titleBoxStyle' + type]">{{ text }}</div>
+    <editBtn :id="id" :sort="sort" :type="7" />
+    <div :class="['titleBoxStyle' + type]">
+      {{ text }}
+    </div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -26,16 +40,17 @@ export default {
 
 <style scoped lang="less">
   .styleTitleBox {
-    width: 468px;
+    //width: 468px;
+    width: 100%;
     height: 41px;
     text-align: center;
     font-size: 32px;
     font-weight: bold;
     color: #333;
     line-height: 41px;
+    position: relative;
   }
   .titleBoxStyle1{
     background: url('../../../../../assets/template/component/titleStyle1.png') no-repeat center center;
-    background-size: 100% 100%;
   }
 </style>

src/views/template/style/1/components/tabsCalendarNews.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="tabsCalendarMainNewsBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="6"/>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="市场资讯" name="sczx">
         <ul class="newsListBox">
@@ -43,9 +44,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -66,6 +78,7 @@ export default {
 <style scoped lang="less">
   .tabsCalendarMainNewsBox {
     width: 100%;
+    position: relative;
     .newsListBox {
       padding-left: 0;
       .newsCalendarBox {

src/views/template/style/1/components/tabsNews.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tabsNewsBox">
-    <editBtn :id="id" :sort="3" :type="2" :size="5"/>
+    <editBtn :id="id" :sort="sort" :type="2" :size="5"/>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="地方动态" name="first">
         <ul class="newsListBox">

src/views/template/style/1/friendShipLinkSector.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="friendShipLinkSectorBox">
     <div class="friendShipLinkSectorTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="friendShipLinkSectorItemBox">
-      <friendShipLink />
+      <friendShipLink :id="id" :sort="2"/>
     </div>
   </div>
 </template>
@@ -18,7 +18,10 @@ export default {
     friendShipLink
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

src/views/template/style/1/imgTitleSector.vue

@@ -1,17 +1,36 @@
 <template>
   <div class="imgTitleSectorBox">
     <div class="imgSectorBox">
-      <editBtn :id="id" :sort="1" :type="3" :size="1"/>
-      <img src="@/assets/template/sector/imgTitleSector.png" />
+      <editBtn :id="id" :sort="0" :type="3" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="3"/>
+      <!-- {{this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style}} -->
+      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 1">
+        <useStyle1 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 2">
+        <useStyle2 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 3">
+        <useStyle3 />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+import useStyle1 from './components/advertisement/1.vue'
+import useStyle2 from './components/advertisement/2.vue'
+import useStyle3 from './components/advertisement/3.vue'
+
 export default {
   components: {
-    editBtn
+    editBtn,
+    convertBtn,
+    useStyle1,
+    useStyle2,
+    useStyle3
   },
   props: {
     id:{
@@ -38,10 +57,6 @@ export default {
       width: 80%;
       height: 60px;
       position: relative;
-      img {
-        width: 100%;
-        height: 100%;
-      }
     }
   }
 </style>

src/views/template/style/1/listSector.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="listSectorBox">
     <div class="listSectorBoxTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="listSectorBoxContent">
       <div class="listNewsLeft">
-        <listNews />
+        <listNews :id="id" :sort="2"/>
       </div>
       <div class="listNewsRight">
-        <listNews />
+        <listNews :id="id" :sort="3"/>
       </div>
     </div>
   </div>
@@ -24,7 +24,10 @@ export default {
     listNews
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

src/views/template/style/1/manyPictureSector.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="manyPictureSectorBox">
     <div class="manyPictureSectorBoxTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="manyPictureSectorBox">
-      <fivePicture />
+      <fivePicture :id="id" :sort="2"/>
     </div>
     <div class="manyPictureNewsBox">
       <div class="manyPictureNewsItem">
-        <listNews />
+        <listNews :id="id" :sort="3"/>
       </div>
       <div class="manyPictureNewsItem">
-        <listNews />
+        <listNews :id="id" :sort="4"/>
       </div>
     </div>
   </div>
@@ -29,7 +29,10 @@ export default {
     listNews
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -51,6 +54,7 @@ export default {
     flex-direction: column;
     align-items: center;
     width:100%;
+    position: relative;
     .manyPictureSectorBoxTitle {
       width: 80%;
       border: 1px dashed #5570F1;

src/views/template/style/1/onlyImgSector.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="onlyImgSectorBox">
     <div class="onlyImgSectorPositionBox">
+      <editBtn :id="id" :sort="1" :type="6"/>
       <div class="onlyImgSectorItemBox1">
         <img src="@/assets/template/component/pic1.png" />
         <img src="@/assets/template/component/pic2.png" />
@@ -23,10 +24,20 @@
 </template>
 
 <script>
-
+import editBtn from '../../public/editBtn.vue';
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -44,10 +55,12 @@ export default {
     align-items: center;
     .onlyImgSectorPositionBox {
       width: 80%;
+      height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       border: 1px dashed #5570F1;
+      position: relative;
       img {
         width: 100%;
         display: block;

src/views/template/templateCreat.vue

@@ -32,6 +32,9 @@
     <el-dialog title="编辑组件" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow">
       <editWindow />
     </el-dialog>
+    <el-dialog title="选择组件展示形式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
+      <componentWindow />
+    </el-dialog>
     <!-- 弹出框 start ---------------------------------------->
   </div>
 </template>
@@ -40,6 +43,7 @@
 //页面公用组件 start------------------------------------------------------------>
 import '@/styles/global.less';
 import editWindow from './public/editWindow.vue';
+import componentWindow from './public/componentWindow.vue';
 //页面公用组件 end------------------------------------------------------------>
 
 //页面组件 start------------------------------------------------------------>
@@ -50,7 +54,8 @@ export default {
   components: {
     //引入页面组件
     pageIndex,
-    editWindow
+    editWindow,
+    componentWindow
   },
   data() {
     return {
@@ -110,6 +115,10 @@ export default {
     closeEditWindow(){
       this.$store.commit('template/closeEditWindowStatus');
     },
+    //关闭选择组件样式弹出框
+    closeComponentStyleWindow(){
+      this.$store.commit('template/closeComponentStyleStatus');
+    },
     //0.全局操作 end ------------------------------------------------------------>
   },
   mounted(){