|
|
@@ -0,0 +1,62 @@
|
|
|
+<template>
|
|
|
+ <span id="notice">
|
|
|
+ <el-popover placement="bottom" title="" width="400" trigger="hover" ref="notice">
|
|
|
+ <el-row class="popover-content">
|
|
|
+ <el-col :span="24" style="text-align:center">您共有{{ total }}项待办事项</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="popover-content" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="20">{{ item.name }} {{ item.content }}</el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-link type="primary" @click="handleDelete(item.id)">[不再提示]</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-popover>
|
|
|
+ <el-badge :value="total" style="margin-right:1rem;" v-popover:notice>
|
|
|
+ <span class="el-icon-message info_icon" style="zoom:1.3"></span>
|
|
|
+ </el-badge>
|
|
|
+ </span>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'notice',
|
|
|
+ props: {
|
|
|
+ list: null,
|
|
|
+ total: { type: Number, default: 0 },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({}),
|
|
|
+ created() {},
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleDelete(id) {
|
|
|
+ this.$emit('delete', id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.popover-content {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ .el-col {
|
|
|
+ border-bottom: 1px dashed #cccccc;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ height: 1.25rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-popper {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 0px;
|
|
|
+ height: 100px;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+/deep/.popoverCon {
|
|
|
+ width: 400px;
|
|
|
+ height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+</style>
|
