121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<el-row type="flex" class="navs_wraper" justify="start" align="middle">
|
|
<el-col class="nav_item" v-for="(e, i) in visibleNav" :key="i" :class="'nav_item_' + (i + 1)">
|
|
<div class="nav_item_i" @click="toPage(e)">
|
|
<div class="nav_icon"></div>
|
|
<p>{{ e[$langPre.computedProp('title')] }}</p>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'MinniHome',
|
|
data () {
|
|
return {
|
|
disabled: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['userRole']),
|
|
nav () {
|
|
return [
|
|
{ title: '操作', zh_title: '操作', en_title: 'Operate', router: '/index/device', isVisible: true },
|
|
{ title: '建图', zh_title: '建图', en_title: 'Map - building', router: '/index/building', isVisible: this.userRole === 1 },
|
|
{ title: '地图', zh_title: '地图', en_title: 'Map', router: '/index/map', isVisible: true },
|
|
{ title: '重定位', zh_title: '重定位', en_title: 'Relocate', router: '/index/relocation', isVisible: true }
|
|
]
|
|
},
|
|
visibleNav () {
|
|
return this.nav.filter(item => item.isVisible)
|
|
}
|
|
},
|
|
methods: {
|
|
toPage (e) {
|
|
if (e.router === '/index/building') {
|
|
this.$confirm(this.$t('Donewmap'), this.$t('Prompt'), {
|
|
confirmButtonText: this.$t('Confirm'),
|
|
cancelButtonText: this.$t('Cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$router.push(e.router)
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: this.$t('Mapbuildingcancel')
|
|
})
|
|
})
|
|
return
|
|
}
|
|
this.$router.push(e.router)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '../../style/mixin'
|
|
.navs_wraper
|
|
width 100%
|
|
padding 2% 2.5% 0 2.5%
|
|
flex-wrap wrap
|
|
align-content center
|
|
.nav_item
|
|
width 32%
|
|
height 47%
|
|
padding 0.9%
|
|
color #fff
|
|
font-size .2rem
|
|
border 1px solid #2f9ae3
|
|
background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
|
|
linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);
|
|
background-size: 12px 12px;
|
|
background-repeat: repeat;
|
|
cursor pointer
|
|
margin-bottom 2%
|
|
&:nth-child(3n+2)
|
|
margin-left 2%
|
|
margin-right 2%
|
|
.nav_item_i
|
|
_fj(center,,column)
|
|
height 100%
|
|
padding .1rem
|
|
background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
|
|
border-top: 3px solid #2fb4f2;
|
|
border-left: 3px solid #40c2f7;
|
|
border-right: 3px solid #5dddf8;
|
|
border-bottom: 3px solid #6abde9;
|
|
box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
|
|
p
|
|
font-size .4rem
|
|
line-height 1
|
|
color #F6F9FE
|
|
font-family 'YouSheBiaoTiHei'
|
|
background linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%)
|
|
-webkit-background-clip: text
|
|
-webkit-text-fill-color: transparent
|
|
.nav_icon
|
|
width 35%
|
|
padding-top 35%
|
|
border-radius 50%
|
|
margin-bottom 3%
|
|
.nav_item_1
|
|
.nav_icon
|
|
background #217872 center center / 70% auto url(../../images/new/RF1.png) no-repeat
|
|
.nav_item_2
|
|
.nav_icon
|
|
background #80732F center center / 70% auto url(../../images/new/RF2.png) no-repeat
|
|
.nav_item_3
|
|
.nav_icon
|
|
background #00a9ff center center / 70% auto url(../../images/new/RF3.png) no-repeat
|
|
.nav_item_4
|
|
.nav_icon
|
|
background #80372D center center / 70% auto url(../../images/new/RF4.png) no-repeat
|
|
.enClass
|
|
.nav_item_i
|
|
p
|
|
font-size 0.24rem
|
|
</style>
|