caseEditor/src/view/system/index.vue

<template>
  <div class="system-layer" :style="{ backgroundImage: `url(${appConstant.banner})` }">
    <div class="content">
      <component :is="component" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import login from "./login.vue";
import register from "./register.vue";
import forget from "./forget.vue";
import { computed } from "vue";
import { RouteName, router } from "@/router";
import { appConstant } from "@/app";

const components = {
  [RouteName.login]: login,
  [RouteName.register]: register,
  [RouteName.forget]: forget,
};
const component = computed(() => {
  const name = router.currentRoute.value.name as any;
  if (name in components) {
    return (components as any)[name];
  } else {
    return null;
  }
});
</script>

<style lang="scss" scoped>
.system-layer {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: no-repeat left bottom;
  background-size: cover;
}

.content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
</style>