diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css index 8f2e401..da70d90 100644 --- a/src/styles/business/drama-management.css +++ b/src/styles/business/drama-management.css @@ -289,26 +289,239 @@ html.dark .cover-preview-empty { background: var(--el-fill-color-light); } -/* 编辑弹窗里的视频预览 */ -.video-field { +/* 剧集编辑弹窗 */ +.episode-editor-dialog { display: flex; - gap: 12px; - align-items: flex-start; - width: 100%; + max-height: calc(100vh - 40px); + overflow: hidden; + flex-direction: column; + border-radius: var(--app-radius-lg) !important; } -.video-field-actions { + +.episode-editor-dialog .el-dialog__body { + flex: 1 1 auto; + padding: 8px 24px 0; + overflow-y: auto; +} + +.episode-editor-dialog .el-dialog__footer { + flex: 0 0 auto; + padding: 14px 24px; + background: var(--el-bg-color-overlay); + border-top: 1px solid var(--el-border-color-lighter); +} + +.episode-editor-dialog .el-dialog__footer .el-button { + min-width: 88px; + height: 36px; +} + +.episode-editor-section { + padding: 4px 0 18px; + border-bottom: 1px solid var(--el-border-color-lighter); +} + +.episode-editor-section + .episode-editor-section { + padding-top: 18px; +} + +.episode-editor-section:last-child { + padding-bottom: 4px; + border-bottom: 0; +} + +.episode-editor-section-title { + margin: 0 0 14px; + color: var(--el-text-color-primary); + font-size: 15px; + font-weight: 650; + line-height: 1.4; +} + +.episode-editor-grid { + display: grid; + gap: 0 16px; +} + +.episode-editor-grid--two { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.episode-editor-grid--three { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.episode-editor-number { + width: 180px !important; +} + +.episode-video-editor { + display: flex; + gap: 18px; + width: 100%; + align-items: flex-start; +} + +.episode-video-preview-card { + position: relative; + flex: 0 0 240px; + width: 240px; + aspect-ratio: 16 / 9; + overflow: hidden; + border: 1px solid var(--el-border-color); + border-radius: 10px; + background: #000; +} + +.episode-editor-video { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + background: #000; +} + +.episode-video-empty-upload, +.episode-video-empty-upload .el-upload { + width: 100%; + height: 100%; +} + +.episode-video-empty-upload .el-upload-dragger { + display: flex; + width: 100%; + height: 100%; + padding: 0; + color: var(--el-text-color-secondary); + background: var(--el-fill-color-lighter); + border: 1px dashed var(--el-border-color); + border-radius: 9px; + align-items: center; + justify-content: center; +} + +.episode-video-empty-copy { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 5px; + color: var(--el-text-color-secondary); +} + +.episode-video-empty-copy b { + color: var(--el-text-color-regular); + font-size: 13px; +} + +.episode-video-empty-copy span { + font-size: 11px; +} + +.episode-video-upload-mask { + position: absolute; + inset: 0; + display: flex; + color: #fff; + font-size: 12px; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + background: color-mix(in srgb, var(--el-color-primary) 78%, transparent); +} + +.episode-video-upload-mask b { + font-size: 16px; +} + +.episode-video-meta { + display: flex; flex: 1 1 auto; min-width: 0; + flex-direction: column; + gap: 10px; } -.form-video-preview { - display: block; - width: 200px; - height: 112px; - flex: 0 0 200px; - object-fit: contain; - border: 1px solid var(--el-border-color-lighter); - border-radius: var(--app-radius-md); - background: #000 !important; + +.episode-video-status { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; +} + +.episode-video-filename { + overflow: hidden; + color: var(--el-text-color-regular); + font-size: 13px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.episode-video-hint { + margin: 0; + color: var(--el-text-color-secondary); + font-size: 12px; +} + +.episode-video-actions { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.episode-video-actions .el-button { + height: 36px; +} + +.episode-video-link { + color: var(--el-color-primary); + font-size: 13px; + text-decoration: none; +} + +.episode-video-link:hover { + text-decoration: underline; +} + +.episode-video-empty-upload { + cursor: pointer; +} + +@media (max-width: 600px) { + .episode-editor-dialog { + width: calc(100vw - 24px) !important; + margin: 12px auto !important; + } + + .episode-editor-dialog .el-dialog__body { + padding-right: 18px; + padding-left: 18px; + } + + .episode-editor-grid--two, + .episode-editor-grid--three { + grid-template-columns: 1fr; + } + + .episode-video-editor { + flex-direction: column; + align-items: center; + } + + .episode-video-preview-card { + flex-basis: 135px; + } + + .episode-video-meta { + width: 100%; + } +} + +html.dark .episode-video-preview-card, +html.dark .episode-video-empty-upload .el-upload-dragger { + background: var(--el-fill-color-light); } /* 剧集预览弹窗里的播放器 */ diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue index 8c6864e..6e1b4a9 100644 --- a/src/views/contentManagement/EpisodeManagementView.vue +++ b/src/views/contentManagement/EpisodeManagementView.vue @@ -1,7 +1,7 @@