src/components/IndexTitle/index.vue

@@ -0,0 +1,59 @@
+<script setup name="IndexTitle">
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const Props = defineProps({
+  title: {
+    type: String,
+    default: '默认标题'
+  }
+})
+
+const Emits = defineEmits(['seeMore'])
+
+</script>
+
+<template>
+  <div class="index-title-container flex-row flex-aic flex-jc-sb">
+    <div class="title">{{ title }}</div>
+    <div class="more flex-row flex-aic" @click="seeMore && seeMore()">
+      <span>查看更多</span>
+      <el-icon class="icon" :size="12">
+        <ArrowRight />
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "~/styles/variable.scss";
+
+.index-title-container {
+  padding-left: 18px;
+  border-left: 4px solid $color-primary;
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 2em;
+  }
+
+  .more {
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 400;
+    color: #57C3C2;
+    color: $color-primary;
+
+    span {
+      display: inline-block;
+      margin-right: 6px;
+    }
+
+    .icon {
+      border-radius: 50%;
+      border: 1px solid $color-primary;
+    }
+  }
+}
+</style>

src/components/layouts/Aside.vue

@@ -66,11 +66,11 @@ let routers = [
 .aside {
   &-container {
     height: calc(100vh - 66px);
-    padding: 0 8px;
+    // padding: 0 8px;
     background-color: #fff;
 
     .item-container {
-      padding: 10px 0;
+      padding: 10px 8px;
       border-bottom: 1px solid #d4d4d4;
 
       .itembox {
@@ -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

@@ -4,10 +4,42 @@ import { Search, Promotion, Avatar } from '@element-plus/icons-vue'
 import { useUser } from '~/store/user.js'
 
 import SvgIcon from '~/components/SvgIcon/index.vue'
-
 const user = useUser()
 
-const keyword = ref('')
+const keyword = ref('') // Search keyword
+
+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
+  }
+])
+
+const handleClickMoment = moment => {
+  console.log('%c click moment item >>>', 'background: blue; color: #fff', moment);
+}
+
 </script>
 
 <template>
@@ -19,7 +51,7 @@ const keyword = ref('')
         <el-button>关注</el-button>
         <el-button type="primary">最新</el-button>
       </el-button-group>
-      <div class="header__content__right">
+      <div class="header__content__right flex-row flex-aic">
         <el-popover popper-class="vip-poperclass" placement="bottom" :width="332" trigger="click">
           <template #reference>
             <el-button class="vip-btn">
@@ -47,26 +79,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,12 +110,107 @@ 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"
+                  @click="handleClickMoment(moment)">
+                  <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>
+
+          <!-- NOTE: User Avatar container -->
+          <el-popover placement="bottom-start" :width="276" trigger="click">
+            <template #reference>
+              <div class="userinfo-avatar">
+                <img :src="user.avatar" :alt="user.name" />
+              </div>
+            </template>
+            <div class="userinfo-container uc">
+              <div class="uc__avatar">
+                <img src="" alt="">
+              </div>
+              <div class="uc__name">
+                上海原文化传媒
+              </div>
+              <div class="uc__flags">
+                <img src="" alt="">
+              </div>
+              <div class="uc__integral flex-row flex-aic flex-jc-sb">
+                <span class="integral_text">当前积分，差多少升级</span>
+                <el-button class="task-btn" link>任务列表</el-button>
+              </div>
+              <div class="uc__grade">
+                <div class="uc__grade__show-bar">
+                  <div class="sb-inside"></div>
+                </div>
+                <div class="uc__grade_txt flex-row flex-jc-sb">
+                  <span>0</span>
+                  <span>1</span>
+                </div>
+              </div>
+              <div class="uc__part">
+                <div>
+                  <div>1</div>
+                  <div>关注</div>
+                </div>
+                <div>
+                  <div>1</div>
+                  <div>粉丝</div>
+                </div>
+                <div>
+                  <div>1</div>
+                  <div>收藏</div>
+                </div>
+                <div>
+                  <div>1</div>
+                  <div>足迹</div>
+                </div>
+              </div>
+              <div class="uc__gap"></div>
+              <div class="uc__item">
+                <div class="itembox">
+                  <div class="icon">1</div>
+                  <div class="label">兑换记录</div>
+                </div>
+                <div class="itembox">
+                  <div class="icon">2</div>
+                  <div class="label">兑换记录</div>
+                </div>
+                <div class="itembox">
+                  <div class="icon">3</div>
+                  <div class="label">兑换记录</div>
+                </div>
+                <div class="itembox">
+                  <div class="icon">4</div>
+                  <div class="label">兑换记录</div>
+                </div>
+                <div class="itembox">
+                  <div class="icon">5</div>
+                  <div class="label">兑换记录</div>
+                </div>
+                <div class="itembox">
+                  <div class="icon">6</div>
+                  <div class="label">兑换记录</div>
+                </div>
+              </div>
+            </div>
+          </el-popover>
+        </template>
+        <template v-else>
+          <el-button type="primary">登录/注册</el-button>
         </template>
-        <el-button type="primary">登录/注册</el-button>
       </div>
     </div>
   </div>
@@ -239,4 +365,177 @@ 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;
+  }
+}
+
+.userinfo {
+  &-avatar {
+    cursor: pointer;
+    margin-left: 20px;
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background-color: blue;
+    border-radius: 50%;
+  }
+
+  &-container {
+    padding: 4px;
+
+    .uc {
+      &__avatar {
+        width: 58px;
+        height: 58px;
+        background-color: blue;
+        margin: auto;
+        border-radius: 50%;
+      }
+
+      &__name {
+        font-size: 12px;
+        font-weight: 600;
+        color: #222222;
+        line-height: 17px;
+        text-align: center;
+        padding: 8px 0;
+      }
+
+      &__flags {
+        text-align: center;
+
+        img {
+          width: 12px;
+          height: 12px;
+          background-color: green;
+          margin-right: 4px;
+
+          &:last-child {
+            margin-right: initial;
+          }
+        }
+      }
+
+      &__integral {
+        .task-btn {
+          font-size: 12px;
+          font-weight: 400;
+          color: #00B0B0;
+          line-height: 14px;
+        }
+      }
+
+      &__grade {
+        padding: 10px 0;
+
+        &__show-bar {
+          position: relative;
+          z-index: 1;
+          height: 3px;
+          width: 100%;
+          background-color: #ccc;
+
+          &::after,
+          &::before {
+            position: absolute;
+            z-index: 2;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            content: "";
+            width: 8px;
+            height: 8px;
+            border-radius: 8px;
+            background: #EFEFEF;
+          }
+
+          &::before {
+            left: 0;
+            background-color: #00B0B0;
+          }
+
+          &::after {
+            right: -8px;
+          }
+
+          .sb-inside {
+            width: 50%;
+            height: 3px;
+            background-color: rgba(0, 176, 176, 1);
+          }
+        }
+
+        &_txt {
+          padding: 6px 0;
+        }
+      }
+
+      &__part {
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 10px;
+
+        >div {
+          text-align: center;
+
+          div:first-child {
+            font-size: 16px;
+            font-weight: 400;
+            color: #222222;
+            line-height: 17px;
+          }
+
+          div:last-child {
+            padding-top: 4px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #666666;
+            line-height: 17px;
+          }
+        }
+      }
+
+      &__gap {
+        height: 1px;
+        background-color: rgba(225, 225, 225, 0.546);
+      }
+
+      &__item {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding-top: 10px;
+
+        .itembox {
+          width: 33%;
+          margin-bottom: 10px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -1,25 +1,23 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import config from "~/configs"
 
-import Home from "~/views/index.vue"
+import Layout from "~/views/index.vue"
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
     meta: {
       title: '首页'
     },
-    component: Home,
+    component: Layout,
     children: [
       {
-        path: "/dashboard",
-        name: "dashboard",
+        path: '',
+        name: "Home",
         meta: {
-          title: '系统首页',
           permiss: '1'
         },
-        component: () => import('~/views/text.vue')
+        component: () => import('~/views/index-content.vue')
       }
     ]
   }

src/styles/index.scss

@@ -5,6 +5,12 @@ body {
   background-color: rgba(247, 247, 247, 1);
 }
 
+.layout {
+  &-container {
+    padding: 16px 24px !important;
+  }
+}
+
 .flex {
   &-row {
     display: flex;

src/styles/variable.scss

@@ -1 +1,3 @@
+$color-primary: rgba(0, 176, 176, 1);
+
 $orange: rgba(255, 123, 21, 1);

src/views/index-content.vue

@@ -0,0 +1,49 @@
+<script setup>
+import IndexTitle from "~/components/IndexTitle/index.vue";
+
+</script>
+
+
+<template>
+  <div class="index-container">
+    <div class="banner">
+      <el-carousel height="420px">
+        <el-carousel-item v-for="item in 4" :key="item">
+          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <IndexTitle title="精选咨询" />
+    test page.
+  </div>
+</template>
+
+<style lang="scss">
+.index {
+  &-container {
+
+    .banner {
+      .demonstration {
+        color: var(--el-text-color-secondary);
+      }
+
+      .el-carousel__item h3 {
+        color: #475669;
+        opacity: 0.75;
+        line-height: 420px;
+        margin: 0;
+        text-align: center;
+      }
+
+      .el-carousel__item:nth-child(2n) {
+        background-color: #99a9bf;
+      }
+
+      .el-carousel__item:nth-child(2n + 1) {
+        background-color: #d3dce6;
+      }
+    }
+
+  }
+}
+</style>

src/views/index.vue

@@ -14,7 +14,7 @@ import vAside from '~/components/layouts/Aside.vue'
         <el-aside width="200px">
           <v-aside />
         </el-aside>
-        <el-main>
+        <el-main class="layout-container">
           <router-view v-slot="{ Component }">
             <transition name="move" mode="out-in">
               <!-- NOTE: <keep-alive></keep-alive> -->

src/views/text.vue

@@ -1,6 +0,0 @@
-
-<template>
-  <div>
-    test page.
-  </div>
-</template>