You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.2 KiB
145 lines
4.2 KiB
<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>
|