feat: header moment button

src/components/layouts/Aside.vue

@@ -95,10 +95,9 @@ let routers = [
         }
       }
 
-
-      &:first-child {
-        // padding-top: initial;
-      }
+      // &:first-child {
+      //   // padding-top: initial;
+      // }
 
       &:last-child {
         padding-bottom: initial;

src/components/layouts/Header.vue

@@ -8,6 +8,33 @@ import SvgIcon from '~/components/SvgIcon/index.vue'
 const user = useUser()
 
 const keyword = ref('')
+const momentList = ref([
+  {
+    label: '论坛',
+    icon: '~/assets/cicons/',
+    type: '', // 类型跳转发布时的type
+  },
+  {
+    label: '文章',
+    icon: '~/assets/cicons/',
+    type: '', // 类型跳转发布时的type
+  },
+  {
+    label: '咨询',
+    icon: '~/assets/cicons/',
+    type: '', // 类型跳转发布时的type
+  },
+  {
+    label: '视频',
+    icon: '~/assets/cicons/',
+    type: '', // 类型跳转发布时的type
+  },
+  {
+    label: '草稿箱',
+    icon: '~/assets/cicons/',
+    type: '', // 类型跳转发布时的type
+  }
+])
 </script>
 
 <template>
@@ -47,26 +74,25 @@ const keyword = ref('')
                 </template>
               </div>
             </div>
+            <!-- NOTE: VIP 签到奖励 -->
+            <!-- NOTE: 三种状态, 已领取/领取/未达标 -->
             <div class="vip-sign-prizes">
               <div class="prize-box">
                 <div class="prize-box__img"></div>
                 <div class="prize-box__title">等级达到10级</div>
                 <div class="prize-box__sub-title">积分奖励+100</div>
-                <!-- NOTE: 三种状态, 已领取/领取/未达标 -->
                 <el-button type="primary" disabled>已领取</el-button>
               </div>
               <div class="prize-box">
                 <div class="prize-box__img"></div>
                 <div class="prize-box__title">等级达到10级</div>
                 <div class="prize-box__sub-title">积分奖励+100</div>
-                <!-- NOTE: 三种状态, 已领取/领取/未达标 -->
                 <el-button type="primary">领取</el-button>
               </div>
               <div class="prize-box">
                 <div class="prize-box__img"></div>
                 <div class="prize-box__title">等级达到10级</div>
                 <div class="prize-box__sub-title">积分奖励+100</div>
-                <!-- NOTE: 三种状态, 已领取/领取/ -->
                 <el-button link disabled>未达标</el-button>
               </div>
             </div>
@@ -79,7 +105,20 @@ const keyword = ref('')
             <SvgIcon name="people" :size="19" color="#ffffff" />
             邀请好友
           </el-button>
-          <el-button type="primary" :icon="Promotion">发布</el-button>
+          <!-- NOTE: 发布内容 -->
+          <el-popover placement="bottom" :width="120" trigger="click">
+            <template #reference>
+              <el-button type="primary" :icon="Promotion">发布</el-button>
+            </template>
+            <div class="moment-container">
+              <ul>
+                <li v-for="(moment, idx) in momentList" :key="idx" class="flex-row flex-aic">
+                  <img :src="moment.icon" :alt="moment.label" class="icon" />
+                  <span class="moment__label">{{ moment.label }}</span>
+                </li>
+              </ul>
+            </div>
+          </el-popover>
           <el-button link>
             <SvgIcon name="ding" :size="24"></SvgIcon>
           </el-button>
@@ -239,4 +278,31 @@ const keyword = ref('')
     border-top: 1px solid rgba(204, 204, 204, 0.4);
   }
 }
+
+.moment {
+  &-container {
+    ul {
+      list-style: none;
+      padding-inline-start: 0;
+      margin: 0;
+
+      li {
+        user-select: none;
+        cursor: pointer;
+        line-height: 33px;
+
+        .icon {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 20px;
+  }
+}
 </style>