ec.uniapp-master/pages/store/collage/collage.less

@import '../../../common/css/global';
#collage{
  padding-bottom: 60px;
  .white{
    height: 22px;
    background-color: #FFFFFF;
    width: 100%;
    border-top: 1px solid #E1E2EA;
    &.b{
      border-bottom:1px solid #E1E2EA;
      border-top:0;
    }
  }
  .collage-progress{
        padding: 0 54px 21px 54px;
        position: relative;
        background-color:#FFFFFF;
        .launch,.invite,.success{
          text-align: center;
          position: absolute;
          top:-14px;
          .iconfont{
            color:#DBDBDB;
            font-size:18px;
          }
          .text{
            color:#9B9B9B;
            font-size:12px;
            line-height: 12px;
            padding-top:4px;
          }
          &.active-emj{
            .iconfont{
              color: #EA4448;
            }
            .text{
              color:#FF2741;
            }
          }
        }
    }
  .collage-goods{
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    .goods-img{
      flex: 1;
      image{
        width: 100%;
      }
    }
    .goods-infomation{
      flex: 1;
      padding-left: 12px;
      .info-name{
        color:#000000;
        font-size: 14px;
        line-height: 20px;
        height: 40px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden;  /** 隐藏超出的内容 **/
      }
      .original-cost,.purchase-cost{
        position: relative;
        width: 100%;
        border: 1px solid #DBDBDB;
        padding:15px 0;
        text-align:center;
        border-radius: 3px;
        .price{
          color:#4A4A4A;
          font-size: 14px;
          .zero{
            display: inline-block;
            font-size: 12px;
            padding-right: 5px;
          }
          .unit{
            display:inline-block;
            font-size: 10px;
          }
        }
        .o-text{
          position: absolute;
          color:#9B9B9B;
          font-size: 10px;
          top: -12px;
          left: 50%;
          width: 36px;
          margin-left: -18px;
          line-height:23px;
          background-color: #FFFFFF;
        }
        &.mar-t{
          margin-top:15px;
        }
        .bor-c{
          border-color:#FF2741;
          color:#FF2741;
        }
        .p-text{
          color:#000000;
        }
        &.marg-t{
          margin-top: 24px;
        }
        &.bor-c{
          border: 1px solid #FF2741;
        }
      }
    }
  }
  .collage-open{
    background-color: #FFFFFF;
    margin:10px 0;
    .open-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:12px 15px;
      border-bottom: 1px solid #E1E2EA;
      color:#9B9B9B;
      line-height: 20px;
      font-size: 14px;
    }
    .open-content{
      padding: 14px 0 20px 0;
      text-align:center;
      .time-text{
        color:#2E2D2D;
        font-size:16px;
        view{
          display: inline-block;
          &.iconfont{
            font-size: 17px;
            color: #000000;
          }
          &.text{
            line-height:22px;
            padding-left:10px;
            view{
              color: #FF2741;
              padding: 0 5px;
            }
          }
        }
      }
      .count-down{
        padding-top: 14px;
        color:#4A4A4A;
        font-size: 12px;
        line-height: 16px;
        .timedown{
          display:inline-block;
          color:#9B9B9B;
          font-size: 12px;
          padding-right: 10px;
          span{
            display: inline-block;
            width: 19px;
            height: 19px;
            background-color:#9B9B9B;
            color:#FFFFFF;
            font-size: 12px;
            text-align: center;
            line-height: 19px;
            margin: 0 10px;
          }
        }
      }
    }
  }
  .collage-records{
    padding-left: 15px;
    background-color: #FFFFFF;
    //padding-bottom:58px;
    .record-title{
      padding:12px 0;
      color:#9B9B9B;
      font-size: 14px;
      line-height: 20px;
      border-bottom: 1px solid #E1E2EA;
    }
    .record-content{
      .item{
        padding: 12px 0;
        border-bottom: 1px solid #E1E2EA;
        display: flex;
        align-items: center;
        .avatar{
          width: 44px;
          height: 44px;
          image{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .info{
          flex: 1;
          padding-left:10px;
          .info-top{
            padding-bottom: 3px;
            span{
              display: inline-block;
              &.name{
                color:#2E2D2D;
                font-size: 12px;
                line-height: 16px;
                margin-right:12px;
              }
              &.colonel{
                display: inline-block;
                text-align: center;
                font-size: 10px;
                color: #FFFFFF;
                width: 35px;
                height: 16px;
                line-height: 16px;
                background:linear-gradient(-142.8deg,rgba(246,121,126,1),rgba(234,68,72,1));
                border-radius:8px;
              }
              &.me{
                background:linear-gradient(-145.2deg,rgba(251,205,36,1),rgba(247,151,28,1));
              }
            }
          }
          .info-bottom{
            color:#9B9B9B;
            font-size: 12px;
            line-height: 16px;
          }
        }
      }
    }
  }
  .order-share{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    button{
      background-color: @mainColor;
      border: none;
      color: #FFFFFF;
      font-size:18px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      width: 100%;

      &:after {
        border-radius: 0;
        border: none;
      }
    }
    .item {
      flex: 1;
      height: 44px;
      line-height: 44px;
      text-align: center;
      background-color:@mainColor;
      color: #FFFFFF;

      &.look {
        background: #FFFFFF;
        color: #FF2741;
        border-radius: 0;
        &:before {
          border: none;
        }
      }
    }
  }
  .maks{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    opacity: 1;
    transition: opacity .3s ease;
    display: none;

    &.cur{
      display: block;
    }
  }
  //弹出分享部分
  .share-box {
    background: #CDCDD1;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: 50;
    transition:all .3s linear;
    .shaer-item {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      color: #2E2D2D;
      background: #ffffff;
      border-radius: 0;
      &:after {
        border: none;
      }
      &.clear {
        margin-top: 5px;
        color: #9B9B9B;
      }
    }


    &.cur{
      height: 155px;

    }
  }

  //弹出分享到朋友圈
  .circle-friends{
    position: fixed;
    width: 100%;
    background-color:rgba(0,0,0,.8);
    height: 0px;
    bottom: 0;
    z-index: 50;
    transition:all .3s linear;
    .imgboxs{
      margin:30px 50px 25px 50px;
      text-align: center;
      .circle-img{
        width: 100%;
        margin-bottom:18px;
        image{
          width: 100%;
          border-radius:5px;
        }
      }
      .save-img{
        width: 100%;
        background-color:@mainColor;
        padding:13px 0;
        text-align: center;
        color: #FFFFFF;
        border-radius: 25px;
        font-size: 16px;
      }
      i{
        font-size: 25px;
        color:#FFFFFF;
        position: absolute;
        top: 12px;
        right:25px;
      }
    }
    &.cur{
      height: 100%;
    }
  }
  
}