eep_page/src/views/home/index.vue

<template>
  <div class="home">
    <div class="home-top">
      <el-button class="create" size="medium" @click="jump('/create_project')">
        教材创建 <i class="el-icon-plus"> </i>
      </el-button>
    </div>
    <div class="home-content">
      <div
        v-for="{ color, title, path, icon } in itemList"
        :key="title"
        class="item"
        :style="{ backgroundColor: color }"
        @click="jump(path)"
      >
        <span class="title">{{ title }}</span>
        <span class="icon" :style="{ backgroundColor: color }">
          <SvgIcon :icon-class="icon" size="36" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      itemList: [
        {
          color: '#667EE5',
          title: '教材管理',
          path: '/personal_workbench/project',
          icon: 'manage',
        },
        {
          color: '#F5B131',
          title: '教材制作',
          path: '/personal_workbench/edit_task',
          icon: 'make',
        },
        {
          color: '#E25E5C',
          title: '教材审核',
          path: '/personal_workbench/check_task',
          icon: 'audit',
        },
      ],
    };
  },
  methods: {
    jump(path) {
      this.$router.push({ path });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  background-color: #f1f1f1;

  &-top {
    display: flex;
    justify-content: flex-end;
    margin: 40px 20px 8%;

    .create {
      color: #f5f5f5;
      background-color: #46bc84;
    }
  }

  &-content {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: space-evenly;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 15%;
      min-width: 300px;
      aspect-ratio: 3 / 4;
      padding: 4% 0 2%;
      cursor: pointer;
      border-radius: 8px;

      .title {
        font-size: 36px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }

      .icon {
        width: 64px;
        height: 64px;
        overflow: hidden;
        line-height: 84px;
        text-align: center;
        filter: brightness(1.15) saturate(1.1);
        border-radius: 50%;
      }
    }
  }
}
</style>