146 lines
3.2 KiB
Vue
146 lines
3.2 KiB
Vue
<template>
|
|
<div class="index-container">
|
|
<div class="header-container">
|
|
<div class="title-container">
|
|
<span class="company-logo"></span>
|
|
</div>
|
|
<div class="horizontal-menu-container">
|
|
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
|
|
<el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<div class="state-container">
|
|
<div class="state-item">运行</div>
|
|
<div class="state-line"></div>
|
|
<div class="state-item">自动</div>
|
|
<div class="state-line"></div>
|
|
<div class="state-item">中文<i class="icon_dropdown"></i></div>
|
|
</div>
|
|
<div class="user-container">
|
|
<div class="elec-qty-wrap">
|
|
<div class="elec-qty"></div>
|
|
</div>
|
|
<div class="elec-txt">90%</div>
|
|
<div class="iconfont icon_admin"></div>
|
|
<div class="elec-txt">admin</div>
|
|
</div>
|
|
<div class="time-container">
|
|
<jxTime></jxTime>
|
|
</div>
|
|
</div>
|
|
<router-view></router-view>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import jxTime from '@components/time.vue'
|
|
export default {
|
|
components: {
|
|
jxTime
|
|
},
|
|
data () {
|
|
return {
|
|
activeIndex: this.$store.getters.defaultActive,
|
|
menus: [{
|
|
label: '首页',
|
|
index: '1',
|
|
router: '/homehome'
|
|
}, {
|
|
label: '任务管理',
|
|
index: '2',
|
|
router: '/CarryPoint'
|
|
}, {
|
|
label: '故障管理',
|
|
index: '3',
|
|
router: '/ErrorDeal'
|
|
}, {
|
|
label: '车辆信息',
|
|
index: '4',
|
|
router: '/vehiclestatus'
|
|
}, {
|
|
label: '示教',
|
|
index: '5',
|
|
router: '/teach'
|
|
}, {
|
|
label: '地图',
|
|
index: '6',
|
|
router: ''
|
|
}, {
|
|
label: '开发者',
|
|
index: '7',
|
|
router: ''
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
handleSelect (key) {
|
|
this.activeIndex = key
|
|
this.$store.dispatch('getDefaultActive', key)
|
|
this.$router.push({
|
|
path: this.menus[Number(key) - 1].router
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.index-container
|
|
_wh(100%, 100%)
|
|
.header-container
|
|
_fj()
|
|
_wh(100%, 61px)
|
|
padding 0 10px
|
|
border-bottom 2px solid #f1f1f1
|
|
.title-container
|
|
_fj(center)
|
|
_wh(130px, 61px)
|
|
.company-logo
|
|
display block
|
|
_wh(100%, 100%)
|
|
background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
|
|
.horizontal-menu-container
|
|
height 61px
|
|
>>>.el-menu-item
|
|
padding 0 7px
|
|
.state-container
|
|
_fj()
|
|
.user-container
|
|
_fj()
|
|
.time-container
|
|
_fj()
|
|
.state-item
|
|
border 1px solid #54C0B3
|
|
border-radius 4px
|
|
_font(15px,25px,#54C0B3,,center)
|
|
padding 0 7px
|
|
.state-line
|
|
_wh(2px,20px)
|
|
opacity 0.3
|
|
background #8991A6
|
|
margin 0 10px
|
|
.elec-qty-wrap
|
|
position relative
|
|
width 15px
|
|
height 25px
|
|
border 1px solid #dddddd
|
|
margin-right 2px
|
|
.elec-qty
|
|
position absolute
|
|
width 100%
|
|
height 90%
|
|
left 0
|
|
bottom 0
|
|
background-color #54C0B3
|
|
// background-color #fa6400
|
|
.elec-txt
|
|
_font(15px, 25px, #909399,,left)
|
|
margin-right 10px
|
|
.icon_admin
|
|
_font(20px, 25px, #54C0B3,,left)
|
|
margin-right 2px
|
|
>>>.el-menu
|
|
border-right none
|
|
</style>
|