|
@@ -108,8 +108,9 @@ |
|
|
<!-- 选中需要上传的图片后 --> |
|
|
<!-- 选中需要上传的图片后 --> |
|
|
<div class="left-top" v-show="showUploadBtn == 4"> |
|
|
<div class="left-top" v-show="showUploadBtn == 4"> |
|
|
<el-row style="display: flex; justify-content: flex-end"> |
|
|
<el-row style="display: flex; justify-content: flex-end"> |
|
|
<!-- 上传按钮 --> |
|
|
|
|
|
<div class="btnBox" v-show="submitImgBtn"> |
|
|
|
|
|
|
|
|
<!-- 上传按钮 废弃了--> |
|
|
|
|
|
<!-- <div v-if="false" class="btnBox" v-show="submitImgBtn"> --> |
|
|
|
|
|
<div v-if="false" class="btnBox"> |
|
|
<button class="uploadBtn"> |
|
|
<button class="uploadBtn"> |
|
|
{{ $t("createVideo.reselect") }} |
|
|
{{ $t("createVideo.reselect") }} |
|
|
<input accept="image/*" type="file" @change="lookImg" /> |
|
|
<input accept="image/*" type="file" @change="lookImg" /> |
|
@@ -236,6 +237,7 @@ |
|
|
:infinite-scroll-disabled="overLoadUser" |
|
|
:infinite-scroll-disabled="overLoadUser" |
|
|
> |
|
|
> |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
|
|
|
<el-icon><i-ep-Lock /></el-icon> |
|
|
{{ $t("createVideo.comingSoon") }} |
|
|
{{ $t("createVideo.comingSoon") }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -428,30 +430,87 @@ |
|
|
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> |
|
|
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> |
|
|
{{ $t("createVideo.chooseMusic") }} |
|
|
{{ $t("createVideo.chooseMusic") }} |
|
|
</p> |
|
|
</p> |
|
|
<!-- 搜索框 --> |
|
|
|
|
|
<!-- <div class="flex justify-between" style="width: 99%"> |
|
|
|
|
|
<el-input |
|
|
|
|
|
v-model="searchInput" |
|
|
|
|
|
:placeholder="$t('createVideo.searchMusic')" |
|
|
|
|
|
@keyup.enter="searchMusicList" |
|
|
|
|
|
|
|
|
<!-- tab栏 --> |
|
|
|
|
|
<div class="musicTab"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="musicTabItem" |
|
|
|
|
|
:class="musicTabActive == 1 ? 'musicTabItemActive' : ''" |
|
|
|
|
|
@click="musicTabActive = 1" |
|
|
|
|
|
> |
|
|
|
|
|
{{ $t("createVideo.hotMusic") }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="AccessToken" |
|
|
|
|
|
class="musicTabItem" |
|
|
|
|
|
:class="musicTabActive == 2 ? 'musicTabItemActive' : ''" |
|
|
|
|
|
@click="musicTabActive = 2" |
|
|
|
|
|
> |
|
|
|
|
|
{{ $t("createVideo.personalWarehouse") }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 上传音乐 --> |
|
|
|
|
|
<div v-if="musicTabActive == 2" class="uploadVideo"> |
|
|
|
|
|
+ |
|
|
|
|
|
<input |
|
|
|
|
|
accept="audio/*" |
|
|
|
|
|
type="file" |
|
|
|
|
|
ref="fileMusicInput" |
|
|
|
|
|
@click="e.target.value = null" |
|
|
|
|
|
@change="uploadMusic" |
|
|
/> |
|
|
/> |
|
|
<el-icon class="icon-edit" @click="searchMusicList" |
|
|
|
|
|
><i-ep-search |
|
|
|
|
|
/></el-icon> |
|
|
|
|
|
</div> --> |
|
|
|
|
|
<!-- 音乐列表展示 --> |
|
|
|
|
|
<div class="musicList"> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 系统音乐列表展示 --> |
|
|
|
|
|
<div v-if="musicTabActive == 1" class="musicList"> |
|
|
|
|
|
<div |
|
|
|
|
|
@click="chooseMusicUrl(item.url, item.id)" |
|
|
|
|
|
class="musicItem" |
|
|
|
|
|
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''" |
|
|
|
|
|
v-for="item in musicListSystem" |
|
|
|
|
|
:key="item.id" |
|
|
|
|
|
> |
|
|
|
|
|
<span class="musicNmae"> 🎵{{ item.name }}</span> |
|
|
|
|
|
<span class="musicTime"> {{ handleTime(item.time) }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 个人音乐列表展示 --> |
|
|
|
|
|
<div v-if="musicTabActive == 2" class="musicList"> |
|
|
<div |
|
|
<div |
|
|
@click="chooseMusicUrl(item.url, item.id)" |
|
|
@click="chooseMusicUrl(item.url, item.id)" |
|
|
class="musicItem" |
|
|
class="musicItem" |
|
|
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''" |
|
|
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''" |
|
|
v-for="item in musicList" |
|
|
|
|
|
|
|
|
v-for="item in musicListPerson" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
> |
|
|
> |
|
|
<span class="musicNmae"> {{ item.name }}</span> |
|
|
|
|
|
|
|
|
<span class="musicNmae"> 🎵{{ item.name }}</span> |
|
|
<span class="musicTime"> {{ handleTime(item.time) }}</span> |
|
|
<span class="musicTime"> {{ handleTime(item.time) }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 系统分页 --> |
|
|
|
|
|
<div v-if="musicTabActive == 1" class="pagination"> |
|
|
|
|
|
<el-pagination |
|
|
|
|
|
v-model:current-page="musicListPageNumSystem" |
|
|
|
|
|
v-model:page-size="musicListPageSize" |
|
|
|
|
|
:small="false" |
|
|
|
|
|
:disabled="false" |
|
|
|
|
|
:background="true" |
|
|
|
|
|
layout="total, prev, pager, next, jumper" |
|
|
|
|
|
:total="musicListTotalSystem" |
|
|
|
|
|
@current-change="musicListPageNumSystemChange" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 个人分页 --> |
|
|
|
|
|
<div v-if="musicTabActive == 2" class="pagination"> |
|
|
|
|
|
<el-pagination |
|
|
|
|
|
v-model:current-page="musicListPageNumPerson" |
|
|
|
|
|
v-model:page-size="musicListPageSize" |
|
|
|
|
|
:small="false" |
|
|
|
|
|
:disabled="false" |
|
|
|
|
|
:background="true" |
|
|
|
|
|
layout="total, prev, pager, next, jumper" |
|
|
|
|
|
:total="musicListTotalPerson" |
|
|
|
|
|
@current-change="musicListPageNumPersonChange" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
<div class="AudioBox" v-if="audioMusicUrl"> |
|
|
<div class="AudioBox" v-if="audioMusicUrl"> |
|
|
<audio controls :src="audioMusicUrl" id="uploadAudio"></audio> |
|
|
<audio controls :src="audioMusicUrl" id="uploadAudio"></audio> |
|
|
</div> |
|
|
</div> |
|
@@ -610,7 +669,9 @@ import { |
|
|
createVideoApi, |
|
|
createVideoApi, |
|
|
previewAudioApi, |
|
|
previewAudioApi, |
|
|
findByIdApi, |
|
|
findByIdApi, |
|
|
musicListApi, |
|
|
|
|
|
|
|
|
musicListSystemApi, |
|
|
|
|
|
musicListPersonApi, |
|
|
|
|
|
saveMusicApi, |
|
|
} from "@/apis/createVideo"; |
|
|
} from "@/apis/createVideo"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import Recorder from "js-audio-recorder"; //mp3插件 |
|
|
import Recorder from "js-audio-recorder"; //mp3插件 |
|
@@ -802,6 +863,9 @@ async function changeFile() { |
|
|
} |
|
|
} |
|
|
faceItemActive.value = res2.data.id; |
|
|
faceItemActive.value = res2.data.id; |
|
|
imgUrl.value = res2.data.material; |
|
|
imgUrl.value = res2.data.material; |
|
|
|
|
|
submitImgBtn.value = false; |
|
|
|
|
|
console.log(123654); |
|
|
|
|
|
showUploadBtn.value = 1; |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
ElMessage.error(error); |
|
|
ElMessage.error(error); |
|
|
} |
|
|
} |
|
@@ -1096,8 +1160,31 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
}; |
|
|
}; |
|
|
if (index == 1) { |
|
|
if (index == 1) { |
|
|
createLoading.value = true; |
|
|
createLoading.value = true; |
|
|
|
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (!saveOrUpdateData.paperwork) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (!saveOrUpdateData.voiceMouldId) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
try { |
|
|
try { |
|
|
const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
|
const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
|
|
|
|
if (res2.code == 1002) { |
|
|
|
|
|
} |
|
|
// 这个if判断是不是仅仅保存视频 |
|
|
// 这个if判断是不是仅仅保存视频 |
|
|
if (isSaveVideo == "saveVideo") { |
|
|
if (isSaveVideo == "saveVideo") { |
|
|
ElMessage.success( |
|
|
ElMessage.success( |
|
@@ -1118,11 +1205,28 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
|
|
|
// ElMessage.error($t(error.message)); |
|
|
ElMessage.error(error); |
|
|
ElMessage.error(error); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
if (index == 2) { |
|
|
if (index == 2) { |
|
|
|
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (!saveOrUpdateData.voiceMaterialId) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" |
|
|
|
|
|
? `请选择音频文件` |
|
|
|
|
|
: `Please select an audio file` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
try { |
|
|
try { |
|
|
const res1 = await uploadAudio(isSaveVideo); // 上传音频 |
|
|
const res1 = await uploadAudio(isSaveVideo); // 上传音频 |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
@@ -1132,6 +1236,22 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
} |
|
|
} |
|
|
if (index == 3) { |
|
|
if (index == 3) { |
|
|
try { |
|
|
try { |
|
|
|
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (!saveOrUpdateData.musicId) { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" |
|
|
|
|
|
? `请选择音乐文件` |
|
|
|
|
|
: `Please select an music file` |
|
|
|
|
|
); |
|
|
|
|
|
createLoading.value = false; |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
|
const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
|
|
|
|
|
|
|
// 这个if判断是不是仅仅保存视频 |
|
|
// 这个if判断是不是仅仅保存视频 |
|
@@ -1186,18 +1306,48 @@ async function findById(findId) { |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
|
//#region 音乐tab |
|
|
//#region 音乐tab |
|
|
const musicList = ref(null); //展示音乐列表 |
|
|
|
|
|
|
|
|
const musicListSystem = ref(null); //展示音乐列表 |
|
|
|
|
|
const musicListPerson = ref(null); //展示音乐列表 |
|
|
const audioMusicUrl = ref(null); //选中音乐Url回显 |
|
|
const audioMusicUrl = ref(null); //选中音乐Url回显 |
|
|
const musicItemAction = ref(null); //选中高亮 |
|
|
const musicItemAction = ref(null); //选中高亮 |
|
|
// 获取音乐列表 |
|
|
|
|
|
async function getMusicList() { |
|
|
|
|
|
|
|
|
const musicListPageNumSystem = ref(1); //系统音乐页数 |
|
|
|
|
|
const musicListTotalSystem = ref(10); //系统音乐总条数 |
|
|
|
|
|
const musicListPageNumPerson = ref(1); //个人音乐页数 |
|
|
|
|
|
const musicListTotalPerson = ref(10); //个人音乐总条数 |
|
|
|
|
|
const musicListPageSize = ref(8); // |
|
|
|
|
|
const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 |
|
|
|
|
|
const musicData = ref(null); //上传歌曲的数据 |
|
|
|
|
|
const fileMusicInput = ref(null); // 上传组件的dom |
|
|
|
|
|
// 获取系统音乐列表 |
|
|
|
|
|
async function getmusicListSystem(pageNum, pageSize) { |
|
|
try { |
|
|
try { |
|
|
const res = await musicListApi(); |
|
|
|
|
|
musicList.value = res.data; |
|
|
|
|
|
|
|
|
const res = await musicListSystemApi(pageNum, pageSize); |
|
|
|
|
|
musicListSystem.value = res.data.list; |
|
|
|
|
|
musicListTotalSystem.value = Number(res.data.total); |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.log(error); |
|
|
console.log(error); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 获取个人音乐列表 |
|
|
|
|
|
async function getmusicListPerson(pageNum, pageSize) { |
|
|
|
|
|
try { |
|
|
|
|
|
const res = await musicListPersonApi(pageNum, pageSize); |
|
|
|
|
|
musicListPerson.value = res.data.list; |
|
|
|
|
|
musicListTotalPerson.value = Number(res.data.total); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.log(error); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
// 系统页数发生改变 |
|
|
|
|
|
const musicListPageNumSystemChange = (val) => { |
|
|
|
|
|
musicListPageNumSystem.value = val; |
|
|
|
|
|
getmusicListSystem(musicListPageNumSystem.value, musicListPageSize.value); |
|
|
|
|
|
}; |
|
|
|
|
|
// 个人页数发生改变 |
|
|
|
|
|
const musicListPageNumPersonChange = (val) => { |
|
|
|
|
|
musicListPageNumPerson.value = val; |
|
|
|
|
|
getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); |
|
|
|
|
|
}; |
|
|
// 点击选择音乐 |
|
|
// 点击选择音乐 |
|
|
function chooseMusicUrl(url, id) { |
|
|
function chooseMusicUrl(url, id) { |
|
|
audioMusicUrl.value = url; |
|
|
audioMusicUrl.value = url; |
|
@@ -1205,18 +1355,51 @@ function chooseMusicUrl(url, id) { |
|
|
} |
|
|
} |
|
|
// 转化秒为分秒 |
|
|
// 转化秒为分秒 |
|
|
function handleTime(time) { |
|
|
function handleTime(time) { |
|
|
let m = Math.floor(time / 60); |
|
|
|
|
|
let s = time % 60; |
|
|
|
|
|
|
|
|
let m = Math.floor(time / 60).toFixed(0); |
|
|
|
|
|
let s = (time % 60).toFixed(0); |
|
|
if (s < 10) { |
|
|
if (s < 10) { |
|
|
s = "0" + s; |
|
|
s = "0" + s; |
|
|
} |
|
|
} |
|
|
return m + ":" + s; |
|
|
return m + ":" + s; |
|
|
} |
|
|
} |
|
|
// 搜索功能 |
|
|
|
|
|
const searchInput = ref(null); |
|
|
|
|
|
async function searchMusicList() { |
|
|
|
|
|
// const res = await |
|
|
|
|
|
console.log("搜索"); |
|
|
|
|
|
|
|
|
// 选择文件上传音乐 |
|
|
|
|
|
async function uploadMusic() { |
|
|
|
|
|
const file = fileMusicInput.value.files[0]; |
|
|
|
|
|
if (file) { |
|
|
|
|
|
const videoUrl = URL.createObjectURL(file); |
|
|
|
|
|
musicData.value = file; |
|
|
|
|
|
let formData = new FormData(); |
|
|
|
|
|
formData.append("file", musicData.value, file.name + ".mp3"); |
|
|
|
|
|
try { |
|
|
|
|
|
const res = await videoUpload(formData); |
|
|
|
|
|
if (res) { |
|
|
|
|
|
// ElMessage.success("上传成功!"); |
|
|
|
|
|
} else { |
|
|
|
|
|
ElMessage.error( |
|
|
|
|
|
lanChange.value == "zh-cn" |
|
|
|
|
|
? `上传音频失败!` |
|
|
|
|
|
: `Failed to upload audio!` |
|
|
|
|
|
); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
// 查询进度 |
|
|
|
|
|
intervalId = setInterval(async () => { |
|
|
|
|
|
const res2 = await uploadProgressApi(res.data.videoId); |
|
|
|
|
|
if (res2.data == "complete") { |
|
|
|
|
|
clearInterval(intervalId); |
|
|
|
|
|
try { |
|
|
|
|
|
const res3 = await saveMusicApi({ voiceId: res.data.videoId }); |
|
|
|
|
|
afterSaveAudioId.value = res2.data.id; // 得到id |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
ElMessage.error(error); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, 1000); |
|
|
|
|
|
// ElMessage.success("上传成功!"); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
ElMessage.error(error); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
@@ -1242,14 +1425,26 @@ onMounted(async () => { |
|
|
getAiFaceList(1, 10, 1); |
|
|
getAiFaceList(1, 10, 1); |
|
|
if (AccessToken) { |
|
|
if (AccessToken) { |
|
|
getAiFaceUserList(1, 10, 3); |
|
|
getAiFaceUserList(1, 10, 3); |
|
|
|
|
|
await getmusicListPerson( |
|
|
|
|
|
musicListPageNumPerson.value, |
|
|
|
|
|
musicListPageSize.value |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
await voiceTotal(); |
|
|
await voiceTotal(); |
|
|
if (route.query.id) { |
|
|
if (route.query.id) { |
|
|
await findById(route.query.id); |
|
|
await findById(route.query.id); |
|
|
} |
|
|
} |
|
|
await getMusicList(); |
|
|
|
|
|
|
|
|
await getmusicListSystem( |
|
|
|
|
|
musicListPageNumSystem.value, |
|
|
|
|
|
musicListPageSize.value |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
musicList.value.forEach((item) => { |
|
|
|
|
|
|
|
|
musicListSystem.value.forEach((item) => { |
|
|
|
|
|
if (item.id == musicItemAction.value) { |
|
|
|
|
|
audioMusicUrl.value = item.url; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
musicListPerson.value.forEach((item) => { |
|
|
if (item.id == musicItemAction.value) { |
|
|
if (item.id == musicItemAction.value) { |
|
|
audioMusicUrl.value = item.url; |
|
|
audioMusicUrl.value = item.url; |
|
|
} |
|
|
} |
|
@@ -1607,6 +1802,10 @@ onMounted(async () => { |
|
|
background-clip: text !important; |
|
|
background-clip: text !important; |
|
|
-webkit-background-size: 200% 100% !important; |
|
|
-webkit-background-size: 200% 100% !important; |
|
|
background-size: 200% 100% !important; |
|
|
background-size: 200% 100% !important; |
|
|
|
|
|
.el-icon { |
|
|
|
|
|
vertical-align: text-top; |
|
|
|
|
|
font-size: 32px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.aiPicTab { |
|
|
.aiPicTab { |
|
@@ -1758,7 +1957,6 @@ onMounted(async () => { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
border: #000 1px solid; |
|
|
border: #000 1px solid; |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
box-shadow: #00000026 2px 2px 2px 2px; |
|
|
box-shadow: #00000026 2px 2px 2px 2px; |
|
@@ -1841,6 +2039,49 @@ onMounted(async () => { |
|
|
.el-icon { |
|
|
.el-icon { |
|
|
vertical-align: text-top; |
|
|
vertical-align: text-top; |
|
|
} |
|
|
} |
|
|
|
|
|
.musicTab { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
line-height: 50px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
.musicTabItem { |
|
|
|
|
|
background-color: #f5f7fa; |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
.musicTabItemActive { |
|
|
|
|
|
background-color: #000; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.uploadVideo { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
border: #000 1px solid; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
box-shadow: #00000026 2px 2px 2px 2px; |
|
|
|
|
|
&:hover { |
|
|
|
|
|
transform: translateY(-10px); |
|
|
|
|
|
} |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
height: 100px; |
|
|
|
|
|
font-size: 50px; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
line-height: 100px; |
|
|
|
|
|
input { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.musicList { |
|
|
.musicList { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
@@ -1861,7 +2102,8 @@ onMounted(async () => { |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
.musicNmae { |
|
|
.musicNmae { |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
width: 320px; |
|
|
|
|
|
|
|
|
width: 280px; |
|
|
|
|
|
margin-right: 20px; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
@@ -1879,6 +2121,21 @@ onMounted(async () => { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.pagination { |
|
|
|
|
|
// position: fixed; |
|
|
|
|
|
// bottom: 20px; |
|
|
|
|
|
// left: 50%; |
|
|
|
|
|
// transform: translateX(-50%); |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
background-color: #ffffff; |
|
|
|
|
|
padding: 10px 20px; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
&:hover { |
|
|
|
|
|
background-color: #b8b8b873; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.AudioBox { |
|
|
.AudioBox { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
justify-content: space-around; |
|
|