html body{ position: absolute; } .main{ padding: 0 0 80px; } .libraryContainer{ width: 100%; height: 73%; /*background-color: #f3f3f3;*/ } .container-library{ height: 100%; position: relative; } .libraryList{ height: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; /* align-items: center; */ } .libraryList .libraryImg{ padding-right: 5%; padding-top: 5%; } .libraryList .list{ padding-top: 2%; padding-bottom: 3%; display: flex; flex-direction: column; height: 100%; max-width: 1000px; width: 100%; } .libraryList .list .libraryItem,.libraryList .list .libraryItem2{ height: 250px; /*display: flex;*/ margin-bottom: 60px; max-width: 1000px; width: 100%; background: #FFFFFF; box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.06); border-radius: 10px; overflow: hidden; border: solid 1px #245201; } .libraryList .list .libraryItem { /*border-radius: 18px;*/ } .libraryList .list .libraryItem2 { /*border-radius: 18px;*/ } .libraryList .list .libraryItem .leftItem, .libraryList .list .libraryItem2 .rightItem{ padding: 0; } .libraryList .list .libraryItem .leftItem img{ width: 100%; /* height: 200px; */ height: 100%; object-fit: cover; /*border-radius: 18px;*/ } .libraryList .list .libraryItem .rightItem{ margin: 40px auto; line-height: 270px; } .libraryList .list .libraryItem .rightItem .top{ display: flex; margin: 10px; } .libraryList .list .libraryItem .rightItem .top img:nth-of-type(2){ /*margin: 10px;*/ } .libraryList .list .libraryItem .rightItem .bottom{ margin: 16px; } .libraryList .list .libraryItem .rightItem .bottom span{ width: 309px; height: 47px; font-size: 16px; font-family: Microsoft YaHei UI; font-weight: 400; color: #2B2B33; line-height: 30px; display: block; } .libraryList .list .libraryItem2 .rightItem img{ width: 100%; /* height: 200px; */ height: 100%; object-fit: cover; /*border-radius: 18px;*/ } .libraryList .list .libraryItem2 .leftItem{ padding-left: 20px; margin: 40px auto; } .libraryList .list .libraryItem2 .leftItem .top{ display: flex; margin: 10px; } .libraryList .list .libraryItem2 .leftItem .top img:nth-of-type(2){ /*margin: 10px;*/ } .libraryList .list .libraryItem2 .leftItem .bottom{ margin: 16px; } .libraryList .list .libraryItem2 .leftItem .bottom span{ width: 309px; height: 47px; font-size: 16px; font-family: Microsoft YaHei UI; font-weight: 400; color: #2B2B33; line-height: 30px; display: block; } /*缁忓緥璁?/ .theoryContainer{ /*background-color: #f3f3f3;*/ height: auto; } .theoryContainer .List{ display: flex; align-items: center; margin: 0 auto; width: 100%; width: 1100px; flex-wrap: wrap; justify-content: flex-start; margin: 28px auto; /* position: relative; left: 70%; transform: translate(-50%, 0); */ } .theoryContainer .List .val{ margin-bottom: 15px; } .theoryContainer .List .val .item{ height: auto; background-color: #ffffff; padding: 10px; margin: 9px; border-radius: 12px; overflow: hidden; margin: 0 10px; width: 250px; box-shadow: 0px 7px 16px 0px rgb(0 0 0 / 4%); display: flex; flex-direction: column; } .theoryContainer .top{ display: flex; justify-content: center; padding-top: 50px; } .theoryContainer .List .itemImg { /*width: 100%;*/ /*overflow: hidden;*/ margin-bottom: 10px; } .theoryContainer .List .itemImg img{ width: 100%; height: 100%; text-align: center; } .theoryContainer .List .itemVal p{ font-size: 18px; font-weight: 600; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .theoryContainer .List .itemVal span{ color: #aaaaaa; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; height: 28px; display: inline-block; line-height: 28px; } /*璇︽儏*/ .bookDetailContainel{ width: 100%; /*background-color: #f3f3f3;*/ border-radius: 6px; display: flex; justify-content: center; } .bookDetail a:nth-of-type(1){ position: absolute; top: 16px; right: 16px; background-image: url("../../../image/library/top.png"); width: 106px; height: 105px; } .bookDetail a:nth-of-type(2){ position: absolute; left: 16px; bottom: 16px; background-image: url("../../../image/library/bottom.png"); width: 106px; height: 105px; } .bookDetail{ height:auto; width: 100%; max-width: 1200px; background-color: #ffffff; margin-top: 40px; border-radius: 16px; display: flex; position: relative; padding: 40px 40px 80px; box-shadow: 0px 7px 16px 0px rgba(0,0,0,0.04); flex-wrap: wrap; } .line-text{ width: 100%; max-width: 1200px; padding: 40px 20px; font-size: 18px; font-family: Microsoft YaHei UI; font-weight: 400; color: #333333; box-sizing: border-box; margin: 0 auto !important; } .bookmarks{ width: 100%; max-width: 1200px; margin: 0 auto; } .bookDetail .bookDetailImg img{ width: 170px; height: 300px; margin: 46px auto 0; } .bookDetail div:nth-of-type(2){ margin-top: 46px; padding: 0 36px 57px 36px; } .bookDetail div:nth-of-type(2) span:nth-of-type(1){ font-size: 22px; font-weight: 800; } .bookDetail div:nth-of-type(2) p:nth-of-type(1){ padding-top: 10px; } .bookmarks{ height: auto; /*background-color: #f3f3f3;*/ position: relative; display: flex; justify-content: center; flex-wrap: wrap; } .bookmarks p { position: absolute; left: 20%; font-size: 24px; font-family: Microsoft YaHei UI; font-weight: 400; color: #333333; } .icon{ margin-right: 12px; } .bookmarks .item{ box-sizing: border-box; cursor: pointer; height: auto; background-color: #ffffff; display: flex; align-items: center; justify-content: flex-start; padding: 15px 8px; border-radius: 12px; box-shadow: 0px 7px 16px 0px rgba(0,0,0,0.04); border: 1px solid #fff; } .bookmarks .item:hover { background: #FFFEFB; border: 1px solid #E0DEDB; box-shadow: 0px 7px 16px 0px rgba(0,0,0,0.04); } .bookmarks .item-outer { padding: 10px 10px; box-sizing: border-box; }