course_resource/src/views/main.vue

<template>
    <div class="main">
        <!-- <BannerVue></BannerVue> -->
        <CourseSelect></CourseSelect>
        <resource></resource>
        <Practice></Practice>
        <other v-if="isupdateCourse"></other>
        <Edu v-if="isupdateCourse"></Edu>
    </div>
</template>
<script setup>
import { ref,watchEffect } from 'vue';
import BannerVue from '@/components/main/banner.vue'
import CourseSelect from '@/components/main/courseSelect.vue'
import resource from '@/components/main/resource.vue';
import Practice from '@/components/main/Practice.vue';
import other from '@/components/main/other.vue';
import Edu from '@/components/main/edu.vue';
import { userInfoStore } from '../stores/counter'

const user = userInfoStore()
const isupdateCourse = ref(false)

watchEffect(() => {
  if (JSON.stringify(user.user) != "{}") {
    isLogin.value = true
    userName.value = user.user.userName
    if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher"|| user.user.currentRole == "visitor") {
      isupdateCourse.value = true
    }
  }
})
</script>
<style lang="scss" scoped>
.main{
    background: #F0F2F5;
    padding: 20px 10%;
    min-height: calc(100% - 60px);
}

</style>