JG-ADMIN-TEMP/src/views/base/signature/components/opSignature.vue

<template>
  <el-dialog v-model="Visible" title="新增签章" width="1200" align-center>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Visible = false">取消</el-button>
        <el-button
          v-if="activeName != null && sealFrom.createType != 2"
          type="primary"
          @click="submit()"
          v-loading="opSignatureLoading"
        >
          确认{{ addStatus ? "创建" : "修改" }}
        </el-button>
      </div>
    </template>
    <el-form
      v-if="sealFrom.createType != 2"
      :model="form"
      ref="signatureFormRef"
    >
      <el-form-item
        label="印章名称:"
        prop="signatureName"
        :rules="[{ required: true, message: '请输入印章名称' }]"
        style="width: 400px"
      >
        <el-input v-model="form.signatureName" />
      </el-form-item>

      <el-form-item
        label="签章归属:"
        prop="signatureAttribution"
        :rules="[{ required: false, message: '请输入印章名称' }]"
        style="width: 400px"
      >
        <el-select v-model="form.signatureAttribution">
          <el-option
            v-for="item in dicts.signature_attribution"
            :key="item"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="activeName == '2' && myselfUpload == true"
        label="工序名称:"
        :rules="[{ required: true, message: '请输入' }]"
        style="width: 400px"
      >
        <el-input v-model="form.opName" />
      </el-form-item>
      <el-form-item
        v-if="activeName == '3' && myselfUpload == true"
        label="检验编号:"
        :rules="[{ required: true, message: '请输入' }]"
        style="width: 400px"
      >
        <el-input v-model="form.jyName" />
      </el-form-item>
      <el-form-item
        v-if="
          sealFrom.createType == 1 && activeName == '4' && myselfUpload == true
        "
        label="环绕字段:"
        prop="topText"
        :rules="[{ required: true, message: '请输入' }]"
        style="width: 400px"
      >
        <el-input v-model="form.topText" />
      </el-form-item>
      <el-form-item
        v-if="
          sealFrom.createType == 1 && activeName == '4' && myselfUpload == true
        "
        label="横排字段:"
        :rules="[{ required: false, message: '请输入' }]"
        style="width: 400px"
      >
        <el-input v-model="form.middleText" />
      </el-form-item>
      <el-form-item label="启用状态:">
        <el-switch
          v-model="form.signatureState"
          active-text="启用"
          active-value="1"
          inactive-text="禁用"
          inactive-value="0"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </el-form-item>
    </el-form>

    <div style="display: flex">
      <div v-if="editStatus == true" style="margin-right: 20px">
        <div>原签章内容</div>
        <img
          style="width: 150px; height: 150px"
          :src="imageUrl"
          v-if="oldUrl"
        />
        <span v-else>无内容(请上传后查看效果)</span>
      </div>
      <div
        v-if="
          myselfUpload != true && (addStatus ? true : editFirst ? false : true)
        "
      >
        <div>现签章内容</div>
        <img
          style="width: 150px; height: 150px"
          :src="newImageUrl"
          v-if="form.signatureFiles"
        />
        <span v-else>无内容(请上传后查看效果)</span>
      </div>
    </div>

    <!-- 签章区域 -->
    <div v-if="activeName != null">
      <el-tabs v-model="activeName" class="demo-tabs" type="card">
        <el-tab-pane
          :label="item.dictLabel"
          :name="item.dictValue"
          v-for="(item, index) in dicts.signature_type"
          :key="item"
        />
      </el-tabs>
      <el-switch
        v-model="myselfUpload"
        active-text="借用模版"
        inactive-text="自定义上传"
        @click="changeMyselfUpload"
      />
      <div v-if="myselfUpload">
        <!-- 人员签章 -->
        <div
          v-show="activeName == '1'"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div class="body">
            <div>
              <div>
                <div
                  class="signature-box"
                  :class="!startSignature ? 'signature-bg' : ''"
                >
                  <VueSignaturePad
                    ref="signaturePad"
                    :key="startSignature"
                    :images="[
                      { src: 'A.png', x: 0, y: 0 },
                      { src: 'B.png', x: 0, y: 10 },
                      { src: 'C.png', x: 0, y: 20 },
                    ]"
                    :options="options"
                  />
                </div>
              </div>
              <div class="operaBox">
                <el-button type="primary" @click="undoSignature"
                  >撤销</el-button
                >
                <el-button @click="clearSignature">重写</el-button>
                <el-button type="success" @click="showSignature"
                  >预览</el-button
                >
              </div>
            </div>
            <div>
              <div class="showBox">
                <img
                  ref="imgRef"
                  :src="'data:image/png;base64,' + handwritingEl"
                  v-if="handwritingEl"
                />
                <span v-else
                  >请先设置手写签名
                  <br />
                  建议签名铺满书写框
                </span>
              </div>
              <div class="operaBox" v-if="handwritingEl">
                <el-button type="primary" @click="updownPng">下载</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 工序签章 -->
        <div
          v-if="activeName == '2'"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div class="showGJBox">
            <div v-if="form.opName" ref="GJRef" class="GJBox">
              {{ form.opName }}
            </div>
            <span v-else>请先设置工序名称</span>
          </div>
          <div class="operaBox" v-if="form.name">
            <el-button type="primary" @click="updownGJPng">下载</el-button>
          </div>
        </div>
        <!-- 检验签章 -->
        <div
          v-if="activeName == '3'"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div class="showGJBox">
            <div v-if="form.jyName" ref="JYRef" class="JYBox">
              检<span style="margin-left: 20px">{{ form.jyName }}</span>
            </div>
            <span v-else>请先设置检验编号</span>
          </div>
          <div class="operaBox" v-if="form.name">
            <el-button type="primary" @click="updownJYPng">下载</el-button>
          </div>
        </div>
        <!-- 公章签章 -->
        <div
          v-if="activeName == '4'"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <el-radio-group
            v-model="sealFrom.createType"
            size="large"
            @change="createTypeChange"
            style="margin-bottom: 20px"
          >
            <el-radio-button :value="1">模板创建制作</el-radio-button>
            <el-radio-button :value="2">印模生成工具</el-radio-button>
          </el-radio-group>

          <div
            style="display: flex; flex-direction: column; align-items: center"
          >
            <div class="seal-make-layout">
              <div class="template-make" v-if="sealFrom.createType == 1">
                <el-button
                  type="success"
                  v-loading="uploading"
                  @click="showGZSignature"
                  >预览</el-button
                >
              </div>
              <div class="seal-upload" v-if="sealFrom.createType == 2">
                <div v-if="fileList.length == 0" class="upload-before">
                  <el-upload
                    v-model:file-list="fileList"
                    :show-file-list="false"
                    :limit="1"
                    @change="handleChange"
                    :auto-upload="false"
                  >
                    <div
                      class="local-upload pointer"
                      v-if="fileList.length < 1"
                    >
                      <div style="width: 100%">点击上传</div>
                    </div>
                  </el-upload>
                  <div class="prompt">
                    <p style="font-weight: 600">注意：</p>
                    <p>
                      此模块仅作为工具实现目标效果（旋转、虚化后可导出），如需创建请在模版创建制作。
                    </p>
                  </div>
                </div>
                <div class="upload-img" v-else>
                  <img
                    :src="uploadSeal"
                    ref="sealRef"
                    @load="imgeLoad"
                    style="height: 100%; display: none"
                  />
                </div>
                <div class="SealActions" v-if="fileList.length > 0">
                  <el-row style="margin-top: 10px">
                    <el-col :span="4" class="center">
                      <el-icon size="20"
                        ><RefreshLeft @click="sealActions(-1)"
                      /></el-icon>
                    </el-col>
                    <el-col :span="4" class="center">
                      <el-icon size="20"
                        ><RefreshRight @click="sealActions(1)"
                      /></el-icon>
                    </el-col>
                    <el-col :span="4" class="center">
                      <el-icon size="20"
                        ><Minus @click="sealActions(-2)"
                      /></el-icon>
                    </el-col>
                    <el-col :span="4" class="center">
                      <el-icon size="20"
                        ><Plus @click="sealActions(2)"
                      /></el-icon>
                    </el-col>
                    <el-col :span="24">
                      <el-upload
                        v-model:file-list="fileList"
                        :show-file-list="false"
                        @change="handleChange2"
                      >
                        <el-button type="link">重新上传</el-button>
                      </el-upload>
                    </el-col>
                  </el-row>
                  <el-row style="display: flex; align-items: center">
                    <el-col :span="8">
                      <h4 style="line-height: 32px">旋转角度：</h4>
                    </el-col>
                    <el-col :span="16">
                      <el-slider
                        @input="sealRotateChange"
                        v-model="sealOptions.sealRotate"
                        :min="-180"
                        :max="180"
                      />
                    </el-col>
                  </el-row>
                  <el-row style="display: flex; align-items: center">
                    <el-col :span="8">
                      <h4 style="line-height: 32px">背景透明度：</h4>
                    </el-col>
                    <el-col :span="16">
                      <el-slider
                        @input="buildCropperImage"
                        v-model="sealOptions.sealBackground"
                        :min="0"
                        :max="100"
                      />
                    </el-col>
                  </el-row>
                </div>
              </div>

              <div class="seal-preview">
                <div class="title">签章预览</div>
                <div class="seal-preview-img">
                  <img
                    ref="GZRef"
                    :src="'data:image/png;base64,' + sealFrom.sealPreview"
                    style="width: 100%; height: 100%"
                    alt="暂未生成签章"
                    v-if="sealFrom.sealPreview"
                  />
                  <span style="color: #aaa" v-else>暂未生成签章</span>
                </div>
                <div class="operaBox" v-if="sealFrom.sealPreview">
                  <el-button type="primary" @click="updownGZPng"
                    >下载</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <!-- //自定义上传 -->
        <FilesUpload
          v-model:src="fileUrl"
          v-model:pdf-list="pdfUrlList"
          v-model:file-name-list="fileNameList"
          :generate-pdf="true"
          @finished="setFileUrl"
        />
      </div>
    </div>
    <div v-else style="color: red">功能未开放，请联系管理员！</div>
  </el-dialog>
