tnbapp/src/views/home/Article.vue

<template>
  <div>
    <el-row id="movie-list">
      <el-col :md="18">
        <el-card :if="!video" :body-style="{ padding: '0px' }" class="card">
          <div slot="header" class="clearfix">
            <span>文章列表</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
            <article-card :video="video" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="showEmpty" class="not-result">
      <el-col :span="12" :offset="6">
        <img src="@/assets/img/icon/not-result.png">
        <div>没有文章数据</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ArticleCard from 'components/card/ArticleCard'
import {videoRecommend} from "@/api/video";

export default {
  name: 'Article',
  components: { ArticleCard },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      videoList: [],
      video: null,
      showEmpty: true
    }
  },
  created() {
    document.title = '文章'

    this.currentPage = 1
    videoRecommend(this.currentPage).then(res => {
      if (res.code === 0) {
        const resData = res.data
        this.videoList = resData.list
        this.video = resData.list[0]
      }
    })
    // console.log(this.$store.state.videos);
    // 当页面挂载时，页码变为1
    //this.$store.commit('updatePage', 1)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.$store.commit('updatePage', currentPage)
      this.$store.dispatch('getPageBean')
      // 回到顶部
      scrollTo(0, 0)
    }
  }
}
</script>

<style scoped>
#movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

.not-result {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.pagination {
  text-align: center;
  padding: 10px;
}

/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  #movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}
</style>