mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 登录页面实现
This commit is contained in:
39
src/components/common/LoginBg/components/CornerBottom.vue
Normal file
39
src/components/common/LoginBg/components/CornerBottom.vue
Normal 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>
|
33
src/components/common/LoginBg/components/CornerTop.vue
Normal file
33
src/components/common/LoginBg/components/CornerTop.vue
Normal 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>
|
4
src/components/common/LoginBg/components/index.ts
Normal file
4
src/components/common/LoginBg/components/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import CornerTop from './CornerTop.vue';
|
||||
import CornerBottom from './CornerBottom.vue';
|
||||
|
||||
export { CornerTop, CornerBottom };
|
15
src/components/common/LoginBg/index.vue
Normal file
15
src/components/common/LoginBg/index.vue
Normal 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>
|
19
src/components/common/SystemLogo/index.vue
Normal file
19
src/components/common/SystemLogo/index.vue
Normal 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>
|
@ -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 };
|
||||
|
3
src/components/custom/index.ts
Normal file
3
src/components/custom/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import CountTo from './CountTo/index.vue';
|
||||
|
||||
export { CountTo };
|
@ -1 +1,2 @@
|
||||
export { AppProviderContent, ExceptionSvg, BannerSvg, CountTo } from './common';
|
||||
export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg } from './common';
|
||||
export { CountTo } from './custom';
|
||||
|
Reference in New Issue
Block a user