caimei-authentic-www/pages/_template/app/docs/_fileId.vue

<template>
  <div class="page">
    <div class="page-top"></div>
    <div class="page-content">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: `${routePrefix}/docs/0` }"
          >全部文件</el-breadcrumb-item
        >
        <template v-for="(item, index) in crumbList">
          <template v-if="index === crumbList.length - 1">
            <el-breadcrumb-item :key="item.id">
              <span class="cell">{{ item.fileName }}</span>
            </el-breadcrumb-item>
          </template>
          <template v-else>
            <el-breadcrumb-item
              :key="item.id"
              :to="{ path: `${routePrefix}/docs/${item.id}` }"
            >
              <span>{{ item.fileName | crumbFormat }}</span>
            </el-breadcrumb-item>
          </template>
        </template>
      </el-breadcrumb>
      <!-- 列表 -->
      <div class="list-header">
        <div class="row">
          <div class="col">文件名</div>
          <div class="col">时间</div>
          <div class="col">大小</div>
          <div class="col">操作</div>
        </div>
      </div>
      <div class="list-body">
        <div class="row" v-for="item in list" :key="item.id">
          <div class="section pc">
            <div class="col">
              <doc-icon :type="item.fileType" :src="item.screenshot" />
              <span
                class="file-name"
                v-if="item.fileType === 'article'"
                @click="onRowClick(item)"
              >
                {{ item.fileName | fileNameFormat }}
              </span>
              <span class="file-name" v-else @click="onRowClick(item)">{{
                item.fileName
              }}</span>
            </div>
            <div class="col">{{ item.saveTime | dateFormat }}</div>
            <div class="col">
              <span v-if="item.packageType > 0">{{
                item.fileSize | fileSize
              }}</span>
              <span v-else>-</span>
            </div>
            <div class="col control">
              <div class="download" @click="onDownload(item, $event)"></div>
            </div>
          </div>
          <div class="section mobile">
            <div class="col file-cover">
              <doc-icon :type="item.fileType" :src="item.screenshot" />
            </div>
            <div class="col file-content" @click="onRowClick(item)">
              <div class="file-name" v-if="item.fileType === 'article'">
                {{ item.fileName | fileNameFormat }}
              </div>
              <div class="file-name" v-else>{{ item.fileName }}</div>
              <div class="file-info">
                <span class="date">{{ item.saveTime | dateFormat }}</span>
                <span class="size">
                  <span v-if="item.packageType > 0">{{
                    item.fileSize | fileSize
                  }}</span>
                  <span v-else>-</span>
                </span>
              </div>
            </div>
            <div class="col control">
              <div class="download" @click="onDownload(item, $event)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import fileListMixin from '@/mixins/fileList'
export default {
  layout: 'app-normal',
  mixins: [fileListMixin],
}
</script>

<style lang="scss" scoped>
/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

// pc 端
@media screen and (min-width: 768px) {
  .page {
    margin-bottom: 16px;
  }
  .page-top {
    height: 360px;
    background: url(~assets/theme-images/normal/pc/banner-doc.png);
    background-size: auto 360px;
    background-position: center;

    .logo {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #fff;
    }
    .name {
      font-size: 30px;
      color: #fff;
    }
  }

  .page-content {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 16px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 32px 0;

    .el-breadcrumb {
      margin: 0 24px 32px;
    }

    .list-header,
    .list-body {
      font-size: 14px;
      color: #282828;
      .col {
        &:nth-child(1) {
          flex: 1;
        }
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          width: 120px;
          text-align: center;
        }
      }
    }

    .list-header {
      .row {
        display: flex;
        justify-content: space-between;
        padding: 0 24px 16px;
      }
    }

    .list-body {
      .row {
        line-height: 70px;
        color: #666666;
        padding: 0 24px;
        transition: all 0.4s;

        &:hover {
          background: #fffaf3;
        }

        .section {
          display: flex;
          justify-content: space-between;
          border-top: 1px solid #f7f7f7;

          &.mobile {
            display: none;
          }
        }

        img {
          display: inline-block;
          width: 32px;
          height: 32px;
          background: #eee;
          margin-right: 24px;
        }

        .file-name {
          cursor: pointer;
          transition: all 0.4s;
          margin-left: 24px;
          &:hover {
            color: #bc1724;
          }
        }

        .control {
          display: flex;
          justify-content: center;
          align-items: center;
          .download {
            display: block;
            width: 24px;
            height: 24px;
            background: url(~assets/theme-images/common/pc-icon-download.png)
              no-repeat center;
            background-size: 24px;
            margin: 0 auto;
            cursor: pointer;

            &:hover {
              background-image: url(~assets/theme-images/common/pc-icon-download-hover.png);
            }
          }
        }
      }
    }
  }
}

// 移动 端
@media screen and (max-width: 768px) {
  .page-top {
    height: 46vw;
    background: url(~assets/theme-images/normal/h5/banner-doc.png);
    background-size: auto 46vw;
    background-position: center;

    .logo {
      display: block;
      width: 14.8vw;
      height: 14.8vw;
      border-radius: 50%;
      background: #fff;
    }
    .name {
      font-size: 4vw;
      color: #fff;
      text-align: center;
      margin: 0 3.2vw;
    }
  }

  .page-content {
    position: relative;
    padding: 8vw 0;

    .el-breadcrumb {
      margin: 0 4vw 4vw;
    }

    .list-header {
      display: none;
    }

    .list-body {
      font-size: 3.6vw;
      color: #282828;

      .row {
        color: #666666;
        padding: 0 4vw;

        .section {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 0.1vw solid #f7f7f7;
          height: 17.6vw;

          &.pc {
            display: none;
          }

          .file-cover {
            img {
              width: 8.8vw;
              height: 8.8vw;
              background: #eee;
            }
          }

          .file-content {
            flex: 1;
            margin: 0 4.8vw;

            .file-name {
              font-size: 3.6vw;
              @include ellipsis(1);
            }

            .file-info {
              font-size: 3vw;
              color: #999999;
              margin-top: 1.6vw;

              .size {
                margin-left: 4vw;
              }
            }
          }

          .control {
            width: 6.4vw;
            height: 6.4vw;
            .download {
              display: block;
              width: 6.4vw;
              height: 6.4vw;
              background: url(~assets/theme-images/common/h5-icon-download.png)
                no-repeat center;
              background-size: 6.4vw;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}
</style>