.home-wrap { background-color: #F2F2F2; flex-direction: column; // padding: 0px 10px; .home_title { height: 112px; background-color: #BD8757; text { padding: 0 30px; font-size: 36px; color: white; } } .feebar-text{ color: #fff; margin-left: 40px; } .type-wrap_content { // background-color: #61A9C0; padding: 0px 30px; .type-wrap { // background-color: #61A9C0;; margin: 20px 0px 0px 0px; flex-direction: row; .type-item { padding: 0 15px; justify-content: center; align-items: center; flex-direction: column; position: relative; text { font-size: 30px; color: #999999; } .cur { color: #BD8757; font-size: 36px; font-weight: bold; } .choose-bar { width: 38px; height: 4px; background-color: #BD8757; border-radius: 2px; margin-top: 10px; } } } } .free { background-color: #ffffff; width: 100%; padding-top: 10px; .free_warp { margin: 0 auto; } } .entrance_block { background-color: #ffffff; width: 100%; padding: 30px; display: flex; justify-content: space-around; text-align: center; div { image { margin: 0 auto; height: 106px; } } } .type-bar { background-color: #ffffff; padding: 20px; .search-bar__wrap { flex: 1; // background-color: #f7f7f7; background-color: #ffffff; 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; } } } .search-bar { padding: 24px; margin-left: 100px; .search-bar__wrap { flex: 1; background-color: #FFFFFF; // height: 62px; width: 350px; height: 75px; 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; } } } .swipe-bar { height: 290px; // background: linear-gradient(to bottom, #61A9C0 50%, #fff 50%); .swipe-item { // padding: 30px 24px 0px; padding: 0px 30px; .swipe-item__info { flex: 1; flex-direction: column; // padding-right: 32px; // border-radius: 20px; .name { font-size: 32px; color: #333; } .intro { font-size: 26px; color: #666; margin-top: 36px; lines: 4; text-overflow: ellipsis; } .category { font-size: 24px; color: #32a1ff; margin-top: 10px; } } .cover { border-radius: 30px; width: 100%; height: 260px; // flex-basis: 180px; // flex-shrink: 0; // height: 240px; // border-radius: 6px; } } } .book-list__wrap { // padding: 0 24px; padding: 0px 30px; flex-direction: column; .book-list_content { border-radius: 20px; padding: 0 24px; flex-direction: column; background-color: white; .book-list__title { background-color: #fff; padding: 40px 0 30px 0; align-items: center; font-size: 30px; text { color: #333; font-size: 32px; font-weight: 900; } } } } .book-list { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .book-list__multi { flex-direction: column; .book-item { margin-bottom: 30px; } .book-info__multi { flex: 1; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-left: 38px; // margin-bottom: 40px; .name { font-size: 32px; color: #333; lines: 1; text-overflow: ellipsis; } .intro { font-size: 24px; color: #666; lines: 3; text-overflow: ellipsis; margin-top: 36px; line-height: 36px; } } } .book-list__line { justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #f7f7f7; } }