</template>
<script setup>
import { useDictionaryStore } from "@/store";
import { VueSignaturePad } from "vue-signature-pad";
import { useDebounceFn } from "@vueuse/core";
import html2canvas from "html2canvas";
import { uploadFileApi } from "@/api/file";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
import {
  addSignature,
  getGenerateSeal,
  getClipSeal,
  updateSignature,
} from "@/api/signature";

const { dicts } = useDictionaryStore();
const Visible = ref(true);
const addStatus = ref(false);
const props = defineProps({
  editStatus: Boolean,
  formData: Object,
  rowObj: Object,
});
const form = ref({
  signatureName: "",
  signatureFiles: "",
  signatureAttribution: "",
});
const changeMyselfUpload = () => {
  form.value.signatureFiles = null;
};
function base64ToBlob(base64, type = "image/png") {
  const base64Data = base64.split(",")[1];
  const byteCharacters = atob(base64Data);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: type });
}

const opSignatureLoading = ref(false);
const uploading = ref(false);
const submit = async () => {
  opSignatureLoading.value = true;
  try {
    await signatureFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        //入口逻辑判断是否为自定义上传
        if (myselfUpload.value == false) {
          //此处为自定义上传
          if (form.value.signatureFiles) {
            if (addStatus.value == true) {
              add(form.value.signatureFiles);
            } else {
              edit(form.value.signatureFiles);
            }
          } else {
            ElMessage.warning("请先上传印章！");
          }
        } else {
          let blob = null;
          //此处为借用模版创建先生成文件，进行自动进行上传操作，后在提交文件地址完成创建
          //根据类型选择图片数据进行处理上传
          switch (activeName.value) {
            case "1":
              const { isEmpty, data } = signaturePad.value.saveSignature();
              if (isEmpty) {
                message.warning("签名为空，请书写后再进行添加");
                return;
              }
              const resultImg = data.split(",");
              blob = base64ToBlob("data:image/png;base64," + resultImg[1]);
              break;
            case "2":
              const chartContainer1 = GJRef.value;
              const canvas1 = await html2canvas(chartContainer1);
              const img1 = canvas1.toDataURL("image/png");
              blob = base64ToBlob(img1);
              break;
            case "3":
              const chartContainer2 = JYRef.value;
              const canvas2 = await html2canvas(chartContainer2);
              const img2 = canvas2.toDataURL("image/png");
              blob = base64ToBlob(img2);
              break;
            case "4":
              const response = await getGenerateSeal({
                middleText: form.value.middleText,
                topText: form.value.topText,
              });
              blob = base64ToBlob(
                "data:image/png;base64," + response.data.result.entSeal
              );
              break;
          }

          const file = new File([blob], "签章文件.png", {
            type: "image/png",
          });

          //上传到文件服务器
          uploadFileApi(file, true)
            .then((res) => {
              if (addStatus.value == true) {
                add(res.data.fileUrl);
              } else {
                edit(res.data.fileUrl);
              }
            })
            .catch((err) => {
              ElMessage.error(err.message);
            });
        }
      } else {
        ElMessage.error("请检查表单选项");
      }
    });
  } catch (e) {
    ElMessage.error(e);
  } finally {
    opSignatureLoading.value = false;
  }
};
const add = async (url) => {
  form.value.signatureFiles = url;
  const { code } = await addSignature({
    ...form.value,
    signatureType: activeName.value,
  });
  if (code == "200") {
    ElMessage.success("添加成功");
    emit("close");
  }
};
const edit = async (url) => {
  form.value.signatureFiles = url;
  const { code } = await updateSignature({
    ...form.value,
    signatureType: activeName.value,
  });
  if (code == "200") {
    ElMessage.success("添加成功");
    emit("close");
  }
};
const update = async () => {};
const oldUrl = ref("");
const imageUrl = computed(() => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + oldUrl.value;
  return url;
});
const newImageUrl = computed(() => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + form.value.signatureFiles;
  return url;
});
const activeName = ref(null);
const emit = defineEmits(["close"]);
const editFirst = ref(true);
const setActiveName = () => {
  if (dicts.signature_type) {
    activeName.value = dicts.signature_type[0].dictValue;
  } else {
    activeName.value = null;
  }
};
const myselfUploadUseHook = () => {
  //是否自己上传
  const myselfUpload = ref(false);
  const fileUrl = ref();
  const pdfUrlList = ref([]);
  const fileNameList = ref([]);
  const setFileUrl = () => {
    form.value.signatureFiles = fileUrl.value;
    if (addStatus.value == false) {
      editFirst.value = false;
    }
  };
  return { myselfUpload, fileUrl, pdfUrlList, fileNameList, setFileUrl };
};
const { myselfUpload, fileUrl, pdfUrlList, fileNameList, setFileUrl } =
  myselfUploadUseHook();

