350 lines
7.5 KiB
Vue
350 lines
7.5 KiB
Vue
|
<template>
|
|||
|
|
<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_botton">
|
|||
|
|
<view class="view_spoken">
|
|||
|
|
<view>
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_span">
|
|||
|
|
<text>雅思1班</text>
|
|||
|
|
<view>基础班</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_yellowBotton">
|
|||
|
|
安排作业
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_zy">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="view_left" v-for="(item,index) in clas" :key="index">
|
|||
|
|
<view class="veiw_left2">
|
|||
|
|
<view class="view_class">
|
|||
|
|
<text>{{item.title}}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_images">
|
|||
|
|
<image :src="item1.url" mode="" v-for="(item1,index) in item.image"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="view_operation">
|
|||
|
|
<view class="view_class">
|
|||
|
|
<text>作业安排</text>
|
|||
|
|
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_no" v-if="isShow">
|
|||
|
|
暂未安排作业哦!<text class="organization">去安排</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_show" v-if="!isShow">
|
|||
|
|
<view class="view_crossbar" v-for="(item,index) in operation" :key="index">
|
|||
|
|
<image :src="item.image" mode=""></image>
|
|||
|
|
<text>{{item.title}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_footer">
|
|||
|
|
<view>
|
|||
|
|
<text>作业提交记录</text>
|
|||
|
|
<view class="view_icon">
|
|||
|
|
七天内<u-icon name="arrow-down"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view_image">
|
|||
|
|
<view></view>
|
|||
|
|
<text class="text">暂无学习记录，快去安排作业吧！</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
isShow: false,
|
|||
|
|
clas:[
|
|||
|
|
{
|
|||
|
|
title:'班级成员',
|
|||
|
|
image:[
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/ufg5N01CbfezyG5wt48Q'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uy3xEPgyYPnRqPbpamya'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uY8idjLvCQSuYCzvus9A'
|
|||
|
|
},{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/ucf2g8fGLqNtW7OpGNT6'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:'带班老师',
|
|||
|
|
image:[
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/ufg5N01CbfezyG5wt48Q'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uy3xEPgyYPnRqPbpamya'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/uY8idjLvCQSuYCzvus9A'
|
|||
|
|
},{
|
|||
|
|
url:'https://file.langsi.online/yasiimg/web/static/ucf2g8fGLqNtW7OpGNT6'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
operation:[
|
|||
|
|
{
|
|||
|
|
image:'https://file.langsi.online/yasiimg/web/static/ukPnTLkhCKU5zhbM7SMu',
|
|||
|
|
title:'课后作业'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image:'https://file.langsi.online/yasiimg/web/static/udltPEywiuFFxqFMSFJE',
|
|||
|
|
title:'单科模考'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image:'https://file.langsi.online/yasiimg/web/static/uT04VQSSNlabXp1bhXSG',
|
|||
|
|
title:'写作作业'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image:'https://file.langsi.online/yasiimg/web/static/uBWxObS2WAFtu2BIIx9l',
|
|||
|
|
title:'五一作业'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image:'https://file.langsi.online/yasiimg/web/static/uo08OdTA2zsojWQEap69',
|
|||
|
|
title:'更多'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.view_body {
|
|||
|
|
height: 100vh;
|
|||
|
|
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
|
|||
|
|
.view_botton {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 124rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
|
|||
|
|
.view_spoken {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.view_span {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
margin-left: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_span text:nth-child(1) {
|
|||
|
|
height: 32rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #072F5A;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_span view {
|
|||
|
|
height: 40rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
ling-height: 40rpx;
|
|||
|
|
background: #EBF3FF;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #2D7CE6;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 76rpx;
|
|||
|
|
height: 76rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_zy {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_left {
|
|||
|
|
width: 333rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-evenly;
|
|||
|
|
height: 160rpx;
|
|||
|
|
background: linear-gradient(174deg, #FFF2E4 0%, #FFFFFF 100%);
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
// padding: 60rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.veiw_left2{
|
|||
|
|
width: 333rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_class {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_class text {
|
|||
|
|
width: 128rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_images {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_operation {
|
|||
|
|
width: 686rpx;
|
|||
|
|
height: 196rpx;
|
|||
|
|
background: linear-gradient(170deg, #FFF2E4 0%, #FFFFFF 100%);
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.view_no {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #627698;
|
|||
|
|
margin: 40rpx 0rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.view_no .organization{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #2D7CE6;
|
|||
|
|
border-bottom: 2px solid #2D7CE6;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_show{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 25rpx 0rpx;
|
|||
|
|
}
|
|||
|
|
.view_crossbar{
|
|||
|
|
width: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #F39852;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.view_crossbar image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 35rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.view_footer view {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 20rpx 0rpx;
|
|||
|
|
text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.view_image{
|
|||
|
|
display:flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300rpx;
|
|||
|
|
view {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 500rpx;
|
|||
|
|
background: url('https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H') no-repeat center;
|
|||
|
|
background-size: 30%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #0E3B77;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.view_icon{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: rgba(7,47,90,0.6);
|
|||
|
|
}
|
|||
|
|
.view_yellowBotton{
|
|||
|
|
padding: 20rpx 50rpx;
|
|||
|
|
background: #F39852;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|