聊天界面优化

src/views/Service/chat/index.vue

 <template>
   <section>
+    <div class="chat-section">
       <div class="leftDiv">
         <ul class="infinite-list">
           <li class="infinite-list-head">
@@ -47,7 +48,8 @@
             <!--表情-->
             <el-popover placement="top" width="320" trigger="click">
             <span v-for="index in 70" :key="index">
-              <img class="expression-emjio" @click="selectEmjio(index)" :src="require('@/assets/img/emjio/'+index +'.png')"/>
+              <img class="expression-emjio" @click="selectEmjio(index)"
+                   :src="require('@/assets/img/emjio/'+index +'.png')"/>
             </span>
               <i slot="reference" class="iconfont icon-smiling"></i>
             </el-popover>
@@ -65,11 +67,12 @@
           </div>
         </div>
       </div>
+    </div>
   </section>
 </template>
 
 <script>
-  export default {
+export default {
   name: "chat",
   data() {
     return {
@@ -162,7 +165,7 @@
     },
 
     // 时间添加
-      timeAdd(){
+    timeAdd() {
       let msg = {
         sendUser: '',
         acceptUser: '',
@@ -178,7 +181,7 @@
     // 时间判断
     timeJudgment() {
       let length = this.sendMessage.length;
-        if (length){
+      if (length) {
 
       }
 
@@ -213,27 +216,32 @@
     }
 
   }
-  }
+}
 </script>
 
 <style scoped>
-
-  /* 左边的列表 */
-  .leftDiv {
-    width: 200px;
-    height: 600px;
+.chat-section {
+  width: 81%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+/* 左边的列表 */
+.leftDiv {
+  width: 20%;
+  height: 100.5%;
   float: left;
   background-color: #2e2e2e;
-  }
+}
 
-  .infinite-list {
+.infinite-list {
   padding: 0;
   margin: 0;
   color: white;
   list-style-type: none;
-  }
+}
 
-  .infinite-list-head {
+.infinite-list-head {
   height: 50px;
   margin-top: 1px;
   padding: 10px;
@@ -241,9 +249,9 @@
   justify-content: center;
   align-items: center;
   background-color: #2e2e2e;
-  }
+}
 
-  .infinite-list-item {
+.infinite-list-item {
   cursor: pointer; /*鼠标放上变手*/
   height: 50px;
   margin-top: 1px;
@@ -252,145 +260,145 @@
   justify-content: center; /*水平居中*/
   align-items: center; /*垂直居中*/
   background-color: #535353;
-  }
+}
 
-  /* 右边内容 */
-  .chat-div {
-    width: 500px;
-    height: 600px;
+/* 右边内容 */
+.chat-div {
+  width: 79.7%;
+  height: 100%;
   float: left;
   border: solid 1px #a3a3a3;
-  }
+}
 
-  .chat-title {
+.chat-title {
   height: 45px;
   padding-left: 15px;
   display: flex;
   align-items: center;
-  }
+}
 
-  .chat-title span {
+.chat-title span {
   font-size: 20px;
-  }
+}
 
-  /* 右边中间消息展示 */
-  .news {
+/* 右边中间消息展示 */
+.news {
   width: 500px;
-    height: 400px;
+  height: 63%;
   overflow-y: auto;
   overflow-x: hidden;
-  }
+}
 
-  /*隐藏中间的进度条*/
-  .news::-webkit-scrollbar {
+/*隐藏中间的进度条*/
+.news::-webkit-scrollbar {
   display: none;
-  }
+}
 
-  .expression {
+.expression {
   width: 100%;
   height: 30px;
   padding-left: 15px;
-  }
+}
 
-  .expression-emjio {
+.expression-emjio {
   width: 35px;
   height: 35px;
   display: inline-block;
-  }
+}
 
-  .expression i {
+.expression i {
   font-size: 20px;
   color: #7d7d7d;
   margin: 0 8px 0 0;
-  }
+}
 
-  .send-message {
+.send-message {
 
-  }
+}
 
-  .send-textarea {
+.send-textarea {
   margin-left: 5px;
   width: 98%;
-  }
+}
 
-  .send-textarea >>> .el-textarea__inner {
+.send-textarea >>> .el-textarea__inner {
   border: 0;
   resize: none;
-  }
+}
 
-  .send-message span {
+.send-message span {
   font-size: 13px;
   margin: 8px 9px 1px 0;
   float: right;
   display: block;
   color: #aaa9a9;
-  }
+}
 
-  .send-but {
+.send-but {
   margin: 0;
   padding: 0;
   height: 25px;
   width: 50px;
-  }
+}
 
-  .chat-sender {
+.chat-sender {
   clear: both;
   font-size: 80%;
-  }
+}
 
-  /*聊天气泡效果*/
-  .chat-sender div:nth-of-type(1) {
+/*聊天气泡效果*/
+.chat-sender div:nth-of-type(1) {
   float: left;
-  }
+}
 
-  .chat-sender div:nth-of-type(2) {
+.chat-sender div:nth-of-type(2) {
   margin: 0 50px 2px 50px;
   padding: 0px;
   color: #848484;
   font-size: 70%;
   text-align: left;
-  }
+}
 
-  .chat-sender div:nth-of-type(3) {
+.chat-sender div:nth-of-type(3) {
   background-color: #27aa95;
   margin: 0px 150px 10px 55px;
   padding: 10px 10px 10px 10px;
   border-radius: 7px;
   text-indent: -12px;
-  }
+}
 
-  .chat-receiver {
+.chat-receiver {
   clear: both;
   font-size: 80%;
-  }
+}
 
-  .chat-receiver div:nth-of-type(1) {
+.chat-receiver div:nth-of-type(1) {
   float: right;
-  }
+}
 
-  .chat-receiver div:nth-of-type(2) {
+.chat-receiver div:nth-of-type(2) {
   margin: 0px 50px 2px 50px;
   padding: 0px;
   color: #848484;
   font-size: 70%;
   text-align: right;
-  }
+}
 
-  .chat-receiver div:nth-of-type(3) {
+.chat-receiver div:nth-of-type(3) {
   background-color: #b2e281;
   margin: 0px 50px 10px 150px;
   padding: 10px 10px 10px 10px;
   border-radius: 7px;
-  }
+}
 
-  .chat-receiver div:first-child img,
-  .chat-sender div:first-child img {
+.chat-receiver div:first-child img,
+.chat-sender div:first-child img {
   width: 40px;
   height: 40px;
   /*border-radius: 10%;*/
-  }
+}
 
-  .chat-left_triangle {
+.chat-left_triangle {
   height: 0px;
   width: 0px;
   border-width: 6px;
@@ -399,9 +407,9 @@
   position: relative;
   left: -22px;
   top: 3px;
-  }
+}
 
-  .chat-right_triangle {
+.chat-right_triangle {
   height: 0px;
   width: 0px;
   border-width: 6px;
@@ -410,28 +418,28 @@
   position: relative;
   right: -22px;
   top: 3px;
-  }
+}
 
-  .chat-notice {
+.chat-notice {
   clear: both;
   font-size: 70%;
   color: white;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 15px;
-  }
+}
 
-  .chat-notice span {
+.chat-notice span {
   background-color: #cecece;
   line-height: 25px;
   border-radius: 5px;
   padding: 5px 10px;
-  }
+}
 
-  .emjio-img{
+.emjio-img {
   width: 30px;
   height: 30px;
   margin-bottom: -8px;
-  }
+}
 
 </style>

src/views/system/stuClass/index.vue

@@ -2,15 +2,17 @@
   <div>
     <section>
       <el-row class="title-add">
-        <el-col :span="17">
-          <el-button type="primary" icon="el-icon-plus" @click="addStu">新增</el-button>
+        <el-col :span="15">
+          <el-button type="primary" icon="el-icon-plus" @click="addStu">新增班级</el-button>
         </el-col>
         <!--搜索条件-->
         <el-col :span="4">
           <el-input v-model="stuName" placeholder="请输入名称" clearable></el-input>
         </el-col>
         <el-col :span="3">
-          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+          <el-button type="primary" icon="el-icon-search" style="margin-left: 15px" @click="getList">查询</el-button>
+        </el-col>
+        <el-col :span="2">
           <el-button type="success" icon="el-icon-circle-close" @click="cleanUp">清除</el-button>
         </el-col>
       </el-row>
@@ -112,7 +114,7 @@
 </template>
 
 <script>
-  export default {
+export default {
   name: "stuClass",
   data() {
     return {
@@ -295,15 +297,15 @@
       this.sign = value;
     },
   }
-  }
+}
 </script>
 
 <style scoped>
-  .title-add {
+.title-add {
   margin: 10px 10px 10px 0;
-  }
+}
 
-  .bottom-page {
+.bottom-page {
   margin-top: 25px;
-  }
+}
 </style>

src/views/system/stuMenu/index.vue

@@ -2,15 +2,17 @@
   <div>
     <section>
       <el-row class="title-add">
-        <el-col :span="17">
+        <el-col :span="16">
           <el-button type="primary" icon="el-icon-plus" @click="addMenu">新增菜单</el-button>
         </el-col>
         <!--搜索条件-->
         <el-col :span="4">
           <el-input v-model="menuName" placeholder="请输入菜单名称" clearable></el-input>
         </el-col>
-        <el-col :span="3">
-          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-col :span="2">
+          <el-button type="primary" icon="el-icon-search" style="margin-left: 15px" @click="getList">查询</el-button>
+        </el-col>
+        <el-col :span="2">
           <el-button type="success" icon="el-icon-circle-close" @click="cleanUp">清除</el-button>
         </el-col>
       </el-row>
@@ -62,18 +64,22 @@
     </section>
 
     <!--新增/编辑模态框-->
-    <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible" :before-close="handleDialogClose">
-      <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
+    <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
+               :before-close="handleDialogClose">
+      <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules"
+               class="form">
         <el-row>
           <el-col :span="10">
             <el-form-item prop="name" label="菜单名称：" :label-width="formLabelWidth">
-              <el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text" autosize></el-input>
+              <el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text"
+                        autosize></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item prop="pid" label="父级：" :label-width="formLabelWidth">
               <el-select v-model="addAndEditFormData.pid" placeholder="请选择父级菜单" style="width:100%" clearable>
-                <el-option :value="pidTemp.id" :label="pidTemp.name" style="height:150px;overflow: auto;background-color:#fff">
+                <el-option :value="pidTemp.id" :label="pidTemp.name"
+                           style="height:150px;overflow: auto;background-color:#fff">
                   <el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                 </el-option>
               </el-select>
@@ -81,10 +87,12 @@
           </el-col>
         </el-row>
         <el-form-item prop="code" label="权限code：" :label-width="formLabelWidth">
-          <el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:90%" type="text" autosize></el-input>
+          <el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:90%" type="text"
+                    autosize></el-input>
         </el-form-item>
         <el-form-item prop="url" label="页面url：" :label-width="formLabelWidth">
-          <el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:90%" type="text" autosize></el-input>
+          <el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:90%" type="text"
+                    autosize></el-input>
         </el-form-item>
         <el-row>
           <el-col :span="10">
@@ -98,7 +106,8 @@
           </el-col>
           <el-col :span="10">
             <el-form-item prop="isVisible" label="是否启用：" :label-width="formLabelWidth">
-              <el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
+              <el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66"
+                         inactive-color="#ff4949"></el-switch>
             </el-form-item>
           </el-col>
         </el-row>
@@ -180,14 +189,14 @@ export default {
         id: '11',
         name: '1'
       },
-      iconData:["el-icon-delete-solid","el-icon-delete","el-icon-s-tools","el-icon-setting","el-icon-user-solid","el-icon-user","el-icon-phone","el-icon-phone-outline","el-icon-star-on",
-        "el-icon-star-off","el-icon-s-goods","el-icon-goods","el-icon-warning","el-icon-warning-outline","el-icon-question","el-icon-info","el-icon-remove","el-icon-circle-plus","el-icon-success",
-        "el-icon-error","el-icon-zoom-in","el-icon-zoom-out","el-icon-remove-outline","el-icon-circle-plus-outline","el-icon-circle-check","el-icon-circle-close","el-icon-s-help",
-        "el-icon-help","el-icon-picture","el-icon-picture-outline","el-icon-picture-outline-round","el-icon-upload","el-icon-camera-solid","el-icon-camera","el-icon-video-camera-solid","el-icon-video-camera",
-        "el-icon-message-solid","el-icon-bell","el-icon-s-cooperation","el-icon-s-order","el-icon-s-platform","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion",
-        "el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-s-shop","el-icon-s-marketing","el-icon-s-flag","el-icon-s-comment",
-        "el-icon-s-finance","el-icon-s-claim","el-icon-s-custom","el-icon-s-opportunity","el-icon-s-data","el-icon-s-check","el-icon-s-grid","el-icon-menu","el-icon-folder","el-icon-folder-opened",
-        "el-icon-folder-add","el-icon-folder-remove","el-icon-folder-delete","el-icon-folder-checked","el-icon-monitor","el-icon-coin"
+      iconData: ["el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user", "el-icon-phone", "el-icon-phone-outline", "el-icon-star-on",
+        "el-icon-star-off", "el-icon-s-goods", "el-icon-goods", "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success",
+        "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help",
+        "el-icon-help", "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload", "el-icon-camera-solid", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera",
+        "el-icon-message-solid", "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion",
+        "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment",
+        "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-folder", "el-icon-folder-opened",
+        "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-monitor", "el-icon-coin"
       ]
     }
   },
@@ -197,7 +206,7 @@ export default {
   methods: {
     getList() {
       // 加载表格数据
-      this.api.getApi("/menu/get?page="+this.page+"&limit="+this.limit+"&name=" + this.menuName).then(res => {
+      this.api.getApi("/menu/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.menuName).then(res => {
         this.tableData = res.data.list;
         this.total = res.data.total;
         this.page = res.data.pageNum;
@@ -218,7 +227,7 @@ export default {
     },
 
     // 清除
-    cleanUp(){
+    cleanUp() {
       this.menuName = '';
       this.getList();
     },
@@ -229,7 +238,7 @@ export default {
     },
 
     // 选择icon图标
-    getIcon(value){
+    getIcon(value) {
       this.addAndEditFormData.iconImg = value;
     },
 
@@ -245,10 +254,10 @@ export default {
       await this.api.getApi("/menu/get/treeMenu").then(res => {
         this.pidData = res.data;
         // pid不为空时候去给pidTemp设置相应数值
-        if (pid !== ''){
-          for (let i = 0;i<res.data.length;i++) {
+        if (pid !== '') {
+          for (let i = 0; i < res.data.length; i++) {
             let temp = res.data[i];
-              if (temp.id === pid){
+            if (temp.id === pid) {
               this.pidTemp.id = temp.id;
               this.pidTemp.name = temp.name;
               return;
@@ -262,15 +271,15 @@ export default {
     },
 
     // 查找
-    findPid(data,pid){
-      for (let i = 0;i<data.length;i++){
+    findPid(data, pid) {
+      for (let i = 0; i < data.length; i++) {
         let temp = data[i];
-        if (temp.id === pid){
+        if (temp.id === pid) {
           this.pidTemp.id = temp.id;
           this.pidTemp.name = temp.name;
           return;
         }
-        if (temp.child !== undefined){
+        if (temp.child !== undefined) {
           this.findPid(temp.child, pid);
         }
       }
@@ -327,7 +336,7 @@ export default {
         if (valid) {
           let formData = this.addAndEditFormData;
           if (this.isEditable) {
-            if (formData.id === formData.pid){
+            if (formData.id === formData.pid) {
               this.$message.error('出现错误，父级不可以是自己');
               return;
             }
@@ -368,7 +377,7 @@ export default {
   margin: 10px 10px 10px 0;
 }
 
-.bottom-page{
+.bottom-page {
   margin-top: 25px;
 }
 
@@ -376,7 +385,7 @@ export default {
   padding: 12px 7px;
 }
 
-.icon-img{
+.icon-img {
   position: absolute;
   right: 190px;
   bottom: 20px;