评论滚动

src/project/qujing/AppLegalLearning/classDetail.vue

@@ -24,7 +24,7 @@
 
     <u-popup v-model="showComment" mode="bottom" border-radius="32">
 			<h4 class="message_num">共{{ data.msgCount }}条评论</h4>
-      <div v-if="commentList.length">
+      <div class="comment_box" v-if="commentList.length">
         <div class="comment_card" v-for="item in commentList" :key="item.id">
           <div class="avatar">
             <img :src="item.avatar" alt="" v-if="item.avatar">
@@ -244,51 +244,55 @@ export default {
     color: #333333;
   }
 
-  .comment_card {
-    display: flex;
-    padding: 24px 32px;
-    box-sizing: border-box;
+  .comment_box {
+    width: 100%;
+    max-height: 700px;
+    overflow: scroll;
+    .comment_card {
+      display: flex;
+      padding: 24px 32px;
+      box-sizing: border-box;
 
-    .avatar {
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
+      .avatar {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
 
-      img {
-        width: 100%;
-        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
       }
-    }
 
-    .comment_info {
-      margin-left: 16px;
-      width: calc(100% - 80px);
+      .comment_info {
+        margin-left: 16px;
+        width: calc(100% - 80px);
 
-      .avatar_info {
-        display: flex;
-        justify-content: space-between;
+        .avatar_info {
+          display: flex;
+          justify-content: space-between;
 
-        .avatar_name {
-          font-weight: 500;
-          font-size: 28px;
+          .avatar_name {
+            font-weight: 500;
+            font-size: 28px;
+            color: #333333;
+          }
+          .avatar_time {
+            font-weight: 400;
+            font-size: 26px;
+            color: #999999;
+          }
+        }
+
+        .comm_content {
+          margin-top: 8px;
+          font-weight: 400;
+          font-size: 32rpx;
           color: #333333;
         }
-        .avatar_time {
-          font-weight: 400;
-          font-size: 26px;
-          color: #999999;
-        }
-      }
-
-      .comm_content {
-        margin-top: 8px;
-        font-weight: 400;
-        font-size: 32rpx;
-        color: #333333;
       }
     }
   }
-
   .comm_input_btn {
     width: 100%;
     height: 128px;
@@ -308,6 +312,7 @@ export default {
       color: #666666;
     }
   }
+  
 
   .send_box {
     display: flex;