99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
onMounted,
|
|
computed,
|
|
defineAsyncComponent,
|
|
shallowRef,
|
|
watch,
|
|
} from 'vue';
|
|
import { parseUrlPath } from '@/plugins/file-static-url';
|
|
import { fnRestStepState, stepState } from './hooks/useStep';
|
|
import useAppStore from '@/store/modules/app';
|
|
import useI18n from '@/hooks/useI18n';
|
|
const appStore = useAppStore();
|
|
const { t } = useI18n();
|
|
|
|
// 判断是否有背景地址
|
|
const calcBG = computed(() => {
|
|
const bgURL = parseUrlPath(appStore.loginBackground);
|
|
if (bgURL && bgURL !== '#') {
|
|
return {
|
|
backgroundImage: `url(${bgURL})`,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'cover',
|
|
};
|
|
}
|
|
return undefined;
|
|
});
|
|
|
|
// 异步加载组件
|
|
const currentComponent = shallowRef(
|
|
defineAsyncComponent(() => import('./components/Start.vue'))
|
|
);
|
|
|
|
watch(
|
|
() => stepState.stepName,
|
|
v => {
|
|
const loadComponent = defineAsyncComponent(
|
|
() => import(`./components/${v}.vue`)
|
|
);
|
|
currentComponent.value = loadComponent;
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
fnRestStepState(t);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container" :style="calcBG">
|
|
<a-card :bordered="false" class="build-card">
|
|
<!-- 网元安装步骤进度 -->
|
|
<a-steps
|
|
v-if="stepState.neStepsCurrent != -1"
|
|
:current="stepState.neStepsCurrent"
|
|
direction="horizontal"
|
|
type="navigation"
|
|
>
|
|
<a-step
|
|
v-for="s in stepState.neSteps"
|
|
:key="s.title"
|
|
:title="s.title"
|
|
:description="s.description"
|
|
:disabled="true"
|
|
/>
|
|
</a-steps>
|
|
|
|
<!-- 步骤页面 -->
|
|
<component :is="currentComponent" />
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
|
|
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
|
|
|
background-image: url(@/assets/background.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
.build-card {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 50%;
|
|
min-width: 360px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|