index.scss

@import "src/assets/css/variable";
.share-poster {
  .total-container {
    width: 100%;
    background-color: $bg_000;
    height: 420px;
    overflow: hidden;
    position: relative;

    .placard-img-container {
      width: 100%;
      height: 840px;
      background: $bg_000;
      padding-top: 20px;
      overflow: hidden;
      position: relative;
      text-align: center;
      zoom: 0.5;

      img {
        width: 60%;
      }
    }

    .placard-code {
      opacity: 0;
    }
  }

  .placard-desc {
    width: 100%;
    height: 45px;
    background: $bg_000;
    padding: 0 10px;

    .placard-sharetxt {
      width: 100%;
      height: 100%;
      line-height: 20px;
      display: inline-block;
      font-size: 14px;
      color: $white;

      .placard-price {
        font-size: 14px;
        color: $active;
      }
    }
  }

  .placard-swiper {
    width: 100%;
    background-color: $white;

    .placard-list {
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        width: 64px;
        height: 64px;
        border-radius: 5px;
        line-height: 90px;
        margin: 20px 15px;

        img {
          display: inline-block;
          width: 64px;
          height: 64px;
          border-radius: 5px;
        }
      }

      li.active {
        width: 64px;
        height: 64px;
        background: url("./image/choose_pic.png") no-repeat center;
        z-index: 1002;
        background-size: 64px;

        img {
          opacity: 0.1;
        }
      }
    }
  }

  .hide {
    display: none;
  }
}