caimei-authentic-www/pages/_template/ross/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=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      </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">
              <img src="https://picsum.photos/32/32" alt="" />
              <span
                class="file-name"
                @click="onRowClick"
                v-text="item.fileName"
              ></span>
            </div>
            <div class="col">{{ item.saveTime | dateFormat }}</div>
            <div class="col">{{ item.fileSize | fileSize }}</div>
            <div class="col control"><div class="download"></div></div>
          </div>
          <div class="section mobile">
            <div class="col file-cover">
              <img src="https://picsum.photos/32/32" alt="" />
            </div>
            <div class="col file-content">
              <div class="file-name" v-text="item.fileName"></div>
              <div class="file-info">
                <span class="date">{{ item.saveTime | dateFormat }}</span>
                <span class="size">{{ item.fileSize | fileSize }}</span>
              </div>
            </div>
            <div class="col control"><div class="download"></div></div>
          </div>
        </div>

        <div class="row">
          <div class="section pc">
            <div class="col">
              <img src="https://picsum.photos/32/32" alt="" />
              <span class="file-name" @click="onRowClick">图像检测分析</span>
            </div>
            <div class="col">2022-08-02</div>
            <div class="col">25MB</div>
            <div class="col control"><div class="download"></div></div>
          </div>
          <div class="section mobile">
            <div class="col file-cover">
              <img src="https://picsum.photos/32/32" alt="" />
            </div>
            <div class="col file-content">
              <div class="file-name">图像检测分析</div>
              <div class="file-info">
                <span class="date">2022-08-02</span>
                <span class="size">25MB</span>
              </div>
            </div>
            <div class="col control"><div class="download"></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app-ross',
  filters: {},
  asyncData({ $http, params }) {
    return $http.api.fetchDocsList({ fileId: params.fileId }).then((res) => {
      return {
        list: res.data || [],
      }
    })
  },
  data() {
    return {
      list: [],
    }
  },
  computed: {
    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
  },
  methods: {
    onRowClick() {
      this.$router.push(`${this.routePrefix}/docs/${11}`)
    },
  },
}
</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-top {
    height: 360px;
    @include themify($themes) {
      background: themed('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: #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;
          &:hover {
            color: #f3920d;
          }
        }

        .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;
    @include themify($themes) {
      background: themed('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;
    }
  }

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