feat(projects): 登录页面实现

This commit is contained in:
Soybean
2021-09-11 02:34:36 +08:00
parent 5c01006306
commit f1e7cf608e
47 changed files with 780 additions and 153 deletions

View File

@ -0,0 +1,39 @@
<template>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="896"
width="967.8852157128662"
>
<defs>
<path
id="path-2"
opacity="1"
fill-rule="evenodd"
d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
/>
<linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0" :stop-color="startColor" stop-opacity="1" />
<stop offset="1" :stop-color="endColor" stop-opacity="1" />
</linearGradient>
</defs>
<g opacity="1">
<use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
</g>
</svg>
</template>
<script lang="ts" setup>
defineProps({
startColor: {
type: String,
default: '#28aff0'
},
endColor: {
type: String,
default: '#120fc4'
}
});
</script>
<style scoped></style>

View File

@ -0,0 +1,33 @@
<template>
<svg height="1337" width="1337">
<defs>
<path
id="path-1"
opacity="1"
fill-rule="evenodd"
d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
/>
<linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
<stop offset="0" :stop-color="startColor" stop-opacity="1" />
<stop offset="1" :stop-color="endColor" stop-opacity="1" />
</linearGradient>
</defs>
<g opacity="1">
<use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
</g>
</svg>
</template>
<script lang="ts" setup>
defineProps({
startColor: {
type: String,
default: '#583ed5'
},
endColor: {
type: String,
default: '#17d7fa'
}
});
</script>
<style scoped></style>

View File

@ -0,0 +1,4 @@
import CornerTop from './CornerTop.vue';
import CornerBottom from './CornerBottom.vue';
export { CornerTop, CornerBottom };

View File

@ -0,0 +1,15 @@
<template>
<div class="absolute-lt w-full h-full overflow-hidden">
<div class="absolute -right-300px -top-900px">
<corner-top />
</div>
<div class="absolute -left-200px -bottom-400px">
<corner-bottom />
</div>
</div>
</template>
<script lang="ts" setup>
import { CornerTop, CornerBottom } from './components';
</script>
<style scoped></style>

View File

@ -0,0 +1,19 @@
<template>
<img :src="logoSrc" alt="" />
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import logo from '@/assets/img/common/logo.png';
import logoFill from '@/assets/img/common/logo-fill.png';
const props = defineProps({
fill: {
type: Boolean,
default: false
}
});
const logoSrc = computed(() => (props.fill ? logoFill : logo));
</script>
<style scoped></style>

View File

@ -1,6 +1,7 @@
import AppProviderContent from './AppProviderContent/index.vue';
import SystemLogo from './SystemLogo/index.vue';
import ExceptionSvg from './ExceptionSvg/index.vue';
import LoginBg from './LoginBg/index.vue';
import BannerSvg from './BannerSvg/index.vue';
import CountTo from './CountTo/index.vue';
export { AppProviderContent, ExceptionSvg, BannerSvg, CountTo };
export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg };

View File

@ -0,0 +1,3 @@
import CountTo from './CountTo/index.vue';
export { CountTo };

View File

@ -1 +1,2 @@
export { AppProviderContent, ExceptionSvg, BannerSvg, CountTo } from './common';
export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg } from './common';
export { CountTo } from './custom';