admin_home/src/views/template/templateCreat.vue

<template>
  <div class="mainBox">
    <div class="topMenuBox">
      <div>
        <el-button icon="el-icon-refresh" type="warning" size="small">随机生成模板</el-button>
      </div>
      <div>
        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">首页</el-button>
        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">分类页</el-button>
        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">列表页</el-button>
        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">详情页</el-button>
      </div>
      <div>
        <el-button type="primary" size="small" @click="gotoList">保存</el-button>
        <el-button icon="el-icon-view" type="warning" size="small">预览</el-button>
        <el-button icon="el-icon-circle-close" type="info" size="small" @click="goStyle">退出编辑</el-button>
      </div>
    </div>
    <div class="pageTabsBox">
      <div>首页<i class="el-icon-circle-check"></i></div>
      <div>分类页<i class="el-icon-circle-check"></i></div>
      <div>列表页<i class="el-icon-circle-check"></i></div>
      <div>详情页<i class="el-icon-circle-check"></i></div>
    </div>

    <!-- <div class="layerTabsBox">
      <div class="layerTabsItem active">配置首页</div>
      <div class="layerTabsItem">配置列表页</div>
      <div class="layerTabsItem">配置详情页</div>
    </div> -->

    <!-- 工具栏 start ---------------------------------------->
    <!-- <div class="menuPostionBox">
      <MenuTopBox @add-module="addModule"/>
    </div> -->
    <!-- 工具栏 end ---------------------------------------->

    <!-- 栅格布局 预览模式 start ---------------------------------------->
    <div class="websiteBox">
      <div class="grid-layout-demo">
        <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
          <grid-item
            v-for="(item, index) in layout"
            :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">              
           
              <!-- 模块内容1 顶部菜单 --> 
              <div v-if="item.type == 1" class="module1Box">
                <div class="module1Title">{{form.type1.welcomeText}}</div>
                <div class="module1LoginLink">{{form.type1.linkText}}</div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容2 logo栏 --> 
              <div v-if="item.type == 2" class="module2Box">
                <div class="module2Logo">
                  <div class="module2NoImgBox">
                    <img src="@/assets/public/upload/noImage.png">
                    <div>请添加图片</div>
                  </div>
                </div>
                <div class="module2rightAd">
                  <div class="module2NoImgBox">
                    <img src="@/assets/public/upload/noImage.png">
                    <div>请添加图片</div>
                  </div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容3 导航栏 --> 
              <div v-if="item.type == 3" class="module3Box">
                <div class="module3Nav">
                  <div class="module3NavItem" v-for="(item,index) in form.type3" :key="index">{{item.linkText}}</div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容4 Banner --> 
              <div v-if="item.type == 4" class="module4Box">
                <div class="module4Banner">
                  <div class="module4BannerNoImgBox">
                    <img src="@/assets/public/upload/noImage.png">
                    <div>请添加图片</div>
                  </div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容6 图片列表 --> 
              <div v-if="item.type == 6" class="module6Box">
                <div class="module6imgBox">
                  <div class="module6item">
                    <div>
                      <img src="@/assets/public/upload/noImage.png">
                      <div>请添加图片</div>
                    </div>
                  </div>
                  <div class="module6item">
                    <div>
                      <img src="@/assets/public/upload/noImage.png">
                      <div>请添加图片</div>
                    </div>
                  </div>
                  <div class="module6item">
                    <div>
                      <img src="@/assets/public/upload/noImage.png">
                      <div>请添加图片</div>
                    </div>
                  </div>
                  <div class="module6item">
                    <div>
                      <img src="@/assets/public/upload/noImage.png">
                      <div>请添加图片</div>
                    </div>
                  </div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容7 文本列表 --> 
              <div v-if="item.type == 7" class="module7Box">
                <div class="module7textList">
                  <div v-for="(item,index) of form.type7" :key="index">{{item.linkText}}</div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容8 图文列表 --> 
              <div v-if="item.type == 8" class="module8Box">
                <div class="module8ImgBox">
                  <div class="module8ImgItem" v-for="(item,index) of form.type8" :key="index">
                    <img src="@/assets/public/upload/noImage.png">
                    <div class="module8ImgItemText">
                      <div class="module8ImgItemTitle">{{item.title}}</div>
                      <div class="module8ImgItemText">{{item.text}}</div>
                    </div>
                  </div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 模块内容10 友情链接 --> 
              <div v-if="item.type == 10" class="module10Box">
                <div class="module10Linkbox">
                  <div class="module10LinkImgBox">
                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
                  </div>
                  <div class="module10LinkTextBox">
                    <div>友情链接</div>
                    <div>友情链接</div>
                    <div>友情链接</div>
                    <div>友情链接</div>
                    <div>友情链接</div>
                  </div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>
              
              <!-- 模块内容11 纯文本 --> 
              <div v-if="item.type == 11" class="module11Box">
                <div class="module11Text">
                  <div>说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</div>
                  <div>说明文字说明文字说明文字说明文字</div>
                </div>
                <div class="shadowBox">
                  <div class="editBtnBox">
                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>
              </div>

            </div>
          </grid-item>
        </grid-layout>
      </div>
    </div>
    <!-- 栅格布局 预览模式 end ---------------------------------------->


    <!--弹出框 start------------------------------------------------------------>
    <el-dialog title="编辑模块" :visible.sync="windowStatus">
      <el-form :model="form" ref="form" autocomplete="off" label-position="left">
        <div class="formDiv">
          <el-form-item label="欢迎语：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
            <el-input v-model="form.type1.welcomeText" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="登录链接标题：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
            <el-input v-model="form.type1.linkText" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button @click="closeWindow">取 消</el-button>
          <el-button type="primary" @click="editGridItem">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框 end------------------------------------------------------------>
  </div>
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//引入vue-grid-layout
import { GridLayout, GridItem } from 'vue-grid-layout';
//标题
import tableTitle from './public/tableTitle';
//导入新组件
//import MenuTopBox from './public/indexComponents.vue'; 




