/* 虚拟商品-查看券码 */

.page-view-voucher-code {
  background: #f4f4f4;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  image {
    width: 100%;
    height: 100%;
  }
  .weak {
    color: #999;
  }
  .card-vouchers {
    padding: 30rpx;
    background: #fff;
    font-size: 24rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.05);
    .item {
      position: relative;
      padding-bottom: 30rpx;
      border-bottom: 2rpx dashed #ddd;
      &::before,
      &::after {
        position: absolute;
        bottom: -20rpx;
        display: block;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #f4f4f4;
        content: " ";
        font-size: 0;
      }
      &::before {
        left: -56rpx;
      }
      &::after {
        right: -56rpx;
      }
    }
    &.card-model {
      .top-half {
        display: block;
        min-height: 200rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        .prod-name {
          color: #333333;
          font-weight: bold;
          font-size: 30rpx;
          margin-bottom: 20rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .total-num {
          margin-bottom: 10rpx;
        }
        .expiry-date {
          display: flex;
          align-items: flex-start;
          margin-bottom: 10rpx;
          .expiry-date .lf {
            white-space: nowrap;
          }
          .rg text {
            word-wrap: break-word;
          }
        }
      }
      .bottom-half {
        position: relative;
        display: block;
        min-height: 600rpx;
        margin-top: 60rpx;
        margin-bottom: 20rpx;
        .bar-code {
          font-size: 0;
          margin: auto;
          width: 610rpx;
          height: 150rpx;
          :deep(uni-image),
          .tki-barcode image {
            max-width: 100%;
          }
        }
        .code-number {
          margin-top: 30rpx;
          text-align: center;
          font-size: 28rpx;
        }
        .tips {
          margin-top: 20rpx;
          text-align: center;
          font-size: 22rpx;
        }
        .qr-code .qicode-tips {
          color: #005ea7;
          text-align: center;
        }
        .code {
          width: 400rpx;
          height: 400rpx;
          margin: 50rpx auto 30rpx;
        }
        .qrcode-img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  /* 券码列表 */
 .code-list {
    padding: 30rpx;
    background: #fff;
    font-size: 24rpx;
    margin-top: 20rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.05);
    .code-item{
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        box-sizing: border-box;
      }
      .text-list {
        max-height: 470rpx;
        overflow-y: auto;
      }
      .text {
        line-height: 1.5em;
        &:not(:last-child) {
          margin-bottom: 12rpx;
        }
        .used-code {
          color: #999;
          .code {
            text-decoration: line-through;
          }
        }
        .right {
          float: right;
          color: #999;
        }
      }
      
    }
  }
}
