feat(projects): 登录页面实现

src/components/common/CountTo/index.vue

@@ -1,124 +0,0 @@
-<template>
-  <span :style="{ color }">
-    {{ value }}
-  </span>
-</template>
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch, watchEffect } from 'vue';
-import { useTransition, TransitionPresets } from '@vueuse/core';
-import { isNumber } from '@/utils';
-
-const props = defineProps({
-  startValue: {
-    type: Number,
-    default: 0
-  },
-  endValue: {
-    type: Number,
-    default: 2021
-  },
-  duration: {
-    type: Number,
-    default: 1500
-  },
-  autoplay: {
-    type: Boolean,
-    default: true
-  },
-  decimals: {
-    type: Number,
-    default: 0,
-    validator(value: number) {
-      return value >= 0;
-    }
-  },
-  prefix: {
-    type: String,
-    default: ''
-  },
-  suffix: {
-    type: String,
-    default: ''
-  },
-  separator: {
-    type: String,
-    default: ','
-  },
-  decimal: {
-    type: String,
-    default: '.'
-  },
-  color: {
-    type: String,
-    default: '#666'
-  },
-  useEasing: {
-    type: Boolean,
-    default: true
-  },
-  transition: {
-    type: String,
-    default: 'linear'
-  }
-});
-const emit = defineEmits(['on-started', 'on-finished']);
-
-const source = ref(props.startValue);
-const disabled = ref(false);
-let outputValue = useTransition(source);
-const value = computed(() => formatNumber(outputValue.value));
-
-watchEffect(() => {
-  source.value = props.startValue;
-});
-watch([() => props.startValue, () => props.endValue], () => {
-  if (props.autoplay) {
-    start();
-  }
-});
-onMounted(() => {
-  if (props.autoplay) {
-    start();
-  }
-});
-
-function start() {
-  run();
-  source.value = props.endValue;
-}
-
-// function reset() {
-//   source.value = props.startValue;
-//   run();
-// }
-
-function run() {
-  outputValue = useTransition(source, {
-    disabled,
-    duration: props.duration,
-    onStarted: () => emit('on-started'),
-    onFinished: () => emit('on-finished'),
-    ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {})
-  });
-}
-
-function formatNumber(num: number | string) {
-  if (!num) {
-    return '';
-  }
-  const { decimals, decimal, separator, suffix, prefix } = props;
-  let number = Number(num).toFixed(decimals);
-  number += '';
-
-  const x = number.split('.');
-  let x1 = x[0];
-  const x2 = x.length > 1 ? decimal + x[1] : '';
-  const rgx = /(\d+)(\d{3})/;
-  if (separator && !isNumber(separator)) {
-    while (rgx.test(x1)) {
-      x1 = x1.replace(rgx, `$1${separator}$2`);
-    }
-  }
-  return prefix + x1 + x2 + suffix;
-}
-</script>

src/components/common/LoginBg/components/CornerBottom.vue

@@ -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>

src/components/common/LoginBg/components/CornerTop.vue

@@ -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>

src/components/common/LoginBg/components/index.ts

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

src/components/common/LoginBg/index.vue

@@ -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>

src/components/common/SystemLogo/index.vue

@@ -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>

src/components/common/index.ts

@@ -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 };