GCLS_Page_ROOT/src/components/Personalcenter/Mytextbook.vue

<template>
  <!-- 我的教材 -->
  <div class="Mytextbook">
    <div class="bookList">
      <div v-for="(item, i) in bookList" :key="i">
        <img
          :src="
            require('../../assets/Personalcenter/image/img' +
              `${i + 1}` +
              '.png')
          "
          alt=""
        />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="paging">
      <el-pagination
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="1000"
        :page-size="10"
        @current-change="changecurrentPage"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      bookList: [
        {
          name: "Learn Chinese with Ease-Learn Chinese with ",
        },
        {
          name: "Learn Chinese",
        },
        {
          name: "Learn Chinese with Ease-Learn Chinese with ",
        },
        {
          name: "Learn Chinese ",
        },
        {
          name: "Learn Chinese with Ease-Learn Chinese with ",
        },
        {
          name: "Learn Chinese with Ease-Learn Chinese with ",
        },
        {
          name: "Learn Chinese",
        },
      ],
      currentPage: 1,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //   修改当前页
    changecurrentPage(val) {
      this.currentPage = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Mytextbook {
  .bookList {
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 144px;
      margin: 40px 0 0 40px;
      img {
        width: 100%;
        height: 192px;
        cursor: pointer;
      }
      > p {
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .paging {
    margin-top: 20px;
    margin-left: 25px;
  }
}
</style>