| | |
|---|
| | | const { t } = useI18n() |
|---|
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
|---|
| | | const store = userInfo() |
|---|
| | | |
|---|
| | | const isCollapse = ref(false); |
|---|
| | | // const { $i18n } = useI18n(); // 获取 i18n 实例 |
|---|
| | | const router = useRouter() |
|---|
| | | const userStore = useUserInfoStore() |
|---|
| | | const user = userStore.user.userName |
|---|
| | | // const user = userStore.user.userName |
|---|
| | | |
|---|
| | | let userInfoStr = window.localStorage.getItem('userInfo') |
|---|
| | | console.log(userInfoStr); |
|---|
| | |
|---|
| | | openFlag = menuID |
|---|
| | | } |
|---|
| | | } |
|---|
| | | function toggleCollapse() { |
|---|
| | | isCollapse.value = !isCollapse.value; |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | |
|---|
| | | alt="" |
|---|
| | | style="max-width: 100%;max-height: 100%"> |
|---|
| | | <h3 style="margin: 1rem ;font-weight: bold;width: 33vw;"> {{ $t('main.titleFirst') }}{{ userName }}{{ $t('main.titleLast') }}</h3> |
|---|
| | | <!-- <div class="header-left"> |
|---|
| | | <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" |
|---|
| | | style="height:30px;"></el-button> |
|---|
| | | </div> --> |
|---|
| | | <span style="height: 70%;width: 78vw;margin-top: 1rem;"> |
|---|
| | | <!-- <el-button class="sys-quit" |
|---|
| | | @click="quit" |
|---|
| | |
|---|
| | | <SwitchButton size=""/>{{ $t('main.quit') }} |
|---|
| | | </el-icon> |
|---|
| | | </el-button> |
|---|
| | | <div class="header-left"> |
|---|
| | | <el-button @click="toggleCollapse" |
|---|
| | | style="height:30px;">☰</el-button> |
|---|
| | | <!-- <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" |
|---|
| | | style="height:30px;"></el-button> --> |
|---|
| | | </div> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </el-header> |
|---|
| | | <div id="line"></div> |
|---|
| | | <el-container> |
|---|
| | | <!-- <el-aside width="160px" |
|---|
| | | style="height: 99%; background-color: #fff;"> |
|---|
| | | <div class="menu"> |
|---|
| | | <div v-for="items in menuList"> |
|---|
| | | <div class='menu_title' |
|---|
| | | @click="openMenu(items.id)"> |
|---|
| | | <span>☰</span> |
|---|
| | | {{ items.menuName }} |
|---|
| | | </div> |
|---|
| | | <ul class='enter-x-left' |
|---|
| | | v-show="openFlag==items.id"> |
|---|
| | | <li v-for="menuItem in items.children" |
|---|
| | | style="margin-bottom:2px"> |
|---|
| | | <router-link :to="{path:menuItem.url}"> |
|---|
| | | {{ menuItem.menuName }} |
|---|
| | | </router-link> |
|---|
| | | </el-aside> --> |
|---|
| | | <el-aside :width="isCollapse ? '30px' : '200px'" style="background-color: #fff;"> |
|---|
| | | <el-row :span="20"> |
|---|
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" background-color="#fff"> |
|---|
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" > |
|---|
| | | <div class="menu"> |
|---|
| | | <div v-for="items in menuList"> |
|---|
| | | <div class='menu_title' |
|---|
| | | <div class='menu_title' v-show="!isCollapse" |
|---|
| | | @click="openMenu(items.id)"> |
|---|
| | | <span>☰</span> |
|---|
| | | {{ items.menuName }} |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </el-menu> |
|---|
| | | </el-row> |
|---|
| | | </el-aside> |
|---|
| | | <el-main> |
|---|
| | | <div id="main"> |
|---|
| | | <router-view></router-view> |
|---|
| | | </div> |
|---|
| | | </el-main> |
|---|
| | | |
|---|
| | | </el-container> |
|---|
| | | </el-container> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | transform: translateX(0); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .header-left{ |
|---|
| | | margin-left: -350px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
