Merge branch '12_4_dangyunlong' into dev

.env.dev

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'dev'
+
+# base api
+VUE_APP_BASE_API = 'http://183.131.25.186:9501'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://183.131.25.186:9506'

.env.development

@@ -1,8 +1,10 @@
 # just a flag
 ENV = 'development'
 
+VUE_APP_BASE_WEBSOCKET = 'ws://183.131.25.186:9506'
 # base api
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'http://183.131.25.186:9501'
 '
 
 
+

.env.fengrui

@@ -0,0 +1,5 @@
+# just a flag
+ENV = 'fengrui'
+
+# base api
+VUE_APP_BASE_API = 'http://192.168.1.115:9501'

.env.liujian

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'liujian'
+
+# base api
+VUE_APP_BASE_API = 'http://192.168.1.127:9501'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://192.168.1.127:9506'

.env.liujiawei

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'liujiawei'
+
+# base api
+VUE_APP_BASE_API = 'http://192.168.1.201:9501'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://192.168.1.201:9506'

.env.master

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'master'
+
+# base api
+VUE_APP_BASE_API = 'https://admin.bjzxtw.org.cn/zxtapi'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://admin.bjzxtw.org.cn:9506'

.env.production

@@ -1,6 +1,8 @@
 # just a flag
 ENV = 'production'
 
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://admin.bjzxtw.org.cn:9506'
 # base api
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'https://admin.bjzxtw.org.cn/zxtapi'
 

package.json

@@ -7,12 +7,17 @@
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",
     "build:prod": "vue-cli-service build",
