soybean-admin/src/views/system/login/components/LoginBg/index.vue
2022-01-04 19:09:00 +08:00

28 lines
791 B
Vue

<template>
<div class="absolute-lt wh-full overflow-hidden">
<div class="absolute -right-300px -top-900px">
<corner-top :start-color="lightColor" :end-color="darkColor" />
</div>
<div class="absolute -left-200px -bottom-400px">
<corner-bottom :start-color="darkColor" :end-color="lightColor" />
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { getColorPalette } from '@/utils';
import { CornerTop, CornerBottom } from './components';
interface Props {
/** 主题颜色 */
themeColor: string;
}
const props = defineProps<Props>();
const lightColor = computed(() => getColorPalette(props.themeColor, 3));
const darkColor = computed(() => getColorPalette(props.themeColor, 6));
</script>
<style scoped></style>