header

src/components/layouts/Header.vue

@@ -4,10 +4,10 @@ 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: '论坛',
@@ -35,6 +35,10 @@ const momentList = ref([
     type: '', // 类型跳转发布时的type
   }
 ])
+const handleClickMoment = moment => {
+  console.log('%c click moment item >>>', 'background: blue; color: #fff', moment);
+
+}
 </script>
 
 <template>
@@ -46,7 +50,7 @@ const momentList = 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">
@@ -112,7 +116,8 @@ const momentList = ref([
             </template>
             <div class="moment-container">
               <ul>
-                <li v-for="(moment, idx) in momentList" :key="idx" class="flex-row flex-aic">
+                <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>
@@ -122,8 +127,87 @@ const momentList = ref([
           <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>
@@ -305,4 +389,154 @@ const momentList = ref([
     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;
+        }
+
+        // display: grid;
+        // grid-template-columns: repeat(3, 33%);
+        // text-align: center;
+      }
+    }
+  }
+}
 </style>