6 changed files with 1593 additions and 56 deletions
@ -0,0 +1,309 @@ |
|||
<!--我的-首页--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="title">我的</view> |
|||
</view> |
|||
|
|||
<view style="background:#29D3B4;"> |
|||
<!--用户信息--> |
|||
<view class="user_section"> |
|||
<view class="box"> |
|||
<view class="left"> |
|||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
<view class="name">包子皮</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn">切换身份</view> |
|||
<view class="btn">到课率统计</view> |
|||
<view class="btn"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--统计信息--> |
|||
<view class="count_section"> |
|||
<view class="main"> |
|||
<view class="course_box"> |
|||
<view class="top"> |
|||
<view class="item"> |
|||
<view class="num">1234</view> |
|||
<view class="intro">总授课数/节</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="num">4</view> |
|||
<view class="intro">总授班级/个</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="num">1234</view> |
|||
<view class="intro">总负责学员/名 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom"> |
|||
月授课数 |
|||
<text>12</text> |
|||
节，月负责学员 |
|||
<text>188</text> |
|||
名 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg_box bg_top"></view> |
|||
<view class="bg_box bg_bottom"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="main_section"> |
|||
<view class="section_box"> |
|||
<view class="item"> |
|||
<view>我的体育场</view> |
|||
<view>xxx场馆</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view>即将到期</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view>授课统计</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="section_box"> |
|||
<view class="item"> |
|||
<view>意见反馈</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view>设置</view> |
|||
<view></view> |
|||
</view> |
|||
</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 { |
|||
formData:{}, |
|||
tabType:'1',//1=班级成员,2=作业任务 |
|||
Atype:1,//1=作业完成,2=作业未提交 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
//切换tab |
|||
tabChange(tabType) { |
|||
this.tabType = tabType |
|||
}, |
|||
|
|||
//打开课程详情 |
|||
openViewCourseInfo(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/course/info' |
|||
}) |
|||
}, |
|||
//打开学员详情页 |
|||
openViewStudentInfo(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/student/info' |
|||
}) |
|||
}, |
|||
|
|||
//打开体测报告 |
|||
openViewPhysicalExamination(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/student/physical_examination' |
|||
}) |
|||
}, |
|||
|
|||
//打开作业任务 |
|||
opebViewWorkDetails(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/student/work_details' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929; |
|||
min-height: 28vh; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
border: 1px solid #29D3B4; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
.title{ |
|||
padding: 20rpx 0; |
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//用户信息 |
|||
.user_section { |
|||
background-color: #29D3B4; |
|||
padding-top: 58rpx; |
|||
padding-bottom: 42rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
.box{ |
|||
padding-left: 19rpx; |
|||
padding-right: 29rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 15rpx; |
|||
.left{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.pic{ |
|||
width: 144rpx; |
|||
height: 144rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.name{ |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.btn{ |
|||
min-height: 28rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//统计信息 |
|||
.count_section{ |
|||
position: relative; |
|||
.main{ |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 0rpx 24rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
.course_box{ |
|||
padding: 42rpx 28rpx; |
|||
width: 692rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 32rpx; |
|||
.top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
.num{ |
|||
color: #29D3B4; |
|||
font-size: 56rpx; |
|||
} |
|||
.intro{ |
|||
color: #AAAAAA; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
.bottom{ |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
text{ |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.bg_box{ |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.bg_top{ |
|||
position: absolute; |
|||
top: 0; |
|||
background-color: #29D3B4; |
|||
} |
|||
.bg_bottom{ |
|||
top: 50%; |
|||
position: absolute; |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 22rpx; |
|||
|
|||
.section_box { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 6rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.item{ |
|||
padding: 24rpx 78rpx; |
|||
border-top: 1px solid #F2F2F2; |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.item:nth-child(1){ |
|||
border-top: 0; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,513 @@ |
|||
<!--学员-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<!-- <view class="navbar_section">--> |
|||
<!-- <view class="title">学员详情</view>--> |
|||
<!-- </view>--> |
|||
|
|||
<!--学员信息--> |
|||
<view class="user_section"> |
|||
<view class="box"> |
|||
<vie class="left"> |
|||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
<view class="btn_box"> |
|||
<view class="btn">即将到期</view> |
|||
</view> |
|||
</vie> |
|||
<vie class="right"> |
|||
<veiw class="item"> |
|||
<view class="name">黄明明</view> |
|||
<view class="age"> |
|||
13岁 |
|||
</view> |
|||
</veiw> |
|||
<view class="item"> |
|||
<view class="title">家长姓名：黄大呢</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">家长电话：18888888888</view> |
|||
</view> |
|||
</vie> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--课程信息--> |
|||
<view class="course_section"> |
|||
<view class="main"> |
|||
<view class="course_box"> |
|||
<view class="item"> |
|||
<view class="title">篮球少儿课程</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
<view class="name">包子皮</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="content">截止时间：2020.05:25</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="content">已上课时：24</view> |
|||
<view class="content">剩余课时：24</view> |
|||
</view> |
|||
|
|||
<view class="tag"> |
|||
出勤高 |
|||
</view> |
|||
|
|||
<view class="btn"> |
|||
延课一周 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg_box bg_top"></view> |
|||
<view class="bg_box bg_bottom"></view> |
|||
</view> |
|||
|
|||
|
|||
<view class="main_section"> |
|||
<view class="section_box"> |
|||
<view class="tag_box"> |
|||
<view :class="['item', tabType=='1' ? 'select':'']" @click="tabChange(1)">出勤记录</view> |
|||
<view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view> |
|||
</view> |
|||
|
|||
<view v-if="tabType=='1'" class="section_1"> |
|||
<view class="ul"> |
|||
<view class="li" @click="opebViewWorkDetails({id :1})"> |
|||
<view class="left"> |
|||
<view class="title">篮球少儿课</view> |
|||
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view> |
|||
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view> |
|||
</view> |
|||
</view> |
|||
<view class="li" @click="opebViewWorkDetails({id :1})"> |
|||
<view class="left"> |
|||
<view class="title">篮球少儿课</view> |
|||
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view> |
|||
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view> |
|||
</view> |
|||
</view> |
|||
<view class="li" @click="opebViewWorkDetails({id :1})"> |
|||
<view class="left"> |
|||
<view class="title">篮球少儿课</view> |
|||
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view v-if="Atype==2" class="btn" style="background-color: #29D3B4;">作业完成</view> |
|||
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view> |
|||
</view> |
|||
</view> |
|||
<view class="li" @click="opebViewWorkDetails({id :1})"> |
|||
<view class="left"> |
|||
<view class="title">篮球少儿课</view> |
|||
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view> |
|||
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view v-if="tabType=='2'" class="section_2"> |
|||
<view class="ul"> |
|||
<view class="li" @click="openViewPhysicalExamination({id:1})"> |
|||
<view class="top"> |
|||
<view class="title">综合评分:96</view> |
|||
<view class="hint">打败了99%学员</view> |
|||
</view> |
|||
<view class="bottom">测试时间：2020.05.30</view> |
|||
</view> |
|||
<view class="li" @click="openViewPhysicalExamination({id:1})"> |
|||
<view class="top"> |
|||
<view class="title">综合评分:96</view> |
|||
<view class="hint">打败了99%学员</view> |
|||
</view> |
|||
<view class="bottom">测试时间：2020.05.30</view> |
|||
</view> |
|||
<view class="li" @click="openViewPhysicalExamination({id:1})"> |
|||
<view class="top"> |
|||
<view class="title">综合评分:96</view> |
|||
<view class="hint">打败了99%学员</view> |
|||
</view> |
|||
<view class="bottom">测试时间：2020.05.30</view> |
|||
</view> |
|||
<view class="li" @click="openViewPhysicalExamination({id:1})"> |
|||
<view class="top"> |
|||
<view class="title">综合评分:96</view> |
|||
<view class="hint">打败了99%学员</view> |
|||
</view> |
|||
<view class="bottom">测试时间：2020.05.30</view> |
|||
</view> |
|||
<view class="li" @click="openViewPhysicalExamination({id:1})"> |
|||
<view class="top"> |
|||
<view class="title">综合评分:96</view> |
|||
<view class="hint">打败了99%学员</view> |
|||
</view> |
|||
<view class="bottom">测试时间：2020.05.30</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</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 { |
|||
formData:{}, |
|||
tabType:'1',//1=班级成员,2=作业任务 |
|||
Atype:1,//1=作业完成,2=作业未提交 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
//切换tab |
|||
tabChange(tabType) { |
|||
this.tabType = tabType |
|||
}, |
|||
|
|||
//打开课程详情 |
|||
openViewCourseInfo(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/course/info' |
|||
}) |
|||
}, |
|||
//打开学员详情页 |
|||
openViewStudentInfo(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/student/info' |
|||
}) |
|||
}, |
|||
|
|||
//打开体测报告 |
|||
openViewPhysicalExamination(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/student/physical_examination' |
|||
}) |
|||
}, |
|||
|
|||
//打开作业任务 |
|||
opebViewWorkDetails(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/student/work_details' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
.title{ |
|||
padding: 20rpx 0; |
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//学员信息 |
|||
.user_section { |
|||
background-color: #29D3B4; |
|||
padding-top: 58rpx; |
|||
padding-bottom: 42rpx; |
|||
.box{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 15rpx; |
|||
.left{ |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
width: 120rpx; |
|||
.pic{ |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.btn_box{ |
|||
position: absolute; |
|||
bottom: -18rpx; |
|||
.btn{ |
|||
width: 120rpx; |
|||
height: 38rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 4rpx; |
|||
background-color: rgba(245,154,35,1); |
|||
color: rgba(255,255,255,1); |
|||
font-size: 20rpx; |
|||
text-align: center; |
|||
border: 0rpx solid rgba(121,121,121,1); |
|||
} |
|||
} |
|||
|
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 18rpx; |
|||
.item{ |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
.name{ |
|||
font-size: 28rpx; |
|||
} |
|||
.age{ |
|||
margin-left: 20rpx; |
|||
width: 128rpx; |
|||
height: 42rpx; |
|||
line-height: 42rpx; |
|||
border-radius: 34rpx; |
|||
background-color: rgba(255,255,255,1); |
|||
color: rgba(51,51,51,1); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//课程信息 |
|||
.course_section{ |
|||
position: relative; |
|||
.main{ |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 0 24rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
.course_box{ |
|||
padding: 42rpx 28rpx; |
|||
width: 692rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
position: relative; |
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 22rpx; |
|||
.title { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.pic { |
|||
width: 58rpx; |
|||
height: 58rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.name { |
|||
color: #333333; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.content { |
|||
color: #AAAAAA; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.tag{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
border-radius: 0rpx 24rpx 0rpx 24rpx; |
|||
background-color: rgba(236,128,141,1); |
|||
color: rgba(255,255,255,1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
} |
|||
.btn{ |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
width: 130rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
border-radius: 10rpx; |
|||
background-color: rgba(41,211,180,0); |
|||
color: rgba(50,219,224,1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
font-family: -regular; |
|||
border: 2rpx solid rgba(50,219,224,1); |
|||
} |
|||
} |
|||
} |
|||
.bg_box{ |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.bg_top{ |
|||
position: absolute; |
|||
top: 0; |
|||
background-color: #29D3B4; |
|||
} |
|||
.bg_bottom{ |
|||
top: 50%; |
|||
position: absolute; |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
|
|||
.section_box { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 34rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 38rpx; |
|||
.tag_box{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 112rpx; |
|||
.item{ |
|||
width: 112rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.select{ |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
//出勤记录 |
|||
.section_1{ |
|||
width: 100%; |
|||
.ul{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
.li{ |
|||
padding: 30rpx 20rpx; |
|||
border: 1px solid #29D3B4; |
|||
border-radius: 18rpx; |
|||
background-color: rgba(41,211,180,0.16); |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.left{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15rpx; |
|||
} |
|||
.right{ |
|||
.btn{ |
|||
width: 110rpx; |
|||
height: 44rpx; |
|||
line-height: 44rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(41,211,180,1); |
|||
color: rgba(255,255,255,1); |
|||
font-size: 20rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
//体测报告 |
|||
.section_2{ |
|||
width: 100%; |
|||
.ul{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
.li{ |
|||
padding: 30rpx 20rpx; |
|||
border: 1px solid #29D3B4; |
|||
border-radius: 18rpx; |
|||
background-color: rgba(41,211,180,0.16); |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.top{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 40rpx; |
|||
.title{ |
|||
font-size: 34rpx; |
|||
} |
|||
.hint{ |
|||
color: #F59A23; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.bottom{} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,127 @@ |
|||
<!--体测数据--> |
|||
<template> |
|||
<view class="overall"> |
|||
<view class="date">2021年03月12日</view> |
|||
|
|||
<view class="content"> |
|||
<view class="circle-container"> |
|||
<view class="card-con-txt1-left"> |
|||
<image src="@/static/images/index/score.png" class="overlay-image"></image> |
|||
</view> |
|||
<view class="card-con-txt1-left-txt">90</view> |
|||
<view class="card-con-txt1-left-txt top1">综合评分</view> |
|||
</view> |
|||
<view style="height: 170rpx;"></view> |
|||
<view style="display: flex;justify-content: space-around;"> |
|||
<view style="text-align: center;"> |
|||
<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">身高 (CM)</view> |
|||
<view style="font-size: 55rpx;color: #29d3b4;">123</view> |
|||
</view> |
|||
<view style="text-align: center;"> |
|||
<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">体重 (KG)</view> |
|||
<view style="font-size: 55rpx;color: #29d3b4;">45</view> |
|||
</view> |
|||
</view> |
|||
<view class="coach-message"> |
|||
<view> |
|||
<image src="@/static/images/index/lv.png" class="drop-image"></image> |
|||
</view> |
|||
<view style="padding: 15rpx 0 0 5rpx;line-height: 1.6;font-size: 30rpx;color: #7F7F7F;">教练寄语教练寄语教练寄语教练寄语教练寄语教练寄语教练寄教练寄语教练寄语教练寄语教练寄语教练寄语教练教练寄语教练寄语教练寄语教练寄语练教练语教练寄教练寄语教练寄语教练寄语教练寄语教练寄语教练</view> |
|||
</view> |
|||
<view style="font-size: 45rpx;text-align: center;margin-top: 30%;">详细数据信息</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.overall { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background-color: #29d3b4; |
|||
} |
|||
|
|||
.date { |
|||
color: #fff; |
|||
width: 92%; |
|||
margin: auto; |
|||
text-align: left; |
|||
font-size: 30rpx; |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
.content { |
|||
width: 92%; |
|||
height: 70vh; |
|||
background-color: #fff; |
|||
border-radius: 15rpx; |
|||
margin: 150rpx auto 0; |
|||
position: relative; |
|||
} |
|||
|
|||
.circle-container::before { |
|||
content: ''; |
|||
width: 200px; |
|||
height: 100px; |
|||
background-color: #fff; |
|||
border-radius: 100px 100px 0 0; |
|||
display: inline-block; |
|||
transform: translate(-50%, 0) rotate(0deg); |
|||
transform-origin: center top; |
|||
position: absolute; |
|||
top: -12%; |
|||
left: 50%; |
|||
transform: translate(-50%, -0%); |
|||
} |
|||
|
|||
.card-con-txt1-left { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.overlay-image { |
|||
width: 300rpx; |
|||
height: 200rpx; |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.card-con-txt1-left-txt { |
|||
font-size: 32rpx; |
|||
color: #29d3b4; |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translate(-50%, -0%); |
|||
} |
|||
|
|||
.top1{ |
|||
top: 5%; |
|||
} |
|||
|
|||
.coach-message{ |
|||
width: 92%; |
|||
margin: 10rpx auto; |
|||
display: flex; |
|||
} |
|||
|
|||
.drop-image{ |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
align-items: center; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,68 @@ |
|||
<!--作业任务--> |
|||
<template> |
|||
<view> |
|||
<view class="top-style"> |
|||
<image src="@/static/images/index/work_details.png" class="top-style-img"> |
|||
</view> |
|||
|
|||
<view class="below-style"> |
|||
<view class="head-img"> |
|||
<fui-avatar width="80" 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 class="multi-line-ellipsis"> |
|||
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.top-style{ |
|||
width: 92%; |
|||
height: 700rpx; |
|||
margin: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.top-style-img{ |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
} |
|||
.below-style{ |
|||
width: 92%; |
|||
margin: auto; |
|||
} |
|||
.head-img { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 10rpx 20rpx; |
|||
} |
|||
.head-text { |
|||
color: #333333; |
|||
font-size: 35rpx; |
|||
padding-left: 20rpx; |
|||
} |
|||
.multi-line-ellipsis { |
|||
color: #333333; |
|||
font-size: 29rpx; |
|||
padding: 5rpx 10rpx; |
|||
// display: -webkit-box; |
|||
// -webkit-box-orient: vertical; |
|||
// -webkit-line-clamp: 2; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue