SEEC-Portal-Front/pages/index.vue

<template>
  <div>
    <!--<el-menu-->
      <!--default-active="1"-->
      <!--class="el-menu-demo"-->
      <!--mode="horizontal"-->
      <!--active-text-color="#409eff">-->
      <!--<el-menu-item index="0"><image src="/image/seec_logo&#45;&#45;bw.png" class="nav__logo" /></el-menu-item>-->
      <!--<el-menu-item index="1"><a href="http://mooc.seecoder.cn" target="_self">软工一</a></el-menu-item>-->
      <!--<el-menu-item index="2"><a href="http://bok.seecoder.cn" target="_self">题库</a></el-menu-item>-->
      <!--<el-menu-item index="3"><a href="http://helper.seecoder.cn" target="_self">学习助手</a></el-menu-item>-->
    <!--</el-menu>-->

    <!--<img class="home-banner" src="/image/SEEC_banner.png"/>-->
    <!--<div class="hot-courses">-->
      <!--<h2 class="hot-courses__title">热门课程</h2>-->
      <!--<div class="hot-courses__list">-->
        <!--一波精品课程正在内测中，敬请期待！-->
      <!--</div>-->
    <!--</div>-->

    <img class="home-banner" src="/image/SEEC_banner3.png"/>
    <h1 class="title">热门课程</h1>
    <div class="course-list">
      <course-card
        v-for="(item,index) in courses"
        v-bind:key="index"
        :picture="item.picture"
        :title="item.title"
        :description="item.description"
        :url="item.url"
        :origin="item.origin"
      >
      </course-card>
    </div>

    <h1 class="title">推荐专栏</h1>
    <div class="course-list">
      <column-card
        v-for="(item,index) in columns"
        v-bind:key="index"
        :picture="item.picture"
        :title="item.title"
        :description="item.description"
        :url="item.url"
      >
      </column-card>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import CourseCard from '~/components/CourseCard'
import ColumnCard from '~/components/ColumnCard'
import { mapState } from 'vuex'

export default {
  components: {
    Logo,
    CourseCard,
    ColumnCard
  },
  data() {
    return {
      courses: [
        {
          title: '基于Java的面向对象编程范式',
          origin: '中国大学MOOC',
          picture: '/image/java.png',
          url: 'http://coder.seecoder.cn',
          description: '了解编程基本思想，养成编程基本习惯，理解面向对象思想'
        },
        {
          title: '软件工程与计算I',
          origin: '南京大学',
          picture: '/image/SE1.png',
          url: 'http://coder.seecoder.cn',
          description: '通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式'
        },
        {
          title: '软件工程与计算II',
          origin: '南京大学',
          picture: '/image/SE2.png',
          url: 'http://developer.seecoder.cn',
          description: '基于DevOps培养团队开发中小规模软件系统的能力'
        },
      ],
      columns: [
        {
          title: '深度学习入门',
          picture: '/image/deep_learning.png',
          url: 'http://developer.seecoder.cn',
          description: '掌握深度学习基础数学知识，理解深度学习有关算法和原理，了解和使用深度学习工具'
        },
        {
          title: 'JVM简要入门',
          picture: '/image/JVM.jpg',
          url: 'http://developer.seecoder.cn',
          description: '了解Java字节码,理解字节码在JVM的执行过程和面向对象编程语言的实现机制'
        },
        {
          title: '区块链底层开发入门',
          picture: '/image/block_chain.jpg',
          url: 'http://developer.seecoder.cn',
          description: '介绍区块链专业术语和工作原理，结合模拟器带你步步实现区块链交易、加密、共识等算法。'
        }

      ]
    }
  },
  mounted(){
    // this.$cookies.removeAll();
    // this.$store.commit('saveToken', null);
    // this.$store.commit('saveUser', {});

  }
}
</script>

<style lang="scss" scoped>
  @import '~/assets/css/home.scss';
</style>