hrp-ui-base 1.0.1 → 1.0.3

package/packages/approval-process/packages/components/sign/index.vue

@@ -0,0 +1,766 @@
+<template>
+  <div class="flexColumnStart bigbox signComponentCommonBoxWeight">
+    <div v-if="!toSignStatus" class="flexRowStart signbox">
+      <div v-if="isSign" class="haveSign">
+        <div class="signImgBox">
+          <el-image style="width: 133px; height: 100px" :src="nowBindUrlMsg" fit="contain" v-if="nowBind" />
+          <!-- 未签名提示 -->
+          <div v-else class="no-sign-tip">
+            <svg class="tip-icon" viewBox="0 0 1024 1024" width="32" height="32">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#d9d9d9"/>
+              <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm32 120h64c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-64c-4.4 0-8-3.6-8-8V464c0-4.4 3.6-8 8-8z" fill="#d9d9d9"/>
+            </svg>
+            <span class="tip-text">当前还未进行签字</span>
+          </div>
+        </div>
+        <el-button class="sign-btn" type="primary" @click="handleReSignClick">{{ nowBind ? "重签" : "去签字" }}</el-button>
+      </div>
+      <div v-else class="unHaveSign">
+        <div class="unHaveSignUp">
+          <div class="qrCodeImgBox">
+            <QrcodeVue :size="143" :value="codeContent" class="order-print-big-qrcode" ref="QrCodeRef" />
+            <!-- 已扫描状态覆盖层 -->
+            <div v-if="ifScanned" class="qrcode-status-overlay scanned">
+              <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
+                <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" fill="#333333"/>
+              </svg>
+              <span class="status-text">已扫描</span>
+            </div>
+            <!-- 已过期状态覆盖层 -->
+            <div v-if="ifExpired" class="qrcode-status-overlay expired" @click="handleReSignClick">
+              <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
+                <path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-70.272-29.568 371.36 371.36 0 0 1-344.96 232.064c-205.408 0-371.36-165.984-371.36-371.04 0-205.088 165.952-371.04 371.36-371.04 108.896 0 206.752 47.2 274.464 122.016L736 314.016h224a32 32 0 0 0 32-32z" fill="#b0b0b0"/>
+              </svg>
+              <span class="status-text">二维码已过期，点击刷新</span>
+            </div>
+          </div>
+          <div class="qrCodeBtnBox">
+            <el-button type="primary" size="default" @click="handleReturnClick">取消</el-button>
+          </div>
+        </div>
+        <div class="uploadContent">使用钉钉扫码签名或点击上传</div>
+        <div class="uploadContent">为保证签名识别效果最佳，请选择纯白色背景、减少阴影的图片</div>
+        <div class="upload-link">
+          <a href="javascript:;" @click="triggerFileInput">
+            已有签名？点击上传
+          </a>
+        </div>
+          <!-- 隐藏的 file input -->
+          <input 
+            type="file" 
+            ref="fileInput"
+            style="display: none;"
+            accept=".jpg,.jpeg,.png,.bmp,.raw,.heif,.tiff,.gif"
+            @change="handleFileChange"
+          >
+      </div>
+    </div>
+    <FullScreenSign v-if="fullScreenVisibly"></FullScreenSign>
+    <!-- 图片裁剪弹框 -->
+    <ImageCropper ref="imageCropperRef" @success="handleCropSuccess"></ImageCropper>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted } from 'vue'
+import { IsPc } from '../../utils/getEnv'
+
+import { HttpUtil } from "hrp-ui-base";
+import { getUploadFileMsg } from '../../utils/base'
+import { ElMessage } from 'element-plus'
+import ImageCropper from '../image-cropper/index.vue'
+const props = defineProps({
+  // 输出外边的值 同时也是 传入上次的值 ，数据类型是url的字符串
+  modelValue: {
+    type: String,
+    require: false,
+    default: ''
+  },
+  // 类型
+  type: {
+    type: String,
+    require: false,
+    default: ''
+  },
+  // 展示的签字图片的宽度
+  width: {
+    type: Number,
+    require: false
+  },
+  // 展示的签字图片的高度
+  height: {
+    type: Number,
+    require: false
+  },
+  // 谁的签字，备注alt
+  signOwner: {
+    type: String,
+    require: false,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    require: false,
+    default: false
+  },
+  uploadImgId: {
+    type: String,
+    require: false,
+    default: ''
+  }
+})
+const emits = defineEmits(['update:modelValue', 'uploadUploadImgId'])
+
+
+const nowBind = ref<string>('')
+const nowBindUrlMsg = ref<string>('')
+const toSignStatus = ref<boolean>(false)
+const changeSignStatus = (status: boolean) => {
+  toSignStatus.value = status
+  reset()
+}
+const currentImgId = ref<string>('')
+watch(() => { return props.uploadImgId }, () => {
+  currentImgId.value = props.uploadImgId
+
+}, { deep: true })
+var canvas: any = document.getElementById("myCanvas")
+console.dir(canvas)
+var firstDraw = true;
+var ifSign = false;
+const canvasHeight = ref<number>(375)
+const canvasWidth = ref<number>(500)
+function clean() {
+  ifSign = false
+}
+function reset() {
+  ifSign = false
+}
+const ResizeInitFun = () => {
+  if (window.innerWidth < 800) {
+    if (IsPc()) {
+      canvasWidth.value = (window.innerWidth - 60)
+      canvasHeight.value = ((window.innerWidth - 60) * 0.75)
+    } else {
+      canvasWidth.value = (window.innerWidth - 60)
+      canvasHeight.value = ((window.innerWidth - 60) * 0.75)
+    }
+
+  } else {
+  }
+  firstDraw = true
+}
+const cancelSign = () => {
+  clean()
+  changeSignStatus(false)
+}
+const fullScreenVisibly = ref<boolean>(false)
+
+onMounted(() => {
+  ResizeInitFun()
+  window.removeEventListener("resize", ResizeInitFun)
+  window.addEventListener("resize", ResizeInitFun)
+})
+watch(() => { props.modelValue }, () => {
+  nowBind.value = props.modelValue
+  nowBindUrlMsg.value = props.modelValue
+}, { deep: true, immediate: true })
+watch(nowBind, () => {
+  isSign.value = true
+})
+import FileUploadController from "hrp-ui-base/api/bms/file/FileUploadController"
+// import { useUserConfigStore } from "@/stores";
+import QrcodeVue from 'qrcode.vue';
+import FlowSignController from "hrp-ui-base/api/bms/flow/FlowSignController"
+// const userStore = useUserConfigStore();
+
+const pageId = ref<string>('01-01-04-001')
+const uploadOss = async (file: any) => {
+  const fileData = file;
+  FileUploadController.upload(fileData, pageId.value).then((data: any) => {
+    if (data.code === 200 && data.res) {
+      emits('update:modelValue', data.res.url)
+      currentImgId.value = data.res.fileId
+      emits('uploadUploadImgId', currentImgId.value)
+      cancelSign()
+      isSign.value = true
+      handleReturnClick()
+    } else {
+      ElMessage.error("数据发生错误，请重新上传!")
+    }
+  }).catch((err) => {
+    ElMessage.error("oss上传发生错误，请重试!")
+    console.error(err)
+  }).finally(() => {
+
+  })
+}
+const isSign = ref<boolean> (true)
+const handleReSignClick = async () => 
+{
+  generateQrCode()
+  await updateQrCodeStatus("unscanned")
+  startQueryStatus()
+  isSign.value = false
+}
+const handleReturnClick = async () => {
+  await updateQrCodeStatus("expired")
+  clearInterval(qrCodeTimeRecord.value)
+  clearInterval(queryQrCodeTimeRecord.value)
+  isSign.value = true
+}
+
+const fileInput = ref<HTMLInputElement>()
+const imageCropperRef = ref<any>()
+// 允许的图片格式
+const allowedTypes = ['image/jpeg','image/png','image/bmp','image/raw','image/heif','image/tiff','image/gif'];
+const allowedExtensions = ['.jpg','.jpeg','.png','.bmp','.raw','.heif','.tiff','.gif'];
+// 最大文件大小（2MB）
+const maxSize = 5 * 1024 * 1024
+// 触发文件选择
+const triggerFileInput = () => {
+  if (!fileInput.value)return
+  fileInput.value.click()
+}
+const handleFileChange = async (event: any) => {
+  const file = event.target.files[0]
+
+  if (!file) return
+  
+  // 验证文件类型
+  if (!allowedTypes.includes(file.type)) {
+    ElMessage.error(`仅支持 ${allowedExtensions.join(', ')} 格式`)
+    resetFileInput()
+    return
+  }
+    // 验证文件大小
+  if (file.size > maxSize) {
+    const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1)
+    ElMessage.error(`文件大小不能超过 ${maxSizeMB}MB`)
+    resetFileInput()
+    return
+  }
+  
+  try {
+    // 先处理图片（黑白化处理）
+    const processedBlob = await extractSignatureImageTransparent(file)
+    
+    // 打开裁剪弹框，传入处理后的 Blob
+    imageCropperRef.value?.open(processedBlob)
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('签名图片处理失败')
+  } finally {
+    resetFileInput()
+  }
+}
+// 重置 input
+const resetFileInput = () => {
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+// 裁剪成功回调
+const handleCropSuccess = async (croppedBlob: Blob) => {
+  try {
+    // 将裁剪后的 Blob 转为 File 对象
+    const croppedFile = new File(
+      [croppedBlob],
+      '签名文件.png',
+      { type: 'image/png' }
+    )
+    
+    // 上传裁剪后的图片
+    await uploadOss(croppedFile)
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('签名图片上传失败')
+  }
+}
+
+const codeContent = ref<string>('')
+const qrCodeUUID = ref<string>('')
+const generateUUID = () => {
+  const timestamp = performance.now().toString(36)
+  const random = Math.random().toString(36).slice(2)
+  const random2 = Math.random().toString(36).slice(2)
+  
+  return `${timestamp}-${random}-${random2}`.replace(/\./g, '')
+}
+const generateQrCode = () => {
+  ifScanned.value = false
+  ifExpired.value = false
+  qrCodeUUID.value = generateUUID()
+  const urlStr = `${window.location.origin}/mobile/login/index.html?host=${localStorage.getItem('TenantHost')}&url=${'/full-screen-sign-process'}?qrCodeUUID=${qrCodeUUID.value}`
+  // codeContent.value = 'http://172.16.14.36:5176/#/full-screen-sign-process?qrCodeUUID=' + qrCodeUUID.value
+  codeContent.value = urlStr
+}
+
+const qrCodeTimeRecord = ref<number>()
+const startPolling = () => {
+  qrCodeTimeRecord.value = setInterval(async () => {
+    try {
+      const data = await FlowSignController.startPolling(qrCodeUUID.value)
+      if (data.code === 200 && data.res) {
+        clearInterval(qrCodeTimeRecord.value)
+        emits('update:modelValue', data.res.url)
+        currentImgId.value = data.res.fileId
+        emits('uploadUploadImgId', currentImgId.value)
+      }
+    } catch (e) {
+      console.log(false)
+    }
+  }, 2000)
+}
+const queryQrCodeTimeRecord = ref<number>()
+const startQueryStatus = () => {
+  queryQrCodeTimeRecord.value = setInterval(() => {
+    FlowSignController.queryQrCodeStatus(qrCodeUUID.value).then(data => {
+      if (data.code === 200 && data.res === "scanned") {
+        clearInterval(queryQrCodeTimeRecord.value)
+        ifScanned.value = true
+        startPolling()
+      } else if (data.code === 200 && (data.res === null || data.res === "expired")) {
+        clearInterval(queryQrCodeTimeRecord.value)
+        ifExpired.value = true
+        ElMessage.error("二维码已过期，请刷新")
+      } else {
+        console.log("正在轮询二维码状态")
+      }
+    })
+  }, 2000)
+}
+const ifScanned = ref<boolean>(false)
+const ifExpired = ref<boolean>()
+const updateQrCodeStatus = (status: string) => {
+  if (status === 'scanned') {
+    ifScanned.value = true
+  } else if (status === 'expired') {
+    ifExpired.value = true
+  }
+  FlowSignController.updateQrCodeStatus(status, qrCodeUUID.value).then(data => {
+    if (data.code === 200 && data.res) {
+      console.log("二维码状态更新成功")
+    } else if (data.code === 200 && !data.res) {
+      ElMessage.error(data.msg || "二维码失效请刷新后重试")
+    }
+  })
+}
+const dialogClose = () => {
+  clearInterval(qrCodeTimeRecord.value)
+  clearInterval(queryQrCodeTimeRecord.value)
+  ifScanned.value = false
+  ifExpired.value = false
+  isSign.value = true
+}
+
+/**
+ * 将签名图片处理成：白色背景 + 黑色笔迹
+ */
+const extractSignatureImageTransparent = (file: File): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')!
+
+      canvas.width = img.width
+      canvas.height = img.height
+      ctx.drawImage(img, 0, 0)
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      const data = imageData.data
+
+      // 计算灰度
+      const grays: number[] = []
+      let min = 255, max = 0
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+        grays.push(gray)
+        min = Math.min(min, gray)
+        max = Math.max(max, gray)
+      }
+
+      const threshold = min + (max - min) * 0.35
+
+      // 设置 alpha 通道
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = grays[i / 4]
+        if (gray > threshold) {
+          data[i + 3] = 0  // 背景透明
+        } else {
+          data[i] = data[i + 1] = data[i + 2] = 0  // 签名黑色
+          data[i + 3] = 255 // 签名不透明
+        }
+      }
+
+      enhanceContrast(data)
+      for (let i = 0; i < 2; i++) {
+        dilateAlpha(data, canvas.width, canvas.height, 1)
+        fillGapsAlpha(data, canvas.width, canvas.height)
+      }
+      removeHorizontalLines(data, canvas.width, canvas.height)
+      ctx.putImageData(imageData, 0, 0)
+
+      canvas.toBlob(
+        blob => blob ? resolve(blob) : reject(),
+        'image/png',
+        1
+      )
+    }
+
+    img.onerror = reject
+    img.src = URL.createObjectURL(file)
+  })
+}
+
+const dilateAlpha = (data: Uint8ClampedArray, width: number, height: number, radius = 1) => {
+  const copy = new Uint8ClampedArray(data)
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = radius; y < height - radius; y++) {
+    for (let x = radius; x < width - radius; x++) {
+      const center = idx(x, y)
+      if (copy[center + 3] === 255) continue
+
+      // 检查周围 radius 范围内是否有签名像素
+      let hasOpaqueNeighbor = false
+      for (let dy = -radius; dy <= radius && !hasOpaqueNeighbor; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+          const i = idx(x + dx, y + dy)
+          if (copy[i + 3] === 255) {
+            hasOpaqueNeighbor = true
+            break
+          }
+        }
+      }
+
+      if (hasOpaqueNeighbor) {
+        // 将 alpha 设为签名不透明，同时保持原颜色
+        data[center + 3] = 255
+        for (let c = 0; c < 3; c++) {
+          data[center + c] = copy[center + c]  // 保持原色
+        }
+      }
+    }
+  }
+}
+
+
+const fillGapsAlpha = (data: Uint8ClampedArray, width: number, height: number) => {
+  const copy = new Uint8ClampedArray(data)
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const i = idx(x, y)
+      if (copy[i + 3] === 255) continue  // 空隙才处理
+
+      let opaqueCount = 0
+      let r = [0,0,0]
+      for (const [dx, dy] of [[1,0],[-1,0],[0,1],[0,-1]]) {
+        const neighbor = idx(x + dx, y + dy)
+        if (copy[neighbor + 3] === 255) {
+          opaqueCount++
+          for (let c = 0; c < 3; c++) r[c] += copy[neighbor + c]
+        }
+      }
+
+      if (opaqueCount >= 2) { // 如果周围至少两个像素是签名，则填充
+        data[i + 3] = 255
+        for (let c = 0; c < 3; c++) data[i + c] = Math.round(r[c] / opaqueCount)
+      }
+    }
+  }
+}
+
+const enhanceContrast = (data: Uint8ClampedArray) => {
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] === 255) {
+      // gamma增强 + 轻微加粗效果
+      for (let c = 0; c < 3; c++) {
+        const val = data[i + c] / 255
+        data[i + c] = Math.min(255, Math.pow(val, 0.4) * 255) // gamma 0.4，比原先更深
+      }
+    }
+  }
+}
+
+
+const removeHorizontalLines = (data: Uint8ClampedArray, width: number, height: number) => {
+  const threshold = width * 0.7  // 横线长度阈值
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = 0; y < height; y++) {
+    let count = 0
+    let startX = 0
+    for (let x = 0; x < width; x++) {
+      if (data[idx(x, y) + 3] === 255) {
+        if (count === 0) startX = x
+        count++
+      } else {
+        if (count > threshold) {
+          // 认定为横线噪声，清除
+          for (let i = startX; i < x; i++) {
+            data[idx(i, y) + 3] = 0
+          }
+        }
+        count = 0
+      }
+    }
+    // 检查行末尾横线
+    if (count > threshold) {
+      for (let i = startX; i < width; i++) {
+        data[idx(i, y) + 3] = 0
+      }
+    }
+  }
+}
+
+defineExpose({
+  dialogClose: () => dialogClose()
+})
+onUnmounted(() => {
+  dialogClose()
+})
+</script>
+<style scoped lang="scss">
+@use '../../styles/common.scss';
+
+.bigbox {
+  width: 100%;
+}
+
+.signbox {
+  margin-top: 8px;
+  width: 100%;
+}
+
+.haveSign {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0 auto;
+  min-height: 197px;
+  text-align: center;
+  position: relative;
+}
+
+.sign-btn {
+  position: absolute;
+  right: calc(50% - 145px);
+  top: 72.5px;
+  margin-left: 16px;
+}
+
+.unHaveSign {
+  width: 100%;
+  margin: 0 auto;
+  min-height: 197px;
+  text-align: center;
+  position: relative;
+
+  .uploadContent {
+    margin-bottom: 5px;
+    font-size: 11.5px;
+  }
+
+  .upload-link {
+    font-weight: 500;
+    font-size: 10px;
+    color: #409eff;
+    text-decoration: none;
+    line-height: 1.5;
+    letter-spacing: 0.5px;
+    word-spacing: 2px;
+    text-transform: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+}
+
+.signImgBox,.qrCodeImgBox {
+  box-sizing: border-box;
+  width: 145px;
+  height: 145px;
+  // border: 1px solid gray;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  position: relative;
+
+  // 当遮罩层显示时，对底层二维码应用强力视觉破坏
+  &:has(.qrcode-status-overlay) {
+    .order-print-big-qrcode {
+      filter: blur(8px) contrast(0.3) brightness(1.5) saturate(0);
+      opacity: 0.15;
+      transform: scale(1.2) rotate(5deg);
+    }
+  }
+}
+
+.signImgBox {
+  width: 133px;
+  height: 100px;
+  margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  // 未签名提示样式
+  .no-sign-tip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: #fafafa;
+    border-radius: 4px;
+    gap: 8px;
+    
+    .tip-icon {
+      flex-shrink: 0;
+    }
+    
+    .tip-text {
+      font-size: 12px;
+      color: #999;
+      text-align: center;
+      line-height: 1.4;
+      padding: 0 8px;
+    }
+  }
+}
+
+.unHaveSignUp {
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .qrCodeBtnBox {
+    position: absolute;
+    right: calc(50% - 145px);
+    top: 72.5px;
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .el-button + .el-button {
+      margin-left: 0 !important;
+    }
+
+    .el-button {
+      min-width: 60px;
+    }
+  }
+  
+  .uploadContent {
+    margin-top: 8px;
+  }
+}
+
+// 二维码状态覆盖层样式 - PC端简洁风格 + 强力防扫描
+.qrcode-status-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  animation: fadeIn 0.25s ease-out;
+  z-index: 10;
+
+  // 简洁的单层细密网格
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 1px,
+        currentColor 1px,
+        currentColor 2px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 1px,
+        currentColor 1px,
+        currentColor 2px
+      );
+    opacity: 0.25;
+    z-index: 1;
+  }
+
+  .status-icon {
+    flex-shrink: 0;
+    position: relative;
+    z-index: 3;
+  }
+
+  .status-text {
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    line-height: 1;
+    position: relative;
+    z-index: 3;
+  }
+
+  // 已扫描状态 - 简洁白色
+  &.scanned {
+    background: rgba(255, 255, 255, 0.96);
+    color: rgba(100, 100, 100, 0.3);
+
+    .status-text {
+      color: #333333;
+    }
+  }
+
+  // 已过期状态 - 简洁深色
+  &.expired {
+    background: rgba(40, 40, 40, 0.92);
+    color: rgba(180, 180, 180, 0.3);
+    cursor: pointer;
+
+    .status-text {
+      color: #e0e0e0;
+    }
+
+    .status-icon path {
+      fill: #b0b0b0;
+    }
+  }
+}
+
+// 淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
+<style lang="scss">
+.signComponentCommonBoxWeight {
+  .el-textarea__inner {
+    height: 37px;
+    min-height: 37px !important;
+  }
+
+}
+</style>