62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useThemeLocaleData } from '../composables/index.js'
|
|
|
|
const theme = useThemeLocaleData()
|
|
const avatar = computed(() => theme.value.avatar)
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="avatar" class="avatar-profile">
|
|
<p v-if="avatar.url" :class="{ circle: avatar.circle }">
|
|
<img :src="avatar.url" :alt="avatar.name">
|
|
</p>
|
|
<div>
|
|
<h3>{{ avatar.name }}</h3>
|
|
<p>{{ avatar.description }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.avatar-profile {
|
|
padding: 24px 20px;
|
|
margin-bottom: 24px;
|
|
background-color: var(--vp-c-bg);
|
|
border-radius: 8px;
|
|
box-shadow: var(--vp-shadow-1);
|
|
transition: var(--t-color);
|
|
transition-property: background-color, color, box-shadow, transform;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.avatar-profile:hover {
|
|
box-shadow: var(--vp-shadow-2);
|
|
transform: scale(1.002);
|
|
}
|
|
|
|
.avatar-profile img {
|
|
width: 60%;
|
|
margin: auto;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.avatar-profile h3 {
|
|
margin-top: 1.5rem;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.avatar-profile h3,
|
|
.avatar-profile p {
|
|
color: var(--vp-c-text-1);
|
|
transition: color var(--t-color);
|
|
}
|
|
|
|
.avatar-profile .circle img {
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|