fe / YOHOBUYWAP · Commits

Go to a project

Authored by 王水玲
Commit 17865349ec787ce49fd36e5a35c4cb10174635eb 1 parent 8f76bfec

新潮教室

Inline Side-by-side
Showing 4 changed files with 916 additions and 872 deletions
... ... @@ -56,7 +56,7 @@ var CalendarHandler = {
// var signDay = $('.sign-day').val();
$dayItem = $('<div class="dayItem"></div>');
$dayItem = $('<div class="day-item"></div>');
// 获取当前月份的天数
nowDate = new Date();
... ... @@ -82,7 +82,7 @@ var CalendarHandler = {
// 生成上月剩下的日期
for (i = (lastMonthDaysNub - nowWeek); i < lastMonthDaysNub; i++) {
$dayItem.append('<div class="item lastItem">' + (i + 1) + '</div>');
$dayItem.append('<div class="item last-item">' + (i + 1) + '</div>');
}
}
... ... @@ -104,7 +104,7 @@ var CalendarHandler = {
// 如果小于42，往下个月推算
if (hasCreateDaysNub < 41) {
for (i = 0; i <= (41 - hasCreateDaysNub); i++) {
$dayItem.append('<div class="item lastItem">' + (i + 1) + '</div>');
$dayItem.append('<div class="item last-item">' + (i + 1) + '</div>');
}
}
... ...
... ... @@ -47,7 +47,7 @@ function intimacyData(data) {
for (i = 0; i < nowDaysNub; i++) {
for (j = 0; j < signDay.length; j++) {
if (i === parseInt(signDay[j])) {
$('.now-days').eq(i - 1).addClass('signItem');
$('.now-days').eq(i - 1).addClass('sign-item');
}
}
}
... ...
.yoho-header .nav-title {
font-weight: normal;
}
... ... @@ -7,7 +5,7 @@
.star-class-body {
background: #333;
width: 100%;
font: 12px/1.5 Arial,'黑体';
font: 12rem / $pxConvertRem/1.5 Arial,'黑体';
float: left;
}
... ... @@ -79,7 +77,7 @@
.banner-top {
width: 100%;
height: 310rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
position: relative;
.banner-swiper {
... ... @@ -96,11 +94,11 @@
float: left;
width: 100%;
height: 310rem / $pxConvertRem;
}
img {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
}
}
... ... @@ -115,21 +113,21 @@
.pagination-inner {
display: inline-block;
}
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 10rem / $pxConvertRem;
border-radius: 50%;
&.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 10rem / $pxConvertRem;
border-radius: 50%;
}
.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
... ... @@ -220,7 +218,7 @@
background: #000;
position: relative;
margin-top: 30rem / $pxConvertRem;
border-top: 1px solid #000;
border-top: 1rem / $pxConvertRem solid #000;
h2 {
color: #fff;
... ... @@ -275,10 +273,10 @@
height: 277rem / $pxConvertRem;
margin: 0 15rem / $pxConvertRem;
float: left;
}
img {
height: 100%;
}
img {
height: 100%;
}
}
... ... @@ -293,23 +291,23 @@
height: 139rem / $pxConvertRem;
overflow: hidden;
position: relative;
}
ul {
position: relative;
height: 139rem / $pxConvertRem;
li {
float: left;
width: 229rem / $pxConvertRem;
height: 139rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
}
}
}
ul {
position: relative;
height: 139rem / $pxConvertRem;
}
li {
float: left;
width: 229rem / $pxConvertRem;
height: 139rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
}
img {
width: 100%;
height: 100%;
}
}
}
... ... @@ -353,89 +351,89 @@
h4 {
font-size: 24rem / $pxConvertRem;
}
}
.my-intimacy {
font-size: 24rem / $pxConvertRem;
.my-intimacy {
font-size: 24rem / $pxConvertRem;
span {
min-width: 10rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
border-radius: 30rem / $pxConvertRem;
font-size: 20rem / $pxConvertRem;
color: #fff;
padding: 0 10rem / $pxConvertRem;
margin-left: 14rem / $pxConvertRem;
background-color: #444;
}
span {
min-width: 10rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
border-radius: 30rem / $pxConvertRem;
font-size: 20rem / $pxConvertRem;
color: #fff;
padding: 0 10rem / $pxConvertRem;
margin-left: 14rem / $pxConvertRem;
background-color: #444;
}
}
.increased {
font-size: 24rem / $pxConvertRem;
display: none;
.increased {
font-size: 24rem / $pxConvertRem;
display: none;
span {
color: red;
}
span {
color: red;
}
}
.calendar {
width: 100%;
float: left;
float: left;
}
.week {
width: 100%;
height: 38rem / $pxConvertRem;
background: #aeaeae;
padding: 0 23rem / $pxConvertRem;
box-sizing: border-box;
.week {
width: 100%;
height: 38rem / $pxConvertRem;
background: #aeaeae;
padding: 0 23rem / $pxConvertRem;
box-sizing: border-box;
h3 {
width: 76rem / $pxConvertRem;
text-align: center;
font-size: 24rem / $pxConvertRem;
color: #fff;
float: left;
line-height: 38rem / $pxConvertRem;
}
h3 {
width: 76rem / $pxConvertRem;
text-align: center;
font-size: 24rem / $pxConvertRem;
color: #fff;
float: left;
line-height: 38rem / $pxConvertRem;
}
}
.day-item {
float: left;
width: 100%;
padding: 5rem / $pxConvertRem 23rem / $pxConvertRem;
box-sizing: border-box;
.dayItem {
.item {
width: 76rem / $pxConvertRem;
color: #444;
float: left;
width: 100%;
padding: 5rem / $pxConvertRem 23rem / $pxConvertRem;
box-sizing: border-box;
text-align: center;
cursor: pointer;
margin: 5rem / $pxConvertRem 0 0 0;
height: 56rem / $pxConvertRem;
line-height: 56rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
}
.item {
width: 76rem / $pxConvertRem;
color: #444;
float: left;
text-align: center;
cursor: pointer;
margin: 5rem / $pxConvertRem 0 0 0;
height: 56rem / $pxConvertRem;
line-height: 56rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
&.lastItem {
color: #D2D2D2;
}
&.signItem {
background-image: image-url("guang/star-classroom/sign-circle.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
}
}
.last-item {
color: #D2D2D2;
}
.sign-item {
background-image: image-url("guang/star-classroom/sign-circle.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
.fan-charts {
width: 100%;
height: 88rem / $pxConvertRem;
border-top: 1px solid #d5d5d5;
border-top: 1rem / $pxConvertRem solid #d5d5d5;
text-align: center;
position: relative;
float: left;
... ... @@ -456,78 +454,78 @@
line-height: 88rem / $pxConvertRem;
}
}
}
.fan-charts-cont {
.fan-charts-cont {
width: 100%;
line-height: 88rem / $pxConvertRem;
float: left;
li {
width: 100%;
line-height: 88rem / $pxConvertRem;
float: left;
height: 88rem / $pxConvertRem;
border-top: 1rem / $pxConvertRem solid #d5d5d5;
position: relative;
padding: 0 25rem / $pxConvertRem;
box-sizing: border-box;
}
li {
width: 100%;
height: 88rem / $pxConvertRem;
border-top: 1px solid #d5d5d5;
position: relative;
padding: 0 25rem / $pxConvertRem;
box-sizing: border-box;
.rank-ico {
width: 52rem / $pxConvertRem;
height: 39rem / $pxConvertRem;
border-radius: 0;
background-image: image-url("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: 24rem / $pxConvertRem;
text-align: center;
line-height: 50rem / $pxConvertRem;
font-weight: bold;
position: relative;
top: 25rem / $pxConvertRem;
}
.rank-ico {
width: 52rem / $pxConvertRem;
height: 39rem / $pxConvertRem;
border-radius: 0;
background-image: image-url("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: 24rem / $pxConvertRem;
text-align: center;
line-height: 50rem / $pxConvertRem;
font-weight: bold;
position: relative;
top: 25rem / $pxConvertRem;
}
.rank-avatar {
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
border-radius: 50%;
position: relative;
top: 15rem / $pxConvertRem;
margin-left: 20rem / $pxConvertRem;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
.rank-avatar {
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
border-radius: 50%;
position: relative;
top: 15rem / $pxConvertRem;
margin-left: 20rem / $pxConvertRem;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
.fans-name {
margin-left: 24rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #444;
width: 180rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 88rem / $pxConvertRem;
}
.fans-name {
margin-left: 24rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #444;
width: 180rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 88rem / $pxConvertRem;
}
.fans-intimacy {
width: 150rem / $pxConvertRem;
float: right;
font-size: 20rem / $pxConvertRem;
color: #444;
.fans-intimacy {
width: 150rem / $pxConvertRem;
float: right;
font-size: 20rem / $pxConvertRem;
color: #444;
span {
font-size: 24rem / $pxConvertRem;
color: #d0021b;
margin-left: 5rem / $pxConvertRem;
}
}
span {
font-size: 24rem / $pxConvertRem;
color: #d0021b;
margin-left: 5rem / $pxConvertRem;
}
}
li > * {
float: left;
}
li > * {
float: left;
}
}
... ... @@ -547,7 +545,7 @@
width: 100%;
padding-top: 30rem / $pxConvertRem;
float: left;
border-top:1px solid #b0b0b0;
border-top:1rem / $pxConvertRem solid #b0b0b0;
img {
width: 70rem / $pxConvertRem;
... ... @@ -555,31 +553,31 @@
border-radius: 50%;
float: left;
}
}
.author-nav {
float: left;
margin-left: 20rem / $pxConvertRem;
overflow: hidden;
.author-nav {
float: left;
margin-left: 20rem / $pxConvertRem;
overflow: hidden;
h2 {
font-size: 28rem / $pxConvertRem;
color: #fff;
}
h2 {
font-size: 28rem / $pxConvertRem;
color: #fff;
}
}
.article-count {
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
.article-count {
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
span {
margin-right:22rem / $pxConvertRem;
span {
margin-right:22rem / $pxConvertRem;
}
&.see-ico {
width: 31rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
padding-left: 40rem / $pxConvertRem;
}
}
}
.see-ico {
width: 31rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
padding-left: 40rem / $pxConvertRem;
}
}
... ... @@ -602,85 +600,85 @@
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
.artice-imgs {
width: 100%;
margin-top: 30rem / $pxConvertRem;
float: left;
}
.artice-imgs {
width: 100%;
margin-top: 30rem / $pxConvertRem;
float: left;
}
.artice-imgs > li {
float: left;
width: 190rem / $pxConvertRem;
height: 190rem / $pxConvertRem;
margin-right: 5rem / $pxConvertRem;
.artice-imgs > li {
float: left;
width: 190rem / $pxConvertRem;
height: 190rem / $pxConvertRem;
margin-right: 5rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
border-radius: 4rem / $pxConvertRem;
}
img {
width: 100%;
height: 100%;
border-radius: 4rem / $pxConvertRem;
}
}
}
.artice-zan {
width: 100%;
border-top: 1px solid #b0b0b0;
margin-top: 27rem / $pxConvertRem;
float: left;
padding-top: 20rem / $pxConvertRem;
.artice-zan {
width: 100%;
border-top: 1rem / $pxConvertRem solid #b0b0b0;
margin-top: 27rem / $pxConvertRem;
float: left;
padding-top: 20rem / $pxConvertRem;
.iconfont {
float: left;
width: 34rem / $pxConvertRem;
height: 34rem / $pxConvertRem;
line-height: 34rem / $pxConvertRem;
display: inline-block;
color: #b0b0b0;
font-size: 34rem / $pxConvertRem;
text-align: center;
margin: 9rem / $pxConvertRem 53rem / $pxConvertRem 0 14rem / $pxConvertRem;
outline: none;
}
.iconfont {
float: left;
width: 34rem / $pxConvertRem;
height: 34rem / $pxConvertRem;
line-height: 34rem / $pxConvertRem;
display: inline-block;
color: #b0b0b0;
font-size: 34rem / $pxConvertRem;
text-align: center;
margin: 9rem / $pxConvertRem 53rem / $pxConvertRem 0 14rem / $pxConvertRem;
outline: none;
}
.like {
color: #D62927;
}
.like {
color: #D62927;
}
ul {
float: left;
width: 420rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
overflow: hidden;
ul {
float: left;
width: 420rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
overflow: hidden;
}
li {
float: left;
margin: 0 10rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
li {
float: left;
margin: 0 10rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
.zan-more {
float: left;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0 10rem / $pxConvertRem;
background: #f0f0f0;
color: #acb1b7;
font-size: 24rem / $pxConvertRem;
text-align: center;
line-height: 50rem / $pxConvertRem;
/*display: none;*/
}
}
.zan-more {
float: left;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
border-radius: 50%;
margin: 0 10rem / $pxConvertRem;
background: #f0f0f0;
color: #acb1b7;
font-size: 24rem / $pxConvertRem;
text-align: center;
line-height: 50rem / $pxConvertRem;
/*display: none;*/
}
}
.subject-list {
... ... @@ -737,11 +735,6 @@
line-height: 46rem / $pxConvertRem;
color: #b0b0b0;
margin-top: 10rem / $pxConvertRem;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
img {
... ... @@ -751,84 +744,75 @@
.title {
font-size: 40rem / $pxConvertRem;
line-height: 48rem / $pxConvertRem;
a {
color: #fff;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
color: #fff;
width: 100%;
}
}
}
.count-area {
position: relative;
width: 100%;
height: 32rem / $pxConvertRem;
margin-top: 15rem / $pxConvertRem;
span {
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
i {
display: inline-block;
margin-right: 5rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
}
&.time {
float: left;
}
&.see {
float: left;
margin-left: 20rem / $pxConvertRem;
}
.time-ico {
width: 24rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
}
.see-ico {
width: 31rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
}
&.collection {
position: absolute;
right: 122rem / $pxConvertRem;
.collected-ico {
width: 34rem / $pxConvertRem;
height: 32rem / $pxConvertRem;
vertical-align: text-bottom;
}
.collected {
color: #D62927;
}
}
}
.count-area {
position: relative;
width: 100%;
height: 32rem / $pxConvertRem;
.forward {
width: 40rem / $pxConvertRem;
height: 28rem / $pxConvertRem;
position: absolute;
right: 23rem / $pxConvertRem;
margin-left: 45rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
}
span {
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
i {
display: inline-block;
margin-right: 5rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
}
}
.time {
float: left;
}
.see {
float: left;
margin-left: 20rem / $pxConvertRem;
}
.time-ico {
width: 24rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
}
.see-ico {
width: 31rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
}
.collection {
position: absolute;
right: 122rem / $pxConvertRem;
}
.collected-ico {
width: 34rem / $pxConvertRem;
height: 32rem / $pxConvertRem;
vertical-align: text-bottom;
}
.collected {
color: #D62927;
}
.forward {
width: 40rem / $pxConvertRem;
height: 28rem / $pxConvertRem;
position: absolute;
right: 23rem / $pxConvertRem;
margin-left: 45rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
}
}
.things-list {
... ... @@ -850,65 +834,66 @@
background-image: image-url("guang/star-classroom/checkIn-bg.jpg");
background-repeat: no-repeat;
background-size: contain;
}
.head-cont {
text-align: center;
padding-top: 30rem / $pxConvertRem;
height: 195rem / $pxConvertRem;
box-sizing: border-box;
.user-avatar {
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
border-radius: 50%;
border:4rem / $pxConvertRem solid;
border-color: rgba(255,255,255,.6);
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.head-cont {
text-align: center;
padding-top: 30rem / $pxConvertRem;
height: 195rem / $pxConvertRem;
box-sizing: border-box;
.user-name {
color: #fff;
font-size: 24rem / $pxConvertRem;
font-weight: bold;
margin-top: 7rem / $pxConvertRem;
}
.user-avatar {
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
border-radius: 50%;
border:4rem / $pxConvertRem solid;
border-color: rgba(255,255,255,.6);
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.count-area {
width: 100%;
float: left;
.user-name {
color: #fff;
font-size: 24rem / $pxConvertRem;
font-weight: bold;
margin-top: 7rem / $pxConvertRem;
}
}
.count-nav {
width: 319rem / $pxConvertRem;
float: left;
margin-top: 12rem / $pxConvertRem;
.count-area {
width: 100%;
float: left;
}
p {
width: 100%;
text-align: center;
color: #fff;
line-height: 32rem / $pxConvertRem;
}
}
.count-nav {
width: 319rem / $pxConvertRem;
float: left;
margin-top: 12rem / $pxConvertRem;
.line {
width: 2rem / $pxConvertRem;
height: 46rem / $pxConvertRem;
float: left;
margin-top: 26rem / $pxConvertRem;
box-sizing: border-box;
border-left: 1px solid #fff;
p {
width: 100%;
text-align: center;
color: #fff;
line-height: 32rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
}
}
.line {
width: 2rem / $pxConvertRem;
height: 46rem / $pxConvertRem;
float: left;
margin-top: 26rem / $pxConvertRem;
box-sizing: border-box;
border-left: 1rem / $pxConvertRem solid #fff;
}
.ranking-area {
width: 100%;
background: #fff;
border-top: 1px solid #e0e0e0;
border-top: 1rem / $pxConvertRem solid #e0e0e0;
margin-top: 30rem / $pxConvertRem;
padding-left: 30rem / $pxConvertRem;
box-sizing: border-box;
... ... @@ -918,79 +903,109 @@
height: 120rem / $pxConvertRem;
padding-top: 20rem / $pxConvertRem;
box-sizing: border-box;
border-bottom: 1px solid #e0e0e0;
.rank-avatar {
width: 80rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
border-radius: 50%;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
float: left;
}
border-bottom: 1rem / $pxConvertRem solid #e0e0e0;
}
.ranking-mid {
float: left;
margin-left: 20rem / $pxConvertRem;
.rank-ico {
min-width: 18rem / $pxConvertRem;
height: 38rem / $pxConvertRem;
border-radius: 38rem / $pxConvertRem;
background: #444;
display: inline-block;
text-align: center;
line-height: 40rem / $pxConvertRem;
color: #fff;
font-size: 24rem / $pxConvertRem;
font-weight: bold;
padding: 0 10rem / $pxConvertRem;
}
.rank-name {
font-size: 24rem / $pxConvertRem;
color: #444;
margin-top: 5rem / $pxConvertRem;
width: 180rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 30rem / $pxConvertRem;
}
}
.rank-avatar {
width: 80rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
border-radius: 50%;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.ranking-rg {
font-size: 20rem / $pxConvertRem;
color: #444;
float: right;
margin:20rem / $pxConvertRem 30rem / $pxConvertRem 0 0;
.intimacy {
margin-left: 10rem / $pxConvertRem;
font-size: 36rem / $pxConvertRem;
color: #b0b0b0;
}
}
.ranking-mid {
float: left;
margin-left: 20rem / $pxConvertRem;
}
&.high-light {
.rank-ico {
width: 52rem / $pxConvertRem;
height: 39rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
border-radius: 0;
background-image: image-url("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
padding: 0;
}
.intimacy {
color: #d0021b;
}
}
.rank-ico {
min-width: 18rem / $pxConvertRem;
height: 38rem / $pxConvertRem;
border-radius: 38rem / $pxConvertRem;
background: #444;
display: inline-block;
text-align: center;
line-height: 40rem / $pxConvertRem;
color: #fff;
font-size: 24rem / $pxConvertRem;
font-weight: bold;
padding: 0 10rem / $pxConvertRem;
}
.rank-name {
font-size: 24rem / $pxConvertRem;
color: #444;
margin-top: 5rem / $pxConvertRem;
width: 180rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 30rem / $pxConvertRem;
}
.ranking-rg {
font-size: 20rem / $pxConvertRem;
color: #444;
float: right;
margin:20rem / $pxConvertRem 30rem / $pxConvertRem 0 0;
}
.intimacy {
margin-left: 10rem / $pxConvertRem;
font-size: 36rem / $pxConvertRem;
color: #b0b0b0;
}
}
.high-light {
.rank-ico {
width: 52rem / $pxConvertRem;
height: 39rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
border-radius: 0;
background-image: image-url("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: 480rem / $pxConvertRem){
.star-classroom .pop-intimacy {
height: 828rem / $pxConvertRem;
}
.star-classroom .pop-intimacy .day-item .item {
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
margin-top: 0;
}
.star-classroom .pop-intimacy .fan-charts {
height: 76rem / $pxConvertRem;
h2 {
line-height: 76rem / $pxConvertRem;
}
.arrow {
height: 76rem / $pxConvertRem;
line-height: 76rem / $pxConvertRem;
}
}
.star-classroom .pop-intimacy .intimacy-head h1{
font-size: 50rem / $pxConvertRem;
}
}
\ No newline at end of file
... ...
... ... @@ -94,11 +94,11 @@
float: left;
width: 100%;
height: 310px;
}
img {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
}
}
... ... @@ -113,21 +113,21 @@
.pagination-inner {
display: inline-block;
}
span {
display: inline-block;
width: 14px;
height: 14px;
background: #fff;
opacity: 0.5;
margin: 0 10px;
border-radius: 50%;
}
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;
}
}
.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
... ... @@ -273,10 +273,10 @@
height: 277px;
margin: 0 15px;
float: left;
}
img {
height: 100%;
}
img {
height: 100%;
}
}
... ... @@ -291,23 +291,23 @@
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%;
}
}
}
ul {
position: relative;
height: 139px;
}
li {
float: left;
width: 229px;
height: 139px;
margin-left: 30px;
}
img {
width: 100%;
height: 100%;
}
}
}
... ... @@ -351,84 +351,84 @@
h4 {
font-size: 24px;
}
}
.my-intimacy {
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;
}
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;
.increased {
font-size: 24px;
display: none;
span {
color: red;
}
span {
color: red;
}
}
.calendar {
width: 100%;
float: left;
float: left;
}
.week {
width: 100%;
height: 38px;
background: #aeaeae;
padding: 0 23px;
box-sizing: border-box;
.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;
}
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;
.dayItem {
.item {
width: 76px;
color: #444;
float: left;
width: 100%;
padding: 5px 23px;
box-sizing: border-box;
text-align: center;
cursor: pointer;
margin: 5px 0 0 0;
height: 56px;
line-height: 56px;
font-size: 28px;
}
.item {
width: 76px;
color: #444;
float: left;
text-align: center;
cursor: pointer;
margin: 5px 0 0 0;
height: 56px;
line-height: 56px;
font-size: 28px;
&.lastItem {
color: #D2D2D2;
}
&.signItem {
background-image: resolve("guang/star-classroom/sign-circle.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
}
}
.last-item {
color: #D2D2D2;
}
.sign-item {
background-image: resolve("guang/star-classroom/sign-circle.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
.fan-charts {
width: 100%;
... ... @@ -454,78 +454,78 @@
line-height: 88px;
}
}
}
.fan-charts-cont {
.fan-charts-cont {
width: 100%;
line-height: 88px;
float: left;
li {
width: 100%;
line-height: 88px;
float: left;
height: 88px;
border-top: 1px solid #d5d5d5;
position: relative;
padding: 0 25px;
box-sizing: border-box;
}
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: resolve("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-ico {
width: 52px;
height: 39px;
border-radius: 0;
background-image: resolve("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: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
.rank-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
top: 15px;
margin-left: 20px;
background-image: resolve("me/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-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;
.fans-intimacy {
width: 150px;
float: right;
font-size: 20px;
color: #444;
span {
font-size: 24px;
color: #d0021b;
margin-left: 5px;
}
}
span {
font-size: 24px;
color: #d0021b;
margin-left: 5px;
}
}
li > * {
float: left;
}
li > * {
float: left;
}
}
... ... @@ -553,31 +553,31 @@
border-radius: 50%;
float: left;
}
}
.author-nav {
float: left;
margin-left: 20px;
overflow: hidden;
.author-nav {
float: left;
margin-left: 20px;
overflow: hidden;
h2 {
font-size: 28px;
color: #fff;
}
h2 {
font-size: 28px;
color: #fff;
}
}
.article-count {
font-size: 24px;
color: #b0b0b0;
.article-count {
font-size: 24px;
color: #b0b0b0;
span {
margin-right:22px;
span {
margin-right:22px;
}
&.see-ico {
width: 31px;
height: 24px;
padding-left: 40px;
}
}
}
.see-ico {
width: 31px;
height: 24px;
padding-left: 40px;
}
}
... ... @@ -600,85 +600,85 @@
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
.artice-imgs {
width: 100%;
margin-top: 30px;
float: left;
}
.artice-imgs {
width: 100%;
margin-top: 30px;
float: left;
}
.artice-imgs > li {
float: left;
width: 190px;
height: 190px;
margin-right: 5px;
.artice-imgs > li {
float: left;
width: 190px;
height: 190px;
margin-right: 5px;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
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;
.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;
}
.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;
}
.like {
color: #D62927;
}
ul {
float: left;
width: 420px;
height: 50px;
overflow: hidden;
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%;
}
}
}
li {
float: left;
margin: 0 10px;
width: 50px;
height: 50px;
.zan-more {
float: left;
width: 50px;
height: 50px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0 10px;
background: #f0f0f0;
color: #acb1b7;
font-size: 24px;
text-align: center;
line-height: 50px;
/*display: none;*/
}
}
.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;
/*display: none;*/
}
}
.subject-list {
... ... @@ -747,73 +747,72 @@
color: #fff;
width: 100%;
}
}
}
.count-area {
position: relative;
width: 100%;
height: 32px;
margin-top: 15px;
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;
}
}
}
.count-area {
position: relative;
width: 100%;
height: 32px;
.forward {
width: 40px;
height: 28px;
position: absolute;
right: 23px;
margin-left: 45px;
font-size: 24px;
color: #b0b0b0;
height: 32px;
line-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;
height: 28px;
position: absolute;
right: 23px;
margin-left: 45px;
font-size: 24px;
color: #b0b0b0;
height: 32px;
line-height: 32px;
}
}
.things-list {
... ... @@ -835,62 +834,62 @@
background-image: resolve("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,.6);
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.head-cont {
text-align: center;
padding-top: 30px;
height: 195px;
box-sizing: border-box;
.user-name {
color: #fff;
font-size: 24px;
font-weight: bold;
margin-top: 7px;
}
.user-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border:4px solid;
border-color: rgba(255,255,255,.6);
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.count-area {
width: 100%;
float: left;
.user-name {
color: #fff;
font-size: 24px;
font-weight: bold;
margin-top: 7px;
}
}
.count-nav {
width: 319px;
float: left;
margin-top: 12px;
.count-area {
width: 100%;
float: left;
}
p {
width: 100%;
text-align: center;
color: #fff;
line-height: 32px;
font-size: 20px;
}
}
.count-nav {
width: 319px;
float: left;
margin-top: 12px;
.line {
width: 2px;
height: 46px;
float: left;
margin-top: 26px;
box-sizing: border-box;
border-left: 1px solid #fff;
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;
... ... @@ -905,78 +904,108 @@
padding-top: 20px;
box-sizing: border-box;
border-bottom: 1px solid #e0e0e0;
}
.rank-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.rank-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-image: resolve("me/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: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 30px;
}
}
.ranking-mid {
float: left;
margin-left: 20px;
}
.ranking-rg {
font-size: 20px;
color: #444;
float: right;
margin:20px 30px 0 0;
.intimacy {
margin-left: 10px;
font-size: 36px;
color: #b0b0b0;
}
}
.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;
}
&.high-light {
.rank-ico {
width: 52px;
height: 39px;
line-height: 50px;
border-radius: 0;
background-image: resolve("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
padding: 0;
}
.intimacy {
color: #d0021b;
}
}
.rank-name {
font-size: 24px;
color: #444;
margin-top: 5px;
width: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 30px;
}
.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: resolve("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: 828px;
}
.star-classroom .pop-intimacy .day-item .item {
height: 50px;
line-height: 50px;
margin-top: 0;
}
.star-classroom .pop-intimacy .fan-charts {
height: 76px;
h2 {
line-height: 76px;
}
.arrow {
height: 76px;
line-height: 76px;
}
}
.star-classroom .pop-intimacy .intimacy-head h1{
font-size: 50px;
}
}
\ No newline at end of file
... ...