RTMP推流协议视频流媒体直播点播平台EasyDSS视频广场分类滚动样式优化示例
程序员文章站
2022-03-01 22:01:39
上一篇我们讲了EasyDSS视频平台测试中出现的问题(EasyDSS处于小屏幕下分页溢出问题修复),还有一个问题我们也和大家一起分享一下。EasyDSS的直播点播平台有视频广场功能,视频广场会罗列所有的点播视频封面,并且在视频广场可以将视频按照标签进行分类,选中分类可只显示该分类下的视频封面。当视频分类多的时候,会显示滚动条,但是该滚动条也出现了上下滚动的样式,导致分类栏不能上下居中。检查盒子元素,发现滚动条属性为overflow:auto,意思为横向纵向都显示滚动条。但实际只需要显示横向的,而...
上一篇我们讲了EasyDSS视频平台测试中出现的问题(EasyDSS处于小屏幕下分页溢出问题修复),还有一个问题我们也和大家一起分享一下。
EasyDSS的直播点播平台有视频广场功能,视频广场会罗列所有的点播视频封面,并且在视频广场可以将视频按照标签进行分类,选中分类可只显示该分类下的视频封面。当视频分类多的时候,会显示滚动条,但是该滚动条也出现了上下滚动的样式,导致分类栏不能上下居中。
检查盒子元素,发现滚动条属性为overflow:auto,意思为横向纵向都显示滚动条。但实际只需要显示横向的,而实际盒子高度有限,显示横向后会增加盒子高度,导致了纵向显示了出来。
因此我们在项目中找到VODShareList.Vue文件,找到盒子元素添加 my-share-label 样式类。
样式类代码如下:
.my-share-label {
white-space: nowrap;
overflow-x: hidden;
height: 41px;
line-height: 40px;
margin-top: 30px;
margin-bottom: 10px;
background-color: #fff;
&::-webkit-scrollbar {
cursor: pointer;
height: 10px;
}
&::-webkit-scrollbar-thumb {
background : #EAEEF3;
}
&::-webkit-scrollbar-track {
background : #ffffff;
}
}
.my-label-checkbox {
display: inline-block;
height: 40px;
.el-checkbox {
margin: 0;
margin-right: 15px;
}
}
.my-share-label:hover {
overflow-x: auto;
}
修改后不显示上下滚动条,界面看起来更加简洁:
EasyDSS视频平台支持阿里云、腾讯云、华为云、青云、七牛云等多种云架构,部署高效、更灵活,且提供编程语言无关化的RESTfulAPI接口,可以很简单的进行二次开发和应用。
如果大家还想更加深入了解EasyDSS操作方法或者各项功能,也可以联系我们获取测试账号进行下载测试,测试期间可调用接口进行开发,TSINGSEE青犀视频欢迎大家的咨询。
本文地址:https://blog.csdn.net/EasyDSS/article/details/110198795