.content {
  background: url("https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/2c14ce56792dc98f0e7e2fcf646eb127.png")
    #1b1c1e no-repeat center top;
  background-size: contain;
  padding-top: 186rpx;
  padding-bottom: 224rpx;

  .danmu {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    pointer-events: none;
  }
  .more-title {
    margin: 40rpx auto 0;
    padding: 0 32rpx;
    font-family: ysbth, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB,
      Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei,
      WenQuanYi Micro Hei, sans-serif;
    font-size: 36rpx;
    color: #4efbff;
    line-height: 46rpx;
  }
  .main {
    box-sizing: border-box;
    position: relative;
    width: 710rpx;
    height: 968rpx;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 62rpx;
    background: url("https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/be79a1b39df3b600b1ddfd334dc24e5c.png")
      no-repeat center top;
    background-size: contain;

    .buynumbers {
      position: absolute;
      top: 0;
      right: 70rpx;
      font-size: 24rpx;
      color: #ffffff;
      height: 52rpx;
      line-height: 52rpx;
      background: url(@/assets/detail/bg_c.png) repeat-x #292d3b;
      background-size: auto 100%;

      .buynumber {
        color: #52f6fe;
        margin: 0 6rpx;
      }
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 24rpx;
        height: 52rpx;
        top: 0;
      }
      &::before {
        left: -24rpx;
        background: url(@/assets/detail/bg_l.png) no-repeat;
        background-size: auto 100%;
      }
      &::after {
        right: -24rpx;
        background: url(@/assets/detail/bg_r.png) no-repeat;
        background-size: auto 100%;
      }
    }
    .swiper {
      width: 586rpx;
      height: 548rpx;
      margin: 0 auto;
      .title {
        display: block;
        height: 40rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #ffffff;
        line-height: 40rpx;
        text-align: center;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .image {
        width: 432rpx;
        height: 430rpx;
        display: block;
        margin: 10rpx auto;
        position: relative;
        .cover {
          width: 100%;
          height: 100%;
        }
        .label {
          position: absolute;
          left: 44rpx;
          top: 36rpx;
          width: 72rpx;
          height: 72rpx;
        }
      }
      .banner-price {
        color: #4efbff;
        text-align: center;
        // margin-top: -10rpx;
        font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
          Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI,
          Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;

        .small {
          font-size: 36rpx;
          margin-right: 10rpx;
          font-weight: bold;
        }
        .price {
          font-size: 48rpx;
        }
      }
    }
    .left,
    .right {
      position: absolute;
      width: 36rpx;
      height: 48rpx;
      top: 284rpx;
      z-index: 2;
    }
    .left {
      left: 28rpx;
    }
    .right {
      right: 28rpx;
    }
    .all {
      position: relative;
      box-sizing: border-box;
      width: 672rpx;
      height: 266rpx;
      padding: 24rpx 14rpx 0;
      margin: 20rpx auto 0;
      box-shadow: inset #4efbff 0 2rpx 10rpx;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: auto;
      background-image: linear-gradient(to bottom, #1d1f28, #12141b);
      font-size: 0;
      .item {
        width: 188rpx;
        margin: 0 10rpx;
        display: inline-block;
        position: relative;
      }
      .img {
        width: 184rpx;
        height: 184rpx;
        border: 2rpx solid #4efbff;
        display: block;
      }
      .label {
        position: absolute;
        left: 4rpx;
        top: 4rpx;
        width: 44rpx;
        height: 44rpx;
      }

      .item-price {
        color: #4efbff;
        text-align: center;
        margin-top: 10rpx;
        font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
          Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI,
          Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;

        .small {
          font-size: 24rpx;
          margin-right: 4rpx;
          font-weight: bold;
        }
        .price {
          font-size: 32rpx;
        }
      }
    }
    .btns {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 3rpx;
      display: flex;
      .btn-item {
        flex: 1;
        font-size: 24rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 34rpx;
        text-align: center;
      }
      .btn-img {
        width: 260rpx;
        height: 52rpx;
      }
    }
  }
  .buy-btns {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 42rpx 24rpx 92rpx;
    background: #292d3b;
  }
  .popup-detail {
    padding: 32rpx 24rpx 64rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 80vh;
    .title {
      display: block;
      min-height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #505050;
      line-height: 44rpx;
      padding-right: 80rpx;
    }
    .desc {
      display: block;
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #9496a5;
      line-height: 34rpx;
      margin-top: 8rpx;
    }
    .popup-detail-content {
      margin-top: 24rpx;
      flex: 1;
      overflow-y: auto;
      .img {
        display: block;
        width: 100%;
      }
    }
    .levels {
      display: flex;
      justify-content: space-between;
      overflow-x: auto;
      overflow-y: hidden;
      height: 88rpx;
      margin-bottom: 18rpx;
      flex-basis: 88rpx;
      .level {
        width: 138rpx;
        text-align: center;
        height: 88rpx;
        .name {
          display: block;
          font-size: 36rpx;
          font-weight: 600;
          color: #292d3b;
          line-height: 50rpx;
          height: 50rpx;
        }
        .percent {
          display: block;
          font-size: 24rpx;
          font-weight: 500;
          color: #505050;
          line-height: 34rpx;
        }
      }
    }
    .popup-detail-list {
      flex: 1;
      height: 0;
      overflow-y: auto;
      .list-item {
        display: flex;
        margin-bottom: 26rpx;
        position: relative;
        .img {
          width: 232rpx;
          height: 232rpx;
          margin-right: 24rpx;
          background-color: #f1f1f1;
        }
        .label {
          position: absolute;
          left: 10rpx;
          top: 10rpx;
          width: 48rpx;
          height: 48rpx;
        }
        .list-item-body {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          width: 0;
          .title,
          .price {
            display: block;
          }
          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: #505050;
            line-height: 40rpx;
          }
          .price {
            font-size: 24rpx;
            font-weight: 600;
            color: #08c2c3;
            line-height: 34rpx;
            font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
              Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI,
              Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
            .unit {
              font-size: 28rpx;
              margin: 0 6rpx;
              display: inline-block;
            }
            .price-text {
              font-size: 36rpx;
              font-weight: normal;
            }
          }
        }
      }
    }
  }
  .close {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }
}
