{"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/views/common/fragment/Notice.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/views/common/fragment/Notice.vue","mtime":1621997721946},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQovKiDmtojmga/pgJrnn6Vwb3AgKi8NCi5lbGUtbm90aWNlLXBvcCB7DQogIG1hcmdpbjogMCAhaW1wb3J0YW50Ow0KICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7DQp9DQoNCi5lbGUtbm90aWNlLWdyb3VwIHsNCiAgdmVydGljYWwtYWxpZ246IHRvcCAhaW1wb3J0YW50Ow0KICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQp9DQoNCi5lbGUtbm90aWNlLWdyb3VwIC5lbC1iYWRnZSB7DQogIGxpbmUtaGVpZ2h0OiBub3JtYWw7DQp9DQoNCi8qIHRhYiAqLw0KLmVsZS1ub3RpY2UtcG9wIC5lbC10YWJzX19uYXYtc2Nyb2xsIHsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KfQ0KDQouZWxlLW5vdGljZS1wb3AgLmVsLXRhYnNfX25hdiB7DQogIGZsb2F0OiBub25lOw0KICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQp9DQoNCi5lbGUtbm90aWNlLXBvcCAuZWwtdGFic19faXRlbSB7DQogIHBhZGRpbmc6IDAgMjBweDsNCn0NCg0KLyog5YiX6KGoICovDQouZWxlLW5vdGljZS1saXN0IHsNCiAgcGFkZGluZy10b3A6IDhweDsNCiAgbWF4LWhlaWdodDogMzYwcHg7DQogIG92ZXJmbG93OiBhdXRvOw0KfQ0KDQouZWxlLW5vdGljZS1pdGVtIC5lbGUtbm90aWNlLWl0ZW0td3JhcHBlciB7DQogIHBhZGRpbmc6IDEycHggMTVweDsNCiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAuMnM7DQogIGN1cnNvcjogcG9pbnRlcjsNCn0NCg0KLmVsZS1ub3RpY2UtaXRlbSAuZWxlLW5vdGljZS1pdGVtLXdyYXBwZXI6aG92ZXIgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiBoc2xhKDAsIDAlLCA2MCUsIC4wNSk7DQp9DQoNCi5lbGUtbm90aWNlLWl0ZW0gLmVsZS10ZXh0LXNlY29uZGFyeSB7DQogIG1hcmdpbi10b3A6IDVweDsNCiAgZm9udC1zaXplOiAxM3B4Ow0KfQ0KDQouZWxlLW5vdGljZS1pdGVtIC5lbGUtY2VsbC1kZXNjIHsNCiAgbWFyZ2luLXRvcDogM3B4ICFpbXBvcnRhbnQ7DQogIGZvbnQtc2l6ZTogMTJweCAhaW1wb3J0YW50Ow0KfQ0KDQouZWxlLW5vdGljZS1pdGVtLWljb24gew0KICB3aWR0aDogMzJweDsNCiAgaGVpZ2h0OiAzMnB4Ow0KICBsaW5lLWhlaWdodDogMzJweCAhaW1wb3J0YW50Ow0KICBjb2xvcjogI0ZGRjsNCiAgZm9udC1zaXplOiAxNnB4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjNjBCMkZDOw0KICBib3JkZXItcmFkaXVzOiA1MCU7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCn0NCg0KLmVsZS1ub3RpY2UtaXRlbS1pY29uLmVsLWljb24tcy1jaGVjayB7DQogIGJhY2tncm91bmQtY29sb3I6ICNGNTY4NkY7DQp9DQoNCi5lbGUtbm90aWNlLWl0ZW0taWNvbi5lbC1pY29uLXZpZGVvLWNhbWVyYSB7DQogIGJhY2tncm91bmQtY29sb3I6ICM3Q0Q3MzQ7DQp9DQoNCi5lbGUtbm90aWNlLWl0ZW0taWNvbi5lbC1pY29uLXMtY2xhaW0gew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjRkFBRDE0Ow0KfQ0KDQouZWxlLW5vdGljZS1pdGVtLWljb24uZWwtaWNvbi1tZXNzYWdlLXNvbGlkIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogIzJCQ0FDRDsNCn0NCg0KLyog5pON5L2c5oyJ6ZKuICovDQouZWxlLW5vdGljZS1hY3Rpb25zID4gLmVsZS1jZWxsLWNvbnRlbnQgew0KICBsaW5lLWhlaWdodDogNDJweDsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KICBjdXJzb3I6IHBvaW50ZXI7DQp9DQoNCi5lbGUtbm90aWNlLWFjdGlvbnMgPiAuZWxlLWNlbGwtY29udGVudDpob3ZlciB7DQogIGJhY2tncm91bmQtY29sb3I6IGhzbGEoMCwgMCUsIDYwJSwgLjA1KTsNCn0NCg0KLyog56m66KeG5Zu+ICovDQouZWxlLW5vdGljZS1wb3AgLmVsZS1lbXB0eSB7DQogIHBhZGRpbmc6IDEwMHB4IDA7DQp9DQo="},{"version":3,"sources":["Notice.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0JA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"Notice.vue","sourceRoot":"src/views/common/fragment","sourcesContent":["<!-- 顶栏消息图标 -->\r\n<template>\r\n  <el-popover width=\"300\" v-model=\"show\" trigger=\"click\" popper-class=\"ele-notice-pop\" transition=\"el-zoom-in-top\"\r\n              class=\"ele-notice-group\">\r\n    <div class=\"ele-notice-group\" slot=\"reference\">\r\n      <el-badge :value=\"allNum\" :hidden=\"!allNum\"><i class=\"el-icon-bell\"></i></el-badge>\r\n    </div>\r\n    <el-tabs v-if=\"show\" v-model=\"active\" class=\"user-info-tabs\">\r\n      <el-tab-pane :label=\"noticeLabel\" name=\"notice\">\r\n        <div class=\"ele-notice-list ele-scrollbar-mini\">\r\n          <div v-for=\"(item,index) in notice\" :key=\"index\" class=\"ele-notice-item\">\r\n            <div class=\"ele-cell ele-notice-item-wrapper\">\r\n              <i :class=\"[item.icon,'ele-notice-item-icon']\"></i>\r\n              <div class=\"ele-cell-content\">\r\n                <div class=\"ele-elip\">{{ item.title }}</div>\r\n                <div class=\"ele-text-secondary ele-elip\">{{ item.time }}</div>\r\n              </div>\r\n            </div>\r\n            <el-divider/>\r\n          </div>\r\n        </div>\r\n        <div v-if=\"notice.length\" class=\"ele-cell ele-notice-actions\">\r\n          <div @click=\"clear(1)\" class=\"ele-cell-content\">清空通知</div>\r\n          <el-divider direction=\"vertical\" class=\"line-color-light\"/>\r\n          <div @click=\"more(1)\" class=\"ele-cell-content\">查看更多</div>\r\n        </div>\r\n        <ele-empty v-if=\"!notice.length\" text=\"你已查看所有通知\"/>\r\n      </el-tab-pane>\r\n      <el-tab-pane :label=\"messageLabel\" name=\"message\">\r\n        <div class=\"ele-notice-list ele-scrollbar-mini\">\r\n          <div v-for=\"(item,index) in message\" :key=\"index\" class=\"ele-notice-item\">\r\n            <div class=\"ele-cell ele-notice-item-wrapper ele-cell-align-top\">\r\n              <el-avatar :src=\"item.avatar\" size=\"medium\"/>\r\n              <div class=\"ele-cell-content\">\r\n                <div class=\"ele-elip\">{{ item.title }}</div>\r\n                <div class=\"ele-text-secondary ele-elip\">{{ item.content }}</div>\r\n                <div class=\"ele-cell-desc ele-elip\">{{ item.time }}</div>\r\n              </div>\r\n            </div>\r\n            <el-divider/>\r\n          </div>\r\n        </div>\r\n        <div v-if=\"message.length\" class=\"ele-cell ele-notice-actions\">\r\n          <div @click=\"clear(2)\" class=\"ele-cell-content\">清空消息</div>\r\n          <el-divider direction=\"vertical\" class=\"line-color-light\"/>\r\n          <div @click=\"more(2)\" class=\"ele-cell-content\">查看更多</div>\r\n        </div>\r\n        <ele-empty v-if=\"!message.length\" text=\"你已读完所有私信\"/>\r\n      </el-tab-pane>\r\n      <el-tab-pane :label=\"todoLabel\" name=\"todo\">\r\n        <div class=\"ele-notice-list ele-scrollbar-mini\">\r\n          <div v-for=\"(item,index) in todo\" :key=\"index\" class=\"ele-notice-item\">\r\n            <div class=\"ele-notice-item-wrapper\">\r\n              <div class=\"ele-cell ele-cell-align-top\">\r\n                <div class=\"ele-cell-content ele-elip\">{{ item.title }}</div>\r\n                <el-tag size=\"mini\" :type=\"['info','danger',''][item.state]\">\r\n                  {{ ['未开始', '即将到期', '进行中'][item.state] }}\r\n                </el-tag>\r\n              </div>\r\n              <div class=\"ele-text-secondary ele-elip\">{{ item.desc }}</div>\r\n            </div>\r\n            <el-divider/>\r\n          </div>\r\n        </div>\r\n        <div v-if=\"todo.length\" class=\"ele-cell ele-notice-actions\">\r\n          <div @click=\"clear(3)\" class=\"ele-cell-content\">清空待办</div>\r\n          <el-divider direction=\"vertical\" class=\"line-color-light\"/>\r\n          <div @click=\"more(3)\" class=\"ele-cell-content\">查看更多</div>\r\n        </div>\r\n        <ele-empty v-if=\"!todo.length\" text=\"你已完成所有任务\"/>\r\n      </el-tab-pane>\r\n    </el-tabs>\r\n  </el-popover>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"EleNotice\",\r\n  data() {\r\n    return {\r\n      show: false,\r\n      active: 'notice',\r\n      notice: [\r\n        {icon: 'el-icon-s-comment', title: '你收到了一封14份新周报', time: '2020-07-27 18:30:18'},\r\n        {icon: 'el-icon-s-check', title: '许经理同意了你的请假申请', time: '2020-07-27 09:08:36'},\r\n        {icon: 'el-icon-video-camera', title: '陈总邀请你参加视频会议', time: '2020-07-26 18:30:01'},\r\n        {icon: 'el-icon-s-claim', title: '你推荐的刘诗雨已通过第三轮面试', time: '2020-07-25 16:38:46'},\r\n        {icon: 'el-icon-message-solid', title: '你的6月加班奖金已发放', time: '2020-07-25 11:03:31'}\r\n      ],\r\n      message: [\r\n        {\r\n          avatar: require('@/assets/logo.png'),\r\n          title: 'SunSmile 评论了你的日志', content: '写的不错, 以后多多向你学习~', time: '2020-07-27 18:30:18'\r\n        },\r\n        {\r\n          avatar: require('@/assets/logo.png'),\r\n          title: '刘诗雨 点赞了你的日志', content: '写的不错, 以后多多向你学习~', time: '2020-07-27 09:08:36'\r\n        },\r\n        {\r\n          avatar: require('@/assets/logo.png'),\r\n          title: '酷酷的大叔 评论了你的周报', content: '写的不错, 以后多多向你学习~', time: '2020-07-26 18:30:01'\r\n        },\r\n        {\r\n          avatar: require('@/assets/logo.png'),\r\n          title: 'Jasmine 点赞了你的周报', content: '写的不错, 以后多多向你学习~', time: '2020-07-25 11:03:31'\r\n        }\r\n      ],\r\n      todo: [\r\n        {state: 0, title: '刘诗雨的请假审批', desc: '刘诗雨在 07-27 18:30 提交的请假申请'},\r\n        {state: 1, title: '第三方代码紧急变更', desc: '需要在 2020-07-27 之前完成'},\r\n        {state: 2, title: '信息安全考试', desc: '需要在 2020-07-26 18:30 前完成'},\r\n        {state: 2, title: 'Laravel发布新版本', desc: '需要在 2020-07-25 11:03 前完成'}\r\n      ]\r\n    }\r\n  },\r\n  computed: {\r\n    /* 通知标题 */\r\n    noticeLabel() {\r\n      if (this.notice.length) return `通知(${this.notice.length})`;\r\n      else return '通知';\r\n    },\r\n    /* 私信标题 */\r\n    messageLabel() {\r\n      if (this.message.length) return `私信(${this.message.length})`;\r\n      else return '私信';\r\n    },\r\n    /* 待办标题 */\r\n    todoLabel() {\r\n      if (this.todo.length) return `待办(${this.todo.length})`;\r\n      else return '待办';\r\n    },\r\n    /* 所有消息数量 */\r\n    allNum() {\r\n      return this.notice.length + this.message.length + this.todo.length;\r\n    }\r\n  },\r\n  methods: {\r\n    /* 清空消息 */\r\n    clear(type) {\r\n      if (type === 1) this.notice = [];\r\n      else if (type === 2) this.message = [];\r\n      else if (type === 3) this.todo = [];\r\n    },\r\n    /* 查看更多 */\r\n    more(type) {\r\n      console.log(type);\r\n      if (this.$route.path !== '/user/message') this.$router.push('/user/message');\r\n      this.show = false;\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n/* 消息通知pop */\r\n.ele-notice-pop {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.ele-notice-group {\r\n  vertical-align: top !important;\r\n  display: inline-block;\r\n}\r\n\r\n.ele-notice-group .el-badge {\r\n  line-height: normal;\r\n}\r\n\r\n/* tab */\r\n.ele-notice-pop .el-tabs__nav-scroll {\r\n  text-align: center;\r\n}\r\n\r\n.ele-notice-pop .el-tabs__nav {\r\n  float: none;\r\n  display: inline-block;\r\n}\r\n\r\n.ele-notice-pop .el-tabs__item {\r\n  padding: 0 20px;\r\n}\r\n\r\n/* 列表 */\r\n.ele-notice-list {\r\n  padding-top: 8px;\r\n  max-height: 360px;\r\n  overflow: auto;\r\n}\r\n\r\n.ele-notice-item .ele-notice-item-wrapper {\r\n  padding: 12px 15px;\r\n  transition: background-color .2s;\r\n  cursor: pointer;\r\n}\r\n\r\n.ele-notice-item .ele-notice-item-wrapper:hover {\r\n  background-color: hsla(0, 0%, 60%, .05);\r\n}\r\n\r\n.ele-notice-item .ele-text-secondary {\r\n  margin-top: 5px;\r\n  font-size: 13px;\r\n}\r\n\r\n.ele-notice-item .ele-cell-desc {\r\n  margin-top: 3px !important;\r\n  font-size: 12px !important;\r\n}\r\n\r\n.ele-notice-item-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  line-height: 32px !important;\r\n  color: #FFF;\r\n  font-size: 16px;\r\n  background-color: #60B2FC;\r\n  border-radius: 50%;\r\n  text-align: center;\r\n}\r\n\r\n.ele-notice-item-icon.el-icon-s-check {\r\n  background-color: #F5686F;\r\n}\r\n\r\n.ele-notice-item-icon.el-icon-video-camera {\r\n  background-color: #7CD734;\r\n}\r\n\r\n.ele-notice-item-icon.el-icon-s-claim {\r\n  background-color: #FAAD14;\r\n}\r\n\r\n.ele-notice-item-icon.el-icon-message-solid {\r\n  background-color: #2BCACD;\r\n}\r\n\r\n/* 操作按钮 */\r\n.ele-notice-actions > .ele-cell-content {\r\n  line-height: 42px;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.ele-notice-actions > .ele-cell-content:hover {\r\n  background-color: hsla(0, 0%, 60%, .05);\r\n}\r\n\r\n/* 空视图 */\r\n.ele-notice-pop .ele-empty {\r\n  padding: 100px 0;\r\n}\r\n</style>"]}]}