11-14-10:27

增加了聊天页面

src/api/unifiedLogin.js

@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 
+//单点登录
 export function login(params) {
   return request({
     url: '/auth/handler.php',
@@ -8,4 +9,13 @@ export function login(params) {
   })
 }
 
+//退出登录
+export function logoutapi(params) {
+  return request({
+    url: '/auth/logoutapi.php',
+    method: 'get',
+    params
+  })
+}
+
 

src/layout/components/Navbar.vue

@@ -93,9 +93,29 @@ export default {
     //   await this.$store.dispatch('user/logout')
     //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     // }
-    logout(){
+    logout() {
+      const token = this.getTokenFromCookie(); // 获取 token
       this.$store.commit("user/LOGOUT");
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      this.$router.push(`/`);
+
+      // 单点登录退出
+      this.$store.dispatch('public/logoutapi', { token: token }).then(response => {
+        console.log(response);
+      }).catch(error => {
+        console.log(error);
+      });
+    },
+    getTokenFromCookie() {
+      const name = "Admin-Token=";
+      const decodedCookie = decodeURIComponent(document.cookie);
+      const cookieArray = decodedCookie.split(';');
+      for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i].trim();
+        if (cookie.indexOf(name) === 0) {
+          return cookie.substring(name.length, cookie.length); // 返回 token
+        }
+      }
+      return ""; // 如果没有找到 token，返回空字符串
     }
   }
 }

src/store/modules/public.js

@@ -3,7 +3,7 @@ import {getInfo,changePassword} from '@/api/user'
 import {getDepartmentList,delDepartment,getDepartmentMain,
   getAllDepartment,addDepartment,upDepartment
 } from '@/api/system'
-import {login} from '@/api/unifiedLogin'
+import {login,logoutapi} from '@/api/unifiedLogin'
 
 const state = {
 
@@ -24,6 +24,15 @@ const actions = {
       })
     })
   },
