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.
386 lines
8.7 KiB
386 lines
8.7 KiB
<template>
|
|
<view class="content">
|
|
<view class="head">
|
|
<view class="head-img">
|
|
<fui-avatar width="136"
|
|
src="https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"></fui-avatar>
|
|
<view class="head-text">智卓燕</view>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="card-back color-style"></view>
|
|
<view class="card-backs color-style"></view>
|
|
<view class="card-con">
|
|
<view class="card-head">
|
|
<view>
|
|
<span class="card-head-txt">班级</span>
|
|
<span class="card-head-txt1 card-head-back1">篮球少儿班</span>
|
|
</view>
|
|
<view>
|
|
<span class="card-head-txt">已耗课时</span>
|
|
<span class="card-head-txt1 card-head-back2">24/</span><span class="card-head-txt">60</span>
|
|
</view>
|
|
</view>
|
|
<view class="card-con-txt">课程到期时间：2021.12.25</view>
|
|
<view class="card-con-txt1">
|
|
<view class="card-con-txt1-left">
|
|
<image src="@/static/images/index/score.png" class="overlay-image"></image>
|
|
<view class="card-con-txt1-left-txt top">90</view>
|
|
<view class="card-con-txt1-left-txt top1">综合评分</view>
|
|
</view>
|
|
<view class="card-con-txt1-right">
|
|
<view style="color: #AAAAAA;padding: 5rpx;">数据测评时间：2020.03.12</view>
|
|
<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
|
|
<view>
|
|
<view style="font-size: 48rpx;color: #29d3b4;">123</view>
|
|
<view style="color: #AAAAAA;font-size: 30rpx;">身高（CM）</view>
|
|
</view>
|
|
<view>
|
|
<view style="font-size: 48rpx;color: #29d3b4;">45</view>
|
|
<view style="color: #AAAAAA;font-size: 30rpx;">体重（KG）</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more">更多</view>
|
|
</view>
|
|
<view class="upcomin-classes">
|
|
<view class="upcomin-classes-div">
|
|
<view class="upcomin-classes-div-con">
|
|
<view class="upcomin-classes-div-con-left">课程预告</view>
|
|
<view class="upcomin-classes-div-con-centre"
|
|
style="width: 2rpx;height: 60rpx;background-color: #fff;margin-left: 25rpx;"></view>
|
|
<view style="margin-left: 25rpx;">
|
|
<view>5/28 周五 15:30 - 17:30</view>
|
|
<view>301室 篮球少儿课程</view>
|
|
</view>
|
|
<view class="upcomin-classes-div-con-right" @click="details">
|
|
详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="after-class">
|
|
<view class="after-class-title">
|
|
<view class="after-class-title-left">课后作业</view>
|
|
<view class="after-class-title-right">全部</view>
|
|
</view>
|
|
<view class="after-class-con">
|
|
<view class="after-class-con-txt">
|
|
<view style="width: 25%;margin-top: 5%;">
|
|
<view style="font-size: 55rpx;color: #fff;"><span style="color: #29d3b4;">12</span>/23
|
|
</view>
|
|
<view style="font-size: 35rpx;color: #ccc;padding-left: 10rpx;">已完成</view>
|
|
</view>
|
|
<view style="width: 70%;">
|
|
<view style="color: #fff;display: flex;justify-content: space-between;align-items: center;">
|
|
<view style="display: flex;align-items: center;">
|
|
<image src="@/static/images/index/dian.png" style="width: 50rpx;height: 50rpx;">
|
|
</image>
|
|
<span style="padding-left: 10rpx;font-size: 35rpx;">包子皮</span>
|
|
</view>
|
|
<view>
|
|
<fui-button background="#404045" color="#F59A23" borderColor="#F59A23"
|
|
btnSize="mini">上传</fui-button>
|
|
</view>
|
|
</view>
|
|
<view style="color: #fff;padding: 10rpx;">时间：2020.05:25 15:30 - 17:30</view>
|
|
<view class="multi-line-ellipsis">
|
|
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="multi-line-ellipsis text-style">
|
|
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
|
|
<view style="width: 92%;margin: auto;border-radius: 15rpx;">
|
|
<video style="width: 100%;border-radius: 15rpx;"></video>
|
|
</view>
|
|
<view class="multi-line-ellipsis text-style">
|
|
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
|
|
<view style="width: 92%;margin: auto;border-radius: 15rpx;">
|
|
<video style="width: 100%;border-radius: 15rpx;"></video>
|
|
</view>
|
|
</view>
|
|
<view style="height: 180rpx;width: 100%;"></view>
|
|
</view>
|
|
<AQTabber />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import user from '@/api/user.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
details() {
|
|
uni.navigateTo({
|
|
url: '/pages/student/index/work_details'
|
|
})
|
|
},
|
|
// fetchData(um_id) {
|
|
// user.activity_index({
|
|
// um_id: um_id
|
|
// }).then(res => {
|
|
// console.log(res)
|
|
// if(res.status == 200){
|
|
// if(res.data == null){
|
|
// this.list = []
|
|
// }else{
|
|
// this.list = res.data
|
|
// }
|
|
// }else{
|
|
// uni.showToast({
|
|
// title: res.msg,
|
|
// icon: 'none'
|
|
// })
|
|
// }
|
|
// });
|
|
// },
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
page {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.overlay-image {
|
|
width: 95%;
|
|
height: 100%;
|
|
}
|
|
|
|
.multi-line-ellipsis {
|
|
color: #fff;
|
|
padding: 5rpx 10rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.text-style {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
}
|
|
|
|
.content {
|
|
background-color: #292929;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.head {
|
|
background-color: #29d3b4;
|
|
width: 100%;
|
|
}
|
|
|
|
.head-img {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.head-text {
|
|
color: #fff;
|
|
font-size: 35rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
height: 450rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.card-back {
|
|
background-color: #29d3b4;
|
|
}
|
|
|
|
.card-backs {
|
|
background-color: #292929;
|
|
}
|
|
|
|
.color-style {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
.card-con {
|
|
width: 92%;
|
|
height: 92%;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.card-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.card-head-txt {
|
|
color: #AAAAAA;
|
|
}
|
|
|
|
.card-head-txt1 {
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.card-head-back1 {
|
|
color: #4b4b4b;
|
|
}
|
|
|
|
.card-head-back2 {
|
|
color: #2bd3b5;
|
|
}
|
|
|
|
.card-con-txt {
|
|
color: #AAAAAA;
|
|
padding: 5rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.card-con-txt1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10rpx 20rpx 0;
|
|
height: 220rpx;
|
|
}
|
|
|
|
.card-con-txt1-left {
|
|
width: 42%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.card-con-txt1-left-txt {
|
|
font-size: 32rpx;
|
|
color: #29d3b4;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.top {
|
|
top: 60%;
|
|
}
|
|
|
|
.top1 {
|
|
top: 80%;
|
|
}
|
|
|
|
.card-con-txt1-right {
|
|
width: 58%;
|
|
height: 100%;
|
|
}
|
|
|
|
.more {
|
|
padding: 5rpx 30rpx 30rpx;
|
|
text-align: right;
|
|
color: #F59A23;
|
|
}
|
|
|
|
.upcomin-classes {
|
|
background-color: #292929;
|
|
width: 100%;
|
|
height: 136rpx;
|
|
}
|
|
|
|
.upcomin-classes-div {
|
|
padding-top: 20rpx;
|
|
width: 92%;
|
|
background-color: #29d3b4;
|
|
height: 106rpx;
|
|
margin: auto;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.upcomin-classes-div-con {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.upcomin-classes-div-con-left {
|
|
width: 60rpx;
|
|
margin-left: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.upcomin-classes-div-con-centre {
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background-color: #fff;
|
|
margin-left: 25rpx;
|
|
}
|
|
|
|
.upcomin-classes-div-con-right {
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
background-color: #32baa1;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 50rpx;
|
|
margin-left: 80rpx;
|
|
}
|
|
|
|
.after-class {
|
|
background-color: #292929;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.after-class-title {
|
|
width: 92%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
}
|
|
|
|
.after-class-title-left {
|
|
color: #fff;
|
|
font-size: 35rpx;
|
|
border-bottom: 4rpx #29d3b4 solid;
|
|
}
|
|
|
|
.after-class-title-right {
|
|
color: #F59A23;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.after-class-con {
|
|
width: 92%;
|
|
height: 246rpx;
|
|
background-color: #404045;
|
|
border-radius: 20rpx;
|
|
margin: 15rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.after-class-con-txt {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
height: 95%;
|
|
width: 100%;
|
|
align-content: space-around;
|
|
}
|
|
</style>
|