chat-app/src/components/avatar-module/index.vue

30 lines
1.3 KiB
Vue
Raw Normal View History

2024-11-11 06:46:14 +00:00
<script setup>
import TmImage from "@/uni_modules/tmui/components/tm-image/tm-image.vue";
import {useAuth} from "@/store/auth";
import { useClockIn } from "@/store/clockIn/index.js";
const {userInfo}=useAuth()
const {workingTimeInfoData,actionTypeData} = useClockIn()
</script>
<template>
<div class="flex-shrink-0 pl-[16rpx] pr-[40rpx] flex items-center rounded-[8rpx] w-[686rpx] h-[154rpx] bg-white">
<div class="rounded-full overflow-hidden w-[96rpx] h-[96rpx]">
<tm-image preview :width="96" :height="96" :src="userInfo.Avatar"></tm-image>
</div>
<div class="ml-[20rpx]">
<div class="flex items-center">
<div class="text-[32rpx] text-black">{{ userInfo.NickName }}</div>
<div class="mx-[14rpx] h-[30rpx] w-[1rpx] bg-[#F7F7F7]"></div>
<div class="w-[40rpx] h-[40rpx]">
<img v-if="actionTypeData.isWorkDay ===1" class="w-[40rpx] h-[40rpx]" src="@/static/image/clockIn/zu3275@3x.png" alt="">
<img v-else class="w-[40rpx] h-[40rpx]" src="@/static/image/clockIn/rest3275@2x.png" alt="">
</div>
</div>
<div class="mt-[5rpx] flex">
<div class="text-[24rpx] text-[#999999]">{{ workingTimeInfoData.WorkTimeTemplateName }}</div>
<div class="text-[#46299D] text-[24rpx]">考勤规则</div>
</div>
</div>
<slot name="right"></slot>
</div>
</template>