.shelfs {
  background-color: #f7f7f7;
  flex-direction: column;
  height: 100%;
  .shelf_title {
    height: 112px;
    background-color: #fff;
    text {
      padding: 0 30px;
      font-size: 36px;
      font-weight: bold;
      color: #000000;
    }
  }
  .shelf {
    margin-top: 30px;
    flex-direction: column;
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
    .shelf-wrap-top {
      height: 200px;
      background: -webkit-linear-gradient(#ed591e, #f5f5f5);
    }
    .shelf-wrap {
      background-color: white;
      border-radius: 20px;
      // border-top: 36px solid #f7f7f7;
      width: 95%;
      margin: 0 auto;
      flex-direction: column;

      .type-bar {
        background-color: #fff;
        padding: 20px;
        .search-bar__wrap {
          flex: 1;
          background-color: #f7f7f7;
          height: 62px;
          padding: 0 14px;
          border-radius: 30px;
          align-items: center;

          image {
            margin-right: 20px;
            width: 36px;
            height: 36px;
          }

          text {
            flex: 1;
            font-size: 24px;
            color: #999;
          }
        }
      }

      .blank_img {
        width: 100%;
        height: 900px;
        align-items: center;
        justify-content: center;
        image {
          width: 500px;
        }
      }
      .type-bar {
        background-color: #fff;

        .type-item {
          flex: 1;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: relative;

          text {
            font-size: 30px;
            color: #999;
            // padding: 34px 0;
          }

          .cur {
            color: #ef5952;
            font-size: 36px;
            font-weight: bold;
          }

          .choose-bar {
            width: 38px;
            height: 4px;
            background-color: #E5401C;
            border-radius: 2px;
            margin-top: 10px;
          }
        }
      }

      .border-bar {
        height: 36px;
        background-color: #f7f7f7;
      }

      .shelf-total {
        padding: 32px 22px;
        justify-content: space-between;
        align-items: center;
        .complete-btn {
          width: 80px;
          height: 35px;
          background-color: #fff;
          border-radius: 20px;
          align-items: center;
          text-align: center;
          color: #ef5952;
          font-size: 25px;
          border: 1px solid #ef5952;
          background-color: #fff;
          margin-bottom: 20px;
        }
        .administration-btn {
          width: 80px;
          height: 35px;
          background-color: #fff;
          border-radius: 20px;
          align-items: center;
          text-align: center;
          color: #ef5952;
          font-size: 25px;
          border: 1px solid #ef5952;
          margin-bottom: 20px;
        }
        text {
          color: #333;
          font-size: 26px;
          margin-bottom: 20px;
        }

        .manager {
          border: 2px solid #ef5952;
          border-radius: 6px;
          background-color: #fff;
          font-size: 26px;
          color: #ef5952;
          width: 88px;
          height: 38px;
          text-align: center;
        }

        &__inRecent {
          padding-bottom: 0;
        }
      }

      .shelf-books__wrap {
        padding: 0 15px;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;

        .book-item__wrap {
          margin: 0 5px;

          .book-del__wrap {
            background-color: rgba(0, 0, 0, 0.4);
            width: 200px;
            height: 264px;
            border-radius: 6px;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            image {
              width: 40px;
            }

            text {
              color: white;
              margin-top: 20px;
            }
          }
        }

        .book-item__add {
          flex-direction: column;

          .add-cover {
            width: 200px;
          }

          text {
            font-size: 24px;
            text-align: center;
            color: #999;
            margin-top: 14px;
          }
        }

        & .m0 {
          margin-right: 0;
        }
      }

      .recent-list {
        padding: 0 22px;
        margin-top: 30px;
        .recent-item {
          z-index: 11;
          padding: 0 0 30px 0;
          border-bottom: 2px solid #f7f7f7;
        }

        .book-info__wrap {
          flex-direction: column;
          margin-left: 30px;
          justify-content: space-between;
          align-items: flex-start;

          // text {
          //   font-size: 26px;
          //   color: #999;
          //   lines: 1;
          //   text-overflow: ellipsis;
          // }

          .shelf-status {
            font-size: 24px;
            color: #ef5952;
            padding: 6px 17px;
            background-color: #f7f7f7;
            border-radius: 24px;
          }
        }
        .book-del__item {
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 100%;
          background-color: rgba(24, 22, 22, 0.6);
          image {
            width: 40px;
          }

          text {
            color: #4d4d4d;
            margin-top: 20px;
          }
        }
      }
      .item_wrap {
        flex-direction: column;
        padding-bottom: 50px;
        .last-read {
          font-size: 24px;
          color: #999999;
          margin-top: 15px;
        }
        .name {
          font-size: 26px;
          color: #333;
          font-weight: 400;
          line-height: 37px;
          margin-top: 15px;
        }
      }
    }
  }
}