+    "build:dev": "vue-cli-service build --mode dev",
+    "build:master": "vue-cli-service build --mode master",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "new": "plop",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
-    "test:ci": "npm run lint && npm run test:unit"
+    "test:ci": "npm run lint && npm run test:unit",
+    "liujian": "cross-env NODE_ENV=development vue-cli-service serve --mode liujian",
+    "liujiawei": "cross-env NODE_ENV=development vue-cli-service serve --mode liujiawei",
+    "fengrui": "cross-env NODE_ENV=development vue-cli-service serve --mode fengrui"
   },
   "dependencies": {
     "axios": "0.18.1",
@@ -63,6 +68,7 @@
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
+    "cross-env": "^7.0.3",
     "eslint": "6.7.2",
     "eslint-plugin-vue": "6.2.2",
     "html-webpack-plugin": "3.2.0",

src/router/index.js

@@ -301,25 +301,7 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/creatWebsite',
-    component: creatWebsite,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/website/creatWebsite'),
-        meta: {
-          title: '搭建网站',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-
     path: '/contacts',
-
     component: Layout,
     children: [
       {
@@ -412,6 +394,39 @@ export const constantRoutes = [
           hidden: true,
           breadcrumb: true
         }
+      },
+    ]
+  },
+  {
+    path: '/templateCreat',
+    component: creatWebsite,
+    children: [
+      {
+        name: '',
+        path: '',
+       
+        component: () => import('@/views/template/templateCreat'),
+        meta: {
+          title: '搭建网站',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/templateBase',
+    component: creatWebsite,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateBase'),
+        meta: {
+          title: '设置模板基本信息',
+          hidden: true,
+          breadcrumb: true
+        }
       }
     ]
   },

src/utils/request.js

@@ -7,13 +7,8 @@ import URL from '@/utils/baseUrl';
 // create an axios instance
 const service = axios.create({
   //千万不能在这里使用绝对地址，这会导致webpack的devserve不生效
-  baseURL: URL.baseUrl,
-  //baseURL: URL.testUrl, //刘佳伟的电脑
-  //baseURL: URL.liuUrl, //刘剑的电脑
-  // baseURL: URL.baseUrl, //测试服务器
-  //baseURL: URL.servUrl, //正式服务器
-
-  //baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  //baseURL: URL.baseUrl,
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   //withCredentials: true, // send cookies when cross-domain requests
   timeout: 50000 // request timeout
 })

src/views/chat/creatTopic.vue

@@ -34,14 +34,14 @@
               </div>
             </el-form-item>
             <el-form-item label="建立群聊：" prop="is_group" class="custom-align-right">
-              <el-radio-group v-model="form.is_group" :disabled="editStatus">
-                <el-radio :label="1">是</el-radio>
-                <el-radio :label="0">否</el-radio>
+              <el-radio-group v-model="form.is_group" :disabled="groupStatus">
+                <el-radio :label="'1'">是</el-radio>
+                <el-radio :label="'0'">否</el-radio>
               </el-radio-group>
             </el-form-item>
             <div>
-              <el-form-item label="群聊名称：" prop="group_name" class="custom-align-right" v-if="form.is_group==1">
-                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="editStatus"></el-input>
+              <el-form-item label="群聊名称：" prop="group_name" class="custom-align-right" v-if="form.is_group=='1'">
+                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="groupStatus"></el-input>
               </el-form-item>
               <el-form-item label="作者：" class="custom-align-right">
                 <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者名"></el-input>
@@ -53,7 +53,7 @@
     </div>
     <div class="bottomBtnBox">
       <el-button type="info" @click="returnPage">返回</el-button>
-      <el-button type="primary" @click="editToServe" v-if="editStatus==true">确定</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">修改</el-button>
       <el-button type="primary" @click="addToServe" v-else>创建</el-button>
     </div>
   </div>
@@ -100,7 +100,8 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
     return {
       //1.表单项 start ------------------------------------------------------------>
-      editStatus:false,
+      editStatus:false,//是否为编辑状态
+      groupStatus:false,//是否可以编辑群信息
       tableDivTitle:"编辑课题",
       disclaimer:true,//免责声明
       //提交表单
@@ -108,7 +109,7 @@ export default {
         type:"",//课题分类
         title:"",//课题标题
         content:"",//内容
-        is_group:0,//是否创建群聊
+        is_group:"0",//是否创建群聊
         group_name:"",//群聊名称
         author:"",//作者
       },
@@ -271,15 +272,13 @@ export default {
         this.form.title = res.data.title;
         this.form.type = res.data.type;
         this.form.content = res.data.content;
+        this.form.is_group = res.data.is_group;
+        this.form.group_name = res.data.group_name;
+        this.form.author = res.data.user_name;
         //如果已经创建了群聊，阻止其修改
-        if(this.$route.query.id){
-          if(res.data.group_name != null){
-            this.form.is_group = 1;
-            this.form.group_name = res.data.group_name;
-          }
+        if(res.data.is_group=="1"){
+          this.groupStatus = true;
         }
-        this.form.author = res.data.user_name;
-        
       }).catch(() => {
         this.$message({
           type: 'info',

src/views/chat/hall.vue

@@ -1587,7 +1587,7 @@ export default {
       //然后循环添加其他用户
       this.friendsList.forEach(item => {
         if(item.status){
-          data.group_member += item.id + ",";
+          data.group_member += item.friend_id + ",";
         }
         data.group_name = this.friendsList
           .filter(item => item.status)
@@ -2381,7 +2381,8 @@ export default {
     //console.log("Admin-Token:", adminToken);
 
     //2.连接websocket 
-    let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
+    let websocketNewUrl = process.env.VUE_APP_BASE_WEBSOCKET +"?token=" + adminToken;
+    //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
     this.ws = new WebSocket(websocketNewUrl);
     this.ws.addEventListener('message', this.handleIncomingMessage);
 
@@ -2590,7 +2591,7 @@ export default {
       .userListBox {
         padding: 15px 0;
         overflow-y: auto;
-        height: 1000px;
+        height: 560px;
         .active {
           background: #F5F7FD;
           box-sizing: border-box;
@@ -2670,7 +2671,7 @@ export default {
       background: #fff;
       border-radius: 20px;
       position: relative;
-      height: 1184px;
+      height: 760px;
       display: flex;
       flex-direction: column;
       position: relative;
@@ -2754,7 +2755,7 @@ export default {
         position: relative;
         .rightUserMessageBox {
           padding: 40px;
-          height: 760px;
+          height: 320px;
           box-sizing: border-box;
           overflow-y: auto;
           .timeBox {
@@ -2925,6 +2926,7 @@ export default {
             }
             img {
               width: 40px;
+              height: 40px;
               margin-right: 5px;
             }
           }

src/views/news/creatNews.vue

@@ -140,7 +140,7 @@
                   <img src="@/assets/public/check.png"/>同意《免责声明》：
                   <!-- <el-checkbox v-model="disclaimer" disabled="disabled"></el-checkbox> -->
                 </div>
-                <div class="disclaimerText">本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归作者所有，如涉及原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
+                <div class="disclaimerText">本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
               </div>
             </div>
             <div v-if="form.is_original==1">

src/views/template/components/CityCascader.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-cascader
+    :key="cascaderKey"
+    v-model="internalValue"
+    placeholder="选择您要绑定的城市"
+    :props="SearchCityData"
+    filterable
+    clearable
+    @change="handleChange">
+  </el-cascader>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { // 接收外部传递的 v-model 值
+      type: [Array, String], // 允许传入数组或字符串类型的数据
+      default: () => [],
+    },
+  },
+  data() {
+    let self = this;
+    return {
+      internalValue: [], // 用于与级联选择器进行双向绑定的内部数据
+      cascaderKey: 0, // 用于强制刷新 cascader
+      SearchCityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          let parentId = level == 0 ? 0 : data.value;
+          let parames = {
+            pid: parentId,
+          };
+          self.$store
+            .dispatch("pool/getcityList", parames)
+            .then((res) => {
+              if (res.data) {
+                const nodes = res.data.map((item) => ({
+                  value: item.id,
+                  label: item.name,
+                  leaf: level >= 3,
+                  children: [],
+                }));
+                resolve(nodes);
+              }
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                message: "网络错误，请重试！",
+              });
+            });
+        },
+      },
+    };
+  },
+  watch: {
+    value: {
+      immediate: true, // 组件挂载时立即执行
+      handler(newVal) {
+        try {
+          const parsedValue = Array.isArray(newVal) ? newVal : JSON.parse(newVal);
+          this.internalValue = parsedValue; // 设置内部值
+          if (parsedValue.length) {
+            this.loadCascaderPath(parsedValue); // 动态加载回显的路径
+          }
+        } catch (error) {
+          console.error("无法解析传入的值:", error);
+          this.internalValue = []; // 如果解析失败，重置为默认空数组
+        }
+      },
+    },
+  },
+  methods: {
+    handleChange(value) {
+      // 当选择变化时，向父组件发送更新的值
+      this.$emit("input", value); // v-model 双向绑定
+      this.$emit("update-city-id", value); // 额外事件，方便父组件监听
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/getcityList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.internalValue = path; // 确保最后一级路径正确设置
+              this.cascaderKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 可根据需要自定义样式 */
+</style>

src/views/template/components/creatWebsite/indexComponents.vue

@@ -0,0 +1,143 @@
+<template>
+  <div :class="['layerBox', { 'fixed': isFixed }]">
+    <tableTitle :name="headerTitle"/>
+    <div class="menuTopBox">
+      <div class="menuItem itemMenuBg1" @click="addModule(1)">
+        登录菜单(12x1)
+      </div>
+      <div class="menuItem itemMenuBg2" @click="addModule(2)">
+        Logo栏(12x2)
+      </div>
+      <div class="menuItem itemMenuBg3" @click="addModule(3)">
+        导航菜单(12x2)
+      </div>
+      <div class="menuItem itemMenuBg4" @click="addModule(4)">
+        轮播图(8x5)
+      </div>
+      <!-- <div class="menuItem itemMenuBg5" @click="addModule(5)">
+        多分类列表
+      </div> -->
+      <div class="menuItem itemMenuBg6" @click="addModule(6)">
+        多图列表(12x0)
+      </div>
+      <div class="menuItem itemMenuBg7" @click="addModule(7)">
+        纯文本列表(4x5)
+      </div>
+      <div class="menuItem itemMenuBg8" @click="addModule(8)">
+        图文列表(8x10)
+      </div>
+      <!-- <div class="menuItem itemMenuBg9" @click="addModule(9)">
+        排行榜列表
+      </div> -->
+      <div class="menuItem itemMenuBg10" @click="addModule(10)">
+        友情链接(12x3)
+      </div>
+      <div class="menuItem itemMenuBg11" @click="addModule(11)">
+        纯文本(12x1)
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableTitle from './tableTitle.vue';
+
+export default {
+  props: {
+    
+  },
+  components: {
+    tableTitle
+  },
+  data() {
+    return {
+      headerTitle: '可选模块',
+      isFixed: false // 控制菜单是否悬浮
+    };
+  },
+  methods: {
+    addModule(id) {
+      this.$emit('add-module', id); // 触发事件，将模块 ID 传递给父组件
+    },
+    handleScroll() {
+      const scrollY = window.scrollY;
+      // 设置一个阈值，避免频繁切换
+      if (scrollY > 100 && !this.isFixed) {
+        this.isFixed = true; // 只有在超过 100 像素时才设置为悬浮状态
+      } else if (scrollY <= 0 && this.isFixed) {
+        this.isFixed = false; // 只有在回到 100 像素以下时才取消悬浮状态
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll); // 清理事件监听
+  }
+};
+</script>
+
+<style scoped lang="less">
+.menuTopBox {
+  display: flex;
+  flex-wrap: wrap;
+  transition: top 0.3s; /* 添加过渡效果 */
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding: 10px 10px 10px 40px;
+}
+
+.fixed {
+  position: fixed; /* 固定在顶部 */
+  top: 0; /* 吸附到顶部 */
+  //width: 100%; /* 确保宽度为 100% */
+  background-color: white; /* 设置背景颜色以覆盖下面的内容 */
+  z-index: 1000; /* 确保在其他内容之上 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影以增强视觉效果 */
+}
+
+/* 背景图样式 */
+.itemMenuBg1 {
+  background: url('../../../../assets/creatWebsite/menu/default/top_menu.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg2 {
+  background: url('../../../../assets/creatWebsite/menu/default/logo.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg3 {
+  background: url('../../../../assets/creatWebsite/menu/default/nav_menu.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg4 {
+  background: url('../../../../assets/creatWebsite/menu/default/banner.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg5 {
+  background: url('../../../../assets/creatWebsite/menu/default/class_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg6 {
+  background: url('../../../../assets/creatWebsite/menu/default/img_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg7 {
+  background: url('../../../../assets/creatWebsite/menu/default/text_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg8 {
+  background: url('../../../../assets/creatWebsite/menu/default/img_text_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg9 {
+  background: url('../../../../assets/creatWebsite/menu/default/level.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg10 {
+  background: url('../../../../assets/creatWebsite/menu/default/link.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg11 {
+  background: url('../../../../assets/creatWebsite/menu/default/text.png') no-repeat 10px #f0f2f5;
+}
+</style>

src/views/template/components/creatWebsite/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/template/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/template/templateBase.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="mainBox">
+    <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
+      <div class="layerBox">
+        <tableTitle :name="templateBaseTitle"/>
+        <div class="formDiv">
+          <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-checkbox-group v-model="form.template_base_type">
+                <el-checkbox label="1" disabled>首页</el-checkbox>
+                <el-checkbox label="2">分类页</el-checkbox>
+                <el-checkbox label="3">列表页</el-checkbox>
+                <el-checkbox label="4">详情页</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </el-form-item>
+          <el-form-item label="单页模板类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-checkbox-group v-model="form.template_special_type">
+                <el-checkbox label="1">自定义列表页</el-checkbox>
+                <el-checkbox label="2">自定义详情页</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </el-form-item>
+        </div>
+      </div>
+      <div class="layerBox">
+        <tableTitle :name="templateInfoTitle"/>
+        <div class="formDiv">
+          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="项目LOGO：" class="custom-align-right">
+            <div class="uploaderBox">
+              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                <!-- 预览图片 -->
+                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
+                <!-- 上传图标 -->
+                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                <div v-else class="chooseImgDiv">
+                  <div>
+                    <img src="@/assets/public/upload/noImage.png">
+                    <div>选择图片</div>
+                  </div>
+                </div>
+              </el-upload>
+            </div>
+          </el-form-item>
+          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+        </div>
+      </div>
+    </el-form>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="goToWebsite">返回</el-button>
+      <el-button type="primary" @click="goToStyle">下一步</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// 引入公用样式
+import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    // 配置验证规则：用于表单验证
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('密码不能低于6位！'))
+      } else {
+        callback()
+      }
+    }
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      templateBaseTitle:"模板类型设置",
+      templateInfoTitle:"模板信息设置",
+      formLabelWidth:"120px",
+      editId:"",
+      form:{
+        template_base_type:["1"],//常规类型
+        template_special_type:[],//特殊类型
+        website_statement:"",//网站声明
+        project_img_src:"",
+      },
+      //配置from表单验证规则
+      loginRules: { 
+        website_statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+      }
+    };
+  },
+  methods: {
+    //1.提交表单 start ------------------------------------------------------------>
+    //提交表单
+    addData(){
+      console.log(this.form);
+      //1.先验证用户是否已经存在
+      this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
+        if(res.code==0){
+          //如果code为0表示用户不存在，提交表单
+          this.$store.dispatch('userMember/createUser',this.form).then(res=>{
+            console.log(res);
+            this.$message({
+              type: 'success',
+              message: '用户添加成功！'
+            });
+            this.goList();
+          })
+        }else if(res.code==200){
+          //如果code==200 表示用户存在，阻止进一步提交
+          this.$message({
+            type: 'warning',
+            message: '该账号已被注册，请更换其他账号！'
+          });
+        }
+      }).catch(error=>{
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //提交表单 start ------------------------------------------------------------>
+    //3.编辑表单 start ------------------------------------------------------------>
+    //获得用户信息
+    getUserInfo(){
+      this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
+        console.log(res);
+        //回显数据
+        this.form.type_id = res.data.type_id;
+        this.form.user_name = res.data.user_name;
+        this.form.role_id = res.data.role_id;
+        this.form.real_name = res.data.real_name;
+        this.form.mobile = res.data.mobile;
+        this.form.gender = res.data.gender + "";
+
+      }).catch(error=>{
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //修改用户
+    editData(){
+      this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
+        if(res.code==0){
+          this.form.id = this.editId;
+          delete this.form.password;
+          delete this.form.confirm_password;
+          //如果code为0表示用户不存在，提交表单
+          this.$store.dispatch('userMember/updateUser',this.form).then(res=>{
+            console.log(res);
+            this.$message({
+              type: 'success',
+              message: '用户添加成功！'
+            });
+            this.goList();
+          })
+        }else if(res.code==200){
+          //如果code==200 表示用户存在，阻止进一步提交
+          this.$message({
+            type: 'warning',
+            message: '该账号已被注册，请更换其他账号！'
+          });
+        }
+      }).catch(error=>{
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //编辑表单 end ------------------------------------------------------------>
+    
+    goToWebsite(){
+      this.$router.push({
+        path: '/webSite',
+      });
+    },
+    goToStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+      });
+    },
+  },
+  mounted(){
+    //判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      console.log("编辑用户！")
+      this.getUserInfo();
+    }else{
+      console.log("添加用户！")
+    }
+
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .formDiv{
+    background: #F5F7FB;
+    padding: 10px 20px 10px 20px;
+  }
+  .uploaderBox .avatar-uploader {
+    background: #fff;
+  }
+  ::v-deep .formDiv .el-form-item:last-child {
+    margin-bottom: 0 !important;
+  }
+  ::v-deep .formDiv .el-form-item__content{
+    margin-left: 0 !important;
+  }
+  ::v-deep .formDiv .el-form-item__label{
+    float: none;
+  }
+  //执行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 .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/templateCreat.vue

@@ -0,0 +1,877 @@
+<template>
+  <div class="mainBox">
+    <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="layerBox">
+      <tableTitle :name="websiteTitle"/>
+      <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 ---------------------------------------->
+    <div class="bottomBtnBox">
+      <el-button type="primary">保存配置</el-button>
+    </div>
+    <!--弹出框 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 './components/tableTitle';
+//导入新组件
+import MenuTopBox from './components/creatWebsite/indexComponents.vue'; 
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    tableTitle,
+    MenuTopBox
+  },
+  data() {
+    return {
+      //页面 start------------------------------------------------------------>
+      headerTitle: '模块',
+      websiteTitle: '预览',
+      windowStatus: false,
+      //页面 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------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //添加模块
+    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">
+  //菜单 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>  
+

src/views/website/WebsiteList.vue

@@ -824,7 +824,7 @@ export default {
     //6.搭建网站 start ------------------------------------------------------------>
     creatWebsite(id){
       this.$router.push({ 
-        path: '/creatWebsite', 
+        path: '/templateBase', 
         query: {id:id} 
       });
     }