新潮教室

+/**
+ * 星潮教室 亲密度·日期
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/4/11
+ */
+
+var $ = require('jquery');
+
+var CalendarHandler = {
+    currentYear: 0,
+    currentMonth: 0,
+    initialize: function() {
+        var $calendarItem;
+
+        $calendarItem = this.createCalendar(0, 0);
+        $('#Container').append($calendarItem);
+    },
+    isRuiYear: function(aDate) {
+        return 0 === aDate % 4 && (aDate % 100 !== 0 || aDate % 400 === 0);
+    },
+    calculateWeek: function(y, m, d) {
+        var arr, vDay, week;
+
+        arr = '7123456'.split('');
+        vDay = parseInt(d, 10);
+        week = arr[new Date(y, m - 1, vDay).getDay()];
+        return week;
+    },
+    calculateMonthDays: function(m, y) {
+        var mDay = 0;
+        var isRn;
+
+        if (m === 0 || m === 1 || m === 3 || m === 5 || m === 7 || m === 8 || m === 10 || m === 12) {
+            mDay = 31;
+        } else {
+            if (m === 2) {
+
+                // 判断是否为芮年
+                isRn = this.isRuiYear(y);
+                if (isRn === true) {
+                    mDay = 29;
+                } else {
+                    mDay = 28;
+                }
+            } else {
+                mDay = 30;
+            }
+        }
+        return mDay;
+    },
+    createCalendar: function(y, m) {
+        var $dayItem, nowDate, nowYear, nowMonth, nowDaysNub, nowWeek, lastMonthDaysNub, i, hasCreateDaysNub;
+
+        var months = ['January', 'February', 'March', 'April', 'May',
+                    'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+        var signDay = $('.sign-day').val();
+
+        $dayItem = $('<div class="dayItem"></div>');
+
+        // 获取当前月份的天数
+        nowDate = new Date();
+
+        nowYear = y === 0 ? nowDate.getFullYear() : y;
+        this.currentYear = nowYear;
+        nowMonth = m === 0 ? nowDate.getMonth() + 1 : m;
+        this.currentMonth = nowMonth;
+        nowDaysNub = this.calculateMonthDays(nowMonth, nowYear);
+
+        $('.cur-year').html(nowYear);
+        $('.cur-month').html(months[nowMonth - 1]);
+
+        // 获取当月第一天是星期几
+        nowWeek = parseInt(this.calculateWeek(nowYear, nowMonth, 1));
+
+        // 获取上个月的天数
+        lastMonthDaysNub = this.calculateMonthDays((nowMonth - 1), nowYear);
+
+        if (nowWeek !== 0) {
+
+            // 生成上月剩下的日期
+            for (i = (lastMonthDaysNub - nowWeek); i < lastMonthDaysNub; i++) {
+                $dayItem.append('<div class="item lastItem">' + (i + 1) + '</div>');
+            }
+        }
+
+        // 生成当月的日期
+        for (i = 1; i <= nowDaysNub; i++) {
+            if (signDay.indexOf(i) > -1) {
+                $dayItem.append('<div class="item signItem">' + i + '</div>');
+            } else {
+                $dayItem.append('<div class="item">' + i + '</div>');
+            }
+        }
+
+        // 获取总共已经生成的天数
+        hasCreateDaysNub = nowWeek + nowDaysNub;
+
+        // 如果小于42，往下个月推算
+        if (hasCreateDaysNub < 41) {
+            for (i = 0; i <= (41 - hasCreateDaysNub); i++) {
+                $dayItem.append('<div class="item lastItem">' + (i + 1) + '</div>');
+            }
+        }
+
+        return $dayItem;
+    }
+};
+
+$(document).ready(function() {
+    CalendarHandler.initialize();
+});

@@ -9,4 +9,6 @@ require('./plus-star/detail');
 
 require('./home');
 require('./list');
-require('./detail');
\ No newline at end of file
+require('./detail');
+require('./star-classroom');
+require('./calendar');
\ No newline at end of file

+/**
+ * 星潮教室
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/4/11
+ */
+
+var $ = require('jquery'),
+    Swiper = require('yoho.iswiper');
+
+var bannerSwiper, collocationSwiper;
+
+if ($('.banner-swiper').find('li').length > 1) {
+    bannerSwiper = new Swiper('.banner-swiper', {
+        lazyLoading: true,
+        lazyLoadingInPrevNext: true,
+        loop: true,
+        autoplay: 3000,
+        autoplayDisableOnInteraction: false,
+        paginationClickable: true,
+        slideElement: 'li',
+        pagination: '.banner-top .pagination-inner'
+    });
+}
+
+if ($('.collocation-swiper').find('li').length > 1) {
+    collocationSwiper = new Swiper('.collocation-swiper', {
+        lazyLoading: true,
+        lazyLoadingInPrevNext: true,
+        lazyLoadingOnTransitionStart: true,
+        grabCursor: true,
+        slidesPerView: 'auto',
+        slideElement: 'li',
+        watchSlidesVisibility: true
+    });
+}
+
+if ($('.artice-zan').find('li').length > 0) {
+    $('.zan-more').show();
+}
+
+$('.add-intimacy').on('click', function() {
+    $('.pop-intimacy').show();
+    $('.mask').show();
+
+    $('body').css({
+        overflow: 'hidden'
+    });
+});
+
+$('.pop-intimacy .pop-close, .mask').on('click', function() {
+    $('.pop-intimacy').hide();
+    $('.mask').hide();
+
+    $('body').css({
+        overflow: 'visible'
+    });
+});

-@import "tvls", "info", "plus-star", "info-list", "detail";
\ No newline at end of file
+@import "tvls", "info", "plus-star", "info-list", "detail", "star-classroom";
\ No newline at end of file

+body {
+    width: 100%;
+    background: #333;
+    font: 12px/1.5 Arial,'黑体';
+}
+
+.star-classroom {
+    img {
+        max-width: 100%;
+        display: block;
+        border: 0;
+        margin: 0 auto;
+    }
+
+    a {
+        text-decoration: none;
+        outline: none;
+        color: #000;
+
+        &:link,
+        &:visited,
+        &:hover,
+        &:actived {
+            color: #000;
+        }
+    }
+
+    *:focus {
+        outline: none;
+    }
+
+    .font-bold {
+        font-weight: bold;
+    }
+
+    .classroom-mask {
+        background-color: rgba(0,0,0,.5);
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9;
+        display: none;
+    }
+
+    .head-tab {
+        width: 100%;
+        height: 88rem / $pxConvertRem;
+        background: #000;
+
+        li {
+            width: 25%;
+            text-align: center;
+            float: left;
+            line-height: 88rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+
+            a {
+               color: #b0b0b0;
+               display: inline-block;
+            }
+
+            &.cur a{
+                color: #fff;
+            }
+        }
+    }
+
+    .banner-top {
+        width: 100%;
+        height: 310rem / $pxConvertRem;
+        margin-top: 30rem  / $pxConvertRem;
+        position: relative;
+
+        .banner-swiper {
+            width: 100%;
+            height: 310rem / $pxConvertRem;
+            overflow: hidden;
+            position: relative;
+
+            ul {
+                position: relative;
+                height: 310rem / $pxConvertRem;
+
+                li {
+                    float: left;
+                    width: 100%;
+                    height: 310rem / $pxConvertRem;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+        }
+
+        .swiper-pagination {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 20rem / $pxConvertRem;
+            text-align: center;
+            z-index: 1;
+
+            .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;
+                    }
+                }
+            }
+        }
+    }
+
+    .home-floor-sign {
+        width: 100%;
+        height: 220rem / $pxConvertRem;
+        margin-top: 30rem / $pxConvertRem;
+        background: #000;
+
+        .nav-left {
+            width: 102rem / $pxConvertRem;   
+            margin: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
+            text-align: center;
+            float: left;
+
+            .user-name {
+                font-size: 24rem / $pxConvertRem;
+                color: #fff;
+                margin-top: 30rem / $pxConvertRem;
+                white-space: nowrap;
+            }
+        }
+
+        .nav-main {
+            width: 252rem / $pxConvertRem;
+            height: 90rem / $pxConvertRem;
+            float: left;
+            background-image: image-url("guang/star-classroom/user_info_bg.png");
+            background-repeat: no-repeat;
+            background-size: contain;
+            margin:36rem / $pxConvertRem 0 0 10rem / $pxConvertRem;
+
+            p {
+                color: #fff;
+                line-height: 44rem / $pxConvertRem;
+                font-size: 24rem / $pxConvertRem;
+                margin-left: 30rem / $pxConvertRem;
+                white-space: nowrap;
+            }
+        }
+
+        .nav-right {
+            width: 195rem / $pxConvertRem;
+            text-align: center;
+            float: right;
+
+            .wyf-img {
+                width: 119rem / $pxConvertRem;
+                height: 108rem / $pxConvertRem;
+                margin-top: 30rem / $pxConvertRem;
+                background-image: image-url("guang/star-classroom/home-wyf.png");
+                background-repeat: no-repeat;
+                background-size: contain;
+                display: inline-block;
+            }
+
+            .add-intimacy {
+                width: 131rem / $pxConvertRem;
+                height: 52rem / $pxConvertRem;
+                background-image: image-url("guang/star-classroom/add_intimacy_bg.png");
+                background-repeat: no-repeat;
+                background-size: contain;
+                color: #fff;
+                font-size: 22rem / $pxConvertRem;
+                display: inline-block;
+                white-space: nowrap;
+                line-height: 66rem / $pxConvertRem;
+                margin-left: 12rem / $pxConvertRem;
+            }
+        }
+
+        img {
+            width: 100rem / $pxConvertRem;
+            height: 100rem / $pxConvertRem;
+            border-radius: 50%;
+            border: 2rem / $pxConvertRem solid #e0e0e0;
+        }
+    }
+
+    .floor-more {
+        width: 100%;
+        height: 88rem / $pxConvertRem;
+        background: #000;
+        position: relative;
+        margin-top: 30rem / $pxConvertRem;
+
+        h2 {
+            color: #fff;
+            font-size: 34rem / $pxConvertRem;
+            line-height: 88rem / $pxConvertRem;
+            text-align: center;
+        }
+
+        .more-btn {
+            width: 64rem / $pxConvertRem;
+            height: 96rem / $pxConvertRem;
+            background-image: image-url("guang/star-classroom/more.png");
+            background-repeat: no-repeat;
+            background-size: contain;
+            position: absolute;
+            right: 26rem / $pxConvertRem;
+            top: 0;
+        }
+    }
+
+    .home-floor-subject {
+        .subject-banner,
+        .subject-video-area {
+            width: 100%;
+            height: 310rem / $pxConvertRem;
+        }
+
+        .subject-video-area {
+            margin-top: 30rem / $pxConvertRem;
+            background: #000;
+
+            #subject-video {
+                width: 100%;
+                height: 310rem / $pxConvertRem;
+            }
+        }
+    }
+
+    .home-floor-collocation {
+        background: #000;
+        padding-bottom: 60rem / $pxConvertRem;
+
+        .collocation-big-img {
+            width: 100%;
+            height: 277rem / $pxConvertRem;
+            padding: 0 14rem / $pxConvertRem;
+            box-sizing: border-box;
+
+            li {
+                width: 276rem / $pxConvertRem;
+                height: 277rem / $pxConvertRem;
+                margin: 0 15rem / $pxConvertRem;
+                float: left;
+
+                img {
+                    height: 100%;
+                }
+            }
+        }
+
+        .collocation-img {
+            width: 100%;
+            height: 139rem / $pxConvertRem;
+            margin-top: 30rem / $pxConvertRem;
+            position: relative;
+
+            .collocation-swiper {
+                width: 100%;
+                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%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .pop-intimacy {
+        width: 580rem / $pxConvertRem;
+        height: 910rem / $pxConvertRem;
+        background: #fff;
+        border-radius: 10rem / $pxConvertRem;
+        position: fixed;
+        top:20rem / $pxConvertRem;
+        left: 30rem / $pxConvertRem;
+        z-index: 10;
+        display: none;
+
+        .intimacy-head {
+            text-align: center;
+            color: #444;
+            height: 140rem / $pxConvertRem;
+            padding-top: 20rem / $pxConvertRem;
+            box-sizing: border-box;
+            position: relative;
+
+            .pop-close {
+                width: 25rem / $pxConvertRem;
+                height: 25rem / $pxConvertRem;
+                background-image: image-url("guang/star-classroom/pop-close.png");
+                background-repeat: no-repeat;
+                background-size: contain;
+                position: absolute;
+                right: 20rem / $pxConvertRem;
+                top: 24rem / $pxConvertRem;
+            }
+
+            h1 {
+                font-size: 56rem / $pxConvertRem;
+                font-weight: bold;
+                line-height: 40rem / $pxConvertRem;
+            }
+
+            h4 {
+                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;
+                }
+            }
+
+            .increased {
+                font-size: 24rem / $pxConvertRem;
+                display: none;
+
+                span {
+                    color: red;
+                }
+            }
+        }
+
+        .calendar {
+            width: 100%;
+            float: left;
+
+            .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;
+                }
+            }
+
+            .dayItem {
+                float: left;
+                width: 100%;
+                padding: 10px 23rem / $pxConvertRem;
+                box-sizing: border-box;
+
+                .item {
+                    width: 76rem / $pxConvertRem;
+                    color: #444;
+                    float: left;
+                    text-align: center;
+                    cursor: pointer;
+                    margin: 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;
+                    }
+                }            
+            }        
+        }
+
+        .fan-charts {
+            width: 100%;
+            height: 88rem / $pxConvertRem;
+            border-top: 1px solid #d5d5d5;
+            text-align: center;
+            position: relative;
+            float: left;
+
+            h2 {
+                font-size: 28rem / $pxConvertRem;
+                color: #444;
+                line-height: 88rem / $pxConvertRem;
+            }
+
+            .arrow {
+                width: 88rem / $pxConvertRem;
+                height: 88rem / $pxConvertRem;
+                background-image: image-url("guang/star-classroom/arrow.png");
+                background-repeat: no-repeat;
+                background-size: contain;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+        }
+
+        .fan-charts-cont {
+            width: 100%;
+            line-height: 88rem / $pxConvertRem;
+            float: left;
+
+            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;
+                }
+
+                img {
+                    width: 60rem / $pxConvertRem;
+                    height: 60rem / $pxConvertRem;
+                    border-radius: 50%;
+                    position: relative;
+                    top: 15rem / $pxConvertRem;
+                    margin-left: 20rem / $pxConvertRem;
+                }
+
+                .fans-name {
+                    margin-left: 24rem / $pxConvertRem;
+                    font-size: 24rem / $pxConvertRem;
+                    color: #444;
+                }
+
+                .fans-intimacy {
+                    float: right;
+                    font-size: 20rem / $pxConvertRem;
+                    color: #444;
+
+                    span {
+                        font-size: 24rem / $pxConvertRem;
+                        color: #d0021b;
+                        margin-left: 5rem / $pxConvertRem;
+                    }
+                }
+            }
+
+            li > * {
+                float: left;
+            }
+        }
+    }
+
+    .things-article {
+        width: 100%;
+        float: left;
+    }
+
+    .things-article > li {
+        width: 100%;
+        float: left;
+        padding: 0 0 30rem / $pxConvertRem 30rem / $pxConvertRem;
+        box-sizing: border-box;
+        background: #000;
+
+        .author-info {
+            width: 100%;
+            padding-top: 30rem / $pxConvertRem;
+            float: left;
+            border-top:1px solid #b0b0b0;
+
+            img {
+                width: 70rem / $pxConvertRem;
+                height: 70rem / $pxConvertRem;
+                border-radius: 50%;
+                float: left;
+            }
+
+            .author-nav {
+                float: left;
+                margin-left: 20rem / $pxConvertRem;
+                overflow: hidden;
+
+                h2 {
+                    font-size: 28rem / $pxConvertRem;
+                    color: #fff;
+                }
+
+                .article-count {
+                    font-size: 24rem / $pxConvertRem;
+                    color: #b0b0b0;
+
+                    span {
+                        margin-right:22rem / $pxConvertRem;
+
+                        &.see-ico {
+                            width: 31rem / $pxConvertRem;
+                            height: 24rem / $pxConvertRem;
+                            background-image: image-url("guang/star-classroom/see.png");
+                            background-repeat: no-repeat;
+                            background-size: contain;
+                            padding-left: 40rem / $pxConvertRem;
+                        }
+                    }
+                }
+            }
+        }
+
+        .artice-cont {
+            width: 100%;
+            margin-top: 30rem / $pxConvertRem;
+            float: left;
+
+            p {
+                width: 100%;
+                height: 180rem / $pxConvertRem;
+                font-size: 28rem / $pxConvertRem;
+                line-height: 46rem / $pxConvertRem;
+                padding-right: 30rem / $pxConvertRem;
+                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: 30rem / $pxConvertRem;
+                float: left;
+            }
+
+            .artice-imgs > li {
+                float: left;
+                width: 190rem / $pxConvertRem;
+                height: 190rem / $pxConvertRem;            
+                margin-right: 5rem / $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;        
+
+            .zan-ico {
+                width: 34rem / $pxConvertRem;
+                height: 34rem / $pxConvertRem;
+                background-image: image-url("guang/star-classroom/zan.png");
+                background-repeat: no-repeat;
+                background-size: contain;
+                float: left;
+                margin: 9rem / $pxConvertRem 53rem / $pxConvertRem 0 14rem / $pxConvertRem;
+            }
+
+            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%;
+                    }
+                }
+            }
+
+            .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 {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+
+        li {
+            width: 100%;
+            float: left;
+            background: #000;
+            margin-top: 30rem / $pxConvertRem;
+
+            img {
+                width: 100%;
+            }
+
+            p {
+                width: 100%;
+                height: 88rem / $pxConvertRem;
+                box-sizing: border-box;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                padding: 0 34rem / $pxConvertRem;
+                font-size: 34rem / $pxConvertRem;
+                line-height: 88rem / $pxConvertRem;
+            }
+
+            a {
+                color: #fff;
+            }
+        }
+    }
+
+    .collocation-list {
+        width: 100%;
+
+        li {
+            float: left;
+            width: 100%;
+            margin-top: 30rem / $pxConvertRem;
+            background: #000;
+
+            .cont-area {
+                width: 100%;
+                box-sizing: border-box;
+                padding: 30rem / $pxConvertRem;
+            }
+
+            .cont-txt {
+                font-size: 30rem / $pxConvertRem;
+                line-height: 46rem / $pxConvertRem;
+                color: #b0b0b0;
+                margin-top: 10rem / $pxConvertRem;
+            }
+
+            img {
+                width: 100%;
+            }
+
+            .title {
+                font-size: 42rem / $pxConvertRem;
+                line-height: 48rem / $pxConvertRem;
+
+                a {
+                    color: #fff;
+                }
+            }
+
+            .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 {
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        display: inline-block;
+                        margin-right: 5rem / $pxConvertRem;
+                    }
+
+                    &.time {
+                        float: left;
+                    }
+
+                    &.see {
+                        float: left;
+                        margin-left: 20rem / $pxConvertRem;
+                    }
+
+                    .time-ico {
+                        width: 24rem / $pxConvertRem;
+                        height: 24rem / $pxConvertRem;
+                        background-image: image-url("guang/star-classroom/time.png");
+                    }
+
+                    .see-ico {
+                        width: 31rem / $pxConvertRem;
+                        height: 24rem / $pxConvertRem;
+                        background-image: image-url("guang/star-classroom/see.png");
+                    }
+
+                    &.zan {
+                        position: absolute;
+                        right: 122rem / $pxConvertRem;
+
+                        .zan-ico {
+                            width: 34rem / $pxConvertRem;
+                            height: 32rem / $pxConvertRem;
+                            background-image: image-url("guang/star-classroom/xin.png");
+                            vertical-align: text-bottom;
+                        }
+                    }
+
+                    &.forward {
+                        width: 40rem / $pxConvertRem;
+                        height: 28rem / $pxConvertRem;
+                        background-image: image-url("guang/star-classroom/forward.png");
+                        position: absolute;
+                        right: 23rem / $pxConvertRem;
+                        margin-left: 45rem / $pxConvertRem;
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                    }
+                }
+            }
+        }
+    }
+
+    .things-list {
+        .things-article > li {
+            margin-top: 30rem / $pxConvertRem;
+
+            .author-info {
+                border-top: none;
+            }        
+        }
+    }
+
+    .check-in {
+        background: #f0f0f0;
+
+        .check-in-header {
+            width: 100%;
+            height: 283rem / $pxConvertRem;
+            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;
+
+                img {
+                    width: 100rem / $pxConvertRem;
+                    height: 100rem / $pxConvertRem;
+                    border-radius: 50%;
+                    border:4rem / $pxConvertRem solid;
+                    border-color: rgba(255,255,255,.6);
+                }
+
+                .user-name {
+                    color: #fff;
+                    font-size: 24rem / $pxConvertRem;
+                    font-weight: bold;
+                    margin-top: 15rem / $pxConvertRem;
+                }
+            }
+
+            .count-area {
+                width: 100%;
+                float: left;
+            }
+
+            .count-nav {
+                width: 319rem / $pxConvertRem;
+                float: left;
+                margin-top: 12rem / $pxConvertRem;
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #fff;
+                    line-height: 32rem / $pxConvertRem;
+                }
+            }
+
+            .line {
+                width: 2rem / $pxConvertRem;
+                height: 46rem / $pxConvertRem;
+                float: left;
+                margin-top: 26rem / $pxConvertRem;
+                box-sizing: border-box;
+                border-left: 1px solid #fff;
+            }
+        }
+
+        .ranking-area {
+            width: 100%;
+            background: #fff;
+            border-top: 1px solid #e0e0e0;
+            margin-top: 30rem / $pxConvertRem;
+            padding-left: 30rem / $pxConvertRem;
+            box-sizing: border-box;
+
+            li {
+                width: 100%;
+                height: 120rem / $pxConvertRem;
+                padding-top: 20rem / $pxConvertRem;
+                box-sizing: border-box;
+                border-bottom: 1px solid #e0e0e0;
+
+                img {
+                    width: 80rem / $pxConvertRem;
+                    height: 80rem / $pxConvertRem;
+                    border-radius: 50%;
+                    float: left;
+                }
+
+                .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;
+                    }
+                }
+
+                .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;
+                    }
+                }
+            }
+        }
+    }   
+}

