消息

src/router/index.js

@@ -106,6 +106,14 @@ const routes = [
                     title: '拉索宇宙'
                 }
             },
+            {
+                path: '/mineMessages',
+                name: 'mineMessages',
+                component: () => import('../views/user/Messages.vue'),
+                meta: {
+                    title: '消息中心'
+                }
+            },
             {
                 path: '/mine',
                 name: 'mine',

src/views/Mine.vue

@@ -52,6 +52,8 @@
                 <!-- <div class="self_introduction_bottom" :style="userInfo.intro === '' ? '' : 'margin-top: 6px'">
                     {{ userInfo.intro }}
                 </div> -->
+
+                <img src="@assets/ring.png" @click.stop="wait" class="ring" alt="" />
             </div>
             <!-- 未登录 -->
             <div class="not_logged" v-else @click="$router.push('/login')">
@@ -427,6 +429,7 @@ export default {
         border-radius: 8px;
         padding: 36px 0 20px;
         box-sizing: border-box;
+        position: relative;
         .self_introduction_top {
             position: relative;
             // margin-bottom: 6px;
@@ -485,6 +488,14 @@ export default {
                 }
             }
         }
+
+        .ring {
+            position: absolute;
+            top: 16px;
+            right: 0;
+            width: 32px;
+            height: 32px;
+        }
     }
     .self_introduction_bottom {
         font-size: 12px;

src/views/user/Messages.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="page">
+        <div class="message">
+            <div class="message-top">
+                <span>系统消息</span>
+                <span>2022-03-22 08:30:40</span>
+            </div>
+            <div class="message-title">大标题文案大标题文案大标题文案大标题大标题文案大标题文案大标题文案大标题</div>
+            <div class="message-sub">小标题文案小标题文案小标题文案小标</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.page {
+    padding: 16px;
+    background-color: @bg;
+}
+
+.message {
+    background-color: @bg2;
+    padding: 0 16px;
+    border-radius: 12px;
+    .message-top {
+        padding: 12px 0 14px;
+        .flex();
+        justify-content: space-between;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 20px;
+    }
+
+    .message-title {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+    }
+    .message-sub {
+        padding: 10px 0 14px;
+        font-size: 14px;
+        color: #ffffff40;
+        line-height: 20px;
+    }
+}
+</style>