mteacher/src/views/teacher/CallNames.vue

<template>
    <div class="callnames">
        <m-header />

        <van-cell class="title" title-class="title-content">
            <template slot="default">孙老师</template>
            <template slot="title">武汉小学乐团·长笛基础课</template>
            <template slot="label">
                <p class="time">09月12日(星期一)  13:00-13:45</p>
                <p class="address">
                    <van-icon name="location" />
                    湖北省武汉市红领巾小学
                </p>
            </template>
        </van-cell>

        <div class="name-info">
            <span>共有：30</span>
            <span>实有：30</span>
            <span>请假：30</span>
        </div>

        <div class="section">
            <van-cell-group v-for="i in 6" :key="i">
                <van-cell class="btn-group" :center="true" :border="false">
                    <template slot="icon">
                        <img class="logo" src="http://dev.dayaedu.com/img/teacher1.91bf990d.png" alt="">
                    </template>
                    <template slot="title">阿曼湾</template>
                    <template slot="label"><span>长笛</span><span>合奏课1班</span></template>
                </van-cell>
                <van-cell class="btn-group">
                    <van-button round type="danger">请假</van-button>
                    <van-button round type="primary">未到</van-button>
                    <van-button round type="info">到课</van-button>
                </van-cell>
            </van-cell-group>
        </div>

        <div class="button-group">
            <van-button type="default">全到</van-button>
            <van-button type="primary">点名完成</van-button>
        </div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
export default {
    name: 'callnames',
    components: { MHeader }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.title { 
    padding: .16rem;
}
.title-content {
    font-size: .18rem !important;
    font-weight: bold;
    .van-cell__label {
        font-weight: 400;
        color: @mFontColor;
        margin-top: .06rem;
        .time {
            font-size: .16rem;
        }
        .address {
            padding-top: .03rem;
            font-size: .14rem;
            display: flex;
            align-items: center;
        }
    }
    .van-icon-location {
        margin-right: .03rem;
        color: @mColor;
    }
}
/deep/.van-cell__title {
    font-size: .14rem;
    color: @mFontColor;
    flex: 1 auto;
}
/deep/.van-cell__value, /deep/.van-cell__label {
    color: @sFontColor;
}
/deep/.van-cell__label {
    margin-top: 0;
    span {
        padding-right: .1rem;
    }
}
.name-info {
    color: @mFontColor;
    padding: .09rem .16rem;
    span {
        padding-right: .15rem;
    }
}
.logo {
    width: .35rem;
    height: .35rem;
    margin-right: .12rem;
}
.btn-group {
    &:first-child {
        padding-bottom: .12rem;
    }
    &:last-child {
        padding-top: 0;
        padding-left: .63rem;
    }
    .van-button {
        padding: .04rem .24rem;
        height: auto;
        line-height: 1.5;
        font-size: .16rem;
        margin-right: .16rem;
        &:last-child {
            margin-right: 0;
        }
    }
    .van-button--danger {
        background-color: @redColor;
        border: 1px solid @redColor;
    }
    .van-button--primary {
        background-color: #FFC10D;
        border: 1px solid #FFC10D;
    }
}
.section{
    margin-bottom: .82rem;
}

.button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    box-shadow:0 .02rem .07rem 0 rgba(0,0,0,0.16);
    display: flex;
    .van-button {   
        flex: 1;
        height: .52rem;
        line-height: .5rem;
        font-size: .16rem;
    }
    .van-button--default {
        color: @mFontColor;
    }
    .van-button--primary {
        background: @mColor;
        border-color: @mColor;
    }
}
</style>