app-AgricultureSmart/vue/src/views/manager/Home.vue

<template>
  <div>
    <div class="card" style="padding: 15px">
      您好，{{ user?.name }}！欢迎使用本系统
    </div>


   <el-row>

    <el-col :span="8">
<!--      <div style="display: flex; margin: 10px 0">-->
<!--        <div style="width: 50%;" class="card">-->
<!--         -->
<!--        </div>-->
<!--      </div>-->
      <el-card>
        <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">功能列表</div>
        <div >
          <el-timeline  reverse slot="reference">
            <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time" color="red" icon='el-icon-s-tools
'>
              <el-popover
                  placement="right"
                  width="200"
                  trigger="hover"
                  :content="item.content">
                <span slot="reference">{{ item.title }}</span>
              </el-popover>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </el-col>
     <el-col :span="8">
       <div id="lunbo" style="margin: 5px">
        <el-image :src='imgUrls'></el-image>
       </div>
     </el-col>
<!--    <el-col :span="18"></el-col>-->
     <el-col :span="8">
       <el-card>
         店铺认证
         <i class="el-icon-s-check">
           <el-tag type="success">认证成功</el-tag>
         </i>
         <el-divider></el-divider>
         <el-row >
          <span>店铺功能</span>
         </el-row>

       </el-card>
     </el-col>

   </el-row>
  </div>
</template>

<script>


export default {
  name: 'Home',
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      notices: [],
      activities: [
          {
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        color: '#0bbd87'
      }, {
        size: 'large'
      }],
      imgUrls: require('@/assets/imgs/bg.jpg')
    }
  },
  created() {
    this.$request.get('/notice/selectAll').then(res => {
      this.notices = res.data || []
    })
  }
}
</script>

<style>
#lunbo{

}
</style>