.box {
  padding: .2rem .16rem 0;
  .order-card {
    padding: .2rem .15rem .2rem .1rem;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 8px 0px rgba(204,204,204,0.5);
    border-radius:10px;
    margin-bottom: .2rem;
    &.opacity {
      opacity: .5;
    }
    .card-pic {
      width: .8rem;
      height: .8rem;
      border-radius: .08rem;
      overflow: hidden;
      position: relative;
      div{
        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);
        top: -0.3rem;
        left: -0.3rem;
        &.gray-location{
          background: rgba(189,189,189,1);
        }
        span{
          position: absolute;
          bottom: .22rem;
          right: -0.03rem;
          font-size: .12rem;
          color: #fff;
          transform: rotate(-90deg);
        }
      }
    }
    .card-msg{
      width: 1.7rem;
      padding-left: .12rem;
      .title{
        font-size: .14rem;
        padding-bottom: .12rem
      }
      .text{
        font-size: .12rem;
        color:rgba(153,153,153,1);
        padding-bottom: .06rem;
      }
    }
    .card-price{
      flex: 1;
      text-align: right;
      .price, .type{
        font-size: .14rem;
        color: #000;
        &.un-use{
          color: #F25004;
        }
      }
    }
  }
}

@media screen and (max-width: 320px) {
  .order-card {
    .card-pic {
      div{
        span{
          bottom: .2rem !important;
        }
      }
    }
  }
}