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

507 lines
12 KiB
Vue
Raw Normal View History

新建分支提交
2023-12-05 16:45:28 +08:00
<template>
<view class="view_body">
<view class="view_bulk">
<!-- navbar -->
<u-navbar :is-back="true" title='详情' title-color="#000" :border-bottom="false" :background="true" id="navbar">
</u-navbar>
<!-- 听力题库作业 -->
<view class="view_hearing">
<view class="view_line">
<view class="view_first_line">
<view class="image_earphones">
<u-icon name="kefu-ermai" color="#F18F21"></u-icon>
</view>
<view class="view_first_wz">
听力题库作业
</view>
</view>
<view class="toward">进行中</view>
</view>
<!-- 描述 -->
<view class="view_descriptive">
<view class="view_icon">
<u-icon name="order"></u-icon>
<view>描述</view>
</view>
<view class="view_textual">
最好在中午十二点之前完成交上作业，过期不候
</view>
</view>
<view class="view_descriptive">
<view class="view_icon">
<u-icon name="clock"></u-icon>
<view>时间</view>
</view>
<view class="view_textual">
02-12 12:00
</view>
</view>
<view class="view_descriptive">
<view class="view_icon">
<u-icon name="clock"></u-icon>
<view>已完成</view>
</view>
<u-line-progress active-color="#2979ff" :percent="40" class="progress"></u-line-progress>
</view>
</view>
<!-- 班级 -->
<view class="ap_class">
<!-- 安排班级 -->
<view class="ap_classes">
<view class="ad_organization">
<view class="ad_ap">安排班级</view>
<view class="ad_icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="ad_images">
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uYx2XEq9tGjmezlk86Nv" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uZY30bUj2rGdQ5DbzhHp" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/ueBRYf4JiLyck19y1ub8" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/u0EhnGWy9EIdBXEF1saO" mode=""></image>
</view>
</view>
</view>
<!-- 成员安排 -->
<view class="ap_classes">
<view class="ad_organization">
<view class="ad_ap">成员安排</view>
<view class="ad_icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="ad_images">
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uYx2XEq9tGjmezlk86Nv" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/uZY30bUj2rGdQ5DbzhHp" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/ueBRYf4JiLyck19y1ub8" mode=""></image>
</view>
<view>
<image src="https://file.langsi.online/yasiimg/web/static/u0EhnGWy9EIdBXEF1saO" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 时间线 -->
<view class="view_timeline">
<u-time-line>
<!-- 时间线1 -->
<u-time-line-item nodeTop="2" node-color="red">
<template v-slot:content>
<view>
<view class="u-order-title">
<view class="fickle">
<view class="view_first_wz">Test 1</view>
<view class="changeable greenish">听力</view>
</view>
<!-- 图标 -->
<view class="timeline_tb">
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
</view>
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
</view>
</view>
</view>
<veiw class="blue-green">
<view class="blue_qs">
<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
</view>
<view class="text-right">
<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
</view>
</veiw>
</view>
</template>
</u-time-line-item>
<!-- 时间线2 -->
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-title">
<view class="fickle">
<view class="view_first_wz">Test 1</view>
<view class="changeable yellow">听力</view>
</view>
<!-- 图标 -->
<view class="timeline_tb">
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
</view>
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
</view>
</view>
</view>
<veiw class="blue-green">
<view class="blue_qs2">
<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
</view>
<view class="text-right">
<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
</view>
</veiw>
</view>
</template>
</u-time-line-item>
<!-- 时间线3 -->
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-title">
<view class="fickle">
<view class="view_first_wz">Test 1</view>
<view class="changeable blur">听力</view>
</view>
<!-- 图标 -->
<view class="timeline_tb">
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
</view>
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
</view>
</view>
</view>
<veiw class="blue-green">
<view class="blue_qs3">
<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
</view>
<view class="text-right">
<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
</view>
</veiw>
</view>
</template>
</u-time-line-item>
<!-- 时间线4 -->
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-title">
<view class="fickle">
<view class="view_first_wz">Test 1</view>
<view class="changeable violet">听力</view>
</view>
<!-- 图标 -->
<view class="timeline_tb">
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
</view>
<view class="timeline_image">
<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
</view>
</view>
</view>
<veiw class="blue-green">
<view class="blue_qs4">
<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
</view>
<view class="text-right">
<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
</view>
</veiw>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
::v-deep .u-dot {
/* 在这里编写你的样式代码 */
background: #2D7CE6 !important;
}
.view_body {
width: 100%;
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
box-sizing: border-box;
}
.view_bulk {
width: 91.3%;
margin: 0 auto;
}
.view_hearing {
background-color: #fff;
padding: 36rpx 32rpx;
}
.view_first_line {
display: flex;
}
.view_first_wz {
font-size: 28rpx;
font-weight: 800;
color: #2E4975;
margin-left: 12rpx;
}
.view_line {
display: flex;
justify-content: space-between;
}
.toward {
font-size: 24rpx;
font-weight: 500;
color: #F18F21;
}
.view_descriptive {
display: flex;
flex-direction: column;
margin-top: 22rpx;
}
.view_icon {
display: flex;
view {
font-size: 25rpx;
font-weight: 500;
color: rgba(46, 73, 117, 0.6);
margin-left: 10rpx;
}
}
.view_textual {
font-size: 25rpx;
font-weight: 500;
color: #2E4975;
margin-top: 15rpx;
}
.progress {
margin-top: 15rpx;
}
.ap_class {
display: flex;
justify-content: space-between;
margin: 20rpx 0rpx;
}
.ap_classes {
display: flex;
flex-direction: column;
padding: 24rpx;
background: linear-gradient(174deg, #FFF2E4 0%, #FFFFFF 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.ad_icon {
margin-left: 130rpx;
}
.ad_organization {
display: flex;
}
.ad_images {
display: flex;
justify-content: space-between;
margin-top: 32rpx;
}
.ad_images view {
width: 36rpx;
height: 36rpx;
}
.ad_ap {
font-size: 32rpx;
font-weight: 800;
color: #2E4975;
}
.view_timeline {
padding: 32rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
//时间线
.u-order-title {
display: flex;
justify-content: space-between;
}
.timeline_image {
width: 24rpx;
height: 24rpx;
margin-left: 40rpx;
}
.fickle{
display: flex;
}
.timeline_tb {
display: flex;
}
.text_wrap {
width: 380rpx;
height: 38rpx;
font-size: 24rpx;
font-weight: 500;
color: #2E4975;
line-height: 38rpx;
padding: 20rpx;
}
.blue-green {
height: 116rpx;
position: relative;
display: flex;
justify-content: space-between;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 20rpx;
margin-top: 15rpx;
}
.blue_qs {
position: absolute;
left: 0;
top: 0;
width: 268rpx;
height: 156rpx;
background: #E8FCF7;
border-radius: 20rpx 0rpx 0rpx 20rpx;
}
.blue_qs2{
position: absolute;
left: 0;
top: 0;
width: 416rpx;
height: 156rpx;
background: #FCF0D4;
border-radius: 20rpx 0rpx 0rpx 20rpx;
}
.blue_qs3{
position: absolute;
left: 0;
top: 0;
width: 543rpx;
height: 156rpx;
background: rgba(63,122,242,0.1);
border-radius: 20rpx 0rpx 0rpx 20rpx;
}
.blue_qs4{
position: absolute;
left: 0;
top: 0;
width: 543rpx;
height: 156rpx;
border-radius: 20rpx 0rpx 0rpx 20rpx;
}
.text-right {
position: absolute;
right: 13rpx;
top: 20rpx;
}
.u-node {
width: 44rpx;
height: 44rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #d0d0d0;
}
.changeable{
padding: 10rpx 20rpx ;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 20rpx;
font-weight: 500;
margin-left: 12rpx;
}
.u-order-desc {
color: rgb(150, 150, 150);
font-size: 28rpx;
margin-bottom: 6rpx;
}
.u-order-time {
color: rgb(200, 200, 200);
font-size: 26rpx;
}
.greenish{
background: rgba(27,225,178,0.1);
color: #1BE1B2;
}
.yellow{
background: rgba(242,182,42,0.2);
color: #F2AA02;
}
.blur{
background: rgba(63,122,242,0.2);
color: #3F7AF2;
}
.violet{
background: rgba(242,63,170,0.1);
color: #F23FEB;
}
</style>
Reference in New Issue Copy Permalink