epdc-analysis-mp-yushan/miniprogram/subpages/governRanking/components/gridEvaListItem/gridEvaListItem.wxss

.list-item {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  height: 320rpx;
}
.hover-list-item {
  background: #f7f7f7;
}

.list-item .street {
 width: 100%;
 height: 68rpx;
 display: flex;
 align-items: flex-end;
}
.list-item .dj-name {
  margin-top: 10rpx;
  width: 100%;
  height: 24rpx;
  display: flex;
  align-items: flex-end;
  font-size:24rpx;
  line-height: 24rpx;
  font-weight:500;
  padding-left: 60rpx;
  color:rgba(177,180,191,1);
}
.list-item .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-item .street .street-name {
  font-size: 30rpx;
  color: #333;
  position: absolute;
  overflow: hidden;
  text-overflow : ellipsis;
  margin-left: 60rpx;
}

.list-item .detail {
  width: 100%;
  height: 220rpx;
  box-sizing: border-box;
  padding: 30rpx 0;
  display: flex;
}
.list-item .detail .user-count {
  height: 100%;
  width: 180rpx;
  box-sizing: border-box;
  border-right: 1rpx solid #E8E8E8;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.list-item .detail .user-count .num {
  font-size: 50rpx;
  line-height: 60rpx;
  color: #333;
}
.list-item .detail .user-count .tip {
  color: #92949B;
  font-size: 26rpx;
  line-height: 36rpx;
}
.list-item .detail .right {
  width: calc(100% - 330rpx);
  height: 100%;
}
.list-item .detail .right .top {
  width: 100%;
  height: 93rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.list-item .detail .right .top .resident-total {
  flex: 1.5;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.list-item .detail .right .top .resident-total-b {
  flex: 1.5;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.total-left{
  margin-left: auto;
}
.list-item .detail .right .top .resident-total .num {
  color: #29B9A5;
  font-size: 38rpx;
}
.list-item .detail .right .top .resident-total-b .num {
  color: #FFC600;
  font-size: 38rpx;
}
.list-item .detail .right .top .resident-total .tip {
  font-size: 26rpx;
  color: #92949B;
}
.list-item .detail .right .top .resident-total-b .tip {
  font-size: 26rpx;
  color: #92949B;
}
.list-item .detail .right .top .partyMember-total {
  flex: 1.5;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.list-item .detail .right .top .partyMember-total .num {
  color: #FFA270;
  font-size: 38rpx;
}
.list-item .detail .right .top .partyMember-total .num-b {
  color: #FD6A62;
  font-size: 38rpx;
}
.list-item .detail .right .top .partyMember-total .tip {
  font-size: 26rpx;
  color: #92949B;
}
.list-item .detail .right .top .pie-chart {
  flex: 2;
  height: 115rpx;
  width: 115rpx;
  position: relative;
  top: -12rpx;
  left: -30rpx;
}
.list-item .detail .right .bottom {
  width: 100%;
  box-sizing: border-box;
  padding-left: 25rpx;
}
.list-item .detail .right .bottom .resident {
  display: flex;
  height: 29rpx;
  align-items: center;
  width: 100%;
}
.list-item .detail .right .bottom .resident .point {
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background: #29B9A5;
  margin-right: 7rpx;
}
.list-item .detail .right .bottom .resident .detail-info {
  font-size: 19rpx;
  color: #B1B4BF;
  margin-right: 10rpx;
}
.list-item .detail .right .bottom .resident .percent {
  font-size: 19rpx;
  color: #29B9A5;
  position: relative;
}
.list-item .detail .right .bottom .partyMember {
  display: flex;
  margin-top: 29rpx;
  height: 29rpx;
  align-items: center;
  width: 100%;
}
.list-item .detail .right .bottom .partyMember .point {
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background: #29B9A5;
  margin-right: 7rpx;
}
.list-item .detail .right .bottom .partyMember .detail-info {
  font-size: 19rpx;
  color: #B1B4BF;
  margin-right: 10rpx;
}
.list-item .detail .right .bottom .partyMember .percent {
  font-size: 19rpx;
  color: #29B9A5;
  position: relative;
}
.list-item .detail .right .bottom .partyMember .blue.point {
  background:#63CFED;
}
.list-item .detail .right .bottom .partyMember .orange.point {
  background: #FFA270;
  margin-left: 20rpx;
}
.list-item .detail .right .bottom .partyMember .red.point {
  background: #FD6A62;
  margin-left: 20rpx;
}
.list-item .detail .right .bottom .partyMember .blue.percent {
  color: #63CFED;
}
.list-item .detail .right .bottom .partyMember .orange.percent {
  color: #FFA270;
}
.list-item .detail .right .bottom .partyMember .red.percent {
  color: #FD6A62;
}

.right-chart{
  height: 160rpx;
  width: 140rpx;
}
.right-chart .chart{
  margin: 0 auto;
  height: 110rpx;
  width: 110rpx;
}

.right-chart .chart-name{
  width: 100%;
  height: 50rpx;
  text-align: center;
  font-size:20rpx;
  font-weight:500;
  color:rgba(177,180,191,1);
}
.right-chart .chart-name .name-test{
  font-size:20rpx;
  font-weight:bold;
  color:rgba(102,102,102,1);
  margin-left: 10rpx;
  line-height: 75rpx;
}