style(projects): 更换 logo 与加载样式
This commit is contained in:
xlsea
parent
471912e17f
commit
7e4ecae6cb
@ -2,7 +2,7 @@
|
||||
<html lang="zh-cmn-Hans">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
4
public/favicon.svg
Normal file
4
public/favicon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 476.22 476.22">
|
||||
<path fill="#0e42d2" d="M389.98,400.6c-64.58,76.59-176.66,93.98-261.1,38.54-57.75-37.91-92.29-103.74-87.69-173.54,1.28-19.35,9.54-58.77,33.33-61.44,20.49-2.29,43.2,14.41,62.99,21.14,64.93,22.1,150.88,21.39,214.51-4.81,17.24-7.1,39.23-23.9,58.05-13.31,25.61,14.41,27.13,67.07,24.38,92.75-3.94,36.78-20.9,72.7-44.47,100.65ZM150.91,269c-17.4-4.01-34.19-9.87-50.5-17.04-2.56-1.12-15.17-8.19-16.64-6.83-23.51,92.25,48.81,179.87,140.64,188.01,3.68.33,9,.72,12.64.79,3.76.07,7.18-.41,10.86-.78-.24-3.7-1.05-7.05-.77-10.85,1.3-17.71,28.61-26.36,26.88-43.25-.89-8.76-14.85-11.03-22.02-11.55-8.23-.6-17.94,1.77-25.24-3.11-5.39-3.61-5.08-10.32-7.37-15.76-4.74-11.26-15.86-17.54-27.79-18.47-22.55-1.77-68.52,7.5-81.87-16.63-11.77-21.27,12.24-35.1,29.25-40.42,3.38-1.06,7.52-1.31,10.88-2.55,1.03-.38,1.28.27,1.04-1.56ZM391.83,245.21c-1.03-.58-12.51,5.5-14.65,6.42-20.82,8.92-42.01,16.02-64.2,20.87-10.31,2.25-21.7,3.15-31.66,5.65-19.17,4.82-17.59,22.78-.42,29.11,10.27,3.78,25.34,3.94,36.56,5.97,23.56,4.26,56.74,11.28,53.56,41.93-.31,2.98-2.13,5.86-2.26,8.2-.08,1.48.18,1.21,1.5,1.13,5.18-9.87,11.46-19.09,15.7-29.46,7.55-18.44,12.19-42.75,11.17-62.68-.19-3.67-2.95-25.81-5.31-27.15Z"/>
|
||||
<path fill="#0e42d2" d="M278.22,21.54c4.79,5.69,9.27,14.39,11.84,21.37.67,1.8,1.49,7.86,2.59,8.61,1.49,1.01,17.78-3.63,21.39-4.05,71.76-8.37,101.88,65.14,44.46,110.3-41.92,32.98-84.43,32.67-135.62,31.41-47.74-1.18-111.25-13.52-129.97-64.78-19.66-53.81,31.01-83.19,77.15-58.5,2,1.07,11.58,7.79,12.54,7.59,1.57-.32,1.05-4.62,1.34-6.14,3.75-19.76,11.37-39.47,27.8-52.04,20.82-15.93,49.31-14.16,66.47,6.23ZM256.71,71.1c1.07-24.31-18.03-42.71-30.8-12.52-5.88,13.9-7.77,32.56-3.36,47,1.73.46,1.24-.41,1.7-.95,10.15-11.8,19.02-25.11,32.46-33.52ZM340.18,123.96c10.12-10.37,17.92-27.48.94-35.85-29-14.31-83.74,17.89-87.91,49.24-1.6,11.97,2.2,14.36,13.71,14.53,21.84.32,57.86-12.13,73.26-27.92ZM173.64,117.92c-4.77-6.36-9.81-11.55-16.53-15.93-7.07-4.62-24.6-13.3-29.47-2.16-3.94,9.02,6.8,23.05,13.43,28.86,12.36,10.83,29.63,16.76,45.66,19.42-.28-11.02-6.62-21.58-13.08-30.19Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
4
src/assets/svg-icon/logo.svg
Normal file
4
src/assets/svg-icon/logo.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 476.22 476.22">
|
||||
<path fill="#0e42d2" d="M389.98,400.6c-64.58,76.59-176.66,93.98-261.1,38.54-57.75-37.91-92.29-103.74-87.69-173.54,1.28-19.35,9.54-58.77,33.33-61.44,20.49-2.29,43.2,14.41,62.99,21.14,64.93,22.1,150.88,21.39,214.51-4.81,17.24-7.1,39.23-23.9,58.05-13.31,25.61,14.41,27.13,67.07,24.38,92.75-3.94,36.78-20.9,72.7-44.47,100.65ZM150.91,269c-17.4-4.01-34.19-9.87-50.5-17.04-2.56-1.12-15.17-8.19-16.64-6.83-23.51,92.25,48.81,179.87,140.64,188.01,3.68.33,9,.72,12.64.79,3.76.07,7.18-.41,10.86-.78-.24-3.7-1.05-7.05-.77-10.85,1.3-17.71,28.61-26.36,26.88-43.25-.89-8.76-14.85-11.03-22.02-11.55-8.23-.6-17.94,1.77-25.24-3.11-5.39-3.61-5.08-10.32-7.37-15.76-4.74-11.26-15.86-17.54-27.79-18.47-22.55-1.77-68.52,7.5-81.87-16.63-11.77-21.27,12.24-35.1,29.25-40.42,3.38-1.06,7.52-1.31,10.88-2.55,1.03-.38,1.28.27,1.04-1.56ZM391.83,245.21c-1.03-.58-12.51,5.5-14.65,6.42-20.82,8.92-42.01,16.02-64.2,20.87-10.31,2.25-21.7,3.15-31.66,5.65-19.17,4.82-17.59,22.78-.42,29.11,10.27,3.78,25.34,3.94,36.56,5.97,23.56,4.26,56.74,11.28,53.56,41.93-.31,2.98-2.13,5.86-2.26,8.2-.08,1.48.18,1.21,1.5,1.13,5.18-9.87,11.46-19.09,15.7-29.46,7.55-18.44,12.19-42.75,11.17-62.68-.19-3.67-2.95-25.81-5.31-27.15Z"/>
|
||||
<path fill="#0e42d2" d="M278.22,21.54c4.79,5.69,9.27,14.39,11.84,21.37.67,1.8,1.49,7.86,2.59,8.61,1.49,1.01,17.78-3.63,21.39-4.05,71.76-8.37,101.88,65.14,44.46,110.3-41.92,32.98-84.43,32.67-135.62,31.41-47.74-1.18-111.25-13.52-129.97-64.78-19.66-53.81,31.01-83.19,77.15-58.5,2,1.07,11.58,7.79,12.54,7.59,1.57-.32,1.05-4.62,1.34-6.14,3.75-19.76,11.37-39.47,27.8-52.04,20.82-15.93,49.31-14.16,66.47,6.23ZM256.71,71.1c1.07-24.31-18.03-42.71-30.8-12.52-5.88,13.9-7.77,32.56-3.36,47,1.73.46,1.24-.41,1.7-.95,10.15-11.8,19.02-25.11,32.46-33.52ZM340.18,123.96c10.12-10.37,17.92-27.48.94-35.85-29-14.31-83.74,17.89-87.91,49.24-1.6,11.97,2.2,14.36,13.71,14.53,21.84.32,57.86-12.13,73.26-27.92ZM173.64,117.92c-4.77-6.36-9.81-11.55-16.53-15.93-7.07-4.62-24.6-13.3-29.47-2.16-3.94,9.02,6.8,23.05,13.43,28.86,12.36,10.83,29.63,16.76,45.66,19.42-.28-11.02-6.62-21.58-13.08-30.19Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img src="@/assets/imgs/logo.png" />
|
||||
<icon-local-logo />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -17,8 +17,8 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
<template>
|
||||
<RouterLink to="/" class="w-full flex-center nowrap-hidden">
|
||||
<SystemLogo class="w-32px text-primary" />
|
||||
<h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold transition duration-300 ease-in-out">
|
||||
<SystemLogo class="text-30px text-primary" />
|
||||
<h2 v-show="showTitle" class="pl-12px text-16px text-primary font-bold transition duration-300 ease-in-out">
|
||||
{{ $t('system.title') }}
|
||||
</h2>
|
||||
</RouterLink>
|
||||
|
||||
@ -3,8 +3,8 @@ import { getRgb } from '@sa/color';
|
||||
import { DARK_CLASS } from '@/constants/app';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { toggleHtmlClass } from '@/utils/common';
|
||||
import systemLogo from '@/assets/imgs/logo.png';
|
||||
import { $t } from '@/locales';
|
||||
import '@/styles/scss/loading.scss';
|
||||
|
||||
export function setupLoading() {
|
||||
const app = document.getElementById('app');
|
||||
@ -21,12 +21,11 @@ export function setupLoading() {
|
||||
|
||||
const loading = `
|
||||
<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
|
||||
<div class="w-120px h-120px my-36px">
|
||||
<div class="relative h-full animate-spin">
|
||||
<img src="${systemLogo}" width="120" />
|
||||
</div>
|
||||
<div class="my-52px h-120px w-120px">
|
||||
<!-- From Uiverse.io by SchawnnahJ -->
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
|
||||
<h2 class="text-30px text-primary-400 font-500">${$t('system.title')}</h2>
|
||||
</div>`;
|
||||
|
||||
if (app) {
|
||||
|
||||
105
src/styles/scss/loading.scss
Normal file
105
src/styles/scss/loading.scss
Normal file
@ -0,0 +1,105 @@
|
||||
@use 'sass:math';
|
||||
|
||||
$base-size: 100px;
|
||||
$em-to-px: math.div($base-size, 2.5);
|
||||
$loader-color-1: rgb(var(--error-color) / 75%);
|
||||
$loader-color-2: rgb(var(--primary-color) / 75%);
|
||||
$loader-color-3: rgb(var(--success-color) / 75%);
|
||||
$loader-color-4: rgb(var(--warning-color) / 75%);
|
||||
|
||||
@function loader-size($em-value) {
|
||||
@return $em-to-px * $em-value;
|
||||
}
|
||||
|
||||
/* From Uiverse.io by SchawnnahJ */
|
||||
.loader {
|
||||
position: relative;
|
||||
width: loader-size(2.5);
|
||||
height: loader-size(2.5);
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: loader-size(0.5);
|
||||
height: loader-size(0.5);
|
||||
border-radius: loader-size(0.25);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
animation: before8 2s infinite;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
animation: after6 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes before8 {
|
||||
0% {
|
||||
width: loader-size(0.5);
|
||||
box-shadow:
|
||||
loader-size(1) loader-size(-0.5) $loader-color-1,
|
||||
loader-size(-1) loader-size(0.5) $loader-color-2;
|
||||
}
|
||||
|
||||
35% {
|
||||
width: loader-size(2.5);
|
||||
box-shadow:
|
||||
0 loader-size(-0.5) $loader-color-1,
|
||||
0 loader-size(0.5) $loader-color-2;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: loader-size(0.5);
|
||||
box-shadow:
|
||||
loader-size(-1) loader-size(-0.5) $loader-color-1,
|
||||
loader-size(1) loader-size(0.5) $loader-color-2;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow:
|
||||
loader-size(1) loader-size(-0.5) $loader-color-1,
|
||||
loader-size(-1) loader-size(0.5) $loader-color-2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes after6 {
|
||||
0% {
|
||||
height: loader-size(0.5);
|
||||
box-shadow:
|
||||
loader-size(0.5) loader-size(1) $loader-color-3,
|
||||
loader-size(-0.5) loader-size(-1) $loader-color-4;
|
||||
}
|
||||
|
||||
35% {
|
||||
height: loader-size(2.5);
|
||||
box-shadow:
|
||||
loader-size(0.5) 0 $loader-color-3,
|
||||
loader-size(-0.5) 0 $loader-color-4;
|
||||
}
|
||||
|
||||
70% {
|
||||
height: loader-size(0.5);
|
||||
box-shadow:
|
||||
loader-size(0.5) loader-size(-1) $loader-color-3,
|
||||
loader-size(-0.5) loader-size(1) $loader-color-4;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow:
|
||||
loader-size(0.5) loader-size(1) $loader-color-3,
|
||||
loader-size(-0.5) loader-size(-1) $loader-color-4;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: calc(50% - #{math.div(loader-size(2.5), 2)});
|
||||
left: calc(50% - #{math.div(loader-size(2.5), 2)});
|
||||
}
|
||||
1
src/typings/components.d.ts
vendored
1
src/typings/components.d.ts
vendored
@ -34,6 +34,7 @@ declare module 'vue' {
|
||||
IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
|
||||
IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
|
||||
IconLocalBanner: typeof import('~icons/local/banner')['default']
|
||||
IconLocalLogo: typeof import('~icons/local/logo')['default']
|
||||
'IconMaterialSymbols:add': typeof import('~icons/material-symbols/add')['default']
|
||||
'IconMaterialSymbols:deleteOutline': typeof import('~icons/material-symbols/delete-outline')['default']
|
||||
'IconMaterialSymbols:downloadRounded': typeof import('~icons/material-symbols/download-rounded')['default']
|
||||
|
||||
@ -56,7 +56,7 @@ const bgColor = computed(() => {
|
||||
<NCard :bordered="false" class="relative z-4 w-auto rd-12px">
|
||||
<div class="w-400px lt-sm:w-300px">
|
||||
<header class="flex-y-center justify-between">
|
||||
<SystemLogo class="w-64px text-primary lt-sm:text-48px" />
|
||||
<SystemLogo class="text-58px text-primary lt-sm:text-52px" />
|
||||
<h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</h3>
|
||||
<div class="i-flex-col">
|
||||
<ThemeSchemaSwitch
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { getRgb } from '@sa/color';
|
||||
import { DARK_CLASS } from '@/constants/app';
|
||||
import { fetchSocialLoginCallback } from '@/service/api';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { toggleHtmlClass } from '@/utils/common';
|
||||
|
||||
const route = useRoute();
|
||||
const authStore = useAuthStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
const { loading, startLoading, endLoading } = useLoading(true);
|
||||
|
||||
/**
|
||||
* 接收Route传递的参数
|
||||
@ -41,7 +43,7 @@ const handleError = () => {
|
||||
msg.value = '登录失败，1s 后即将跳转至登录页';
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
routerPushByKey('login');
|
||||
// routerPushByKey('login');
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
@ -56,7 +58,6 @@ const callbackByCode = async (data: Api.Auth.SocialLoginForm) => {
|
||||
return;
|
||||
}
|
||||
await processResponse();
|
||||
endLoading();
|
||||
};
|
||||
|
||||
const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
|
||||
@ -67,11 +68,9 @@ const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
|
||||
} catch {
|
||||
handleError();
|
||||
}
|
||||
endLoading();
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
startLoading();
|
||||
// 如果域名不相等 则重定向处理
|
||||
const host = window.location.host;
|
||||
if (domain !== host) {
|
||||
@ -99,17 +98,28 @@ const init = async () => {
|
||||
onMounted(async () => {
|
||||
await init();
|
||||
});
|
||||
|
||||
const themeColor = localStg.get('themeColor') || '#2080f0';
|
||||
const darkMode = localStg.get('darkMode') || false;
|
||||
const { r, g, b } = getRgb(themeColor);
|
||||
|
||||
if (darkMode) {
|
||||
toggleHtmlClass(DARK_CLASS).add();
|
||||
}
|
||||
|
||||
const primaryColor = `--primary-color: ${r} ${g} ${b}`;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed-center flex-col bg-layout">
|
||||
<div class="my-36px h-120px w-120px">
|
||||
<div class="relative h-full" :class="{ 'animate-spin': loading }">
|
||||
<img src="@/assets/imgs/logo.png" width="120" />
|
||||
</div>
|
||||
<div class="fixed-center flex-col bg-layout" :style="primaryColor">
|
||||
<div class="my-52px h-120px w-120px">
|
||||
<!-- From Uiverse.io by SchawnnahJ -->
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<h2 class="text-28px text-primary font-500">{{ msg }}</h2>
|
||||
<h2 class="text-30px text-primary-400 font-500">{{ $t('system.title') }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/scss/loading.scss';
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user