.page {
  position: relative;
  .card-list {
    padding: 0 40rpx 200rpx;
    .card {
      border-radius: 24rpx;
      margin-bottom: 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 24rpx;
      border: 2rpx solid #ebecee;
      .photo {
        position: relative;
        width: 100%;
        height: 288rpx;
        flex-shrink: 0;
        border-radius: 24rpx 24rpx 0 0;
        position: relative;
        .photo-img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
        }
        .my-read {
          padding: 14rpx 24rpx;
          position: absolute;
          top: 0;
          left: 0;
          font-size: 28rpx;
          color: rgba(224, 71, 117, 1);
          line-height: 1;
          white-space: nowrap;
          background: linear-gradient(90deg, #e5e9f5 0%, #fde4ec 100%);
          border-radius: 24rpx 0rpx 24rpx 0rpx;
        }
        .money {
          padding: 0 20rpx 0 0;
          position: absolute;
          right: 32rpx;
          bottom: 18rpx;
          background-color: #ffedca;
          font-size: 24rpx;
          color: #f5ad1d;
          line-height: 36rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 24rpx;
          .icon {
            margin-right: 10rpx;
            width: 38rpx;
            height: 36rpx;
          }
        }
      }
      .inner {
        padding: 32rpx 30rpx;
        .title {
          font-size: 32rpx;
          color: #252525;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .content {
          margin-top: 24rpx;
          font-size: 24rpx;
          color: #999999;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .i-footer {
          margin-top: 12rpx;
          display: flex;
          justify-content: flex-end;
          .f-item {
            margin-left: 30rpx;
            font-size: 22rpx;
            color: #9b9ea6;
            .icon {
              margin-right: 5rpx;
              width: 32rpx;
              height: 32rpx;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }

  .more {
    position: fixed;
    bottom: 200rpx;
    right: 0;
    .icon {
      width: 210rpx;
      height: 104rpx;
    }
  }
}