|
@@ -88,17 +88,30 @@
|
|
|
</div> -->
|
|
|
<div class="test_box" v-for="(item, index) in course" :key="index">
|
|
|
<div class="test_top">
|
|
|
- <div class="test_top_img" :class="{ gr: item.typeid == 'afc3f97f-2429-408d-8dcd-5e63a44d355a', md: item.typeid == '478bcccd-e3a1-472b-aa29-3ed7bc479469', jy: item.typeid == '178a377a-b4f1-4a75-b3c3-2787a7c98784', yy: item.typeid == 'dda9728e-5f11-469e-89ee-aca518daf223'}"></div>
|
|
|
+ <div class="test_top_img" v-if="!item.typeN"></div>
|
|
|
+ <el-tooltip :content="item.typeN" placement="top" effect="dark" v-else>
|
|
|
+ <div class="test_top_img"
|
|
|
+ :class="{ gr: item.typeid == 'afc3f97f-2429-408d-8dcd-5e63a44d355a', md: item.typeid == '478bcccd-e3a1-472b-aa29-3ed7bc479469', jy: item.typeid == '178a377a-b4f1-4a75-b3c3-2787a7c98784', yy: item.typeid == 'dda9728e-5f11-469e-89ee-aca518daf223' }">
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
<div class="test_top_title">
|
|
|
<span>{{ item.title }}</span>
|
|
|
<span>创建人:{{ item.uname }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="test_time">
|
|
|
- <span>创建日期:</span>{{ item.time }}
|
|
|
+ <span>创建日期:</span><span>{{ item.time }}</span>
|
|
|
</div>
|
|
|
<div class="test_time">
|
|
|
- <span>修改日期:</span>{{ item.utime }}
|
|
|
+ <span>修改日期:</span><span>{{ item.utime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="test_time">
|
|
|
+ <span>分类:</span>
|
|
|
+ <span v-if="!item.typename">未设置分类</span>
|
|
|
+ <el-tooltip :content="item.typename" placement="top" effect="dark" v-else>
|
|
|
+ <!-- content to trigger tooltip here -->
|
|
|
+ <span>{{ item.typename }}</span>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
<div class="test_btn">
|
|
|
<div class="test_o_btn">
|
|
@@ -114,7 +127,7 @@
|
|
|
<span @click="deleteCourse(item.courseId)"></span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
- <div class="test_type" :class="{no:item.look == '1',is:item.look == '2'}">
|
|
|
+ <div class="test_type" :class="{ no: item.look == '1', is: item.look == '2' }">
|
|
|
<span>{{ item.look == '1' ? '未发布' : '已发布' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -759,6 +772,38 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+@media screen and (max-width: 1380px) {
|
|
|
+ .test_box {
|
|
|
+ width: calc(100% / 4 - (15px * 3) / 4) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test_box:nth-child(5n) {
|
|
|
+ margin-right: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test_box:nth-child(4n) {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1080px) {
|
|
|
+ .test_box {
|
|
|
+ width: calc(100% / 3 - (15px * 2) / 3) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test_box:nth-child(5n) {
|
|
|
+ margin-right: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test_box:nth-child(4n) {
|
|
|
+ margin-right: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test_box:nth-child(3n) {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.dialog_diy>>>.el-dialog__header {
|
|
|
background: #3d67bc !important;
|
|
|
padding: 15px 20px;
|
|
@@ -797,6 +842,7 @@ export default {
|
|
|
align-items: baseline;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
+ padding: 0 0 15px;
|
|
|
}
|
|
|
|
|
|
.top {
|
|
@@ -1085,6 +1131,7 @@ export default {
|
|
|
|
|
|
.head_left {
|
|
|
display: flex;
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.student_input>>>.el-input__inner {
|
|
@@ -1105,12 +1152,13 @@ export default {
|
|
|
}
|
|
|
|
|
|
.all_choose {
|
|
|
- margin: 15px 0 10px;
|
|
|
- height: 20%;
|
|
|
+ /* margin: 15px 0 10px; */
|
|
|
+ /* height: 20%; */
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- max-width: calc(100% / 4 - 50px);
|
|
|
+ max-width: 180px;
|
|
|
+ width: 180px;
|
|
|
}
|
|
|
|
|
|
.all_choose>span {
|
|
@@ -1127,38 +1175,19 @@ export default {
|
|
|
align-content: space-between;
|
|
|
height: 100%;
|
|
|
justify-content: flex-start;
|
|
|
- width: 60%;
|
|
|
- min-width: 868px;
|
|
|
+ /* width: 60%; */
|
|
|
+ /* min-width: 868px; */
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.choose>div:nth-child(2) {
|
|
|
- margin-left: 10px;
|
|
|
- width: calc(100% / 4 - 50px)
|
|
|
-}
|
|
|
-
|
|
|
-.choose>div:nth-child(3) {
|
|
|
- margin-left: 10px;
|
|
|
- width: calc(100% / 4 - 50px)
|
|
|
-}
|
|
|
-
|
|
|
-.choose>div:nth-child(4) {
|
|
|
+.choose>div {
|
|
|
margin-left: 10px;
|
|
|
- width: calc(100% / 4 - 50px)
|
|
|
-}
|
|
|
-
|
|
|
-.choose>div:nth-child(5) {
|
|
|
- margin: 5px 0 0 1%;
|
|
|
+ width: 180px;
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
-.choose>div:nth-child(4)>span {
|
|
|
- /* width: 74px !important;
|
|
|
- min-width: 74px; */
|
|
|
-}
|
|
|
-
|
|
|
-.choose>div:nth-child(4)>>>.el-select {
|
|
|
- /* width: 217.5px;
|
|
|
- min-width: 215.06px; */
|
|
|
+.choose>.clear {
|
|
|
+ width: 70px
|
|
|
}
|
|
|
|
|
|
.clear {
|
|
@@ -1254,42 +1283,53 @@ export default {
|
|
|
}
|
|
|
|
|
|
.test_box {
|
|
|
- width: 250px;
|
|
|
+ width: calc(100% / 5 - (15px * 4) / 5);
|
|
|
+ /* width: 250px; */
|
|
|
background: #fff;
|
|
|
- margin-right: 25px;
|
|
|
border-radius: 5px;
|
|
|
padding: 20px;
|
|
|
margin: 5px 15px 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.test_box:nth-child(5n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
|
|
|
-.test_top{
|
|
|
+.test_top {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.test_top > .test_top_img{
|
|
|
+
|
|
|
+.test_top>.test_top_img {
|
|
|
height: 40px;
|
|
|
width: 40px;
|
|
|
background: rgb(108 150 217);
|
|
|
margin-right: 10px;
|
|
|
border-radius: 5px;
|
|
|
- display:flex;
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
-.test_top > .gr{
|
|
|
+
|
|
|
+.test_top>.gr {
|
|
|
background: rgb(142, 189, 176);
|
|
|
}
|
|
|
-.test_top > .md{
|
|
|
+
|
|
|
+.test_top>.md {
|
|
|
background: rgb(139, 174, 227);
|
|
|
}
|
|
|
-.test_top > .js{
|
|
|
+
|
|
|
+.test_top>.js {
|
|
|
background: rgb(64, 149, 174);
|
|
|
}
|
|
|
-.test_top > .yy{
|
|
|
+
|
|
|
+.test_top>.yy {
|
|
|
background: rgb(98, 102, 188);
|
|
|
}
|
|
|
-.test_top > .test_top_img:after{
|
|
|
+
|
|
|
+.test_top>.test_top_img:after {
|
|
|
content: '';
|
|
|
display: block;
|
|
|
width: 23px;
|
|
@@ -1297,26 +1337,32 @@ export default {
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url('../../../assets/icon/test/all_icon_b.png');
|
|
|
}
|
|
|
-.test_top > .gr:after{
|
|
|
+
|
|
|
+.test_top>.gr:after {
|
|
|
background-image: url('../../../assets/icon/test/gr_icon_b.png');
|
|
|
}
|
|
|
-.test_top > .md:after{
|
|
|
+
|
|
|
+.test_top>.md:after {
|
|
|
background-image: url('../../../assets/icon/test/md_icon_b.png');
|
|
|
}
|
|
|
-.test_top > .js:after{
|
|
|
+
|
|
|
+.test_top>.js:after {
|
|
|
background-image: url('../../../assets/icon/test/js_icon_b.png');
|
|
|
}
|
|
|
-.test_top > .yy:after{
|
|
|
+
|
|
|
+.test_top>.yy:after {
|
|
|
background-image: url('../../../assets/icon/test/yy_icon_b.png');
|
|
|
}
|
|
|
-.test_top > .test_top_title{
|
|
|
+
|
|
|
+.test_top>.test_top_title {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
height: 40px;
|
|
|
width: calc(100% - 40px - 10px)
|
|
|
}
|
|
|
-.test_top > .test_top_title > span{
|
|
|
+
|
|
|
+.test_top>.test_top_title>span {
|
|
|
width: 100;
|
|
|
display: block;
|
|
|
word-break: break-all;
|
|
@@ -1324,63 +1370,87 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
-.test_top > .test_top_title > span:nth-child(1){
|
|
|
+
|
|
|
+.test_top>.test_top_title>span:nth-child(1) {
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
-.test_top > .test_top_title > span:nth-child(2){
|
|
|
+
|
|
|
+.test_top>.test_top_title>span:nth-child(2) {
|
|
|
font-size: 14px;
|
|
|
color: rgb(58, 131, 252);
|
|
|
}
|
|
|
|
|
|
-.test_box > .test_time{
|
|
|
+.test_box>.test_time {
|
|
|
margin-top: 10px;
|
|
|
font-size: 14px;
|
|
|
color: #a7a7a7;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.test_box>.test_time>span:nth-child(1) {
|
|
|
+ width: 70px;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.test_box>.test_time>span:nth-child(2) {
|
|
|
+ width: calc(100% - 70px);
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
-.test_box > .test_btn{
|
|
|
+.test_box>.test_btn {
|
|
|
margin-top: 10px;
|
|
|
- display:flex;
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
-.test_box > .test_btn > .test_o_btn{
|
|
|
+.test_box>.test_btn>.test_o_btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.test_box > .test_btn > .test_o_btn > span{
|
|
|
+
|
|
|
+.test_box>.test_btn>.test_o_btn>span {
|
|
|
display: block;
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
background-size: 100% 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.test_box > .test_btn > .test_o_btn > .edit{
|
|
|
+
|
|
|
+.test_box>.test_btn>.test_o_btn>.edit {
|
|
|
background-image: url('../../../assets/icon/test/edit_test_icon.png');
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
-.test_box > .test_btn > .test_o_btn > .check{
|
|
|
+
|
|
|
+.test_box>.test_btn>.test_o_btn>.check {
|
|
|
background-image: url('../../../assets/icon/test/check_test_icon.png');
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
-.test_box > .test_btn > .test_o_btn > .delete{
|
|
|
+
|
|
|
+.test_box>.test_btn>.test_o_btn>.delete {
|
|
|
background-image: url('../../../assets/icon/test/delete_test_icon.png');
|
|
|
}
|
|
|
|
|
|
-.test_box > .test_btn > .test_type{
|
|
|
+.test_box>.test_btn>.test_type {
|
|
|
font-size: 12px;
|
|
|
border-radius: 5px;
|
|
|
border: 1.5px solid;
|
|
|
padding: 3px 8px;
|
|
|
}
|
|
|
-.test_box > .test_btn > .is{
|
|
|
+
|
|
|
+.test_box>.test_btn>.is {
|
|
|
color: rgb(57, 204, 127);
|
|
|
- background-color: rgba(57, 204, 127,.1);
|
|
|
+ background-color: rgba(57, 204, 127, .1);
|
|
|
}
|
|
|
-.test_box > .test_btn > .no{
|
|
|
+
|
|
|
+.test_box>.test_btn>.no {
|
|
|
color: rgb(235, 154, 96);
|
|
|
- background-color: rgba(235, 154, 96,.1);
|
|
|
+ background-color: rgba(235, 154, 96, .1);
|
|
|
}
|
|
|
</style>
|
|
|
|