ec.uniapp-master/pages/user/findSearch/findSearch.less

@import '../../../common/css/global';
#find-search{
  .menu-box{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    .navbar{
      z-index: 50;
      position: relative;
      display: flex;
      height: 45px;
      align-items: center;
      font-size: 12px;
      color:#666666;
      background-color: #FFFFFF;
      padding: 0 10px;
      .item{
        padding: 0 3px;
        height: 100%;
        line-height: 45px;
        display: flex;
        align-items: center;
        overflow: hidden;
        //text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        //max-width: 40%;
        span{
          width: 100%;
          display: inline-block;
          font-size: 12px;
          height: 95%;
          overflow: hidden;
          //text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          .iconfont{
            display: inline-block;
            font-size: 12px;

            &.icon-jiantou {
              transform:rotate(90deg);
            }
          }
        }
        &.active{
          span{
            border-bottom: 2px solid @mainColor;
            border-radius: 1px;
            color:@mainColor;
          }
        }
      }
    }
    .more-list{
      z-index: 50;
      position: absolute;
      width: 100%;
      background-color: #FFFFFF;
      padding:20px 15px 6px 15px;
      .item{
        display: inline-block;
        width: 25%;
        text-align: center;
        color: #666666;
        font-size: 13px;
        line-height: 24px;
        padding-bottom: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.active{
          color: @mainColor;
        }
      }
    }
  }
  .content-box{
    padding-top: 45px;
    .something__box{
      margin-top: 11px;
      .li-item{
        margin-bottom: 5px;
        .something__item{
          background: #fff;
          padding: 10px 15px 12px 15px;
          .item__user{
            display: flex;
            .user__img{
              width: 52px;
              height: 42px;
              padding-right: 10px;
              image{
                width: 100%;
                height: 100%;
              }
            }
            .user__title{
              flex: 1;
              display: flex;
              justify-content: space-between;
              .title__box{
                .title__title{
                  span{
                    font-size: 15px;
                    color: #4A4A4A;
                    padding-right: 10px;
                    font-weight: bold;
                  }
                  .title__tag{
                    display: inline-block;
                    border: 1px solid @globalColor;
                    border-radius: 40px;
                    color: @globalColor;
                    font-size: 11px;
                    padding: 0px 8px;
                  }

                }
              }
              .title__stick{
                i{
                  color: @globalColor;
                  font-size: 25px;
                }
              }
            }
          }
          .item__content{
            padding-left: 52px;
            .item__title{
              font-size: 14px;
              &.actives{

                font-size: 14px;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
              }

            }
            .read__more{
              font-size: 12px;
              color: #008CEE;
              display: inline-block;
              line-height: 33px;
            }
            .item__list{
              display: flex;
              flex-wrap: wrap;
              padding: 10px 30px 0 0;
              margin-bottom: 8px;
              ::after{
                content: "";
                display: block;
                clear: both;
                height: 0;
                overflow: hidden;
                visibility: hidden;
              }
              .img{
                width: 100%;
                image{
                  width: 100%;
                }
              }
              .list__li{
                width: 31%;
                margin: 0 2% 2% 0;
                view{
                  position: relative;
                  width: 100%;
                  height: 0;
                  overflow: hidden;
                  margin: 0;
                  padding-bottom: 100%;
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  span{
                    display: block;
                    position: absolute;
                    width: 100%;
                    top: 0;
                    bottom: 0;
                  }
                }
              }
            }
            .time-txet{
              color: #999999;
              font-size: 11px;
              line-height: 16px;
              padding-bottom: 8px;
            }
            .goods-box{
              display: flex;
              align-items: center;
              background-color:#F3F3F3;
              padding: 10px 15px 10px 11px;
              .left-box{
                width: 60px;
                height: 60px;
                image{
                  width: 100%;
                  height: 100%;
                }

              }
              .right-box{
                flex: 1;
                padding-left: 14px;
                overflow: hidden;
                .name{
                  color:#111111;
                  font-size: 12px;
                  line-height: 20px;
                  height: 40px;
                  margin-bottom:6px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }
                .money{

                }
              }
            }
            .tags{
              display: flex;
              align-items: center;
              padding-bottom: 12px;
              flex-wrap: wrap;
              .tag-item{
                font-size: 12px;
                color:#999999;
                line-height: 16px;
                padding: 3px 10px;
                margin-right: 12px;
                border-radius:2px;
                border:1px solid rgba(238,238,238,1);
                margin-bottom: 5px;
              }
            }
            .item_operation{
              padding-top: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .operation__item{
                position: relative;
                flex: 1;
                font-size: 12px;
                color: #4A4A4A;
                &.actvie{
                  i{
                    color: @globalColor;
                  }
                  color: @globalColor;
                }
                i{
                  font-size: 12px;
                  padding-right: 5px;
                }
                &:nth-child(2){
                  text-align: center;
                }
                &:last-child{
                  text-align: end;
                }
                .getinfo{
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  top: 0;
                  left: 0;
                }
              }
            }
          }

        }
        .bottom-btn{
          display: flex;
          align-items: center;
          height:45px;
          background-color: #FFFFFF;
          .btn{
            text-align: center;
            font-size:12px;
            color: #666666;
            flex: 1;
            span{
              font-size: 12px;
            }
            &.active{
              color: @mainColor;
            }
          }
        }
      }
      .index__end{
        padding: 10px;
        text-align: center;
        font-size: 12px;
        color: #888;
      }
    }
  }
  .no-data{
    text-align: center;
    padding: 20px;
    color:#999999;
  }
  .maks{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(17,17,17,0.6);
  }
  .filter-box{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(17,17,17,0.6);
    z-index: 51;
    text-align: right;
    .content{
      position: relative;
      text-align: left;
      display: inline-block;
      background-color:#FFFFFF;
      padding:20px 0px 0 0px;
      height: 100%;
      width: 85%;
      .select{
        .topic{
          padding: 0 20px;
          color:#333333;
          font-size: 14px;
          line-height: 20px;
          padding-bottom: 10px;
          span{
            color:#999999;
            font-size: 12px;
            line-height: 17px;
          }
        }
        .list{
          padding: 0 15px 20px 15px;
          display: flex;
          flex-wrap: wrap;
          .item{
            text-align: center;
            width: 29%;
            color: #333333;
            font-size: 12px;
            height: 28px;
            line-height: 28px;
            border-radius: 2px;
            background-color:#EEEEEE;
            margin: 0 5px 10px 5px;
            overflow: hidden;
            &.active{
              background-color: #FFFFFF;
              border-radius:2px;
              border:1px solid @mainColor;
              color: @mainColor;
            }
          }
        }
      }
      .btn-box{
        position: absolute;
        display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height:50px;
        align-items: center;
        .btn{
          height: 100%;
          flex: 1;
          text-align: center;
          font-size:16px;
          line-height: 50px;
        }
        .reset{
          background:#FFFCFC;
          border:1px solid #EEEEEE;
          color:#111111;
        }
        .confirm{
          background: @mainColor;
          color: #FFFFFF;
        }
      }

    }
  }
}