.yoho-header .nav-title { font-weight: normal; } .star-class-body { background: #333; width: 100%; font: 12px/1.5 Arial, "黑体", sans-serif; float: left; } .star-classroom { background: #333; img { max-width: 100%; display: block; border: 0; margin: 0 auto; } a { text-decoration: none; outline: none; color: #000; &:link, &:visited, &:hover, &:active { color: #000; } } *:focus { outline: none; } .font-bold { font-weight: bold; } .classroom-mask { background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; display: none; } .head-tab { width: 100%; height: 88px; background: #000; li { width: 33.3%; text-align: center; float: left; line-height: 88px; font-size: 30px; a { color: #b0b0b0; display: inline-block; } &.cur a { color: #fff; } } } .banner-top { width: 100%; height: 310px; margin-top: 30px; position: relative; .banner-swiper { width: 100%; height: 310px; overflow: hidden; position: relative; ul { position: relative; height: 310px; li { float: left; width: 100%; height: 310px; } img { width: 100%; height: 100%; } } } .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; z-index: 1; .pagination-inner { display: inline-block; padding: 0 8px 4px; background: rgba(0, 0, 0, 0.2); border-radius: 50px; line-height: 1.2; } span { display: inline-block; width: 14px; height: 14px; background: #fff; opacity: 0.5; margin: 0 10px; border-radius: 50%; } .swiper-pagination-bullet-active { background: #fff; opacity: 1; } } } .home-floor-sign { width: 100%; height: 220px; margin-top: 30px; background: #000; .nav-left { width: 102px; margin: 30px 0 0 30px; text-align: center; float: left; .user-name { font-size: 24px; color: #fff; margin-top: 30px; white-space: nowrap; } } .nav-main { width: 252px; height: 90px; float: left; background-image: url("img/guang/star-classroom/user_info_bg.png"); background-repeat: no-repeat; background-size: contain; margin: 36px 0 0 10px; p { color: #fff; line-height: 46px; font-size: 24px; margin-left: 30px; white-space: nowrap; } } .nav-right { width: 195px; text-align: center; float: right; .wyf-img { width: 119px; height: 108px; margin-top: 30px; background-image: url("img/guang/star-classroom/home-wyf.png"); background-repeat: no-repeat; background-size: contain; display: inline-block; } .add-intimacy { width: 131px; height: 52px; background-image: url("img/guang/star-classroom/add_intimacy_bg.png"); background-repeat: no-repeat; background-size: contain; color: #fff; font-size: 22px; display: inline-block; white-space: nowrap; line-height: 66px; margin-left: 12px; } } .user-head { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #e0e0e0; background-image: url("img/home/index/user-avatar.png"); background-repeat: no-repeat; background-size: contain; display: block; } } .floor-header-more { width: 100%; height: 88px; background: #000; position: relative; margin-top: 30px; border-top: 1px solid #000; h2 { color: #fff; font-size: 34px; line-height: 88px; text-align: center; } .more-btn { width: 64px; height: 96px; line-height: 86px; position: absolute; right: 20px; top: 0; color: #b0b0b0; font-size: 50px; } } .home-floor-subject { .subject-banner { width: 100%; height: 310px; } } .subject-video-area { width: 100%; height: 310px; margin-top: 30px; background: #000; #subject-video { width: 100%; height: 310px; } } .home-floor-collocation { background: #000; padding-bottom: 60px; .collocation-big-img { width: 100%; height: 277px; padding: 0 14px; box-sizing: border-box; li { width: 276px; height: 277px; margin: 0 15px; float: left; } img { height: 100%; } } .collocation-img { width: 100%; height: 139px; margin-top: 30px; position: relative; .collocation-swiper { width: 100%; height: 139px; overflow: hidden; position: relative; } ul { position: relative; height: 139px; } li { float: left; width: 229px; height: 139px; margin-left: 30px; } img { width: 100%; height: 100%; } } } .pop-intimacy { width: 580px; height: 920px; background: #fff; border-radius: 10px; position: fixed; top: 20px; left: 30px; z-index: -1; display: none; .intimacy-head { text-align: center; color: #444; height: 140px; padding-top: 20px; box-sizing: border-box; position: relative; .pop-close { width: 25px; height: 25px; background-image: url("img/guang/star-classroom/pop-close.png"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 20px; top: 24px; } h1 { font-size: 56px; font-weight: bold; line-height: 40px; } h4 { font-size: 24px; } } .my-intimacy { font-size: 24px; span { min-width: 10px; height: 30px; line-height: 30px; border-radius: 30px; font-size: 20px; color: #fff; padding: 0 10px; margin-left: 14px; background-color: #444; } } .increased { font-size: 24px; display: none; span { color: red; } } .calendar { width: 100%; float: left; } .week { width: 100%; height: 38px; background: #aeaeae; padding: 0 23px; box-sizing: border-box; h3 { width: 76px; text-align: center; font-size: 24px; color: #fff; float: left; line-height: 38px; } } .day-item { float: left; width: 100%; padding: 5px 23px; box-sizing: border-box; .item { width: 76px; color: #444; float: left; text-align: center; cursor: pointer; margin: 5px 0 0; height: 56px; line-height: 56px; font-size: 28px; } .last-item { color: #d2d2d2; } .sign-item { background-image: url("img/guang/star-classroom/sign-circle.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } } .fan-charts { width: 100%; height: 88px; border-top: 1px solid #d5d5d5; text-align: center; position: relative; float: left; h2 { font-size: 28px; color: #444; line-height: 88px; } .arrow { width: 88px; height: 88px; position: absolute; top: 0; right: 0; color: #b0b0b0; line-height: 88px; } } } .fan-charts-cont { width: 100%; line-height: 88px; float: left; li { width: 100%; height: 88px; border-top: 1px solid #d5d5d5; position: relative; padding: 0 25px; box-sizing: border-box; } .rank-ico { width: 52px; height: 39px; border-radius: 0; background-image: url("img/guang/star-classroom/king-ico.png"); background-color: #fff; background-repeat: no-repeat; background-size: contain; color: #fff; font-size: 24px; text-align: center; line-height: 50px; font-weight: bold; position: relative; top: 25px; } .rank-avatar { width: 60px; height: 60px; border-radius: 50%; position: relative; top: 15px; margin-left: 20px; background-image: url("img/home/index/user-avatar.png"); background-repeat: no-repeat; background-size: contain; display: block; } .fans-name { margin-left: 24px; font-size: 24px; color: #444; width: 180px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 88px; } .fans-intimacy { width: 150px; float: right; font-size: 20px; color: #444; span { font-size: 24px; color: #d0021b; margin-left: 5px; } } li > * { float: left; } } .things-article { width: 100%; float: left; } .things-article > li { width: 100%; float: left; padding: 0 0 30px 30px; box-sizing: border-box; background: #000; .author-info { width: 100%; padding-top: 30px; float: left; border-top: 1px solid #b0b0b0; img { width: 70px; height: 70px; border-radius: 50%; float: left; } } .author-nav { float: left; margin-left: 20px; overflow: hidden; h2 { font-size: 28px; color: #fff; } } .article-count { font-size: 24px; color: #b0b0b0; span { margin-right: 22px; } .see-ico { width: 31px; height: 24px; padding-left: 40px; } } .artice-cont { width: 100%; margin-top: 30px; float: left; p { width: 100%; height: 180px; font-size: 28px; line-height: 46px; padding-right: 30px; color: #fff; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } } .artice-imgs { width: 100%; margin-top: 30px; float: left; } .artice-imgs > li { float: left; width: 190px; height: 190px; margin-right: 5px; img { width: 100%; height: 100%; border-radius: 4px; } } } .artice-zan { width: 100%; border-top: 1px solid #b0b0b0; margin-top: 27px; float: left; padding-top: 20px; .iconfont { float: left; width: 34px; height: 34px; line-height: 34px; display: inline-block; color: #b0b0b0; font-size: 34px; text-align: center; margin: 9px 53px 0 14px; outline: none; } .like { color: #d62927; } ul { float: left; width: 420px; height: 50px; overflow: hidden; } li { float: left; margin: 0 10px; width: 50px; height: 50px; img { width: 100%; height: 100%; border-radius: 50%; } } .zan-more { float: left; width: 50px; height: 50px; border-radius: 50%; margin: 0 10px; background: #f0f0f0; color: #acb1b7; font-size: 24px; text-align: center; line-height: 50px; } } .subject-list { width: 100%; height: auto; overflow: hidden; li { width: 100%; float: left; background: #000; margin-top: 30px; img { width: 100%; } p { width: 100%; height: 88px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 34px; font-size: 34px; line-height: 88px; } a { color: #fff; } } } .collocation-list { width: 100%; float: left; li { float: left; width: 100%; margin-top: 30px; background: #000; .cont-area { width: 100%; box-sizing: border-box; padding: 30px; } .cont-area > a > .title { width: 100%; box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .cont-txt { font-size: 28px; line-height: 46px; color: #b0b0b0; margin-top: 10px; } img { width: 100%; } .title { font-size: 40px; line-height: 48px; color: #fff; width: 100%; } } } .count-area { position: relative; width: 100%; height: 32px; span { font-size: 24px; color: #b0b0b0; height: 32px; line-height: 32px; i { display: inline-block; margin-right: 5px; font-size: 24px; } } .time { float: left; } .see { float: left; margin-left: 20px; } .time-ico { width: 24px; height: 24px; } .see-ico { width: 31px; height: 24px; } .collection { position: absolute; right: 122px; } .collected-ico { width: 34px; height: 32px; vertical-align: text-bottom; } .collected { color: #d62927; } .forward { width: 40px; position: absolute; right: 23px; margin-left: 45px; font-size: 24px; color: #b0b0b0; height: 32px; line-height: 32px; } } .things-list { .things-article > li { margin-top: 30px; .author-info { border-top: none; } } } .check-in { background: #f0f0f0; .check-in-header { width: 100%; height: 283px; background-image: url("img/guang/star-classroom/checkIn-bg.jpg"); background-repeat: no-repeat; background-size: contain; } .head-cont { text-align: center; padding-top: 30px; height: 195px; box-sizing: border-box; .user-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid; border-color: rgba(255, 255, 255, 0.6); background-image: url("img/home/index/user-avatar.png"); background-repeat: no-repeat; background-origin: border-box; background-size: contain; display: inline-block; } .user-name { color: #fff; font-size: 24px; font-weight: bold; margin-top: 7px; } } .count-area { width: 100%; float: left; } .count-nav { width: 319px; float: left; margin-top: 12px; p { width: 100%; text-align: center; color: #fff; line-height: 32px; font-size: 22px; } } .line { width: 2px; height: 46px; float: left; margin-top: 26px; box-sizing: border-box; border-left: 1px solid #fff; } .ranking-area { width: 100%; background: #fff; border-top: 1px solid #e0e0e0; margin-top: 30px; padding-left: 30px; box-sizing: border-box; li { width: 100%; height: 120px; padding-top: 20px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; } .rank-avatar { width: 80px; height: 80px; border-radius: 50%; background-image: url("img/home/index/user-avatar.png"); background-repeat: no-repeat; background-size: contain; float: left; } .ranking-mid { float: left; margin-left: 20px; } .rank-ico { min-width: 18px; height: 38px; border-radius: 38px; background: #444; display: inline-block; text-align: center; line-height: 40px; color: #fff; font-size: 24px; font-weight: bold; padding: 0 10px; } .rank-name { font-size: 24px; color: #444; margin-top: 5px; width: 260px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 38px; line-height: 38px; } .ranking-rg { font-size: 20px; color: #444; float: right; margin: 20px 30px 0 0; } .intimacy { margin-left: 10px; font-size: 36px; color: #b0b0b0; } } .high-light { .rank-ico { width: 52px; height: 39px; line-height: 50px; border-radius: 0; background-image: url("img/guang/star-classroom/king-ico.png"); background-color: #fff; background-repeat: no-repeat; background-size: contain; padding: 0; } .intimacy { color: #d0021b; } } } } @media screen and (max-height: 480px) { .star-classroom { .pop-intimacy { height: 796px; .day-item .item { height: 50px; line-height: 50px; margin-top: 0; } .fan-charts { height: 76px; h2 { line-height: 76px; } .arrow { height: 76px; line-height: 76px; } } .intimacy-head h1 { font-size: 50px; } } .fan-charts-cont { line-height: 76px; .rank-ico { top: 17px; } .rank-avatar { top: 7px; } .fans-name { height: 76px; } li { height: 76px; } } } }