.mainPage{
  background: #fff;
  nav{
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
    padding: .09rem 0;
    background: #fff;
    z-index: 100;
    position: relative;
    a{
      line-height: .32rem;
      text-align: center;
      position: relative;
      &.active::after{
        content: '';
        width: 20%;
        height: .02rem;
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        background: #fc6243;
      }
    }
  }
  .box{
    padding: .25rem .25rem 0;
    box-sizing: border-box;
    .fitness-card{
      overflow: hidden;
      background: rgba(255,255,255,1);
      box-shadow: 0px 2px .1rem 0px rgba(193,204,217,0.5);
      border-radius: 8px;
      margin-bottom: .2rem;
      position: relative;
      .opacity {
        opacity: .5;
      }
      .gray {
        filter: grayscale(100%);
      }
      .card-top{
        display: flex;
        .top-left{
          padding: .09rem;
          position: relative;
          box-sizing: border-box;
          img{
            width: 1.15rem;
            position: absolute;
            top: .09rem;
            left: .09rem;
          }
          .price{
            display: flex;
            width: 1.1rem;
            height: 1.1rem;
            justify-content: center;
            align-items: baseline;
            line-height: 1.1rem;
            span{
              font-size: .14rem;
              color: #FC6243;
            }
            h1{
              font-size: .36rem;
              color: #FC6243;
            }
          }
        }
        .top-right {
          position: relative;
          flex: 1;
          box-sizing: border-box;
          padding: .21rem .14rem;
          img{
            position: absolute;
            left: 0;
            top: 50%;
            height: 60%;
            transform: translateY(-50%);
          }
          div:nth-of-type(1){
            font-size: .18rem;
            font-weight: 600;
            color: rgba(50,54,69,1);
            padding-bottom: .16rem;
          }
          div:nth-of-type(2){
            font-size: .12rem;
            color: rgba(50,54,69,1);
          }
        }
      }
      .card-bottom{
        position: relative;
        padding: .06rem .2rem .12rem;
        box-sizing: border-box;
        img{
          width: 100%;
          height: .07rem;
          position: absolute;
          top: -0.15rem;
          left: 0rem;
        }
        .time {
          font-size: .12rem;
          color: rgba(50,54,69,1);
          overflow: hidden;
        }
        .status{
          position: absolute;
          background:linear-gradient(45deg,rgba(255,105,0,1) 0%,rgba(255,136,0,0.76) 100%);
          opacity:0.85;
          width: .6rem;
          height: .6rem;
          transform: rotate(45deg);
          bottom: -0.3rem;
          right: -0.3rem;
          &.gray-location{
            background: rgba(189,189,189,1);
          }
          span{
            position: absolute;
            top: .22rem;
            left: -0.03rem;
            font-size: .12rem;
            color: #fff;
            transform: rotate(-90deg);
          }
        }
      }
      .useType{
        position: absolute;
        bottom: .25rem;
        right: .25rem;
        width: .76rem;
        height: .76rem;
      }
    }
  }
}

@media screen and (max-width: 320px) {
  .mainPage{
    .box{
      .fitness-card{
        .card-bottom{
          .status{
            span{
              top: .2rem !important;
              left: -0.05rem !important;
            }
          }
        }
      }
    }
  }
}
