507 lines
12 KiB
Vue
507 lines
12 KiB
Vue
<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>
|