布局先提交一波

src/components/chatContent.vue

@@ -0,0 +1,94 @@
+<template>
+  <section class="chatContent" @scroll="onScroll">
+    <div class="chat-wrapper" v-for="item in list" :key="item.id">
+      <div class="chat-friend" v-if="item.uid !== 'jcm'">
+        <div class="chat-text" v-if="item.chatType == 0">
+          <el-row :gutter="20">
+            <el-col :span="2">
+              <svg t="1679666016648" @click="$copy(item.msg, '已复制')" class="icon" viewBox="0 0 1024 1024"
+                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="22" height="22">
+                <path
+                    d="M661.333333 234.666667A64 64 0 0 1 725.333333 298.666667v597.333333a64 64 0 0 1-64 64h-469.333333A64 64 0 0 1 128 896V298.666667a64 64 0 0 1 64-64z m-21.333333 85.333333H213.333333v554.666667h426.666667v-554.666667z m191.829333-256a64 64 0 0 1 63.744 57.856l0.256 6.144v575.701333a42.666667 42.666667 0 0 1-85.034666 4.992l-0.298667-4.992V149.333333H384a42.666667 42.666667 0 0 1-42.368-37.674666L341.333333 106.666667a42.666667 42.666667 0 0 1 37.674667-42.368L384 64h447.829333z"
+                    fill="#909399" p-id="6242"></path>
+              </svg>
+            </el-col>
+            <el-col :span="21">
+            </el-col>
+          </el-row>
+
+          <markdown-it-vue :content="item.msg.trim()"/>
+        </div>
+        <div class="chat-img" v-if="item.chatType == 1">
+          <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
+          <el-image style="border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList" v-else>
+          </el-image>
+        </div>
+        <div class="chat-img" v-if="item.chatType == 2">
+          <div class="word-file">
+            <FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard>
+          </div>
+        </div>
+        <div class="info-time">
+          <img :src="item.headImg" alt=""/>
+          <span>{{ item.name }}</span>
+          <span>{{ item.time }}</span>
+        </div>
+      </div>
+      <div class="chat-me" v-else>
+        <div class="chat-text" v-if="item.chatType == 0">
+          <span style="font-size:16px">{{ item.msg }}</span>
+        </div>
+        <div class="chat-img" v-if="item.chatType == 1">
+          <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
+          <el-image style="max-width: 300px; border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList"
+                    v-else>
+          </el-image>
+        </div>
+        <div class="chat-img" v-if="item.chatType == 2">
+          <div class="word-file">
+            <FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard>
+          </div>
+        </div>
+        <div class="info-time">
+          <span>{{ item.name }}</span>
+          <span>{{ item.time }}</span>
+          <img :src="item.headImg" alt=""/>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "chatContent",
+  data() {
+    return {
+      list:[]
+    }
+  },
+  methods: {
+    onScroll() {
+      const scrollDom = this.$el;
+      const scrollTop = scrollDom.scrollTop;
+      const offsetHeight = scrollDom.offsetHeight;
+      const scrollHeight = scrollDom.scrollHeight;
+      // 当滚动到底部，设置 isAutoScroll 为 true
+      this.isAutoScroll = scrollTop + offsetHeight === scrollHeight;
+    },
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chatContent {
+  background: #323644;
+  border-radius: 4px;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+</style>