43 lines
818 B
Vue
43 lines
818 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
text: String,
|
|
image: String,
|
|
type: String,
|
|
size: {
|
|
type: Number,
|
|
default: 9,
|
|
},
|
|
});
|
|
</script>
|
|
<template>
|
|
<div
|
|
@click="$emit('justclick')"
|
|
:class="[
|
|
'avatarbox rounded-full mx-0 px-0 font-bold is-flex is-justify-content-center is-align-items-center',
|
|
`size-${size}`,
|
|
]"
|
|
:style="{
|
|
border: image ? 'none' : '1px solid var(--bulma-grey-90)',
|
|
}"
|
|
>
|
|
<figure
|
|
v-if="image"
|
|
class="image"
|
|
>
|
|
<img
|
|
class="is-rounded"
|
|
:src="`${$path()}download?name=${image}`"
|
|
/>
|
|
</figure>
|
|
<span v-else>{{ text }}</span>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.avatarbox:hover {
|
|
background-color: var(--bulma-grey-100);
|
|
&:hover {
|
|
background-color: var(--bulma-grey-95);
|
|
}
|
|
}
|
|
</style>
|