feat:视频浏览

ZhangXianQiang

2024-07-05 98f494cf633e3acf5c20f3e9de0d708f2a6c2045

 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>