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.
244 lines
7.9 KiB
244 lines
7.9 KiB
<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>
|