|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="classroom-task-container">
|
|
|
- <span>课堂任务</span>
|
|
|
+ <div><span>课堂任务</span></div>
|
|
|
<div class="classroom-task">
|
|
|
<el-timeline>
|
|
|
<!--课前任务-->
|
|
@@ -200,6 +200,27 @@
|
|
|
</el-timeline-item>
|
|
|
</el-timeline>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!--右侧线上课件,回传文件-->
|
|
|
+ <div class="classroom-courseware">
|
|
|
+ <div class="classroom-courseware-container">
|
|
|
+ <div class="internet-courseware">
|
|
|
+ <div>线上课件:</div>
|
|
|
+ <div class="internet-courseware-content">
|
|
|
+ <el-tag type="info">say the Chinese Numbers</el-tag>
|
|
|
+ <el-tag type="info">say the Chinese Numbers</el-tag>
|
|
|
+ <el-tag type="info">say the Chinese Numbers</el-tag>
|
|
|
+ <el-tag type="info">say the Chinese Numbers</el-tag>
|
|
|
+ <el-tag type="info">say the Chinese Numbers</el-tag>
|
|
|
+ <el-tag type="info">say the Chinese Numbers</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="return-file">
|
|
|
+ <div>回传文件:</div>
|
|
|
+ <div class="return-file-content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -264,6 +285,7 @@ $card-radius: 18px;
|
|
|
padding-top: 20px;
|
|
|
.classroom-task {
|
|
|
width: 70%;
|
|
|
+ display: inline-block;
|
|
|
margin-top: 17px;
|
|
|
padding-right: 5px;
|
|
|
.classroom-task-title {
|
|
@@ -302,9 +324,14 @@ $card-radius: 18px;
|
|
|
}
|
|
|
.courseware-tag {
|
|
|
@include el-tag;
|
|
|
+
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
.accessory-tag {
|
|
|
- @include el-tag;
|
|
|
+ @extend .courseware-tag;
|
|
|
+ }
|
|
|
+ .circle-progress {
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -323,6 +350,10 @@ $card-radius: 18px;
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
background-color: #f0f0f0;
|
|
|
+
|
|
|
+ &.focusing:focus:not(:hover) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-collapse-item > div:first-child {
|
|
@@ -332,5 +363,58 @@ $card-radius: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 课堂任务 -> 课件
|
|
|
+ .classroom-courseware {
|
|
|
+ display: inline-block;
|
|
|
+ width: 30%;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+ &-container {
|
|
|
+ border: 1px solid #606060;
|
|
|
+ width: 276px;
|
|
|
+ min-height: 262px;
|
|
|
+ margin-left: 24px;
|
|
|
+ border-radius: 17px;
|
|
|
+ padding: 23px 27px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ border-bottom: 1px solid #606060;
|
|
|
+ border-right: 1px solid #606060;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10.5px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%) rotate(45deg);
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .return-file-content {
|
|
|
+ padding: 15px 0;
|
|
|
+ .el-tag {
|
|
|
+ width: 100%;
|
|
|
+ &:not(:first-child) {
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .internet-courseware {
|
|
|
+ &-content {
|
|
|
+ @extend .return-file-content;
|
|
|
+
|
|
|
+ min-height: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tag.el-tag--info {
|
|
|
+ @include el-tag;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|