mirror of
https://github.com/Codennnn/vue-color-avatar.git
synced 2024-10-18 12:28:04 +00:00
feat: improve the accessibility
This commit is contained in:
parent
6e28038ef4
commit
e9b0323786
@ -8,7 +8,7 @@
|
|||||||
:title="ac.tip"
|
:title="ac.tip"
|
||||||
@click="emit('actionHandler', ac.type)"
|
@click="emit('actionHandler', ac.type)"
|
||||||
>
|
>
|
||||||
<img :src="ac.icon" />
|
<img :src="ac.icon" :alt="ac.tip" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<div class="title">{{ t('text.codeModalTitle') }}</div>
|
<div class="title">{{ t('text.codeModalTitle') }}</div>
|
||||||
|
|
||||||
<div class="close-btn" @click="emit('close')">
|
<div class="close-btn" @click="emit('close')">
|
||||||
<img :src="IconClose" class="icon-close" alt="close" />
|
<img :src="IconClose" class="icon-close" :alt="t('action.close')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -15,7 +15,7 @@
|
|||||||
class="code-scroll-wrapper"
|
class="code-scroll-wrapper"
|
||||||
:options="{ suppressScrollX: false }"
|
:options="{ suppressScrollX: false }"
|
||||||
>
|
>
|
||||||
<pre><code class="code-content" v-html="highlightedCode" /></pre>
|
<pre><code class="code-content" v-html="highlightedCode"></code></pre>
|
||||||
</PerfectScrollbar>
|
</PerfectScrollbar>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
@ -2,5 +2,5 @@
|
|||||||
<canvas
|
<canvas
|
||||||
id="confetti"
|
id="confetti"
|
||||||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
|
||||||
/>
|
></canvas>
|
||||||
</template>
|
</template>
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
:style="{ background: bgColor }"
|
:style="{ background: bgColor }"
|
||||||
class="bg-color"
|
class="bg-color"
|
||||||
:class="{ active: bgColor === avatarOption.background.color }"
|
:class="{ active: bgColor === avatarOption.background.color }"
|
||||||
/>
|
></div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</SectionWrapper>
|
</SectionWrapper>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
>
|
>
|
||||||
<div class="download-modal" @click.stop>
|
<div class="download-modal" @click.stop>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="img">
|
<div class="avatar-preview">
|
||||||
<img
|
<img
|
||||||
alt="vue-color-avatar"
|
alt="vue-color-avatar"
|
||||||
:src="props.imageUrl"
|
:src="props.imageUrl"
|
||||||
@ -71,7 +71,7 @@ const { t } = useI18n()
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 1.8rem 1.2rem 1rem 1.2rem;
|
padding: 1.8rem 1.2rem 1rem 1.2rem;
|
||||||
|
|
||||||
.img {
|
.avatar-preview {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
@ -1,12 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <div
|
|
||||||
class="logo"
|
|
||||||
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
|
|
||||||
/> -->
|
|
||||||
<img
|
<img
|
||||||
style="width: 40px; height: 40px"
|
style="width: 40px; height: 40px"
|
||||||
:src="LogoSvg"
|
:src="LogoSvg"
|
||||||
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
|
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
|
||||||
|
alt="logo"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -17,23 +14,3 @@ const props = withDefaults(defineProps<{ size?: number }>(), {
|
|||||||
size: 2.5,
|
size: 2.5,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- <style lang="scss" scoped>
|
|
||||||
.logo {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: $color-accent;
|
|
||||||
border-radius: 25%;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
right: -40%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: $color-secondary;
|
|
||||||
border-radius: 50%;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style> -->
|
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
rel="nofollow noopener noreferrer"
|
rel="nofollow noopener noreferrer"
|
||||||
>
|
>
|
||||||
<button class="github-button">
|
<button class="github-button">
|
||||||
<img :src="IconGitHub" />
|
<img :src="IconGitHub" alt="GitHub" />
|
||||||
<span class="text">GitHub</span>
|
<span class="text">GitHub</span>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<div class="trigger" @click="isCollapsed ? openSider() : closeSider()">
|
<div class="trigger" @click="isCollapsed ? openSider() : closeSider()">
|
||||||
<img :src="IconRight" class="icon-right" />
|
<img :src="IconRight" class="icon-right" alt="arrow" />
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user