<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>