qiushang 1 tahun lalu
induk
melakukan
7aeeba87c8
2 mengubah file dengan 224 tambahan dan 226 penghapusan
  1. 12 18
      src/renderer/assets/css/home.scss
  2. 212 208
      src/renderer/components/home.vue

+ 12 - 18
src/renderer/assets/css/home.scss

@@ -160,40 +160,34 @@ div,p{
 
 /* 菜单列表 */
 .menu-list {
-  padding: 60px 0;
+  padding: 10px 0;
 }
 
 .menu-item {
-  padding: 8px 0;
+  padding: 20px 0;
   text-align: center;
-  font-size: 15px;
+  font-size: 14px;
   cursor: pointer;
 }
 
+.menu-item .menu-img{
+	width: 30px;
+}
+
 .menu-item .iconfont {
   font-size: 20px;
   vertical-align: middle
 }
 
 .menu-item:hover{
-	color: #ce0000;
-	background-color: #f0faff;
+	color: #F56C6C;
+	background-color: #EBEEF5;
 }
 .menu-item.active {
-  color: #ce0000;
-  background-color: #f0faff;
+  color: #F56C6C;
+  font-weight: 600;
+  background-color: #EBEEF5;
   position: relative;
-  &::after{
-	  position: absolute;
-	  content: '';
-	  right: 0;
-	  width: 2px;
-	  height: 100%;
-	  top: 0;
-	  bottom: 0;
-	  margin: auto;
-	  background: #ed4014 !important;
-  }
 }
 
 .content-top {

+ 212 - 208
src/renderer/components/home.vue

@@ -4,8 +4,8 @@
 			<el-header height="45px" style="background-color: #fafafa; padding: 0 10px;">
 				<soft-header ref="headerRef" @update-soft="updateSoft()" @export-file="exportFile"></soft-header>
 			</el-header>
-			<el-main ref="el-main" style="background-color: #fafafa;">
-				<div v-if="!menuIndex" style="padding: 30px 40px 0;">
+			<el-container ref="el-main" style="background-color: #fafafa;width: 100%;">
+				<div v-if="!menuIndex" style="width:100%; padding: 30px 40px 0;">
 					<div class="cmenu-item">
 						<el-row :gutter="40">
 							<el-col :span="8">
@@ -55,159 +55,155 @@
 				</div>
 
 				<template v-else>
-					<div class="content-top">
-						<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>
-						</el-button-group>
-						<el-row type="flex" class="row-bg">
-							<el-col :span="1" style="text-align: right;">
-								<el-button style="margin-top: 8px;" type="danger" size="mini"
-									icon="el-icon-arrow-left" circle @click="menuIndex=''"></el-button>
-							</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="PDF压缩" name="4"></el-tab-pane>
-									<el-tab-pane label="WORD压缩" name="5"></el-tab-pane>
-									<el-tab-pane label="PPT压缩" name="6"></el-tab-pane>
-								</el-tabs>
-							</el-col>
-						</el-row>
-					</div>
-					
-					<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 v-if="menuIndex == '1'" src="../assets/image/a-img.png" class="upload-img"/>
-								<img v-if="menuIndex == '2'" src="../assets/image/a-audio.png" class="upload-img"/>
-								<img v-if="menuIndex == '3'" src="../assets/image/a-video.png" class="upload-img"/>
-								<img v-if="menuIndex == '4'" src="../assets/image/a-pdf.png" class="upload-img"/>
-								<img v-if="menuIndex == '5'" src="../assets/image/a-word.png" class="upload-img"/>
-								<img v-if="menuIndex == '6'" src="../assets/image/a-ppt.png" class="upload-img"/>
-								<p style="font-size: 16px; margin-top: 30px;">点击添加文件或拖拽文件到此</p>
-								<div style="font-size: 12px; color: #999;padding-top:15px;">
-									<p>加密或破损的文件格式不支持</p>
-								</div>
+					<el-aside width="100px" style="border-right: 1px solid #eee;">
+						<div style="text-align: center;">
+							<el-button style="margin-top: 16px;" type="danger" size="mini" icon="el-icon-s-home" circle @click="menuIndex=''"></el-button>
+						</div>
+						<div class="menu-list">
+							<div class="menu-item" :class="menuIndex == '1' ? 'active' : ''" @click="menuIndex = '1'">
+								<img src="../assets/image/a-img.png" class="menu-img"/>
+								<p>图片压缩</p>
+							</div>
+							<div class="menu-item" :class="menuIndex == '2' ? 'active' : ''" @click="menuIndex = '2'">
+								<img src="../assets/image/a-audio.png" class="menu-img"/>
+								<p>音频压缩</p>
+							</div>
+							<div class="menu-item" :class="menuIndex == '3' ? 'active' : ''" @click="menuIndex = '3'">
+								<img src="../assets/image/a-video.png" class="menu-img"/>
+								<p>视频压缩</p>
+							</div>
+							<div class="menu-item" :class="menuIndex == '4' ? 'active' : ''" @click="menuIndex = '4'">
+								<img src="../assets/image/a-pdf.png" class="menu-img"/>
+								<p>PDF压缩</p>
+							</div>
+							<div class="menu-item" :class="menuIndex == '5' ? 'active' : ''" @click="menuIndex = '5'">
+								<img src="../assets/image/a-word.png" class="menu-img"/>
+								<p>Word压缩</p>
+							</div>
+							<div class="menu-item" :class="menuIndex == '6' ? 'active' : ''" @click="menuIndex = '6'">
+								<img src="../assets/image/a-ppt.png" class="menu-img"/>
+								<p>PPT压缩</p>
 							</div>
 						</div>
-					</div>
-
-					<div class="soft-content" v-else>
-						<div class="content-left">
-							<div class="table-scroll" @dragover.prevent @drop="handleDrop">
-								<vxe-table
-									show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了!" :loading="tabLoading"
-									:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
-									:edit-config="{trigger: 'click', mode: 'cell'}" :data="audioList" :scroll-y="{enabled: true}">
-									<vxe-column field="name" :title="'文件名称'+'(' + audioList.length + ')'"></vxe-column>
-									<vxe-column field="size" title="大小" width="140">
-										<template #default="{ row }">
-											<span>{{$utils.handleSize(row.size)}}</span>
-										</template>
-									</vxe-column>
-									<vxe-column field="duration" title="时间" width="140">
-										<template #default="{ row }">
-											<span>{{formatSeconds(row.duration)}}</span>
-										</template>
-									</vxe-column>
-									<vxe-column field="progress" title="转换进度" width="200">
-										<template #default="{ row }">
-											<el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
-										</template>
-									</vxe-column>
-									<vxe-column title="操作" width="90">
-										<template #default="{ row, rowIndex }">
-											<i class="el-icon-view cur-pointer" style="font-size: 20px; margin-right: 5px;" @click="showFile(rowIndex)"></i>
-											<i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delFile(rowIndex)"></i>
-										</template>
-									</vxe-column>
-								</vxe-table>
-								
+					</el-aside>
+					
+					<el-main>
+						<div class="content-top">
+							<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>
+							</el-button-group>
+							<div>
+								<span>保存目录:</span>
+								<el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:200px;" prefix-icon="el-icon-folder"></el-input>
+								<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
+									<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
+								</el-popover>
+								<el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
 							</div>
 						</div>
-					</div>
-					<!-- 底部设置区域 -->
-					<div class="img-footer-area" v-if="(menuIndex != '8' && audioList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
-						<div class="footer-line-between">
-							<!-- 1格式转化 -->
-							<div class="handle-item" v-if="menuIndex == '1' || menuIndex == '2'">
-								<label class="handle-label">输出格式:</label>
-								<el-select v-model="handleData.format" style="width:100px;" size="small">
-									<el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
-								</el-select>
-								<label class="handle-label">声道:</label>
-								<el-select v-model="handleData.type" style="width:100px;" size="small">
-									<el-option :value="1" label="同源音频"></el-option>
-									<el-option :value="2" label="单声道"></el-option>
-									<el-option :value="3" label="双声道"></el-option>
-								</el-select>
-								<label class="handle-label">码率:</label>
-								<el-select v-model="handleData.quality" style="width:100px;" size="small">
-									<el-option value="1" label="同源音频"></el-option>
-									<el-option value="8k" label="8 kbps"></el-option>
-									<el-option value="16k" label="16 kbps"></el-option>
-									<el-option value="24k" label="24 kbps"></el-option>
-									<el-option value="32k" label="32 kbps"></el-option>
-									<el-option value="40k" label="40 kbps"></el-option>
-									<el-option value="48k" label="48 kbps"></el-option>
-									<el-option value="56k" label="56 kbps"></el-option>
-									<el-option value="64k" label="64 kbps"></el-option>
-									<el-option value="80k" label="80 kbps"></el-option>
-									<el-option value="96k" label="96 kbps"></el-option>
-									<el-option value="112k" label="112 kbps"></el-option>
-									<el-option value="128k" label="128 kbps"></el-option>
-									<el-option value="144k" label="144 kbps"></el-option>
-									<el-option value="160k" label="160 kbps"></el-option>
-									<el-option value="192k" label="192 kbps"></el-option>
-									<el-option value="224k" label="224 kbps"></el-option>
-									<el-option value="256k" label="256 kbps"></el-option>
-									<el-option value="320k" label="320 kbps"></el-option>
-									<el-option value="512k" label="512 kbps"></el-option>
-									<el-option value="1400k" label="1400 kbps"></el-option>
-								</el-select>
+						
+						<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 v-if="menuIndex == '1'" src="../assets/image/a-img.png" class="upload-img"/>
+									<img v-if="menuIndex == '2'" src="../assets/image/a-audio.png" class="upload-img"/>
+									<img v-if="menuIndex == '3'" src="../assets/image/a-video.png" class="upload-img"/>
+									<img v-if="menuIndex == '4'" src="../assets/image/a-pdf.png" class="upload-img"/>
+									<img v-if="menuIndex == '5'" src="../assets/image/a-word.png" class="upload-img"/>
+									<img v-if="menuIndex == '6'" src="../assets/image/a-ppt.png" class="upload-img"/>
+									<p style="font-size: 16px; margin-top: 30px;">点击添加文件或拖拽文件到此</p>
+									<div style="font-size: 12px; color: #999;padding-top:15px;">
+										<p>加密或破损的文件格式不支持</p>
+									</div>
+								</div>
 							</div>
-							
-							<!-- 3音频压缩 -->
-							<div class="handle-item" v-if="menuIndex == '3'">
-								<label class="handle-label">压缩级别:</label>
-								<el-select v-model="handleData.compressLevel" style="width:100px;" size="small">
-									<el-option :value="1" label="1"></el-option>
-									<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-select>
-								<span style="margin-left: 10px; font-size: 12px; color: #F56C6C;">等级越高压缩效果越好</span>
+						</div>
+						
+						<div class="soft-content" v-else>
+							<div class="content-left">
+								<div class="table-scroll" @dragover.prevent @drop="handleDrop">
+									<vxe-table
+										show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了!" :loading="tabLoading"
+										:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
+										:edit-config="{trigger: 'click', mode: 'cell'}" :data="audioList" :scroll-y="{enabled: true}">
+										<vxe-column field="name" :title="'文件名称'+'(' + audioList.length + ')'"></vxe-column>
+										<vxe-column field="size" title="大小" width="140">
+											<template #default="{ row }">
+												<span>{{$utils.handleSize(row.size)}}</span>
+											</template>
+										</vxe-column>
+										<vxe-column field="duration" title="时间" width="140">
+											<template #default="{ row }">
+												<span>{{formatSeconds(row.duration)}}</span>
+											</template>
+										</vxe-column>
+										<vxe-column field="progress" title="转换进度" width="200">
+											<template #default="{ row }">
+												<el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
+											</template>
+										</vxe-column>
+										<vxe-column title="操作" width="90">
+											<template #default="{ row, rowIndex }">
+												<i class="el-icon-view cur-pointer" style="font-size: 20px; margin-right: 5px;" @click="showFile(rowIndex)"></i>
+												<i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delFile(rowIndex)"></i>
+											</template>
+										</vxe-column>
+									</vxe-table>
+									
+								</div>
 							</div>
-							
-							<!-- 音频分割 -->
-							<div class="handle-item" v-if="menuIndex == '4'">
-								<label class="handle-label">分割格式:</label>
-								<el-select v-model="handleData.format" style="width:100px;" size="small">
-									<el-option v-for="(item,key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
-								</el-select>
-							
-								<label class="handle-label">分割模式:</label>
-								<el-select v-model="handleData.split_type" style="width:100px;" size="small">
-									<el-option :value="1" label="按份分割"></el-option>
-									<!-- <el-option :value="2" label="截取分割"></el-option> -->
-									<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">
+						</div>
+						<!-- 底部设置区域 -->
+						<div class="img-footer-area" v-if="(menuIndex != '8' && audioList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
+							<div class="footer-line-between">
+								<!-- 1格式转化 -->
+								<div class="handle-item" v-if="menuIndex == '1' || menuIndex == '2'">
+									<label class="handle-label">输出格式:</label>
+									<el-select v-model="handleData.format" style="width:100px;" size="small">
+										<el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
+									</el-select>
+									<label class="handle-label">声道:</label>
+									<el-select v-model="handleData.type" style="width:100px;" size="small">
+										<el-option :value="1" label="同源音频"></el-option>
+										<el-option :value="2" label="单声道"></el-option>
+										<el-option :value="3" label="双声道"></el-option>
+									</el-select>
+									<label class="handle-label">码率:</label>
+									<el-select v-model="handleData.quality" style="width:100px;" size="small">
+										<el-option value="1" label="同源音频"></el-option>
+										<el-option value="8k" label="8 kbps"></el-option>
+										<el-option value="16k" label="16 kbps"></el-option>
+										<el-option value="24k" label="24 kbps"></el-option>
+										<el-option value="32k" label="32 kbps"></el-option>
+										<el-option value="40k" label="40 kbps"></el-option>
+										<el-option value="48k" label="48 kbps"></el-option>
+										<el-option value="56k" label="56 kbps"></el-option>
+										<el-option value="64k" label="64 kbps"></el-option>
+										<el-option value="80k" label="80 kbps"></el-option>
+										<el-option value="96k" label="96 kbps"></el-option>
+										<el-option value="112k" label="112 kbps"></el-option>
+										<el-option value="128k" label="128 kbps"></el-option>
+										<el-option value="144k" label="144 kbps"></el-option>
+										<el-option value="160k" label="160 kbps"></el-option>
+										<el-option value="192k" label="192 kbps"></el-option>
+										<el-option value="224k" label="224 kbps"></el-option>
+										<el-option value="256k" label="256 kbps"></el-option>
+										<el-option value="320k" label="320 kbps"></el-option>
+										<el-option value="512k" label="512 kbps"></el-option>
+										<el-option value="1400k" label="1400 kbps"></el-option>
+									</el-select>
+								</div>
+								
+								<!-- 3音频压缩 -->
+								<div class="handle-item" v-if="menuIndex == '3'">
+									<label class="handle-label">压缩级别:</label>
+									<el-select v-model="handleData.compressLevel" style="width:100px;" size="small">
+										<el-option :value="1" label="1"></el-option>
 										<el-option :value="2" label="2"></el-option>
 										<el-option :value="3" label="3"></el-option>
 										<el-option :value="4" label="4"></el-option>
@@ -216,52 +212,74 @@
 										<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>
-							</div>
-							
-							<!-- 音频变速 -->
-							<div class="handle-item" v-if="menuIndex == '5'">
-								<label class="handle-label">播放速度:</label>
-								<el-slider class="info-input" v-model="handleData.speed" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.speed}}倍
-							</div>
-							
-							<!-- 音量调整 -->
-							<div class="handle-item" v-if="menuIndex == '6'">
-								<label class="handle-label">音量大小:</label>
-								<el-slider class="info-input" v-model="handleData.volume" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.volume}}
-							</div>
-							
-							<!-- 音频反转 -->
-							<div class="handle-item" v-if="menuIndex == '7'">
-								<label class="handle-label">输出格式:</label>
-								<el-checkbox size="small"  v-model="handleData.isOriginal">同原音频</el-checkbox>
-								<el-select v-if="!handleData.isOriginal" v-model="handleData.format" style="width:100px;margin-left: 5px;" size="small">
-									<el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
-								</el-select>
-							</div>
-							
-							<!-- 提取音频 -->
-							<div class="handle-item" v-if="menuIndex == '8'">
-								<label class="handle-label">提取格式:</label>
-								<el-select v-model="videoFormat" style="width:100px;margin-left: 5px;" size="small">
-									<el-option v-for="(item, key) in outputVideo" :key="key" :value="item" :label="item"></el-option>
-								</el-select>
-							</div>
-							
-							<div v-else></div>
-							
-							<div>
-								<span>保存目录:</span>
-								<el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:180px;" prefix-icon="el-icon-folder"></el-input>
-								<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
-									<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
-								</el-popover>
-								<el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
+									<span style="margin-left: 10px; font-size: 12px; color: #F56C6C;">等级越高压缩效果越好</span>
+								</div>
+								
+								<!-- 音频分割 -->
+								<div class="handle-item" v-if="menuIndex == '4'">
+									<label class="handle-label">分割格式:</label>
+									<el-select v-model="handleData.format" style="width:100px;" size="small">
+										<el-option v-for="(item,key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
+									</el-select>
+								
+									<label class="handle-label">分割模式:</label>
+									<el-select v-model="handleData.split_type" style="width:100px;" size="small">
+										<el-option :value="1" label="按份分割"></el-option>
+										<!-- <el-option :value="2" label="截取分割"></el-option> -->
+										<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>
+								</div>
+								
+								<!-- 音频变速 -->
+								<div class="handle-item" v-if="menuIndex == '5'">
+									<label class="handle-label">播放速度:</label>
+									<el-slider class="info-input" v-model="handleData.speed" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.speed}}倍
+								</div>
+								
+								<!-- 音量调整 -->
+								<div class="handle-item" v-if="menuIndex == '6'">
+									<label class="handle-label">音量大小:</label>
+									<el-slider class="info-input" v-model="handleData.volume" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.volume}}
+								</div>
+								
+								<!-- 音频反转 -->
+								<div class="handle-item" v-if="menuIndex == '7'">
+									<label class="handle-label">输出格式:</label>
+									<el-checkbox size="small"  v-model="handleData.isOriginal">同原音频</el-checkbox>
+									<el-select v-if="!handleData.isOriginal" v-model="handleData.format" style="width:100px;margin-left: 5px;" size="small">
+										<el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
+									</el-select>
+								</div>
+								
+								<!-- 提取音频 -->
+								<div class="handle-item" v-if="menuIndex == '8'">
+									<label class="handle-label">提取格式:</label>
+									<el-select v-model="videoFormat" style="width:100px;margin-left: 5px;" size="small">
+										<el-option v-for="(item, key) in outputVideo" :key="key" :value="item" :label="item"></el-option>
+									</el-select>
+								</div>
 							</div>
 						</div>
