|
|
@@ -0,0 +1,406 @@
|
|
|
+<template>
|
|
|
+ <div class="sectorBox">
|
|
|
+ <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/headSector.png" />
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">页头</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('menuSector',2)">
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/menuSector.png" />
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">网站导航</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/imgTitleSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">通栏广告</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/bannerSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">焦点图</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/moreServicesSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">多图菜单</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/commentSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">文章列表带评论</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/newsSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">文章列表</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/imgSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">纯图片组合</div>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/linkSector.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">友情链接</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="sectorItemBox">
|
|
|
+ <div class="sectorItem">
|
|
|
+ <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
|
|
|
+ </div>
|
|
|
+ <div class="sectorItemTitle">页尾板块</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //添加通栏广告模块 start---------------------------------------->
|
|
|
+ imgTitleSector:{
|
|
|
+ sectorName:"imgTitleSector",//板块名称
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"",
|
|
|
+ sort:1,
|
|
|
+ componentData:{
|
|
|
+ text:"通栏广告", //广告位名称
|
|
|
+ width:1200, //广告位宽度
|
|
|
+ height:60, //广告位高度
|
|
|
+ }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //添加通栏广告模块 start---------------------------------------->
|
|
|
+
|
|
|
+ //添加banner模块 start---------------------------------------->
|
|
|
+ bannerSector:{
|
|
|
+ sectorName:"bannerSector",//板块名称
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"mainTitle",//组件名称
|
|
|
+ sort:1,//组件排序
|
|
|
+ componentData:{//该组件请求的数据
|
|
|
+ category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
|
|
|
+ page:1,//请求第几页
|
|
|
+ pageSize:1,//请求的条数
|
|
|
+ listType:[//请求的数据应该包含哪些字段
|
|
|
+ "title",//标题
|
|
|
+ //"created_time",//创建时间
|
|
|
+ //"author",//作者
|
|
|
+ //"imgUrl",//缩略图片
|
|
|
+ //"introduce",//描述
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,
|
|
|
+ component_name:"banner",
|
|
|
+ sort:2,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:3,
|
|
|
+ listType:[
|
|
|
+ "title",//标题
|
|
|
+ "imgUrl"//缩略图片
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,
|
|
|
+ component_name:"tabsNews",
|
|
|
+ sort:3,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:5,
|
|
|
+ listType:[
|
|
|
+ "title",//标题
|
|
|
+ "created_time",//创建时间
|
|
|
+ "introduce",//描述
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //添加banner模块 end---------------------------------------->
|
|
|
+
|
|
|
+ //添加多图板块 start---------------------------------------->
|
|
|
+ manyPictureSector:{
|
|
|
+ sectorName:"manyPictureSector",//板块名称
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:7, //纯文本
|
|
|
+ component_style:1,
|
|
|
+ component_name:"styleTitle",
|
|
|
+ sort:1,
|
|
|
+ componentData:{
|
|
|
+ text:"板块标题"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:6, //静态组件无需传递数据
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"fivePicture",
|
|
|
+ sort:2,
|
|
|
+ componentData:{}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"tabsNews",
|
|
|
+ sort:3,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:3,
|
|
|
+ listType:[
|
|
|
+ "title",//标题
|
|
|
+ "created_time",//创建时间
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"tabsNews",
|
|
|
+ sort:4,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:3,
|
|
|
+ listType:[
|
|
|
+ "title",//标题
|
|
|
+ "created_time",//创建时间
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //添加多图板块 end---------------------------------------->
|
|
|
+
|
|
|
+ //文章列表带评论板块 end---------------------------------------->
|
|
|
+ commentSector:{
|
|
|
+ sectorName:"commentSector",//板块名称
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:7, //纯文本
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"styleTitle",
|
|
|
+ sort:1,
|
|
|
+ componentData:{
|
|
|
+ text:"板块标题"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:2,//该组件使用哪个展示样式
|
|
|
+ component_name:"tabsCalendarNews",
|
|
|
+ sort:2,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:6,
|
|
|
+ listType:[
|
|
|
+ "title",
|
|
|
+ "created_time",
|
|
|
+ "introduce"
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:8,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"calendar", //评论组件无需提交数据
|
|
|
+ sort:3,
|
|
|
+ componentData:{}
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //文章列表带评论板块 end---------------------------------------->
|
|
|
+
|
|
|
+ //文章列表板块 start---------------------------------------->
|
|
|
+ listSector:{
|
|
|
+ sectorName:"listSector",//板块名称
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:7,//纯文本
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"styleTitle",
|
|
|
+ sort:1,
|
|
|
+ componentData:{
|
|
|
+ text:"板块标题"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"listNews",
|
|
|
+ sort:2,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:5,
|
|
|
+ listType:[
|
|
|
+ "title",
|
|
|
+ "created_time"
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"listNews",
|
|
|
+ sort:3,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:5,
|
|
|
+ listType:[
|
|
|
+ "title",
|
|
|
+ "created_time"
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //文章列表板块 end---------------------------------------->
|
|
|
+
|
|
|
+ //纯图片组合 start---------------------------------------->
|
|
|
+ onlyImgSector:{
|
|
|
+ sectorName:"onlyImgSector",//板块名称
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:1,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"",
|
|
|
+ sort:1,
|
|
|
+ componentData:{
|
|
|
+ category_id:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:7,
|
|
|
+ listType:[
|
|
|
+ "title",
|
|
|
+ "imgUrl"
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //纯图片组合 end---------------------------------------->
|
|
|
+
|
|
|
+ //友情链接板块 start---------------------------------------->
|
|
|
+ friendShipLinkSector:{
|
|
|
+ sectorName:"friendShipLinkSector",//友情链接无需提交数据
|
|
|
+ componentList:[
|
|
|
+ {
|
|
|
+ component_type:7, //纯文本
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"styleTitle",
|
|
|
+ sort:1,
|
|
|
+ componentData:{
|
|
|
+ text:"板块标题"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component_type:4,
|
|
|
+ component_style:1,//该组件使用哪个展示样式
|
|
|
+ component_name:"",
|
|
|
+ sort:1,
|
|
|
+ componentData:{}
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ //友情链接板块 end---------------------------------------->
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //添加模块
|
|
|
+ addModule(type,h,jsonData){
|
|
|
+ let data = {
|
|
|
+ source:"click",//添加方式为点击
|
|
|
+ type: type,
|
|
|
+ h: h,
|
|
|
+ jsonData: jsonData
|
|
|
+ }
|
|
|
+ console.log(data);
|
|
|
+ this.$store.commit('template/addModule',data);
|
|
|
+ },
|
|
|
+ //拖拽开始
|
|
|
+ drag(type,h,jsonData){
|
|
|
+ let data = {
|
|
|
+ type: type,
|
|
|
+ h: h,
|
|
|
+ jsonData: jsonData
|
|
|
+ }
|
|
|
+ this.$store.commit('template/drag',data);
|
|
|
+ },
|
|
|
+ //拖拽结束
|
|
|
+ dragend(type,h,jsonData){
|
|
|
+ let data = {
|
|
|
+ type: type,
|
|
|
+ h: h,
|
|
|
+ jsonData: jsonData
|
|
|
+ }
|
|
|
+ this.$store.commit('template/dragend',data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .sectorBox {
|
|
|
+ height: 100%;
|
|
|
+ .sectorItemBox {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px 40px 20px;
|
|
|
+ height: 130px;
|
|
|
+ cursor: pointer;
|
|
|
+ .sectorItem {
|
|
|
+ border: 1px solid #333644;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ &:hover {
|
|
|
+ background: #333644;
|
|
|
+ transform: scale(1.1);
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sectorItemTitle {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 10px 0 0 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
Sean