+{{# trendClassCheckIn}}
+    {{> layout/header}}
+    <div class="star-classroom">
+        <div class="check-in">
+            <div class="check-in-header">
+                <div class="head-cont">
+                    <img src="{{userImg}}" />
+                    <p class="user-name">{{userName}}</p>
+                </div>
+                <div class="count-area">
+                    <div class="count-nav">
+                        <p>{{rankNum}}</p>
+                        <p>排名</p>
+                    </div>
+                    <div class="line"></div>
+                    <div class="count-nav">
+                        <p>{{intimacy}}</p>
+                        <p>亲密度</p>
+                    </div>
+                </div>
+            </div>
+
+            <ul class="ranking-area">
+                {{#each rankingList}}
+                    <li {{#if highLigth}} class="high-light" {{/if}}>
+                        <img src="{{img}}" />
+                        <div class="ranking-mid">
+                            <i class="rank-ico">{{num}}</i>
+                            <p class="rank-name">{{userName}}</p>
+                        </div>
+                        <div class="ranking-rg">亲密度<span class="intimacy {{#if @first}}font-bold{{/if}}">{{intimacyNum}}</span></div>
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+    {{> layout/footer}}
+{{/trendClassCheckIn}}

+{{# trendClassCollocation}}
+    {{> layout/header}}
+    <div class="star-classroom"> 
+        {{> guang/head-tab}}
+        <ul class="collocation-list">
+            {{#each collocationList}}
+                <li>
+                    {{#if img}}
+                        <a href="{{url}}"><img src="{{img}}" /></a>
+                    {{/if}}
+                    <div class="cont-area">
+                        <h2 class="title"><a href="{{url}}">{{title}}</a></h2>
+                        <p class="cont-txt">{{content}}</p>
+                        <div class="count-area">
+                            <span class="time"><i class="time-ico"></i>{{time}}</span>
+                            <span class="see"><i class="see-ico"></i>{{seeNum}}</span>
+                            <span class="zan"><i class="zan-ico"></i>{{zanNum}}</span>
+                            <span class="forward"></span>
+                        </div>
+                    </div>
+                </li>
+            {{/each}}
+        </ul>
+    </div>
+    {{> layout/footer}}
+{{/trendClassCollocation}}
\ No newline at end of file

+{{# trendClassHome}}
+    {{> layout/header}}
+    <div class="star-classroom">
+        {{> guang/head-tab}}
+        {{> guang/banner-top}}
+        {{> guang/home-floor-sign}}
+        {{> guang/home-floor-subject}}
+        {{> guang/home-floor-collocation}}
+        {{> guang/home-floor-things}}
+    </div>
+    {{> layout/footer}}
+{{/trendClassHome}}

+{{# trendClassSubject}}
+    {{> layout/header}}
+    <div class="star-classroom"> 
+        {{> guang/head-tab}}
+        <ul class="subject-list">
+            {{#each subjectList}}
+                <li>
+                    <a href="{{url}}">
+                        <img src="{{img}}" />
+                        <p>{{title}}</p>
+                    </a>            
+                </li>
+            {{/each}}
+        </ul>
+    </div>
+    {{> layout/footer}}
+{{/trendClassSubject}}
\ No newline at end of file

+{{# trendClassThings}}
+<div class="star-classroom">
+    {{> guang/head-tab}}
+    <div class="things-list">
+        {{> guang/things-article}}
+    </div>
+</div>
+{{/trendClassThings}}

+<div class="banner-top">
+    <div class="banner-swiper swiper-container">
+        <ul class="swiper-wrapper">
+            {{#each bannerList}}
+                {{#if @first}}
+                <li class="swiper-slide">
+                    <a href="{{url}}">
+                        <img src="{{img}}">
+                    </a>
+                </li>
+                {{^}}
+                <li class="swiper-slide">
+                    <a href="{{url}}">
+                        <img class="swiper-lazy" data-src="{{img}}">
+                    </a>
+                    <div class="swiper-lazy-preloader"></div>
+                </li>
+                {{/if}}
+            {{/each}}
+        </ul>
+    </div>
+    <div class="swiper-pagination">
+        <div class="pagination-inner">
+        </div>
+    </div>
+</div>
\ No newline at end of file

+{{# title}}
+    <div class="floor-more">
+        <h2>{{title}}</h2>
+        <a class="more-btn" href="{{moreUrl}}">&nbsp;</a>
+    </div>
+{{/ title}}
\ No newline at end of file

+<ul class="head-tab">
+    {{#each headTab}}
+    <li {{#if cur}} class="cur" {{/if}}><a href="{{ url }}">{{ name }}</a></li>
+    {{/each}}
+</ul>

+{{# starCollocation}}
+    {{> guang/floor-header-more}}
+    <div class="home-floor-collocation">
+        <ul class="collocation-big-img">
+            {{#each collocationBigImg}}
+                <li><a href="{{url}}"><img src="{{img}}" /></a></li>
+            {{/each}}
+        </ul>
+        <div class="collocation-img">
+            <div class="collocation-swiper swiper-container">
+                <ul class="swiper-wrapper">
+                    {{#each collocationList}}
+                        <li class="swiper-slide">
+                            <a href="{{url}}">
+                                <img class="swiper-lazy" data-src="{{img}}">
+                            </a>
+                            <div class="swiper-lazy-preloader"></div>
+                        </li>
+                    {{/each}}
+                </ul>
+            </div>
+        </div>
+    </div>
+{{/ starCollocation}}
\ No newline at end of file

+{{# homeSign}}
+    <div class="home-floor-sign">
+        <div class="nav-left">
+            <img src="{{portraitUrl}}" />
+            <p class="user-name">{{username}}</p>
+        </div>
+        <div class="nav-main">
+            <p>我的排名：{{rank}}</p>
+            <p>累计亲密度：{{intimacy}}</p>
+        </div>
+        <div class="nav-right">
+            <i class="wyf-img"></i>
+            <span class="add-intimacy">增加亲密度</span>
+        </div>    
+    </div>
+    {{> guang/pop-intimacy}}
+{{/ homeSign}}
\ No newline at end of file

+{{# starSubject}}
+    {{> guang/floor-header-more}}
+    <div class="home-floor-subject">
+        {{# subjectBanner}}
+            <a href="{{url}}"><img src="{{img}}" class="subject-banner"/></a>
+        {{/ subjectBanner}}
+
+        {{# subjectVideo}}
+            <div class="subject-video-area">
+                <video id="subject-video" controls="controls" poster="{{videoImg}}" autobuffer>
+                    <source src="{{videoUrl}}">
+                </video>
+            </div>
+        {{/ subjectVideo}}
+    </div>
+{{/ starSubject}}
\ No newline at end of file

+{{# starThings}}
+    {{> guang/floor-header-more}}
+    {{> guang/things-article}}
+{{/ starThings}}
\ No newline at end of file

+<div class="pop-intimacy">
+    <div class="intimacy-head">
+        <div class="pop-close"></div>
+        <h1 class="cur-year"></h1>
+        <h4 class="cur-month"></h4>
+        <div class="my-intimacy">亲密度 <span>+{{intimacyNum}}</span></div>
+        <div class="increased">今日已增加<span>{{intimacyNum}}</span>,明日再来哦！</div>
+    </div>
+    <div class="calendar">
+        <input type="hidden" value="{{signDay}}" class="sign-day" />
+        <div class="week">
+            {{#each week}}
+                <h3>{{this}}</h3>
+            {{/each}}
+        </div>
+        <div id="Container"></div>
+    </div>
+    <div class="fan-charts">
+        <h2>新潮粉丝榜</h2>
+        <a href="{{url}}" class="arrow">&nbsp;</a>
+    </div>
+    <ul class="fan-charts-cont">
+        {{#each fanCharts}}
+            <li>
+                <i class="rank-ico">{{num}}</i>
+                <img src="{{img}}" />
+                <span class="fans-name">{{name}}</span>
+                <div class="fans-intimacy">亲密度<span {{#if @first}}class="font-bold"{{/if}}>{{intimacyNum}}</span></div>
+            </li>
+        {{/each}}
+    </ul>
+</div>
+<div class="classroom-mask"></div>
\ No newline at end of file

+{{# thingsArticle}}
+    {{> layout/header}}
+    <ul class="things-article">
+        {{#each articles}}
+            <li>
+                <div class="author-info">
+                    <img src="{{authorImg}}" />
+                    <div class="author-nav">
+                        <h2>{{authorname}}</h2>
+                        <p class="article-count"><span>{{releaseTime}}</span><span class="see-ico">{{seeNum}}</span></p>
+                    </div>
+                </div>
+                <div class="artice-cont">
+                    <a href="{{url}}">
+                        <p>{{articeTxt}}</p>
+                        <ul class="artice-imgs">
+                            {{#each articeImg}}
+                                <li><img src="{{img}}" /></li>
+                            {{/each}}
+                        </ul>
+                    </a>
+                </div>
+                <div class="artice-zan">
+                    <div class="zan-ico"></div>
+                    <ul>
+                        {{#each zanUser}}
+                            <li><img src="{{img}}" /></li>
+                        {{/each}}
+                    </ul>
+                    <div class="zan-more">{{zanNum}}+</div>
+                </div>
+            </li>
+        {{/each}}
+    </ul>
+    {{> layout/footer}}
+{{/ thingsArticle}}
\ No newline at end of file

@@ -341,3 +341,12 @@
 </script>
 {{/if}}
 
+{{!-- 星潮教室 --}}
+{{#if trendClassHomePage}}
+<script>
+    seajs.use('js/guang/star-classroom');
+    seajs.use('js/guang/calendar');
+</script>
+{{/if}}
+
+