玩玩消息组件

src/icons/alicdn/iconfont.css

@@ -1,68 +1,68 @@
 @font-face {
-    font-family: 'sfont'; /* Project id 2570680 */
-    src: url('./font_2570680.woff2') format('woff2'), url('./font_2570680.woff') format('woff'), url('./font_2570680.ttf') format('truetype');
+  font-family: 'sfont'; /* Project id 2570680 */
+  src: url('./font_2570680.woff2') format('woff2'), url('./font_2570680.woff') format('woff'), url('./font_2570680.ttf') format('truetype');
 }
 
 .sfont {
-    font-family: 'sfont' !important;
-    font-size: 22px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-family: 'sfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .system-zuixiaohua:before {
-    content: '\e66a';
+  content: '\e66a';
 }
 
 .system-yonghu:before {
-    content: '\e603';
+  content: '\e603';
 }
 
 .system-jindutiaoshouyidaozhang:before {
-    content: '\e63c';
+  content: '\e63c';
 }
 
 .system-xiaoxi:before {
-    content: '\e65b';
+  content: '\e65b';
 }
 
 .system-shuliang_mianxing:before {
-    content: '\e61c';
+  content: '\e61c';
 }
 
 .system-yanjing:before {
-    content: '\e67c';
+  content: '\e67c';
 }
 
 .system-yanjing-guan:before {
-    content: '\e6fa';
+  content: '\e6fa';
 }
 
 .system-xingmingyonghumingnicheng:before {
-    content: '\e623';
+  content: '\e623';
 }
 
 .system-mima:before {
-    content: '\e654';
+  content: '\e654';
 }
 
 .system-shezhi:before {
-    content: '\e696';
+  content: '\e696';
 }
 
 .system-github:before {
-    content: '\e811';
+  content: '\e811';
 }
 
 .system-quanping:before {
-    content: '\e768';
+  content: '\e768';
 }
 
 .system-wenzi:before {
-    content: '\e735';
+  content: '\e735';
 }
 
 .system-quanping1:before {
-    content: '\e680';
+  content: '\e680';
 }

src/layout/Header/functionList/message.vue

