epdc-analysis-mp-yushan/miniprogram/subpages/partyInteract/pages/voiceIndex/voiceIndex.wxss

/* search */
.search-bar {
    width: 100%;
    height: 120rpx;
    background: #fff;
    border-top: 1rpx solid #f6f6f6;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
}

.search-bar .condition {
    width: 100%;
    height: 60rpx;
    border-radius: 30rpx;
    background: #F4F4F4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20rpx;
    position: relative;
}

.search-bar .condition .option-list {
    position: absolute;
    z-index: 100;
    width: 100%;
    left: 0;
    top: 60rpx;
    box-sizing: border-box;
    background: #f4f4f4;
    padding: 0rpx 20rpx;
    margin-top: 4rpx;
    border-radius: 6rpx;
}

.option-list .list-item {
    color: #BABABA;
    font-size: 26rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-bar .condition .select-condition {
    color: #BABABA;
    font-size: 26rpx;
}

.search-bar .condition .trigger {
    width: 0;
    height: 0;
    border: 12rpx solid transparent;
    border-top: 15rpx solid #c2c2c2;
    position: relative;
    top: 8rpx;
    transform: rotate(0deg);
    transform-origin: center 7rpx;
    transition: transform 0.4s;
}

.search-bar .condition .trigger.reverse {
    transform: rotate(180deg);
    transform-origin: center 7rpx;
    transition: transform 0.4s;
}

/* 下拉框结束 */
/* 党建声音参与排行开始 */
.bottom-list{
    margin-top: 20rpx;
    background: #fff;
}
.bottom-title{
    box-sizing: border-box;
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    color: #666666;
    font-size: 30rpx;
    background: #fff;
    margin-left: 21rpx;
    margin-right: 21rpx;
    border-bottom: 1rpx solid #EEEEEE;
}
.list-item2 {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0 20rpx;
  }
  .hover-list-item {
    background: #f7f7f7;
  }
  
  .list-item2 .street {
   width: 100%;
   height: 68rpx;
   display: flex;
   align-items: flex-end;
  }
  .list-item2 .street .order {
    width: 50rpx;
    height: 32rpx;
    border-radius: 8rpx 6rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    line-height: 32rpx;
    background: #FD6A62;
    transform: skewX(-12deg);
    margin-right: 10rpx;
  }
  .list-item2 .street .street-name {
    font-size: 30rpx;
    color: #333;
    position: relative;
    top: 4rpx;
  }
  
  /* 九宫格 */
  .jgg{
    width: 100%;
    margin-top: 3rpx;
    padding-bottom: 40rpx;
    border-bottom: 1rpx solid #eee;
  }
  .jgg .line{
    height: 125rpx;
    width: 100%;
  }
  .jgg .line .center{
    height: 125rpx;
    width: 50%;
    float: left;
  }
  .jgg .line .center .num-top{
    height: 100rpx;
    width: 100%;
    text-align: center;
    font-size:38rpx;
    font-weight:bold;
    color:rgba(41,185,165,1);
    line-height:138rpx;
  }
  
  .jgg .line .center .num-bottom{
    height: 25rpx;
    width: 100%;
    text-align: center;
    font-size:25rpx;
    font-weight:500;
    color:rgba(146,148,155,1);
    line-height:25rpx;
  }
  /* 党建声音参与排行结束 */
  /* 排序开始 */

  .search-bar .order{
    height: 100%;
    width: 100rpx;
    display: flex;
    align-items: center;
    position: relative;
    perspective: 3000;
  }
  .search-bar .order .front {
    position: absolute;
    width: 100rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    transform-origin: center;
    transition: transform 0.4s linear;
    visibility: hidden;
    left: 0;
    top: 0;
  }
  .search-bar .order .front.select {
    transform: rotateY(0deg);
    transition: transform 0.4s linear;
    visibility: visible;
  }
  .search-bar .order .back {
    position: absolute;
    width: 100rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(-180deg);
    transition: transform 0.4s linear;
    visibility: hidden;
    left: 0;
    top: 0;
  }
  .search-bar .order .back.select {
    transform: rotateY(0deg);
    transition: transform 0.4s linear;
    visibility: visible;
  }
  .search-bar .order text {
    font-size: 26rpx;
    color: #29B9A5;
    display: inline-block;
  }
  .search-bar .order .front image {
    width: 28rpx;
    height: 22rpx;
    margin-left: 8rpx;
  }
  .search-bar .order .back image {
    width: 28rpx;
    height: 22rpx;
    margin-right: 8rpx;
  }
  /* 排序结束 */