OpenSourceJoker/vue-color-avatar
OpenSourceJoker/vue-color-avatar
3
0
Fork 0
mirror of https://github.com/Codennnn/vue-color-avatar.git synced 2024-12-22 20:12:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add more bg-color

Browse Source
This commit is contained in:
LeoKu 2021-10-21 19:51:31 +08:00
parent 3c41dee55e
commit 56703f667d
2 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Configurator.vue
View File

@ -32,7 +32,10 @@
<div
:style="{ background: bgColor }"
class="bg-color"
:class="{ active: bgColor === avatarOption.background.color }"
:class="{
active: bgColor === avatarOption.background.color,
transparent: bgColor === 'transparent',
}"
></div>
</li>
</ul>
@ -210,8 +213,8 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
.bg-color-list__item {
position: relative;
z-index: 1;
flex: 1;
padding: 0.6rem 0.5rem;
width: calc(100% / 7);
padding: 0.6rem 0;
cursor: pointer;
transition: transform 0.2s;
@ -220,9 +223,27 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
box-sizing: content-box;
width: 1.3em;
height: 1.3em;
margin: 0 auto;
font-size: 16px;
border-radius: 50%;
box-shadow: 0 0 0.1em 0.15em $color-configurator;
box-shadow: 0 0 0.05em 0.2em $color-configurator;
&.transparent {
background: #fff !important;
&::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
color: #ff4757;
font-weight: bold;
font-size: 1.8rem;
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
content: '\\';
}
}
&::before {
position: absolute;

4
src/utils/constant.ts
View File

@ -81,11 +81,15 @@ export const SETTINGS: Readonly<AvatarSettings> = {
'#FFEBA4',
'#506AF4',
'#F48150',
'#48A99A',
'#C09FFF',
'#FD6F5D',
'linear-gradient(45deg, #E3648C, #D97567)',
'linear-gradient(62deg, #8EC5FC, #E0C3FC)',
'linear-gradient(90deg, #ffecd2, #fcb69f)',
'linear-gradient(120deg, #a1c4fd, #c2e9fb)',
'linear-gradient(-135deg, #fccb90, #d57eeb)',
'transparent',
],
skinColor: ['#F9C9B6', '#AC6651'],
clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],