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 Layout from '@/layout/index.vue' |
||||
|
||||
const routes = [ |
||||
{ |
||||
path: '/', |
||||
name: 'Home', |
||||
component: () => import('../views/Home.vue') |
||||
path: "/", |
||||
name: "Home", |
||||
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', |
||||
name: 'About', |
||||
component: () => import('../views/About.vue') |
||||
}, |
||||
path: "/:pathMatch(.*)*", |
||||
name: "404", |
||||
redirect: "/404" |
||||
} |
||||
] |
||||
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