chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
af0a8ee6ea
smartmeter-app/pages_teacher/teacher_teachers/teacher_addOperation.vue

514 lines
13 KiB
Vue
Raw Normal View History

新建分支提交
2023-12-05 16:45:28 +08:00
<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>
对内容进行修改
2023-12-07 15:09:23 +08:00
<view>
<view class="view_tubiao">
<view class="view_title">作业安排</view>
</view>
<view>
<view class="Ielts">IELTS 18</view>
<view style="background-color: #fff; padding: 32rpx 40rpx;">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1：多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1：多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1：多选题</text>
</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
对内容进行修改
2023-12-07 15:09:23 +08:00
<view>
<view class="Ielts">IELTS 18</view>
<view style="background-color: #fff; padding: 32rpx 40rpx;">
<view style="display: flex; align-items: center;">
<view class="yuandi"></view>
<view class="Test">Test 2</view>
<view class="ellipses">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1：多选题</text>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
对内容进行修改
2023-12-07 15:09:23 +08:00
<view>
新建分支提交
2023-12-05 16:45:28 +08:00
<view>
对内容进行修改
2023-12-07 15:09:23 +08:00
<view class="Ielts">IELTS 18</view>
<view style="background-color: #fff; padding: 32rpx 40rpx;">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="erotic">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1：多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="erotic">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1：多选题</text>
</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
对内容进行修改
2023-12-07 15:09:23 +08:00
<!--按钮 -->
<view style="display: flex; justify-content: center; margin-top: 32rpx;">
<view class="increase">
<u-icon name="plus"></u-icon>
添加
</view>
</view>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
对内容进行修改
2023-12-07 15:09:23 +08:00
新建分支提交
2023-12-05 16:45:28 +08:00
</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">
对内容进行修改
2023-12-07 15:09:23 +08:00
<u-input v-model="form.times" :type="type" :border="border" placeholder="选择作业截止的时间" @click="show = true" placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
新建分支提交
2023-12-05 16:45:28 +08:00
</u-form-item>
</view>
</view>
</view>
<!-- 描述 -->
<view>
<view class="view_tubiao">
<view class="view_title">描述</view>
</view>
<view class="view_textrea">
对内容进行修改
2023-12-07 15:09:23 +08:00
<textarea value="" placeholder="输入你的描述... "placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
新建分支提交
2023-12-05 16:45:28 +08:00
</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>
对内容进行修改
2023-12-07 15:09:23 +08:00
// 样式穿透
::v-deep .u-dot {
background: #2D7CE6 !important;
}
新建分支提交
2023-12-05 16:45:28 +08:00
.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;
}
.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;
}
对内容进行修改
2023-12-07 15:09:23 +08:00
.Ielts{
font-size: 40rpx;
font-weight: 400;
color: #2E4975;
margin: 20rpx 0;
}
新建分支提交
2023-12-05 16:45:28 +08:00
.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_form{
对内容进行修改
2023-12-07 15:09:23 +08:00
padding: 0rpx 32rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
background: #FFFFFF;
margin-top: 16rpx;
对内容进行修改
2023-12-07 15:09:23 +08:00
border-radius: 20rpx 20rpx 20rpx 20rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
}
.view_textrea{
height: 260rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;;
margin-top:16rpx;
对内容进行修改
2023-12-07 15:09:23 +08:00
padding: 28rpx 32rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
}
.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;
}
对内容进行修改
2023-12-07 15:09:23 +08:00
.u-node {
width: 44rpx;
height: 44rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #d0d0d0;
}
.u-order-desc {
padding: 20rpx;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin: 12rpx 0rpx;
text {
font-size: 24rpx;
font-weight: 500;
color: #2E4975;
}
}
.u-order-time {
color: rgb(200, 200, 200);
font-size: 26rpx;
}
.yuandi{
width: 18rpx;
height: 18rpx;
background: #2D7CE6;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.Test{
font-size: 28rpx;
font-weight: 800;
color: #2E4975;
margin-left: 12rpx;
}
.ellipses{
font-size: 20rpx;
background: rgba(242,170,2,0.2);
margin-left: 12rpx;
padding: 8rpx 20rpx;
color: #F2AA02;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.erotic{
font-size: 20rpx;
background: rgba(242,63,170,0.1);
margin-left: 12rpx;
padding: 8rpx 20rpx;
color: #F23FEB;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.greener{
font-size: 20rpx;
background: rgba(27,225,178,0.1);
margin-left: 12rpx;
padding: 8rpx 20rpx;
color: #1BE1B2;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.increase{
padding: 26rpx 125rpx;
color: #FFFFFF;
background-color: #F39852;
border-radius: 20rpx 20rpx 20rpx 20rpx;
text-align: center;
}
新建分支提交
2023-12-05 16:45:28 +08:00
</style>
Reference in New Issue Copy Permalink