|
|
@@ -1,91 +1,98 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <!-- 1.页头板块 -->
|
|
|
- <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
|
|
|
- <headSector />
|
|
|
+ <div>
|
|
|
+ <!-- 1.页头板块 -->
|
|
|
+ <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
|
|
|
+ <headSector />
|
|
|
+ </div>
|
|
|
+ <!-- 2.导航板块 -->
|
|
|
+ <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
|
|
|
+ <menuSector />
|
|
|
+ </div>
|
|
|
+ <!-- 无内容占位符 -->
|
|
|
+ <!-- <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus == false }]"
|
|
|
+ v-if="this.$store.state.template.pageData.index.length == 0">
|
|
|
+ <img src="@/assets/template/creat.png">
|
|
|
+ <div>请点击一个左侧板块，开始您的网站创建</div>
|
|
|
+ </div> -->
|
|
|
+ <!--使用gridKey来强制更新视图-->
|
|
|
+ <div
|
|
|
+ id="content"
|
|
|
+ class="canvasBox"
|
|
|
+ >
|
|
|
+ <grid-layout
|
|
|
+ :auto-size="true"
|
|
|
+ :class="this.$store.state.template.pageData.index.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
|
|
|
+ ref="gridlayout"
|
|
|
+ :layout="this.$store.state.template.pageData.index"
|
|
|
+ :layout.sync="this.$store.state.template.pageData.index"
|
|
|
+ :col-num="12"
|
|
|
+ :row-height="rowHeight"
|
|
|
+ :margin="[0, 0]"
|
|
|
+ :is-draggable="true"
|
|
|
+ :is-resizable="true"
|
|
|
+ :key="this.$store.state.template.gridKey"
|
|
|
+ >
|
|
|
+ <grid-item
|
|
|
+ v-for="(item, index) in this.$store.state.template.pageData.index"
|
|
|
+ :key="item.i"
|
|
|
+ :i="item.i"
|
|
|
+ :x="item.x"
|
|
|
+ :y="item.y"
|
|
|
+ :w="item.w"
|
|
|
+ :h="item.h"
|
|
|
+ :is-resizable="false"
|
|
|
+ >
|
|
|
+ <div class="grid-item-content">
|
|
|
+ <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
|
|
|
+ <!-- 移动板块-->
|
|
|
+ <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
|
|
|
+ <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
|
|
|
+ <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
|
|
|
+ </div>
|
|
|
+ <!-- 4.广告模块 -->
|
|
|
+ <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
|
|
|
+ <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 5.焦点图模块 -->
|
|
|
+ <div v-if="item.type == 'bannerSector'" class="moduleBox">
|
|
|
+ <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 6.多图模块 -->
|
|
|
+ <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
|
|
|
+ <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 7.评论模块 -->
|
|
|
+ <div v-if="item.type == 'commentSector'" class="moduleBox">
|
|
|
+ <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 8.双联文章列表模块 -->
|
|
|
+ <div v-if="item.type == 'listSector'" class="moduleBox">
|
|
|
+ <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 9.纯图片组合模块 -->
|
|
|
+ <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
|
|
|
+ <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 10.友情链接模块 -->
|
|
|
+ <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
|
|
|
+ <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </grid-item>
|
|
|
+ </grid-layout>
|
|
|
+ </div>
|
|
|
+ <div class="FixedModuleBoxBottom">
|
|
|
+ <!-- 3.页尾模块 -->
|
|
|
+ <footerSector />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 2.导航板块 -->
|
|
|
- <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
|
|
|
- <menuSector />
|
|
|
- </div>
|
|
|
- <!-- 无内容占位符 -->
|
|
|
- <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
|
|
|
- <img src="@/assets/template/creat.png">
|
|
|
- <div>请点击一个左侧板块，开始您的网站创建</div>
|
|
|
- </div>
|
|
|
- <!--使用gridKey来强制更新视图-->
|
|
|
- <div id="content">
|
|
|
- <grid-layout
|
|
|
- ref="gridlayout"
|
|
|
- :layout="this.$store.state.template.pageData.index"
|
|
|
- :layout.sync="this.$store.state.template.pageData.index"
|
|
|
- :col-num="12"
|
|
|
- :row-height="rowHeight"
|
|
|
- :margin="[0,0]"
|
|
|
- :is-draggable="true"
|
|
|
- :is-resizable="true"
|
|
|
- :key="this.$store.state.template.gridKey
|
|
|
- ">
|
|
|
- <grid-item
|
|
|
- v-for="(item, index) in this.$store.state.template.pageData.index"
|
|
|
- :key="item.i"
|
|
|
- :i="item.i"
|
|
|
- :x="item.x"
|
|
|
- :y="item.y"
|
|
|
- :w="item.w"
|
|
|
- :h="item.h"
|
|
|
- :is-resizable="false">
|
|
|
- <div class="grid-item-content">
|
|
|
- <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
|
|
|
- <!-- 移动板块-->
|
|
|
- <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
|
|
|
- <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
|
|
|
- <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
|
|
|
- </div>
|
|
|
- <!-- 4.广告模块 -->
|
|
|
- <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
|
|
|
- <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- <!-- 5.焦点图模块 -->
|
|
|
- <div v-if="item.type == 'bannerSector'" class="moduleBox">
|
|
|
- <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- <!-- 6.多图模块 -->
|
|
|
- <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
|
|
|
- <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- <!-- 7.评论模块 -->
|
|
|
- <div v-if="item.type == 'commentSector'" class="moduleBox">
|
|
|
- <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- <!-- 8.双联文章列表模块 -->
|
|
|
- <div v-if="item.type == 'listSector'" class="moduleBox">
|
|
|
- <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- <!-- 9.纯图片组合模块 -->
|
|
|
- <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
|
|
|
- <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- <!-- 10.友情链接模块 -->
|
|
|
- <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
|
|
|
- <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </grid-item>
|
|
|
- </grid-layout>
|
|
|
- </div>
|
|
|
- <div class="FixedModuleBoxBottom">
|
|
|
- <!-- 3.页尾模块 -->
|
|
|
- <footerSector />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//页面公用组件 start------------------------------------------------------------>
|
|
|
//引入公用样式
|
|
|
import '@/styles/global.less';
|
|
|
-import {GridLayout, GridItem} from "vue-grid-layout";
|
|
|
+import { GridLayout, GridItem } from "vue-grid-layout";
|
|
|
//页面公用组件 end------------------------------------------------------------>
|
|
|
|
|
|
//自助建站组件 start------------------------------------------------------------>
|
|
|
@@ -110,213 +117,248 @@ import friendShipLinkSector from '../style/sector/10.vue';//友情链接
|
|
|
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- GridLayout,
|
|
|
- GridItem,
|
|
|
- //板块组件 style1
|
|
|
- headSector,
|
|
|
- menuSector,
|
|
|
- imgTitleSector,
|
|
|
- bannerSector,
|
|
|
- manyPictureSector,
|
|
|
- commentSector,
|
|
|
- listSector,
|
|
|
- onlyImgSector,
|
|
|
- friendShipLinkSector,
|
|
|
- footerSector
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- //0.全局配置 start------------------------------------------------------------>
|
|
|
- windowStatus: false,
|
|
|
- rowHeight:10,
|
|
|
- //0.全局配置 end------------------------------------------------------------>
|
|
|
- //1.编辑模块 start------------------------------------------------------------>
|
|
|
- formLabelWidth: '120px',
|
|
|
- editModule: "",//待编辑的模块
|
|
|
- //1.编辑模块 end------------------------------------------------------------>
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- //必备操作
|
|
|
- //1.获得vuex中的鼠标对象
|
|
|
- let mouseObj = this.$store.state.template.mouseXY;
|
|
|
- //2.获得gridlayout对象
|
|
|
- this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
|
|
|
- //3.监听鼠标按住以后的移动事件
|
|
|
- document.addEventListener("dragover", function (e,store) {
|
|
|
- mouseObj.x = e.clientX;
|
|
|
- mouseObj.y = e.clientY;
|
|
|
- // mouseXY.x = e.clientX;
|
|
|
- // mouseXY.y = e.clientY;
|
|
|
- },false);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //0.全局操作 start ------------------------------------------------------------>
|
|
|
- //0.1上一步
|
|
|
- goStyle(){
|
|
|
- this.$router.push({
|
|
|
- path: '/templateStyle',
|
|
|
- query: {
|
|
|
- id: this.editId
|
|
|
+ components: {
|
|
|
+ GridLayout,
|
|
|
+ GridItem,
|
|
|
+ //板块组件 style1
|
|
|
+ headSector,
|
|
|
+ menuSector,
|
|
|
+ imgTitleSector,
|
|
|
+ bannerSector,
|
|
|
+ manyPictureSector,
|
|
|
+ commentSector,
|
|
|
+ listSector,
|
|
|
+ onlyImgSector,
|
|
|
+ friendShipLinkSector,
|
|
|
+ footerSector
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //0.全局配置 start------------------------------------------------------------>
|
|
|
+ windowStatus: false,
|
|
|
+ rowHeight: 10,
|
|
|
+ //0.全局配置 end------------------------------------------------------------>
|
|
|
+ //1.编辑模块 start------------------------------------------------------------>
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ editModule: "",//待编辑的模块
|
|
|
+ //1.编辑模块 end------------------------------------------------------------>
|
|
|
}
|
|
|
- });
|
|
|
},
|
|
|
- //0.2下一步
|
|
|
- gotoList(){
|
|
|
- this.$router.push({
|
|
|
- path: '/templateList'
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ //必备操作
|
|
|
+ //1.获得vuex中的鼠标对象
|
|
|
+ let mouseObj = this.$store.state.template.mouseXY;
|
|
|
+ //2.获得gridlayout对象
|
|
|
+ this.$store.commit('template/setGridlayoutObj', this.$refs.gridlayout);
|
|
|
+ //3.监听鼠标按住以后的移动事件
|
|
|
+ document.addEventListener("dragover", function (e, store) {
|
|
|
+ mouseObj.x = e.clientX;
|
|
|
+ mouseObj.y = e.clientY;
|
|
|
+ // mouseXY.x = e.clientX;
|
|
|
+ // mouseXY.y = e.clientY;
|
|
|
+ }, false);
|
|
|
},
|
|
|
- //0.全局操作 end ------------------------------------------------------------>
|
|
|
+ methods: {
|
|
|
+ //0.全局操作 start ------------------------------------------------------------>
|
|
|
+ //0.1上一步
|
|
|
+ goStyle() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/templateStyle',
|
|
|
+ query: {
|
|
|
+ id: this.editId
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //0.2下一步
|
|
|
+ gotoList() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/templateList'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //0.全局操作 end ------------------------------------------------------------>
|
|
|
|
|
|
- //1.模块操作 start ------------------------------------------------------------>
|
|
|
- //1.1 移动模块
|
|
|
- moveModule(i,moveType){
|
|
|
- this.$store.commit('template/moveModule',{i:i,moveType:moveType});
|
|
|
- },
|
|
|
- //1.2 删除模块
|
|
|
- deleteModule(i,dataSort){
|
|
|
- let data = {
|
|
|
- i:i,
|
|
|
- dataSort:dataSort
|
|
|
- }
|
|
|
- this.$store.commit('template/deleteModule',data);
|
|
|
- },
|
|
|
- //1.3 打开弹出框
|
|
|
- openWindow(item) {
|
|
|
- this.editModule = item.i;
|
|
|
- this.windowStatus = true;
|
|
|
- },
|
|
|
- //1.4 关闭弹出框
|
|
|
- closeWindow() {
|
|
|
- this.windowStatus = false;
|
|
|
+ //1.模块操作 start ------------------------------------------------------------>
|
|
|
+ //1.1 移动模块
|
|
|
+ moveModule(i, moveType) {
|
|
|
+ this.$store.commit('template/moveModule', { i: i, moveType: moveType });
|
|
|
+ },
|
|
|
+ //1.2 删除模块
|
|
|
+ deleteModule(i, dataSort) {
|
|
|
+ let data = {
|
|
|
+ i: i,
|
|
|
+ dataSort: dataSort
|
|
|
+ }
|
|
|
+ this.$store.commit('template/deleteModule', data);
|
|
|
+ },
|
|
|
+ //1.3 打开弹出框
|
|
|
+ openWindow(item) {
|
|
|
+ this.editModule = item.i;
|
|
|
+ this.windowStatus = true;
|
|
|
+ },
|
|
|
+ //1.4 关闭弹出框
|
|
|
+ closeWindow() {
|
|
|
+ this.windowStatus = false;
|
|
|
+ }
|
|
|
+ //1.模块操作 end ------------------------------------------------------------>
|
|
|
}
|
|
|
- //1.模块操作 end ------------------------------------------------------------>
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
//拖拽demo
|
|
|
.droppable-element {
|
|
|
- width: 150px;
|
|
|
- text-align: center;
|
|
|
- background: #fdd;
|
|
|
- border: 1px solid black;
|
|
|
- margin: 10px 0;
|
|
|
- padding: 10px;
|
|
|
+ width: 150px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fdd;
|
|
|
+ border: 1px solid black;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
+
|
|
|
//模块 start------------------------------------------------------------>
|
|
|
.sectorBorder {
|
|
|
- border: 2px dashed #eee;
|
|
|
+ border: 2px dashed #eee;
|
|
|
}
|
|
|
+
|
|
|
.moduleBox {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- //border: 2px dashed #eee;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ //border: 2px dashed #eee;
|
|
|
}
|
|
|
+
|
|
|
.moduleBoxBorder {
|
|
|
- border: 2px dashed #eee;
|
|
|
+ border: 2px dashed #eee;
|
|
|
}
|
|
|
+
|
|
|
//固定的模块
|
|
|
.FixedModuleBox {
|
|
|
- width: 100%;
|
|
|
- //margin-bottom: 20px;
|
|
|
- //border: 2px dashed #eee;
|
|
|
+ width: 100%;
|
|
|
+ //margin-bottom: 20px;
|
|
|
+ //border: 2px dashed #eee;
|
|
|
}
|
|
|
+
|
|
|
.FixedModuleBoxBottom {
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.FixedMainModuleBox {
|
|
|
- width: 100%;
|
|
|
- font-size: 18px;
|
|
|
- color: #999;
|
|
|
- text-align: center;
|
|
|
- img {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- padding: 100px;
|
|
|
- //background: #F5F7FB;
|
|
|
- //margin-bottom: 20px;
|
|
|
+ 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;
|
|
|
+ border: 2px dashed #eee;
|
|
|
}
|
|
|
+
|
|
|
//模块 end------------------------------------------------------------>
|
|
|
//栅格布局 start------------------------------------------------------------>
|
|
|
.grid-item-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #fff;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .grid-tools-menu {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 99;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- span {
|
|
|
- width: 38px;
|
|
|
- height: 38px;
|
|
|
- line-height: 38px;
|
|
|
- text-align: center;
|
|
|
- font-size: 30px;
|
|
|
- cursor: pointer;
|
|
|
- color: #999;
|
|
|
- // 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;
|
|
|
- // &:hover {
|
|
|
- // color: #fff;
|
|
|
- // background: #000;
|
|
|
- // }
|
|
|
- transition: all 0.3s;
|
|
|
- &:hover {
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .grid-tools-menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #999;
|
|
|
+ // 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;
|
|
|
+ // &:hover {
|
|
|
+ // color: #fff;
|
|
|
+ // background: #000;
|
|
|
+ // }
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
+
|
|
|
.grid-layout {
|
|
|
- grid-gap: 0;
|
|
|
- row-gap: 0;
|
|
|
+ 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: #fff;
|
|
|
+}
|
|
|
+
|
|
|
//栅格布局 end------------------------------------------------------------>
|
|
|
//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
|
|
|
-::v-deep .custom-form-item > .el-form-item__label {
|
|
|
- line-height: 140px !important;
|
|
|
+::v-deep .custom-form-item>.el-form-item__label {
|
|
|
+ line-height: 140px !important;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .custom-textarea .el-textarea__inner {
|
|
|
- resize: none; /* 禁止用户拖拽调整大小 */
|
|
|
+ resize: none;
|
|
|
+ /* 禁止用户拖拽调整大小 */
|
|
|
}
|
|
|
+
|
|
|
::v-deep .custom-align-right .el-form-item__label {
|
|
|
- text-align: right; /* 设置标签文字右对齐 */
|
|
|
+ text-align: right;
|
|
|
+ /* 设置标签文字右对齐 */
|
|
|
}
|
|
|
+
|
|
|
::v-deep .shadowBox .el-button--mini.is-circle {
|
|
|
- border-radius: 50% !important;
|
|
|
+ border-radius: 50% !important;
|
|
|
}
|
|
|
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
|
|
|
-</style>
|
|
|
+
|
|
|
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
|
dangyunlong
