@import "@/styles/theme.scss";
@import "@/styles/mixins.scss";

.activity-box{
    // height:626px;
    background:#fff;
    padding: 0 30px;
    border-bottom:20px solid #f5f5f5;
    position: relative;
    padding-bottom: 32px;
    .section-head  {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30px 0;

        .section-head__title {
            font-size: 40px;
            font-weight: 600;
          }
          .section-head__more {
            font-size: 26px;
            color: #A1A1A1;
            display: flex;
            align-items: center;
      
            .iconfont {
              font-size: 26px;
              color: #A1A1A1;
              font-family: "iconfont" !important;
              margin-left: 6px;

            }
            .icon-more:before {
                content: "\e636";       
            }
          }
        }
    .activity-list{
        position: relative;
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
        display: inline-flex;
        padding-bottom: 10px;
        .item{
            width:330px;
            height:452px;
            background:#fff;
            box-shadow: 0 4px  8px 0 rgba(0, 0, 0, 0.16);
            margin: 0 20px  0 2px;
            border-radius:12px;
            position: relative;
            .type{
                position: absolute;
                left:0;
                top:0;
                color: #fff;
                background:#F6B61D;
                padding: 10px 36px;
                border-radius: 12px 0 12px 0;
                font-size: 24px;
              }
              .type2{
                position: absolute;
                left:0;
                top:0;
                color: #fff;
                background:#FF7D00;
                // background:#BB9C79;
                padding: 12px 36px;
                border-radius: 12px 0 12px 0;
                font-size: 24px;
            
              }
            .img{
              width: 330px;
              height: 186px;  
              border-radius:12px 12px 0 0;
            }
            .title{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                height: 80px;
                color: #666666;
                font-size: 28px;
                margin: 16px 10px 4px 10px;
            }
            .time{
                color: #999;
                font-size: 24px;
                margin: 4px 10px ;
            }
            .btn {

                background:#DADADA;
                border-radius:30px;
                text-align: center;
                color: white;
                display: block;
                width: 148px;
                font-size: 26px;
                height: 48px;
                line-height: 48px;
                margin-top: 14px;
                margin: 20px auto;
              }
              .jionin{
                background:#FF6A6A;
              }
                  .nostart {
                
                background:#FDC080;
              }
              .jioned{
                background: #9B9B9B;
              }
        }
        
    }
    
  }