64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
|
<script >
|
||
|
|
import NotifyMode from "@/views/system/notify/page/mode.vue";
|
||
|
|
import NotifyRecord from "@/views/system/notify/page/record.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {NotifyRecord, NotifyMode},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
activeindex:0,
|
||
|
|
tablist:[
|
||
|
|
{
|
||
|
|
name:'通知模板',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'通知记录',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<div class="tab-box">
|
||
|
|
<div class="f-box" v-for="(item,index) in tablist" :key="index" @click="activeindex=index" :class="{ 'active' :activeindex==index}">{{item.name}}</div>
|
||
|
|
</div>
|
||
|
|
<notify-mode v-if="activeindex == 0"></notify-mode>
|
||
|
|
<notify-record v-else></notify-record>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.tab-box{
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0px 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.f-box{
|
||
|
|
height: 40px;
|
||
|
|
color: #999999;
|
||
|
|
margin-right: 50px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
color: #FF9655 !important;
|
||
|
|
border-bottom: 2px solid #FF9655 !important;
|
||
|
|
}
|
||
|
|
.container{
|
||
|
|
background: #F4F5F9;
|
||
|
|
box-sizing: border-box;
|
||
|
|
//padding: 20px;
|
||
|
|
}
|
||
|
|
.tabder-box{
|
||
|
|
width: 85%;
|
||
|
|
}
|
||
|
|
</style>
|