@@ -0,0 +1,168 @@
+<template>
+  <div title="消息" @click="showMessageLayer">
+    <el-badge :value="122" :max="99" type="danger">
+      <i class="sfont el-icon-message"></i>
+    </el-badge>
+  </div>
+  <div v-if="messageLayerVisible" class="message-layer">
+    <div style="position: absolute; top: 8px; left: 520px"><el-button circle type="info" plain icon="el-icon-close" @click="messageLayerVisible = false"></el-button></div>
+    <div class="sender">
+      <div v-for="(itm, index) in senders" :key="index" :style="activated(itm.sender)" @click="handleClickSender(itm)">
+        <el-badge :value="itm.count" :max="99" type="danger" :hidden="itm.count === 0">
+          <div class="sender-info">{{ itm.deptName }}-{{ itm.name }}</div>
+        </el-badge>
+      </div>
+    </div>
+    <div class="content">
+      <p>{{ currentSender.deptName }} - {{ currentSender.name }}</p>
+      <div v-for="(itm, index) in contents" :key="index">
+        <div class="content-title-box">
+          <div class="content-title">{{ itm.title }}</div>
+          <div class="content-time">{{ itm.date }}</div>
+        </div>
+        <div class="content-box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ itm.content }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'message',
+  setup() {
+    const messageLayerVisible = ref(false)
+    const currentSender = ref({})
+    const activated = (sender) => {
+      return {
+        background: currentSender.value.sender === sender ? '#0b85ff' : '',
+        color: currentSender.value.sender === sender ? 'white' : '',
+        fontWeight: currentSender.value.sender === sender ? 'bold' : '',
+      }
+    }
+    const senders = ref([
+      { deptName: '普外科', name: '张三', sender: '01897', count: 12 },
+      { deptName: '普外科', name: '李四', sender: '32322', count: 0 },
+      { deptName: '很长的科室名字', name: '喝水塞牙', sender: '02010', count: 100 },
+    ])
+    const contents = ref([
+      {
+        title: '标题一',
+        content:
+          '内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一',
+        date: '2022-03-08 14:23:12',
+      },
+      {
+        title: '标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二',
+        content: '内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二',
+        date: '2022-03-08 14:43:06',
+      },
+      { title: '标题三', content: '内容三', date: '2022-03-08 15:13:02' },
+    ])
+    const showMessageLayer = () => {
+      messageLayerVisible.value = !messageLayerVisible.value
+    }
+
+    const handleClickSender = (sender) => {
+      currentSender.value = sender
+    }
+
+    return {
+      senders,
+      currentSender,
+      contents,
+      messageLayerVisible,
+      activated,
+      showMessageLayer,
+      handleClickSender,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+i {
+  font-size: 18px !important;
+  cursor: pointer;
+  font-size: 18px;
+  &:focus {
+    outline: none;
+  }
+}
+.message-layer {
+  display: flex;
+  position: absolute;
+  top: 60px;
+  right: 100px;
+  width: 560px;
+  height: 460px;
+  border: 1px solid gray;
+  box-shadow: 2px 3px 10px 1px gray;
+  background: white;
+  z-index: 1000;
+  .sender {
+    width: 160px;
+    border-right: 1px solid lightgray;
+    > div {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 8px;
+      margin: 8px;
+      border: 1px solid lightgray;
+      &:hover {
+        cursor: pointer;
+        background: #409eff;
+        color: white;
+        font-weight: bold;
+      }
+    }
+  }
+  .content {
+    width: 400px;
+    padding: 8px;
+    > p {
+      margin-top: 8px;
+      font-size: 15px;
+      font-weight: bold;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    > div {
+      margin-bottom: 16px;
+      border-radius: 4px;
+      border: 2px solid rgb(31, 177, 31);
+    }
+  }
+}
+.sender-info {
+  width: 106px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.content-title-box {
+  display: flex;
+  height: 26px;
+  line-height: 26px;
+  background: rgba(198, 231, 148, 0.452);
+  padding: 0 4px;
+  font-weight: bold;
+  border-bottom: 1px dashed lightgray;
+}
+.content-title {
+  width: 260px;
+  padding-right: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.content-time {
+  width: 130px;
+}
+.content-box {
+  background: rgba(198, 231, 148, 0.452);
+  padding: 4px;
+}
+</style>

src/layout/Header/index.vue

@@ -5,19 +5,22 @@
       <div class="menu-icon" @click="opendStateChange">
         <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
       </div>
-      <Breadcrumb/>
+      <Breadcrumb />
     </div>
     <div class="right-box">
       <!-- 快捷功能按钮 -->
       <div class="function-list">
+        <!-- <div class="function-list-item hidden-sm-and-down" style="margin-right: 10px">
+          <Message />
+        </div> -->
         <div class="function-list-item hidden-sm-and-down">
-          <Full-screen/>
+          <Full-screen />
         </div>
         <div class="function-list-item">
-          <SizeChange/>
+          <SizeChange />
         </div>
         <div class="function-list-item hidden-sm-and-down">
-          <Theme/>
+          <Theme />
         </div>
       </div>
       <!-- 用户信息 -->
@@ -35,14 +38,15 @@
           </template>
         </el-dropdown>
       </div>
-      <password-layer v-if="layer.show" :layer="layer"/>
+      <password-layer v-if="layer.show" :layer="layer" />
     </div>
   </header>
 </template>
 
 <script>
-import {computed, defineComponent, reactive} from 'vue'
-import {useStore} from 'vuex'
+import { computed, defineComponent, reactive } from 'vue'
+import { useStore } from 'vuex'
+// import Message from './functionList/message.vue'
 import FullScreen from './functionList/fullscreen.vue'
 import SizeChange from './functionList/sizeChange.vue'
 import Theme from './functionList/theme.vue'
@@ -51,6 +55,7 @@ import PasswordLayer from './passwordLayer.vue'
 
 export default defineComponent({
   components: {
+    // Message,
     FullScreen,
     Breadcrumb,
     SizeChange,