.star-page { background: #333; position: relative; a { text-decoration: none; outline: none; color: #000; &:link, &:visited, &:hover, &:active { color: #000; } } *:focus { outline: none; } .font-bold { font-weight: bold; } .lazy { opacity: 0.1; &[src^="http"], &[src^="//"] { opacity: 1; } } .head-tab { width: 640px; height: 88px; background: #000; z-index: 3; transform-origin: top; transform: scale(1, 1); transition: transform 400ms; &.hide-tab { transform: scale(1, 0); } 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; } } } .star-content { background: #000; } .banner-top { width: 100%; height: auto; position: relative; .banner-swiper { width: 100%; height: auto; overflow: hidden; position: relative; ul { position: relative; height: auto; li { float: left; width: 100%; height: auto; } 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; } } } .avatar-wrap { height: 180px; } .star-main { margin: 88px 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; height: calc(100vh - 88px); } .avatar-swiper { overflow: hidden; margin-top: 30px; background: #000; &.avatar-clone { margin-top: 0; position: fixed; width: 640px; padding-bottom: 30px; z-index: 9; background: #000; } li { float: left; width: auto; width: 110px; height: 110px; margin-top: 36px; background: #000; transition: all 400ms; a { border-radius: 5px; } } .swiper-slide-active { width: 180px; height: 180px; margin-top: 0; } .swiper-slide-prev, .swiper-slide-next { width: 130px; height: 130px; margin-top: 27px; } } .star-info { margin-top: 30px; background: #000; li { float: left; margin-bottom: 30px; padding-left: 10px; } } .star-avatar { width: 120px; margin-right: 20px; box-sizing: border-box; float: left; overflow: hidden; .avatar-wrap { white-space: nowrap; font-size: 0; &.avatar-num-2 { animation: avatar2 10s infinite; } &.avatar-num-3 { animation: avatar3 15s infinite; } } a { display: inline-block; padding: 8px; width: 120px; } .article-avatar-swiper { width: 104px; overflow: hidden; } .rank-avatar { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto; } .name { font-size: 24px; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #fff; margin-top: 8px; float: left; text-align: center; } } .star-article { width: 472px; position: relative; border-radius: 8px; background: #282828; float: left; padding: 20px 30px; box-sizing: border-box; .article-arrow { position: absolute; left: -13px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 13px solid #282828; } .article-title { font-size: 28px; line-height: 38px; height: 76px; color: #fff; text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .artice-cont { margin-top: 10px; p { font-size: 18px; padding: 2px 0; line-height: 29px; color: #969696; } } .artice-imgs-area { position: relative; display: table; margin: 10px 0; width: 266px; height: 266px; overflow: hidden; img { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); } } .artice-imgs { margin: 25px 0 0; width: 2500px; float: left; overflow: hidden; li { display: inline-block; margin-left: 6px; position: relative; } li:first-child { margin-left: 0; } img { width: 130px; border-radius: 4px; } .img-size { width: 50px; height: 26px; line-height: 28px; border-radius: 13px; background-color: rgba(0, 0, 0, 0.4); color: #fff; position: absolute; right: 10px; bottom: 10px; font-size: 18px; } .pic-icon { width: 19px; height: 15px; background: url("/guang/star/img.png") no-repeat; background-size: contain; display: inline-block; margin: 6px 4px 0 8px; vertical-align: top; } } .artice-o { width: 100%; float: left; border-top: 1px solid #b0b0b0; padding-top: 20px; span { font-size: 18px; color: #b0b0b0; height: 22px; line-height: 22px; i { display: inline-block; margin-right: 5px; font-size: 22px; vertical-align: text-bottom; } } .time { float: left; } .see { float: left; margin-left: 30px; } .time-ico { width: 24px; height: 24px; } .see-ico { width: 31px; height: 24px; } } } .view-area { height: 100%; position: relative; } .swiper-view { height: 100%; background: rgba(0, 0, 0, 0.5); } .view-img { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 9; li { float: left; img { width: 90%; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } } } .rank-avatar { display: block; width: 100%; height: 100%; background-color: #000; background-repeat: no-repeat; background-size: contain; } .star { display: block; width: 100%; height: 100%; background-color: #000; background-repeat: no-repeat; background-size: contain; } .default-avater { background-image: resolve("guang/star/user-avatar.png"); } .loading-tip { position: absolute; width: 100%; top: 88px; left: 50%; transform: translate(-50%, 0); padding: 30px 0; text-align: center; color: #ccc; font-size: 18px; } .swiper-num { position: fixed; top: 0; z-index: -1; } } .star-index-bg { background: #000; overflow: hidden; .star-page { background: #000; } } @media screen and (max-width: 375px) and (min-width: 375px) { .star-page { .avatar-wrap { height: 105PX; } .avatar-swiper { li { width: 64PX; height: 64PX; margin-top: 20.5PX; } .swiper-slide-active { width: 105PX; height: 105PX; } .swiper-slide-prev, .swiper-slide-next { width: 76PX; height: 76PX; margin-top: 14.5PX; } } } }