football/plugins/book/order/order.scss

.order {
  width: #{750rpx};
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #f7f7f7;
  .header {
    height: #{88rpx};
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: white;
    border-bottom: #{1rpx} solid #e2e2e2;
    .header-item {
      line-height: #{88rpx};
      text-align: center;
      text {
        display: inline-block;
        height: #{87rpx};
        line-height: #{86rpx};
        font-size: #{32rpx};
        color: #666666;
        border-bottom-width: #{2rpx};
        border-bottom-style: solid;
        border-bottom-color:transparent;
      }
      .active-item {
        color: #ff5c5c;
        border-bottom-color: #ff5c5c;
      }
    }
  }
  .product-list {
    margin-top: #{80rpx};
    padding-top: #{20rpx};
    .product {
      width: 100%;
      background-color: white;
      margin-bottom: #{20rpx};
      .top {
        padding: #{24rpx};
        height: #{248rpx};
        .image-content {
          width: #{200rpx};
          height: #{200rpx};
          position: relative;
          >image {
            width: #{200rpx};
            height: #{200rpx};
            border-radius: #{8rpx};
          }
          .tip-angle {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ff6868;
            color: white;
            font-size: #{26rpx};
            border-top-left-radius: #{8rpx};
            line-height: #{48rpx};
            height: #{48rpx};
            width: #{100rpx};
            text-align: center;
          }
        }
        .text-content {
          width: #{750-24-200-24-24rpx};
          height: #{200rpx};
          .text-top {
            margin-top: #{8rpx};
            .name {
              font-size: #{28rpx};
              color: #353535;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .attr {
              font-size: #{24rpx};
              color: #999999;
              margin-top: #{20rpx};
            }
          }
          .text-bottom {
            margin-bottom: #{8rpx};
            .original-price {
              text-decoration:line-through;
              font-size: #{26rpx};
              color: #999999;
              margin-right: #{24rpx};
            }
            .current-price {
              font-size: #{32rpx};
              color: #ff4544;
            }
          }
        }
      }
      .bottom {
        padding: 0 #{24rpx};
        height: #{100rpx};
        border-top: #{1rpx} solid #e2e2e2;
        .but {
          height: #{60rpx};
          border-radius: #{30rpx};
          border-style: solid;
          border-width: #{1rpx};
          font-size: #{32rpx};
          line-height: #{60rpx};
          text-align: center;
          padding: 0 #{32rpx};
        }
        .no {
          color: #666666;
          border-color: #cdcdcd;
          background-color: white;
          margin-right: #{16rpx};
        }
        .ok {
          background-color: #fff5f5;
          color: #ff4544;
          border-color: #ff4544;
        }
      }

    }
  }
  .model {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    .model-content {
      width: #{620rpx};
      border-radius: #{15rpx};
      background-color: white;
      text-align: center;
      padding-top: #{20rpx};
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .model-header {
        font-size: #{32rpx};
        color: #353535;

        margin: #{64rpx 0};
      }
      .model-title-top {
        font-size: #{32rpx};
        text-align: center;
        margin: #{20rpx 0 0rpx 0} ;
        color: #353535;
      }
      .model-bottom {
        border-top: #{1rpx} solid #e2e2e2;
        .model-but {
          width: #{309rpx};
          height: #{88rpx};
          line-height: #{88rpx};
        }
        .model-line {
          width: #{2rpx};
          height: #{32rpx};
          background-color: #e2e2e2;
        }
      }
    }
    .model-use {
      background-color: white;
      width: #{600rpx};
      box-sizing: border-box;
      border-radius: #{8rpx};
      margin: #{20rpx} 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1700;
      .image {
        width: #{30rpx};
        height: #{30rpx};
        position: absolute;
        right: #{32rpx};
        top: #{32rpx};
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../../../static/image/icon/close.png");
      }
      .model-title {
        font-size: #{32rpx};
        margin-top: #{56rpx};
        margin-bottom: #{64rpx};
        text-align: center;
      }
      .model-image {
        width: #{360rpx};
        height: #{360rpx};
        margin: #{0 120rpx 86rpx 120rpx};
      }
    }
  }
}