tnbapp/src/views/disk/FileText.vue

<template>
  <el-row>
    <el-row>
      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
            </div>
            <div class="text item">
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import {
  getImageList
} from '@/api/disk'
import {get} from "@/utils/request";

export default {
  name: 'FileText',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dataList: [],
      audioList: [],
      searchForm: {
        pageNumber: 1,
        fileType: 1004
      }
    }
  },
  created() {
    document.title = '我的文本'
    this.getData()
  },
  methods: {
    getData() {
      this.dataList = []
      getImageList(this.searchForm).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
          for (const item of this.dataList) {
            console.log(item)
          }
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    loadAll() {
      const item = this.dataList[0]
      get(item.url).then(resp => {
        console.log(resp)
      })
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 15px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.tit {
  font-weight: 700;
  font-size: 18px;

  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*行数*/
  -webkit-box-orient: vertical;
}

.num {
  position: relative;
  font-size: 15px;
  padding-top: 9px;
}

/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .tit {
    font-weight: 600;
    font-size: 12px;
    height: 32px;
  }
  .time {
    font-size: 10px;
    color: #999;
  }
  .num {
    font-size: 9px;
    padding-top: 3px;
  }
  .bottom {
    margin-top: 2px;
    line-height: 7px;
  }
  .coverImg {
    height: 120px !important;
  }
}

.coverImg {
  width: 100%;
  height: 175px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card {
  margin-bottom: 20px;
  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
}

/*.card:hover {
  !*鼠标放上之后元素变成1.06倍大小*!
  transform: scale(1.06);
}*/
.imgs {
  position: relative;
}
.play-icon {
  position: absolute;
  /*top: -15px;*/
  right: 2%;
  bottom: 5px;
  z-index: 7;
  width: 40px;
}
</style>