const handwritingUseHook = () => {
  const signaturePad = ref();
  const signatureFormRef = ref();
  const startSignature = ref(false);
  //图片二进制编码
  const handwritingEl = ref(null);
  const imgRef = ref(null);
  const options = ref({
    penColor: "#000",
    dotSize: (1 + 4) / 2,
    minWidth: 1,
    maxWidth: 4,
    throttle: 16,
    minDistance: 5,
    backgroundColor: "rgba(0,0,0,0)",
    velocityFilterWeight: 0.5,
    onBegin: () => {
      startSignature.value = true;
    },
    onEnd: () => {},
  });
  function undoSignature() {
    signaturePad.value.undoSignature();
  }
  function clearSignature() {
    signaturePad.value.clearSignature();
    startSignature.value = false;
  }
  //下载png
  const updownPng = async () => {
    const chartContainer = imgRef.value;
    const canvas = await html2canvas(chartContainer);
    const img = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = img;
    a.download = "手写签名.png";
    a.click();
  };
  //展示图片
  function showSignature() {
    //获取签名图片
    const { isEmpty, data } = signaturePad.value.saveSignature();
    if (isEmpty) {
      ElMessage.warning("签名为空，请书写后再进行添加");
      return;
    }
    const resultImg = data.split(",");
    //将签名图片返给main页面
    handwritingEl.value = resultImg[1];
  }
  return {
    signaturePad,
    signatureFormRef,
    startSignature,
    handwritingEl,
    imgRef,
    options,
    undoSignature,
    clearSignature,
    updownPng,
    showSignature,
  };
};
const {
  signaturePad,
  signatureFormRef,
  startSignature,
  handwritingEl,
  imgRef,
  options,
  undoSignature,
  clearSignature,
  updownPng,
  showSignature,
} = handwritingUseHook();

