.minHeight {
  min-height: 108px;
  max-height: 108px;
}

.midHeight {
  min-height: 200px;
  max-height: 200px;
}

.maxHeight {
  min-height: 310px;
  max-height: 310px;
}

.lowerListDiv {
  position: absolute;
  z-index: 2;
  width: 378px;
  background: #fff;
  border: 1px solid #ccc;
  top: 36px;
  left: -176px;
  border-radius: 4px;
  .topArrow:before {
    content: "";
    display: block;
    position: absolute;
    left: 182px;
    top: -17px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px;
    border-color: transparent transparent #ccc;
  }
  .topArrow:after {
    content: "";
    display: block;
    position: absolute;
    left: 182px;
    top: -16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px;
    border-color: transparent transparent #fff
  }
  .lowerList {
    padding: 10px;
    min-height: 108px;
    max-height: 324px;
    > li {
      float: left;
      text-align: center;
      padding: 10px;
      .headIcon {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background: #dddddd;
        overflow: hidden;
      }

      p {
        width: 50px;
        font-size: 14px;
        text-align: center;
        color: #898989;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }
    }
  }
}
