OpenSourceJoker/vue-color-avatar
OpenSourceJoker/vue-color-avatar
3
0
Fork 0
mirror of https://github.com/Codennnn/vue-color-avatar.git synced 2024-10-18 12:28:04 +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 <div
:style="{ background: bgColor }" :style="{ background: bgColor }"
class="bg-color" class="bg-color"
:class="{ active: bgColor === avatarOption.background.color }" :class="{
active: bgColor === avatarOption.background.color,
transparent: bgColor === 'transparent',
}"
></div> ></div>
</li> </li>
</ul> </ul>
@ -210,8 +213,8 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
.bg-color-list__item { .bg-color-list__item {
position: relative; position: relative;
z-index: 1; z-index: 1;
flex: 1; width: calc(100% / 7);
padding: 0.6rem 0.5rem; padding: 0.6rem 0;
cursor: pointer; cursor: pointer;
transition: transform 0.2s; transition: transform 0.2s;
@ -220,9 +223,27 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
box-sizing: content-box; box-sizing: content-box;
width: 1.3em; width: 1.3em;
height: 1.3em; height: 1.3em;
margin: 0 auto;
font-size: 16px; font-size: 16px;
border-radius: 50%; 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 { &::before {
position: absolute; position: absolute;

4
src/utils/constant.ts
View File

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