goods-collect.scss

page-goods-collect {

  .bar-buttons-ios[end] {
    width: 35px;
    text-align: center;
  }

  .search-div {
    position: relative;
    padding: 10px;

    .icon-search {
      position: absolute;
      top: 20px;
      left: 20px;
      color: #e42417;
      font-size: 2.5rem;
    }

    .input-search {
      background-color: #fdf8f2;
      border-radius: 30px;
      width: 85%;
      height: 43px;
      border: 1px solid #fdf8f2;
      padding-left: 35px;
    }

    input::-webkit-input-placeholder { /* WebKit browsers */
      color: #e42417;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #e42417;
    }

    input::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #e42417;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #e42417;
    }

    .text {
      position: absolute;
      font-size: 1.6rem;
      right: 8px;
      top: 10px;
      color: #999999;
      padding: 10px;
    }
  }

  .type-div {
    position: relative;

    .type-list {
      display: flex;
      align-items: center;
      overflow-x: hidden;
      white-space: nowrap;

      .type {
        padding: 10px;
        font-weight: bold;
      }
    }

    .filter-div {
      position: absolute;
      right: 0px;
      top: 10px;
      background-color: #fff;
      z-index: 99;
      padding-right: 10px;
      box-shadow: -14px 0 5px -3px white;
      padding-left: 5px;
      border-left: 1px solid #aaa;
    }
  }

  .goodsItem {
    border-bottom: 1px solid #ccc;
    padding: 10px 15px;
    display: flex;

    .item-img {
      width: 20%;
      padding: 5px 10px 5px 5px;
    }

    .item-info {
      width: 80%;
    }

    .item-icon {
      display: flex;
      margin-top: 10px;

      .img-star {
        flex-direction: column;
        flex-flow: column;
        color: #facd70;

        span {
          font-size: 2rem;
        }
      }

      .img-cart {
        margin-left: auto;
        color: #c93638;
      }
    }
  }

  .scroll-tab {
    background-color: #fff;
  }

  .tabs-parent {
    margin-bottom: 0px;
    background-color: #ffffff;
    transition: all 500ms;
  }

  .parent.tabs-parent {
    background-color: #ffffff;
  }

  .parent.news-content {
    position: relative;
    background-color: #ffffff;
  }

  .imgPreview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);

    .img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 70%;
    }

    .icon-close {
      position: absolute;
      bottom: -4rem;
      left: 50%;
      transform: translate(-50%, 4rem);
      color: #fff;
      font-size: 5rem;
      background-color: rgba(0, 0, 0, 0.5);
      height: 5rem;
      width: 5rem;
      text-align: center;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}