water_maintenance/src/view/student/layout/index.vue

<template>
    <el-container class="layout-container" :class="{ blur: mainContainer.isBlur }">
        <el-header class="layout-header">
            <div class="title-container">
                <span v-for="item in title" class="title-text">{{ item }}</span>
            </div>
        </el-header>
        <el-main class="layout-main">
            <el-scrollbar class="layout-main-scrollbar" ref="mainScrollbarRef">
                <router-view v-slot="{ Component }">
                    <transition name="el-zoom-in-center" mode="out-in">
                        <keep-alive :include="state.keepAliveComponentNameList">
                            <component :is="Component" :key="state.componentKey" />
                        </keep-alive>
                    </transition>
                </router-view>
            </el-scrollbar>
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeMount, onMounted, provide } from 'vue';
import { useRoute } from 'vue-router';
import { useUserInfo } from '@/stores/userInfo';
import router from '@/router/index';

const userInfo = useUserInfo();
const route = useRoute();
const title = ref('排水管网运维养护虚拟仿真教学平台');
const state: {
    componentKey: string;
    keepAliveComponentNameList: string[];
} = reactive({
    componentKey: route.path,
    keepAliveComponentNameList: [],
});

const mainContainer = reactive({
    isBlur: false,
});

provide('mainContainer', mainContainer);
onBeforeMount(() => {
    if (userInfo.userType != 0) {
        userInfo.removeToken();
        router.push({ path: '/' });
    }
});
onMounted(() => {
    if (route.path == '/train') {
        router.push({ path: '/train/list' });
    }
});
</script>

<style lang="scss" scoped>
.layout-container {
    height: 100%;
    width: 100%;
    background-image: url(/src/assets/student/bg.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #000911;
    &.blur {
        filter: blur(20px);
    }
    .el-main {
        padding: 0;
    }
}
.layout-header {
    background-image: url(/src/assets/student/header.png);
    background-size: 100% 100%;
    text-align: center;
    height: 6rem;
    line-height: 5rem;
    font-size: 2rem;
    color: white;

    position: relative;
    z-index: 2;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-2rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.title-text {
    display: inline-block;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

@for $i from 1 through 16 {
    .title-text:nth-child(#{$i}) {
        animation-delay: #{$i * 0.05}s;
    }
}
</style>