mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-23 19:37:23 +08:00
admin-import
This commit is contained in:
xiaomlove
+170
-117
@@ -1,156 +1,209 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-row class="top-menu">
|
||||
<div class="part-left">
|
||||
<div class="layout">
|
||||
<el-container v-if="state.showMenu" class="container">
|
||||
<el-aside class="aside">
|
||||
<div class="head">
|
||||
<div>
|
||||
<a href="#">主站</a>
|
||||
<img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="logo">
|
||||
<span>vue3 admin</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="part-center">
|
||||
<el-menu
|
||||
:default-active="activeIndex2"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template #title>我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
<el-submenu index="2-4">
|
||||
<template #title>选项4</template>
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="part-right">
|
||||
<div>个人信息</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<div class="line" />
|
||||
<el-menu
|
||||
:uniqueOpened="true"
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
:default-openeds="state.defaultOpen"
|
||||
background-color="#222832"
|
||||
text-color="#fff"
|
||||
:router="true"
|
||||
:default-active='state.currentPath'
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template #title>
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
<span>Dashboard</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template #title>分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
<el-menu-item index="/introduce"><i class="el-icon-data-line" />系统介绍</el-menu-item>
|
||||
<el-menu-item index="/dashboard"><i class="el-icon-odometer" />Dashboard</el-menu-item>
|
||||
<el-menu-item index="/add"><i class="el-icon-plus" />添加商品</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template #title>选项4</template>
|
||||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<template #title>导航二</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<template #title>导航三</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<template #title>导航四</template>
|
||||
</el-menu-item>
|
||||
<el-submenu index="5">
|
||||
<el-submenu index="2">
|
||||
<template #title>
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
<span>首页配置</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template #title>分组一</template>
|
||||
<el-menu-item index="5-1">选项1</el-menu-item>
|
||||
<el-menu-item index="5-2">选项2</el-menu-item>
|
||||
<el-menu-item index="/swiper"><i class="el-icon-picture" />轮播图配置</el-menu-item>
|
||||
<el-menu-item index="/hot"><i class="el-icon-star-on" />热销商品配置</el-menu-item>
|
||||
<el-menu-item index="/new"><i class="el-icon-sell" />新品上线配置</el-menu-item>
|
||||
<el-menu-item index="/recommend"><i class="el-icon-thumb" />为你推荐配置</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="5-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template #title>
|
||||
<span>模块管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/category"><i class="el-icon-menu" />分类管理</el-menu-item>
|
||||
<el-menu-item index="/good"><i class="el-icon-s-goods" />商品管理</el-menu-item>
|
||||
<el-menu-item index="/guest"><i class="el-icon-user-solid" />会员管理</el-menu-item>
|
||||
<el-menu-item index="/order"><i class="el-icon-s-order" />订单管理</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="4">
|
||||
<template #title>
|
||||
<span>系统管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/account"><i class="el-icon-lock" />修改密码</el-menu-item>
|
||||
<!-- <el-menu-item><i class="el-icon-upload2" />安全退出</el-menu-item> -->
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
<el-container class="content">
|
||||
<Header />
|
||||
<div class="main">
|
||||
<router-view />
|
||||
</div>
|
||||
<Footer />
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container v-else class="container">
|
||||
<router-view />
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive } from 'vue'
|
||||
import Header from '@/components/Header.vue'
|
||||
import Footer from '@/components/Footer.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { pathMap, localGet } from '@/utils'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
};
|
||||
name: 'App',
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
console.log("select", this)
|
||||
},
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
console.log("open", this)
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
console.log("close", this)
|
||||
setup() {
|
||||
const noMenu = ['/login']
|
||||
const router = useRouter()
|
||||
const state = reactive({
|
||||
defaultOpen: ['1', '2', '3', '4'],
|
||||
showMenu: true,
|
||||
currentPath: '/dashboard',
|
||||
count: {
|
||||
number: 1
|
||||
}
|
||||
})
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.path == '/login') {
|
||||
// 如果路径是 /login 则正常执行
|
||||
next()
|
||||
} else {
|
||||
// 如果不是 /login，判断是否有 token
|
||||
if (!localGet('token')) {
|
||||
// 如果没有，则跳至登录页面
|
||||
next({ path: '/login' })
|
||||
} else {
|
||||
// 否则继续执行
|
||||
next()
|
||||
}
|
||||
}
|
||||
state.showMenu = !noMenu.includes(to.path)
|
||||
state.currentPath = to.path
|
||||
document.title = pathMap[to.name]
|
||||
})
|
||||
return {
|
||||
state
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.top-menu {
|
||||
background-color: rgb(84, 92, 100);
|
||||
padding: 0 30px;
|
||||
.part-left {
|
||||
<style scoped>
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
.aside {
|
||||
width: 200px!important;
|
||||
background-color: #222832;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
.aside::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.part-center {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
}
|
||||
.part-right {
|
||||
.head > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.head img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.head span {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.line {
|
||||
border-top: 1px solid hsla(0,0%,100%,.05);
|
||||
border-bottom: 1px solid rgba(0,0,0,.2);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main {
|
||||
height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none!important;
|
||||
}
|
||||
.el-submenu {
|
||||
border-top: 1px solid hsla(0, 0%, 100%, .05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
.el-submenu:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.el-submenu [class^="el-icon-"] {
|
||||
vertical-align: -1px!important;
|
||||
}
|
||||
a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user