caimei365-www/src/main/resources/static/css/index/index_new.h5.css

 /* 首页导航 */
.mNavBox{width:100%;margin:0 auto;padding:2.2vw 0;position:relative;background:#FFF;}
.mNavBox .nav{width:25vw;margin:0;display:block;box-sizing: border-box;padding:2.2vw 0;text-align:center;color:#4A4F58;font-size:3.4vw;float: left;}
.mNavBox .nav-icon{display:block;width: 11vw;height: 11vw;margin: 0 auto;}
.mNavBox .nav p{line-height:6.4vw;white-space:nowrap;width: 100%;}
/* 轮播 */
#swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
#swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
#swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block;max-width:none;}
#swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
#swiper-container .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
#swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
#swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
#swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
 .section_page{
        width: 100%;
        height: auto;
    }
    .section_page .section_page_title{
        padding: 4.8vw 0 2.4vw 3.2vw;
        position: relative
    }
    .section_page .section_page_title h1{
        font-weight: bold;
        color: #4a4f58;
        font-size: 4.8vw;
        line-height: 9.7vw;
    }
    .section_page .section_page_title p{
        font-weight: normal;
        color: #93979f;
        font-size: 3.4vw;
        line-height: 4.3vw;
    }
    .section_page .page_main_item{
        width: 45.6vw;
        height: 68vw;
        overflow: hidden;
        margin: 0 1.3vw 2.6vw 1.3vw;
        background: #fff;
        text-align: left;
    }
    .section_page .page_main_image{
        width: 45.6vw;
        height: 45.6vw;
    }
    .section_page .page_main_text{
        padding: 0 3.2vw;
        height: 9.3vw;
        line-height: 4.8vw;
        font-size: 3.4vw;
        vertical-align: middle;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 2vw;
    }
    .section_page .page_main_item.ad_02 img,.section_page .page_main_item.ad_03 img,.section_page .page_main_item.ad_01 img{
        height: 100%;
        width: 100%;
    }
    .section_page .page_main_price{
        width: 100%;
        box-sizing: border-box;
        padding:0 3.2vw;
    }
    .section_page .page_main_price .price_text_tag{
        width: 100%;
        box-sizing: border-box;
        float: left;
        margin: 1.3vw 0 0vw 0;
    }
    .section_page .page_main_price .main_price_show{color:#f94b4b }
    .section_page .page_main_price .main_price_unde{
        width: 100%;
        height: 6.5vw;
        line-height: 6.5vw;
        font-size: 3.4vw;
        color: #4a4f58;
        text-align: left;
        float: left;
    }
    .section_page .page_main_price .price_text_tag .listTag{
        padding: 0 2vw;
        border: .27vw solid #ffe6dc;
        background: none;
        font-size: 2.8vw;
        float: left;
        height: 4.2vw;
        line-height: 4.2vw;
    }
    .section_page .page_main_item.ad_01,.section_page .page_main_li.ad_01{
        width: 93.6vw;
        height: 24vw;
    }
    .section_page .section_page_main{
        margin: auto;
        width: 97vw;
        height: 140vw;
        overflow: hidden;
    }
    .section_page .section_page_main.type_03 {
        height: 167vw;
    }
    .section_page .section_page_more .more{
        width: 20vw;
        height: 6.4vw;
        margin: 5vw auto;
        border: .27vw solid #cccccc;
        color: #909090;
        font-size: 3vw;
        line-height: 6.4vw;
        border-radius: .54vw;
        position: relative;
        text-indent: 2vw;
    }
    .section_page .section_page_more .more .icon:before {
        background-position: -51.5vw 0px;
        width:5.4vw;
        height: 6.7vw;
        right: 0;
        position: absolute;
    }
    .section_page .page_main_li{
        width: 21.6vw;
        height: 26.6vw;
        float: left;
        margin-right: 2.4vw;
        margin-bottom: 2.4vw;
        background-color: #FFFFFF;
        display: block;
    }
    .section_page .page_main_li .page_main_logo{
        width: 100%;
        height: 21.6vw;
        display: block;
        float: left;
    }
    .section_page .page_main_li .page_main_name{
        width: 100%;
        height: 5vw;
        float: left;
        line-height: 5vw;
        text-align: center;
        font-size: 2.6vw;
        color: #4a4f58;
        background-color: #f9f9f9;
    }
     .section_page_bottom{
        width:97vw;
        padding: 3.2vw;
        overflow: hidden;
    }
    .page_main_li.ad_01 img{
        width: 100%;
        height: 100%;
    }
    .section_right{
        padding: 3.2vw;
    }
    .box {
        white-space: nowrap;
        overflow-x: auto;
    }
    .section_right .section_right_item{
        display: inline-block;
        width: 42.2vw;
        height: 61.6vw;
        background: #fff;
        margin-right: 2.4vw;
    }
    .section_right .right_item_title{
        overflow: hidden;
        padding: 2.4vw;
    }
    .section_right .right_item_title p{
        float: left;
        font-size: 3.4vw;
        font-weight: bold;
        color: #4a4f58;
        text-align: left
    }
    .section_right .right_item_title a{
        display: inline-block;
        float: right;
        font-size: 3.2vw;
        color: #909090;
        text-align: right;
    }
    .section_right .right_item_main{
        height: auto;
        padding: .54vw 2.4vw;
    }
    .section_right .item_banner{
        width: 37.4vw;
        height: 37.4vw;
        display: block;
        position: relative;
    }
   .section_right .item_banner img{
       width: 100%;
       height: 100%;
   }
   .section_right .item_banner .name{
        width: 100%;
        height: 6.4vw;
        position: absolute;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        line-height: 6.4vw;
        font-size: 3.2vw;
        color: #ffffff;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 2.7vw;
        box-sizing: border-box;
   }
   .section_right .item_banner .statu{
        height: 5.8vw;
        border-radius: 2.9vw;
        background: rgba(0,0,0,0.4);
        position: absolute;
        left:2vw;
        top: 2vw;
   }
   .section_right .item_banner .statu p{
        float: left;
        width: 13.3vw;
        text-align: center;
        font-size:2.6vw;
        line-height: 5.8vw;
        color: #FFF;
   }
   .section_right .item_banner .statu i {
        display: block;
        width: 3.7vw;
        height: 3.7vw;
        float: left;
        margin:1.1vw .54vw 0 .54vw;
    }
    .section_right .item_text .item_text_name{
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        position: relative;
        color: #4a4f58;
        font-size: 3.2vw;
        padding-left: 2.7vw;
    }
    .section_right  .item_text .item_text_name:before{
        content: '';
        width: 1.1vw;
        height: 1.1vw;
        border-radius: 50%;
        background-color: #cccccc;
        position: absolute;
        left: 0;
        top: 1.7vw
    }
    .section_page .section_page_main.max{
        height:auto;
    }
    .section_page .page_main_item.ad_01.bottom {
        margin: 2.4vw auto;
        display: block;
    }
     .section_page .page_main_price .icon:before { width:15.8vw;height: 5vw}
    .section_page .page_main_price .price_grade_1:before{
        background-position: -84vw -69.5vw;
    }
    .section_page .page_main_price .price_grade_2:before{
        background-position: -84vw -76.5vw;
    }
    .section_page .page_main_price .price_grade_3:before{
        background-position: -84vw -83.7vw;
    }
    .section_page .page_main_price .price_grade_4:before{
         background-position: -84vw -90.7vw;
    }
    .section_page .page_main_price .price_grade_5:before{
        background-position: -84vw -97.5vw;
    }
    .section_page .page_main_price .main_price_none .listTag{
        padding: 0 2vw;
        border: .27vw solid #ffe6dc;
        background: none;
        font-size: 2.8vw;
        float: right;
    }
    .section_page .page_main_price .price_grade{
        display: block;
        height: 7vw;
        line-height: 7vw;
        color: #4A4F58;
        font-style: normal;
        float: left;
    }
    .section_page .page_main_price .price_grade .icon {
        display: inline-block;
        font-size: 0;
        height: 5vw;
        line-height: 5vw;
        vertical-align: text-bottom;
    }
.section_page .page_main_tag {
        color: #9aa5b5;
        margin:1vw 3.2vw;
        border: .27vw solid #e3ebf7;
        display: inline-block;
        padding: 0 1.3vw;
        border-radius: .54vw;
    }
.price_grade .bold{font-weight: bold}
.section_right .item_banner .statu .icon-live{
    display: block;
    width: 3vw;
    height: 3vw;
    float: left;
    margin: 1.6vw 0 0 1.6vw;
    background: url("/img/live/icon-live.h5.gif");
    background-size: cover;
}
.section_right .item_banner .statu .mIcon.icon-end:before{
    width: 5.3vw;
    height: 4vw;
    background-position: -63.8vw -69vw;
}
.section_right .item_banner .statu .mIcon.icon-wart:before{
    width:5.3vw;
    height: 4vw;
    background-position: -59vw -69vw;
}