<template>
  <div class="classDetail">
    <div>
      <img src="./img/bg.png" alt="">
    </div>

    <div class="title">
      五一假期若出游如何严格做好疫情防控？具体要求来了！
    </div>
    <p class="study_num">23人已学习</p>

    <p class="content">
      7月13日，从“曲靖这十年”系列新闻发布会（法治建设专场）
      获悉，党的十八大以来，曲靖市深入学习贯彻习近平新时代中国特色社会主义思想，坚持以习近平法治思想为根本遵循和行动指南，坚持依法治市、依法执政、依法行政共同推进，法治曲靖、法治政府、法治社会一体建设，统筹推动科学立法、严格执法、公正司法、全民守法，人民群众法治获得感、满意度明显提升，法治曲靖建设蹄疾步稳、铿锵有力，为全市经济社会高质量跨越式发展提供了坚实法治保障。
      中共曲靖市委政法委副书记刘洁介绍，过去十年，曲靖市坚持“固根本、明方向”，全面加强党对法治建设的领导；坚持“立良法、促善治”，持续夯实法治建设根基；坚持“严执法、
      促规范”，稳步推进法治政府建设；坚持“强制约、促公正”，充分彰显社会公平正义；坚持“广普法、重实效”，遵法守法
      观念入脑入心。刘洁称，2019年机构改革后，曲靖市委全面依法治市委员会办公室在市司法局设立，在市委市政府的领导下，曲靖全市司法行政系统围绕“一个统筹、四大职能”，
      制定完善法治曲靖建设3个“1+3”体系，开创了法治建设工作新局面。当前，曲靖以健全行政执法“一方案三清单”为统领，完善制度体系建设，全面推行重大行政决策目录化管理，
      创新推进基层合法性审查全覆盖，行政执法人员全部纳入云南执法人员网上管理系统进行管理，行政复议案件统一由市、县两级人民政府管辖，行政复议体制改革落地落实，政府
      行政行为质量稳步提高，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>

<script>
export default {
  data() {
    return {
      showComment: false,
      showSend: true,
      content: '',

    }
  },
  methods: {
    keyboard(e) {
      console.log(e.detail.height);
    }
  }
}
</script>

<style lang="scss" scoped>
.classDetail {
  .title {
    font-weight: 500;
    font-size: 46px;
    color: #222222;
    padding: 0 32px;
    box-sizing: border-box;
  }

  .study_num {
    margin-top: 16px;
    font-weight: 400;
    font-size: 30px;
    color: #999999;
    padding: 0 32px;
    box-sizing: border-box;
  }

  .content {
    margin-top: 48px;
    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>