update

src/components/pages/test/check/index.vue

@@ -162,9 +162,36 @@
                 </div>
               </div>
               <div class="content4" v-if="item.type == 6">
-                <div class="courses" v-for="(courses, index2) in item.array" :key="index + '-' + index2">
+								<div class="out_box" v-for="(item, index) in item.courseArray" :key="index + '-' + index2">
+            		  <div class="tup">
+            		    <img :src="item.cover != null && item.cover != ''
+            		      ? JSON.parse(item.cover).length > 0
+            		        ? JSON.parse(item.cover)[0].url
+            		        : mr
+            		      : mr
+            		      " alt />
+            		  <div class="bottom_box">
+            		    <div>
+            		      <el-tooltip :content="item.title" popper-class="text_tooltip" placement="top" effect="dark">
+            		        <span>{{ item.title }}</span>
+            		      </el-tooltip>
+            		    </div>
+            		    <div class="kc_t">
+            		      <span>{{ item.username }}</span>
+            		      <span>{{ item.state == 1 ? '阶段模式' : item.state == 2 ? '任务模式' : '极简模式' }}</span>
+            		    </div>
+            		    <div class="kc_time">
+            		      <span style="color: #717C8D">创建日期:</span>{{ item.time }}
+            		    </div>
+            		    <div class="kc_time">
+            		      <span style="color: #717C8D">修改日期:</span>{{ item.update_at }}
+            		    </div>
+            		  </div>
+            		</div>
+							</div>
+                <!-- <div class="courses" v-for="(courses, index2) in item.array" :key="index + '-' + index2">
                   {{ courses }}
-                </div>
+                </div> -->
               </div>
             </div>
           </div>
@@ -559,6 +586,12 @@ export default {
             } else if (topic.type == 6) {
                 let _answer = topic.courses
                 topic.array = _answer
+								topic.courseArray = [];
+								topic.array.forEach(async i=>{
+									let data = await this.getCourseDetail(i)
+									data.update_at = new Date(data.update_at).toLocaleString().replace('/','-')
+									topic.courseArray.push(data)
+								})
               }
             for (var j = 0; j < array.length; j++) {
               let el2 = array[j]
@@ -594,6 +627,7 @@ export default {
                 }
               }
             }
+						console.log(topic)
             testArray.push(topic)
           }
           this.testArray = testArray
@@ -1224,7 +1258,15 @@ export default {
       };
       let res = await this.ajax.get(this.$store.state.api + "getCourseInfoTest", params)
       return res.data[0][0].title
-    }
+    },
+		async getCourseDetail(id){
+			let params = {
+        cid: id,
+      };
+      let res = await this.ajax.get(this.$store.state.api + "getCourseInfoTest", params)
+
+      return res.data[0][0]
+		}
   },
   beforeDestroy() {
     document.getElementsByTagName('html')[0].style.overflow = ''
@@ -1818,4 +1860,137 @@ export default {
 .buttonBox>div:hover {
   background: #f6f8ff;
 }
+
+.content4{
+	width: 100%;
+	height: auto;
+	display: flex;
+	flex-wrap: nowrap;
+	overflow: auto;
+}
+
+.out_box {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    /* width: 200px; */
+    width: 280px;
+    background: #fff;
+		/* background-color: white; */
+    margin-right: 15px;
+    /* border: 1px solid #ccc; */
+    height: fit-content;
+    box-sizing: border-box;
+    border-radius: 0px 0px 5px 5px;
+    /* overflow: hidden; */
+    margin-bottom: 15px;
+    position: relative;
+    border-radius: 8px;
+    box-sizing: border-box;
+    overflow: hidden;
+    border: 1px solid #3682fc00;
+		cursor: pointer;
+		border: 1px solid #6a9ff5;
+		height: auto;
+  }
+
+	.out_boxActive{
+		box-sizing: border-box;
+		border: 3px solid #3681FC !important;
+
+	}
+  
+  .out_box:hover {
+    border: 1px solid #3681FC;
+  }
+  
+  .out_box:nth-child(5n) {
+    margin-right: 0;
+  }
+	.bottom_box {
+		width:100%;
+    display: flex;
+    padding: 10px;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 121px;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+  }
+  
+  .bottom_box>div:nth-child(1) {
+    width: 100%;
+    /* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: bold; */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .bottom_box>div:nth-child(1)>span:nth-child(1) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: bold;
+  }
+  
+  .bottom_box>div:nth-child(1)>span:nth-child(2) {
+    min-width: fit-content;
+    font-size: 14px;
+    color: #8c8c8c;
+  }
+  
+  .tup {
+    width: 100%;
+    height: auto;
+    margin: 0 auto;
+    overflow: hidden;
+    display: flex;
+		flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  
+  .tup>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .kc_time {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #717C8D;
+  }
+  
+  .kc_time+.kc_time {
+    margin-top: 0;
+  }
+  
+  .kc_t {
+    margin-top: 5px;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .kc_t>span:nth-child(1) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .kc_t>span:nth-child(2) {
+    min-width: fit-content;
+    font-size: 14px;
+    color: #8c8c8c;
+  }
 </style>