.Details-Iframe { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000; background: var(--el-bg-color-page); } .Details-Iframe iframe { border: 0; width: 100%; height: 100%; } #main_scrollbar { padding: 0 10px; } .image-wrapper .imagtablelayout .li-item:first-child { cursor: pointer; } .image-wrapper.ischecked .imagtablelayout { cursor: pointer; } .imagtablelayout { border-top: var(--el-border); border-bottom: var(--el-border); } .imagtablelayout .li-item { line-height: 30px; height: 30px; padding: 0 4px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .imagtablelayout .li-item:first-child { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .imagtablelayout.imagtable-content { height: 80px; line-height: 80px; border-top: 0; position: absolute; width: 100%; left: 0; } .imagtablelayout.imagtable-content:hover { background: var(--el-fill-color-light); } .imagtablelayout.imagtable-content.tabeven { width: 50%; } .imagtablelayout.imagtable-content .li-item { padding: 6px 4px; height: 100%; min-height: 100%; overflow: hidden; } .imagtablelayout.imagtable-content .li-item .image { width: 43px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 8px; } .imagtablelayout.imagtable-content .li-item .image .el-image__inner { border-radius: var(--el-border-radius-base); width: auto; height: auto; max-width: 100%; max-height: 100%; border: var(--el-border); border-radius: var(--el-border-radius-base); } .imagtablelayout.imagtable-content .li-item .image .el-image__wrapper .el-image__placeholder { background: var(--img-bg-color); } .imagtablelayout.imagtable-content .li-item .image .el-image__wrapper .el-image__error { background: var(--img-bg-color); border-radius: var(--el-border-radius-base); } .imagtablelayout.imagtable-content .li-item:first-child .name { font-size: var(--el-font-size-extra-small); width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; max-height: 100%; line-height: 18px; } .imagtablelayout.imagtable-content.isodd { background: var(--el-fill-color-lighter); } .imagtablelayout.imagtable-content.active { background: var(--el-color-primary); color: #FFFFFF; } .imagtablelayout.imagtable-content.active .li-item .image .el-image__inner { border: 1px solid transparent; } .imagtablelayout.imagtable-content.active .el-text { color: #FFFFFF; } .imagtablelayout.imagtable-content.limit { position: relative; border-bottom: var(--el-border); } .imagtablelayout.imagtable-content.limit:last-child { border: 0; } .imagtablelayout.imagtable-content.limit .li-item { height: 55px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .imagtablelayout.imagtable-content.limit.tabeven { width: 50%; float: left; } .imagtablelayout.imagtable-content.limit.tabeven:nth-last-child(2) { border: 0; } .imagtablelayout.imagtable-content.details { height: 123px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .imagtablelayout.imagtable-content.details .li-item { padding: 10px; } .imagtablelayout.imagtable-content.details .li-item.img { width: 119px; min-width: 119px; } .imagtablelayout.imagtable-content.details .li-item.item-details { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; display: block; } .imagtablelayout.imagtable-content.details .li-item.item-details .name { width: 100%; margin-bottom: 8px; height: 25px; line-height: 25px; float: left; font-weight: 700; cursor: pointer; } .imagtablelayout.imagtable-content.details .li-item.item-details .name:hover { color: var(--el-text-color-primary); } .imagtablelayout.imagtable-content.details .li-item.item-details .message { width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 20px; padding-bottom: 6px; height: 45px; float: left; } .imagtablelayout.imagtable-content.details .li-item.item-details .minute { width: 100%; height: 24px; float: left; line-height: 24px; } .imagtablelayout.imagtable-content.details .li-item.item-details .minute .el-text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 24px; } .imagtablelayout.imagtable-content.details .li-item.item-details .minute .el-text + .el-text { margin-left: 18px; } .imagtablelayout.imagtable-content.details .li-item.operation { width: auto; } .imagelayout { position: relative; padding-top: 8px; padding-bottom: 30px; } .imagelayout .image-wrapper { position: relative; } .imagelayout .image-wrapper.limit.tabodd, .imagelayout .image-wrapper.limit.tabeven, .imagelayout .image-wrapper.limit.details { overflow: hidden; padding: 8px 28px; border-radius: 8px; border: var(--el-border); background: var(--el-bg-color); } .imagelayout .image-wrapper .image-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; cursor: default; } .imagelayout .image-wrapper .image-item.image-item-imageList .image-single { border: 0; background: transparent; } .imagelayout .image-wrapper .image-item.image-item-imageList .image-single::before { display: none; } .imagelayout .image-wrapper .image-item.image-item-imageList .image-single.active { border: 0; } .imagelayout .image-wrapper .image-item.image-item-imageList .image-single.active .image::before { border: 2px solid var(--el-color-primary); } .imagelayout .image-wrapper .image-item.image-item-imageList .image-single .image { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .imagelayout .image-wrapper .image-item.image-item-imageList .image-single .image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: var(--el-border); z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 8px; } .imagelayout .image-wrapper .image-item.image-item-imageList .message { text-align: center; } .imagelayout .image-wrapper .image-item .collect-box { position: absolute; z-index: 20; left: 8px; top: 4px; opacity: 0; } .imagelayout .image-wrapper .image-item:hover .collect-box { opacity: 1; } .imagelayout .image-wrapper .image-item .operation-box { position: absolute; right: 8px; top: 6px; z-index: 20; opacity: 0; } .imagelayout .image-wrapper .image-item .operation-box .operation-btn { background-color: var(--el-overlay-color-lighter); width: 35px; height: 35px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; outline: none; } .imagelayout .image-wrapper .image-item .operation-box .operation-btn .el-icon { color: #FFFFFF; } .imagelayout .image-wrapper .image-item:hover .operation-box { opacity: 1; } .imagelayout .image-wrapper .image-item .image-single { overflow: hidden; border-radius: 8px; position: relative; background: var(--el-bg-color); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .imagelayout .image-wrapper .image-item .image-single::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: var(--el-border); z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 8px; } .imagelayout .image-wrapper .image-item .image-single.active::before { border: 2px solid var(--el-color-primary); } .imagelayout .image-wrapper .image-item .image-single.music { border-color: var(--el-border-color); border-width: 1px; } .imagelayout .image-wrapper .image-item .image-single.active .movies-box { border: 2px solid var(--el-color-primary); border-radius: 8px; overflow: hidden; } .imagelayout .image-wrapper .image-item .image-single .movies-box { position: absolute; width: 100%; height: 100%; z-index: 10; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item { position: relative; width: 100%; height: 100%; background: var(--el-bg-color); } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .circulars { background: var(--el-overlay-color-lighter); position: absolute; right: 6px; top: 6px; border-radius: 50%; width: 35px; height: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #ffffff; cursor: pointer; z-index: 10; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .circulars.voice { position: absolute; right: 46px; top: 7px; z-index: 5; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .time { position: absolute; right: 6px; bottom: 6px; font-size: 12px; border-radius: 8px; background: var(--el-overlay-color-light); color: #FFFFFF; padding: 4px 8px; z-index: 10; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .line { width: 1px; background: var(--el-text-color-secondary); left: 0; top: 0; position: absolute; bottom: 0; z-index: 2; height: 100%; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .music-box { position: absolute; width: 100%; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .music-box .video { width: 100%; height: 100%; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .el-progress { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .el-progress .el-progress-bar__outer { background: transparent; border-radius: 0; } .imagelayout .image-wrapper .image-item .image-single .movies-box .movies-item .el-progress .el-progress-bar__outer .el-progress-bar__inner { border-radius: 0; background: rgba(var(--el-color-primary-rgb), 0.6); -webkit-transition: none; transition: none; } .imagelayout .image-wrapper .image-item .image-single .image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; background: transparent !important; } .imagelayout .image-wrapper .image-item .image-single .image .el-image__inner { border-radius: 8px; width: auto; height: auto; max-width: 100%; max-height: 100%; background: transparent !important; } .imagelayout .image-wrapper .image-item .image-single .image .el-image__wrapper .el-image__placeholder { border-radius: 8px; background: var(--img-bg-color); } .imagelayout .image-wrapper .image-item .image-single .image .el-image__wrapper .el-image__error { border-radius: 8px; background: var(--img-bg-color); border-radius: 8px; } .imagelayout .image-wrapper .image-item .last-btn { position: absolute; top: 4px; right: 8px; opacity: 0; -webkit-transition: var(--el-transition-fade); transition: var(--el-transition-fade); z-index: 10; } .imagelayout .image-wrapper .image-item:hover .last-btn { opacity: 1; } .imagelayout .image-wrapper .image-item .message { font-size: 0; padding: 0 4px; } .imagelayout .image-wrapper .image-item .message .name { max-height: 44px; width: 100%; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-size: var(--el-font-size-base); white-space: unset; text-align: center; line-height: 20px; color: var(--el-text-color-primary); padding-top: 4px; } .imagelayout .image-wrapper .image-item .message .other { height: 20px; width: 100%; text-align: center; padding-top: 4px; color: var(--el-text-color-secondary); } .imagelayout .image-wrapper .image-item .message .other .el-rate { height: auto; } .imagelayout .el-button-group .el-button--primary { border-color: var(--el-color-primary); } .imagelayout .el-button-group .el-button--primary:nth-child(2) { border-left-color: var(--el-button-divide-border-color); } .file-headers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 10px; }