|
|
@@ -7,38 +7,44 @@
|
|
|
<el-main ref="el-main" style="background-color: #fafafa;">
|
|
|
<div v-if="!menuIndex" style="padding: 30px 40px 0;">
|
|
|
<div class="cmenu-item">
|
|
|
- <el-row :gutter="40">
|
|
|
- <el-col :span="4">
|
|
|
+ <el-row type="flex" :gutter="40" justify="center">
|
|
|
+ <el-col :span="8">
|
|
|
<div class="citem-nav" @click="menuIndex = '1'">
|
|
|
<img src="../assets/image/a-geshi.png" class="citem-img" />
|
|
|
<p class="citem-name">图片转GIF</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
+ <el-col :span="8">
|
|
|
<div class="citem-nav" @click="menuIndex = '2'">
|
|
|
<img src="../assets/image/a-hebing.png" class="citem-img" />
|
|
|
<p class="citem-name">视频转GIF</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cmenu-item">
|
|
|
+ <el-row type="flex" :gutter="40" justify="center">
|
|
|
+ <el-col :span="6">
|
|
|
<div class="citem-nav" @click="menuIndex = '3'">
|
|
|
<img src="../assets/image/a-yasuo.png" class="citem-img" />
|
|
|
<p class="citem-name">GIF压缩</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
+ <el-col :span="6">
|
|
|
<div class="citem-nav" @click="menuIndex = '4'">
|
|
|
<img src="../assets/image/a-feige.png" class="citem-img" />
|
|
|
<p class="citem-name">GIF拆分</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
+ <el-col :span="6">
|
|
|
<div class="citem-nav" @click="menuIndex = '5'">
|
|
|
<img src="../assets/image/a-biansu.png" class="citem-img" />
|
|
|
<p class="citem-name">GIF转视频</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -47,10 +53,8 @@
|
|
|
<el-button-group>
|
|
|
<el-button type="primary" size="mini" icon="el-icon-document"
|
|
|
@click="pickFile()">添加文件</el-button>
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-folder"
|
|
|
- @click="pickDir()">添加文件夹</el-button>
|
|
|
<el-button type="primary" size="mini" icon="el-icon-delete"
|
|
|
- @click="clearList()">清空音频</el-button>
|
|
|
+ @click="clearList()">清空列表</el-button>
|
|
|
</el-button-group>
|
|
|
<el-row type="flex" class="row-bg">
|
|
|
<el-col :span="1" style="text-align: right;">
|
|
|
@@ -59,14 +63,11 @@
|
|
|
</el-col>
|
|
|
<el-col :span="23" style="padding: 0 15px;">
|
|
|
<el-tabs v-model="menuIndex">
|
|
|
- <el-tab-pane label="格式转换" name="1"></el-tab-pane>
|
|
|
- <el-tab-pane label="音频合并" name="2"></el-tab-pane>
|
|
|
- <el-tab-pane label="音频压缩" name="3"></el-tab-pane>
|
|
|
- <el-tab-pane label="音频分割" name="4"></el-tab-pane>
|
|
|
- <el-tab-pane label="音频变速" name="5"></el-tab-pane>
|
|
|
- <el-tab-pane label="音量调整" name="6"></el-tab-pane>
|
|
|
- <el-tab-pane label="倒序播放" name="7"></el-tab-pane>
|
|
|
- <el-tab-pane label="音频提取" name="8"></el-tab-pane>
|
|
|
+ <el-tab-pane label="图片转GIF" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="视频转GIF" name="2"></el-tab-pane>
|
|
|
+ <el-tab-pane label="GIF压缩" name="3"></el-tab-pane>
|
|
|
+ <el-tab-pane label="GIF拆分" name="4"></el-tab-pane>
|
|
|
+ <el-tab-pane label="GIF转视频" name="5"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -76,31 +77,17 @@
|
|
|
<div v-if="(menuIndex != '8' && audioList.length == 0) || (menuIndex == 8 && videoList.length == 0)" class="upload-area">
|
|
|
<div class="file-area" @click="pickFile()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
<div class="file-area-pos">
|
|
|
- <!-- <img src="../assets/image/upload.png" style="width: 220px;"/> -->
|
|
|
- <img v-if="menuIndex == '1'" src="../assets/image/a-geshi.png" class="upload-img"/>
|
|
|
+ <img src="../assets/image/icon.png" style="width: 220px; margin-bottom: 20px;"/>
|
|
|
+ <!-- <img v-if="menuIndex == '1'" src="../assets/image/a-geshi.png" class="upload-img"/>
|
|
|
<img v-if="menuIndex == '2'" src="../assets/image/a-hebing.png" class="upload-img"/>
|
|
|
<img v-if="menuIndex == '3'" src="../assets/image/a-yasuo.png" class="upload-img"/>
|
|
|
<img v-if="menuIndex == '4'" src="../assets/image/a-feige.png" class="upload-img"/>
|
|
|
- <img v-if="menuIndex == '5'" src="../assets/image/a-biansu.png" class="upload-img"/>
|
|
|
- <img v-if="menuIndex == '6'" src="../assets/image/a-yinliang.png" class="upload-img"/>
|
|
|
- <img v-if="menuIndex == '7'" src="../assets/image/a-daoxu.png" class="upload-img"/>
|
|
|
- <img v-if="menuIndex == '8'" src="../assets/image/a-tiqu.png" class="upload-img"/>
|
|
|
+ <img v-if="menuIndex == '5'" src="../assets/image/a-biansu.png" class="upload-img"/> -->
|
|
|
<p style="font-size: 16px;">点击添加文件或拖拽文件到此</p>
|
|
|
- <template v-if="menuIndex != '8'">
|
|
|
- <div style="font-size: 12px; color: #999;padding-top:15px;">
|
|
|
- <p>音乐平台会员音频为加密格式不支持，支持以下格式:</p>
|
|
|
- <p>mp3/wav/ogg/flac/mp2/m4a/m4r/ac3/amr/wma/aiff/</p>
|
|
|
- <p>aifc/caf/aac/ape/mmf/wv/au/voc/3gpp/mka/mp4</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div style="font-size: 12px; color: #999;padding-top:15px;">
|
|
|
- <p>提取音频支持以下非加密视频格式:</p>
|
|
|
- <p>webm/f4v/ogv/3gp/avi/flv/mkv/mov/mp4/mgp/rmvb/</p>
|
|
|
- <p>wmv/wtv/mpeg/rm/asf/m4v/m2v/ts/mts/</p>
|
|
|
- <p>m2t/m2ts/dv/mxf/mpg/3gpp/aif/mod/m4s</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <div style="font-size: 12px; color: #999;padding-top:15px;">
|
|
|
+ <p>图片转gif仅支持jpg/jpge/png格式</p>
|
|
|
+ <p>视频转gif仅支持webm/mkv/mp4格式</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -261,25 +248,7 @@
|
|
|
<el-option :value="3" label="平均分割"></el-option>
|
|
|
</el-select>
|
|
|
|
|
|
- <template v-if="handleData.split_type == 1">
|
|
|
- <label class="handle-label">分割分数：</label>
|
|
|
- <el-select v-model="handleData.split_num" style="width:100px;" size="small">
|
|
|
- <el-option :value="2" label="2"></el-option>
|
|
|
- <el-option :value="3" label="3"></el-option>
|
|
|
- <el-option :value="4" label="4"></el-option>
|
|
|
- <el-option :value="5" label="5"></el-option>
|
|
|
- <el-option :value="6" label="6"></el-option>
|
|
|
- <el-option :value="7" label="7"></el-option>
|
|
|
- <el-option :value="8" label="8"></el-option>
|
|
|
- <el-option :value="9" label="9"></el-option>
|
|
|
- <el-option :value="10" label="10"></el-option>
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <label v-if="handleData.split_type == 2" class="handle-label">截取时间：</label>
|
|
|
- <label v-else class="handle-label">分割时长：</label>
|
|
|
- <el-time-picker arrow-control @change="selectTime" v-model="split_timeStr" placeholder="选择时间" style="width:120px;" size="small"></el-time-picker>
|
|
|
- </template>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<!-- 音频变速 -->
|
|
|
@@ -335,60 +304,8 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
- <!-- 文件信息弹窗 -->
|
|
|
- <el-dialog title="文件详情" :visible.sync="fileDetailModel" width="500px">
|
|
|
- <el-descriptions v-if="showIndex !== ''" class="margin-top" :column="1" size="medium" border>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 文件名
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].name}}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 比特率
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].bitrate}}bps
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 时长
|
|
|
- </template>
|
|
|
- {{formatSeconds(audioList[showIndex].duration)}}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 采样率
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].sample_rate}}HZ
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 歌手
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].tags ? audioList[showIndex].tags.artist : '-'}}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 标题
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].tags ? audioList[showIndex].tags.title : '-'}}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 唱片辑
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].tags ? audioList[showIndex].tags.album : '-'}}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template slot="label">
|
|
|
- 其他
|
|
|
- </template>
|
|
|
- {{audioList[showIndex].tags ? audioList[showIndex].tags.encoder : '-'}}
|
|
|
- </el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
- </el-dialog>
|
|
|
</el-main>
|
|
|
+
|
|
|
<el-footer height="48px">
|
|
|
<!-- 更新 -->
|
|
|
<soft-update ref="updateRef" :showDowload="dowloadModel"
|
|
|
@@ -422,7 +339,6 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- fileDetailModel: false,
|
|
|
//
|
|
|
loading: false,
|
|
|
tabLoading: false,
|
|
|
@@ -495,20 +411,6 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- selectTime(e){
|
|
|
- if(e){
|
|
|
- let hours = e.getHours() < 10 ? '0'+e.getHours() : e.getHours();
|
|
|
- let minutes = e.getMinutes() < 10 ? '0'+e.getMinutes() : e.getHours();
|
|
|
- let second = e.getSeconds() < 10 ? '0'+e.getSeconds() : e.getSeconds();
|
|
|
- this.handleData.split_time = hours + ':' + minutes + ':' + second;
|
|
|
- }else{
|
|
|
- this.split_timeStr = new Date(2024,12,12,0,0,0);
|
|
|
- this.handleData.split_time = "00:00:00";
|
|
|
- }
|
|
|
- },
|
|
|
- hideFormat(){
|
|
|
- return null;
|
|
|
- },
|
|
|
handleDrop(e){
|
|
|
//阻止默认行为
|
|
|
e.preventDefault();
|
|
|
@@ -1494,7 +1396,6 @@ export default {
|
|
|
// 查看文件信息
|
|
|
showFile(rowIndex){
|
|
|
this.showIndex = rowIndex;
|
|
|
- this.fileDetailModel = true;
|
|
|
},
|
|
|
// 删除文件
|
|
|
delFile(rowIndex){
|
