.page-promote-goods {
  /* 搜索框 */
  .search-top {
    max-width: 750rpx;
    margin: auto;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    z-index: 99;
    height: 100rpx;
    box-sizing: border-box;
    .search-box {
      flex: 1;
      margin-right: 30rpx;
      height: 60rpx;
      background: #f5f5f5;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      .icon {
        width: 24rpx;
        height: 24rpx;
        font-size: 0;
        margin-left: 20rpx;
      }
      .input {
        margin: 0 16rpx 0 10rpx;
        flex: 1;
      }
    }
    .list-style {
      width: 32rpx;
      height: 32rpx;
      font-size: 0;
    }
  }
  /* 筛选栏 */
  .sortbar {
    height: 80rpx;
    display: flex;
    align-items: center;
    background: #fff;
    padding-bottom: 10rpx;
    box-sizing: border-box;
    box-shadow: 0 4rpx 4rpx rgba(0,0,0,.01);
    z-index: 99;
    border-radius: 0 0 10rpx 10rpx;
    .item {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      position: relative;
      &.active {
        color: #fc1b35;
        font-weight: 600;
      }
      &.arrow-up::after,&.arrow-down::after{
        position: absolute;
        left: 50%;
        margin-left: 32rpx;
        transform: translateY(-50%);
        display: block;
        width: 0;
        height: 0;
        content: " ";
        font-size: 0;
        border: 8rpx solid transparent;
        border-radius: 4rpx;
      }
      &.arrow-up {
        &::after {
          top: 65%;
          border-top: 8rpx solid #999;
        }
        &.active {
          &::after {
            border-top: 8rpx solid #fc1b35;
          }
        }
      }
      &.arrow-down {
        &::after {
          top: 45%;
          border-bottom: 8rpx solid #999;
        }
        &.active {
          &::after {
            border-bottom: 8rpx solid #fc1b35;
          }
        }
      }
    }
  }
  /* 列表 */
  .line-prods {
    margin-top: 20rpx;
    padding: 0;
    background-color: #f2f3f7;
    .item {
      background: #fff;
      padding: 30rpx 20rpx;
      border-radius: 10rpx;
      margin-top: 18rpx;
      &:first-child {
        padding-top: 30rpx;
      }
      .img {
        width: 190rpx;
        height: 190rpx;
      }
      .text-box {
        height: 190rpx;
      }
      .expected {
        color: #fc1b35;
        margin-top: 10rpx;
        font-size: 20rpx;
      }
    }
    .price {
      margin-bottom: 8rpx;
    }
    .btn {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 8rpx 24rpx;
      color: #fff;
      background: linear-gradient(to right, #fc1b35, #fe401d);
      font-size: 26rpx;
      font-weight: 600;
      border-radius: 40rpx;
    }
  }
  .prods {
    padding: 2rpx 20rpx 0;
    .item {
      width: 346rpx;
      .img {
        width: 346rpx;
        height: 346rpx;
      }
      .expected {
        color: #fc1b35;
        margin-top: 10rpx;
        font-size: 20rpx;
      }
    }
    .price-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .btn {
      padding: 8rpx 20rpx;
      color: #fff;
      background: linear-gradient(to right, #fc1b35, #fe401d);
      font-weight: 600;
      border-radius: 40rpx;
    }
  }
  /*分享弹窗 */
  .promo-share {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 100;

    .picture-img{
			position: fixed;
			left: 75rpx;
			top: 75rpx;
			width: 600rpx;
			height: 850rpx;
		}
    
    .share-img {
      margin: 80rpx auto 0;
      border-radius: 24rpx;
      display: block;
    }
    .promo-main {
      background: #f0f0f0;
      position: absolute;
      bottom: 0rpx;
      width: 100%;
      max-height: 400rpx;
      z-index: 9998;
      border-radius: 30rpx 30rpx 0 0;
      .promo-tit {
        text-align: center;
        margin-top: 25rpx;
        title {
          font-size: 32rpx;
          color: #333333;
          line-height: 37.5rpx;
          display: inline-block;
        }
      }
      .promo-icons {
        font-size: 20rpx;
        color: #666;
        display: flex;
        justify-content: space-around;
        margin-top: 40rpx;
        padding: 10rpx 150rpx;
        image {
          width: 40rpx;
          height: 40rpx;
        }
        .promo-img1 {
          display: flex;
          flex-flow: column;
          align-items: center;
          line-height: 75rpx;
          font-size: 22rpx;
          background: none;
          border: 0;
          margin: 0;
          padding: 0;
          &::after {
            border: 0;
          }
          .promo-img1-icon {
            background-color: #fff;
            border-radius: 8rpx;
            padding: 20rpx;
            display: flex;
          }
        }
        .promo-tit1 {
          font-size: 36rpx;
          padding-bottom: 30rpx;
          font-weight: bold;
          color: #666;
        }
      }
      .promo-close {
        font-size: 32rpx;
        width: 100%;
        color: #333333;
        line-height: 37.5rpx;
        text-align: center;
        padding: 32rpx 0;
        border-top: 1rpx solid #D8D8D8;
      }
    }
  }
  /*分享弹窗 end */
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  #myCanvas {
    position: fixed;
    top: 1000000px;
  }

  /** 二维码弹窗 */
  .code-popup {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 9999;
    .code-main {
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: fixed;
      width: 500rpx;
      height: 700rpx;
      .close-v {
        text-align: right;
        height: 60rpx;
        .close-png {
          width: 50rpx;
          height: 50rpx;
          margin-top: -10rpx;
        }
      }
      .code-v {
        padding: 20rpx;
        border-radius: 6rpx;
        background: #fff;
        .wx-code {
          width: 460rpx;
          height: 460rpx;
        }
      }
      .code-txt {
        margin-top: 20rpx;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        background: #3a86b9;
        border-radius: 6rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
  /** 二维码弹窗 end */

  /* 引导蒙版 */
  .guide-share-mask {
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 99;
    .mask {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.7);
    }
    .guide-content {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 100%;
      height: auto;
      .close {
        position: absolute;
        left: 40rpx;
        top: 40rpx;
        width: 40rpx;
        height: 40rpx;
        & > image {
          width: 100%;
          height: 100%;
        }
      }
      .share-img {
        display: block;
        width: 400rpx;
        height: 400rpx;
        margin-top: 60rpx;
        margin-bottom: 30rpx;
        margin-left: 35%;
        image {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .share-word {
        display: block;
        color: #fff;
        text-align: center;
        .big-word {
          font-size: 32rpx;
        }
        .small-word {
          font-size: 26rpx;
          line-height: 2em;
        }
      }
    }
  }
  /* 引导蒙版 end */

    // 分享弹窗
  .activitys{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.3);

    .activitys-box{
      padding-top: 32rpx;
      border-radius: 24rpx 24rpx 0 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      min-height: 560rpx;
      max-height: 1200rpx;
      overflow: hidden;
      background-color: #fff;

      .activitys-tit{
        position: relative;
        padding: 0 32rpx;

        .text{
          text-align: center;
          font-size: 36rpx;
          font-weight: bold;
        }

        .img{
          position: absolute;
          top: 2rpx;
          right: 32rpx;
          width: 44rpx;
          height: 44rpx;
        }
      }

      // 分享弹窗
      &.share{
        min-height: 280rpx;

        .activitys-tit .text{
          font-weight: 200;
          font-size: 32rpx;
        }

        .share-cnt{
          margin-top: 40rpx;
          display: flex;
          justify-content:space-evenly;

          .item{
            display: flex;
            flex-direction: column;
            align-items: center;

            .text{
              font-size: 24rpx;
            }

            .img{
              width: 80rpx;
              height: 80rpx;
              margin-bottom: 8rpx;
            }
          }

          // #ifdef MP-WEIXIN
          .right{
            margin: 0;
            font-size: 28rpx;
            background-color: #fff !important;

            .text{
              height: 32rpx;
              line-height: 32rpx;
              font-size: 24rpx;
            }
          }
          // #endif
        }
      }
    }
  }
}