cloudfile-ui/src/layout/components/DefaultPage/DefaultPage.vue

<template>
  <div class="main">
    <div class="topBox">
      <div class="upload" v-if="isSearch">
        <el-upload
          class="upload-show"
          :file-list="fileArr"
          :limit="1"
          :on-change="upBefore"
          :show-file-list="false"
          drag
          :http-request="onSuccess"
          multiple
          element-loading-text="上传中..."
          element-loading-background="rgba(255, 255, 255, 0.8)"
          v-loading="loadingUpload"
        >
          <img src="@/assets/images/newIndex/yunBlack.png" alt="" />
          <span class="text1">上传文件</span>
          <p class="text2">
            将文件拖到此处或 <span class="blueT">选择文件</span>
          </p>
        </el-upload>
        <div class="right">
          <div class="line">|</div>
          <img
            src="@/assets/images/newIndex/scan.png"
            @click="scannerFile"
            class="scanImg"
            alt=""
          />
        </div>
      </div>
      <div class="search hoverColor" :class="{ showSearch: isSearch }">
        <input
          type="text"
          class="search_input"
          v-model="searchText"
          @keyup.enter="searchBtn"
          placeholder="输入关键词或文件名（≥2字）"
        />
        <div class="searchBtn" @click="searchBtn">
          <img src="@/assets/images/newIndex/search.png" alt="" />
          <span>全域瞬搜</span>
        </div>
      </div>
    </div>
    <div v-if="isSearch" class="searchBtm">
      <div class="highSearch">
        <div v-loading="highLoading" v-if="highLoading" class="lodingBox"></div>
        <div v-else class="mainBox">
          <div class="title">共查询到{{ props.hightDataTotal }}个相关结果</div>
          <div class="list">
            <div
              class="oneBox"
              v-for="item in hightData"
              :key="item.id"
              @click="toFile(item.content.docInfo)"
            >
              <span class="fileName">{{ item.content.docInfo.fileName }}</span>
              <div class="flieTime">
                <span>创建时间：</span>
                <span>{{ item.content.docInfo.createTime }}</span>
                <div class="position">
                  <span>文件位置：</span>
                  <span>{{ item.content.docInfo.dir.dirPath }}</span>
                </div>
              </div>
              <div
                class="flieContent"
                v-for="par in item.highlightFields.content"
                :key="par"
                v-html="par"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="allSearch">
        <div v-loading="allLoading" v-if="allLoading" class="lodingBox"></div>
        <div v-else>
          <div class="title"><span>文件名匹配结果</span></div>
          <div class="num">共查询到{{ props.allDataTotal }}个相关结果</div>
          <el-table
            :data="allData"
            style="width: 100%"
            ref="container"
            height="584"
            scrollbar-always-on
            @row-click="toFile"
          >
            <el-table-column type="index" width="70" />
            <el-table-column label="名称" width="200">
              <template #default="scope">
                <div class="flie_name">
                  <img
                    class="table_icon"
                    :src="setIcon(scope.row.fileType)"
                    alt=""
                    style=""
                  />
                  <span v-html="scope.row.fileName"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="dir.dirPath" label="所属空间" width="210" />
            <el-table-column prop="fileType" label="类型" width="100" />
            <el-table-column prop="createTime" label="时间" width="200" />
            <el-table-column prop="fileSize" label="大小" width="100">
              <template #default="scope">
                <div>{{ formatFileSize(scope.row.fileSize) }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-else class="btmBox">
      <div class="upFile" @paste="copyFile">
        <el-upload
          class="upload-demo"
          :file-list="fileArr"
          :limit="1"
          :on-change="upBefore"
          :show-file-list="false"
          drag
          :http-request="onSuccess"
          multiple
          element-loading-text="上传中..."
          element-loading-background="rgba(255, 255, 255, 0.8)"
          v-loading="loadingUpload"
        >
          <img
            src="@/assets/images/newIndex/upFolderLogo.png"
            class="upImg"
            alt=""
          />
          <span class="text1">上传你的文件</span>
        </el-upload>
        <p class="text2">将文件拖到此处或 <span>选择文件</span></p>
        <div class="line"></div>
        <img
          src="@/assets/images/newIndex/scan.png"
          @click="scannerFile"
          class="scanImg"
          alt=""
        />
        <div class="text3">扫描文件</div>
      </div>
      <div class="recent">
        <div class="top">
          <span>最近文件</span>
        </div>
        <div class="list">
          <div
            v-for="item in tableFileData"
            :key="item"
            @click="toFile(item)"
            class="oneBox"
          >
            <div class="imgBox">
              <img :src="setImg(item == null ? '' : item.fileType)" alt="" />
            </div>
            <div class="rightBox">
              <div class="text">{{ item.fileName }}</div>
              <div class="time">{{ item.createTime }}</div>
            </div>
            <img
              class="openArrow"
              src="@/assets/images/newIndex/CaretRight.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <ImgPreview
    :previewData="previewData"
    :copyFileType="copyFileType"
    :showPreview="showPreview"
    @closeImgPreview="closeImgPreview"
  ></ImgPreview>
  <!-- 扫描文档 -->
  <ScanFile
    v-if="openScan"
    :openScan="openScan"
    :scannerFiles="scannerFiles"
    @saveScanFile="saveScanFile"
    @closeOpen="closeOpen"
  ></ScanFile>
  <!-- 可用扫描仪信息 -->
  <div>
    <el-dialog v-model="checkScanner" title="扫描仪" width="30%">
      <div
        v-for="item in scannerList"
        :key="item.scannerId"
        @click="checkScanFn(item)"
        id="Onescan"
        :class="{ checkScan: item.scannerId == checkScanId }"
      >
        <img src="@/assets/images/scanImg.png" alt="" />
        {{ item.scannerName }}
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeCheckScanner">取消</el-button>
          <el-button type="primary" @click="sureScaner">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 扫描文件移动到 -->
  <MoveTo
    v-if="openScanMove"
    :spaceType="3"
    :scanFileArr="scanFileArr"
    :thisFolder="thisFolder"
    :openScanMove="openScanMove"
    :spaceId="spaceId"
    @closeOpenScanMove="closeOpenScanMove"
  ></MoveTo>
  <div
    v-loading.fullscreen="loadingPreview"
    v-if="loadingPreview"
    class="lodingBox"
  ></div>
</template>

<script setup>
import { onMounted, ref, toRaw, inject, watchEffect } from "vue";
import { getInfo, getInfoByDirId } from "@/api/biz/info";
import { listRecent, getRecent } from "@/api/biz/recent";
import { setIcon, canPreviewFile } from "@/utils/index.js";
import { preview } from "@/api/common/common.js";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
import { getConfigKey } from "@/api/system/config.js";
import ScanFile from "@/components/ScanFile/ScanFile.vue";
import MoveTo from "@/components/MoveTo/MoveTo.vue";
import myfile from "@/api/myfile/myfile";
import { listInfo, selectInfo, getFileByScanerId } from "@/api/scanner/info.js";
import documents from "@/api/document/document";
import uploadApi from "@/api/upload/upload";
import bus from "@/utils/bus.js";
const tableFileData = ref([]);
const copyFileType = ref();
const previewData = ref();
const loadingPreview = ref(false);
const showPreview = ref(false);
let fileArr = ref([]);
const useSpace = ref();
let fileBig = ref(0);
const allSpace = ref();
const maxFileSize = ref(); //能上传的最大size
const loadingUpload = ref(false);
const topDirId = ref(); //我的文件顶层的目录id
const topSpaceId = ref(); //我的文件顶层的目录id
const scannerList = ref(); // 扫描仪数据
const checkScanId = ref(); // 选中的scan的id
const checkScanner = ref(false); //显示扫描仪选择框
const scannerFiles = ref([]); //选择的扫描仪的文件
const openScanMove = ref(false);
const openScan = ref(false); //控制扫描文档显示
const scanFileArr = ref([]); //认领的扫描文件数组
const isSearch = ref(props.showSearch);
const searchText = ref(); // 搜索内容
const hightData = ref([]); // 高级搜索数据
const allData = ref([]); // 全域搜索数据
const canSearch = ref(true);
const allLoading = ref(false);
const highLoading= ref(false);

const emit = defineEmits(["openMaxmin", "changeSearch"]);
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: false,
  },
  hightData: {
    type: Array,
    default: () => [],
  },
  allData: {
    type: Array,
    default: () => [],
  },
  hightDataTotal: {
    type: Number,
    default: 0,
  },
  allDataTotal: {
    type: Number,
    default: 0,
  },
  highSearching: {
    type: Boolean,
    default: false,
  },
  allSearching: {
    type: Boolean,
    default: false,
  },
});
//搜索事件
const searchBtn = () => {
  // console.log("searchText", searchText.value);
  if (!canSearch.value) {
    return;
  } else {
    canSearch.value = false;
    setTimeout(() => {
      canSearch.value = true;
    }, 3000);
  }
  if (!searchText.value) {
    ElMessage({
      message: "请输入关键字",
      type: "error",
    });
    return;
  }
  emit("changeSearch", true, searchText.value);
};
// 获取数据
const getList = async () => {
  const resN = await listRecent({ isFolder: "N" });
  if (resN.code === 200) {
    tableFileData.value.length = resN.rows.length;
    for (let index = 0; index < resN.rows.length; index++) {
      getInfo(resN.rows[index].relaId).then(async (res) => {
        //  tableFileData.value.push(res.data);
        tableFileData.value.splice(index, 1, res.data);
        index++;
      });
    }
    // console.log('tableFileData',tableFileData.value);
    // 将tableFileData里的数据按照createTime排序
    // tableFileData.value = tableFileData.value.sort((a, b) => {
    //   return new Date(b.createTime) - new Date(a.createTime);
    // });
    // resN.rows.map(async (item) => {
    //   const detail = await getInfo(item.relaId);
    //   tableFileData.value.push(detail.data);
    // });
  }
};
// 打开最近文件
const toFile = async (row) => {
  copyFileType.value = row.fileType;
  // console.log("row", row);
  loadingPreview.value = true;
  const filePreview = canPreviewFile(row.fileType);
  if (filePreview) {
    loadingPreview.value = false;
    emit(
      "openMaxmin",
      row.fileName,
      `${window.location.origin}/fileEdit?clickRowId=${row.docId}&canEdit=0&canCopy=0&history=0&fileId=0`
    );
  } else {
    const res = await preview(row.docId);
    showPreview.value = true;
    previewData.value = URL.createObjectURL(res);
    loadingPreview.value = false;
  }
};
// 设置icon
const setImg = (type) => {
  return setIcon(type);
};
//关闭图片预览事件
const closeImgPreview = () => {
  // console.log('close');
  showPreview.value = false;
};
// 限制上传文件大小
const upBefore = (file, files) => {
  const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
  // console.log('maxSize',maxSize);
  if (file.size > maxSize) {
    files.pop();
    ElMessage({
      message:
        file.name + "上传失败，上传文件大小最大为" + maxFileSize.value + "M",
      type: "error",
    });
  } else {
    fileBig.value = file.size + fileBig.value;
    // fileArr.value.push(file.raw)
  }
  // console.log('filesend',files);
};
// 我的文件的空间信息
function getSpaceList() {
  myfile.fileType(3).then((res) => {
    useSpace.value = res.data.usedCap;
    allSpace.value = res.data.spaceCap;
  });
}
//获取我的文件顶层的目录id
const getDirId = () => {
  documents.getTop(3).then((res) => {
    topDirId.value = res.dirId;
    topSpaceId.value = res.spaceId;
  });
};
function onSuccess(files, val) {
  // console.log('suFiles',files);
  const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
  if (files.file.size < maxSize) {
    fileArr.value.push(files.file);
  }
  sureUpload();
}
// 确认上传
function sureUpload() {
  loadingUpload.value = true;
  if (
    useSpace.value * 1024 * 1024 + fileBig.value / 1024 >
    allSpace.value * 1024 * 1024
  ) {
    ElMessage({
      message: "超过最大容量，请联系管理员扩容",
      type: "error",
    });
    loadingUpload.value = false;
    return;
  } else {
    if (fileArr.value.length > 0) {
      // console.log('fileArr',fileArr.value);
      let form = new FormData();
      for (var i = 0; i < fileArr.value.length; i++) {
        form.append("files", fileArr.value[i]);
      }
      form.append("spaceId", topSpaceId.value);
      form.append("dirId", topDirId.value);
      // console.error(fileArr.value);
      uploadApi
        .uploadFileMany(form)
        .then((res) => {
          if (res.code === 200) {
            ElMessage({
              message: "上传文件成功",
              type: "success",
            });
            // getAllTop()
            refreshFile();
            uploadModal.value = false;
            loadingUpload.value = false;
            fileArr.value = [];
            fileBig.value = 0;
          }
        })
        .catch((err) => {
          loadingUpload.value = false;
          fileArr.value = [];
        });
    } else {
      loadingUpload.value = false;
      return ElMessage({ message: "请选择文件", type: "error" });
    }
  }
}
//获取扫描仪列表
const scannerFile = async () => {
  const res = await selectInfo();
  scannerList.value = res.rows;
  checkScanner.value = true;
  checkScanId.value = null;
  // console.log('scanner',res);
};
// 选择扫描仪
const checkScanFn = (item) => {
  checkScanId.value = item.scannerId;
};
// 确认选择扫描仪 获取扫描仪下文件列表
const sureScaner = async () => {
  if (!checkScanId.value) return;
  const res = await getFileByScanerId(checkScanId.value);
  // console.log("sureScanerres", res);
  scannerFiles.value = res.data;
  checkScanner.value = false;
  openScan.value = true;
};
// 关闭窗口
const closeCheckScanner = () => {
  checkScanner.value = false;
};
const closeOpen = () => {
  openScan.value = false;
};
// 移动到事件
const saveScanFile = (arr) => {
  // console.log("arr", arr);
  openScan.value = false;
  scanFileArr.value = arr;
  openScanMove.value = true;
};
// 关闭窗口
const closeOpenScanMove = () => {
  openScanMove.value = false;
  // refreshFile();
};
//粘贴文件上传
const copyFile = (event) => {
  const items = (event.clipboardData || window.clipboardData).items;
  // console.log("event", event);
  let file = null;
  if (!items || items.length === 0) {
    ElMessage({
      message: "请选当前浏览器不支持本地或请打开图片再复制择文件",
      type: "error",
    });
    return;
  }
  // // 搜索剪切板items
  // for (let i = 0; i < items.length; i++) {
  //   if (items[i].type.indexOf("image") !== -1) {
  //     file = items[i].getAsFile();
  //     break;
  //   }
  // }
};
function formatFileSize(fileSize) {
  if (fileSize >= 1024 * 1024 * 1024) {
    // 大于等于1GB，显示GB
    return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB";
  } else if (fileSize >= 1024 * 1024) {
    // 大于等于1MB，显示MB
    return (fileSize / (1024 * 1024)).toFixed(2) + "MB";
  } else if (fileSize >= 1024) {
    // 大于等于1KB，显示KB
    return (fileSize / 1024).toFixed(2) + "KB";
  } else {
    // 小于1KB，显示字节
    return fileSize + "B";
  }
}
watchEffect(() => {
  if (props.showSearch) {
    isSearch.value = true;
  } else {
    isSearch.value = false;
  }
});
watch(
  () => props.hightData,
  (newValue, oldValue) => {
    // console.log('iFrameData 发生改变了', newValue, oldValue);
    hightData.value = newValue;
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => props.allData,
  (newValue, oldValue) => {
    // console.log('iFrameData 发生改变了', newValue, oldValue);
    allData.value = newValue;
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => props.highSearching,
  (newValue, oldValue) => {
    highLoading.value = newValue;
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => props.allSearching,
  (newValue, oldValue) => {
    allLoading.value = newValue;
  },
  {
    immediate: true,
    deep: true,
  }
);
onMounted(() => {
  getList();
  getSpaceList();
  getDirId();
  getConfigKey("file.size.limit").then((response) => {
    // console.log('response',response);
    maxFileSize.value = response.msg;
  });
});
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 160px);
  display: flex;
  padding: 0 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.topBox {
  width: 100%;
  display: flex;
  justify-content: center;
  .upload {
    width: 448px;
    height: 64px;
    border-radius: 86px 86px 86px 86px;
    background-color: #fff;
    margin-right: 16px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      margin-top: 12px;
      width: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .line {
        height: 100%;
        width: 1px;
        color: #dbdbdb;
        line-height: 40px;
      }
      .scanImg {
        width: 32px;
        height: 32px;
        cursor: pointer;
      }
    }
    img {
      width: 40px;
      height: 40px;
    }
    .text1 {
      margin-left: 8px;
      font-weight: bold;
      font-size: 18px;
      color: #030102;
    }
    .text2 {
      margin-left: 24px;
      font-weight: 400;
      font-size: 16px;
      color: #7c808d;
      .blueT {
        font-weight: 500;
        font-size: 16px;
        color: #2e8bf6;
        text-decoration-line: underline;
      }
    }
    .upload-show {
      width: 100px;
      height: 40px;
    }
    :deep(.el-upload) {
      width: 350px !important;
      display: flex !important;
      align-items: center !important;
      // height: 40px !important;
    }
    :deep(.el-upload-dragger) {
      padding: 0;
      border: none;
      display: flex;
      justify-content: flex-start !important;
      align-items: center !important;
      flex-direction: row !important;
    }
  }
}
.search {
  width: 1232px;
  // width: 600px;
  height: 64px;
  background-color: #2e8bf6;
  border-radius: 86px 86px 86px 86px;
  display: flex;
  justify-content: space-between;
  padding-right: 24px;
  .search_input {
    width: 1080px;
    height: 100%;
    border: none;
    outline: none;
    background-color: #fff;
    padding-left: 20px;
    border-radius: 86px 86px 86px 86px;
  }
  .searchBtn {
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 8px;
    }
  }
}
.showSearch {
  width: 1424px !important;
  .search_input {
    width: 1272px !important;
  }
}
// 主页
.btmBox {
  margin-top: 16px;
  width: 1232px;
  height: 624px;
  display: flex;
  justify-content: space-between;
  .upFile {
    width: 494px;
    height: 100%;
    background-color: #fff;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .upImg {
      width: 194px;
      height: 128px;
    }
    .text1 {
      font-style: 18px;
      color: #030102;
      font-weight: bold;
      margin-top: 16px;
      margin-bottom: 8px;
    }
    .text2 {
      font-weight: 400;
      font-size: 16px;
      color: #7c808d;
      span {
        font-weight: 500;
        font-size: 16px;
        color: #2e8bf6;
        text-decoration-line: underline;
      }
    }
    .text3 {
      font-weight: 400;
      font-size: 14px;
      color: #7c808d;
      margin-top: 8px;
    }
    .line {
      margin-top: 16px;
      width: 124px;
      height: 1px;
      border-top: 1px solid #dbdbdb;
    }
    .scanImg {
      width: 32px;
      height: 32px;
      margin-top: 16px;
      cursor: pointer;
    }
  }
  .recent {
    width: 722px;
    height: 100%;
    background-color: #fff;
    border-radius: 16px 16px 16px 16px;
    padding: 24px;
    .top {
      width: 100%;
      height: 42px;
      border-bottom: 1px solid #dbdbdb;
      span {
        font-weight: bold;
        font-size: 18px;
        color: #030102;
      }
    }
    .list {
      width: 100%;
      height: calc(624px - 42px - 1px - 24px);
      overflow-y: auto;
      // padding-top: 12px;
      box-sizing: border-box;
      .oneBox {
        width: 100%;
        height: 60px;
        padding: 8px 22px;
        box-sizing: border-box;
        border-radius: 12px 12px 12px 12px;
        display: flex;
        align-items: center;
        .imgBox {
          width: 44px;
          height: 44px;
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #d0d6e6;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
          }
        }
        .rightBox {
          margin-left: 12px;
          width: calc(100% - 44px - 12px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .text {
            font-weight: bold;
            font-size: 16px;
            color: #030102;
          }
          .time {
            font-weight: 500;
            font-size: 12px;
            color: #7c808d;
          }
        }
        .openArrow {
          width: 20px;
          height: 20px;
        }
        &:hover {
          background: #f6f6f6;
          .imgBox {
            border: 1px solid #2e8bf6;
          }
        }
      }
    }
  }
}
// 搜索结果页面
.searchBtm {
  width: 100%;
  height: 699px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  .highSearch {
    width: 936px;
    height: 699px;
    border-radius: 16px 16px 16px 16px;
    background: #ffffff;
    padding: 24px;
    .mainBox{
      width: 100%;
      height: 100%;
    }
    .title {
      width: 100%;
      height: 22px;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
    }
    .list {
      margin-top: 12px;
      height: calc(100% - 48px - 12px);
      overflow-y: auto;
      .oneBox {
        width: 100%;
        // height: 120px;
        border-bottom: 1px dashed #c1cce3;
        padding-bottom: 16px;
        padding-top: 16px;

        .fileName {
          font-size: 16px;
          color: #2e6bc8;
          text-decoration: underline;
          font-family: Inter-SemiBold;
          cursor: pointer;
        }

        .flieTime {
          font-size: 12px;
          font-weight: 400;
          color: #7c808d;
          // line-height: 20px;
          vertical-align: middle;
          display: flex;
          align-items: center;
          margin: 4px 0;

          span {
            margin-left: 4px;
          }
        }

        .flieContent {
          width: 100%;
          font-size: 14px;
          color: #000000;
          font-weight: 400;
          line-height: 22px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3; //超过3行显示省略号
          overflow: hidden;
        }
      }
    }
  }
  .allSearch {
    width: 936px;
    height: 699px;
    border-radius: 16px 16px 16px 16px;
    background: #ffffff;
    padding: 24px;
    .title {
      width: 100%;
      height: 42px;
      border-bottom: 1px solid #dbdbdb;
      span {
        font-weight: bold;
        font-size: 18px;
        color: #030102;
      }
    }
    .num {
      font-size: 14px;
      font-weight: 400;
      color: #555d72;
      margin-top: 12px;
    }
    .table_icon {
      height: 27px;
      width: 27px;
      vertical-align: middle;
    }
    //表格文本超出隐藏
    :deep(.flie_name, .folder) {
      /*第一步： 溢出隐藏 */
      overflow: hidden;
      /* 第二步：让文本不会换行， 在同一行继续 */
      white-space: nowrap;
      /* 第三步：用省略号来代表未显示完的文本 */
      text-overflow: ellipsis;
    }
  }
}
.lodingBox {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10000000;
}
.checkScan {
  background-color: #f5f7f9;
}
#Onescan {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
::v-deep .el-upload-dragger {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
//关键字背景色
:deep(em) {
  background: #fff0ba !important;
}
.hoverColor {
  &:hover {
    background-color: #236ec3;
  }
}
</style>