|
|
@@ -105,36 +105,26 @@
|
|
|
<div v-if="item.type == 'ChannelNewsAndPhoto'" class="moduleBox">
|
|
|
<ChannelNewsAndPhoto :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
<!-- 皮肤7-新闻图文组合4-通栏版式-带选项卡图文组合 -->
|
|
|
<div v-if="item.type == 'newsTextTabsImgSectorClass'" class="moduleBox">
|
|
|
<newsTextTabsImgSectorClass :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
<!-- 12 皮肤7- 热点关注 -->
|
|
|
<div v-if="item.type == 'skinSevenNewsHyjjSector'" class="moduleBox">
|
|
|
<skinSevenNewsHyjjSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 14.滚动图文组合--皮肤7 -->
|
|
|
<div v-if="item.type == 'scrollTextImgSevenSkinchannelSector'" class="moduleBox">
|
|
|
<scrollTextImgSevenSkinchannelSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
<!-- 15.子导航菜单 --皮肤7 channelMenu-->
|
|
|
<div v-if="item.type == 'channelNavigationSector'" class="moduleBox">
|
|
|
<channelNavigationSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
</grid-item>
|
|
|
</grid-layout>
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 全局组件:页尾 -->
|
|
|
<div class="FixedModuleBoxBottom">
|
|
|
<footerSector v-if="this.$store.state.template.editWebsiteClass <= 4" />
|
|
|
@@ -142,14 +132,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
//页面公用组件 start------------------------------------------------------------>
|
|
|
//引入公用样式
|
|
|
import '@/styles/global.less';
|
|
|
import { GridLayout, GridItem } from "vue-grid-layout";
|
|
|
//1.页面公用组件 end------------------------------------------------------------>
|
|
|
-
|
|
|
//引入自助建站组件 start------------------------------------------------------------>
|
|
|
//全局组件
|
|
|
//顶部
|
|
|
@@ -190,27 +178,16 @@ import ChannelNewsSector from '../style/sector/body/index/list/1200x330/1.vue';
|
|
|
import ChannelNewsPhoto from '../style/sector/body/index/list/1200x400/6.vue';
|
|
|
// 皮肤6 不带标题图文组合2
|
|
|
import ChannelNewsAndPhoto from '../style/sector/body/index/list/1200x480/6_2.vue';
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
//新闻图文组合4-皮肤7-带选项卡图文组合 行业聚焦
|
|
|
// import newsTextTabsImgSector from '../style/sector/body/index/list/1200x480/6_2.vue';
|
|
|
import newsTextTabsImgSectorClass from '../style/sector/body/class/list/1200x1150/7/1.vue';
|
|
|
-
|
|
|
//14 皮肤7-------------------------------------------------------------热点关注>
|
|
|
import skinSevenNewsHyjjSector from '../style/sector/body/index/list/1200x720/7/2.vue';
|
|
|
-
|
|
|
-
|
|
|
// 皮肤7-合并为一个组件的焦点图通栏 轮播图
|
|
|
import scrollTextImgSevenSkinchannelSector from '../style/sector/body/index/banner/1200x480/7/3.vue';
|
|
|
-
|
|
|
-
|
|
|
//频道菜单-子导航菜单皮肤7channelMenu
|
|
|
import channelNavigationSector from '../style/sector/body/class/menu/1200x100/1.vue';
|
|
|
-
|
|
|
-
|
|
|
//2.引入自助建站组件 end------------------------------------------------------------>
|
|
|
-
|
|
|
export default {
|
|
|
components: {
|
|
|
GridLayout,//画布
|
|
|
@@ -235,7 +212,6 @@ export default {
|
|
|
ChannelNewsSector,// 皮肤6 不带标题图文组合1
|
|
|
ChannelNewsPhoto,// 皮肤6 带标题图文组合2
|
|
|
ChannelNewsAndPhoto,// 皮肤6 不带标题图文组合2
|
|
|
-
|
|
|
newsTextTabsImgSectorClass,//新闻图文组合-频道页专用 行业聚焦
|
|
|
skinSevenNewsHyjjSector,//14 皮肤7-----热点关注>
|
|
|
scrollTextImgSevenSkinchannelSector,//14 皮肤7-合并为一个组件的焦点图通栏 轮播图
|
|
|
@@ -285,7 +261,6 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
//0.全局操作 end ------------------------------------------------------------>
|
|
|
-
|
|
|
//1.模块操作 start ------------------------------------------------------------>
|
|
|
//1.1 移动模块
|
|
|
moveModule(i, moveType) {
|
|
|
@@ -312,7 +287,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
<style scoped lang="less">
|
|
|
//拖拽demo
|
|
|
.droppable-element {
|
|
|
@@ -323,12 +297,10 @@ export default {
|
|
|
margin: 10px 0;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
-
|
|
|
//模块 start------------------------------------------------------------>
|
|
|
.sectorBorder {
|
|
|
border: 2px dashed #eee;
|
|
|
}
|
|
|
-
|
|
|
.moduleBox {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
@@ -339,18 +311,15 @@ export default {
|
|
|
background-color: transparent;
|
|
|
//border: 2px dashed #eee;
|
|
|
}
|
|
|
-
|
|
|
.moduleBoxBorder {
|
|
|
border: 2px dashed #eee;
|
|
|
}
|
|
|
-
|
|
|
//固定的模块
|
|
|
.FixedModuleBox {
|
|
|
width: 100%;
|
|
|
//margin-bottom: 20px;
|
|
|
//border: 2px dashed #eee;
|
|
|
}
|
|
|
-
|
|
|
.fixedBg{
|
|
|
width: 100%;
|
|
|
height: 720px;
|
|
|
@@ -363,33 +332,26 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.FixedModuleBoxBottom {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-
|
|
|
.FixedMainModuleBox {
|
|
|
width: 100%;
|
|
|
font-size: 18px;
|
|
|
color: #999;
|
|
|
text-align: center;
|
|
|
-
|
|
|
img {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
-
|
|
|
padding: 100px;
|
|
|
//background: #F5F7FB;
|
|
|
//margin-bottom: 20px;
|
|
|
}
|
|
|
-
|
|
|
.FixedMainModuleBoxBorder {
|
|
|
border: 2px dashed #eee;
|
|
|
}
|
|
|
-
|
|
|
//模块 end------------------------------------------------------------>
|
|
|
//栅格布局 start------------------------------------------------------------>
|
|
|
-
|
|
|
.grid-item-content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -398,7 +360,6 @@ export default {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
-
|
|
|
.grid-tools-menu {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -407,7 +368,6 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
-
|
|
|
span {
|
|
|
width: 38px;
|
|
|
height: 38px;
|
|
|
@@ -420,60 +380,49 @@ export default {
|
|
|
border-radius: 8px;
|
|
|
background-color: #fff1cc;
|
|
|
transition: all 0.3s;
|
|
|
-
|
|
|
&:hover {
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.grid-layout {
|
|
|
grid-gap: 0;
|
|
|
row-gap: 0;
|
|
|
}
|
|
|
-
|
|
|
//画布调整
|
|
|
.canvasBox {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
-
|
|
|
.FixedMainModuleBox {
|
|
|
min-height: 450px;
|
|
|
background-color: #fff;
|
|
|
background: url('../../../assets/template/creat.png') no-repeat center center;
|
|
|
}
|
|
|
-
|
|
|
.FixedMainModuleBoxAuto {
|
|
|
min-height: 450px;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
-
|
|
|
//占位元素颜色
|
|
|
::v-deep .vue-grid-placeholder {
|
|
|
background: #ccc !important;
|
|
|
opacity: 0.3;
|
|
|
}
|
|
|
-
|
|
|
//栅格布局 end------------------------------------------------------------>
|
|
|
//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
|
|
|
::v-deep .custom-form-item>.el-form-item__label {
|
|
|
line-height: 140px !important;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .custom-textarea .el-textarea__inner {
|
|
|
resize: none;
|
|
|
/* 禁止用户拖拽调整大小 */
|
|
|
}
|
|
|
-
|
|
|
::v-deep .custom-align-right .el-form-item__label {
|
|
|
text-align: right;
|
|
|
/* 设置标签文字右对齐 */
|
|
|
}
|
|
|
-
|
|
|
::v-deep .shadowBox .el-button--mini.is-circle {
|
|
|
border-radius: 50% !important;
|
|
|
}
|
|
|
-
|
|
|
//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
|
|
|
</style>
|