.list-wr { display: flex; width: 100%; box-sizing: border-box; } .left-wr { flex-shrink: 0; width: 190rpx; height: 100vh; box-sizing: border-box; background: rgba(247, 247, 247, 1); } .left-wr .list { width: 100%; box-sizing: border-box; padding: 0 10rpx 60rpx 10rpx; } .left-wr .list .item { position: relative; width: 100%; box-sizing: border-box; padding: 28rpx 24rpx; font-size: 26rpx; font-weight: 400; color: #333; border-bottom: 1rpx solid #E7EEEE; } .left-wr .list .item .text { width: 100%; max-height: 80rpx; text-align: center; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .left-wr .list .item-on { font-size: 30rpx; font-weight: 800; } .left-wr .list .item-on::before { position: absolute; top: 50%; left: -10rpx; content: ''; width: 4rpx; height: 30rpx; margin-top: -15rpx; background: #E3271C; } .right-wr { flex: 1; height: 100vh; background: #fff; } .right-wr .list { width: 100%; box-sizing: border-box; padding: 0 20rpx 60rpx 30rpx; } .right-wr .list .item { padding: 40rpx 0; border-bottom: 1rpx solid #E7EEEE; } .right-wr .list .item .item-cate { font-size: 30rpx; font-weight: 400; color: #333; line-height: 46rpx; } .right-wr .list .item .item-btn { width: 100%; display: flex; justify-content: flex-end; margin-top: 28rpx; } .right-wr .list .item .item-btn view { width: 110rpx; height: 48rpx; box-sizing: border-box; font-size: 26rpx; color: #fff; text-align: center; line-height: 46rpx; background: #E3271C; border-radius: 24rpx; -webkit-border-radius: 24rpx; -moz-border-radius: 24rpx; -ms-border-radius: 24rpx; -o-border-radius: 24rpx; } .scroll-view { width: 100%; height: 100vh; } .no-data { width: 100%; padding: 100rpx 0 60rpx 0; font-size: 26rpx; font-weight: 500; color: #999; text-align: center; }