.containerView.public { background: #fcfcfc; } .van-collapse-item__content { background-color: #f7f7f7 !important; padding: 0 !important; } .controlView {} .controlView .controlItem { box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 2px 0px; display: flex; justify-content: space-between; align-items: center; background: #ffffff; border-radius: 10rpx; margin: 24rpx 20rpx; padding: 24rpx 30rpx; } .controlView .controlItem .msg { flex: 1; word-break: break-all; } .controlView .controlItem .msg .title { font-size: 36rpx; } .controlView .controlItem .msg .status { position: relative; margin-top: 24rpx; margin-left: 24rpx; font-size: 24rpx; } .controlView .controlItem .msg .status.online::after { display: block; content: ''; position: absolute; margin-right: 10rpx; right: 100%; top: 10rpx; width: 16rpx; height: 16rpx; background: #84c786; border-radius: 10rpx; } .controlView .controlItem .msg .status.offline::after { display: block; content: ''; position: absolute; margin-right: 10rpx; right: 100%; top: 10rpx; width: 16rpx; height: 16rpx; background: gray; border-radius: 10rpx; } .controlView .controlItem .closeView { position: relative; overflow: hidden; border-radius: 200rpx; padding: 10rpx; } .controlView .controlItem .closeView::after { box-sizing: border-box; content: ''; display: block; position: absolute; border-radius: 200rpx; background: rgba(255, 255, 255, 0.7); left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .controlView .controlItem .closeView.activity::after { animation: selfAnimation 0.2s; } @keyframes selfAnimation { 0% { width: 0; height: 0; } 100% { width: 150%; height: 150%; } } .controlView .controlItem .closeView .openCloseImg { display: block; width: 69rpx; height: 69rpx; } .itemTitleView { display: flex; justify-content: space-between; align-items: center; margin: 34rpx 24rpx; } .itemTitleView .title { margin-left: 10rpx; font-size: 28rpx; color: #141414; } .itemTitleView .more { font-size: 28rpx; color: #4b89ef; } .recordView { padding: 20rpx 24rpx; background: white; } .recordView .recordItem { display: flex; justify-content: start; align-items: flex-start; padding: 20rpx 10rpx 20rpx 60rpx; background: #ffffff; } .recordView .recordItem:nth-child(2n) { background: #f9fafc; } .recordView .recordItem .timeView { font-size: 26rpx; line-height: 1; } .recordView .recordItem .timeView .timeYMD { position: relative; } .recordView .recordItem .timeView .timeYMD::after { display: block; content: ''; position: absolute; margin-right: 20rpx; right: 100%; top: 6rpx; width: 12rpx; height: 12rpx; background: #2A6FFF; border-radius: 10rpx; } .recordView .recordItem .timeView .timeHm { margin-top: 10rpx; } .recordView .recordItem .msg { flex: 1; margin-left: 60rpx; font-size: 26rpx; word-break: break-all; line-height: 1; }