GCLS_Page_TC/src/views/CalligraphyMaster/fontFamilyList.vue

<template>
  <div class="fontFamilyList">
    <Header />
    <div class="main">
      <div class="seek">
        <input type="text" />
        <div>搜索</div>
      </div>
      <div class="list">
        <div v-for="(item, index) in data.list" :key="index">
          <div class="top">国际中文教育</div>
          <div class="bottom">
            <span>{{ item.fontFamily }}</span>
            <img
              v-if="item.collect"
              src="../../assets/teacherdev/font-collect-sele.png"
              alt=""
            />
            <img v-else src="../../assets/teacherdev/font-collect.png" alt="" />
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination
          background
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="prev, pager, next"
          :current-page="page"
          :page-size="pageSize"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header },
  props: {},
  data() {
    //这里存放数据
    return {
      page: 1,
      pageSize: 20,
      data: {
        list: [
          {
            fontFamily: "方正柳公权楷书",
            collect: true,
          },
          {
            fontFamily: "方正柳公权楷书",
            collect: false,
          },
          {
            fontFamily: "方正柳公权楷书",
            collect: true,
          },
          {
            fontFamily: "方正柳公权楷书",
            collect: false,
          },
          {
            fontFamily: "方正柳公权楷书",
            collect: true,
          },
          {
            fontFamily: "方正柳公权楷书",
            collect: false,
          },
        ],
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.fontFamilyList {
  .main {
    height: calc(100vh - 64px);
    background: #f2f2f2;
    padding-top: 40px;
    .seek {
      display: flex;
      justify-content: center;
      input {
        width: 468px;
        height: 51px;
        border: 1px solid #669aff;
        outline: none;
      }
      div {
        width: 96px;
        height: 51px;
        background: #669aff;
        border-width: 1px 1px 1px 0px;
        border-style: solid;
        border-color: #669aff;
        font-weight: 400;
        font-size: 16px;
        line-height: 51px;
        color: #ffffff;
        text-align: center;
      }
    }
    .list {
      width: 1200px;
      margin: 20px auto;
      display: flex;
      flex-wrap: wrap;
      > div {
        margin: 20px 25px;
        width: 248px;
        border-radius: 8px;
        overflow: hidden;
        .top {
          height: 87px;
          font-weight: 400;
          font-size: 36px;
          line-height: 87px;
          text-align: center;
          color: #ffffff;

          background: #7881a3;
          border-radius: 8px 8px 0px 0px;
        }
        .bottom {
          background: #ffffff;
          height: 40px;
          padding: 0 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 400;
          font-size: 16px;
          line-height: 40px;
          color: #878787;
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
    .page {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }
  }
}
</style>