在线消息

package.json

@@ -23,12 +23,14 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.3.2",
     "element-ui": "^2.15.6",
+    "jwchat": "^1.0.11",
     "normalize.css": "^8.0.1",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.0.12",
     "require": "^2.4.20",
     "vue": "^2.6.14",
+    "vue-beautiful-chat": "^2.5.0",
     "vue-router": "^3.5.3",
     "vue-template-compiler": "^2.6.14"
   }

src/main.js

@@ -11,6 +11,11 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)
 
+import Chat from 'vue-beautiful-chat'
+Vue.use(Chat)
+// import { JwChat } from 'jwchat'
+// Vue.use(JwChat)
+
 import { createPinia, PiniaVuePlugin } from 'pinia'
 Vue.use(PiniaVuePlugin)
 

src/views/zxxx/index.vue

@@ -1,13 +1,156 @@
 <template>
-<div>在线消息</div>
+  <div class="content">
+    <!-- 聊天标题 -->
+    <div class="title">盐城中学全体</div>
+
+    <!-- 聊天窗口 -->
+    <div class="chat">
+      <!-- 聊天信息 -->
+      <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>
+      </div>
+      <!-- 提交信息 -->
+      <div class="submit">
+        <!-- 输入框 -->
+        <el-input v-model="input" placeholder="发送些内容..."></el-input>
+        <img class="submit-img" src="@/assets/images/submit.png" alt="" @click="add()">
+      </div>
+    </div>
+
+  </div>
+
 </template>
 
 <script>
 export default {
-  name: "index"
+  name: "index",
+
+  data() {
+    return {
+      input: "",
+
+      chatData: [
+        {
+          chatContent: "早",
+          isSlef: true
+        },
+        {
+          chatContent: "早",
+          isSlef: false
+        },
+        {
+          chatContent: "你好",
+          isSlef: true
+        },
+        {
+          chatContent: "你好",
+          isSlef: false
+        },
+      ]
+    }
+
+  },
+
+  watch: {
+    chatData: {
+      handler: function () {
+
+      }
+    }
+  },
+  methods: {
+    add() {
+      let msg = {
+        chatContent: this.input,
+        isSlef: true
+      }
+      this.chatData.push(msg)
+      this.input = ""
+    }
+  },
+
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.title {
+  height: 55px;
+  line-height: 55px;
+  font-size: 19px;
+  font-family: SourceHanSansCN-Light;
+  text-align: left;
+  color: #363e47;
+  border-bottom: 1px solid #e3e7e7;
+  padding-left: 25px;
+}
+.chat {
+  padding: 20px;
+  height: 390px;
+  display: flex;
+  flex-direction: column;
+}
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.chat-content {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+.left,
+.right {
+  width: 100%;
+  display: flex;
+  margin: 20px 0;
+  position: relative;
+}
+.right {
+  justify-content: flex-end;
+}
+.left-img {
+  float: right;
+  width: 43px;
+  height: 43px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0);
+}
+.left-chat {
+  width: 256px;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 10px 15px;
+  margin-left: 5px;
+}
+.right-chat {
+  float: right;
+  width: 188px;
+  background: #5086ff;
+  border-radius: 10px;
+  padding: 10px 15px;
+  position: absolute;
+  right: 50px;
+}
 
+.submit {
+  height: 48px;
+  position: relative;
+}
+::v-deep .el-input__inner {
+  height: 48px;
+  border: 0;
+}
+.submit-img {
+  width: 27px;
+  height: 25px;
+  position: absolute;
+  top: 11px;
+  right: 30px;
+}
 </style>