| @@ -92,24 +92,47 @@ function myUpload(params) {} | |||
| const cropper = ref(null); | |||
| const option = reactive({ | |||
| img: "", | |||
| canMove: true, | |||
| outputSize: 0.5, //图片质量 | |||
| info: false, // 裁剪框的大小信息 | |||
| // outputType: 'jpeg', // 裁剪生成图片的格式 | |||
| outputType: "png", // 裁剪生成图片的格式 | |||
| outputType: "png", | |||
| canScale: true, // 图片是否允许滚轮缩放 | |||
| autoCrop: true, // 是否默认生成截图框 | |||
| fixedBox: false, | |||
| original: false, | |||
| canMoveBox: true, | |||
| autoCrop: true, | |||
| // 只有自动截图开启 宽度高度才生效 | |||
| autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 | |||
| autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度 | |||
| high: true, // 是否按照设备的dpr 输出等比例图片 | |||
| fixedBox: false, // 固定截图框大小 不允许改变 | |||
| fixed: false, // 是否开启截图框宽高固定比例 | |||
| // fixedNumber: [1, 1], // 截图框的宽高比例 | |||
| full: true, // 是否输出原图比例的截图 | |||
| canMoveBox: true, // 截图框能否拖动 | |||
| original: false, // 上传图片按照原始比例渲染 | |||
| centerBox: true, // 截图框是否被限制在图片里面 | |||
| centerBox: true, | |||
| high: true, | |||
| cropData: {}, | |||
| enlarge: 1, | |||
| mode: 'contain', | |||
| maxImgSize: 3000, | |||
| // limitMinSize: [50, 50], | |||
| fixed: false, | |||
| // fixedNumber: [2, 1], | |||
| fillColor: '', | |||
| full: true, | |||
| infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||
| mode: "100% auto", // 图片默认渲染方式 | |||
| // outputSize: 0.5, //图片质量 | |||
| // info: false, // 裁剪框的大小信息 | |||
| // // outputType: 'jpeg', // 裁剪生成图片的格式 | |||
| // outputType: "png", // 裁剪生成图片的格式 | |||
| // canScale: true, // 图片是否允许滚轮缩放 | |||
| // autoCrop: true, // 是否默认生成截图框 | |||
| // autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 | |||
| // autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度 | |||
| // high: true, // 是否按照设备的dpr 输出等比例图片 | |||
| // fixedBox: false, // 固定截图框大小 不允许改变 | |||
| // fixed: false, // 是否开启截图框宽高固定比例 | |||
| // // fixedNumber: [1, 1], // 截图框的宽高比例 | |||
| // full: true, // 是否输出原图比例的截图 | |||
| // canMoveBox: true, // 截图框能否拖动 | |||
| // original: false, // 上传图片按照原始比例渲染 | |||
| // centerBox: true, // 截图框是否被限制在图片里面 | |||
| // infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||
| // mode: "100% auto", // 图片默认渲染方式 | |||
| }); | |||
| //#region 裁剪图片 | |||
| const cropperOverData = ref(null); | |||
| @@ -2,7 +2,6 @@ | |||
| export {} | |||
| declare global { | |||
| const EffectScope: typeof import('vue')['EffectScope'] | |||
| const ElForm: typeof import('element-plus/es')['ElForm'] | |||
| const ElMessage: typeof import('element-plus/es')['ElMessage'] | |||
| const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | |||
| const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | |||
| @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' | |||
| declare module 'vue' { | |||
| interface ComponentCustomProperties { | |||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | |||
| readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||
| readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | |||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
| @@ -24,7 +24,7 @@ | |||
| </p> | |||
| <el-select | |||
| v-model="Subtitles.SubtitlesFontFamily" | |||
| style="width: 100px" | |||
| style="width: 70px" | |||
| placeholder=" " | |||
| size="default" | |||
| > | |||
| @@ -59,7 +59,7 @@ | |||
| </p> | |||
| <el-select | |||
| v-model="Subtitles.SubtitlesSize" | |||
| style="width: 100px" | |||
| style="width: 70px" | |||
| placeholder=" " | |||
| size="default" | |||
| > | |||
| @@ -69,11 +69,11 @@ | |||
| :label="item" | |||
| :value="item" | |||
| :style="{ | |||
| height: item + 'px', | |||
| lineHeight: item + 'px', | |||
| // height: item + 'px', | |||
| // lineHeight: item + 'px', | |||
| }" | |||
| > | |||
| <span :style="{ fontSize: item + 'px', padding: '5px' }">{{ | |||
| <span :style="{ padding: '5px' }">{{ | |||
| item | |||
| }}</span> | |||
| </el-option> | |||
| @@ -122,7 +122,7 @@ | |||
| </p> | |||
| <el-select | |||
| v-model="Subtitles.SubtitlesFontFamily" | |||
| style="width: 100px" | |||
| style="width: 70px" | |||
| placeholder=" " | |||
| size="default" | |||
| > | |||
| @@ -157,7 +157,7 @@ | |||
| </p> | |||
| <el-select | |||
| v-model="Subtitles.SubtitlesSize" | |||
| style="width: 100px" | |||
| style="width: 70px" | |||
| placeholder=" " | |||
| size="default" | |||
| > | |||
| @@ -167,11 +167,12 @@ | |||
| :label="item" | |||
| :value="item" | |||
| :style="{ | |||
| height: item + 'px', | |||
| lineHeight: item + 'px', | |||
| // height: item + 'px', | |||
| // lineHeight: item + 'px', | |||
| }" | |||
| > | |||
| <span :style="{ fontSize: item + 'px', padding: '5px' }">{{ | |||
| <!-- fontSize: item + 'px', --> | |||
| <span :style="{ padding: '5px' }">{{ | |||
| item | |||
| }}</span> | |||
| </el-option> | |||
| @@ -1235,7 +1236,12 @@ async function reGetpersonSCIList() { | |||
| const scImgActive = ref(null); | |||
| function selectScImg(img) { | |||
| scImgActive.value = img.id; | |||
| materialList.scList.push({ ...img, x: 0, y: 0, z: 0, w: 1, h: 1 }); | |||
| let maxValue = 1 | |||
| // 素材层级从2递增 | |||
| if (materialList.scList.length > 0) { | |||
| maxValue = Math.max.apply(Math, materialList.scList.map(item => item.z)); | |||
| } | |||
| materialList.scList.push({ ...img, x: 0, y: 0, z: maxValue + 1, w: 1, h: 1 }); | |||
| } | |||
| // 删除上传的背景或素材 | |||
| function delImg(id) { | |||
| @@ -1905,7 +1911,7 @@ onMounted(async () => { | |||
| position: absolute; | |||
| top: 50px; | |||
| left: 225px; | |||
| width: 700px; | |||
| width: 660px; | |||
| // height: 50px; | |||
| background-color: #e9ecf1; | |||
| border-radius: 20px; | |||
| @@ -1918,7 +1924,7 @@ onMounted(async () => { | |||
| .tab4Item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| width: 130px; | |||
| width: 120px; | |||
| background-color: rgba(71, 105, 218, 0.1); | |||
| text-align: center; | |||
| padding: 10px; | |||
| @@ -1928,6 +1934,7 @@ onMounted(async () => { | |||
| // margin-bottom: 10px; | |||
| p { | |||
| padding-bottom: 5px; | |||
| font-size: 16px; | |||
| } | |||
| } | |||
| .SubtitlesSwitch { | |||
| @@ -1987,7 +1994,7 @@ onMounted(async () => { | |||
| position: absolute; | |||
| top: 150px; | |||
| left: 150px; | |||
| width: 150px; | |||
| width: 130px; | |||
| // height: 50px; | |||
| background-color: #e9ecf1; | |||
| border-radius: 20px; | |||
| @@ -2000,7 +2007,7 @@ onMounted(async () => { | |||
| .tab4Item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| width: 130px; | |||
| width: 120px; | |||
| background-color: rgba(71, 105, 218, 0.1); | |||
| text-align: center; | |||
| padding: 10px; | |||
| @@ -2010,6 +2017,7 @@ onMounted(async () => { | |||
| margin-bottom: 10px; | |||
| p { | |||
| padding-bottom: 5px; | |||
| font-size:16px; | |||
| } | |||
| } | |||
| .SubtitlesSwitch { | |||