page { width: 100%; height: 100vh; } .association-detail { width: 100%; height: 100%; background:#f7f7f7; } .group-info { width: 100%; height: 360rpx; box-sizing: border-box; background: #fff; padding: 25rpx 40rpx 0 40rpx; } .group-info .content { width: 100%; height: 100%; } .group-info .top-card { height: 300rpx; width: 100%; border-radius: 16rpx; overflow: hidden; position: relative; } .group-info .top-card .bg-image { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 1; } .group-info .top-card .card-content { width: 100%; height: 100%; position: relative; top: 0; left: 0; z-index: 10; box-sizing: border-box; padding-top: 48rpx; } .group-info .top-card .card-content .top { display: flex; justify-content: space-between; align-items: center; } .group-info .top-card .card-content .top .left { width: 100%; height: 106rpx; display: flex; align-items: center; } .group-info .top-card .card-content .top .left .personal-info { height: 100%; display: flex; flex-direction: column; justify-content: center; } .group-info .top-card .card-content .top .left .group-avatar { width: 106rpx; height: 106rpx; margin: 0 12rpx 0 40rpx; position: relative; } .group-info .top-card .card-content .top .left .group-avatar .init-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; overflow: hidden; } .group-info .top-card .card-content .top .left .group-avatar .change-avatar { position: absolute; bottom: 0; right: 0; width: 26rpx; height: 26rpx; } .group-info .top-card .card-content .top .left .group-name { font-size: 32rpx; color: #fff; } .group-info .top-card .card-content .top .left .group-leader { font-size: 20rpx; color: #fff; } .group-info .top-card .card-content .top .right { width: 120rpx; height: 46rpx; position: relative; } .group-info .top-card .card-content .top .right .dismiss-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; right: 0; z-index: 1; } .group-info .top-card .card-content .top .right .dismiss { height: 100%; line-height: 46rpx; width: 100%; text-align:center; color: #fff; font-size: 22rpx; position: relative; z-index: 10; } .group-info .top-card .card-content .bottom { width: 100%; display: flex; justify-content: space-around; align-items: center; margin-top: 30rpx; } .group-info .top-card .card-content .bottom .member { flex: 1; } .group-info .top-card .card-content .bottom .member .num { font-size: 40rpx; line-height: 54rpx; color: #fff; width: 100%; text-align:center; } .group-info .top-card .card-content .bottom .member .title { font-size: 22rpx; line-height: 36rpx; color: #fff; text-align:center; width: 100%; } .settings { width: 100%; height: auto; padding: 0 20rpx; box-sizing: border-box; margin-top: 20rpx; } .settings .content { width: 100%; height: auto; border-radius: 16rpx; background: #fff; box-sizing: border-box; padding: 0 25rpx; } .settings .list-item { width: 100%; height: 110rpx; display: flex; align-items: center; } .settings .list-item + .list-item .right { border-top: 1rpx solid #eaeaea; } .settings .list-item .left { width: 57rpx; height: 100%; display: flex; justify-content: center; align-items: center; } .settings .list-item .left image { width: 50rpx; height: 50rpx; object-fit: cover; position: relative; top: 4rpx; } .settings .list-item .right { height: 100%; margin-left: 10rpx; width: calc(100% - 67rpx); display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .settings .list-item .right .title { font-size: 32rpx; color: #333; } .settings .list-item .right .right-content { display: flex; align-items: center; } .settings .list-item .right .right-content view { color: #999; font-size: 32rpx; margin-right: 6rpx; } .settings .list-item .right .right-content .checkpendding-num { font-size: 20rpx; color: #fff; height: 26rpx; line-height: 26rpx; background: #FE4646; border-radius: 14rpx; padding: 0 15rpx; } .settings .list-item .right .right-content image { width: 24rpx; height: 24rpx; object-fit: cover; } .wux-actionsheet__button { font-size: 34rpx !important; color: #333 !important; }