.page-score-prod-detail {
  background: #f2f3f7;
  min-height: calc(100vh - calc(130rpx + env(safe-area-inset-bottom)));
  padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
  /* 头部 */
  .det-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
    background: #fefefe;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    .item {
      padding: 0 30rpx;
      position: relative;
      &::after {
        position: absolute;
        bottom: -10rpx;
        left: 28%;
        right: 28%;
        display: block;
        width: auto;
        height: 4rpx;
        border-radius: 4rpx;
        content: " ";
        font-size: 0;
        background: #fff;
      }
      &.active {
        font-weight: 600;
        &::after {
          background: linear-gradient(to right, #fc1b35, #fff);
        }
      }
    }
  }
  .video-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 750rpx;
    justify-content: center;
    align-items: center;
    background: #000;
    z-index: 10;
    video {
      display: block;
      width: 100%;
    }
    .play-btn {
      position: absolute;
      left: 50%;
      bottom: 12%;
      padding: 2rpx;
      background: rgba(255, 255, 255, 0.75);
      border-radius: 50rpx;
      color: #000;
      font-size: 24rpx;
      text-align: center;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 15;
      .play-icon {
        width: 50rpx;
        height: 50rpx;
      }
      .play-text {
        padding-right: 10rpx;
        margin: 0 10rpx;
      }
      .video-stop {
        padding: 2rpx 8rpx;
      }
    }
    /* 大图 */
    .pic-box {
      width: 750rpx;
      height: 750rpx;
      font-size: 0;
      background: #fff;
    }
  }
  /* 名称、价格 */
  .name-box {
    background: #fff;
    padding: 20rpx 30rpx;
    border-radius: 0 0 10rpx 10rpx;
    .name {
      font-size: 28rpx;
      font-weight: 600;
      word-break: break-word;
    }
    .discount-info {
      color: #999;
      margin-top: 10rpx;
      word-break: break-word;
    }
    .action-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 20rpx;
      margin-bottom: 10rpx;
      .price-box {
        flex: 1;
        display: flex;
        align-items: center;
        .price {
          font-size: 28rpx;
          font-weight: 600;
          margin-right: 20rpx;
          margin-top: 4rpx;
          .integral-icon {
            width: 24rpx;
            height: 24rpx;
            font-size: 0;
            margin-right: 2rpx;
          }
          .marketPriceFee{
            text-decoration: line-through;
            font-size: 24rpx;
            color: #999;
            margin-left:20rpx;
            font-weight: normal;
          }
        }
        .stock {
          color: #999;
          margin-top: 10rpx;
        }
      }
    }
  }
  /* 优惠、活动 */
  .det-con {
    background: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-top: 30rpx;
    .item {
      display: flex;
      align-items: flex-start;
      margin-top: 24rpx;
      line-height: 32rpx;
      &:first-child {
        margin-top: 0;
      }
      .tit {
        font-weight: 600;
        margin-right: 30rpx;
      }
      .con {
        flex: 1;
        padding-right: 50rpx;
        position: relative;
        &::after {
          position: absolute;
          top: -6rpx;
          right: 0;
          display: block;
          content: "…";
          font-size: 28rpx;
          line-height: 1;
          color: #999;
          font-family: PingFangSC-Medium, tahoma;
        }
        &.distribution-con::after {
          display: none;
        }
      }
      .distribution-con {
        display: flex;
        align-items: center;
        .dis-item {
          margin-right: 20rpx;
          position: relative;
          .dis-item-icon{
            display: inline-block;
            position: relative;
            width: 14rpx;
            height: 14rpx;
            border: 2rpx solid #fc1b35;
            border-radius: 50%;
            margin-right:10rpx ;
            &::before{
              display: block;
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              width: 6rpx;
              height: 6rpx;
              background: #fc1b35;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
  /* 商品详情 */
  .det-det {
    background: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-top: 30rpx;
    word-break: break-word;
    .tit {
      font-weight: 600;
    }
    .con {
      margin-top: 20rpx;
      .img {
        max-width: 690rpx;
        font-size: 0;
      }
    }
  }
  /* sku弹窗 */
  .stock,.sku-not-found {
    color: #999;
    margin-left: 10rpx;
  }
  .sku-not-found {
    margin-top: 20rpx;
  }
  /* 底部 */
  .det-foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 750rpx;
    margin: auto;
    height: calc(100rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    padding: 0 30rpx env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: -4rpx 0 4rpx rgba(0,0,0,.05);
    border-radius: 10rpx 10rpx 0 0;
    z-index: 200;
    .actions {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: -10rpx;
      .item {
        text-align: center;
        padding: 0 20rpx;
        .img {
          width: 36rpx;
          height: 36rpx;
          font-size: 0;
          margin: auto;
          position: relative;
        }
        .text {
          font-size: 18rpx;
          text-align: center;
          margin-top: 6rpx;
        }
      }

    }
    .btns {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text-align: center;
      .btn {
        flex: 1;
        margin-left: 20rpx;
        height: 70rpx;
        line-height: 70rpx;
        color: #fff;
        background: linear-gradient(135deg, #ffc30d, #ffba0d 69%, #ffc30d);
        border-radius: 70rpx;
        font-weight: 600;
        font-size: 26rpx;
        &.btn-r{
          background: linear-gradient(135deg, #ff1a49, #f1091d 69%, #fc1b35);
          &.gary {
            background: #aaa;
          }
        }
      }
    }
  }
}
