xinda-miniprogram/src/patient/pages/familyScan/index.scss

.page {
  padding-bottom: 80rpx;
  box-sizing: border-box;
  position: relative;
  height: 100vh;
  .bg {
    width: 100%;
    height: 100vh;
    filter: blur(5rpx);
  }
  .banner {
    position: absolute;
    top: 0;
    left: 0;
    padding: 223rpx 69rpx 64rpx;
    .center {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      > view:not(:last-of-type),
      > image {
        margin-right: 42rpx;
      }
      .icon {
        width: 127rpx;
        height: 142rpx;
      }
      .content {
        .title {
          font-size: 48rpx;
          color: #ffffff;
          font-weight: bold;
          white-space: nowrap;
        }
        .en-title {
          margin-top: 20rpx;
          font-size: 36rpx;
          color: #fff;
        }
      }
    }
  }

  .page-container {
    position: absolute;
    width: 100vw;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 76vh;
    padding: 86rpx 60rpx;
    box-sizing: border-box;
    border-radius: 48rpx 48rpx 0 0;
    box-shadow: 0 -10rpx 20rpx #afb7cb;
    background-color: #fff;
    .error {
      text-align: center;
      .icon {
        width: 256rpx;
        height: 256rpx;
      }
      .beyond {
        margin-top: 66rpx;
        font-size: 32rpx;
        color: #495069;
        font-weight: bold;
      }
      .repeat {
        @extend .beyond;
      }
      .unbind {
        margin-top: 32rpx;
        padding: 0 60rpx;
        .tip {
          font-size: 36rpx;
          font-weight: bold;
          color: #e04775;
        }
        .content {
          margin-top: 30rpx;
          font-size: 32rpx;
          color: #afb7cb;
          line-height: 1.5;
          .blob {
            font-weight: bold;
          }
        }
        .sure {
          margin-top: 60rpx;
          font-size: 36rpx;
          color: #e04775;
          font-weight: bold;
        }
      }
    }
    .identity-wrapper {
      .title {
        font-size: 36rpx;
        color: #495069;
        text-align: center;
        font-weight: bold;
      }
      .identity {
        margin-top: 39rpx;
        display: flex;
        align-items: center;
        > view:not(:last-of-type),
        > image {
          margin-right: 24rpx;
        }
        .item {
          padding: 42rpx;
          flex: 1;
          text-align: center;
          border-radius: 12rpx;
          background-color: #f9f7fa;
          .icon {
            width: 122rpx;
            height: 106rpx;
          }
          .icon-active {
            display: none;
            width: 122rpx;
            height: 106rpx;
          }
          .name {
            margin-top: 14rpx;
            font-size: 32rpx;
            color: #afb7cb;
          }
        }
        .active {
          .name {
            color: #e04775;
          }
          .icon {
            display: none;
          }
          .icon-active {
            display: inline-block;
          }
        }
      }
      .title-second {
        margin-top: 84rpx;
      }
      .relation {
        margin-top: 37rpx;
        display: flex;
        align-items: center;
        > view:not(:last-of-type),
        > image {
          margin-right: 18rpx;
        }
        .item {
          flex: 1;
          padding: 51rpx 6rpx;
          text-align: center;
          border-radius: 12rpx;
          font-size: 28rpx;
          color: #e04775;
          font-weight: bold;
          background-color: #f9f7fa;
        }
        .active {
          color: #fff;
          background-color: #e04775;
        }
      }
    }
    .footer {
      position: fixed;
      left: 0;
      padding: 0 48rpx;
      bottom: 78rpx;
      width: 100%;
      box-sizing: border-box;
      margin-top: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > view:not(:last-of-type),
      > button:not(:last-of-type),
      > image {
        margin-right: 30rpx;
      }

      .cancel,
      .submit {
        flex: 1;
        font-size: 36rpx;
        font-weight: bold;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        border-radius: 40rpx;
      }

      .cancel {
        color: #fff;
        background-color: #afb7cb;
      }

      .submit {
        color: #fff;
        background-color: #e04775;
      }
    }
  }
}