记录一个协议勾选样式

<div class="checkModel">
  <div class="checkBox">
    <input type="checkbox" id="isRead" v-model="isRead" />
    <div class="checkDom"></div>
  </div>
  <label for="isRead" class="checkTxt"
    >已阅读并同意<b @click="$router.push({ name: 'FileFirst' })"
      >《用户服务协议》</b
    >、<b @click="$router.push({ name: 'FileSecond' })"
      >《信息接收同意书》</b
    ></label
  >
</div>

.checkModel {
  display: flex;
  align-items: center;
  justify-content: center;

  .checkBox {
    position: relative;
    -webkit-transform: translateY(-0.02rem);
    margin-right: 0.14rem;
    box-sizing: border-box;
    padding-top: 0.04rem;
    input {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      opacity: 0;
      width: 0.18rem;
      height: 0.18rem;
    }

    .checkDom {
      width: 0.3rem;
      height: 0.3rem;
      position: relative;
      // 未勾选样式
      &::before {
        content: "";
        display: block;
        width: 0.3rem;
        height: 0.3rem;
        background: url(https://vncdn.mobi88.cn/20220119/ct/szjh_qmhhr/images/checkIconNull.png)
          no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    input:checked + .checkDom {
      &::before {
        display: none;
      }
      // 勾选样式
      &::after {
        content: "";
        display: block;
        width: 0.3rem;
        height: 0.3rem;
        background: url(https://vncdn.mobi88.cn/20220119/ct/szjh_qmhhr/images/checkIcon.png)
          no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
        // left: 50%;
        // -webkit-transform: translate(-50%, 0%);
      }
    }
  }
  .checkTxt {
    font-size: 0.22rem;
    font-weight: normal;
    color: #ffffff;
    line-height: 0.3rem;
    white-space: nowrap;
  }
}