diff --git a/pages/Mystudent/addclass.vue b/pages/Mystudent/addclass.vue index 9bdfab7..cb90847 100644 --- a/pages/Mystudent/addclass.vue +++ b/pages/Mystudent/addclass.vue @@ -205,26 +205,39 @@ <!-- 班级标签 --> <view> <view class="caption_top">班级标签</view> - <view class="caption_input"> - <u-input v-model="labels" :type="type" :border="border" placeholder="请输入班级名称"/> - </view> + <!-- 弹出层 --> + <u-select v-model="show2" :list="list" @confirm="confirm"></u-select> + + <view class="caption_input"> + <u-form-item :border-bottom="false" :right-icon="icons" class="no-padding"> + <u-input v-model="form.name" @click="showPopup" placeholder="请输入班级标签"/> + </u-form-item> + </view> + + + + </view> <!-- 班级学生 --> - <view class="caption_class"> - <view style="display: flex; align-items: center;"> + <view class="class_body"> + <view class="caption_flex"> <view>班级学生</view> - <view class="caption_top_links">点击头像选择班级学员</view> + <view class="caption_boder_text2">点击头像选择班级学员</view> + </view> + <view class="caption_boder"> + <view class="class_tp_image"><image src="http://tmp/4cj9prAeuoV015239042fae83018055c4c5c86e5231e.png" mode=""></image></view> </view> - <u-upload del-icon="close" deletable="false"></u-upload> </view> <!-- 班级老师 --> - <view class="caption_class"> - <view style="display: flex; align-items: center;"> - <view>班级老师</view> - <view class="caption_top_links">点击头像选择班级老师</view> - </view> - <u-upload del-icon="close" deletable="false"></u-upload> - </view> + <view class="class_body"> + <view class="caption_flex"> + <view>班级学生</view> + <view class="caption_boder_text2">点击头像选择班级学员</view> + </view> + <view class="caption_boder"> + <view class="class_tp_image"><image src="http://tmp/4cj9prAeuoV015239042fae83018055c4c5c86e5231e.png" mode=""></image></view> + </view> + </view> <view class="caption_add">添加</view> </view> </u-popup> @@ -242,35 +255,66 @@ export default { labels:'', // 弹出层的变量 show: false, + // 下拉框 + show2:false, + form:{ + name: '' + }, + list: [ + { + value: '1', + label: '听力' + }, + { + value: '2', + label: '阅读' + }, + { + value: '3', + label: '写作' + }, + { + value: '4', + label: '口语' + } + ], + icons:'arrow-down-fill', + icons_rigth:'arrow-down-fill', + icons_top:'arrow-up-fill', + bgc: { backgroundColor: "#F6F9FC", }, checkindex: 0, + + } }, methods: { // 创建班级点击事件 create(){ this.show = !this.show - console.log('111') + }, + showPopup(){ + this.show2 =!this.show2 + this.icons= this.icons_top + }, + confirm(e){ + this.icons= this.icons_rigth + e.forEach(item=>{ + this.form.name=item.label + }) } + } } </script> <style lang="scss" scoped> -::v-deep .u-add-wrap { - width: 96rpx !important; - height: 96rpx !important; - background: #FFFFFF !important; - border-radius: 20rpx 20rpx 20rpx 20rpx; - border: 2rpx solid #DDE2EE; - .u-add-tips{ - display: none; - } - } - +.no-padding /deep/ .u-form-item { + padding: 0; +} page { background: #F6F9FC; } @@ -619,5 +663,40 @@ page { .caption_class{ margin-top: 40rpx; } + + .class_body{ + margin-top: 40rpx; + .caption_flex{ + display: flex; + align-items: center; + .caption_boder_text2{ + font-size: 23rpx; + font-weight: 500; + color: #2D7CE6; + } + } + .caption_boder{ + position: relative; + width: 96rpx; + height: 96rpx; + background: #FFFFFF; + border-radius: 20rpx 20rpx 20rpx 20rpx; + border: 2rpx solid #DDE2EE; + margin-top: 17rpx; + .class_tp_image{ + position: absolute; + top: 28rpx; + right: 32rpx; + bottom: 0; + width: +28rpx; + height: +28rpx; + } + + } + } + + } </style>