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="50"
          :on-change="upBefore"
          :show-file-list="false"
          drag
          :http-request="onSuccess"
          multiple
          :on-exceed="handleExceed"
          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"
            v-infinite-scroll="setScroll"
            infinite-scroll-distance="30"
          >
            <div class="oneBox" v-for="item in hightData" :key="item.id">
              <span
                class="fileName hand"
                @click="toFile(item.content.docInfo)"
                >{{ item.content.docInfo==null ? '' : 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"
            class="hand"
            scrollbar-always-on
            v-el-table-infinite-scroll="allScroll"
            :infinite-scroll-distance="10"
            @row-click="toFile"
          >
            <el-table-column type="index" width="70" />
            <el-table-column label="名称" width="200" :show-overflow-tooltip="true">
              <template #default="scope">
                <div class="flie_name">
                  <img
                    class="table_icon"
                    :src="setIcon(scope.row.fileType)"
                    alt=""
                    style=""
                  />
                  <span v-html="scope.row==null? '' :scope.row.fileName"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="dir.dirPath" label="所属空间" width="210" :show-overflow-tooltip="true" />
            <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.native="copyFile">
        <el-upload
          class="upload-demo"
          :file-list="fileArr"
          :limit="50"
          :on-change="upBefore"
          :show-file-list="false"
          drag
          :http-request="onSuccess"
          multiple
          :on-exceed="handleExceed"
          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">将文件拖到此处或点击选择文件</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 props.tableFileData"
            :key="item"
            @click="toFile(item)"
            class="oneBox"
          >
            <div class="imgBox">
              <img :src="setImg(item == null ? '' : item.fileType)" alt="" />
            </div>
            <div class="rightBox">
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="top"
                :show-after="1000"
                :content="item.fileName"
              >
                <div class="text hand">{{ item.fileName }}</div>
              </el-tooltip>
              <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 { 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";
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
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 highPage = ref(1);
const allPage = ref(1);
const highEnd = ref(false);
const allEnd = ref(false);

const emit = defineEmits([
  "openMaxmin",
  "changeSearch",
  "highSearch",
  "allSearch",
]);
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,
  },
  tableFileData: {
    type: Array,
    default: () => [],
  },
  highEnd: {
    type: Boolean,
    default: false,
  },
  allEnd: {
    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;
  }
  highPage.value = 1;
  allPage.value = 1;
  emit("changeSearch", true, searchText.value);
};

// 打开最近文件
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;
  }
};
// 高级搜索触底加载
const setScroll = async () => {
  if (highEnd.value) return;
  highPage.value++;
  emit("highSearch", highPage.value);
};
// all搜索触底加载
const allScroll = async () => {
  if (allEnd.value) return;
  allPage.value++;
  emit("allSearch", allPage.value);
};
// 设置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) {
  if(!loadingUpload.value){
    const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
    if (files.file.size < maxSize) {
      fileArr.value.push(files.file);
    }
    sureUpload(); //没有文件在上传，立即上传
  }else{
    //当前有文件正在上传，排队等待上传
    setTimeout(() => {
      onSuccess(files,val)
    }, 1000);
  }
}
const handleExceed = (files, fileList)=> {
  ElMessage({
        message: "同时上传文件数超过文件最大数量50",
        type: "error",
  });
}
// 确认上传
function sureUpload() {
  loadingUpload.value = true;
  if (
    useSpace.value * 1024 * 1024 + fileBig.value / 1024 >
    allSpace.value * 1024 * 1024
  ) {
    ElMessage({
      message: "当前文件空间占用已超过最大容量，请联系管理员扩容",
      type: "error",
    });
    loadingUpload.value = false;
    fileArr.value = []
    return;
  } else {
    if (fileArr.value.length > 0) {
      // console.log('fileArr',fileArr.value);
      let form = new FormData();
      let filename = ""
      for (var i = 0; i < fileArr.value.length; i++) {
        form.append("files", fileArr.value[i]);
        filename = fileArr.value[i].name
      }
      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: filename+"上传成功",
              type: "success",
            });
            loadingUpload.value = false;
            fileArr.value = [];
            fileBig.value = 0;
            const storage = sessionStorage.getItem("tagList");
            if (storage != null) {
              const oldStorage = JSON.parse(storage);
              // 判断是否存在myfile
              const myfileTag = oldStorage.find((item) =>
                item.path.includes("myfile")
              );
              if (myfileTag !=null && myfileTag.id) {
                const tagIfarme = document.querySelector(
                  `#${myfileTag.id} iframe`
                );
                const iframeWindow = tagIfarme.contentWindow.window;
                iframeWindow.$refreshFile();
              } else {
                return;
              }
            }
          }else{
            loadingUpload.value = false;
            fileArr.value = [];
            ElMessage({
              message: filename+"上传失败:"+res.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          loadingUpload.value = false;
          fileArr.value = [];
          ElMessage({
            message: filename+"上传失败:"+err.message,
            type: "error",
          });
        });
    } 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("files:", event.clipboardData);
  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";
  }
}
const clearSearchText = ()=>{
  searchText.value = '';
}
//暴露clearSearchText方法
defineExpose({
  clearSearchText
});
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,
  }
);
watch(
  () => props.highEnd,
  (newValue, oldValue) => {
    highEnd.value = newValue;
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => props.allEnd,
  (newValue, oldValue) => {
    allEnd.value = newValue;
  },
  {
    immediate: true,
    deep: true,
  }
);
onMounted(() => {
  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: 16px 16px 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-family: Inter-Bold;
      font-size: 18px;
      color: #030102;
    }
    .text2 {
      margin-left: 24px;
      font-weight: 400;
      font-size: 16px;
      font-family: Inter-Regular;
      color: #7c808d;
      .blueT {
        font-size: 16px;
        font-family: Inter-Medium;
        color: #2e8bf6;
        text-decoration-line: underline;
      }
    }
    .upload-show {
      width: 100px;
      height: 40px;
    }
    :deep(.el-upload) {
      width: 350px !important;
      height: 48px !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;
    font-family: Inter-Bold;
    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: #2e8bf6;
      font-family: Inter-Bold;
      margin-top: 16px;
      margin-bottom: 8px;
    }
    .text2 {
      font-weight: 400;
      font-size: 16px;
      font-family: Inter-Regular;
      color: #7c808d;
      span {
        font-weight: 500;
        font-size: 16px;
        color: #2e8bf6;
        text-decoration-line: underline;
      }
    }
    .text3 {
      font-family: Inter-Regular;
      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-family: Inter-Medium;
            font-size: 16px;
            color: #030102;
            /*第一步： 溢出隐藏 */
            overflow: hidden;
            /* 第二步：让文本不会换行， 在同一行继续 */
            white-space: nowrap;
            /* 第三步：用省略号来代表未显示完的文本 */
            text-overflow: ellipsis;
          }
          .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-family: Inter-Regular;
      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;
          font-family: Inter-Medium;
          text-decoration: underline;
          cursor: pointer;
        }

        .flieTime {
          font-size: 12px;
          font-family: Inter-Medium;
          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-family: Inter-Regular;
          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-family: Inter-Bold;
        font-size: 18px;
        color: #030102;
      }
    }
    .num {
      font-size: 14px;
      font-family: Inter-Regular;
      color: #555d72;
      margin-top: 12px;
    }
    .table_icon {
      height: 27px;
      width: 27px;
      vertical-align: middle;
    }
    //表格文本超出隐藏
    :deep(.flie_name, .folder) {
      font-family: Inter-Regular;
      /*第一步： 溢出隐藏 */
      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;
  }
}
.hand {
  cursor: pointer;
}
</style>