123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- * {
- margin: 0;
- padding: 0;
- }
- .w,
- .top-bar,
- .banner,
- .menu,
- .course-list {
- width: 17.325rem;
- margin: 0 auto;
- }
- html {
- font-size: 5.33333333vw;
- background-color: #eff0f4;
- }
- a {
- text-decoration: none;
- }
- .top-bar {
- display: flex;
- height: 4.375rem;
- line-height: 4.375rem;
- justify-content: space-between;
- align-items: center;
- }
- .top-bar a {
- color: #24253d;
- font-size: 1.25rem;
- }
- .top-bar a i {
- color: #999;
- font-size: 1rem;
- }
- .banner img {
- width: 100%;
- }
- .menu {
- height: 8.225rem;
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
- align-content: space-evenly;
- }
- .menu a {
- width: 8.175rem;
- height: 2.6rem;
- line-height: 2.6rem;
- color: white;
- border-radius: 0.25rem;
- }
- .menu a i {
- margin: 0 0.5rem 0 0.95rem;
- }
- .menu .course {
- background-color: #f97053;
- }
- .menu .star {
- background-color: #cd6efe;
- }
- .menu .sub {
- background-color: #fe4479;
- }
- .menu .download {
- background-color: #1bc4fb;
- }
- .course-list {
- height: 9.85rem;
- display: flex;
- flex-flow: column;
- justify-content: space-between;
- margin-bottom: 1.15rem;
- }
- .course-list .title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .course-list .title h2 {
- font-size: 0.825rem;
- color: #24253d;
- border-left: 2px solid #3a84ff;
- padding: 4px;
- }
- .course-list .title a {
- font-size: 0.7rem;
- color: #656565;
- }
- .item-list {
- width: 18rem;
- display: flex;
- overflow: auto;
- }
- .item {
- flex: none;
- box-sizing: border-box;
- width: 8rem;
- height: 8.1rem;
- padding: 0 0.55rem;
- background-color: #fff;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- display: flex;
- flex-flow: column;
- justify-content: space-evenly;
- margin-right: 0.6rem;
- }
- .item img {
- width: 100%;
- vertical-align: top;
- }
- .item .course-title {
- font-size: 0.66666667rem;
- color: #24253d;
- }
- .item .user-info {
- display: flex;
- align-items: center;
- }
- .item .avatar {
- width: 1.05rem;
- height: 1.05rem;
- }
- .item .nickname {
- margin-left: 6px;
- font-size: 0.6rem;
- color: #969393;
- }
- /*# sourceMappingURL=./style.css.map */
|