/* pages/groupPage/my-group/my-group.wxss */ .my-group { width: 100%; height: 100%; background:rgba(240,241,245,1); } .my-group scroll-view { width: 100%; height: 100%; } .my-group-content { width: 100%; display: flex; justify-content: row; flex-wrap: wrap; padding: 0 16rpx 50rpx; box-sizing: border-box; } .group-bars { display: flex; justify-content: space-between; width: 100%; height: 188rpx; background: #fff; margin-top: 20rpx; border-radius: 12rpx; padding: 14rpx 28rpx; box-sizing: border-box; } .group-head { display: flex; flex-direction: column; align-items: center; justify-content: center; } .group-head image { width: 96rpx; height: 96rpx; border-radius: 50%; } .group-head text { font-size: 32rpx; margin-top: 12rpx; width: 150rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .group-jion { width: 460rpx; } .group-jion .top-title { display: flex; justify-content: space-between; font-size: 32rpx; } .group-jion .group-detail { display: flex; justify-content: space-between; width: 100%; height: 84rpx; border: 4rpx solid #FFACB6; border-radius: 12rpx; overflow: hidden; margin-top: 26rpx; } .group-jion .success-border { border: 4rpx solid #93D33D; } .group-jion .group-detail .number { display: flex; flex-direction: column; justify-content: center; margin-left: 20rpx; font-size: 28rpx; color: #4A4A4A; } .group-jion .group-detail .jion-btn { display: flex; align-items: center; justify-content: center; width: 36%; height: 100%; background: #FF3E55; color: #fff; font-size: 36rpx; line-height: 100%; } .group-jion .group-detail .success-bg { background: #93D33D; }