|
|
@@ -0,0 +1,442 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="学员详情"></u-navbar>
|
|
|
+ <view class="student-card">
|
|
|
+ <view class="title">
|
|
|
+ <view><img src="../../../assets/img/fas fa-graduation-cap@1x.png" alt=""></view>
|
|
|
+ <view >
|
|
|
+ 学员详情
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/photo@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="information">
|
|
|
+ <view class="name">
|
|
|
+ 周梓轩
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-name">
|
|
|
+ 年龄6岁1个月
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ 年龄6岁1个月
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-name">
|
|
|
+ 联系人手机号
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ 17712939405
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-name">
|
|
|
+ 第二联系人手机号
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ 17712905129
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-name">
|
|
|
+ 接送家长姓名
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ 周勇
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tab">
|
|
|
+ <u-subsection mode="subsection" :list="list" :current="curNow" @change="sectionChange" height="64" active-color="#0DBAC7" ></u-subsection>
|
|
|
+ </view>
|
|
|
+ <view class="course" v-if="this.curNow==0">
|
|
|
+ <view class="details-box">
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title">
|
|
|
+ 芭蕾舞新生班
|
|
|
+ </view>
|
|
|
+ <view class="location-time">
|
|
|
+ <view class="location">
|
|
|
+ 文艺部
|
|
|
+ </view>
|
|
|
+ <view class="location">
|
|
|
+ 中国舞项目
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="number">
|
|
|
+ 学员数 <text>20</text><u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="details-box">
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title">
|
|
|
+ 钢琴一对一新生班
|
|
|
+ </view>
|
|
|
+ <view class="location-time">
|
|
|
+ <view class="location">
|
|
|
+ 文艺部
|
|
|
+ </view>
|
|
|
+ <view class="location">
|
|
|
+ 钢琴项目
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="number">
|
|
|
+ 学员数 <text>1</text><u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="record" v-if="this.curNow==1">
|
|
|
+ <view class="record-card">
|
|
|
+ <view class="title-time">
|
|
|
+ <view class="title">
|
|
|
+ 芭蕾舞新生班
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 2023-01-05 08:30-10:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="condition">
|
|
|
+ 到课
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="record-card">
|
|
|
+ <view class="title-time">
|
|
|
+ <view class="title">
|
|
|
+ 芭蕾舞新生班
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 2023-01-05 08:30-10:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="condition leave">
|
|
|
+ 请假
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="record-card">
|
|
|
+ <view class="title-time">
|
|
|
+ <view class="title">
|
|
|
+ 芭蕾舞新生班
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 2023-01-05 08:30-10:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="condition truant">
|
|
|
+ 旷课
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <button class="btn">查看全部签到记录</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="thermometry" v-if="this.curNow==2">
|
|
|
+ <view class="main">
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 2023-01-03 08:47
|
|
|
+ </view>
|
|
|
+ <view class="temperature">
|
|
|
+ <view class="text">
|
|
|
+ 正常 36.3
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#c8c8c8"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 2023-01-03 08:47
|
|
|
+ </view>
|
|
|
+ <view class="temperature">
|
|
|
+ <view class="text abnormal">
|
|
|
+ 异常 38.3
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#c8c8c8"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 2023-01-03 08:47
|
|
|
+ </view>
|
|
|
+ <view class="temperature">
|
|
|
+ <view class="text abnormal">
|
|
|
+ 异常 37.3
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#c8c8c8"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" v-for="item in 5">
|
|
|
+ <view class="date">
|
|
|
+ 2023-01-03 08:47
|
|
|
+ </view>
|
|
|
+ <view class="temperature">
|
|
|
+ <view class="text ">
|
|
|
+ 正常 36.3
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#c8c8c8"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="btn">查看全部测温记录</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [{
|
|
|
+ name: '报名课程'
|
|
|
+ }, {
|
|
|
+ name: '签到记录',
|
|
|
+ },{
|
|
|
+ name:'测温记录'
|
|
|
+ }],
|
|
|
+ curNow: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ sectionChange(index) {
|
|
|
+ this.curNow = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .student-card{
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 32rpx 20rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ img{
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details{
|
|
|
+ margin-top: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ .photo{
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 32rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .information{
|
|
|
+ .name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ .item-name{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ .item-content{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab{
|
|
|
+ padding: 0 32rpx;
|
|
|
+ /deep/.u-subsection{
|
|
|
+ border-radius: 50px !important;
|
|
|
+
|
|
|
+ background-color: #fff !important;
|
|
|
+
|
|
|
+ }
|
|
|
+ /deep/.u-item{
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-box{
|
|
|
+ margin: 0 32rpx;
|
|
|
+ margin-top: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 12px ;
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .title-box{
|
|
|
+ width: 68%;
|
|
|
+ .title{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .location-time{
|
|
|
+ display: flex;
|
|
|
+ margin-top: 8px;
|
|
|
+ .location,.time{
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(241, 243, 244, 1);
|
|
|
+ color: rgba(136, 133, 133, 1);
|
|
|
+ padding: 0px 8px;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .number{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: right;
|
|
|
+ text{
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ width: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: rgba(13, 186, 199, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+.record{
|
|
|
+ margin:0 16px;
|
|
|
+ .record-card{
|
|
|
+ margin-top: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title-time{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .condition{
|
|
|
+ color:#0DBAC7;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .leave{
|
|
|
+ color: rgba(129, 97, 255, 1);
|
|
|
+ }
|
|
|
+ .truant{
|
|
|
+ color: rgba(255, 61, 0, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.btn{
|
|
|
+ color: rgba(13, 186, 199, 1);
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 14px
|
|
|
+ }
|
|
|
+.thermometry{
|
|
|
+ padding: 0 12px;
|
|
|
+ .main{
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 0px 13px 0 13px;
|
|
|
+
|
|
|
+ .item{
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(229, 231, 234, 1);
|
|
|
+ .date{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+ .temperature{
|
|
|
+ display: flex;
|
|
|
+ .text{
|
|
|
+ color: rgba(56, 158, 13, 1);
|
|
|
+ }
|
|
|
+ .abnormal{
|
|
|
+ color: rgba(238, 49, 56, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
