<template>
    <view class="roll-call">
        <picker>
            <view class="top-bar"><text>12</text></view>
        </picker>
        <view class="rc-time">
            <view>课程时间:  2020/12/19    13:00~14:15</view>
            <view>5/2</view>
        </view>
        <view class="rc-list">
            <view class="rl-item" v-for="i in 10" :key="i">
                <view class="ri-selected"></view>
                <image class="ri-avatar"></image>
                <view class="ri-content">
                    <view class="rc-info">
                        <view class="ri-name">
                            <view>Adjoin</view>
                            <image></image>
                        </view>
                        <view class="ri-phone">
                            <view>12345679083</view>
                            <image></image>
                        </view>
                    </view>
                    <view class="rc-tip">
                        <view>剩余次数: 10次</view>
                        <view>未点名</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .roll-call{

    }
    .rc-time{
        padding: 0 24upx;
        margin-bottom: 24upx;
        height: 100upx;
        border-top: 2upx solid #D8D8D8;
        background-color: #fff;
        @include centerFlex(space-between);
        >view{
            font-size: 32upx;
            color: #9a9a9d;
            &:first-child{
                flex-grow: 1;
                @include textHide(1);
            }
            &+view{
                flex-shrink: 0;
                max-width: 20%;
                @include textHide(1);
            }
        }
    }
    .rc-list{

    }
    .rl-item{
        padding: 54upx 24upx;
        margin-bottom: 24upx;
        background-color: #fff;
        @include centerFlex(flex-start);
        .ri-selected{
            flex-shrink: 0;
            margin-right: 26upx;
            width: 40upx;
            height: 40upx;
            background-color: skyblue;
        }
        .ri-avatar{
            flex-shrink: 0;
            flex-grow: 0;
            margin-right: 20upx;
            width: 116upx;
            height: 116upx;
            border-radius: 50%;
            background-color: skyblue;
        }
        .ri-content{
            flex-grow: 1;
            .rc-info{
                margin-bottom: 12upx;
                @include centerFlex(space-between);
                .ri-name,.ri-phone{
                    max-width: 50%;
                    @include centerFlex(flex-start);
                    >view{
                        font-weight: 500;
                        font-size: 32upx;
                        line-height: 44upx;
                        color: #333;
                        @include textHide(1);
                    }
                    >image{
                        flex-shrink: 0;
                        margin-left: 12upx;
                        width: 36upx;
                        height: 36upx;
                        background-color: skyblue;
                    }
                }
                .ri-phone{
                    margin-left: 10upx;
                    >view{
                        font-weight: 400;
                        font-size: 28upx;
                        @include textHide(1);
                    }
                }
            }
            .rc-tip{
                @include centerFlex(space-between);
                >view{
                    @include textHide(1);
                    &:first-child{
                        flex-grow: 1;
                        font-size: 24upx;
                        line-height: 34upx;
                        color: #9a9a9d;
                    }
                    &+view{
                        margin-left: 20upx;
                        max-width: 26%;
                        flex-shrink: 0;
                        font-weight: 500;
                        font-size: 28upx;
                        color: $themeColor;
                    }
                }
            }
        }
    }
</style>