chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix(04): product service (unfinish)

Browse source
This commit is contained in:
puriphatt 2024-08-14 14:38:26 +07:00
parent 485e0b82b2
commit 7cfc1ddee5
4 changed files with 342 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/ProfileBanner.vue
View file

@ -3,14 +3,15 @@ import { ref } from 'vue';
import ToggleButton from './button/ToggleButton.vue';
defineProps<{
icon?: string;
fallbackCover?: string;
color?: string;
img?: string | null;
bgColor?: string;
icon?: string;
title?: string;
caption?: string;
color?: string;
bgColor?: string;
toggleTitle?: string;
fallbackImg?: string;
fallbackCover?: string;
hideFade?: boolean;
hideActive?: boolean;
@ -67,12 +68,6 @@ const showOverlay = ref(false);
class="surface-1"
style="border-radius: 50%; border: 4px solid var(--surface-1)"
>
<!-- <div
class="avatar__status"
style="z-index: 2"
:style="`${active ? 'background-color: hsla(var(--positive-bg) / 1)' : 'background-color: hsla(var(--text-mute) / 1)'}`"
></div> -->
<q-avatar
size="6rem"
font-size="3rem"
@ -89,7 +84,26 @@ const showOverlay = ref(false);
>
<q-img id="profile-view" v-if="img" :src="img" :ratio="1">
<template #error>
<q-img
v-if="fallbackImg"
:src="fallbackImg"
:ratio="1"
style="background-color: transparent"
>
<template #error>
<div
class="full-width full-height flex items-center justify-center"
style="background-color: transparent"
:style="{
color: `${color || 'white'}`,
}"
>
<q-icon :name="icon || 'mdi-account'" />
</div>
</template>
</q-img>
<div
v-else
class="full-width full-height flex items-center justify-center"
style="background-color: transparent"
:style="{