export default {
  components: {
    GridLayout,
    GridItem,
    tableTitle,
    //MenuTopBox
  },
  data() {
    return {
      //页面 start------------------------------------------------------------>
      headerTitle: '模块',
      windowStatus: false,
      editPageStatus:0,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
      //页面 end------------------------------------------------------------>

      //弹出框 start------------------------------------------------------------>
      formLabelWidth: '120px',
      editModule: "",//待编辑的模块
      form: {
        content: '',
        //模块1 顶部菜单
        type1: {
          welcomeText: '欢迎光临XXX网！',
          linkText: '用户登录'
        },
        //模块2 logo栏
        type2:{
          logoImg: '',
          adImg: ''
        },
        //模块3 导航栏
        type3:[
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"},
          {linkText:"网站导航",src:"http://www.baidu.com"}
        ],
        //模块7 文本列表
        type7:[
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
        ],
        type8:[
          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
        ]
      },
      //弹出框 end------------------------------------------------------------>

      //预览 start------------------------------------------------------------>
      layout: [
        // i = id 
        // w = 最大宽度是12
        // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
        // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
        // { i: "2", x: 3, y: 0, w: 3, h: 2, content:""},
        // { i: "3", x: 6, y: 0, w: 3, h: 2, content:""}
      ],
      //预览 end------------------------------------------------------------>

      //保存页面信息
      pageData:{
        page_index:{
          
        },
        page_theme:{
          
        },
        page_list:{
          
        },
        page_article:{
          
        }
      }

    }
  },
  methods: {
    //0.全局操作 start ------------------------------------------------------------>
    //上一步  
    goStyle(){
      this.$router.push({
        path: '/templateStyle',
        query: {
          id: this.editId
        }
      });
    },
    nextPage(){
      //保存页面信息
      this.pageData.page_theme = 1;
    },
    gotoList(){
      this.$router.push({
        path: '/templateList'
      });
    },
    //0.全局操作 end ------------------------------------------------------------>

    //添加模块
    addModule(type) {
      // 计算当前布局的最大 y 值
      const maxY = Math.max(...this.layout.map(item => item.y), 0);
      // type=1 顶部菜单
      if(type==1){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: 1, 
          type: type,
          content:""
        });
      }
      // type=2 logo
      if(type==2){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: 2, 
          type: type,
          content:""
        });
      }
      // type=3 nav
      if(type==3){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: 2, 
          type: type,
          content:""
        });
      }
      // type=4 banner
      if(type==4){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 8, 
          h: 5, 
          type: type,
          content:""
        });
      }
      // type=6 多图列表
      if(type==6){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: 2, 
          type: type,
          content:""
        });
      }
      // type=7 文本列表
      if(type==7){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 4, 
          h: 5, 
          type: type,
          content:""
        });
      }
      // type=8 图文列表
      if(type==8){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 8, 
          h: 10, 
          type: type,
          content:""
        });
      }
      // type=10 友情链接
      if(type==10){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: 2, 
          type: type,
          content:""
        });
      }
      // type=11 纯文本
      if(type==11){
        this.layout.push({
          i: this.layout.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: 1, 
          type: type,
          content:""
        });
      }
    },
    //删除模块
    deleteModule(item) {
      //找到对应的模块删除掉
      for(let i = 0; i < this.layout.length; i++) {
        if(this.layout[i].i == item.i) {
          this.layout.splice(i, 1);
        }
      }
    },

    //打开弹出框
    openWindow(item) {
      this.editModule = item.i;
      this.windowStatus = true;
    },

    //编辑栅格布局
    editGridItem() {
      console.log(this.editModule);
      //找对在栅栏中对应的窗口，把编辑的值放进去
      for(let i = 0; i < this.layout.length; i++) {
        if(this.layout[i].i == this.editModule) {
          this.layout[i].content = this.form.content;
        }
      }
      //关闭窗口
      this.windowStatus = false;
    },

    //关闭弹出框
    closeWindow() {
      this.windowStatus = false;
    }

  },
  mounted(){
    const id = this.$route.query.id;
    console.log('Retrieved ID from route:', id);
  }
}
</script>

