From 98f494cf633e3acf5c20f3e9de0d708f2a6c2045 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 05 七月 2024 09:39:59 +0800
Subject: [PATCH] feat:视频浏览
---
src/components/NormalHeader/index.vue | 31 +++++++++++++++++++++++--------
1 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/src/components/NormalHeader/index.vue b/src/components/NormalHeader/index.vue
index 4375271..c70f50e 100644
--- a/src/components/NormalHeader/index.vue
+++ b/src/components/NormalHeader/index.vue
@@ -1,6 +1,6 @@
<template>
- <div class="w-screen h-16 bg-blue-400 flex justify-between items-center px-10 box-border">
- <div class="return-container text-center cursor-pointer">
+ <div class="w-screen h-16 bg-blue-500 flex justify-between items-center px-10 box-border">
+ <div class="return-container text-center cursor-pointer" @click="returnBack">
<div class="icon mx-auto">
<img src="@/assets/icons/return.png" class="width-img" alt="">
</div>
@@ -9,25 +9,40 @@
<div class="user-container flex items-center">
<div class="avatar-container w-12 h-12 rounded-full overflow-hidden mr-3">
- <div class="avatar-content">
- <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt="">
+ <div class="avatar-content" v-if="userInfo.imagePath"">
+ <img :src="userInfo.imagePath" class="avatar-img" alt="">
</div>
- <!-- <div class="avatar-content" :style="{ backgroundColor: getColor }">
- <div class="name text-xl font-bold text-white">寮�</div>
- </div> -->
+ <div class="avatar-content" :style="{ backgroundColor: getColor }">
+ <div class="name text-xl font-bold text-white">{{ getFirstName }}</div>
+ </div>
</div>
- <div class="user-name text-white">娴嬭瘯娴嬭瘯娴嬭瘯</div>
+ <div class="user-name text-white">{{ userInfo.realName || '鐢ㄦ埛' }}</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
import randomColor from '@/utils/randomColor.js';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/store/index.js';
+
+const router = useRouter();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
const getColor = computed(() => {
return randomColor();
});
+
+const getFirstName = computed(() => {
+ return userInfo.value.realName && userInfo.value.realName[0];
+});
+
+const returnBack = () => {
+ router.back();
+}
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0