提交

src/styles/mixin.scss

@@ -35,7 +35,6 @@
 .h100{
     height: 100%;
 }
-
 .w100{
     width: 100%;
 }

src/views/zxxx/index.vue

@@ -1,32 +1,54 @@
 <template>
   <div class="content">
 
-
-    <!-- 聊天窗口 -->
-    <div class="chat">
-      <!-- 聊天标题 -->
-      <div class="title">盐城中学全体</div>
-      <!-- 聊天信息 -->
-      <div class="chat-content">
-        <div :class="item.isSlef?'right':'left'" v-for="(item,index) in chatData" :key="index">
-          <img class="left-img" v-if="!item.isSlef" src="@/assets/images/a-3.png" alt="">
-          <img class="left-img" v-if="item.isSlef" src="@/assets/images/a-4.png" alt="">
-          <!-- 动态类 -->
-          <div :class="item.isSlef?'right-chat':'left-chat '">{{item.chatContent}}</div>
+    <div class="chat-box">
+      <div class="chat-left">
+        <div class="flex-row">
+          <input type="text" class="search-input" placeholder="搜索">
+          <button type="button" class="add-icon"></button>
         </div>
+        <ul class="chat-list">
+          <li v-for="(item,index) in chatData" @click="switchMes(item,index)">
+            <div class="shot" :class="item.shot"></div>
+            <div class="s-right">
+              <div class="d-flex flex-between">
+                <h3 class="font-size-16 text-white">{{item.target}}</h3>
+                <div>
+                  <span class="dot-num d-in-block mr10" v-if="item.num > 0">{{item.num}}</span>
+                  <span class="d-in-block s-time">{{item.time}}</span>
+                </div>
+              </div>
+              <h4 class="mt10 s-text text-overflow">{{item.messageList[item.messageList.length-1].message}}</h4>
+            </div>
+          </li>
+        </ul>
       </div>
-      <!-- 提交信息 -->
-      <div class="submit">
-        <!-- 输入框 -->
-        <div style="flex: 1">
-          <el-input v-model="input" @keyup.enter.native="add()" placeholder="发送些内容..." style="flex: 1;"></el-input>
+      <!-- 聊天窗口 -->
+      <div class="chat">
+        <!-- 聊天标题 -->
+        <div class="title">{{curData.target}}</div>
+        <!-- 聊天信息 -->
+        <div class="chat-content">
+          <div :class="item.myMs?'right':'left'" v-for="item in curData.messageList">
+            <img class="left-img" :src="item.user" alt="">
+            <!-- 动态类 -->
+            <div :class="item.isSlef?'right-chat':'left-chat '">{{item.message}}</div>
+          </div>
         </div>
-        <button type="button" class="submit-img" @click="add"></button>
+        <!-- 提交信息 -->
+        <div class="submit">
+          <!-- 输入框 -->
+          <div style="flex: 1">
+            <el-input v-model="input" @keyup.enter.native="add" placeholder="发送些内容..." style="flex: 1;"></el-input>
+          </div>
+          <button type="button" class="submit-img" @click="add"></button>
 
+        </div>
       </div>
     </div>
 
 
+
   </div>
 
 </template>
@@ -41,40 +63,138 @@ export default {
 
       chatData: [
         {
-          chatContent: "早",
-          isSlef: true
+          shot:'c-1',
+          target:'盐城中学全体',
+          num:'8',
+          time:'13:45',
+          messageList:[{
+            user:'/images/a-3.png',
+            message:'明天全校要做核酸',
+            myMs: false,
+          },{
+            user:'/images/a-4.png',
+            message:'几点呢？',
+            myMs: true,
+          },{
+            user:'/images/7.jpg',
+            message:'在哪里做？',
+            myMs: false,
+          },{
+            user:'/images/8.jpg',
+            message:'什么时候结束',
+            myMs: false,
+          }]
         },
         {
-          chatContent: "早",
-          isSlef: false
+          shot:'c-2',
+          target:'盐城市教育者全体',
+          num:'6',
+          time:'12:52',
+          messageList:[{
+            user:'/images/a-3.png',
+            message:'周五下午三点在盐城市教育局开会',
+            myMs: false,
+          },{
+            user:'/images/a-4.png',
+            message:'会议主题是什么',
+            myMs: true,
+          },{
+            user:'/images/7.jpg',
+            message:'具体哪个会议室啊',
+            myMs: false,
+          },{
+            user:'/images/8.jpg',
+            message:'参与人员呢',
+            myMs: false,
+          }]
         },
         {
-          chatContent: "你好",
-          isSlef: true
+          shot:'c-3',
+          target:'张玉',
+          num:'0',
+          time:'10-13',
+          messageList:[{
+            user:'/images/a-3.png',
+            message:'你好，麻烦把三年级的数学成绩表发给我一下',
+            myMs: false,
+          },{
+            user:'/images/a-4.png',
+            message:'好的',
+            myMs: true,
+          },{
+            user:'/images/a-3.png',
+            message:'谢谢',
+            myMs: false,
+          },{
+            user:'/images/a-4.png',
+            message:'发你了，注意查收',
+            myMs: true,
+          }]
         },
         {
-          chatContent: "你好",
-          isSlef: false
+          shot:'c-4',
+          target:'方瑜',
+          num:'0',
+          time:'10-12',
+          messageList:[{
+            user:'/images/8.jpg',
+            message:'你知道明天几点开会吗',
+            myMs: false,
+          },{
+            user:'/images/a-4.png',
+            message:'明天下午三点',
+            myMs: true,
+          },{
+            user:'/images/8.jpg',
+            message:'哦，在哪个会议室啊',
+            myMs: false,
+          },{
+            user:'/images/a-4.png',
+            message:'在三楼大会议室',
+            myMs: true,
+          }]
         },
-      ]
+      ],
+      curData: {
+        shot:'c-1',
+        target:'盐城中学全体',
+        num:'8',
+        time:'13:45',
+        messageList:[{
+          user:'/images/a-3.png',
+          message:'明天全校要做核酸',
+          myMs: false,
+        },{
+          user:'/images/a-4.png',
+          message:'几点呢？',
+          myMs: true,
+        },{
+          user:'/images/7.jpg',
+          message:'在哪里做？',
+          myMs: false,
+        },{
+          user:'/images/8.jpg',
+          message:'什么时候结束',
+          myMs: false,
+        }]
+      },
+      curIndex:0
     }
 
   },
