123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<template>
|
|
<div class="devfiling">
|
|
<!-- <div class="page_nav">
|
|
<ul>
|
|
<li :class="{'nav_active': pageType == item.id}"
|
|
v-for="(item,index) in navList"
|
|
:key="item.id"
|
|
@click="changPageType(index)">
|
|
{{item.name}}
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
<component :is="pageDetail" :devType="devType"></component>
|
|
<!-- <devPlan v-if="pageDetail == 'devPlan'" :devType="devType"></devPlan>
|
|
<devRegister v-if="pageDetail == 'devRegister'" :devType="devType"></devRegister> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import devPlan from './devPlan.vue'
|
|
import devRegister from './devRegister.vue'
|
|
export default {
|
|
components: {
|
|
// devPlan,
|
|
devRegister
|
|
},
|
|
data(){
|
|
return {
|
|
navList:[{
|
|
name: '策划管理',
|
|
id: '1'
|
|
},{
|
|
name: '设备登记',
|
|
id: '2'
|
|
},{
|
|
name: '监督备案',
|
|
id: '3'
|
|
},{
|
|
name: '交底管理',
|
|
id: '4'
|
|
},{
|
|
name: '验收管理',
|
|
id: '5'
|
|
},{
|
|
name: '监督旁站',
|
|
id: '6'
|
|
},{
|
|
name: '检查管理',
|
|
id: '7'
|
|
},{
|
|
name: '任务管理',
|
|
id: '8'
|
|
}],
|
|
pageType: 1,
|
|
pageDetail: "devRegister",
|
|
devType: 1
|
|
}
|
|
},
|
|
created(){
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.userId = this.$store.state.userInfo.userId
|
|
|
|
},
|
|
methods: {
|
|
changPageType(val){
|
|
console.log(val)
|
|
this.pageType = this.navList[val].id
|
|
if(val == 0){
|
|
this.pageDetail = "devPlan"
|
|
} else if(val == 1){
|
|
this.pageDetail = "devRegister"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.devfiling{
|
|
width: 100%;
|
|
height: 100%;
|
|
.page_nav{
|
|
height: 60px;
|
|
width: 100%;
|
|
padding-left: 27px;
|
|
box-sizing: border-box;
|
|
// line-height: 60px;
|
|
ul{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
li{
|
|
margin-right: 54px;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.nav_active{
|
|
padding: 0 4px;
|
|
padding-bottom: 3px;
|
|
color: #88E7F0;
|
|
border-bottom: 1px solid #88E7F0;
|
|
}
|
|
.nav_active::before{
|
|
content: "";
|
|
width: calc(100% + 6px);
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -3px;
|
|
border-left: 0px solid;
|
|
border-right: 0px solid;
|
|
border-bottom: 2px solid;
|
|
background: linear-gradient(to top,rgba(136, 231, 240, 0.5),rgba(136, 231, 240, 0));
|
|
transform:perspective(0.5em) rotateX(-3deg);
|
|
border-image: linear-gradient(to top, rgba(136, 231, 240, 0.5), rgba(136, 231, 240, 0)) 1 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |