add

src/renderer/assets/css/home.scss

@@ -252,7 +252,7 @@ div,p{
   justify-content: space-between;
   width: 100%;
   padding: 10px;
-  height: calc(100% - 201px);
+  height: calc(100% - 250px);
 }
 
 .img-footer-area{

src/renderer/components/home.vue

@@ -140,10 +140,10 @@
 						<div class="content-right">
 							<p class="title"><i class="iconfont icon-shezhi"></i>效果预览 <span style="color:red" v-if="menuIndex==2">仅作参考，请以实际为准！</span></p>
 							<div class="show-img" style="position:relative;overflow: hidden;">
-								<Spin v-if="imgLoading" fix>
+								<!-- <Spin v-if="imgLoading" fix>
 									<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
 									<div>渲染中</div>
-								</Spin>
+								</Spin> -->
 								<img @click="menuIndex == 3 ? playVideo() : imgShow=true" class="result-img" :src="imgSrc" />
 							</div>
 						</div>
@@ -151,188 +151,189 @@
 					<!-- 底部设置区域 -->
 					<div class="img-footer-area" v-if="(menuIndex == '1' && imgList.length > 0) || (menuIndex == '2' && fileList.length > 0) || (menuIndex == '3' && videoList.length > 0)">
 						<div class="footer-line-between">
-							<div>
-								<div class="handle-item">
-									<label class="handle-label">水印类型：</label>
-									<el-select size="small" v-model="handleData.watermarkType" style="width:90px;">
-										<el-option value="1" label="文字水印"></el-option>
-										<el-option value="2" label="图片水印"></el-option>
-									</el-select>
-									<el-select size="small" v-if="this.menuIndex != 3" v-model="handleData.watermarkStyle" style="width:90px;" @change="handleImg">
-										<el-option :value="1" label="单个"></el-option>
-										<el-option :value="2" label="平铺"></el-option>
-										<el-option :value="3" v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2'" label="多个"></el-option>
-									</el-select>
-								</div>
-								<!-- 文字水印 -->
-								<div v-if="handleData.watermarkType == '1'">
+							
+							<div class="handle-item">
+								<label class="handle-label">水印类型：</label>
+								<el-select size="small" v-model="handleData.watermarkType" style="width: 100px;">
+									<el-option value="1" label="文字水印"></el-option>
+									<el-option value="2" label="图片水印"></el-option>
+								</el-select>
+								<el-select size="small" v-if="this.menuIndex != 3" v-model="handleData.watermarkStyle" style="width:90px;" @change="handleImg">
+									<el-option :value="1" label="单个"></el-option>
+									<el-option :value="2" label="平铺"></el-option>
+									<el-option :value="3" v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2'" label="多个"></el-option>
+								</el-select>
+								
+								<template v-if="handleData.watermarkType == '1'">
 									<div class="handle-item">
 										<label class="handle-label">文字内容：</label>
-										<el-input type="text" v-model="handleData.watermarkValue" size="small" placeholder="请输入文字水印内容" style="width:150px;" @blur="handleImg"></el-input>
+										<el-input type="text" v-model="handleData.watermarkValue" size="small" placeholder="请输入文字水印内容" style="width:194px;" @blur="handleImg"></el-input>
 									</div>
 									<div class="handle-item">
-										<label class="handle-label">文字颜色：</label>
+										<label class="handle-label">大小颜色：</label>
+										<el-input-number size="small" v-model="handleData.watermarkFont" @change="handleImg" :min="1" :max="200" :step="1" style="width: 158px;"></el-input-number>
 										<el-color-picker style="vertical-align: middle;" size="small" v-model="handleData.watermarkColor" @change="handleImg"></el-color-picker>
 									</div>
-									 <div class="handle-item">
-										<label class="handle-label">文字大小：</label>
-										<el-input-number size="small" v-model="handleData.watermarkFont" @change="handleImg" :min="1" :max="200" :step="1" style="width: 120px;"></el-input-number>
-									</div>
 									<div class="handle-item">
 										<label class="handle-label">不透明度：</label>
-										<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :min="1" :max="100" :step="1" style="width: 120px;"></el-input-number>%
-									</div>
-									<div class="handle-item" v-if="menuIndex != '3'">
-										<label class="handle-label">旋转角度：</label>
-										<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 120px;"></el-input-number>
-									</div>
-									<div class="handle-item">
-										<label class="handle-label">文字字体：</label>
-										<el-select size="small" v-model="handleData.fonts" style="width:170px;" @change="handleImg">
-											<el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :label="item.name"></el-option>
-										</el-select>
-										<vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时，请选择中文字体！', type:'warning'})"></vxe-button>
+										<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :min="1" :max="100" :step="1" style="width: 120px;"></el-input-number> %
 									</div>
-									<template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
-										<div class="handle-item" style="overflow: hidden;" v-if="handleData.watermarkType != '0'">
-											<label class="handle-label">水印密度：</label>
-											<div class="line-density">
-												<label class="density-label">行数</label>
-												<el-input-number size="small" style="width: 60px;margin-right: 4px;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
-												<label class="density-label">列数</label>
-												<el-input-number size="small" style="width: 60px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
-											</div>
+								</template>
+							</div>
+							
+							<!-- 文字水印 -->
+							<div v-if="handleData.watermarkType == '1'">
+								<div class="handle-item" v-if="menuIndex != '3'">
+									<label class="handle-label">旋转角度：</label>
+									<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 120px;"></el-input-number>
+								</div>
+								<div class="handle-item">
+									<label class="handle-label">文字字体：</label>
+									<el-select size="small" v-model="handleData.fonts" style="width:170px;" @change="handleImg">
+										<el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :label="item.name"></el-option>
+									</el-select>
+									<vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时，请选择中文字体！', type:'warning'})"></vxe-button>
+								</div>
+								<template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
+									<div class="handle-item" style="overflow: hidden;">
+										<label class="handle-label">水印密度：</label>
+										<div class="line-density">
+											<label class="density-label">行数</label>
+											<el-input-number size="small" style="width: 120px;margin-right: 4px;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
+											<label class="density-label">列数</label>
+											<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
 										</div>
-									</template>
-									<template v-if="menuIndex == '3'">
-										<div class="handle-item" style="overflow: hidden;">
-											<label class="handle-label">动态滚动：</label>
-											<div class="line-density" style="vertical-align:middle">
-												<label class="density-label">方向</label>
-												<el-select size="small" v-model="handleData.direction" style="width:140px;" @change="handleImg">
-													<el-option value="0" label="无"></el-option>
-													<el-option value="left2right" label="从左往右"></el-option>
-													<el-option value="right2left" label="从右往左"></el-option>
-													<el-option value="top2bottom" label="从上往下"></el-option>
-													<el-option value="bottom2top" label="从下往上"></el-option>
-												</el-select>
-												<template v-if="handleData.direction != 0">
-													<div style="margin-top: 5px;">
-														<label class="density-label">速度</label>
-														<el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 60px;"></el-input-number>
-													</div>
-												</template>
-											</div>
+									</div>
+								</template>
+								<template v-if="menuIndex == '3'">
+									<div class="handle-item" style="overflow: hidden;">
+										<label class="handle-label">动态滚动：</label>
+										<div class="line-density" style="vertical-align:middle">
+											<label class="density-label">方向</label>
+											<el-select size="small" v-model="handleData.direction" style="width:140px;" @change="handleImg">
+												<el-option value="0" label="无"></el-option>
+												<el-option value="left2right" label="从左往右"></el-option>
+												<el-option value="right2left" label="从右往左"></el-option>
+												<el-option value="top2bottom" label="从上往下"></el-option>
+												<el-option value="bottom2top" label="从下往上"></el-option>
+											</el-select>
+											<template v-if="handleData.direction != 0">
+												<div style="margin-top: 5px;">
+													<label class="density-label">速度</label>
+													<el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 60px;"></el-input-number>
+												</div>
+											</template>
 										</div>
-									</template>
+									</div>
+								</template>
+							</div>
+							<!-- 图片水印 -->
+							<div v-if="handleData.watermarkType == '2'">
+								<div class="handle-item">
+									<label class="handle-label">上传图片：</label>
+									<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
+										<el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width: 165px;" ></el-input>
+										<i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
+									</el-upload>
 								</div>
-								<!-- 图片水印 -->
-								<div v-if="handleData.watermarkType == '2'">
-									<div class="handle-item">
+								<div class="handle-item">
+									<label class="handle-label">缩放比例：</label>
+									<el-input-number size="small" v-model="handleData.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
+								</div>
+								<div class="handle-item">
+									<label class="handle-label">不透明度：</label>
+									<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
+								</div>
+							</div>
+							
+							<div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != '3'">
+								<label class="handle-label">旋转角度：</label>
+								<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
+							</div>
+							<div class="handle-item">
+								<label class="handle-label">水印位置：</label>
+								<el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
+									<el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
+								</el-radio-group>
+								<div style="display: inline-block;float: right;">
+									<div style="padding: 6px 0;">
+										<label class="">水平边距</label>
+										<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
+									</div>
+									<div>
+										<label class="">垂直边距</label>
+										<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
+									</div>
+								</div>
+							</div>
+							<template v-if="handleData.watermarkType == '2' && handleData.watermarkStyle == 2 && menuIndex != '3'">
+								<div class="handle-item">
+									<label class="handle-label">水印密度：</label>
+									<div class="line-density">
+										<label class="density-label">行数</label>
+										<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
+										<label class="density-label">列数</label>
+										<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
+									</div>
+								</div>
+							</template>
+							
+							<!-- 多个水印 -->
+							<template v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2' && this.handleData.watermarkStyle == 3" >
+								<div v-for="(item, index) in watermarkImgList" :key="index">
+									<div class="handle-title">第{{index+2}}张水印信息 <Button size="small" type="error" @click="delWatermark(index)">删除</Button></div>
+									<div class="handle-item" @click="waterMoreIndex = index">
 										<label class="handle-label">上传图片：</label>
-										<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
-											<el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width:140px;" ></el-input>
+										<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPathMore">
+											<el-input type="text" readonly v-model="item.watermarkImgPath" size="small" style="width:140px;" ></el-input>
 											<i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
 										</el-upload>
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">缩放比例：</label>
-										<el-input-number size="small" v-model="handleData.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
+										<el-input-number size="small" style="width: 120px;" v-model="item.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">不透明度：</label>
-										<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
-									</div>
-								</div>
-								
-								<div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != 3">
-									<label class="handle-label">旋转角度：</label>
-									<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
-								</div>
-								<div class="handle-item" v-if="handleData.watermarkType != '0'">
-									<label class="handle-label">水印位置：</label>
-									<el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
-										<el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == 1" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
-									</el-radio-group>
-									<div style="display: inline-block;float: right;">
-										<div style="padding: 6px 0;">
-											<label class="">水平边距</label>
-											<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
-										</div>
-										<div>
-											<label class="">垂直边距</label>
-											<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
-										</div>
+										<el-input-number size="small" style="width: 120px;" v-model="item.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
 									</div>
-								</div>
-								<template v-if="handleData.watermarkType == '2' && handleData.watermarkStyle == 2 && menuIndex != '3'">
-									<div class="handle-item" v-if="handleData.watermarkType != '0'">
-										<label class="handle-label">水印密度：</label>
-										<div class="line-density">
-											<label class="density-label">行数</label>
-											<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
-											<label class="density-label">列数</label>
-											<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
-										</div>
+									
+									<div class="handle-item">
+										<label class="handle-label">旋转角度：</label>
+										<el-input-number size="small" v-model="item.rotate" @change="handleImg"></el-input-number>
 									</div>
-								</template>
-								
-								<!-- 多个水印 -->
-								<template v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2' && this.handleData.watermarkStyle == 3" >
-									<div v-for="(item, index) in watermarkImgList" :key="index">
-										<div class="handle-title">第{{index+2}}张水印信息 <Button size="small" type="error" @click="delWatermark(index)">删除</Button></div>
-										<div class="handle-item" @click="waterMoreIndex = index">
-											<label class="handle-label">上传图片：</label>
-											<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPathMore">
-												<el-input type="text" readonly v-model="item.watermarkImgPath" size="small" style="width:140px;" ></el-input>
-												<i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
-											</el-upload>
-										</div>
-										<div class="handle-item">
-											<label class="handle-label">缩放比例：</label>
-											<el-input-number size="small" style="width: 120px;" v-model="item.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
-										</div>
-										<div class="handle-item">
-											<label class="handle-label">不透明度：</label>
-											<el-input-number size="small" style="width: 120px;" v-model="item.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
-										</div>
-										
-										<div class="handle-item">
-											<label class="handle-label">旋转角度：</label>
-											<el-input-number size="small" v-model="item.rotate" @change="handleImg"></el-input-number>
-										</div>
-										<div class="handle-item">
-											<label class="handle-label">水印位置：</label>
-											<el-radio-group class="position-radio" v-model="item.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
-												<el-radio :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
-											</el-radio-group>
-											<div style="display: inline-block;float: right;">
-												<div style="padding: 6px 0;">
-													<label class="">水平边距</label>
-													<el-input-number size="small" style="width: 120px;" v-model="item.watermarkX" @change="handleImg"></el-input-number>
-												</div>
-												<div>
-													<label class="">垂直边距</label>
-													<el-input-number size="small" style="width: 120px;" v-model="item.watermarkY" @change="handleImg"></el-input-number>
-												</div>
+									<div class="handle-item">
+										<label class="handle-label">水印位置：</label>
+										<el-radio-group class="position-radio" v-model="item.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
+											<el-radio :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
+										</el-radio-group>
+										<div style="display: inline-block;float: right;">
+											<div style="padding: 6px 0;">
+												<label class="">水平边距</label>
+												<el-input-number size="small" style="width: 120px;" v-model="item.watermarkX" @change="handleImg"></el-input-number>
+											</div>
+											<div>
+												<label class="">垂直边距</label>
+												<el-input-number size="small" style="width: 120px;" v-model="item.watermarkY" @change="handleImg"></el-input-number>
 											</div>
 										</div>
 									</div>
-									
-									<div style="text-align: center; margin: 10px 0;">
-										<el-button @click="moreImgWater()">添加一张水印图片</el-button>
-									</div>
-								</template>
-							</div>
+								</div>
+								
+								<div style="text-align: center; margin: 10px 0;">
+									<el-button @click="moreImgWater()">添加一张水印图片</el-button>
+								</div>
+							</template>
+							
 
-							<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>
-							</div>
+							</div> -->
 						</div>
 					</div>
 				</template>