<template>
    <view class="student-review">
        <view class="sr-section">
            <view class="ss-name">
                <view>羽毛球课包学会(带体验课)</view>
                <view>一班</view>
            </view>
            <view class="ss-user">
                <view>学员名称:</view>
                <picker class="su-picker">
                    <view>
                        <input disabled placeholder="选择姓名" />
                        <image></image>
                    </view>
                </picker>
            </view>
            <view class="ss-review">
                <view>学员点评:</view>
                <view>
                    <textarea placeholder="请输入您的点评、建议或者发现的问题"></textarea>
                </view>
            </view>
            <view class="ss-title">
                <text>上传照片</text>
                (最多上传3张，只支持.jpg、png 格式）
            </view>
            <view class="ss-pics">
                <view class="sp-item" v-for="i in 5" :key="i">
                    <image class="si-close"></image>
                    <image class="si-img"></image>
                </view>
                <view class="sp-item sp-add">
                    <view></view>
                    <view>上传照片</view>
                </view>
            </view>
        </view>
        <view class="sr-fixed">
            <view hover-class="hover-active">确定</view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .student-review{
        padding-bottom: 108upx;
        padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
    }
    .sr-section{
        background-color: #fff;
        padding: 0 26upx;
        .ss-name{
            padding: 48upx 0 36upx;
            border-bottom: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            >view{
                line-height: 44upx;
                font-weight: 500;
                font-size: 32upx;
                color: #333;
                &+view{
                    margin-left: 20upx;
                    flex-shrink: 0;
                }
                &:first-child{
                    flex-grow: 1;
                    @include textHide(1);
                }
            }
        }
        .ss-user{
            padding: 16upx 0 24upx;
            @include centerFlex(flex-start);
            >view{
                &:first-child{
                    margin-right: 22upx;
                    line-height: 40upx;
                    font-size: 28upx;
                    color: #9a9a9d;
                    
                }
            }
            .su-picker{
                width: 312upx;
                border: 2upx solid #D8D8D8;
                border-radius: 10upx;
                background-color: #F2F2F7;
                view{
                    padding: 0 28upx;
                    height: 68upx;
                    @include centerFlex(space-between);
                }
                input{
                    flex-grow: 1;
                    font-size: 28upx;
                    color: #333;
                }
                image{
                    margin-left: 16upx;
                    flex-shrink: 0;
                    width: 28upx;
                    height: 28upx;
                    background-color: skyblue;
                }
            }
        }
        .ss-review{
            display: flex;
            padding-bottom: 24upx;
            border-bottom: 2upx solid #D8D8D8;
            >view{
                &:first-child{
                    flex-shrink: 0;
                    margin-right: 22upx;
                    font-size: 28upx;
                    line-height: 40upx;
                    color: #333;
                }
                &+view{
                    padding: 30upx;
                    flex-grow: 1;
                    height: 226upx;
                    border-radius: 10upx;
                    border: 2upx solid #D8D8D8;
                    >textarea{
                        width: 100%;
                        height: 100%;
                        line-height: 40upx;
                        font-size: 28upx;
                        color: #333;
                    }
                }
            }
        }
        .ss-title{
            padding: 16upx 0 20upx;
            font-size: 24upx;
            line-height: 44upx;
            color: #9a9a9d;
            >text{
                font-size: 32upx;
                color: #333;
            }
        }
        .ss-pics{
            padding-bottom: 62upx;
            font-size: 0;
            .sp-item{
                position: relative;
                display: inline-block;
                margin-bottom: 24upx;
                width: 200upx;
                height: 200upx;
                border-radius: 10upx;
                background-color: greenyellow;
                overflow: hidden;
                &:not(:nth-child(3n)){
                    margin-right: 44upx;
                }
                .si-close{
                    position: absolute;
                    right: 6upx;
                    top: 6upx;
                    z-index: 2;
                    width: 40upx;
                    height: 40upx;
                    background-color: skyblue;
                }
                .si-img{
                    width: 100%;
                    height: 100%;
                    background-color: royalblue;
                }
                &.sp-add{
                    padding-top: 36upx;
                    >view{
                        &:first-child{
                            position: relative;
                            margin: 0 auto 30upx;
                            width: 60upx;
                            height: 60upx;
                            background-color: springgreen;
                            &::before{
                                content: '';
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                display: block;
                                width: 60upx;
                                height: 4upx;
                                background-color: #D8D8D8;
                            }
                            &::after{
                                content: '';
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                display: block;
                                width: 4upx;
                                height: 60upx;
                                background-color: #D8D8D8;
                            }
                        }
                        &+view{
                            text-align: center;
                            line-height: 40upx;
                            font-size: 28upx;
                            color: #9a9a9d;
                        }
                    }
                }
            }
        }
    }
    .sr-fixed{
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 10upx 24upx;
        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        width: 100%;
        background-color: #fff;
        >view{
            height: 88upx;
            line-height: 88upx;
            text-align: center;
            font-size: 32upx;
            border-radius: 44upx;
            background-color: $themeColor;
            color: #fff;
        }
    }
</style>