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:22:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add gradient bg-color

Browse Source
This commit is contained in:
LeoKu 2021-10-20 21:59:37 +08:00
parent 3a3f4db9db
commit 3c41dee55e
5 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CodeModal.vue
View File

@ -96,10 +96,7 @@ onUnmounted(() => {
padding: 2rem 0; padding: 2rem 0;
overflow: hidden; overflow: hidden;
transform: translate(-50%, 0); transform: translate(-50%, 0);
backdrop-filter: blur(0.1rem);
@supports (backdrop-filter: blur(0.1rem)) {
backdrop-filter: blur(0.1rem);
}
} }
.code-box { .code-box {

9
src/components/Configurator.vue
View File

@ -166,7 +166,6 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
width: $layout-sider-width; width: $layout-sider-width;
height: 100%; height: 100%;
background-color: $color-configurator; background-color: $color-configurator;
backdrop-filter: blur(10px);
} }
.configurator { .configurator {
@ -209,7 +208,10 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
align-items: center; align-items: center;
.bg-color-list__item { .bg-color-list__item {
padding: 0.4rem 0.5rem; position: relative;
z-index: 1;
flex: 1;
padding: 0.6rem 0.5rem;
cursor: pointer; cursor: pointer;
transition: transform 0.2s; transition: transform 0.2s;
@ -229,7 +231,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: inherit; background: inherit;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 0.5; opacity: 0.5;
@ -241,6 +243,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 1;
color: $color-configurator; color: $color-configurator;
font-size: 1.5rem; font-size: 1.5rem;
transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5);

5
src/components/DownloadModal.vue
View File

@ -49,9 +49,12 @@ const { t } = useI18n()
height: 100%; height: 100%;
padding: 2rem 0; padding: 2rem 0;
overflow: hidden; overflow: hidden;
background-color: rgba($color-dark, 0.4);
transform: translate(-50%, 0); transform: translate(-50%, 0);
backdrop-filter: blur(0.3rem); backdrop-filter: blur(0.3rem);
@supports not (backdrop-filter: blur(0.3rem)) {
background-color: rgba($color-dark, 0.8);
}
} }
.download-modal { .download-modal {

8
src/utils/constant.ts
View File

@ -72,8 +72,6 @@ export const SETTINGS: Readonly<AvatarSettings> = {
clothesShape: Object.values(ClothesShape), clothesShape: Object.values(ClothesShape),
backgroundColor: [ backgroundColor: [
'#EEE',
'#9287FF',
'#6BD9E9', '#6BD9E9',
'#FC909F', '#FC909F',
'#F4D150', '#F4D150',
@ -83,7 +81,11 @@ export const SETTINGS: Readonly<AvatarSettings> = {
'#FFEBA4', '#FFEBA4',
'#506AF4', '#506AF4',
'#F48150', '#F48150',
'#74D153', '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)',
], ],
skinColor: ['#F9C9B6', '#AC6651'], skinColor: ['#F9C9B6', '#AC6651'],
clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'], clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],

2
src/utils/index.ts
View File

@ -136,7 +136,7 @@ export function showConfetti() {
const duration = performance.now() + 1 * 1000 const duration = performance.now() + 1 * 1000
const colors = SETTINGS.backgroundColor.slice(1, 4) const colors = ['#6967fe', '#85e9f4', '#e16984']
void (function frame() { void (function frame() {
myConfetti({ myConfetti({