|
|
|
<template>
|
|
|
|
<view class="wrap_box">
|
|
|
|
<!-- <uParse v-if="datas" :content="datas"></uParse> -->
|
|
|
|
<view class="tel_index_bg"></view>
|
|
|
|
<view class="stu_list">
|
|
|
|
<view class="stu_search">
|
|
|
|
<u-icon name="search" size="30" color="#659ff5"></u-icon>
|
|
|
|
<u-icon name="search" size="24" color="#979797"></u-icon>
|
|
|
|
<input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text"
|
|
|
|
placeholder="搜索姓名" placeholder-style="color: #428DFE">
|
|
|
|
placeholder="搜索姓名" placeholder-style="color: #C3C3C3">
|
|
|
|
</view>
|
|
|
|
<view class="stu_num">
|
|
|
|
<image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>
|
|
|
|
<text class="stu_num-text">共{{datas.length}}人</text>
|
|
|
|
<image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>
|
|
|
|
共<text class="stu_num-text">{{datas.length}}</text>人
|
|
|
|
</view>
|
|
|
|
<scroll-view style="height: 1200rpx;" :scroll-y="true">
|
|
|
|
<view v-for="(item,index) in datas" :key="index" class="stu_li dis_flex">
|
|
|
|
<view v-for="(item,index) in datas" :key="index" class="stu_item">
|
|
|
|
|
|
|
|
<image v-if="item.img" class="stu_li_tx" :src="$service.getimg(item.img)" mode="aspectFill"></image>
|
|
|
|
<image v-else class="stu_li_tx" src="/static/images/tx.png" mode="aspectFill"></image>
|
|
|
|
<view class="flex_1">
|
|
|
|
<view class="stu_li_name">
|
|
|
|
{{item.name}}
|
|
|
|
<image v-if="item.sex!=1" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>
|
|
|
|
<image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>
|
|
|
|
<view class="avatar">
|
|
|
|
<image class="avatar-img" v-if="item.img" :src="$service.getimg(item.img)" mode="aspectFill"></image>
|
|
|
|
<image class="avatar-img" v-else src="/static/imagesV2/tch_index/default-avatar.png" mode="aspectFill"></image>
|
|
|
|
<view class="gender">
|
|
|
|
<image v-if="item.sex!=1" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
|
|
|
|
<image v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
|
|
|
|
</view>
|
|
|
|
<view class="stu_li_time">
|
|
|
|
{{item.add_time}} 入学
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="info">
|
|
|
|
<view class="name">
|
|
|
|
{{item.name}}
|
|
|
|
</view>
|
|
|
|
<view class="stu_li_ban">
|
|
|
|
<view>
|
|
|
|
<text>
|
|
|
|
{{item.class_name}}
|
|
|
|
</text>
|
|
|
|
<text style="margin-left: 20rpx;">
|
|
|
|
{{item.add_time}}入学
|
|
|
|
</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<u-empty v-if="datas.length==0" mode="data" text="暂无名单" icon="/static/images/tch/img_blank.png">
|
|
...
|
...
|
@@ -200,96 +203,78 @@ |
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tel_index_bg {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
z-index: 1;
|
|
|
|
width: 100%;
|
|
|
|
min-height: 220rpx;
|
|
|
|
background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_list {
|
|
|
|
position: relative;
|
|
|
|
z-index: 2;
|
|
|
|
width: 100%;
|
|
|
|
padding: 0 30rpx 30rpx;
|
|
|
|
padding: 30rpx;
|
|
|
|
|
|
|
|
.stu_search {
|
|
|
|
background-color: rgba(#fff, 0.4);
|
|
|
|
height: 68rpx;
|
|
|
|
background-color:#fff;
|
|
|
|
display: flex;
|
|
|
|
border-radius: 200rpx;
|
|
|
|
border-radius: 36rpx;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
|
|
padding: 20rpx 20rpx 20rpx 30rpx;
|
|
|
|
border-radius: 36rpx;
|
|
|
|
.stu_search-input {
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_num {
|
|
|
|
width: 100%;
|
|
|
|
height: 80rpx;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
font-size: 30rox;
|
|
|
|
color: #477FF6;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
.stu_num-icon {
|
|
|
|
height: 12rpx;
|
|
|
|
width: 50rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-family: PingFang SC;
|
|
|
|
font-weight: 500;
|
|
|
|
color: #323232;
|
|
|
|
padding: 20rpx 0;
|
|
|
|
.stu_num-text {
|
|
|
|
color: #477FF6;
|
|
|
|
margin: 0 20rpx;
|
|
|
|
color: #2D81FF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_li {
|
|
|
|
width: 100%;
|
|
|
|
min-height: 120rpx;
|
|
|
|
.stu_item {
|
|
|
|
background: #FFFFFF;
|
|
|
|
border-radius: 10rpx;
|
|
|
|
padding: 24rpx 30rpx;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
padding: 30rpx;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
&+.stu_li {
|
|
|
|
margin-top: 22rpx;
|
|
|
|
& + .stu_item {
|
|
|
|
margin-top: 20rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_li_tx {
|
|
|
|
width: 64rpx;
|
|
|
|
height: 64rpx;
|
|
|
|
.avatar {
|
|
|
|
width: 110rpx;
|
|
|
|
height: 110rpx;
|
|
|
|
border-radius: 50%;
|
|
|
|
position: relative;
|
|
|
|
margin-right: 30rpx;
|
|
|
|
.avatar-img {
|
|
|
|
border-radius: 50%;
|
|
|
|
margin-right: 20rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_li_name {
|
|
|
|
font-size: 30rpx;
|
|
|
|
color: #545D71;
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 28rpx;
|
|
|
|
height: 28rpx;
|
|
|
|
margin-left: 5rpx;
|
|
|
|
.gender {
|
|
|
|
position: absolute;
|
|
|
|
width: 29rpx;
|
|
|
|
height: 24rpx;
|
|
|
|
right: 0rpx;
|
|
|
|
bottom: 12rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_li_time {
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #A9B1C0;
|
|
|
|
.info {
|
|
|
|
flex: 1;
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-family: PingFang SC;
|
|
|
|
font-weight: 500;
|
|
|
|
color: #646464;
|
|
|
|
.name {
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-family: PingFang SC;
|
|
|
|
font-weight: bold;
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
color: #323232;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stu_li_ban {
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #2D81FF;
|
|
|
|
padding: 4rpx 14rpx;
|
|
|
|
background: #2D81FF1a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
