lab-ops-ui-web/src/page/index/top/top-notice.vue

<template>
    <div slot="reference" @click="clickNotice">
      <el-badge :value="total" class="item">
        <i class="el-icon-bell"></i>
      </el-badge>
    </div>
</template>

<script>
import {messTotal} from '@/api/desk/message'
export default {
  name: "top-notice",
  data () {
    return {
      activeName: 'first',
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status'
        },
      },
      total:0
    }
  },
  created () {
    this.getTotal()
  },
  methods: {
    clickNotice(){
      this.$router.push({
        path:'/desk/message'
      })
    },
    getTotal(){
      messTotal().then(res =>{
        this.total = res.data.data
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>