.container { background-color: #f3f3f3; } .tabBox { background-color: #3e6ffd; padding: 0 20rpx; line-height: 48rpx; overflow-x: auto; white-space: nowrap; } .tabItem { padding: 20rpx 30rpx; margin: 16rpx 0; display: inline-block; width: auto; text-align: center; color: #fff; background-color: #6d91ff; font-size: 28rpx; position: relative; border-radius: 20rpx; } .tabItem + .tabItem{ margin-left: 30rpx; } .active { color: #3e6ffd; background-color: #fff; font-weight: bold; box-shadow: 4rpx 5rpx 12rpx 0rpx #243979; } .hazardPublicityBox{ color: #3e6ffd; margin: 30rpx 20rpx 0; } .hazardPublicityInfo{ padding: 30rpx; border-radius: 10rpx; background-color: #fff; } .hazardPublicityTitle{ color: #04a8f0; width: 100%; line-height: 46rpx; font-size: 28rpx; font-weight: bold; border-bottom: 2rpx #f1f1f1 solid; padding-bottom: 20rpx; display: flex; justify-content: space-between; align-items: center; } .contentBox { position: relative; height: calc(100vh - 250rpx); } .listInfo { margin: 30rpx 20rpx; padding: 30rpx; border-radius: 10rpx; background-color: #fff; } .listTitle { color: #000405; width: 100%; line-height: 46rpx; font-size: 32rpx; font-weight: bold; border-bottom: 2rpx #f1f1f1 solid; padding-bottom: 20rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .listContent{ position: relative; padding-top: 20rpx; font-size: 28rpx; } .listContentImg{ width: 40rpx; height: 40rpx; position: absolute; top: 24rpx; left: 0rpx; } .listContentText{ padding-left: 50rpx; color: #333; line-height: 46rpx; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; /*行向垂直排列*/ -webkit-line-clamp: 2; }