418 lines
9.8 KiB
Vue
418 lines
9.8 KiB
Vue
<template>
|
||
<view class="concent">
|
||
<view class="view_body">
|
||
<u-navbar :is-back="true" title='添加作业' title-color="#000" :border-bottom="false" :background="true" id="navbar">
|
||
</u-navbar>
|
||
<view class="view_header">
|
||
<view class="view_title">标题</view>
|
||
<view class="view_input">
|
||
<u-form-item prop="value">
|
||
<u-input v-model="form.value" :type="type" :border="border" placeholder="输入作业标题" />
|
||
</u-form-item>
|
||
</view>
|
||
</view>
|
||
<!-- 班级安排 -->
|
||
<view>
|
||
<view class="view_tubiao">
|
||
<view class="view_title">班级安排</view>
|
||
<view class="view_tb">
|
||
|
||
<view class="view_add">
|
||
<text>+</text>
|
||
添加
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="class_bj">
|
||
<view class="class_images">
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">雅思1班</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">雅思1班</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">雅思1班</view>
|
||
</view>
|
||
</view>
|
||
<!-- 2 -->
|
||
<view class="class_images">
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">雅思1班</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">雅思1班</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">雅思1班</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 学员安排 -->
|
||
<view>
|
||
<view class="view_tubiao">
|
||
<view class="view_title">学员安排</view>
|
||
<view class="view_tb">
|
||
|
||
<view class="view_add">
|
||
<text>+</text>
|
||
添加
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="class_bj">
|
||
<view class="class_images">
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">LULY</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">Bright</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">Bright</view>
|
||
</view>
|
||
</view>
|
||
<!-- 2 -->
|
||
<view class="class_images">
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">LULY</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">Bright</view>
|
||
</view>
|
||
<view class="class_ys">
|
||
<view class="class_tp">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
|
||
</view>
|
||
<view class="class_wz">Bright</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 作业安排 -->
|
||
<view>
|
||
<view>
|
||
<view class="view_tubiao">
|
||
<view class="view_title">作业安排</view>
|
||
<view class="view_tb">
|
||
|
||
<view class="view_add">
|
||
<text>+</text>
|
||
添加
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view_operation">
|
||
<view>
|
||
<view class="view_ap">
|
||
<text>听力-IELTS 18-Test 2</text>
|
||
<view class="view_qbs">
|
||
<view class="view_qb">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/uUikvKyGaRLDLWE2KYjv" mode=""></image>
|
||
</view>
|
||
<view class="view_qb">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/uvmKnUiil91Tfpd570Ev" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view></view>
|
||
</view>
|
||
<view class="view_English">
|
||
<view>Part 1：Questions1-10</view>
|
||
<view>Complete the notes below.</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="view_operation">
|
||
<view>
|
||
<view class="view_ap">
|
||
<text>听力-IELTS 18-Test 2</text>
|
||
<view class="view_qbs">
|
||
<view class="view_qb">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/uUikvKyGaRLDLWE2KYjv" mode=""></image>
|
||
</view>
|
||
<view class="view_qb">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/uvmKnUiil91Tfpd570Ev" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view></view>
|
||
</view>
|
||
<view class="view_English">
|
||
<view>Part 1：Questions1-10</view>
|
||
<view>Complete the notes below.</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 截止时间 -->
|
||
<view>
|
||
<view class="view_tubiao">
|
||
<view class="view_title">截止时间</view>
|
||
</view>
|
||
<view>
|
||
<view class="view_form">
|
||
<u-picker mode="time" v-model="show" :params="params" @confirm="printValue"></u-picker>
|
||
<u-form-item prop="times">
|
||
<u-input v-model="form.times" :type="type" :border="border" placeholder="选择作业截止的时间" @click="show = true" />
|
||
</u-form-item>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 描述 -->
|
||
<view>
|
||
<view class="view_tubiao">
|
||
<view class="view_title">描述</view>
|
||
</view>
|
||
<view class="view_textrea">
|
||
<textarea value="" placeholder="输入你的描述... " />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 按钮 -->
|
||
<view class="view_footer" @click="submit">
|
||
<view class="view_button" >确认添加 </view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 表单双向数据绑定
|
||
form: {
|
||
value: '',
|
||
times:'',
|
||
|
||
},
|
||
// prick 时间选择框数据
|
||
params: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
},
|
||
show: false,
|
||
radio: '',
|
||
switchVal: false,
|
||
}
|
||
},
|
||
methods:{
|
||
// 获取截止时间
|
||
printValue(e){
|
||
this.form.times=`${e.year}-${e.month}-${e.day}`
|
||
},
|
||
submit() {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.concent {
|
||
width: 100vw;
|
||
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
|
||
}
|
||
|
||
.view_body {
|
||
width: 91.3%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.view_title {
|
||
font-size: 28rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
}
|
||
|
||
.view_input {
|
||
line-height: 70rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 16rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.view_tubiao {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 46rpx;
|
||
}
|
||
|
||
.view_tb {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 52rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
opacity: 1;
|
||
border: 2rpx solid #F1F1F1;
|
||
}
|
||
|
||
.view_add {
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 500;
|
||
color: #F18F21;
|
||
padding: 14rpx 24rpx;
|
||
text {
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
|
||
.class_bj {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.class_images {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.class_tp {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.class_ys {
|
||
width: 215rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
// width: 215rpx;
|
||
height: 96rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
}
|
||
|
||
.class_wz {
|
||
font-size: 28rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 500;
|
||
color: #072F5A;
|
||
}
|
||
|
||
.view_qb {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.view_qbs {
|
||
display: flex;
|
||
}
|
||
|
||
.view_ap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
}
|
||
}
|
||
|
||
.view_operation {
|
||
margin-top: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
padding: 34rpx 32rpx;
|
||
}
|
||
|
||
.view_English {
|
||
margin-top: 24rpx;
|
||
padding: 20rpx;
|
||
background: #F9F9F9;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
view {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #2E4975;
|
||
}
|
||
}
|
||
.view_form{
|
||
padding: 26rpx 32rpx;
|
||
background: #FFFFFF;
|
||
margin-top: 16rpx;
|
||
}
|
||
.view_textrea{
|
||
height: 260rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;;
|
||
// padding: 26rpx 32rpx;
|
||
margin-top:16rpx;
|
||
}
|
||
.view_button{
|
||
width: 93.1%;
|
||
margin:auto;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
|
||
border-radius: 104rpx 104rpx 104rpx 104rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.view_footer{
|
||
width: 100%;
|
||
padding: 0 16rpx;
|
||
height: 144rpx;
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
padding: 32rpx 0rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202,202,202,0.25);
|
||
margin-top: 8rpx;
|
||
}
|
||
</style>
|