布局先提交一波

src/components/chat.vue

@@ -0,0 +1,123 @@
+<template>
+  <section class="chat">
+    <el-row align="middle">
+      <div class="modelInfo">
+        <img :src="config.model.avatar" alt=""/>
+        <div class="fill mar-l8">
+          <b v-text="config.model.name"/>
+          <div class="desc" v-text="config.model.desc"/>
+        </div>
+      </div>
+      <el-row justify="end" class="fill mar-l8">
+        <div class="clear-icon"/>
+        <!-- todo 聊天操作栏-->
+      </el-row>
+    </el-row>
+    <thinking-bar v-show="loading"/>
+    <chat-content class="fill"/>
+    <chat-input/>
+  </section>
+</template>
+
+<script>
+import ChatContent from "../components/chatContent";
+import ChatInput from "../components/chatInput";
+import ThinkingBar from "../components/thinkingBar";
+
+export default {
+  name: "chat",
+  components: {ChatContent, ChatInput, ThinkingBar},
+  props: {
+    config: {default: () => ({})}
+  },
+  data() {
+    return {
+      loading: true
+    }
+  },
+  methods: {
+    handleResize() {
+      if (window.innerWidth <= 700) {
+        this.$nextTick(() => {
+          document.querySelectorAll('.chat-content')[0].style.height = '93%';
+          this.buttonStatus = false
+          const textareaMsg = document.getElementById("textareaMsg");
+          textareaMsg.style.marginLeft = "0px";
+          this.personInfoSpan = [14, 0, 10];
+          const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+          if (isMobile) {
+            document.querySelectorAll('.chatInputs')[0].style.margin = '0%';
+          } else {
+            document.querySelectorAll('.chatInputs')[0].style.margin = '3%';
+          }
+        });
+      } else {
+        this.$nextTick(() => {
+          document.querySelectorAll('.chat-content')[0].style.height = '88%';
+          this.buttonStatus = true
+          this.personInfoSpan = [1, 17, 6];
+        });
+      }
+    },
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chat {
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .modelInfo {
+    display: flex;
+    align-items: center;
+    line-height: 1.4;
+
+    & > img {
+      border: 2px solid #fff;
+      border-radius: 50%;
+      padding: 4px;
+      width: 45px;
+      height: 45px;
+    }
+
+    b {
+      font-size: 20px;
+    }
+
+    .desc {
+      color: #999;
+      font-size: 14px;
+    }
+  }
+
+  .clear-icon {
+    box-sizing: border-box;
+    height: 40px;
+    background-size: 24px 24px;
+    background-image: url("../assets/clear.svg");
+    background-repeat: no-repeat;
+    background-position: top center;
+    cursor: pointer;
+    opacity: .6;
+    padding-top: 24px;
+
+    &:after {
+      font-size: 12px;
+      content: "清空历史";
+      display: block;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+</style>