You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.3 KiB
71 lines
1.3 KiB
2 years ago
|
<template>
|
||
|
|
<div class="screen-content-left">
|
||
|
|
<div class="rest-content">
|
||
|
|
<div class="">
|
||
|
|
<transition name="fade-transform">
|
||
|
|
<component :is="currentCom"></component>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters, mapActions } from 'vuex'
|
||
|
|
import zdyzLeft from './zdyf-left'
|
||
|
|
import hsyfLeft from './hsyf-left'
|
||
|
|
import homeLeft from './home-left'
|
||
|
|
import szyfLeft from './szyf-left'
|
||
|
|
export default {
|
||
|
|
name: 'screen-content-left',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
zdyzLeft,
|
||
|
|
hsyfLeft,
|
||
|
|
homeLeft,
|
||
|
|
szyfLeft
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['scale', 'navId',]),
|
||
|
|
currentCom () {
|
||
|
|
if (this.navId === 'hsyf') {
|
||
|
|
return hsyfLeft
|
||
|
|
} else if (this.navId === 'zdyf') {
|
||
|
|
return zdyzLeft
|
||
|
|
} else if (this.navId === 'sy') {
|
||
|
|
return homeLeft
|
||
|
|
} else if (this.navId === 'szyf') {
|
||
|
|
return szyfLeft
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.screen-content-left {
|
||
|
|
width: 460px;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 16px;
|
||
|
|
z-index: 20;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 40px 0px 20px;
|
||
|
|
.rest-content {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 30px - 30px);
|
||
|
|
border-radius:10px;
|
||
|
|
padding: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|