cloudfile-ui/src/views/biz/recent/index.vue

<template>
  <!-- <TopTabs></TopTabs> -->
  <div class="page">
    <el-collapse v-model="activeNames" @change="handleChange">
      <div v-if="isList">
        <el-collapse-item name="folder" class="collapse_Item">
          <template #title>
            <span class="collapseItem_title">文件夹</span>
          </template>
          <!-- 表格 -->
          <el-table
            :data="tableFolderData"
            style="width: 100%"
            height="42.5vh"
            :scrollbar-always-on="true"
            @row-click="changeFile"
          >
            <el-table-column fixed prop="date" label="名称" width="500">
              <template #default="scope">
                <div>
                  <img
                    class="table_icon"
                    src="@/assets/images/fileBox.png"
                    alt=""
                    style=""
                  />
                  <span class="shouzhi">{{ scope.row.dirName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" width="200" />
            <el-table-column prop="state" label="类型" width="180"
              >文件夹</el-table-column
            >
            <!-- <el-table-column prop="city" label="大小" width="160" /> -->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="file" class="collapse_Item">
          <template #title>
            <span class="collapseItem_title">文件</span>
          </template>
          <!-- 表格 -->
          <el-table
            :data="tableFileData"
            style="width: 100%"
            height="40vh"
            :scrollbar-always-on="true"
            @row-contextmenu="handleRowClick"
          >
            <el-table-column fixed prop="date" label="名称" width="500">
              <template #default="scope">
                <div>
                  <img
                    class="table_icon"
                    :src="setIcon(scope.row==null ? '':scope.row.fileType)"
                    alt=""
                    style=""
                  />
                  <span class="shouzhi"> {{ scope.row==null ? '': scope.row.fileName }}</span>
                </div>
                <!-- <span
                  style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  <el-icon
                    v-if="scope.row.isFavorite == 'N' || !scope.row.isFavorite"
                    @click.stop="collectByStar(scope.row, false)"
                  >
                    <Star />
                  </el-icon>
                  <img
                    v-else
                    @click.stop="delCollect(scope.row, false)"
                    src="../../../assets/images/yellowstar.png"
                    alt=""
                  />
                  <img
                    :src="setIcon(scope.row.fileType)"
                    class="table_icon"
                    alt=""
                  />
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="scope.row.fileName"
                    placement="top"
                    :show-after="1000"
                  >
                    {{ scope.row.fileName }}
                  </el-tooltip>
                </span> -->
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" width="200" />
            <el-table-column prop="fileType" label="类型" width="180" />
            <el-table-column label="大小">
              <template #default="scope">
                <span>
                  {{ formatFileSize(scope.row==null?'':scope.row.fileSize) }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <div
          class="setCli"
          v-if="cliCC"
          :style="{ left: xz + 'px', top: yz + 'px' }"
        >
          <template v-for="(item, index) in filterMouseCli()" :key="index">
            <p @click="chooseSet(item, index, 1)" class="chooseSet shouzhi" style="margin: 0;">
              <img :src="item.img" alt="" />
              {{ item.name }}
              <span
                v-if="
                  item.name == '在线编辑' || item.name == '协作' ? true : false
                "
                style="color: #7084b4; float: right; position: relative"
                class="arrow"
                >></span
              >
            </p>
          </template>
        </div>
        <div
          class="setCli1"
          v-if="anyP"
          :style="{ left: xz + 155 + 'px', top: yz + 'px' }"
        >
          <p @click="chooseSet1(0)" class="chooseSet">
            <img src="../../../assets/images/user.png" alt="" />
            选择人员
          </p>
          <p class="chooseSet" @click="goLock">
            <img src="../../../assets/images/archiveTray.png" alt="" />
            归档
          </p>
        </div>
      </div>
      <div v-else>
        <el-collapse-item name="folder">
          <template #title>
            <span class="collapseItem_title">文件夹</span>
          </template>
          <!-- 平铺 -->
          <el-scrollbar height="360px">
            <div class="tile_box">
              <div class="file_box" v-for="item in tableData" :key="item">
                <img
                  class="big_file_img"
                  src="@/assets/images/fileBox.png"
                  alt=""
                />
                <span>Inceptos</span>
              </div>
            </div>
          </el-scrollbar>
        </el-collapse-item>
        <el-collapse-item name="file">
          <template #title>
            <span class="collapseItem_title">文件</span>
          </template>
          <!-- 平铺 -->
          <el-scrollbar height="360px">
            <div class="tile_box">
              <div class="file_box" v-for="item in 20" :key="item">
                <img
                  class="big_file_img"
                  src="@/assets/images/fileType//file_DOC.png"
                  alt=""
                />
                <span>Inceptos</span>
              </div>
            </div>
          </el-scrollbar>
        </el-collapse-item>
      </div>
    </el-collapse>
    <div>
      <FileTree
        v-if="fileTrees"
        :fileTrees="fileTrees"
        :newSpaceId="newSpaceId"
        :fileId="clickRowId"
        @getChildren="getChildren"
        :copyOrMove="copyOrMove"
      ></FileTree>
    </div>
    <ImgPreview
      :previewData="previewData"
      :copyFileType="copyFileType"
      :showPreview="showPreview"
      @closeImgPreview="closeImgPreview"
    ></ImgPreview>
    <div
      v-loading.fullscreen="loadingPreview"
      v-if="loadingPreview"
      class="lodingBox"
    ></div>
    <!-- 文件收藏 -->
    <div>
      <FileCollect
        v-if="collects"
        :collects="collects"
        @getCollects="getCollects"
        :copyFileName="copyFileName"
        :copyFileId="copyFileId"
        @refreshFile="refreshFile"
        :isFolder="isFolder"
        :clickRow="clickRow"
      ></FileCollect>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRaw, inject } from "vue";
// import TopTabs from "@/components/TopTabs/index.vue"
import { listRecent, getRecent } from "@/api/biz/recent";
import { getInfo, getInfoByDirId } from "@/api/biz/info";
import { getSpace } from "@/api/biz/space";
import { getDir } from "@/api/biz/dir";
import documents from "@/api/document/document";
import ImgFile from "@/views/myfile/jsComponents/ImgFile";
import FileTree from "@/views/myfile/components/FileTree.vue";
import FileCollect from "@/views/myfile/modalComponebts/FileCollect.vue";
import myfile from "@/api/myfile/myfile";
import { getLeveldetail } from "@/api/level/level";
import { canPreviewFile, rightMenuRole } from "@/utils/index.js";
import { preview } from "@/api/common/common.js";
import { delFavorite } from "@/api/biz/favorite.js";
import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
const activeNames = ref(["folder", "file"]);
const isList = ref(true); //控制显示方式
const tableFolderData = ref([]);
const tableFileData = ref([]);
const thisFolder = ref(); //当前文件夹
const newDirId = ref();
const newSpaceId = ref();
const cliCC = ref(false); //文件右键菜单
const clickRow = ref(); //当前右键的文件
let xz = ref(0);
let yz = ref(0);
let anyP = ref(false);
const thisFolderRole = ref(); //文件夹权限
const workOrEdit = ref();
const thanks = ref();
const selectedIndex = ref();
const editOnline = ref();
const isFolder = ref();
const copyRow = ref();
const clickRowId = ref();
const copyDirId = ref();
const copySpaceId = ref();
const copyFileId = ref();
const copyFileSize = ref();
const copyFileType = ref();
const copyParentId = ref();
const copyFileName = ref();
const loadingPreview = ref(false);
const onlyView = ref(false);
const showPreview = ref(false);
const previewData = ref();
const fileTrees = ref(false);
const copyOrMove = ref();
const backFolder = ref();
const copyFolderName = ref();
const addFolderAdd = inject("addFolderAdd");
const addFileTab = inject("addFileTab");
let collects = ref(false);
const spacePath = ref();
let menuList = ref([
  {
    name: "我的空间",
    choose: "我的空间",
  },
]);
let nameForm = ref({
  name: "",
});
let mouseCli = ref([
  {
    img: ImgFile.previewIcon,
    name: "预览",
  },
  {
    img: ImgFile.downLoad,
    name: "下载",
  },
  {
    img: ImgFile.addolder,
    name: "打开文件所在位置",
  },
]);
const addTab = inject("addTab");
//----引入图片----
import file_DOC from "../../../assets/images/fileType/file_DOC.png";
import file_pdf from "../../../assets/images/fileType/file_pdf.png";
import file_PPT from "../../../assets/images/fileType/file_PPT.png";
import file_TXT from "../../../assets/images/fileType/file_TXT.png";
import file_XLSX from "../../../assets/images/fileType/file_XLSX.png";
import file_pic from "../../../assets/images/fileType/file_pic.png";
import file_audio from "../../../assets/images/fileType/file_audio.png";
import file_video from "../../../assets/images/fileType/file_video.png";
import file_zip from "../../../assets/images/fileType/file_zip.png";
// -------

onMounted(() => {
  getList();
  window.addEventListener("click", closeRMenu, true);
});
const getList = async () => {
  const resY = await listRecent({ isFolder: "Y" });
  const resN = await listRecent({ isFolder: "N" });
  if (resY.code === 200) {
    var arr = [];
    resY.rows.map(async (item) => {
      const detail = await getDir(item.relaId);
      if(detail.data!=null) tableFolderData.value.push(JSON.parse(JSON.stringify(detail.data)));
    });
    console.log("resYarr", arr);
    // tableFolderData.value = resY.rows;
    console.log("tableData.value = ", toRaw(tableFolderData.value));
  }
  if (resN.code === 200) {
    var arr = [];
    resN.rows.map(async (item) => {
      const detail = await getInfo(item.relaId);
      tableFileData.value.push(detail.data);
    });
    console.log("resNarr", arr);
    // tableFileData.value = resN.rows;
    console.log("tableFileData.value = ", tableFileData.value);
  }
};
const getFileDetail = () => {};
const handleChange = (val) => {
  // console.log(val);
};
function changeFile(row, num) {
  row = toRaw(row);
  if (row) {
    backFolder.value = thisFolder.value;
    thisFolder.value = row;
  } else {
    row = thisFolder.value;
  }
  thisFolder.value = row;
  console.log("changeFilerow2", row);
  if (row.isEncrypt === "Y") {
    getLeveldetailFn(row.encryptLevel);
  } else {
    thisFolderRole.value = null;
  }
  copyParentId.value = row.parentId;
  newDirId.value = row.dirId;
  newSpaceId.value = row.spaceId;
  documents
    .getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 })
    .then((res) => {
      tableFolderData.value = res.data;
      // if (res.code === 200) {
      if (res.data.length === 0) {
        myfile
          .getById(newDirId.value)
          .then((res) => {
            if (res.code === 200) {
              tableFileData.value = res.rows;
            }
          })
          .catch((error) => {
            console.error("myfile.getAllFileMenu 调用失败:", error);
          });
      } else {
        myfile
          .getById(row.dirId - 0)
          .then((res) => {
            if (res.code === 200) {
              tableFileData.value = res.rows;
            }
          })
          .catch((error) => {
            console.error("myfile.getAllFileMenu 调用失败:", error);
          });
      }
      // }
    });
  selectedIndex.value = num;
  const newItem = {
    name: row.dirName,
    choose: row.dirName,
    dirIds: row.dirId,
    spaceIds: row.spaceId,
  };
  // 检查 newItem 是否已存在于 menuList 中
  const isItemExist = menuList.value.some(
    (item) => item.choose === newItem.choose
  );
  // 如果不存在，则添加它
  if (!isItemExist) {
    menuList.value.push(newItem);
  }
}
// 文件名表格每一行点击事件
function handleRowClick(row, col, e) {
  console.log("row", row);
  isFolder.value = "N";
  clickRow.value = row;
  e.preventDefault();
  e.stopPropagation();
  xz.value = e.pageX;
  yz.value = e.pageY;
  copyRow.value = row;
  clickRowId.value = row.docId;
  copyDirId.value = row.dirId;
  copySpaceId.value = row.spaceId;
  copyFileId.value = row.fileId;
  copyFileSize.value = row.fileSize;
  copyFileType.value = row.fileType;
  nameForm.value.name = row.fileName;
  copyFileName.value = row.fileName;
  if (cliCC.value === true) {
    cliCC.value = false;
  } else {
    cliCC.value = true;
  }
}
//mouse弹框
async function chooseSet(row, index, num) {
  // 权限控制
  // if (thisFolderRole.value && thisFolderRole.value.roles) {
  //   if (thisFolderRole.value.roles.l0600) {
  //     const passArr = localStorage.getItem("passArr");
  //     const passArrObj = JSON.parse(passArr);
  //     if (
  //       !passArrObj ||
  //       !passArrObj.some((item) => item === clickRow.value.docId)
  //     ) {
  //       chooseRow.value = row;
  //       chooseNum.value = num;
  //       showInputPassword.value = true;
  //       return;
  //     }
  //     // console.log('needc');
  //   }
  // }
  console.log("chooseSetrow", row);
  console.log("chooseSetnum", num);
  if (row.name === "打开文件所在位置") {
    const dirData = await getDir(clickRow.value.dirId);
    const spaceData = await getSpace(clickRow.value.spaceId);
    console.log("getInfoByDirId", dirData.data);
    console.log("spaceData", spaceData.data);
    if (spaceData.data.spaceType == "3") {
      spacePath.value = "/myfile";
    } else if (spaceData.data.spaceType == "1") {
      spacePath.value = "/publicment";
    } else {
      spacePath.value = "/department";
    }
    const addData = {
      path: spacePath.value + dirData.data.dirId,
      name: dirData.data.dirName,
      clickRowId: toRaw(dirData.data),
    };
    console.log("addData", addData);
    addFolderAdd(addData);
  }
  if (row.name === "下载") {
    // location.href = `${import.meta.env.VITE_APP_BASE_API}/biz/info/download/${copyFileId.value}`;
    downLoadfile();
  }
  if (row.name === "预览") {
    loadingPreview.value = true;
    const filePreview = canPreviewFile(copyFileType.value);
    if (filePreview) {
      loadingPreview.value = false;
      // addTab(clickRow.value);
      addFileTab(clickRow.value,0);
      onlyView.value = true;
      // editOnline.value = false
      cliCC.value = false;
    } else {
      const res = await preview(copyRow.value.docId);
      showPreview.value = true;
      previewData.value = URL.createObjectURL(res);
    }
    loadingPreview.value = false;
    console.log("filePreview", filePreview);

    // // console.log('res',res);
    // const res = await preview(copyFileId.value)
    // showPreview.value = true
    // previewData.value = URL.createObjectURL(res)
  }
}
function chooseSet1(num) {
  workOrEdit.value = num;
  thanks.value = true;
  anyP.value = false;
}
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 setIcon = (fileType) => {
  switch (fileType) {
    case ".docx":
      return file_DOC;
      break;
    case ".pdf":
      return file_pdf;
      break;
    case ".ppt":
      return file_PPT;
      break;
    case ".txt":
      return file_TXT;
      break;
    case ".xlsx":
      return file_XLSX;
      break;
    case ".csv":
      return file_XLSX;
      break;
    case ".png":
      return file_pic;
      break;
    case ".mp3":
      return file_audio;
      break;
    case ".mp4":
      return file_video;
      break;
    case ".zip":
      return file_zip;
      break;
    default:
      return file_DOC;
      break;
  }
};
//对mouseCli数组进行筛选，实现菜单的区分显示
const filterMouseCli = () => {
  const canPreviewArray = [
    ".doc",
    ".wps",
    ".docm",
    ".docx",
    ".dot",
    ".dotm",
    ".dotx",
    ".epub",
    ".fodt",
    ".htm",
    ".html",
    ".mht",
    ".odt",
    ".ott",
    ".pdf",
    ".rtf",
    ".txt",
    ".djvu",
    ".xps",
    ".csv",
    ".fods",
    ".ods",
    ".ots",
    ".xls",
    ".xlsm",
    ".xlsx",
    ".xlt",
    ".xltm",
    ".xltx",
    ".fodp",
    ".odp",
    ".otp",
    ".pot",
    ".potm",
    ".potx",
    ".pps",
    ".ppsm",
    ".ppsx",
    ".ppt",
    ".pptm",
    ".pptx",
  ];
  const typeArr = [".png", ".jpg", ".jpeg", ".JPG", ".mp3", ".mp4"];
  const imgTypeArr = [".png", ".jpg", ".jpeg", ".JPG"];
  const canEditArr = [
    ".doc",
    ".docm",
    ".docx",
    ".dot",
    ".dotm",
    ".dotx",
    ".txt",
    ".djvu",
    ".xps",
    ".csv",
    ".fods",
    ".ods",
    ".ots",
    ".xls",
    ".xlsm",
    ".xlsx",
    ".xlt",
    ".xltm",
    ".xltx",
    ".fodp",
    ".odp",
    ".otp",
    ".doc",
    ".docm",
    ".docx",
    ".dot",
    ".dotm",
    ".dotx",
    ".epub",
    ".fodt",
    ".htm",
    ".html",
    ".mht",
    ".odt",
    ".ott",
    ".rtf",
    ".txt",
    ".djvu",
    ".xps",
    ".wps",
    ".pptx",
  ];
  let arr = [];
  if (
    !(
      typeArr.includes(copyFileType.value) ||
      canPreviewArray.includes(copyFileType.value)
    )
  ) {
    arr = mouseCli.value.filter((item) => item.name !== "预览");
  } else {
    arr = toRaw(mouseCli.value);
  }
  if (!canEditArr.includes(copyFileType.value)) {
    arr = arr.filter(
      (item) =>
        item.name !== "在线编辑" &&
        item.name !== "协作" &&
        item.name !== "历史版本"
    );
  }
  if (!imgTypeArr.includes(copyFileType.value)) {
    arr = arr.filter((item) => item.name !== "文字识别");
  }
  // console.log('arr',arr);
  // if (thisFolderRole.value) {
  //   arr = rightMenuRole(toRaw(thisFolderRole.value), arr);
  // }
  return arr;
};
// 关闭文件夹右键菜单
const closeRMenu = () => {
  // console.log("close");
  cliCC.value = false;
};
//关闭图片预览事件
const closeImgPreview = () => {
  // console.log('close');
  showPreview.value = false;
};
function getChildren(data) {
  fileTrees.value = data;
  refreshFile();
}
function getCollects(data) {
  collects.value = data;
}
//star收藏事件
const collectByStar = (row, isfolder) => {
  console.log("row", row);
  if (isfolder) {
    let thisRow = toRaw(row);
    isFolder.value = "Y";
    clickRow.value = thisRow;
    copyFolderName.value = row.dirName;
    copyFileName.value = clickRow.value.dirName;
  } else {
    isFolder.value = "N";
    clickRow.value = row;
    copyRow.value = row;
    clickRowId.value = row.docId;
    copyDirId.value = row.dirId;
    copyFileName.value = row.fileName;
  }

  collects.value = true;
};
// 取消文件收藏
const delCollect = async (row, isfolder) => {
  const thisRow = toRaw(row);
  console.log("thisRow", thisRow);
  let query = {};
  if (isfolder) {
    query = {
      isFolder: "Y",
      relaId: thisRow.dirId,
    };
  } else {
    query = {
      isFolder: "N",
      relaId: thisRow.docId,
    };
  }
  const res = await delFavorite(query);
  //TODO 之后需要重新获取数据 并message提示
  console.log("res", res);
  refreshFile();
};
//刷新文件
const refreshFile = () => {
  // console.log('ref',toRaw(thisFolder.value));
  if (toRaw(thisFolder.value) && toRaw(thisFolder.value).isFavorite) {
    //如果点开了文件夹
    // console.log(111);
    folderClick();
  } else {
    // console.log(222);
    getList();
  }
};
//获取权限详情
const getLeveldetailFn = async (data) => {
  const res = await getLeveldetail(data);
  // console.log('getLeveldetailFn',res);
  if (res.code === 200) {
    thisFolderRole.value = res.data;
  }
  // console.log('thisFolderRole',thisFolderRole.value);
};
// 文件下载
const downLoadfile = () => {
  myfile.fileDown(clickRow.value.docId).then((res) => {
    var reader = new FileReader();
    reader.onloadend = function (event) {
      //event 就是你要的返回内容
      //因为返回的报错格式是字符串，手动转换成对象，转换成功表示请求失败
      //转换失败就意味着你拿到的result是文件流，那么直接手动下载就好
      try {
        let data = JSON.parse(event.target.result);
      } catch (err) {
        const link = document.createElement("a"); // 创建a标签
        let blob = new Blob([res]);
        link.style.display = "none";
        link.href = URL.createObjectURL(blob); // 创建下载的链接
        link.setAttribute("download", clickRow.value.fileName); // 给下载后的文件命名
        document.body.appendChild(link);
        link.click(); // 点击下载
        document.body.removeChild(link); //  完成移除元素
        window.URL.revokeObjectURL(link.href); // 释放blob对象
      }
    };
    reader.readAsText(res);
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/my-common.scss";
.page {
  height: 100%;
  height: 100%;
  background-color: #fff;
}
.table_icon {
  height: 27px;
  width: 27px;
  vertical-align: middle;
}
.collapse_Item {
  height: 50%;
}
.setCli {
  width: 156px;
  max-height: auto;
  position: absolute;
  top: -70px;
  left: 300px;
  flex-wrap: 400;
  background-color: white;
  border: 1px solid gray;
  border-radius: 4px;
  z-index: 3;
  overflow-y: auto;
  // font-size: 16px;
}

.setCli1 {
  width: 156px;
  height: auto;
  position: absolute;
  background-color: white;
  border: 1px solid gray;
  border-radius: 4px;
  z-index: 100;
  overflow-y: auto;
}

.chooseSet {
  width: 140px;
  height: 30px;
  line-height: 30px;
  margin: 5px auto;
  font-size: 13px;

  // display: flex;
  // align-items: center;
  // position: relative;
  img {
    margin-right: 4px;
    vertical-align: middle;
  }
}

.chooseSet:hover {
  width: 140px;
  height: 30px;
  line-height: 30px;
  margin: 5px auto;
  font-size: 13px;
  background-color: #f5f7f9;
  /* color: white; */
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
  height: 50% !important;
}
::v-deep .el-collapse-item__header {
  background-color: #ebeff6 !important;
  width: 100% !important;
  height: 24px !important;
}
::v-deep .el-collapse-item__arrow {
  position: relative;
  color: #2e6bc8;
  right: 97%;
}
::v-deep .el-table td.el-table__cell {
  border: none;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000 !important;
}
::v-deep .el-table__row {
  height: 35px !important;
}
::v-deep .el-table .el-table__header-wrapper th {
  border-bottom: none;
  border-right: 1px solid #c1cce3;
  background-color: #fff !important;
  color: #505870;
  font-size: 14px;
}
.collapseItem_title {
  position: relative;
  left: 40px;
  color: #2e6bc8;
  font-family: Inter-Medium;
  font-size: 12px;
}
// 表格右边3个靠右对齐
::v-deep .el-table__header thead tr th {
  font-family: Inter-Medium;
  font-size: 14px;
  color: #505870;
  text-align: right;
  &:nth-child(1) {
    text-align: left;
  }
}
::v-deep .el-table__body tbody [class*="column_"] {
  text-align: right;
  &:nth-child(4n + 1) {
    text-align: left;
  }
}
//平铺
.tile_box {
  width: 100%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  .file_box {
    width: 116px;
    min-height: 138px;
    // border: 1px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    .big_file_img {
      width: 100px;
      height: 100px;
    }
    span {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
  }
}
.shouzhi{
  margin-left: 5px;
}
</style>