feat: 登录页搭建
This commit is contained in:
wf
parent
83786f67e5
commit
18d39f423f
130
src/auto-import.d.ts
vendored
130
src/auto-import.d.ts
vendored
@ -5,79 +5,67 @@
|
|||||||
// Generated by unplugin-auto-import
|
// Generated by unplugin-auto-import
|
||||||
export {}
|
export {}
|
||||||
declare global {
|
declare global {
|
||||||
const EffectScope: (typeof import("vue"))["EffectScope"];
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
const computed: (typeof import("vue"))["computed"];
|
const computed: typeof import('vue')['computed']
|
||||||
const createApp: (typeof import("vue"))["createApp"];
|
const createApp: typeof import('vue')['createApp']
|
||||||
const customRef: (typeof import("vue"))["customRef"];
|
const customRef: typeof import('vue')['customRef']
|
||||||
const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
|
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||||
const defineComponent: (typeof import("vue"))["defineComponent"];
|
const defineComponent: typeof import('vue')['defineComponent']
|
||||||
const effectScope: (typeof import("vue"))["effectScope"];
|
const effectScope: typeof import('vue')['effectScope']
|
||||||
const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
|
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||||
const h: (typeof import("vue"))["h"];
|
const h: typeof import('vue')['h']
|
||||||
const inject: (typeof import("vue"))["inject"];
|
const inject: typeof import('vue')['inject']
|
||||||
const isProxy: (typeof import("vue"))["isProxy"];
|
const isProxy: typeof import('vue')['isProxy']
|
||||||
const isReactive: (typeof import("vue"))["isReactive"];
|
const isReactive: typeof import('vue')['isReactive']
|
||||||
const isReadonly: (typeof import("vue"))["isReadonly"];
|
const isReadonly: typeof import('vue')['isReadonly']
|
||||||
const isRef: (typeof import("vue"))["isRef"];
|
const isRef: typeof import('vue')['isRef']
|
||||||
const markRaw: (typeof import("vue"))["markRaw"];
|
const markRaw: typeof import('vue')['markRaw']
|
||||||
const nextTick: (typeof import("vue"))["nextTick"];
|
const nextTick: typeof import('vue')['nextTick']
|
||||||
const onActivated: (typeof import("vue"))["onActivated"];
|
const onActivated: typeof import('vue')['onActivated']
|
||||||
const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
|
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||||
const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
|
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||||
const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
|
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||||
const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
|
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||||
const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
|
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||||
const onDeactivated: (typeof import("vue"))["onDeactivated"];
|
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||||
const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
|
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||||
const onMounted: (typeof import("vue"))["onMounted"];
|
const onMounted: typeof import('vue')['onMounted']
|
||||||
const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
|
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||||
const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
|
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||||
const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
|
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||||
const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
const onUnmounted: (typeof import("vue"))["onUnmounted"];
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
const onUpdated: (typeof import("vue"))["onUpdated"];
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
const provide: (typeof import("vue"))["provide"];
|
const provide: typeof import('vue')['provide']
|
||||||
const reactive: (typeof import("vue"))["reactive"];
|
const reactive: typeof import('vue')['reactive']
|
||||||
const readonly: (typeof import("vue"))["readonly"];
|
const readonly: typeof import('vue')['readonly']
|
||||||
const ref: (typeof import("vue"))["ref"];
|
const ref: typeof import('vue')['ref']
|
||||||
const resolveComponent: (typeof import("vue"))["resolveComponent"];
|
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||||
const shallowReactive: (typeof import("vue"))["shallowReactive"];
|
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||||
const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
|
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||||
const shallowRef: (typeof import("vue"))["shallowRef"];
|
const shallowRef: typeof import('vue')['shallowRef']
|
||||||
const toRaw: (typeof import("vue"))["toRaw"];
|
const toRaw: typeof import('vue')['toRaw']
|
||||||
const toRef: (typeof import("vue"))["toRef"];
|
const toRef: typeof import('vue')['toRef']
|
||||||
const toRefs: (typeof import("vue"))["toRefs"];
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
const toValue: (typeof import("vue"))["toValue"];
|
const toValue: typeof import('vue')['toValue']
|
||||||
const triggerRef: (typeof import("vue"))["triggerRef"];
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
const unref: (typeof import("vue"))["unref"];
|
const unref: typeof import('vue')['unref']
|
||||||
const useAttrs: (typeof import("vue"))["useAttrs"];
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
const useCssModule: (typeof import("vue"))["useCssModule"];
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
const useCssVars: (typeof import("vue"))["useCssVars"];
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
const useLink: (typeof import("vue-router"))["useLink"];
|
const useLink: typeof import('vue-router')['useLink']
|
||||||
const useRoute: (typeof import("vue-router"))["useRoute"];
|
const useRoute: typeof import('vue-router')['useRoute']
|
||||||
const useRouter: (typeof import("vue-router"))["useRouter"];
|
const useRouter: typeof import('vue-router')['useRouter']
|
||||||
const useSlots: (typeof import("vue"))["useSlots"];
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
const watch: (typeof import("vue"))["watch"];
|
const watch: typeof import('vue')['watch']
|
||||||
const watchEffect: (typeof import("vue"))["watchEffect"];
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
|
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||||
}
|
}
|
||||||
// for type re-export
|
// for type re-export
|
||||||
declare global {
|
declare global {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export type {
|
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||||
Component,
|
import('vue')
|
||||||
ComponentPublicInstance,
|
|
||||||
ComputedRef,
|
|
||||||
ExtractDefaultPropTypes,
|
|
||||||
ExtractPropTypes,
|
|
||||||
ExtractPublicPropTypes,
|
|
||||||
InjectionKey,
|
|
||||||
PropType,
|
|
||||||
Ref,
|
|
||||||
VNode,
|
|
||||||
WritableComputedRef
|
|
||||||
} from "vue";
|
|
||||||
import("vue");
|
|
||||||
}
|
}
|
||||||
|
|||||||
8
src/components.d.ts
vendored
8
src/components.d.ts
vendored
@ -5,10 +5,10 @@
|
|||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
export {}
|
export {}
|
||||||
|
|
||||||
declare module "vue" {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
|
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,9 +22,16 @@ export const router = createRouter({
|
|||||||
// 路由加载前
|
// 路由加载前
|
||||||
router.beforeEach(async (to, from, next) => {
|
router.beforeEach(async (to, from, next) => {
|
||||||
NProgress.start(); // 开启进度条
|
NProgress.start(); // 开启进度条
|
||||||
initSetRouter();
|
|
||||||
next();
|
|
||||||
console.log(to, from);
|
console.log(to, from);
|
||||||
|
if (to.path === "/login" && !sessionStorage.getItem("token")) {
|
||||||
|
next();
|
||||||
|
} else if (!sessionStorage.getItem("token")) {
|
||||||
|
next("/login");
|
||||||
|
} else if (to.path === "/login" && sessionStorage.getItem("token")) {
|
||||||
|
next("/home");
|
||||||
|
} else {
|
||||||
|
await initSetRouter();
|
||||||
|
}
|
||||||
// if (to.path === "/login" && !sessionStorage.getItem("token")) {
|
// if (to.path === "/login" && !sessionStorage.getItem("token")) {
|
||||||
// next();
|
// next();
|
||||||
// } else if (!sessionStorage.getItem("token")) {
|
// } else if (!sessionStorage.getItem("token")) {
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
export function initSetRouter() {
|
export function initSetRouter() {
|
||||||
console.log("路由数据");
|
console.log("路由数据处理");
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,90 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>登录</div>
|
<div class="container">
|
||||||
|
<div class="logo_box">
|
||||||
|
<img :src="myImage" alt="logo" class="logo margin-right-text" />
|
||||||
|
DC Admin
|
||||||
|
</div>
|
||||||
|
<div class="banner">
|
||||||
|
<a-carousel
|
||||||
|
:style="{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}"
|
||||||
|
:default-current="2"
|
||||||
|
:auto-play="true"
|
||||||
|
animation-name="fade"
|
||||||
|
indicator-type="dot"
|
||||||
|
show-arrow="hover"
|
||||||
|
class="banner_box"
|
||||||
|
>
|
||||||
|
<a-carousel-item v-for="item in banner" :key="item.id">
|
||||||
|
<div class="banner_inner"></div>
|
||||||
|
</a-carousel-item>
|
||||||
|
</a-carousel>
|
||||||
|
</div>
|
||||||
|
<div class="login">登录</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import myImage from "@/assets/img/my-image.jpg";
|
||||||
|
const banner = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "开箱即用的高质量模板",
|
||||||
|
desc: "丰富的的页面模板，覆盖大多数典型业务场景",
|
||||||
|
src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "内置了常见问题的解决方案",
|
||||||
|
desc: "国际化，路由配置，状态管理应有尽有",
|
||||||
|
src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "接入可视化增强工具",
|
||||||
|
desc: "实现灵活的区块式开发",
|
||||||
|
src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
.banner {
|
||||||
|
width: 550px;
|
||||||
|
height: 100%;
|
||||||
|
background: #eee;
|
||||||
|
.banner_box {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
|
||||||
|
.banner_inner {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.logo_box {
|
||||||
|
position: absolute;
|
||||||
|
left: $margin;
|
||||||
|
top: $margin;
|
||||||
|
margin: $margin;
|
||||||
|
color: #fff;
|
||||||
|
font-size: $font-size-title-2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
.logo {
|
||||||
|
width: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user