欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  网络运营

RTMP推流协议视频流媒体直播点播平台EasyDSS视频广场分类滚动样式优化示例

程序员文章站 2022-03-01 22:01:39
上一篇我们讲了EasyDSS视频平台测试中出现的问题(EasyDSS处于小屏幕下分页溢出问题修复),还有一个问题我们也和大家一起分享一下。EasyDSS的直播点播平台有视频广场功能,视频广场会罗列所有的点播视频封面,并且在视频广场可以将视频按照标签进行分类,选中分类可只显示该分类下的视频封面。当视频分类多的时候,会显示滚动条,但是该滚动条也出现了上下滚动的样式,导致分类栏不能上下居中。检查盒子元素,发现滚动条属性为overflow:auto,意思为横向纵向都显示滚动条。但实际只需要显示横向的,而...

上一篇我们讲了EasyDSS视频平台测试中出现的问题(EasyDSS处于小屏幕下分页溢出问题修复),还有一个问题我们也和大家一起分享一下。

EasyDSS的直播点播平台有视频广场功能,视频广场会罗列所有的点播视频封面,并且在视频广场可以将视频按照标签进行分类,选中分类可只显示该分类下的视频封面。当视频分类多的时候,会显示滚动条,但是该滚动条也出现了上下滚动的样式,导致分类栏不能上下居中。

RTMP推流协议视频流媒体直播点播平台EasyDSS视频广场分类滚动样式优化示例

检查盒子元素,发现滚动条属性为overflow:auto,意思为横向纵向都显示滚动条。但实际只需要显示横向的,而实际盒子高度有限,显示横向后会增加盒子高度,导致了纵向显示了出来。

RTMP推流协议视频流媒体直播点播平台EasyDSS视频广场分类滚动样式优化示例

因此我们在项目中找到VODShareList.Vue文件,找到盒子元素添加 my-share-label 样式类。

RTMP推流协议视频流媒体直播点播平台EasyDSS视频广场分类滚动样式优化示例

样式类代码如下:

.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;
}

修改后不显示上下滚动条,界面看起来更加简洁:

RTMP推流协议视频流媒体直播点播平台EasyDSS视频广场分类滚动样式优化示例

EasyDSS视频平台支持阿里云、腾讯云、华为云、青云、七牛云等多种云架构,部署高效、更灵活,且提供编程语言无关化的RESTfulAPI接口,可以很简单的进行二次开发和应用。

如果大家还想更加深入了解EasyDSS操作方法或者各项功能,也可以联系我们获取测试账号进行下载测试,测试期间可调用接口进行开发,TSINGSEE青犀视频欢迎大家的咨询。

本文地址:https://blog.csdn.net/EasyDSS/article/details/110198795

相关标签: EasyDSS相关问题