layouts布局重构！
张鑫
5 years ago
parent
37a58efeca
commit
42e5873ccf
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="header-top">
|
||||
<div class="header-top-company">昆船随行式垛机监测系统</div>
|
||||
<div class="header-top-right">
|
||||
<div class="header-top-right-circle" @click="visible = !visible"></div>
|
||||
<a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
|
||||
<a href="javascript:;">
|
||||
{{
|
||||
userInfo.name ? userInfo.name : "userName"
|
||||
}}
|
||||
</a>
|
||||
<div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
|
||||
<a
|
||||
class="block mb16"
|
||||
href="javascript:;"
|
||||
@click="visible = false;$router.push({name: 'center'})"
|
||||
>个人中心</a>
|
||||
<a href="javascript:;" @click="logout">退出登录</a>
|
||||
</div>
|
||||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
name: "the-header",
|
||||
computed: {
|
||||
...mapState(["userInfo"])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["setState"]),
|
||||
logout() {
|
||||
this.visible = false;
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
this.$axios({
|
||||
url: "/app/userCenter",
|
||||
method: "GET"
|
||||
}).then(res => {
|
||||
window.open(res.data.url + "?action=logout", "_self");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
background: #eeeeee;
|
||||
&-top {
|
||||
z-index: 10;
|
||||
height: 48px;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
background-color: #001529;
|
||||
&-company {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
&-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
|
||||
<router-link
|
||||
v-if="item.name != name && index != 1"
|
||||
:to="{ path: item.path === '' ? '/' : item.path }"
|
||||
>{{ item.meta.name }}</router-link>
|
||||
<span v-else>{{ item.meta.name }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
name: "Breadcrumb",
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
breadList: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb () {
|
||||
this.breadList = []
|
||||
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
|
||||
|
||||
this.name = this.$route.name
|
||||
console.log(this.$route.matched)
|
||||
this.$route.matched.forEach(item => {
|
||||
// item.name !== 'index' && this.breadList.push(item)
|
||||
this.breadList.push(item)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.breadcrumb{
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<!-- 面包屑下标题 -->
|
||||
<div class="wrap-title" v-if="$route.meta.name">
|
||||
<span class="wrap-title-text">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
<router-view class="sss"></router-view>
|
||||
<!-- footer -->
|
||||
<div class="wrap-footer bg-white">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
name: "PageContent",
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
footerStyle: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(route) {
|
||||
this.title = route.meta.title || route.meta.name;
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.title = this.$route.meta.title || this.$route.meta.name;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
&-title {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0 20px 24px;
|
||||
font-size: 18px;
|
||||
&-text {
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
&-cont {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 24px;
|
||||
|
||||
&-cover {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
background-color: #fff;
|
||||
& > div {
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding-left: 256px;
|
||||
// padding-left: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div :class="['header', collapsed ? 'collapsed-header' :'']">
|
||||
<div class="header-left">
|
||||
<a-layout-header style="background: #fff; padding: 0">
|
||||
<a-icon
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||||
@click="collapsedFlag"
|
||||
/>
|
||||
</a-layout-header>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-top-right-circle" @click="visible = !visible"></div>
|
||||
<a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
|
||||
<a href="javascript:;">
|
||||
{{
|
||||
userInfo.name ? userInfo.name : "userName"
|
||||
}}
|
||||
</a>
|
||||
<div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
|
||||
<a
|
||||
class="block mb16"
|
||||
href="javascript:;"
|
||||
@click="visible = false;$router.push({name: 'center'})"
|
||||
>个人中心</a>
|
||||
<a href="javascript:;" @click="logout">退出登录</a>
|
||||
</div>
|
||||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapMutations, mapGetters} from "vuex";
|
||||
export default {
|
||||
name: "PageHeader",
|
||||
computed: {
|
||||
...mapState(["aside_collapsed", "userInfo"]),
|
||||
...mapGetters(['getAside_collapsed'])
|
||||
},
|
||||
watch: {
|
||||
getAside_collapsed: function (newValue) {
|
||||
console.log(newValue)
|
||||
this.collapsed = newValue
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
collapsed:false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(["setState"]),
|
||||
logout() {
|
||||
this.visible = false;
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
this.$axios({
|
||||
url: "/app/userCenter",
|
||||
method: "GET"
|
||||
}).then(res => {
|
||||
window.open(res.data.url + "?action=logout", "_self");
|
||||
});
|
||||
},
|
||||
collapsedFlag(){
|
||||
// console.log(11111)
|
||||
this.collapsed = !this.collapsed
|
||||
this.$store.commit('aside_collapsed',this.collapsed);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
background: #ffffff;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
/*border: solid 1px skyblue;*/
|
||||
box-shadow: 0px 2px 5px rgba(0, 21, 41, 0.15);
|
||||
/*margin-bottom: 2px;*/
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: calc(100% - 270px);
|
||||
&-left{
|
||||
.trigger{
|
||||
font-size: 18px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-right: 20px;
|
||||
&-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapsed-header{
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
import Vue from 'vue';
|
||||
// 注册全局组件
|
||||
const requireComponent = require.context('./', true, /\.vue$/);
|
||||
requireComponent.keys().map((filename) => {
|
||||
const componentConfig = requireComponent(filename).default;
|
||||
return Vue.component(componentConfig.name, componentConfig);
|
||||
});
|
||||
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>巷道管理页面</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue