| | |
| | | import deepClone from '@/utils/deepClone' |
| | | import { useRouter } from 'vue-router'; |
| | | import { useI18n } from 'vue-i18n' |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | 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 |
| | | |
| | | let userInfoStr = window.localStorage.getItem('userInfo') |
| | | console.log(userInfoStr); |
| | | // const userInfoStr = localStorage.getItem('userInfo'); |
| | |
| | | } |
| | | function replaceChineseWithRussian(menuData) { |
| | | // 定义中英文对照关系对象 |
| | | const translation = { |
| | | const translation = { |
| | | '上片机': 'Loading Machine', |
| | | '上片': 'Start showing a movie', |
| | | '掰片/识别': 'Breaking /Identification', |
| | |
| | | } |
| | | //提取菜单模块列表 |
| | | let menuList = $ref([]) |
| | | |
| | | request.get('/loadGlass/sys/menu/getMenuTree').then((res) => { |
| | | if (res.code == 200) { |
| | | menuList = res.data |
| | |
| | | }) |
| | | const menu = ref(null) |
| | | let indexKey = ref(null) |
| | | |
| | | function handleOpen(key) { |
| | | indexKey.value = key |
| | | } |
| | |
| | | }, |
| | | {deep: true} |
| | | ) |
| | | |
| | | router.beforeEach((to, from) => { |
| | | //return false |
| | | }) |
| | | |
| | | let openFlag = $ref(null) |
| | | //原始菜单打开 |
| | | const openMenu = (menuID) => { |
| | |
| | | isCollapse.value = !isCollapse.value; |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div id="all"> |
| | | <el-container> |
| | |
| | | </el-container> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | |
| | | .el-menu-vertical-demo:not(.el-menu--collapse) { |
| | | width: 200px; |
| | | min-height: 400px; |
| | | text-align: left; |
| | | |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | #all { |
| | | background-color: #eee; |
| | | height: 100%; |
| | | } |
| | | |
| | | .el-container { |
| | | height: 100vh; |
| | | width: 99vw; |
| | | } |
| | | |
| | | * { |
| | | padding: 0; |
| | | margin: 0; |
| | | } |
| | | |
| | | :deep(.sys-quit) { |
| | | float: right; |
| | | margin-right: 1rem; |
| | | width: 5rem; |
| | | } |
| | | |
| | | /* 横线 */ |
| | | #line { |
| | | float: right; |
| | |
| | | position: relative; |
| | | text-align: center; |
| | | } |
| | | |
| | | :deep(span) { |
| | | margin-right: 0; |
| | | } |
| | | |
| | | .el-collapse { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | #main { |
| | | width: 99%; |
| | | float: right; |
| | |
| | | background-color: #fff; |
| | | } |
| | | /*------------*/ |
| | | |
| | | /* .menu div div{ |
| | | |
| | | width: 138px; |
| | | height: 35px; |
| | | line-height: 35px; |
| | |
| | | /* background-color:#5CADFE; */ |
| | | /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */ |
| | | /* } */ |
| | | |
| | | .menu { |
| | | width: 138px; |
| | | height: 33px; |
| | | line-height: 25px; |
| | | |
| | | color: #000000; |
| | | font-size: 16px; |
| | | padding-left: 15px; |
| | | padding-right: 2px; |
| | | } |
| | | |
| | | ul { |
| | | height: auto; |
| | | margin: 1px auto; |
| | | text-align: center; |
| | | } |
| | | |
| | | ul li { |
| | | height: 28px; |
| | | width: 180px; |
| | |
| | | text-align: left; |
| | | /* border-radius:8px; */ |
| | | /* outline: none; */ |
| | | |
| | | /* background: #5CADFE; */ |
| | | /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */ |
| | | } |
| | | |
| | | ul li:hover { |
| | | /* background:#5CADFE ; */ |
| | | color: #ffffff; |
| | | } |
| | | |
| | | ul li a { |
| | | text-decoration: none; |
| | | color: #000000; |
| | |
| | | ul li a:hover { |
| | | color: #1087ff; |
| | | } |
| | | |
| | | .item_divider { |
| | | width: 118px; |
| | | height: 0px; |
| | |
| | | opacity: 0.8; */ |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .item a { |
| | | width: 138px; |
| | | height: 35px; |
| | |
| | | font-size: 14px; |
| | | text-decoration: none; |
| | | } |
| | | |
| | | .menu_title { |
| | | width: 180px; |
| | | /* white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; */ |
| | | |
| | | height: 45px; |
| | | line-height: 55px; |
| | | /* background: #fafafa; */ |
| | |
| | | font-weight: bold; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .menu_title:hover { |
| | | /* background: #dedede; */ |
| | | color: #3b9af9; |
| | | } |
| | | |
| | | .indicator { |
| | | display: block; |
| | | width: 40px; |
| | |
| | | transition: all 0.3s ease; |
| | | text-align: center; |
| | | } |
| | | |
| | | /* 动画效果 */ |
| | | .enter-x-left { |
| | | z-index: 9; |
| | |
| | | transform: translateX(-50px); |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .enter-x-left:nth-child(1) { |
| | | animation-delay: 0.1s; |
| | | } |
| | | |
| | | .enter-x-left:nth-child(2) { |
| | | animation-delay: 0.2s; |
| | | } |
| | | |
| | | .enter-x-left:nth-child(3) { |
| | | animation-delay: 0.3s; |
| | | } |
| | | |
| | | .enter-x-left:nth-child(4) { |
| | | animation-delay: 0.4s; |
| | | } |