AdminHome.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div>
  3. <div class="card" style="padding: 15px">
  4. 您好,{{ user?.name }}!
  5. 今天又是上班的一天
  6. 欢迎使用管理员后台
  7. </div>
  8. <div style="display: flex; margin: 10px 0">
  9. <div style="width: 50%;" class="card">
  10. <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">公告列表</div>
  11. <div >
  12. <el-timeline reverse slot="reference">
  13. <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time">
  14. <el-popover
  15. placement="right"
  16. width="200"
  17. trigger="hover"
  18. :content="item.content">
  19. <span slot="reference">{{ item.title }}</span>
  20. </el-popover>
  21. </el-timeline-item>
  22. </el-timeline>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. name: 'AdminHome',
  31. data() {
  32. return {
  33. user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  34. notices: []
  35. }
  36. },
  37. created() {
  38. this.$request.get('/notice/selectAll').then(res => {
  39. this.notices = res.data || []
  40. })
  41. }
  42. }
  43. </script>