1

Signed-off-by: lcw <1324309909@qq.com>

src/components/pages/course.vue

@@ -23,56 +23,63 @@
 					</el-select>
 				</div>
 				<div class="student_button">
-					<el-button type="primary" @click="goTo('/course/addCourse')">添加课程</el-button>
+					<el-button type="primary" @click="goTo('/course/addCourse')"
+						>添加课程</el-button
+					>
 				</div>
 			</div>
-			<div
-				class="student_table"
-				:class="{ student_empty: !tableData.length > 0 }"
-			>
-				<div class="course_box" v-if="tableData.length > 0">
-					<el-card
-						v-for="item in tableData"
-						:key="item.id"
-						class="el_cards"
-						style="margin: 0 20px 20px 0; width: 250px"
-						:body-style="{ padding: '0px' }"
-					>
-						<!-- <img :src="item.imgUrl" class="image" /> -->
-						<el-image class="image" :src="item.imgUrl" fit="cover"></el-image>
-						<div class="courseBtnBox">
-							<div>
-								<span class="course_title">{{ item.title }}</span>
-								<!-- <div class="course_rate">
-                <el-rate v-model="value1"></el-rate>
-              </div> -->
-								<div class="course_view">
-									<i></i
-									><span>{{ item.learning ? item.learning : 0 }}人在学</span>
-								</div>
-							</div>
-							<div class="course_button_box">
-								<el-button
-									type="primary"
-									class="course_button"
-									@click="goTo('/course/courseDetail?id=' + item.courseId)"
-									>查看</el-button
-								>
-								<el-button
-									type="primary"
-									class="course_button"
-									>修改</el-button
-								>
-								<el-button
-									type="primary"
-									class="course_button"
-									>删除</el-button
-								>
-							</div>
+			<div class="student_table">
+				<div class="course_box">
+					<div class="out_box">
+						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
+						<div class="bottom_box">
+							<div>制作一台太阳能路灯</div>
+							<div class="kc_time">2021-09-02 10:42:57</div>
+						</div>
+						<div class="three_bottom">
+							<div>开始教学</div>
+							<div>修改文档模板</div>
+							<div>作业</div>
+						</div>
+					</div>
+					<div class="out_box">
+						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
+						<div class="bottom_box">
+							<div>制作一台太阳能路灯</div>
+							<div class="kc_time">2021-09-02 10:42:57</div>
+						</div>
+						<div class="three_bottom">
+							<div>开始教学</div>
+							<div>修改文档模板</div>
+							<div>作业</div>
+						</div>
+					</div>
+					<div class="out_box">
+						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
+						<div class="bottom_box">
+							<div>制作一台太阳能路灯</div>
+							<div class="kc_time">2021-09-02 10:42:57</div>
+						</div>
+						<div class="three_bottom">
+							<div>开始教学</div>
+							<div>修改文档模板</div>
+							<div>作业</div>
+						</div>
+					</div>
+					<div class="out_box">
+						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
+						<div class="bottom_box">
+							<div>制作一台太阳能路灯</div>
+							<div class="kc_time">2021-09-02 10:42:57</div>
+						</div>
+						<div class="three_bottom">
+							<div>开始教学</div>
+							<div>修改文档模板</div>
+							<div>作业</div>
 						</div>
-					</el-card>
+					</div>
 				</div>
-				<div class="course_empty" v-else>暂无数据</div>
+				<!-- <div class="course_empty" >暂无数据</div> -->
 			</div>
 		</div>
 		<div class="student_page">
@@ -119,7 +126,7 @@
 				tableData: [],
 				now: "",
 				courseDetail: {},
-				addCourse:{},
+				addCourse: {},
 				groupA: "",
 				classX: "",
 			};
@@ -428,11 +435,61 @@
 		padding: 10px;
 	}
 
-  .wordUpload{
-    display: flex;
-  }
+	.wordUpload {
+		display: flex;
+	}
 
-  .wordUpload>.buttonUp{
-    margin-right: 5px;
-  }
+	.wordUpload > .buttonUp {
+		margin-right: 5px;
+	}
+
+	.out_box {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		width: 250px;
+		padding: 10px 0;
+		background: #fff;
+		margin-left: 25px;
+	}
+
+	.bottom_box {
+		display: flex;
+		padding: 10px 0 10px 10px;
+		flex-direction: column;
+		border-top: 1px solid #ccc;
+		border-left: 1px solid #ccc;
+		border-right: 1px solid #ccc;
+		box-sizing: border-box;
+	}
+
+	.tup {
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.tup > img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.kc_time {
+		margin-top: 8px;
+		font-size: 14px;
+		color: #999;
+	}
+
+	.three_bottom {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		border-bottom: 1px solid #ccc;
+		height: 60px;
+		background: #f5f4f4;
+		line-height: 60px;
+		border-radius: 5px;
+		border-left: 1px solid #ccc;
+		border-right: 1px solid #ccc;
+		font-size: 14px;
+	}
 </style>