.oss-wrapper { display: flex; flex-wrap: wrap; } .oss-card { margin: 10px 0 10px 0; width: 100%; :hover { .content .other .name { color: #1890ff; transition: color .3s; } } cursor: pointer; .ivu-card-body { padding: 0; } .content { display: flex; flex-direction: column; :hover { .play { transition: opacity .3s; opacity: 1 !important; } } .img { height: 135px; object-fit: cover; } .video { height: 135px; position: relative; .cover { height: 100%; width: 100%; object-fit: fill; } .play { position: absolute; top: 43px; left: calc(50% - 25px); height: 50px; width: 50px; opacity: 0.8; } } .other { padding: 16px; height: 135px; .name { font-size: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: rgba(0, 0, 0, .85); font-weight: 500; margin-bottom: 4px; } .key { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; height: 45px; color: rgba(0, 0, 0, .45); } .info { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 36px; font-size: 12px; color: rgba(0, 0, 0, .45); } } .actions { display: flex; align-items: center; height: 50px; background: #f7f9fa; border-top: 1px solid #e8e8e8; i:hover { color: #1890ff; } .btn { display: flex; justify-content: center; width: 25%; border-right: 1px solid #e8e8e8; } .btn-no { display: flex; justify-content: center; width: 25%; } } } }