+  logoutapi({commit},data) {
+    return new Promise((resolve, reject) => {
+      logoutapi(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   //单点登录 end ---------------------------------------->
   
   //公共api start ---------------------------------------->

src/utils/baseUrl.js

@@ -1,6 +1,7 @@
 const URL = {
   testUrl: 'http://192.168.1.201:9501',//老刘服务器
   baseUrl: 'http://183.131.25.186:9501',//测试服务器
+  servUrl: 'https://admin.bjzxtw.org.cn/zxtapi',//服务端
   WebsocketUrl: 'ws://192.168.1.201:9506',//老刘websocket地址
   //WebsocketUrl: 'ws://183.131.25.186:9506'//测试服务器websocket地址
 }

src/utils/request.js

@@ -9,6 +9,7 @@ const service = axios.create({
   //千万不能在这里使用绝对地址，这会导致webpack的devserve不生效
   //baseURL: URL.testUrl, //老刘服务器
   baseURL: URL.baseUrl, //测试服务器
+  //baseURL: URL.servUrl, //正式服务器
   //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/components/tableTitle.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="tableTitle">
+    <div class="tableTitleBox">
+      <span class="tableFloatLine"></span>
+      <div>{{name}}</div>
+    </div>
+    <img src="@/assets/chat/addUser.png" @click="handleAddUser">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+  methods: {
+    handleAddUser() {
+      this.$emit('addUser'); // Emit an event to notify the parent
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    padding-top: 37px;
+    padding-right: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      cursor: pointer;
+    }
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: inline-block;
+    }
+    .tableTitleBox {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-weight: bold;
+      span {
+        margin-right: 25px;
+      }
+    }
+  }
+</style>

src/views/chat/hall.vue

@@ -1,9 +1,309 @@
 <template>
   <div class="mainBox">
-    <!--大厅 start------------------------------------------------------------>
-    <div class="layerBox">
 
-      
+    <div class="hallBox">
+      <div class="hallLeft">
+        <!--添加好友 start------------------------------------------>
+        <tableTitle :name="tableTitleName" @addUser="addUser" />
+        <!--添加好友 end------------------------------------------>
+        <!--搜索 start------------------------------------------>
+        <div class="searchBox">
+          <el-input
+            placeholder="请输入内容"
+            prefix-icon="el-icon-search"
+            v-model="input2">
+          </el-input>
+        </div>
+        <!--搜索 end------------------------------------------>
+        <!--用户列表 start------------------------------------------>
+        <div class="userListBox">
+          <!--普通用户 start------------------------------------------>
+          <div class="userItem">
+            <div class="userAvatar">
+              <img src="@/assets/chat/user/user.png" alt="">
+            </div>
+            <div class="userInfo">
+              <div class="userName">
+                <div class="userNameText">用户</div>
+                <div class="userMessageNum">99+</div>
+              </div>
+              <div class="userMessage">
+                <div class="userMessageText">用户输入文字用户输入文字用户输入文字用户输入文字</div>
+                <div class="userMessageTime">12:55</div>
+              </div>
+            </div>
+          </div>
+          <!--普通用户 end------------------------------------------>
+          <!--管理员 start------------------------------------------>
+          <div class="userItem active">
+            <div class="userAvatar">
+              <img src="@/assets/chat/user/admin.png" alt="">
+            </div>
+            <div class="userInfo">
+              <div class="userName">
+                <div class="userNameText">管理员</div>
+                <div class="userMessageNum">5</div>
+              </div>
+              <div class="userMessage">
+                <div class="userMessageText">用户输入文字用户输入文字用户输入文字用户输入文字</div>
+                <div class="userMessageTime">12:55</div>
+              </div>
+            </div>
+          </div>
+          <!--管理员 end------------------------------------------>
+          <!--管理员 start------------------------------------------>
+          <div class="userItem">
+            <div class="userAvatar">
+              <img src="@/assets/chat/user/group.jpg" alt="">
+            </div>
+            <div class="userInfo">
+              <div class="userName">
+                <div class="userNameText">群聊</div>
+                <div class="userMessageNum">99+</div>
+              </div>
+              <div class="userMessage">
+                <div class="userMessageText">用户输入文字用户输入文字用户输入文字用户输入文字</div>
+                <div class="userMessageTime">12:55</div>
+              </div>
+            </div>
+          </div>
+          <div class="userItem">
+            <div class="userAvatar">
+              <img src="@/assets/chat/user/group.jpg" alt="">
+            </div>
+            <div class="userInfo">
+              <div class="userName">
+                <div class="userNameText">群聊</div>
+                <div class="userMessageNum">99+</div>
+              </div>
+              <div class="userMessage">
+                <div class="userMessageText">用户输入文字用户输入文字用户输入文字用户输入文字</div>
+                <div class="userMessageTime">12:55</div>
+              </div>
+            </div>
+          </div>
+          <!--管理员 end------------------------------------------>
+        </div>
+        <!--用户列表 end------------------------------------------>
+      </div>
+      <div class="hallRight">
+        <div class="UserNameBox">
+          <div class="userName">用户名称</div>
+          <img src="@/assets/chat/fi_more.png" @click="rightSlideBoxShow = !rightSlideBoxShow" class="moreIcon">
+        </div>
+        <div class="rightUserMessageBox">
+          <div class="timeBox">
+            <span>12:40:22</span>
+          </div>
+          <!--其他用户发言 start------------------------------------------>
+          <div class="otherUserMessage">
+            <div class="otherUserIcon">
+              <img src="@/assets/chat/user/admin.png" alt="">
+            </div>
+            <div class="otherUserMessageText">
+              用户输入文字用户输入文字用户输入文字用户输入文字
+            </div>
+          </div>
+          <!--其他用户发言 end------------------------------------------>
+          <!--我发言 start------------------------------------------>
+          <div class="meUserMessage">
+            <div class="meUserMessageText">
+              用户输入文字用户输入文字用户输入文字用户输入文字
+            </div>
+            <div class="meUserIcon">
+              <img src="@/assets/chat/user/user.png" alt="">
+            </div>
+          </div>
+          <!--我发言 end------------------------------------------>
+          <div class="meUserMessage">
+            <div class="meUserMessageText">
+              <!-- 发文件 start------------------------------------------>
+              <div class="messageTypeFile">
+                <div class="messageTypeFileTop">
+                  <div class="messageTypeFileInfo">
+                    <div class="messageTypeFileTitle">文件标题文件标题文件标题文件标题文件标题文件标题文件标题.doc</div>
+                    <div class="messageTypeFileIcon">
+                      <img src="@/assets/chat/file.png" alt="">
+                    </div>
+                  </div>
+                  <div class="messageTypeFileSize">20kb</div>
+                </div>
+                <div class="messageTypeFileLogo">恒星管理平台</div>
+              </div>
+              <!-- 发文件 end------------------------------------------>
+            </div>
+            <div class="meUserIcon">
+              <img src="@/assets/chat/user/user.png" alt="">
+            </div>
+          </div>
+          <!--我发言 start------------------------------------------>
+          <div class="meUserMessage">
+            <div class="meUserMessageText">
+              <div class="messageTypeImage">
+                <img src="@/assets/chat/user/user.png" alt="">
+              </div>
+            </div>
+            <div class="meUserIcon">
+              <img src="@/assets/chat/user/user.png" alt="">
+            </div>
+          </div>
+          <!--我发言 end------------------------------------------>
+        </div>
+        <div class="sendMessageBox">
+          <div class="sendMessageTools">
+            <img src="@/assets/chat/send_img.png">
+            <img src="@/assets/chat/send_file.png">
+            <img src="@/assets/chat/send_message.png">
+          </div>
+          <div class="sendMessageInput">
+            <el-input
+              type="textarea"
+              placeholder="请输入内容"
+              v-model="userMessage"
+              :rows="6"
+              resize="none"
+              maxlength="200"
+            >
+            </el-input>
+          </div>
+          <div class="sendMessageButton">
+            <el-button type="primary">发送 <i class="el-icon-position"></i></el-button>
+          </div>
+        </div> 
+        <!--右侧菜单 start------------------------------------------------------------>
+        <div class="rightSlideBox" v-if="rightSlideBoxShow">
+          <div class="rightSlideUserBox">
+            <div class="rightSlideUserItem">
+              <div class="rightSlideUserItemIcon">
+                <el-dropdown placement="left-start">
+                  <span class="el-dropdown-link">
+                    <img src="@/assets/chat/user/user.png">
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>修改备注</el-dropdown-item>
+                    <el-dropdown-item>推荐给朋友</el-dropdown-item>
+                    <el-dropdown-item><span @click="deleteUser">删除联系人</span></el-dropdown-item>
+                    <el-dropdown-item>查看聊天记录</el-dropdown-item>
+                    <el-dropdown-item>发送消息</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+              <div class="rightSlideUserItemName">
+                用户名称
+              </div>
+            </div>
+            <div class="rightSlideUserItem">
+              <div class="rightSlideUserItemIcon">
+                <div class="addUserIcon">
+                  <i class="el-icon-plus"></i>
+                </div>
+              </div>
+              <div class="rightSlideUserItemName">
+                添加
+              </div>
+            </div>
+          </div>
+          <div class="rightSlideFunction">
+            <div class="rightSlideFunctionItem">
+              <div class="rightSlideFunctionItemText">聊天记录</div>
+              <div class="rightSlideFunctionItemIcon">
+                <img src="@/assets/chat/arrow_right.png" alt="">
+              </div>
+            </div>
+            <div class="rightSlideFunction">
+              <div class="rightSlideFunctionItem">
+                <div class="rightSlideFunctionItemText">设置为置顶</div>
+                <div class="rightSlideFunctionItemIcon">
+                  <el-switch
+                    v-model="ifTop"
+                    active-color="#5570F1"
+                    inactive-color="#BBC5CB">
+                  </el-switch>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="rightSlideFooter">
+            清空聊天记录
+          </div>
+        </div>
+        <!--右侧菜单 end------------------------------------------------------------>
+      </div>
+    </div>
+    <!--大厅 end------------------------------------------------------------>
+    <!--添加用户弹出框 start------------------------------------------------------------>
+    <el-dialog :visible.sync="windowStatus" :close-on-click-modal="false" width="1028px">
+      <div class="searchWindow">
+        <div class="searchWindowLeft">
+          <el-input
+            placeholder="请输入内容"
+            prefix-icon="el-icon-search"
+            v-model="input2">
+          </el-input>
+          <!--搜索用户 start------------------------------------------------------------>
+          <div class="searchUserBox">
+            <div class="searchNameEnglish">A</div>
+            <div class="searchUserItem">
+              <el-checkbox v-model="checked"></el-checkbox>
+              <img src="@/assets/chat/user/user.png">
+              <div class="searchUserName">A农贸站群长</div>
+            </div>
+          </div>
+          <!--搜索用户 end------------------------------------------------------------>
+        </div>
+        <div class="searchWindowRight">
+          <div class="searchWindowRightTop">
+            <div class="searchWindowRightTitle">选择联系人</div>
+            <div class="searchWindowRightNum">已选择1个联系人</div>
+          </div>
+          <div class="searchWindowUserList">
+            <div class="searchWindowUserItem">
+              <div class="searchWindowUserIcon">
+                <img src="@/assets/chat/user/user.png">
+                <div class="searchWindowDeleteUser">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+              <div class="searchWindowUserName">A农贸站群长</div>
+            </div>
+            <div class="searchWindowUserItem">
+              <div class="searchWindowUserIcon">
+                <img src="@/assets/chat/user/user.png">
+                <div class="searchWindowDeleteUser">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+              <div class="searchWindowUserName">A农贸站群长</div>
+            </div>
+          </div>
+          <div class="searchWindowFooter">
+            <el-button type="info" @click="windowStatus = false">取消</el-button>
+            <el-button type="primary">完成</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <!--添加用户弹出框 end------------------------------------------------------------>
+
+    <!--聊天记录弹出框 start------------------------------------------------------------>
+    <el-dialog :visible.sync="fileWindowStatus" :close-on-click-modal="false" width="757px">
+      <div class="fileWindow">
+      </div>
+    </el-dialog>
+    <!--聊天记录弹出框 end------------------------------------------------------------>
+
+
+
+
+
+
+
+
+
+
+
+
+    <!-- <div class="layerBox">
       <el-container style="height: 100vh;">
         <el-aside width="300px" style="background: #f2f2f2;">
           <el-menu>
@@ -12,6 +312,7 @@
               v-for="conversation in conversations" 
               :key="conversation.session_id"
               @click="selectConversation(conversation)"
+              @contextmenu.prevent="showContextMenu($event, conversation)"
               :class="{ 'is-active': activeConversation && activeConversation.session_id === conversation.session_id }">
               <div v-if="conversation.talk_type==1">
                 <el-avatar :src=conversation.user_avatar>{{ conversation.nickname }}</el-avatar> {{ conversation.nickname }}
@@ -19,8 +320,16 @@
               <div v-if="conversation.talk_type==2">
                 <el-avatar :src=conversation.group_avatar>{{ conversation.group_name }}</el-avatar> {{ conversation.group_name }}
               </div>
-            
             </el-menu-item>
+
+            
+            <el-dropdown v-if="contextMenuVisible" :style="{ position: 'absolute', top: contextMenuY + 'px', left: contextMenuX + 'px' }" @command="handleMenuCommand">
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="view">查看</el-dropdown-item>
+                <el-dropdown-item command="delete">删除</el-dropdown-item>
+                <el-dropdown-item command="edit">编辑</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </el-menu>
         </el-aside>
 
@@ -55,7 +364,7 @@
       </el-container>
 
 
-    </div>
+    </div> -->
     <!--大厅 end------------------------------------------------------------>
   </div>
 </template>
@@ -63,18 +372,44 @@
 <script>
 //引入公用样式
 import '@/styles/global.less';
-// 引入baseUrl
+//引入baseUrl
 import URL from '@/utils/baseUrl';
+//引入组件
+import tableTitle from './components/tableTitle.vue';
+
 
 export default {
+  components: {
+    tableTitle
+  },
   data() {
     return {
+      tableTitleName:'聊天列表',
+      userMessage:'',//用户消息
+      
+      ifTop:false,//是否为置顶  
+      rightSlideBoxShow:false,//右侧菜单是否显示
+
+      windowStatus:false,//添加用户弹出框是否显示
+
+      fileWindowStatus:true,//弹出框是否显示
+
+
+
+
+
+
+
       activeConversation: null,
       newMessage: '',
       conversations: [
        
       ],
-      ws: null
+      ws: null,
+      contextMenuVisible: false, // 控制右键菜单的显示
+      contextMenuX: 0, // 右键菜单的 X 坐标
+      contextMenuY: 0, // 右键菜单的 Y 坐标
+      selectedConversation: null // 选中的对话
     };
   },
   methods: {
@@ -127,6 +462,83 @@ export default {
         });
       })
     },
+    showContextMenu(event, conversation) {
+      this.contextMenuVisible = true; // 显示右键菜单
+      this.contextMenuX = event.clientX; // 获取鼠标 X 坐标
+      this.contextMenuY = event.clientY; // 获取鼠标 Y 坐标
+      this.selectedConversation = conversation; // 保存选中的对话
+    },
+    handleMenuCommand(command) {
+      switch (command) {
+        case 'view':
+          this.viewConversation(this.selectedConversation);
+          break;
+        case 'delete':
+          this.deleteConversation(this.selectedConversation);
+          break;
+        case 'edit':
+          this.editConversation(this.selectedConversation);
+          break;
+      }
+      this.contextMenuVisible = false; // 隐藏右键菜单
+    },
+    viewConversation(conversation) {
+      // 查看对话的逻辑
+      console.log('查看对话:', conversation);
+    },
+    deleteConversation(conversation) {
+      // 删除对话的逻辑
+      console.log('删除对话:', conversation);
+    },
+    editConversation(conversation) {
+      // 编辑对话的逻辑
+      console.log('编辑对话:', conversation);
+    },
+
+
+
+    //用户菜单操作
+    //--删除联系人 start---------------------------------------->
+    deleteUser(id){
+      //console.log("删除联系人",id)
+      this.$confirm('此操作将删除该联系人，确定吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning' 
+      }).then(() => {
+        console.log("当前删除：" + id)
+        
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //--删除联系人 end---------------------------------------->
+    addUser(){
+      this.windowStatus = true;
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   },
   mounted() {
     //1.获取admin-token
@@ -143,35 +555,509 @@ export default {
     });
 
     this.getTalkSessionList()
+
+    // 监听全局点击事件以关闭右键菜单
+    document.addEventListener('click', () => {
+      this.contextMenuVisible = false;
+    });
   },
   beforeDestroy() {
     if (this.ws) {
       this.ws.removeEventListener('message', this.handleIncomingMessage);
       this.ws.close();
     }
+    // 清理事件监听
+    document.removeEventListener('click', () => {
+      this.contextMenuVisible = false;
+    });
   }
 };
 
 </script>
 
 <style scoped lang="less">
-.layerBoxNoBg {
-  padding: 30px 0 0 0;
-}
-//表单微调 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-group__title {
-  color: #909399;
-}
-::v-deep .el-select {
-  width: 100% !important;
-}
+
+  .hallBox {
+    display: flex;
+    margin: 30px;
+    //左侧
+    .hallLeft {
+      width: 420px;
+      background: #fff;
+      border-radius: 20px;
+      margin-right: 20px;
+      .searchBox {
+        padding-left: 25px;
+        padding-right: 25px;
+        padding-bottom: 20px;
+      }
+      .userListBox {
+        padding: 15px 0;
+        .active {
+          background: #F5F7FD;
+          box-sizing: border-box;
+          border-right: 4px solid #5570F1 !important;
+        }
+        .userItem {
+          padding: 0 21px 0 25px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 90px;
+          box-sizing: border-box;
+          border-right: 4px solid #fff;
+          cursor: pointer;
+          .userAvatar {
+            img {
+              width: 58px;
+              height: 58px;
+              border-radius: 50%;
+            }
+          }
+          .userInfo {
+            flex: 1;
+            box-sizing: border-box;
+            padding-left: 15px;
+            .userName {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding-bottom: 10px;
+              .userNameText {
+                font-size: 18px;
+                font-weight: bold;
+              }
+              .userMessageNum {
+                font-size: 12px;
+                color: #333;
+                width: 24px;
+                height: 24px;
+                line-height: 24px;
+                text-align: center;
+                border-radius: 50%;
+                background: #FFCC91;
+                font-weight: bold;
+              }
+            }
+            .userMessage {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .userMessageText {
+                display: block;
+                width: 240px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 14px;
+                color: #999999;
+              }
+              .userMessageTime {
+                font-size: 14px;
+                color: #999999;
+              }
+            }
+          }
+        }
+      }
+    }
+    //右侧
+    .hallRight {
+      flex: 1;
+      background: #fff;
+      border-radius: 20px;
+      position: relative;
+      .userName {
+        font-size: 20px;
+        color: #333;
+        font-weight: bold;
+      }
+      .UserNameBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 40px 30px 30px 30px;
+        border-bottom: 1px solid #E7E7E7;
+        .moreIcon {
+          cursor: pointer;
+        }
+      }
+      .rightUserMessageBox {
+        padding: 40px;
+        .timeBox {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding:0 0 30px 0; 
+          span {
+            border-radius: 8px;
+            display: block;
+            width: 80px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            display: block;
+            background: #F4F5FA;
+          }
+        }
+        //其他用户
+        .otherUserMessage {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 30px;
+          .otherUserIcon {
+            margin-right: 20px;
+            img {
+              width: 58px;
+              height: 58px;
+              border-radius: 50%;
+            }
+          }
+          .otherUserMessageText {
+            border-radius: 16px;
+            padding:16px;
+            font-size: 16px;
+            color:#fff;
+            background: #5570F1;
+            position: relative;
+          }
+          .otherUserMessageText::before {
+            content: '';
+            position: absolute;
+            left: -8px;
+            top: 26px;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+            border-right: 8px solid #5570F1;
+          }
+        }
+        //我
+        .meUserMessage {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 30px;
+          justify-content: flex-end; 
+          .meUserIcon {
+            margin-left: 20px;
+            img {
+              width: 58px;
+              height: 58px;
+              border-radius: 50%;
+            }
+          }
+          .meUserMessageText {
+            border-radius: 16px;
+            padding:16px;
+            font-size: 16px;
+            color:#333;
+            background: #FFEAD1;
+            position: relative;
+          }
+          .meUserMessageText::before {
+            content: '';
+            position: absolute;
+            right: -8px;
+            top: 26px;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent; 
+            border-left: 8px solid #FFEAD1;
+          }
+        }
+      }
+
+      //发送文件
+      .messageTypeFile {
+        background: #fff;
+        border-radius: 16px;
+        .messageTypeFileTop{
+          border-bottom: 1px solid #E9EDF7;
+          .messageTypeFileSize {
+            padding: 10px 20px 10px 20px;
+          }
+          .messageTypeFileInfo {
+            display: flex;
+            align-items: center;
+            padding:20px 20px 0 20px;
+            .messageTypeFileTitle {
+              font-size: 16px;
+              color: #333;
+              height: auto; /* Allow height to adjust */
+              max-height: 48px; /* Maximum height for two lines (16px * 2) */
+              overflow: hidden; /* Hide overflow */
+              text-overflow: ellipsis; /* Show ellipsis for overflow text */
+              display: -webkit-box; /* Use flexbox for multi-line ellipsis */
+              -webkit-box-orient: vertical; /* Set box orientation to vertical */
+              -webkit-line-clamp: 2; /* Limit to 2 lines */
+              white-space: normal; /* Allow text wrapping */
+              width: 200px;
+            }
+            .messageTypeFileIcon {
+              img {
+                width: 42px;
+                height: 42px;
+              }
+            }
+          }
+        }
+        .messageTypeFileLogo {
+          padding:10px 20px;
+        }
+        .messageTypeFileSize {
+          font-size: 12px;
+          color: #999;
+        }
+        .messageTypeFileLogo {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+
+      //发送图片
+      .messageTypeImage {
+        width: 200px;
+        height: 200px;
+        img {
+          max-width: 200px
+        }
+      }
+
+      //消息框
+      .sendMessageBox {
+        padding: 20px 40px;
+        border-top: 1px solid #E7E7E7;
+        .sendMessageTools {
+          img {
+            width: 36px;
+            height: 36px;
+            margin-right: 30px;
+            cursor: pointer;
+          }
+        }
+        .sendMessageInput {
+          margin-top: 20px;
+        }
+        .sendMessageButton {
+          padding-top: 20px;
+          text-align: right;
+        }
+      }
+      
+      //右侧菜单
+      .rightSlideBox {
+        width: 420px;
+        position: absolute;
+        right: 0;
+        top: 95px;
+        background: #fff;
+        height: 100%;
+        height: calc(100% - 95px);
+        box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
+        .rightSlideUserBox {
+          box-sizing: border-box;
+          padding: 40px 40px 10px 40px;
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          border-bottom: 1px solid #E9EDF7;
+          .rightSlideUserItem {
+            margin-bottom: 20px;
+            width: 25%;
+            .rightSlideUserItemIcon {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 50%;
+
+              img {
+                width: 58px;
+                height: 58px;
+                border-radius: 50%;
+              }
+              .addUserIcon {
+                width: 58px;
+                height: 58px;
+                line-height: 58px;
+                background: #F0F0F0;
+                border-radius: 50%;
+                text-align: center;
+              }
+            }
+            .rightSlideUserItemName {
+              font-size: 18px;
+              color: #333;
+              margin-top: 10px;
+              text-align: center
+            }
+          }
+        }
+        .rightSlideFunction {
+          .rightSlideFunctionItem {
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 30px 40px;
+            border-bottom: 1px solid #E9EDF7;
+            .rightSlideFunctionItemText {
+              font-size: 18px;
+              color: #333;
+            }
+            .rightSlideFunctionItemIcon {
+              img {
+                width: 18px;
+                height: 18px;
+              }
+            }
+          }
+        }
+        .rightSlideFooter {
+          font-size: 18px;
+          color: #CC5F5F;
+          padding: 30px 40px;
+          text-align: center;
+          cursor: pointer;
+        }
+      }
+
+    }
+  }
+
+  //弹出框
+  .searchWindow {
+    display: flex;
+    .searchWindowLeft {
+      width: 330px;
+      box-sizing: border-box;
+      border-right: 1px solid #E9EDF7;
+      padding-right: 25px;
+      .searchUserBox {
+        .searchNameEnglish {
+          font-size: 18px;
+          color: #999;
+          padding: 30px 0 20px 0;
+        }
+        .searchUserItem {
+          display: flex;
+          align-items: center;
+          .searchUserName {
+            font-size: 18px;
+            font-weight: bold;
+            color: #333;
+          }
+          img {
+            width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            margin: 0 20px;
+          }
+        }
+      }
+    }
+    .searchWindowRight {
+      width: 690px;
+      .searchWindowRightTop {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 30px 30px 30px;
+        .searchWindowRightTitle {
+          font-size: 18px;
+          color: #333;
+        }
+        .searchWindowRightNum {
+          font-size: 18px;
+          color: #999;
+        }
+      }
+      .searchWindowUserList {
+        padding: 0 30px;
+        display: flex;
+        flex-wrap: wrap;
+        .searchWindowUserItem {
+          width:20%;
+          text-align: center;
+          margin-bottom: 30px;
+          .searchWindowUserName {
+            font-size: 18px;
+            color: #333;
+            font-weight: bold;
+            width: 122px;
+            white-space: nowrap; /* 强制不换行 */
+            overflow: hidden; /* 超出宽度隐藏 */
+            text-overflow: ellipsis; /* 显示省略号 */
+          }
+          .searchWindowUserIcon {
+            width: 58px;
+            height: 58px;
+            position: relative;
+            margin: 0 auto 10px auto;
+            .searchWindowDeleteUser {
+              position: absolute;
+              width: 15px;
+              height: 15px;
+              background: rgba(0,0,0,0.3);
+              border-radius: 5px;
+              color: #fff;
+              right: -3px;
+              top: -3px;
+              cursor: pointer;
+            }
+            img {
+              width: 58px;
+              height: 58px;
+              border-radius: 50%;
+              margin-bottom: 10px;
+            }
+          }
+          
+        }
+      }
+      .searchWindowFooter {
+        text-align: center;
+        padding-top: 30px;
+      }
+    }
+  }
+    
+
+
+
+
+
+
+
+
+
+  .layerBoxNoBg {
+    padding: 30px 0 0 0;
+  }
+  //表单微调 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-group__title {
+    color: #909399;
+  }
+  ::v-deep .el-select {
+    width: 100% !important;
+  }
+
+  /* 添加样式以确保右键菜单的显示 */
+  .el-dropdown {
+    z-index: 2000; /* 确保右键菜单在其他元素之上 */
+  }
 </style>

src/views/complaint/complaintList.vue

@@ -124,7 +124,7 @@
             <el-table-column prop="money" label="涉案标的额"></el-table-column>
             <el-table-column prop="name" label="姓名"></el-table-column>
             <el-table-column prop="mobile" label="电话"></el-table-column>
-            <el-table-column prop="status" label="状态"></el-table-column>
+            <el-table-column prop="status_name" label="状态"></el-table-column>
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
             <el-table-column fixed="right" label="操作" width="120" header-align="center">
               <template slot-scope="scope">

src/views/login/index.vue

@@ -204,7 +204,7 @@ export default {
               if(res.code==0){
                 this.$message({
                   type:'error',
-                  message:"表单项有误，请检查！"
+                  message:res.message
                 })
               }else if(res.code==200){
                 console.log("登录成功，将跳转至详情页面！")
@@ -287,7 +287,7 @@ export default {
                   console.log("单点登录成功，开始启动跳转！")
                   // res.data.token
                   // backurlValue
-                  window.location.href = 'https://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token='+res.data.token;
+                  window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token='+res.data.token;
 
                 }else if(res.code!=0&&res.code!=200){
                   this.$message({

src/views/menu/department.vue

@@ -99,7 +99,7 @@ export default {
 
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
-      tableDivTitle:"角色管理",
+      tableDivTitle:"职能部门管理",
       tableData: [],//列表
       allCount:0,//总条数
       editId:0,//要修改的网站id

src/views/role/components/userAdmin.vue

@@ -72,6 +72,10 @@
           <el-form-item label="手机号：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
           </el-form-item>
+          <el-form-item label="性别：" :label-width="formLabelWidth" prop="gender" class="custom-align-right">
+            <el-radio v-model="form.gender" label="1">男</el-radio>
+            <el-radio v-model="form.gender" label="2">女</el-radio>  
+          </el-form-item>
         </div>
       </el-form>
     </div>  
@@ -116,6 +120,7 @@ export default {
         confirm_password:"",//确认密码
         real_name:"",//真实姓名
         mobile:"",//手机号
+        gender:"1",//性别
       },
       role_idArr:[],//角色id池
       //密码验证
@@ -131,6 +136,7 @@ export default {
         confirm_password: [{ required: true, trigger: 'blur', validator: validatePassword }],
         real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        gender: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       }
     };
   },
@@ -216,6 +222,7 @@ export default {
         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({

src/views/website/WebsiteList.vue

@@ -56,12 +56,12 @@
             <el-table-column prop="city_name" label="网站城市"></el-table-column>
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
             <el-table-column prop="updated_at" label="修改时间"></el-table-column>
-            <el-table-column fixed="right" label="操作" width="280" header-align="center">
+            <el-table-column fixed="right" label="操作" width="240" header-align="center">
               <template slot-scope="scope">
                 <div class="listBtnBox">
                   <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
                   <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>搭建</div>
+                  <!-- <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>搭建</div> -->
                 </div>
                 <!-- <div class="listMainBtn"><i class="el-icon-view"></i>详情</div> -->
                 <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>

src/views/website/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/website/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/website/creatWebsite.vue

@@ -1,57 +1,19 @@
 <template>
   <div class="mainBox">
-    <div class="layerBox">
-      <tableTitle :name="headerTitle"/>
-      <div class="menuTopBox">
-        <div class="menuItem" @click="addModule(1)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          顶部菜单（含登录）
-        </div>
-        <div class="menuItem" @click="addModule(2)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          Logo栏
-        </div>
-        <div class="menuItem" @click="addModule(3)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          导航菜单
-        </div>
-        <div class="menuItem" @click="addModule(4)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          轮播图
-        </div>
-        <div class="menuItem" @click="addModule(5)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          多分类列表
-        </div>
-        <div class="menuItem" @click="addModule(6)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          多图列表
-        </div>
-        <div class="menuItem" @click="addModule(7)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          纯文本列表
-        </div>
-        <div class="menuItem" @click="addModule(8)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          图文列表
-        </div>
-        <div class="menuItem" @click="addModule(9)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          排行榜列表
-        </div>
-        <div class="menuItem" @click="addModule(10)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          友情链接
-        </div>
-        <div class="menuItem" @click="addModule(11)">
-          <img src="@/assets/public/sidebar/default/index.png">
-          纯文本
-        </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="layerBox">
       <tableTitle :name="websiteTitle"/>
-      <!-- 栅格布局 start ---------------------------------------->
       <div class="grid-layout-demo">
         <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
           <grid-item
@@ -62,31 +24,235 @@
             :y="item.y"
             :w="item.w"
             :h="item.h"
+            :is-resizable="false"
           >
-            <div class="grid-item-content">
-              <!-- 模块内容 --> 
-              <div v-if="item.type == 1">
-                111
+            <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>
 
-              {{ item.content }}
-              <button @click="openWindow(item)">编辑</button>
             </div>
           </grid-item>
         </grid-layout>
       </div>
-      <!-- 栅格布局 end ---------------------------------------->
     </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.content" autocomplete="off"></el-input>
-            <input type="hidden" v-model="form.seo_title">
+          <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>
@@ -98,7 +264,6 @@
       </div>
     </el-dialog>
     <!--弹出框 end------------------------------------------------------------>
-
   </div>
 </template>
 
@@ -109,12 +274,15 @@ import '@/styles/global.less';
 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
+    tableTitle,
+    MenuTopBox
   },
   data() {
     return {
@@ -129,6 +297,56 @@ export default {
       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------------------------------------------------------------>
 
@@ -147,20 +365,127 @@ export default {
   methods: {
     //添加模块
     addModule(type) {
-      console.log(type);
-      this.layout.push({
-         i: this.layout.length, 
-         x: 0, 
-         y: 0, 
-         w: 12, 
-         h: 1, 
-         type: type, //1=顶部菜单（含登录） ..
-         content:""});
-    },
-
-
-
+      // 计算当前布局的最大 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) {
@@ -195,35 +520,333 @@ export default {
 </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;
   }
-  .menuTopBox{
+  //菜单 end------------------------------------------------------------> 
+
+  //模块 start------------------------------------------------------------> 
+  .module1Box,.module2Box {
     display: flex;
-    flex-wrap: wrap;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
   }
-  .menuItem{
-    display: flex;
-    align-items: center;
-    border-radius:10px;
-    padding: 5px 10px;
-    cursor: pointer;
+  //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;
-    font-size: 14px;
-    color: #666;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    img {
-      margin-right: 5px;
+    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;
+    //background-color:#f0f2f5;
     padding: 20px;
   }
   .grid-item-content {
@@ -231,8 +854,8 @@ export default {
     align-items: center;
     justify-content: center;
     background-color: #fff;
-    border: 1px solid #d9d9d9;
     height: 100%;
+    overflow: hidden;
   }
   //栅格布局 end------------------------------------------------------------> 
 
@@ -246,6 +869,9 @@ export default {
   ::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>