0828xx消息提示

src/layouts/page/index.vue

@@ -1,6 +1,7 @@
 <template>
   <RouterView>
     <template #default="{ Component, route }">
+      <div id="tips-container" class="tips-container"></div>
       <transition
         :name="
           getTransitionName({
@@ -67,3 +68,9 @@
     },
   });
 </script>
+<style lang="less" scoped>
+.tips-container{
+  position: absolute;
+  z-index: 9999;
+}
+</style>

src/main.ts

@@ -4,6 +4,7 @@ import 'virtual:windi.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 import App from './App.vue';
+import Tips from '/@/views/tips/index.vue';
 import { createApp } from 'vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
 import { setupErrorHandle } from '/@/logics/error-handle';
@@ -58,6 +59,10 @@ async function bootstrap() {
   await router.isReady();
 
   app.mount('#app', true);
+
+  const tips = createApp(Tips)
+
+  tips.mount('#tips-container')
 }
 
 void bootstrap();

src/views/tips/index.vue

@@ -1,11 +1,41 @@
 <template>
     <div class="tips">
         <!-- 顶部面板 -->
-        <div class="top-panel">
+        <div class="top-panel" v-if="ifShowTop">
             <!-- 顶部导航菜单 -->
             <div class="top-navs">
-                <div class="btns" v-for="(item, index) in navBtns">{{ item.name }}</div>
+                <div class="btns">
+                    <div class="btn" :class="{ 'clicked': item.code === currentBtn.code }" v-for="(item, index) in navBtns"
+                        :key="index" @click="handleBtnClick(item)">{{ item.name }}</div>
+                </div>
+                <div class="close-btn" @click="ifShowTop = false"></div>
             </div>
+            <!-- 下方列表 -->
+            <div class="tips-list">
+                <!-- 消息列表 -->
+                <div class="tips-item" v-if="currentBtn.code !== 'todo'">
+                    <div class="msg-list list" v-for="(item, index) in msgData" :key="index">
+                        <div class="list-header">
+                            <div class="msg-icon"></div>
+                            <div class="title"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 待处理 -->
+                <div class="tips-item" v-else>
+                    <div class="todo-list list" v-for="(item, index) in todoData" :key="index">
+                        <div class="list-header">
+                            <div class="title"></div>
+                            <div class="more-btn"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 底部图标 -->
+        <div class="bottom-panel" @click="ifShowTop = !ifShowTop">
+            <div class="icon"></div>
+            <div class="msg-num">{{ totalTipsNum }}</div>
         </div>
     </div>
 </template>
@@ -18,16 +48,38 @@ export default defineComponent({
     setup() {
         const navBtns = reactive([
             {
-                name:"待办信息",
-                code:"todo"
+                name: "待办信息",
+                code: "todo"
             },
             {
-                name:"通知消息",
-                code:"message"
+                name: "通知消息",
+                code: "message"
             }
         ])
+        const currentBtn = reactive({
+            name: "待办信息",
+            code: "todo"
+        })
+        const ifShowTop = ref(false)
+        const handleBtnClick = (item) => {
+            currentBtn.code = item.code
+            currentBtn.name = item.name
+        }
+        const todoData = reactive([1,2,3])
+        const msgData = reactive([1,2,3,4,5,6])
+        const totalTipsNum = computed(() => {
+            let totalNum = todoData.length + msgData.length
+            return totalNum <= 10 ? totalNum === 0 ? '' : totalNum : `10+`
+        })
         return {
-            ...toRefs(navBtns)
+            navBtns,
+            currentBtn,
+            ifShowTop,
+            todoData,
+            msgData,
+            totalTipsNum,
+            //func
+            handleBtnClick
         };
     },
 });
@@ -35,37 +87,133 @@ export default defineComponent({
 <style lang="less" scoped>
 .tips {
     position: fixed;
-    right: 16px;
+    right: 46px;
     bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
 
     .top-panel {
+        margin-bottom: 24px;
         width: 430px;
         height: 820px;
-        padding: 0 16px;
+        padding: 0 16px 20px;
+        background: #FFFFFF;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+        border-radius: 6px;
 
         .top-navs {
             width: 100%;
             height: 50px;
             border-bottom: 1px solid #DEDEDE;
             display: flex;
+            justify-content: space-between;
+            align-items: center;
 
             .btns {
-                margin-right: 32px;
-                width: 100px;
-                height: 22px;
-                font-family: Source Han Sans CN;
-                font-size: 16px;
-                font-weight: 500;
-                line-height: 22px;
-                color: #333333;
-                user-select: none;
+                display: flex;
+
+                .btn {
+                    margin-right: 32px;
+                    width: 100px;
+                    height: 50px;
+                    font-family: Source Han Sans CN;
+                    font-size: 16px;
+                    font-weight: 500;
+                    line-height: 50px;
+                    color: #333333;
+                    user-select: none;
+                    text-align: center;
+
+                    &:hover {
+                        cursor: pointer;
+                        color: #0671DD;
+                        border-bottom: 2px solid #0671DD;
+                    }
+                }
 
-                &:hover{
-                    cursor: pointer;
-                    color:#0671DD;
+                .clicked {
+                    color: #0671DD;
                     border-bottom: 2px solid #0671DD;
                 }
             }
+
+            .close-btn {
+                width: 20px;
+                height: 20px;
+                margin-right: 10px;
+                user-select: none;
+                cursor: pointer;
+                border-radius: 50%;
+                text-align: center;
+                line-height: 20px;
+                background: url('/@/assets/images/close.png') no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .tips-list {
+            padding-top: 18px;
+            width: 100%;
+            height: calc(100% - 50px);
+            overflow: auto;
+            &::-webkit-scrollbar{
+                width: 3px;
+            }
+            &::-webkit-scrollbar-thumb{
+                border-radius: 2px;
+                background: #ccd5df;
+            }
+            &::-webkit-scrollbar-track{
+                display: none;
+            }
+
+            .tips-item {
+                .list {
+                    width: 100%;
+                    height: 130px;
+                    border-radius: 6px;
+                    background: linear-gradient(252deg, rgba(238, 247, 255, 0.76) 0%, #EDEDED 100%);
+                    margin-bottom: 10px;
+
+                    .list-header{
+                        width: 100%;
+                        height: 40px;
+                        border-bottom: 1px solid #dedede;
+                    }
+                }
+            }
+        }
+    }
+
+    .bottom-panel {
+        position: relative;
+        width: 60px;
+        height: 60px;
+        border-radius: 6px;
+        background: #FFFFFF;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+
+        .icon {
+            position: absolute;
+            left: 14px;
+            top: 15px;
+            width: 33px;
+            height: 31px;
+            background: url('/@/assets/images/tips.png') no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .msg-num {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            color: #F8252C;
+            font-family: Source Han Sans CN;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 18.72px;
         }
     }
 }