107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
<template>
|
|
<div class="content blue" ref="content">
|
|
<jxHeader
|
|
:title="title"
|
|
@switchColor="switchColor"
|
|
/>
|
|
<div class="body-container">
|
|
<div v-show="$route.meta.guidePath !== '4'" class="tabs_wrap">
|
|
<ul class="tabs">
|
|
<li v-for="i in menus" :key="i.index">
|
|
<router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="main-container" :style="$route.meta.guidePath !== '4' ? 'height: calc(100% - 44px)' : 'height: 100%'">
|
|
<keep-alive :include="keepAlive" >
|
|
<router-view/>
|
|
</keep-alive>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import jxHeader from '@components/header.vue'
|
|
export default {
|
|
components: {
|
|
jxHeader
|
|
},
|
|
data () {
|
|
return {
|
|
menus: [
|
|
{
|
|
label: '清洗上料',
|
|
router: '/cleaningloading'
|
|
},
|
|
{
|
|
label: '清洗下料',
|
|
router: '/cleaningcutting'
|
|
},
|
|
{
|
|
label: '人工倒料',
|
|
router: '/manpour'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
title () {
|
|
let res = ['清洗上料', '清洗下料', '人工倒料', '选择物料'][Number(this.$route.meta.guidePath) - 1]
|
|
return res
|
|
},
|
|
...mapGetters(['keepAlive'])
|
|
},
|
|
methods: {
|
|
switchColor (type) {
|
|
switch (type) {
|
|
case 1:
|
|
this.$refs.content.classList.value = 'content overall_orange'
|
|
break
|
|
case 2:
|
|
this.$refs.content.classList.value = 'content overall_lightgreen'
|
|
break
|
|
case 3:
|
|
this.$refs.content.classList.value = 'content overall_blue'
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin.styl'
|
|
.content
|
|
_wh(100%, 100vh)
|
|
.body-container
|
|
_wh(calc(100% - 30px), calc(100% - 55px))
|
|
margin 0 auto 10px
|
|
padding 5px
|
|
border 1px solid #484cce
|
|
.tabs_wrap
|
|
height 34px
|
|
margin-bottom 10px
|
|
.tabs
|
|
height 34px
|
|
li
|
|
float left
|
|
line-height 32px
|
|
text-align center
|
|
padding-right 10px
|
|
a
|
|
display inline-block
|
|
color #fff
|
|
width 100%
|
|
padding 0 10px
|
|
font-size 14px
|
|
border-bottom 1px solid #2aa6f9
|
|
.router-link-active
|
|
background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
|
|
border-top-left-radius 12px
|
|
border-top-right-radius 12px
|
|
.main-container
|
|
width 100%
|
|
</style>
|