//工序签章
const GJUseHook = () => {
  const GJRef = ref(null);
  const updownGJPng = async () => {
    const chartContainer = GJRef.value;
    const canvas = await html2canvas(chartContainer);
    const img = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = img;
    a.download = "手写签名.png";
    a.click();
  };
  return { GJRef, updownGJPng };
};
const { GJRef, updownGJPng } = GJUseHook();
//检验签章
const JYUseHook = () => {
  const JYRef = ref(null);
  const updownJYPng = async () => {
    const chartContainer = JYRef.value;
    const canvas = await html2canvas(chartContainer);
    const img = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = img;
    a.download = "手写签名.png";
    a.click();
  };
  return { JYRef, updownJYPng };
};
const { JYRef, updownJYPng } = JYUseHook();
//公章签章
const GZUseHook = () => {
  const GZRef = ref(null);
  const fileList = ref([]);
  const sealCropper = ref();
  const uploadSeal = ref(null);
  const sealRef = ref(null);
  const firstUpload = ref(true);
  const sealOptions = ref({
    sealRotate: 0,
    sealBackground: 50,
    imageWidth: 400,
    imageHeight: 400,
  });
  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  }
  const sealFrom = ref({
    createType: 1,
    sealStyle: 1,
    entpName: "",
    middleText: "测试印章",
    sealPreview: false,
  });
  function createTypeChange(value) {
    sealFrom.value.sealPreview = false;
  }
  function handleChange(info) {
    getBase64(info.raw).then((res) => {
      uploadSeal.value = res;
    });
  }
  const showGZSignature = async () => {
    uploading.value = true;
    try {
      const response = await getGenerateSeal({
        middleText: form.value.middleText,
        topText: form.value.topText,
      });
      sealFrom.value.sealPreview = response.data.result.entSeal;
    } finally {
      uploading.value = false;
    }
  };
  const updownGZPng = async () => {
    const chartContainer = GZRef.value;
    const canvas = await html2canvas(chartContainer);
    const img = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = img;
    a.download = "签章.png";
    a.click();
  };
  //重新上传印模图片
  async function handleChange2(info) {
    firstUpload.value = false;
    await handleChange(info);
  }

  //印章图片旋转
  const sealActions = useDebounceFn((type) => {
    switch (type) {
      case -1:
        sealCropper.value.rotate(-90);
        break;
      case 1:
        sealCropper.value.rotate(90);
        break;
      case -2:
        sealCropper.value.zoom(-0.1);
        break;
      case 2:
        sealCropper.value.zoom(0.1);
        break;
    }
    setTimeout(function () {
      buildCropperImage();
    }, 100);
  }, 500);

  function sealRotateChange(to) {
    sealCropper.value.rotateTo(to);
    setTimeout(function () {
      buildCropperImage();
    }, 100);
  }
  //将上传的图片加载到 图片处理工具中
  function sealPreviewCropper() {
    sealCropper.value = new Cropper(sealRef.value, {
      viewMode: 1,
      dragMode: "move",
      preview: ".before",
      initialAspectRatio: 1,
      aspectRatio: 1,
      background: true,
      autoCrop: true,
      autoCropArea: 0.7,
      zoomOnWheel: true,
      zoomOnTouch: true,
      cropBoxResizable: false,
      cropBoxMovable: false,
      wheelZoomRatio: 0.05,
      cropend: sealCropend,
    });
  }

  //图片处理完成后调用后端服务进行处理
  function sealCropend(end) {
    buildCropperImage();
  }

  //印模图片加载完成事件
  function imgeLoad(img) {
    if (!firstUpload.value) {
      sealCropper.value.destroy();
    }
    sealPreviewCropper();
  }

  const buildCropperImage = useDebounceFn(async () => {
    if (!sealCropper.value) {
      return;
    } else {
    }

    // sealCropper.value.rotateTo(sealOptions.value.sealRotate);
    const seal = sealCropper.value
      .getCroppedCanvas({
        width: sealOptions.value.imageWidth,
        height: sealOptions.value.imageHeight,
        imageSmoothingQuality: "high",
      })
      .toDataURL("image/jpeg");

    const data = {
      image: seal.split(",")[1],
      colorRange: sealOptions.value.sealBackground + 120,
    };
    const response = await getClipSeal(data);
    sealFrom.value.sealPreview = response.data.result.entSeal;
  });
  return {
    GZRef,
    fileList,
    sealFrom,
    sealOptions,
    sealRef,
    uploadSeal,
    handleChange,
    createTypeChange,
    updownGZPng,
    showGZSignature,
    imgeLoad,
    handleChange2,
    sealActions,
    sealRotateChange,
    buildCropperImage,
  };
};
const {
  GZRef,
  fileList,
  sealFrom,
  sealOptions,
  sealRef,
  uploadSeal,
  handleChange,
  createTypeChange,
  updownGZPng,
  showGZSignature,
  imgeLoad,
  handleChange2,
  sealActions,
  sealRotateChange,
  buildCropperImage,
} = GZUseHook();
onMounted(() => {
  if (props.editStatus == true) {
    addStatus.value = false;
    form.value.signatureName = props.rowObj.signatureName;
    form.value.signatureState = props.rowObj.signatureState;
    form.value.signatureType = props.rowObj.signatureType;
    form.value.signatureAttribution = props.rowObj.signatureAttribution;
    form.value.signatureFiles = props.rowObj.signatureFiles;
    form.value.id = props.rowObj.id;
    oldUrl.value = props.rowObj.signatureFiles;
  } else {
    addStatus.value = true;
  }
  setActiveName();
});
watch(
  () => Visible.value,
  (val) => {
    if (val == false) {
      emit("close");
    }
  }
);
</script>
<style lang="scss" scoped>
.local-upload {
  width: 160px;
  height: 160px;
  padding: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.upload-img {
  width: 200px;
  height: 200px;
}
.upload-before {
  display: flex;
}
.upload-before .prompt {
  flex: 1;
  height: 100%;
  font-size: 12px;
  padding: 0 10px 0 20px;
}
.signature-box {
  width: 360px;
  height: 240px;
  border: 1px solid #dedede;
  margin: 0 auto;
}
.signature-bg {
  background: url("@/assets/images/signature-bg.png") no-repeat;
  background-size: 90% 90%;
  background-position: 50% 50%;
}
.operaBox {
  text-align: center;
  margin-top: 20px;
}
.showGJBox {
  border: 1px solid #dedede;
  width: 240px;
  height: 60px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
  .GJBox {
    font-size: 20px;
    color: red;
    display: inline;
    border: 2px solid red;
  }
  .JYBox {
    font-size: 20px;
    color: red;
    display: inline;
    border: 2px solid red;
  }
}
.body {
  display: flex;
  justify-content: space-evenly;
  .showBox {
    width: 360px;
    height: 240px;
    border: 1px solid #dedede;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.seal-make-layout {
  display: flex;

  .template-make {
  }
  .seal-preview {
    padding-left: 40px;
    .title {
      font-size: 14px;
      font-weight: 600;
      height: 30px;
    }
  }

  .seal-upload {
    padding: 20px 0;
    width: 442px;
  }
  .seal-preview-img {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ededed;
  }
}
</style>