<template>
|
<basic-container>
|
<div class="tab-list">
|
<div :class="{ 'choose': typeStatus == 1 }" @click="changeType(1)">待处理</div>
|
<div :class="{ 'choose': typeStatus == 2 }" @click="changeType(2)">已处理</div>
|
</div>
|
<div v-if="typeStatus == 1">
|
<todo />
|
</div>
|
<div v-if="typeStatus == 2">
|
<done />
|
</div>
|
</basic-container>
|
</template>
|
|
<script>
|
import todo from './components/todo'
|
import done from './components/done'
|
export default {
|
components: { todo, done },
|
data () {
|
return {
|
typeStatus: 1,
|
}
|
},
|
|
methods: {
|
changeType (type) {
|
this.typeStatus = type
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.avue-upload__icon {
|
line-height: 6;
|
}
|
|
.tab-list {
|
display: flex;
|
margin-right: 6px;
|
border: 1px solid #dcdfe6;
|
color: #606266;
|
border-radius: 4px;
|
height: 34px;
|
width: 121px;
|
margin-bottom: 10px;
|
|
&>div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 60px;
|
cursor: pointer;
|
font-size: 12px;
|
}
|
|
&>div:nth-child(2) {
|
border-left: 1px solid #dcdfe6;
|
// border-right: 1px solid #dcdfe6;
|
}
|
|
.choose {
|
color: #FFF;
|
background-color: #409dfe;
|
}
|
}
|
</style>
|
