前端开发管理文件夹和文件的功能

由于这个项目是前后端不分离项目，前端用JS、vue.js、jQuery，所以

引入CDN：

          <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>

          <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

样式放在最前面：

<style lang="less">
    /* 把我们所有标签的内外边距清零 */
    * {
      margin: 0;
      padding: 0;
      /* css3盒子模型 */
      box-sizing: border-box;
    }

    /* 去掉li 的小圆点 */
    li {
      list-style: none;
    }

    .hover_pointer {
      /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
      cursor: pointer;
    }

    a {
      color: #000;
      text-decoration: none;
    }

    a:hover {
      color: #F0AD4E;
    }

    body {
      /* CSS3 抗锯齿形 让文字显示的更加清晰 */
      -webkit-font-smoothing: antialiased;
      background-color: #fff;
      font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
      color: #666
    }

    .none {
      display: none;
    }

    /* 清除浮动 */
    .clearfix:after {
      visibility: hidden;
      clear: both;
      display: block;
      content: ".";
      height: 0;
    }

    .clearfix {
      *zoom: 1;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    body {
      background-color: #f6f6f6;
    }

    /* 从这里开始 */
    .nav {
      display: flex;
      flex-wrap: nowrap;
      padding: 5px;
      background-color: #FFFFFF;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }

    .back {
      color: #E52E22;
      cursor: pointer;
    }

    .back>img {
      vertical-align: text-bottom;
    }

    .back .delimiter {
      color: #666;
    }

    .red_color {
      color: #E52E22;
    }

    .breadcrumb_all>span.size_bold {
      font-weight: bold;
      padding-left: 0;
    }

    .breadcrumb_all>:nth-child(1) {
      padding-left: 20px;
      cursor: pointer;
    }

    .bc_name {
      cursor: pointer;
    }

    .arrow_right {
      padding: 0 10px;
    }

    .breadcrumb_item>ul {
      display: flex;
    }

    .table_files {
      /* min-height: 788px; */
      background-color: #FFFFFF;
    }

    .table_top {
      padding-left: 15px;
      height: 38px;
      line-height: 38px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      background-color: #F5F5F5;
      box-shadow: 0px -1px 0px 0px #E8E8E8;
    }

    .table_top>label>span {
      padding-left: 10px;
    }

    .table_files>ul {
      display: flex;
      flex-wrap: wrap;
    }

    .table_files>ul>li {
      margin: 5px;
      width: calc(10% - 10px);
      min-width: 118px;
      text-align: center;
      position: relative;
    }

    .table_files>ul>li.selected_bgc {
      background-color: #E0F6FF;
    }

    .table_files>ul>li>.format_img {
      width: 56px;
      height: 56px;
    }

    .table_files>ul>li>.public_img {
      width: 48px;
      height: 17px;
      position: absolute;
      top: 76px;
      left: 35px;
    }

    .single_check