<template>
  <Banner />
  <div class="m-content">
    <el-card>
      <el-timeline>
        <el-timeline-item
          v-for="article in articleList"
          :key="article._id"
          :timestamp="article.createTime"
          type="primary"
        >
          <router-link :to="'/articles/' + article._id">
            {{ article.title }}
          </router-link>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import Banner from '@/components/Banner.vue'
import { ref, onMounted } from 'vue'
import { getArticleList } from '@/api/article.js'

const articleList = ref([])

onMounted(async () => {
  const { data } = await getArticleList()
  articleList.value = data.articleList
  // console.log(articleList.value)
})
</script>

<style lang="scss" scoped>
.el-timeline {
  padding: 20px 40px;
  font-size: 17px;
  .el-timeline-item {
    margin-top: 10px;
  }
}
</style>