-
-  watch: {
-    chatData: {
-      handler: function () {
-
-      }
-    }
-  },
   methods: {
+    switchMes(item,index) {
+      this.curData = item;
+      this.curIndex = index;
+    },
     add() {
       let msg = {
-        chatContent: this.input,
-        isSlef: true
+        user:'images/a-4.png',
+        message:this.input,
+        myMs: true,
       }
-      this.chatData.push(msg)
+      this.chatData[this.curIndex].messageList.push(msg);
+      this.curData = this.chatData[this.curIndex];
       this.input = ""
     }
   },
@@ -93,7 +213,17 @@ export default {
   border-bottom: 1px solid #e3e7e7;
   padding-left: 25px;
 }
+.chat-box{
+  display: flex;
+  height: 100%;
+}
+.chat-left{
+  width: 320px;
+  background: #363E47;
+  padding: 25px;
+}
 .chat {
+  flex: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -106,6 +236,7 @@ export default {
 .chat-content {
   flex: 1;
   overflow-y: scroll;
+  padding-left: 25px;
 }
 
 .left,
@@ -158,7 +289,78 @@ export default {
   cursor: pointer;
   width: 48px;
   height: 48px;
-  background: #fff url("@/assets/images/submit.png") center no-repeat;
+  background: #fff url("/images/submit.png") center no-repeat;
   background-size: 27px 25px;
 }
+.search-input{
+  width: 225px;
+  height: 28px;
+  border: 0;
+  background: #303841 url("/images/icon-search.png") 10px no-repeat;
+  padding-left: 35px;
+  padding-right: 10px;
+  border-radius: 14px;
+  outline: none;
+  font-size: 14px;
+  color: #fff;
+}
+.add-icon{
+  width: 28px;
+  height: 28px;
+  background: url("/images/icon-add.png") center no-repeat;
+  background-size: 28px 28px;
+  border: 0;
+}
+.chat-list{
+  li{
+    width: 100%;
+    display: flex;
+    margin-top: 25px;
+    cursor: pointer;
+  }
+  .shot{
+    width: 44px;
+    height: 44px;
+    border-radius: 3px;
+    &.c-1{
+      background: url("/images/shot.jpeg") center no-repeat;
+      background-size: 44px 44px;
+    }
+    &.c-2{
+      background: url("/images/9.jpeg") center no-repeat;
+      background-size: 44px 44px;
+    }
+    &.c-3{
+      background: url("/images/7.jpg") center no-repeat;
+      background-size: 44px 44px;
+    }
+    &.c-4{
+      background: url("/images/8.jpg") center no-repeat;
+      background-size: 44px 44px;
+    }
+  }
+  .s-right{
+    flex: 1;
+    margin-left: 15px;
+    width: 0;
+  }
+  .dot-num{
+    width: 14px;
+    height: 14px;
+    background: #f36060;
+    border-radius: 50%;
+    font-size: 12px;
+    color: #fff;
+    text-align: center;
+    line-height: 14px;
+  }
+  .s-time{
+    font-size: 12px;
+    color: #A5B5C1;
+  }
+  .s-text{
+    font-size: 13px;
+    color: #6A7681;
+  }
+}
 </style>