parent
84ec4ff1ae
commit
4f8e8fcb65
16 changed files with 294 additions and 78 deletions
@ -0,0 +1,70 @@ |
|||||||
|
<template> |
||||||
|
<div class="header-cont"> |
||||||
|
<div class="left"> |
||||||
|
<h1> |
||||||
|
<router-link to="/">权限管理系统</router-link> |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
<div class="right flex-center"> |
||||||
|
<div class="lang gap"> |
||||||
|
<span class="item active">简体中文</span> / |
||||||
|
<span class="item">En</span> |
||||||
|
</div> |
||||||
|
<div class="gap cursor"> |
||||||
|
<router-link to="/personal/message"><el-icon><message/></el-icon></router-link> |
||||||
|
</div> |
||||||
|
<el-dropdown trigger="click"> |
||||||
|
<div class="flex-center cursor"> |
||||||
|
这里是用户名 |
||||||
|
<el-icon><caret-bottom /></el-icon> |
||||||
|
</div> |
||||||
|
<template #dropdown> |
||||||
|
<el-dropdown-menu> |
||||||
|
<el-dropdown-item>个人中心</el-dropdown-item> |
||||||
|
<el-dropdown-item>退出</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</template> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import Message from "@/views/personal/Message.vue"; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.header-cont { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0 20px; |
||||||
|
height: 100%; |
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
margin: 0; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.gap { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
.lang { |
||||||
|
font-size: 14px; |
||||||
|
.item { |
||||||
|
cursor: pointer; |
||||||
|
&.active { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.el-dropdown { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div>这是侧边栏组件</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<template> |
||||||
|
<div class="page-container"> |
||||||
|
<header> |
||||||
|
<page-header></page-header> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<div v-if="showLeft" class="left"> |
||||||
|
<page-siderbar></page-siderbar> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import {useRoute} from "vue-router"; |
||||||
|
import {computed} from "vue"; |
||||||
|
|
||||||
|
import PageHeader from "@/layout/components/PageHeader.vue"; |
||||||
|
import PageSiderbar from "@/layout/components/PageSiderbar.vue"; |
||||||
|
|
||||||
|
const route = useRoute() |
||||||
|
const showLeft = computed(() => { |
||||||
|
const routeName = route.name; |
||||||
|
return !['Login', 'NotFound'].includes(routeName) && !/^Personal/.test(routeName); |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.page-container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
> header { |
||||||
|
height: 54px; |
||||||
|
background: #000000; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
> main { |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
> .left { |
||||||
|
height: 100%; |
||||||
|
background-color: #000000; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
> .right { |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #f5f7f9; |
||||||
|
> .main-body { |
||||||
|
padding: 16px 16px 30px; |
||||||
|
overflow: auto; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,17 +1,56 @@ |
|||||||
import {createRouter, createWebHashHistory} from 'vue-router' |
import {createRouter, createWebHashHistory} from 'vue-router' |
||||||
|
import Layout from '@/layout/index.vue' |
||||||
|
|
||||||
const routes = [ |
const routes = [ |
||||||
{ |
{ |
||||||
path: '/', |
path: "/", |
||||||
name: 'Home', |
name: "Home", |
||||||
component: () => import('../views/Home.vue') |
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: "login", |
||||||
|
name: "Login", |
||||||
|
component: () => import("@/views/login/index.vue") |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: "404", |
||||||
|
name: "NotFound", |
||||||
|
component: () => import("@/views/404.vue") |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: "personal", |
||||||
|
name: "Personal", |
||||||
|
meta: { |
||||||
|
requireAuth: true, |
||||||
|
}, |
||||||
|
component: () => import("@/views/personal/index.vue"), |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: "message", |
||||||
|
name: "PersonalMessage", |
||||||
|
meta: { |
||||||
|
requireAuth: true, |
||||||
|
}, |
||||||
|
component: () => import("@/views/personal/Message.vue") |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: "app", |
||||||
|
name: "App", |
||||||
|
meta: { |
||||||
|
requireAuth: true, |
||||||
|
}, |
||||||
|
component: () => import("@/views/app/index.vue") |
||||||
|
}, |
||||||
|
] |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
path: '/About', |
path: "/:pathMatch(.*)*", |
||||||
name: 'About', |
name: "404", |
||||||
component: () => import('../views/About.vue') |
redirect: "/404" |
||||||
}, |
} |
||||||
] |
] |
||||||
const router = createRouter({history: createWebHashHistory(), routes}) |
const router = createRouter({history: createWebHashHistory(), routes}) |
||||||
|
|
||||||
export default router |
export default router |
||||||
|
|||||||
@ -0,0 +1,11 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h1>这是404页面</h1> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,24 +0,0 @@ |
|||||||
<template> |
|
||||||
这是About页面 |
|
||||||
<hr> |
|
||||||
<button @click="increase">增加</button> |
|
||||||
<hr> |
|
||||||
count: {{ count }} |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup> |
|
||||||
import {useStore} from "vuex"; |
|
||||||
import {ref} from "vue"; |
|
||||||
|
|
||||||
const store = useStore() |
|
||||||
let count = ref(3); |
|
||||||
|
|
||||||
function increase() { |
|
||||||
count.value ++; |
|
||||||
store.commit('increase', count.value); |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
<template> |
|
||||||
这是Home页面 |
|
||||||
<hr> |
|
||||||
<div class="wrap"> |
|
||||||
<p>count: {{ count }}</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup> |
|
||||||
import {computed} from "vue"; |
|
||||||
import {useStore} from "vuex"; |
|
||||||
|
|
||||||
const store = useStore() |
|
||||||
const count = computed(() => store.state.count) |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.wrap { |
|
||||||
background: yellow; |
|
||||||
p { |
|
||||||
color: blue; |
|
||||||
font-size: 24px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h1>这是内部首页</h1> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h1>这是登录页面</h1> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h1>这是个人中心消息页面</h1> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h1>这是个人中心页面</h1> |
||||||
|
<router-view></router-view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue