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.
208 lines
6.0 KiB
208 lines
6.0 KiB
<template>
|
|
<view class="task-info">
|
|
<block>
|
|
<view class="i-header">
|
|
<picker>
|
|
<view class="top-bar"><text>12</text></view>
|
|
</picker>
|
|
<picker class="select-picker">
|
|
<view>
|
|
<input disabled value="小小李木子" />
|
|
<image></image>
|
|
</view>
|
|
</picker>
|
|
|
|
</view>
|
|
<view class="i-user">
|
|
<image></image>
|
|
<view>
|
|
<text>学员姓名:</text>小李张净水器净
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="ti-section">
|
|
<block v-if="false">
|
|
<view class="s-name">
|
|
<view>羽毛球课包学会(带体验课)</view>
|
|
<view>一班</view>
|
|
</view>
|
|
<view class="s-user">
|
|
<view>学员名称:</view>
|
|
<picker class="select-picker">
|
|
<view>
|
|
<input disabled value="小小李木子" />
|
|
<image></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</block>
|
|
|
|
<view class="s-detail">
|
|
<view>完成情况</view>
|
|
<view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容村上春树吃餐……</view>
|
|
</view>
|
|
<view class="s-addr">
|
|
<view>视频链接：</view>
|
|
<view>htttp//ksjksjksj.cocfcwqcwq</view>
|
|
<view>复制</view>
|
|
</view>
|
|
<view class="s-imgs">
|
|
<image v-for="i in 5" :key="i"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.ti-section{
|
|
padding: 0 24upx 26upx;
|
|
background-color: #fff;
|
|
|
|
.s-name{
|
|
height: 128upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
&+view{
|
|
margin-left: 10upx;
|
|
flex-shrink: 0;
|
|
max-width: 20%;
|
|
}
|
|
}
|
|
}
|
|
.s-user{
|
|
padding: 16upx 0;
|
|
@include centerFlex(flex-start);
|
|
>view{
|
|
margin-right: 22upx;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #9a9a9d;
|
|
}
|
|
|
|
}
|
|
.s-detail{
|
|
padding-top: 20upx;
|
|
>view{
|
|
&:first-child{
|
|
margin-bottom: 12upx;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
&+view{
|
|
word-break: break-all;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
.s-addr{
|
|
padding: 30upx 0;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
&:first-child{
|
|
flex-shrink: 0;
|
|
color: #333;
|
|
}
|
|
&:nth-child(2){
|
|
flex-grow: 1;
|
|
color: #9A9A9D;
|
|
@include textHide(1);
|
|
}
|
|
&:nth-child(3){
|
|
margin-left: 10upx;
|
|
flex-shrink: 0;
|
|
width: 98upx;
|
|
height: 42upx;
|
|
line-height: 38upx;
|
|
text-align: center;
|
|
border: 2upx solid #009874;
|
|
border-radius: 22upx;
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
.s-imgs{
|
|
padding-top: 20upx;
|
|
font-size: 0;
|
|
>image{
|
|
margin-bottom: 24upx;
|
|
width: 200upx;
|
|
height: 200upx;
|
|
border-radius: 10upx;
|
|
background-color: skyblue;
|
|
&:not(:nth-child(3n)){
|
|
margin-right: 44upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.i-header{
|
|
padding: 0 24upx 26upx;
|
|
background-color: #fff;
|
|
|
|
}
|
|
.i-user{
|
|
margin: 24upx 0 24upx;
|
|
padding: 30upx;
|
|
background-color: #fff;
|
|
@include centerFlex(flex-start);
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-right: 32upx;
|
|
width: 112upx;
|
|
height: 112upx;
|
|
border-radius: 50%;
|
|
background-color: slateblue;
|
|
|
|
}
|
|
>view{
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
>text{
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
.select-picker{
|
|
width: 312upx;
|
|
border: 2upx solid #D8D8D8;
|
|
border-radius: 10upx;
|
|
background-color: #F2F2F7;
|
|
view{
|
|
padding: 0 24upx;
|
|
height: 68upx;
|
|
@include centerFlex(center);
|
|
>input{
|
|
flex-grow: 1;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
>image{
|
|
flex-shrink: 0;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
background-color: skyblue;
|
|
}
|
|
}
|
|
}
|
|
</style>
|