评论

src/project/qujing/AppLegalLearning/classDetail.vue

@@ -19,6 +19,52 @@
       创新推进基层合法性审查全覆盖，行政执法人员全部纳入云南执法人员网上管理系统进行管理，行政复议案件统一由市、县两级人民政府管辖，行政复议体制改革落地落实，政府
       行政行为质量稳步提高，2022年上半年市级法院行政案件行政机关负责人出庭应诉率达100%。刘洁指出，全民守法是法治社会的基础工程。曲靖紧跟新时代，在针对性和实效性上下功夫，不断提升全市公民法治意识和法治素养，使法治成为社会共识和基本准则。曲靖按照“覆盖城乡、功能完善、便捷高效、群众满意”的目标，深化公共法律服务体系建设，推动实现市县乡村四级公共法律服务实体平台全覆盖。
     </p>
+
+    <div class="btn_box">
+      <div class="input_btn" @click="showSend = true">我来说两句...</div>
+      <div class="comment"  @click="showComment = true">
+        <img src="./img/message.png" alt="">
+        <div class="comm_num">16</div>
+      </div>
+    </div>
+
+    <u-popup v-model="showComment" mode="bottom" border-radius="32">
+			<h4 class="message_num">共16条评论</h4>
+      <div class="comment_card">
+        <div class="avatar">
+          <img src="../../../static/img/avatar.png" alt="">
+        </div>
+        <div class="comment_info">
+          <div class="avatar_info">
+            <div class="avatar_name">徐逸凡</div>
+            <div class="avatar_time">9小时前</div>
+          </div>
+          <div class="comm_content">中央精神的重要讲话为我们的前进指明了方向。</div>
+        </div>
+      </div>
+      <div class="comm_input_btn">
+        <div>我来说两句...</div>
+      </div>
+		</u-popup>
+
+    <u-popup v-model="showSend" mode="bottom" border-radius="32">
+			<div class="send_box">
+        <div class="text">
+          <textarea
+              @blur="height = 0"
+              placeholder-style="color: #999;font-size: 16px;"
+              v-model="content"
+              :cursor-spacing="40"
+              placeholder="我来说两句..."
+              @keyboardheightchange="keyboard">
+          </textarea>
+        </div>
+        <div class="send_btn">发送</div>
+      </div>
+		</u-popup>
+
+
+
   </div>
 </template>
 
@@ -26,11 +72,16 @@
 export default {
   data() {
     return {
+      showComment: false,
+      showSend: true,
+      content: '',
 
     }
   },
   methods: {
-
+    keyboard(e) {
+      console.log(e.detail.height);
+    }
   }
 }
 </script>
@@ -59,5 +110,150 @@ export default {
     padding: 0 32px;
     box-sizing: border-box;
   }
+
+  .btn_box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 128px;
+    background: #fff;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .input_btn {
+      width: 87%;
+      height: 80px;
+      line-height: 80px;
+      padding-left: 32px;
+      box-sizing: border-box;
+      background: #F4F5FA;
+      border-radius: 44px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #666666;
+    }
+
+    .comment {
+      position: relative;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+
+      .comm_num {
+        position: absolute;
+        left: 34px;
+        top: -10px;
+        background: #FFF;
+        color: #E23C3C;
+        font-weight: 600;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .message_num {
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #333333;
+  }
+
+  .comment_card {
+    display: flex;
+    padding: 24px 32px;
+    box-sizing: border-box;
+
+    .avatar {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .comment_info {
+      margin-left: 16px;
+      .avatar_info {
+        display: flex;
+        justify-content: space-between;
+
+        .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;
+      }
+    }
+  }
+
+  .comm_input_btn {
+    width: 100%;
+    height: 128px;
+    background: #fff;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    div {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      padding-left: 32px;
+      box-sizing: border-box;
+      background: #F4F5FA;
+      border-radius: 44px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #666666;
+    }
+  }
+
+  .send_box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px;
+    box-sizing: border-box;
+    .text {
+      textarea { 
+        background: #F4F5FA;
+        border-radius: 16px;
+        padding: 16px;
+        box-sizing: border-box;
+        height: 128px;
+        width: 80vw;
+      }
+    }
+    .send_btn {
+      width: 80px;
+      height: 80px;
+      line-height: 80px;
+      text-align: right;
+      font-weight: 500;
+      font-size: 34rpx;
+      color: #2D7DFF;
+    }
+  }
 }
 </style>