<template>
  <div class="Watermark1">
    <div class="top">
      <h2>打卡记录6</h2>
      <p>09:45</p>
    </div>
    <div class="info">
      <p>2022.02.25 星期五</p>
      <p>武汉市·绿地蓝海国际A座</p>
      <p>晴 7℃</p>
    </div>
    <div class="text">#这是一条备注信息</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  .Watermark1 {
    * {
      box-sizing: border-box;
    }

    .text {
      min-width: 274px;
      height: 48px;
      line-height: 48px;
      padding: 0 16px;
      font-size: 28px;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    }

    .top {
      width: 184px;
      background: #FEFFFE;
      border-radius: 16px;
      text-align: center;
      overflow: hidden;

      h2 {
        height: 64px;
        line-height: 64px;
        background: #1ABDA6;
        font-size: 34px;
        font-weight: normal;
      }

      p {
        height: 72px;
        line-height: 72px;
        font-weight: 600;
        color: #333333;
        font-size: 48px;
      }
    }

    .info {
      line-height: 40px;
      margin: 32px 0;
      padding-left: 22px;
      border-left: 6px solid #F8BC58;

      p:nth-of-type(2) {
        margin: 8px 0;
      }
    }
  }
</style>
