<template>
|
<div class="home">
|
<div class="header">作战实验条件建设</div>
|
<div class="tab" v-if="name != '门户'">
|
<div
|
:class="name == item.name ? 'item-height' : 'item'"
|
v-for="(item, index) in tab"
|
:key="index"
|
@click="tabChange(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
<div class="btn">
|
<img src="../assets/img/home/home.png" alt="" />
|
<img
|
src="../assets/img/home/return.png"
|
alt=""
|
v-show="name != '门户'"
|
@click="toDoor"
|
/>
|
</div>
|
<div class="content">
|
<router-view :key="key" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
computed: {
|
tab() {
|
return this.$store.state.user.tab;
|
},
|
|
key() {
|
return this.$route.path;
|
}
|
},
|
mounted() {
|
this.$watch("$route", (to, from) => {
|
this.name = to.name;
|
});
|
},
|
data() {
|
return {
|
name: "门户"
|
};
|
},
|
methods: {
|
tabChange(e) {
|
this.$router.push(e.url);
|
},
|
toDoor() {
|
this.$router.push("/home/door");
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.home {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: #091631;
|
.header {
|
width: 100%;
|
height: 87px;
|
line-height: 87px;
|
background: url("../assets/img/home/header_bg.png");
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
font-size: 48px;
|
color: #00e7fb;
|
text-align: center;
|
}
|
.btn {
|
position: absolute;
|
top: 60px;
|
right: 60px;
|
img {
|
margin-left: 10px;
|
}
|
}
|
.tab {
|
position: absolute;
|
top: 60px;
|
left: 200px;
|
display: flex;
|
:nth-child(3) {
|
margin-left: 480px;
|
}
|
.item {
|
width: 256px;
|
height: 75px;
|
line-height: 75px;
|
text-align: center;
|
background: url("../assets/img/home/tab.png");
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
font-size: 28px;
|
color: #ffffff;
|
}
|
.item-height {
|
width: 256px;
|
height: 75px;
|
line-height: 75px;
|
text-align: center;
|
background: url("../assets/img/home/tab_height.png");
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
font-size: 28px;
|
color: #ffffff;
|
}
|
}
|
.content {
|
margin-top: 60px;
|
}
|
}
|
</style>
|
