|
@@ -1,40 +1,61 @@
|
|
|
<template>
|
|
|
<ModuleBase :type="data.type">
|
|
|
<template #content>
|
|
|
- <span class="link" @click="BatchSetFormat('bold')">批量设置粗体</span>
|
|
|
- <div class="option-list">
|
|
|
- <div v-for="(item, i) in data.option_list" :key="i" class="voice-matrix">
|
|
|
- <div v-for="li in item" :key="li.mark" class="matrix-item">
|
|
|
- <!-- eslint-disable max-len -->
|
|
|
- <RichText
|
|
|
- ref="richText"
|
|
|
- v-model="li.content"
|
|
|
- :inline="true"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
- />
|
|
|
+ <div class="container">
|
|
|
+ <span class="link" @click="BatchSetFormat('bold')">批量设置粗体</span>
|
|
|
+
|
|
|
+ <div class="option-list">
|
|
|
+ <div v-for="(item, i) in data.option_list" :key="i" class="voice-matrix">
|
|
|
+ <div v-for="li in item" :key="li.mark" class="matrix-item">
|
|
|
+ <!-- eslint-disable max-len -->
|
|
|
+ <RichText
|
|
|
+ ref="richText"
|
|
|
+ v-model="li.content"
|
|
|
+ :inline="true"
|
|
|
+ toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <SelectUpload label="矩阵音频" type="audio" width="500px" @uploadSuccess="uploadAudioSuccess" />
|
|
|
- <div v-if="data.audio_data.url.length > 0" class="upload-file">
|
|
|
- <div class="file-name">
|
|
|
- <span>
|
|
|
- <SvgIcon icon-class="note" size="12" />
|
|
|
- <span>{{ data.audio_data.name }}</span>
|
|
|
- </span>
|
|
|
+ <SelectUpload
|
|
|
+ label="矩阵音频"
|
|
|
+ type="audio"
|
|
|
+ width="600px"
|
|
|
+ :is-show-resource="false"
|
|
|
+ @uploadSuccess="uploadAudioSuccess"
|
|
|
+ />
|
|
|
+ <div v-if="data.audio_data.url.length > 0" class="upload-file">
|
|
|
+ <div class="file-name">
|
|
|
+ <span>
|
|
|
+ <SvgIcon icon-class="note" size="12" />
|
|
|
+ <span>{{ data.audio_data.name }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <SvgIcon icon-class="delete-black" size="12" @click="removeFile('audio')" />
|
|
|
</div>
|
|
|
- <SvgIcon icon-class="delete-black" size="12" @click="removeFile('audio')" />
|
|
|
- </div>
|
|
|
- <SelectUpload label="lrc 文件" :limit="1" type="lrc" width="500px" @uploadSuccess="uploadLrcSuccess" />
|
|
|
- <div v-if="data.lrc_data.url.length > 0" class="upload-file">
|
|
|
- <div class="file-name">
|
|
|
- <span>
|
|
|
- <SvgIcon icon-class="note" size="12" />
|
|
|
- <span>{{ data.lrc_data.name }}</span>
|
|
|
- </span>
|
|
|
+
|
|
|
+ <div class="upload-lrc">
|
|
|
+ <SelectUpload
|
|
|
+ label="音频字幕(lrc)文件"
|
|
|
+ :limit="1"
|
|
|
+ type="lrc"
|
|
|
+ width="500px"
|
|
|
+ :is-show-resource="false"
|
|
|
+ @uploadSuccess="uploadLrcSuccess"
|
|
|
+ />
|
|
|
+ <el-button size="small" type="primary">校对字幕</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="data.lrc_data.url.length > 0" class="upload-file">
|
|
|
+ <div class="file-name">
|
|
|
+ <span>
|
|
|
+ <SvgIcon icon-class="note" size="12" />
|
|
|
+ <span>{{ data.lrc_data.name }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <SvgIcon icon-class="delete-black" size="12" @click="removeFile('lrc')" />
|
|
|
</div>
|
|
|
- <SvgIcon icon-class="delete-black" size="12" @click="removeFile('lrc')" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</ModuleBase>
|
|
@@ -176,60 +197,72 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.option-list {
|
|
|
- margin-bottom: 12px;
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 8px;
|
|
|
|
|
|
- .voice-matrix {
|
|
|
- display: flex;
|
|
|
- row-gap: 16px;
|
|
|
+ .option-list {
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
|
- + .voice-matrix {
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .matrix-item {
|
|
|
- flex: 1;
|
|
|
- min-width: 75px;
|
|
|
- padding: 8px;
|
|
|
- border: 1px solid $border-color;
|
|
|
+ .voice-matrix {
|
|
|
+ display: flex;
|
|
|
+ row-gap: 16px;
|
|
|
|
|
|
- &:not(:last-child) {
|
|
|
- border-right: 0;
|
|
|
+ + .voice-matrix {
|
|
|
+ margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
- :deep p {
|
|
|
- margin: 0;
|
|
|
+ .matrix-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 75px;
|
|
|
+ padding: 8px;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.upload-file {
|
|
|
- display: flex;
|
|
|
- column-gap: 12px;
|
|
|
- align-items: center;
|
|
|
- margin: 8px 0;
|
|
|
-
|
|
|
- .file-name {
|
|
|
+ .upload-file {
|
|
|
display: flex;
|
|
|
- column-gap: 14px;
|
|
|
+ column-gap: 12px;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- max-width: 360px;
|
|
|
- padding: 8px 12px;
|
|
|
- font-size: 14px;
|
|
|
- color: #1d2129;
|
|
|
- background-color: #f7f8fa;
|
|
|
-
|
|
|
- span {
|
|
|
+ margin: 8px 0;
|
|
|
+
|
|
|
+ .file-name {
|
|
|
display: flex;
|
|
|
column-gap: 14px;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ max-width: 360px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d2129;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 14px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .svg-icon {
|
|
|
- cursor: pointer;
|
|
|
+ .upload-lrc {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 12px;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|