考试和问卷弹窗

src/components/messageList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="message-list">
+    <div
+      v-for="item in messageList"
+      :key="item.id"
+      class="message-row"
+      :style="item.isMe ? `flex-direction: row-reverse;` : ''"
+    >
+      <div class="avatar">
+        {{ item.account[0] }}
+      </div>
+
+      <div class="message-item">
+        <div class="sender" :style="item.isMe ? `text-align: right;` : ''">
+          {{ item.account }}
+        </div>
+        <div
+          class="text"
+          :style="item.isMe ? `background-color: #89d961;` : ``"
+          v-html="item.msg"
+        ></div>
+        <div class="time">{{ item.time }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup name="messageList">
+import { toRefs } from "vue";
+
+const props = defineProps({
+  messageList: {
+    type: Array,
+    default: [],
+  },
+});
+const { messageList } = toRefs(props);
+</script>
+
+<style scoped lang="scss">
+.message-list {
+  background-color: #f5f5f5;
+  padding: 20px;
+  min-height: 100px;
+  margin-bottom: 20px;
+  border-radius: 12px;
+}
+.message-row {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+  .avatar {
+    width: 40px;
+    height: 40px;
+    background-color: #bcbcbc;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    font-weight: 700;
+    font-size: 24px;
+  }
+  .message-item {
+    margin: 0 16px 0;
+    .sender {
+      font-size: 12px;
+      color: #333;
+    }
+    .text {
+      margin: 3px 0 3px;
+      padding: 10px;
+      background-color: #fff;
+      border-radius: 10px;
+      font-size: 16px;
+    }
+    .time {
+      font-size: 12px;
+      text-align: right;
+      color: #333;
+    }
+  }
+}
+</style>