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