148 lines
4.2 KiB
Vue
148 lines
4.2 KiB
Vue
<template>
|
||
<div class="relative main-container">
|
||
<div class="navs_wraper">
|
||
<div class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)" @click="toPage(e)">
|
||
<div class="relative nav_item_i">
|
||
<div class="nav_icon"></div>
|
||
<p>{{ e[$langPre.computedProp('title')] }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <button class="absolute onoff_wraper" @click="switchDown('1', '0')" :disabled="disabled">
|
||
<div class="onoff_power"><img src="../../../images/new/switch_10.png" alt=""></div>
|
||
<div class="onoff_power_txt">{{ $t('vehiclecontrol.poweroff') }}</div>
|
||
</button> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {ShutDown} from '@config/getData2.js'
|
||
export default {
|
||
name: 'MinniHome',
|
||
data () {
|
||
return {
|
||
nav: [
|
||
{title: '任务', zh_title: '任务', en_title: 'Task', router: '/mini/carrypoint'},
|
||
{title: '故障', zh_title: '故障', en_title: 'Fault', router: '/mini/errorinfo'},
|
||
{title: '示教', zh_title: '示教', en_title: 'Teach', router: '/mini/teach'}
|
||
],
|
||
disabled: false
|
||
}
|
||
},
|
||
methods: {
|
||
toPage (e) {
|
||
this.$router.push(e.router)
|
||
},
|
||
switchDown (type, bool) {
|
||
this.disabled = true
|
||
bool = bool === '0' ? '1' : '0'
|
||
this._ShutDown(type, bool)
|
||
},
|
||
async _ShutDown (type, bool) {
|
||
try {
|
||
let res = await ShutDown(type, bool) // type:1-关机、2-显示屏控制、3-TCS控制、4-SCHE控制、5-RC控制、6-Joy控制，7-退出，8-软启动，9-跳过起点，10-重启，11-全屏，12-跳过检测 ; bool:开关或按钮的值，开关开启传1，关闭传0，按钮点击直接传1
|
||
if (res.code === '1') {
|
||
this.toast(res.desc)
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
this.disabled = false
|
||
} catch (e) {
|
||
this.disabled = false
|
||
this.toast(this.$t('common.operationfailed'))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin'
|
||
.main-container
|
||
display flex
|
||
.navs_wraper
|
||
_fj()
|
||
width 100%
|
||
padding 0 12%
|
||
.nav_item
|
||
width 29%
|
||
padding 12px
|
||
color #fff
|
||
font-size 40px
|
||
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
|
||
.nav_item_i
|
||
_fj()
|
||
padding 20px 40px 20px 35px
|
||
background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
|
||
border-top 2px solid #62b2f0
|
||
border-left 2px solid #62b2f0
|
||
box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
|
||
p
|
||
font-size 56px
|
||
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;
|
||
&::before
|
||
content ''
|
||
position absolute
|
||
bottom 0
|
||
left 0
|
||
width 100%
|
||
height 2px
|
||
background-image linear-gradient(to right,#62b2f0,#b1ebf8)
|
||
&::after
|
||
content ''
|
||
position absolute
|
||
top 0
|
||
right 0
|
||
height 100%
|
||
width 2px
|
||
background-image linear-gradient(to bottom,#62b2f0,#b1ebf8)
|
||
.nav_icon
|
||
width 25%
|
||
padding-top 25%
|
||
border-radius 50%
|
||
.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 #80372D center center / 70% auto url(../../../images/new/RF3.png) no-repeat
|
||
.onoff_wraper
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
bottom 0
|
||
left 50%
|
||
transform translateX(-50%)
|
||
background-color transparent
|
||
.onoff_power
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 90px;
|
||
height: 90px;
|
||
border: 1px solid #1a48f7;
|
||
border-radius: 50%;
|
||
box-shadow: inset 14px 0px 7px 0px rgba(26, 138, 247, 80%), inset -14px 0px 7px 0px rgba(26, 138, 247, 80%);
|
||
img
|
||
width 50%
|
||
height auto
|
||
.onoff_power_txt
|
||
font-size 30px
|
||
color #fff
|
||
line-height 60px
|
||
font-family 'Source Han Sans CN'
|
||
text-align center
|
||
</style>
|