SOURCE

<div class="popup">
  <div class="popup-title">
    打卡日志
  </div>
  <div class="popup-title-icon">
  </div>
  <div class="popup-content-title">
    申论每天学
  </div>
  <div class="popup-content-desc">
    申论每天学申论每天学申论每天学申论每天学申论每天学
  </div>
  <div class="popup-content-remark">
    写下你的想法
  </div>
  <div class="popup-button-container">
    <div class="popup-title" style="flex:1">
      去完成
    </div>
    <div style="width:70px">
    </div>
    <div class="popup-title" style="flex:1">
      打卡
    </div>
  </div>
</div>

.popup {
  margin-left: 66px;
  margin-right: 66px;
  border: 1px solid red;
}

.popup-title {
  height: 88px;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
  border-radius: 16px;
  background-color: #44b6fe;
}

.popup-title-icon {
  display: flex;
  margin: auto;
  margin-top: 62px;
  /* align-items: center; */
  /* justify-content: center; */
  border: 1px solid blue;
  border-radius: 50%;
  height: 120px;
  width: 120px;
}

.popup-content-title {
  margin-top: 40px;
  font-size: 36px;
  line-height: 36px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
}

.popup-content-desc {
  margin-top: 20px;
  font-size: 28px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
}

.popup-content-remark {
  margin: 50px 44px 0 44px;
  height: 178px;
  border: 1px solid blue;
}

.popup-button-container {
  margin: 60px 64px;
  border: 1px solid blue;
  display: flex;
}