decorate/src/layout/system.vue

<template>
  <a-layout class="layout">
    <div class="content">
      <div class="sys">
        <img
          style="width: 222px; height: 68px"
          :src="`./images/login_sync_logo.png`"
        />
        <!-- <i class="iconfont icon-logo_login" /> -->
        <!-- <h1>四维工地管家</h1>
        <p>Project Management Systems</p> -->
      </div>
      <div class="action">
        <RouterView v-slot="{ Component }">
          <KeepAlive>
            <component :is="Component" />
          </KeepAlive>
        </RouterView>
      </div>
    </div>
  </a-layout>
</template>

<script lang="ts" setup>
import { lang, langNameEum } from '@/lang'
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100%;
  background: #275ec4 url(@/assets/images/bg.png) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.content {
  padding: 0 18.75%;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sys i {
  font-size: 500px;
  color: #fff;
}

.sys img {
  width: 500px;
}

.sys h1 {
  font-size: 48px;
  color: #fff;
  margin-bottom: 10px;
}

.sys p {
  font-weight: 400;
  font-size: 26px;
  color: #ffffff;
}

.action {
  flex: none;
  padding: 40px 40px 33px;
  background-color: #fff;
  box-shadow: 0px 2px 20px 0px rgba(5, 38, 38, 0.15);
  border-radius: 10px;
}
</style>