-					</div>
+
+					</el-main>
+					
+					
 				</template>
 				
 				<!-- 文件信息弹窗 -->
@@ -317,7 +335,7 @@
 					    </el-descriptions-item>
 					  </el-descriptions>
 				</el-dialog>
-			</el-main>
+			</el-container>
 			<el-footer height="48px">
 				<!-- 更新 -->
 				<soft-update ref="updateRef" :showDowload="dowloadModel"
@@ -362,7 +380,7 @@ export default {
 			audioList: [],
 			videoList: [],
 			imgInfo: '',
-			menuIndex: '', // 选中菜单
+			menuIndex: '1', // 选中菜单
 
 			inputAudio: ['mp3', 'wav', 'ogg', 'flac', 'mp2', 'm4a', 'm4r', 'ac3', 'amr', 'wma', 'aiff','aifc','caf','aac','ape','mmf','wv','au','voc','3gpp','mka','mp4'],
 			outputAudio: ['mp3', 'wav', 'ogg', 'flac', 'mp2', 'm4a', 'm4r', 'ac3', 'amr', 'wma', 'aiff','aifc','caf','aac','ape','mmf','wv','au','voc','3gpp','mka','mp4'],
@@ -1370,20 +1388,6 @@ export default {
 		left: -13px;
 	}
 
-	.menu-item {
-		padding: 8px 0;
-		font-size: 14px;
-
-		.iconfont {
-			font-size: 32px;
-		}
-
-		&:hover,
-		&.active {
-			color: #ed4014;
-		}
-	}
-
 	.ivu-progress-show-info .ivu-progress-outer {
 		padding-right: 40px !important;
 		margin-right: -40px !important;