消息样式修改

src/views/teamDetail/componentCourse/message-box.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="box" :class="{teacher: item.isTeacher}">
+    <span class="name">{{item.userName}}</span>
+    <div class="container">
+      <span class="time">{{item.createTime}}</span>
+      <div v-if="item.msgType === 'TXT'" class="content">{{item.content}}</div>
+      <div v-if="item.msgType === 'IMG'" class="content">
+        <el-image
+          style="width: 100px; height: 100px"
+          :src="item.content"
+          fit="cover"
+          :preview-src-list="[item.content]">
+        </el-image>
+      </div>
+      <div v-if="item.msgType === 'VC'" class="content">
+        <audio controls
+          style="width: 240px"
+          :src="item.content"
+          ref="dialogVideo">您的浏览器不支持音频播放</audio>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'message-box',
+  props: ['item'],
+  mounted() {
+    console.log({...this.item})
+  }
+}
+</script>
+<style lang="less" scoped>
+  .box{
+    display: flex;
+    margin-top: 10px;
+    &.teacher{
+      flex-direction: row-reverse;
+      >.name{
+        margin-left: 10px;
+        margin-right: 0px;
+      }
+      .container{
+        max-width: 80%;
+        .content{
+          color: #fff;
+          background-color: #13817A;
+          &::before{
+            border: 10px solid #13817A;
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-right-color: transparent;
+            left: auto;
+            right: -18px;
+            top: 8px;
+          }
+        }
+      }
+    }
+    >.name{
+      margin: 27px 10px;
+      margin-left: 0;
+    }
+    .container{
+      .time{
+        display: block;
+        margin-bottom: 3px;
+        font-size: 12px;
+      }
+      .content{
+        position: relative;
+        background-color: #D1D5DB;
+        padding: 10px;
+        border-radius: 5px;
+        &::before{
+          width: 0;
+          height: 0;
+          border: 10px solid #D1D5DB;
+          border-top-color: transparent;
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+          content: '';
+          left: -18px;
+          top: 8px;
+          position: absolute;
+        }
+      }
+    }
+  }
+</style>

src/views/teamDetail/componentCourse/studentWork.vue

@@ -132,10 +132,14 @@
         <div>
             <p class="workContainer">作业回复内容:</p>
         <div class="msgWrap">
-        
+
           <div :class="activeCommit.length>0?'':'flex'">
-            <div v-if="activeCommit.length>0"
-                 class="msgLi"
+            <message-box
+              v-for='(msg,index) in activeCommit'
+              :key="index"
+              :item="msg"
+            ></message-box>
+            <!-- <div class="msgLi"
                  v-for='(msg,index) in activeCommit'
                  :key="index">
               <div class="info">
@@ -157,7 +161,7 @@
                      controls
                      :src="msg.content"
                      ref="dialogVideo">您的浏览器不支持音频播放</audio>
-            </div>
+            </div> -->
             <p class="nomore"
                v-if="activeCommit.length<=0">暂无回复内容</p>
           </div>
@@ -178,12 +182,14 @@ import {
   sumStudentAttendance,
   getCourseScheduleHomework
 } from "@/api/buildTeam";
+import messageBox from './message-box'
 import { findStudentHomeworkComments } from "@/api/operateManager";
 export default {
   props: ["courseScheduleId"],
   components: {
     pagination, Swiper,
-    SwiperSlide
+    SwiperSlide,
+    'message-box': messageBox
   },
   directives: {
     swiper: directive
@@ -373,7 +379,7 @@ export default {
     }
 
   }
- 
+
 }
  .workTitle {
     padding-left: 25px;
@@ -384,4 +390,4 @@ export default {
   .workContainer {
     margin-bottom:20px ;
   }
-</style>
+</style>