mteacher/src/views/teacher/Approval.vue

<template>
    <div class="approval">
        <m-header />
        <van-tabs :swipeable="true" :animated="true">
            <van-tab title="待处理">
                <div v-for="i in 6" :key="i" class="app-item">
                    <div class="hd">
                        <span class="orangeStatus">待处理</span>
                        <span>2019-09-01</span>
                    </div>
                    <div class="bd">
                        <p>申请人：黄青筝</p>
                        <p>审批事项：调休</p>
                        <p>开始时间：2019-09-01  9:00</p>
                        <p>结束时间：2019-09-01  18:00</p>
                        <p>备注：家中急事，调休一天</p>
                    </div>
                </div>
            </van-tab>
            <van-tab title="已处理">
                <div v-for="i in 6" :key="i" class="app-item">
                    <div class="hd">
                        <span class="orangeStatus">待处理</span>
                        <span>2019-09-01</span>
                    </div>
                    <div class="bd">
                        <p>申请人：黄青筝</p>
                        <p>审批事项：调休</p>
                        <p>开始时间：2019-09-01  9:00</p>
                        <p>结束时间：2019-09-01  18:00</p>
                        <p>备注：家中急事，调休一天</p>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
export default {
    name: 'approval',
    components: { MHeader },
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
/deep/.van-tab--active {
    color: #EF5A50;
}
/deep/.van-tabs__line {
    background-color: @mColor;
}
.app-item {
    margin: 0 .16rem .1rem;
    background: @whiteColor;
    border-radius: .1rem;
    font-size: .14rem;
    &:first-child {
        margin-top: .1rem;
    }
    .hd {
        padding: .1rem .15rem .1rem .19rem;
        border-bottom: 1px solid #f5f5f5;
        color: @tFontColor;
        display: flex;
        justify-content: space-between;
    }
    .bd {
        padding: .12rem .15rem .2rem .19rem;
        line-height: .2rem;
    }
}
</style>