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

<template>
  <div class="page-content">
    <div v-if="fileData" class="doc-header">
      <div class="info">
        <div class="cover">
          <doc-icon
            :type="fileData.fileType"
            :width="32"
            :height="32"
            :src="fileData.screenshot"
          />
        </div>
        <div class="content">
          <div class="row">
            <span class="date">时间：{{ fileData.saveTime | dateFormat }}</span>
            <span class="size">大小：{{ fileData.fileSize | fileSize }}</span>
          </div>
        </div>
      </div>
      <div>
        <div @click="onDownload(fileData, $event)" class="download"></div>
      </div>
    </div>
    <div class="doc-content">
      <img v-if="fileType === 'image'" :src="fileData.ossUrl" alt="" />
      <video v-else-if="fileType === 'video'" :src="fileData.ossUrl" controls />
      <div v-else class="other">
        <doc-icon type="icon-other" :width="64" :height="64" />
        <div class="name">{{ fileData.fileName }}</div>
        <div class="download" @click="onDownload(fileData, $event)">
          下载并打开
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import fileDetailMixin from '@/mixins/fileDetail'
export default {
  layout: 'app',
  mixins: [fileDetailMixin],
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .page-content {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    margin-top: 16px;
    padding: 24px;
    box-sizing: border-box;
  }
  .doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 26px;

    .download {
      width: 24px;
      height: 24px;
      background: url(~assets/theme-images/common/pc-icon-download.png)
        no-repeat center;
      background-size: 24px;
      cursor: pointer;

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

    .info {
      display: flex;
      align-items: center;

      .cover {
        img {
          display: block;
          width: 48px;
          height: 48px;
          background: skyblue;
        }
      }

      .content {
        margin-left: 24px;
        .name {
          font-size: 16px;
          color: #282828;
          margin-bottom: 8px;
        }
        .date,
        .size {
          font-size: 14px;
          color: #999999;
        }

        .size {
          margin-left: 32px;
        }
      }
    }
  }

  .doc-content {
    display: flex;
    justify-content: center;
    img,
    video {
      display: block;
      max-height: 540px;
      // background: #000;
      margin-top: 40px;
      margin-bottom: 24px;
    }

    .other {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 610px;

      .name {
        font-size: 16px;
        color: #666666;
        margin: 16px 0 24px;
      }

      .download {
        width: 88px;
        height: 36px;
        background: #bc1724;
        opacity: 1;
        border-radius: 2px;
        text-align: center;
        line-height: 36px;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-content {
    background: #fff;
    box-sizing: border-box;
    padding: 4vw;
  }
  .doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.1vw solid #e8e8e8;
    padding-bottom: 4vw;

    .download {
      width: 6.4vw;
      height: 6.4vw;
      background: url(~assets/theme-images/common/pc-icon-download.png)
        no-repeat center;
      background-size: 6.4vw;
      cursor: pointer;

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

    .info {
      display: flex;
      align-items: center;

      .cover {
        img {
          display: block;
          width: 12vw;
          height: 12vw;
          background: skyblue;
        }
      }

      .content {
        margin-left: 4vw;
        .name {
          font-size: 3.6vw;
          color: #282828;
          margin-bottom: 1vw;
        }
        .date,
        .size {
          font-size: 3vw;
          color: #999999;
        }

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

  .doc-content {
    display: flex;
    justify-content: center;
    img,
    video {
      display: block;
      width: 100%;
      // background: #000;
      margin-top: 4vw;
    }

    .other {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vw;

      .name {
        font-size: 3.4vw;
        color: #666666;
        margin: 2.4vw 0 6.4vw;
      }

      .download {
        width: 32vw;
        height: 8.8vw;
        background: #bc1724;
        opacity: 1;
        border-radius: 0.2vw;
        text-align: center;
        line-height: 8.8vw;
        color: #ffffff;
        font-size: 3.4vw;
        cursor: pointer;
      }
    }
  }
}
</style>