chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5ea72f897a
smartmeter-app/pages/Mystudent/arrange_work.vue
libowei 8f28857a6b 新建分支提交
2023-12-05 16:45:28 +08:00

369 lines
7.7 KiB
Vue
Raw Blame History

<template>
<view class="pagebox">
<u-navbar title="作业安排"
:border-bottom="false"
:background="bgc"
title-color='#2E4975'
title-size='36'
height='36'></u-navbar>
<view class="serchbox">
<view class="serchimg">
<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
</image>
</view>
<input type="text"
placeholder="搜索相关内容..."
class="input"
placeholder-style="color:#C7CDD3 ">
</view>
<view class="checkbox">
<view class="chekcont">
时间排序
<view class="iconfont icon-arow_down"></view>
</view>
<view class="chekcont">
题库类型
<view class="iconfont icon-arow_down"></view>
</view>
<view class="chekcont">
状态
<view class="iconfont icon-arow_down"></view>
</view>
</view>
<view class="card_bigbox">
<view class="work_card" v-for="(item,index ) in work" :key="index"
:class="item.iswork === '1' ? 'act1' : (item.iswork === '2' ? 'act3' : 'default')">
<view class="work_card_top">
<view class="work_card_top_left">
<view class="work_card_top_left_img">
<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
</view>
课后作业
</view>
<view class="work_card_top_right"
:class="isalready == true ? 'act2' : ''">
进行中
</view>
</view>
<view class="work_card_cont_box">
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
</view>
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
</view>
描述
</view>
<view class="work_card_info_bot">
最好在中午十二点之前完成交上作业，过期不候
</view>
</view>
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">
</image>
</view>
时间
</view>
<view class="work_card_info_bot">
02-12 12:00
</view>
</view>
</view>
</view>
<view class="botbtn">
<view class="btn">
添加作业
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#F0F6FF",
},
isalready: true,
work: [
{ "iswork": "0" },
{ "iswork": "1" },
{ "iswork": "2" },
{ "iswork": "0" }
],
}
},
methods: {
}
}
</script>
<style lang="scss" >
page {
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
padding-bottom: 170rpx;
}
.pagebox {
padding: 0 32rpx;
.serchbox {
padding: 0 32rpx;
display: flex;
flex-wrap: nowrap;
margin-top: 30rpx;
align-items: center;
width: 686rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.serchimg {
width: 30.51rpx;
height: 32rpx;
margin-right: 24rpx;
}
.input {
margin: 0 auto;
width: 568rpx;
height: 88rpx;
border-radius: 30rpx;
// background-color: #f5f8fc;
// display: flex;
// justify-content: center;
// align-items: center;
// text-align: center;
font-size: 28rpx;
font-family: Source Han Sans CN, Source Han Sans CN-Light;
font-weight: 300;
text-align: left;
color: #a7b9cd;
letter-spacing: 1.2rpx;
line-height: 36rpx;
// padding: 0 100rpx;
// padding-right: 135rpx;
box-sizing: border-box;
}
}
.checkbox {
margin-top: 32rpx;
padding: 0 34rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.chekcont {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.6);
.icon-arow_down {
margin-left: 6rpx;
font-size: 16rpx;
}
}
}
.card_bigbox {
.work_card {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
width: 686rpx;
padding: 32rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border-left: 8rpx solid #F18F21;
.work_card_top {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.work_card_top_left {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 28rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2E4975;
.work_card_top_left_img {
margin-right: 8rpx;
width: 38rpx;
height: 32rpx;
}
}
.work_card_top_right {
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #F18F21;
}
.act2 {
color: #2D7CE6;
}
}
.work_card_cont_box {
margin-top: 16rpx;
padding: 24rpx;
width: 100%;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.work_card_cont:last-child {
margin-bottom: 0;
}
.work_card_cont {
margin-bottom: 24rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.work_card_cont_point {
width: 8rpx;
height: 8rpx;
background: #2E4975;
border-radius: 50%;
}
.work_card_cont_text {
margin-left: 20rpx;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2E4975;
}
.work_card_cont_tag {
margin-left: 30rpx;
padding: 8rpx 18rpx;
background: #FFF2E4;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #F18F21;
}
}
}
.work_card_info_box {
display: flex;
flex-wrap: wrap;
margin-top: 22rpx;
.work_card_info_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: rgba(46, 73, 117, 0.6);
.work_card_info_topimg {
margin-right: 8rpx;
width: 18.74rpx;
height: 20rpx;
}
}
.work_card_info_bot {
margin-top: 4rpx;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2E4975;
}
}
}
.act1 {
border-left: 8rpx solid #2D7CE6;
}
.act3 {
border-left: 8rpx solid #DFDFDF;
}
}
.botbtn{
padding: 32rpx 32rpx 0 32rpx;
margin-left: -32rpx;
position: fixed;
bottom: 0;
width: 750rpx;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202,202,202,0.25);
border-radius: 40rpx 40rpx 0rpx 0rpx;
.btn{
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #FFFFFF;
width: 686rpx;
height: 80rpx;
background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
border-radius: 104rpx 104rpx 104rpx 104rpx;
}
}
}</style>
Reference in New Issue View Git Blame Copy Permalink