page{ background: #f7f7f7; } .info { width: 100%; height: 100vh; background: #f7f7f7; box-sizing: border-box; padding: 24rpx 20rpx; } .infoContent { width: 100%; height: auto; overflow: auto; } .infoContent .ul { margin-top: 18rpx; } .info-item { width: 100%; box-sizing: border-box; padding: 0 12rpx; background: #ffffff; border-radius: 16rpx; overflow: hidden; } .info-top { width: 100%; height: 108rpx; border-bottom: 1px solid #eaeaea; display: flex; align-items: center; box-sizing: border-box; padding: 0 12rpx; justify-content: space-between; } .info-top .left { display: flex; align-items: center; } .info-top .left image { width: 46rpx; height: 46rpx; object-fit: cover; } .info-top .left span { display: inline-block; font-size: 32rpx; color: #333333; margin-left: 10rpx; } .point { width: 12rpx; height: 12rpx; background: red; border-radius: 50%; margin-left: 8rpx; position: relative; top: 1px; } .info-top .right { width: 112rpx; font-size: 28rpx; color: #ffc529; white-space: nowrap; } .info-bottom { width: 100%; box-sizing: border-box; padding: 0 12rpx; } .title { color: #333333; font-size: 34rpx; font-weight: bolder; line-height: 50rpx; height: 50rpx; margin-top: 28rpx; } .time { color: #999999; font-size: 22rpx; line-height: 28rpx; height: 28rpx; } .content { color: #333333; font-size: 30rpx; line-height: 76rpx; height: 76rpx; margin-bottom: 16rpx; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .remark { box-sizing: border-box; padding: 0 18rpx; width: 100%; height: 88rpx; line-height: 88rpx; background-color: #f2f2f2; border-radius: 16rpx; overflow:hidden; font-size: 30rpx; color: #999999; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 40rpx; } .group-name { font-size: 30rpx; color: #333333; line-height: 60rpx; height: 60rpx; margin-top: 8rpx; text-indent: -7px; } .joinlook { font-size: 24rpx; color: #999999; line-height: 30rpx; height: 30rpx; margin-bottom: 40rpx; } .program-content { color: #333333; font-size: 32rpx; line-height: 40rpx; margin: 22rpx 0 38rpx; }