<style scoped lang="less">
  //顶部菜单
  .topMenuBox {
    padding: 20px 30px 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff
  }
  //当前步骤
  .pageTabsBox {
    border-top: 1px solid #E9EDF7;
    background: #fff;
    display: flex;
    align-items: center;
    justify-items: flex-start;
    font-size:12px;
    padding:10px 30px;
    div {
      margin-right: 30px;
      color: #999;
      i {
        margin-left: 5px;
      }
    }
    .active {
      color: #5570F1;
    }
  }
  //页面容器
  .websiteBox {
    margin: 30px;
    background: #fff;
    border: 1px solid #E9EDF7;
    padding: 20px 20px 20px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }





  //菜单 start------------------------------------------------------------> 
  // .layerTabsBox {
  //   margin: 30px;
  //   border-radius: 20px;
  //   background: #fff;
  //   border: 1px solid #d3d3d3;
  //   -webkit-box-sizing: border-box;
  //   box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   overflow: hidden;
  //   .layerTabsItem {
  //     width: 33.33%; /* 每个占3分之一的空间 */
  //     padding: 10px 20px;
  //     cursor: pointer;
  //     text-align: center;
  //     font-size: 14px;
  //     border-right: 1px solid #d3d3d3;
  //     background: #fff;
  //   }
  //   .active {
  //     background: #5570F1;
  //     color: #fff;
  //   }
  // }
  // .layerBox {
  //   padding-bottom: 10px;
  // }
  //菜单 end------------------------------------------------------------> 

  //模块 start------------------------------------------------------------> 
  .module1Box,.module2Box {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: space-between;
  }
  //1.顶部菜单
  .module1Box {
    padding: 0 10px;
    border: 1px dashed #333;
    .module1Title {
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
    }
    .module1LoginLink {
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //2.logo
  .module2Box {
    .module2Logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      width: 200px;
      border: 1px dashed #333;
      background: #f0f2f5;
      .module2NoImgBox {
        text-align: center;
        font-size: 12px;
        color: #666;
        img{
          width: 20px;
          height: 20px;
          margin-bottom: 5px;
        }
      }
    }
    .module2rightAd {
      flex: 1;
      border: 1px dashed #333;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f2f5;
      text-align: center;
      font-size: 12px;
      img{
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //3.网站导航
  .module3Box {
    width: 100%;
    .module3Nav {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .module3NavItem {
        width: 10%;
        font-size: 12px;
        color: #666;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px dashed #333;
        padding: 0 10px;
        margin-bottom: 5px;
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //5.banner
  .module4Box {
    border: 1px dashed #333;
    background: #f0f2f5;
    width: 100%;
    height: 100%;
    .module4Banner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      .module4BannerNoImgBox {
        text-align: center;
        font-size: 12px;
        color: #666;
        img{
          width: 20px;
          height: 20px;
          margin-bottom: 5px;
        }
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //6.多图列表
  .module6Box {
    width: 100%;
    height: 100%;
    .module6imgBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      .module6item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        border: 1px dashed #333;
        font-size: 12px;
        width: 25%;
        text-align: center;
        color: #666;
        img{
          width: 20px;
          height: 20px;
          margin-bottom: 5px;
        }
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //7.文本列表
  .module7Box {
    width: 100%;
    height: 100%;
    .module7textList {
      width: 100%;
      height: 100%;
      overflow: hidden;
      div {
        border: 1px dashed #333;
        width: 100%;
        height:27px;
        font-size: 12px;  
        line-height: 27px;
        overflow: hidden;
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //8.图文列表
  .module8Box {
    width: 100%;
    height: 100%;
    .module8ImgBox {
      width: 100%;
      height: 100%;
      .module8ImgItem:last-child {
        padding-bottom: 10px;
      }
      .module8ImgItem {
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px dashed #333;
        box-sizing: border-box;
        padding: 6px 6px 7px 6px;
        .module8ImgItemText {
          .module8ImgItemTitle {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
          }
          .module8ImgItemText {
            font-size: 12px;
            color: #666;
          }
        }
        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //10.友情链接
  .module10Box {
    width: 100%;
    height: 100%;
    .module10Linkbox {
      .module10LinkImgBox {
        display: flex;
        .module10LinkImgItem {
          width: 20%;
          height: 45px;
          border: 1px dashed #333;  
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 20px;
            height: 20px;
            margin-bottom: 5px;
          }
        }
      }
      .module10LinkTextBox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        div {
          width: 20%;
          font-size: 12px;
          color: #666;
          border: 1px dashed #333;
          text-align: center;
          height: 24px;
          line-height: 24px;
        }
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }
  //11.纯文本
  .module11Box {
    width: 100%;
    height: 100%;
    .module11Text {
      div {
        text-align: center;
        font-size: 12px;
        color: #666;
      }
    }
    &:hover .shadowBox{
      display: block;
    }
  }




  //公用 编辑按钮
  .shadowBox {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    .editBtnBox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }
  //模块 end------------------------------------------------------------> 



  //栅格布局 start------------------------------------------------------------> 
  .grid-layout-demo {
    //background-color:#f0f2f5;
    padding: 20px;
  }
  .grid-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
  }
  //栅格布局 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>