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

<template>
  <div class="page">
    <div class="page-top flex flex-col justify-center items-center">
      <span
        class="name mt-2"
        v-text="supplierInfo.shopName + '云资料库'"
      ></span>
    </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"
                @click="onRowClick(item)"
                v-text="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-ph',
  mixins: [fileListMixin],
}
</script>

<style lang="scss" scoped>
// pc 端
@media screen and (min-width: 768px) {
  ::v-deep {
    .el-breadcrumb {
      white-space: nowrap;
      overflow-y: scroll;
      padding-bottom: 16px;

      .el-breadcrumb__item {
        float: unset !important;
      }
    }
  }
  .page {
    @include useTheme() {
      margin-bottom: 16px;
      .page-top {
        height: 360px;
        background: fetch('pc-banner-doc');
        background-size: auto 360px;
        .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: #fff1f2;
            }

            .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) {
  ::v-deep {
    .el-breadcrumb {
      white-space: nowrap;
      overflow-y: scroll;
      padding-bottom: 2.4vw;

      .el-breadcrumb__item {
        float: unset !important;
      }
    }
  }
  .page {
    .page-top {
      @include useTheme() {
        height: 46vw;
        background: fetch('h5-banner-doc');
        background-size: auto 46vw;

        .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>