ued-comp/lib/ShareComp/index.less

<!-- * @Author: Mia * @Date: 2022-06-09 19:11:50 * @Description: -->

// @font-face {
//   font-family: 'iconfont'; /* Project id  */
//   // src: url('iconfont.ttf?t=1655178905632') format('truetype');
// }

// .iconfont {
//   display: inline-block;
//   *display: inline;
//   font-weight: normal;
//   font-size: 20px;
//   font-family: 'iconfont' !important;
//   font-style: normal;
//   line-height: 1;
//   text-decoration: inherit;
//   text-decoration: none !important;
//   vertical-align: middle;
//   *zoom: 1;
//   -webkit-font-smoothing: antialiased;
// }

// .icon-check:before {
//   content: '\e83a';
// }

// .icon-download:before {
//   content: '\e87b';
// }

// .icon-facebook:before {
//   content: '\e88d';
// }

// .icon-links:before {
//   content: '\e8f6';
// }

// .icon-Pinterest:before {
//   content: '\e92d';
// }

// .icon-qrcode:before {
//   content: '\e954';
// }

// .icon-twitter:before {
//   content: '\e9a5';
// }

// .icon-close-circle:before {
//   content: '\e9e6';
// }

@pc-font-size: 14px;
@pc-color: #028a0f;

.copy-link-btn {
  display: flex;
  cursor: pointer;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #222222;
  text-decoration: none;
  &.pc {
    font-weight: 400;
    font-size: @pc-font-size;
    line-height: 22px;
    text-decoration: none;
  }
  &:active,
  &:hover {
    color:  #222222;
  }
  .left {
    width: 80%;
    padding: 8px 9px 8px 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #cccccc;
    border-right: none;
    border-radius: 30px 0px 0px 30px;
    &.active {
      color: @pc-color;
      font-weight: 700;
      text-align: center;
      text-transform: capitalize;
      border: 1px solid @pc-color;
      border-right: none;
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    min-width: 77px;
    color: #ffffff;
    background: #003fff;
    border: 2px solid #003fff;
    border-radius: 0px 30px 30px 0px;
    .copy-success-icon {
      font-size: 22px;
    }
    &.active {
      background: @pc-color;
      border-color: @pc-color;
    }
    &.pc {
      background-color: @pc-color;
      border-color: @pc-color;
    }
  }
}

.share-btn-wrap {
  margin-top: 4px;
  .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 9px 0px 9px 0px;
    color: #222222;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    background: #f7f7f7;
    border-radius: 39px;
    border: none;
    width: 100%;
    cursor: pointer;
    .share-btn-icon {
      margin-right: 8px;
      font-size: 20px;
    }
  }
  &.pc {
    .share-btn {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      .share-btn-icon {
        font-size: 22px;
      }
    }
  }
}

.share-img-wrap {
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.68);
  .content-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    padding: 16px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    #download-img {
      position: fixed;
      opacity: 0;
      top: 0;
    }
    .share-wrap {
      border: 1px solid #E7E7E7;
      border-radius: 6px;
      .share-content {
        padding: 16px;
        background: #ffffff;
        border-radius: 6px;
        width: 272px;
        .share-img {
          width: 240px;
          height: 240px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 6px;
          img {
            border-radius: 6px;
            max-width: 100%;
            max-height: 100%;
          }
        }
        .prod-name {
          margin: 8px 0 4px;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .price-wrap {
          display: flex;
          margin-bottom: 8px;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 700;
          font-size: 14px;
          line-height: 22px;
          .free-shipping {
            display: inline-block;
            margin-left: 8px;
            padding: 0 8px;
            font-weight: 400;
            font-size: 10px;
            line-height: 18px;
            border: 1px solid #cccccc;
            color: rgba(102, 102, 102, 0.85);
            border-radius: 3px;
          }
        }
        .qr-code {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          #press-tips {
            margin-top: 4px;
            font-weight: 400;
            font-size: 10px;
            line-height: 18px;
            text-transform: capitalize;
            color:#666666
          }
        }
      }
    }
    .download-btn {
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 12px;
      padding: 6px 0;
      color: #ffffff;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      background: #003fff;
      border-radius: 3px;
      cursor: pointer;
      .download-btn-icon {
        margin-right: 4px;
        font-size: 12px;
      }
      &.pc {
        background-color: @pc-color
      }
    }
    .close-btn {
      position: absolute;
      right: 50%;
      bottom: -41px;
      color: #cccccc;
      text-align: center;
      border-radius: 50%;
      transform: translate3d(50%, 0, 0);
      cursor: pointer;
      z-index: 999;
      .close-btn-icon {
        font-size: 24px;
      }
    }
  }
}