課程樣式微調

app/course/course.php

@@ -10,13 +10,17 @@ include "../pcdl/html_head.php";
     require_once("../pcdl/head_bar.php");
     ?>
 
-<link type="text/css" rel="stylesheet" href="./style.css" />
+    <link type="text/css" rel="stylesheet" href="./style.css" />
     <style>
         .disable {
             cursor: not-allowed;
             opacity: 0.5;
         }
 
+        .padding_2_1rem {
+            padding: 2rem 1rem;
+        }
+
         #main_video_win iframe {
             width: 100%;
             height: 100%;
@@ -31,19 +35,12 @@ include "../pcdl/html_head.php";
             padding: 0;
         }
 
-        #lesson_list {}
-
         #course_info_head_1 {
             display: grid;
             grid-template-columns: 200px 1fr;
             grid-gap: 20px;
         }
 
-        #course_info_head_face {
-            /*width: 200px;
-            height: 200px;*/
-        }
-
         #course_info_head_face img {
             width: 200px;
             height: 200px;
@@ -78,7 +75,7 @@ include "../pcdl/html_head.php";
         }
 
         #lesson_list_shell {
-            padding: 1rem;
+            padding: 2rem 1rem;
             background-color: #f5f5f5;
         }
 
@@ -147,6 +144,7 @@ include "../pcdl/html_head.php";
                 grid-gap: 10px;
             }
 
+            #course_info_head_face,
             #course_info_head_face img {
                 width: 100px;
                 height: 100px;
@@ -158,7 +156,7 @@ include "../pcdl/html_head.php";
 
 
     <div id='course_content'>
-        <div id='course_info_shell' style='padding:1rem;'>
+        <div id='course_info_shell' class='padding_2_1rem'>
             <div id='course_info' class="section_inner"></div>
         </div>
         <div id='lesson_list_shell'>

app/course/index.php

@@ -8,6 +8,10 @@ include "../pcdl/html_head.php";
 	require_once("../pcdl/head_bar.php");
 	?>
 	<style>
+		.padding_LR_1rem {
+			padding: 0 1rem;
+		}
+
 		.content_block {
 			width: 230px;
 		}
@@ -250,8 +254,8 @@ include "../pcdl/html_head.php";
 					html += '<div class="title"><a href="../course/course.php?id=' + iterator.id + '">' + iterator.title + '</a></div>';
 
 					//教师名字
-					html += '<div class="author">'+gLocal.gui.speaker+'：';
-					html += "<a href='../uhome/course.php?userid="+iterator.teacher+"'>"
+					html += '<div class="author">' + gLocal.gui.speaker + '：';
+					html += "<a href='../uhome/course.php?userid=" + iterator.teacher + "'>"
 					html += iterator.teacher_info.nickname;
 					html += "</a>";
 					html += '</div>';

app/course/lesson.js

@@ -1,356 +1,353 @@
 var renderer = new marked.Renderer();
-renderer.code = function (code, language) {
-	if (language == "mermaid") return '<pre class="mermaid">' + code + "</pre>";
-	else return "<pre><code>" + code + "</code></pre>";
+renderer.code = function(code, language) {
+    if (language == "mermaid") return '<pre class="mermaid">' + code + "</pre>";
+    else return "<pre><code>" + code + "</code></pre>";
 };
 
 function lesson_show(id) {
-	$.get(
-		"../course/lesson_get.php",
-		{
-			id: id,
-		},
-		function (data, status) {
-			let arrLesson = JSON.parse(data);
-			let html = "";
-			for (const lesson of arrLesson) {
-				html += '<div class="card" style="display:flex;margin:1em;padding:10px;">';
+    $.get(
+        "../course/lesson_get.php", {
+            id: id,
+        },
+        function(data, status) {
+            let arrLesson = JSON.parse(data);
+            let html = "";
+            for (const lesson of arrLesson) {
+                html += '<div class="card" style="display:flex;margin:1em;padding:10px;">';
 
-				html += '<div style="flex:7;">';
-				html += '<div class="pd-10">';
-				html +=
-					'<div class="title" style="padding-bottom:5px;font-size:200%;font-weight:600;">' +
-					lesson["title"] +
-					"</div>";
-				html += '<div style="">';
-				let summary = "";
-				try {
-					summary = marked(lesson["summary"], { renderer: renderer });
-				} catch {}
-				html += '<div class="summary"  style="padding-bottom:5px;">' + summary + "</div>";
-				let live = "";
-				try {
-					live = marked(lesson["live"], { renderer: renderer });
-				} catch {}
-				html += '<div class="summary"  style="padding-bottom:5px;">' + live + "</div>";
-				let replay = "";
-				try {
-					replay = marked(lesson["replay"], { renderer: renderer });
-				} catch {}
-				html += '<div class="summary"  style="padding-bottom:5px;">' + replay + "</div>";
-				let attachment = "";
-				try {
-					attachment = marked(lesson["attachment"], { renderer: renderer });
-				} catch {}
-				html += '<div class="summary"  style="padding-bottom:5px;">' + attachment + "</div>";
-				html += "</div>";
-				html += "</div>";
-				html += "</div>";
+                html += '<div style="flex:7;">';
+                html += '<div class="pd-10">';
+                html +=
+                    '<div class="title" style="padding-bottom:5px;font-size:200%;font-weight:600;">' +
+                    lesson["title"] +
+                    "</div>";
+                html += '<div style="">';
+                let summary = "";
+                try {
+                    summary = marked(lesson["summary"], { renderer: renderer });
+                } catch {}
+                html += '<div class="summary"  style="padding-bottom:5px;">' + summary + "</div>";
+                let live = "";
+                try {
+                    live = marked(lesson["live"], { renderer: renderer });
+                } catch {}
+                html += '<div class="summary"  style="padding-bottom:5px;">' + live + "</div>";
+                let replay = "";
+                try {
+                    replay = marked(lesson["replay"], { renderer: renderer });
+                } catch {}
+                html += '<div class="summary"  style="padding-bottom:5px;">' + replay + "</div>";
+                let attachment = "";
+                try {
+                    attachment = marked(lesson["attachment"], { renderer: renderer });
+                } catch {}
+                html += '<div class="summary"  style="padding-bottom:5px;">' + attachment + "</div>";
+                html += "</div>";
+                html += "</div>";
+                html += "</div>";
 
-				html += '<div style="flex:3;max-width:15em;">';
-				let d = new Date();
-				d.setTime(lesson["date"]);
-				let strData = d.toLocaleDateString();
-				let strTime = d.toLocaleTimeString();
-				html += "<div >" + gLocal.gui.date + "：" + strData + "</div>";
-				html += "<div >" + gLocal.gui.time + "：" + strTime + "</div>";
-				let dt = lesson["duration"] / 60;
-				let sdt = "";
-				if (dt > 59) {
-					sdt += Math.floor(dt / 60) + gLocal.gui.h;
-				}
-				let m = dt % 60;
-				if (m > 0) {
-					sdt += (dt % 60) + gLocal.gui.mins;
-				}
-				html += "<div >" + gLocal.gui.duration + "：" + sdt + "</div>";
-				let now = new Date();
+                html += '<div style="flex:3;max-width:15em;">';
+                let d = new Date();
+                d.setTime(lesson["date"]);
+                let strData = d.toLocaleDateString();
+                let strTime = d.toLocaleTimeString();
+                html += "<div >" + gLocal.gui.date + "：" + strData + "</div>";
+                html += "<div >" + gLocal.gui.time + "：" + strTime + "</div>";
+                let dt = lesson["duration"] / 60;
+                let sdt = "";
+                if (dt > 59) {
+                    sdt += Math.floor(dt / 60) + gLocal.gui.h;
+                }
+                let m = dt % 60;
+                if (m > 0) {
+                    sdt += (dt % 60) + gLocal.gui.mins;
+                }
+                html += "<div >" + gLocal.gui.duration + "：" + sdt + "</div>";
+                let now = new Date();
 
-				let lesson_time = "";
-				if (now < lesson["date"]) {
-					lesson_time = gLocal.gui.not_started;
-				} else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
-					lesson_time = gLocal.gui.in_progress;
-				} else {
-					lesson_time = gLocal.gui.already_over;
-				}
-				html += '<div ><span class="lesson_status">' + lesson_time + "</span></div>";
+                let lesson_time = "";
+                if (now < lesson["date"]) {
+                    lesson_time = gLocal.gui.not_started;
+                } else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
+                    lesson_time = gLocal.gui.in_progress;
+                } else {
+                    lesson_time = gLocal.gui.already_over;
+                }
+                html += '<div ><span class="lesson_status">' + lesson_time + "</span></div>";
 
-				html += "</div>";
+                html += "</div>";
 
-				html += "</div>";
-			}
-			$("#lesson_list").html(html);
-			mermaid.initialize();
-		}
-	);
+                html += "</div>";
+            }
+            $("#lesson_list").html(html);
+            mermaid.initialize();
+        }
+    );
 }
 
 function lesson_load(lesson_id) {
-	$.get(
-		"../course/lesson_get.php",
-		{
-			id: lesson_id,
-		},
-		function (data, status) {
-			let html = "";
-			let lesson_info = JSON.parse(data);
-			if (lesson_info) {
-				//head
-				html += "<div id='course_info_head' class='course_info_block'>";
+    $.get(
+        "../course/lesson_get.php", {
+            id: lesson_id,
+        },
+        function(data, status) {
+            let html = "";
+            let lesson_info = JSON.parse(data);
+            if (lesson_info) {
+                //head
+                html += "<div id='course_info_head' class='course_info_block'>";
 
-				html += "<div id='course_info_head_title'>";
-				html += "<div id='course_title'>" + lesson_info.title + "</div>";
-				html += "<div id='course_subtitle'>" + lesson_info.subtitle + "</div>";
-				html += "</div>";
-				html += "</div>";
-				//end of head
+                html += "<div id='course_info_head_title'>";
+                html += "<div id='course_title'>" + lesson_info.title + "</div>";
+                html += "<div id='course_subtitle'>" + lesson_info.subtitle + "</div>";
+                html += "</div>";
+                html += "</div>";
+                //end of head
 
-				let d = new Date();
-				d.setTime(lesson_info.date);
-				let strData = d.toLocaleDateString();
-				let strTime = d.toLocaleTimeString();
-				let dt = lesson_info["duration"] / 60;
-				let strDuration = "";
-				if (dt > 59) {
-					strDuration += Math.floor(dt / 60) + "小时";
-				}
-				let m = dt % 60;
-				if (m > 0) {
-					strDuration += (dt % 60) + "分钟";
-				}
+                let d = new Date();
+                d.setTime(lesson_info.date);
+                let strData = d.toLocaleDateString();
+                let strTime = d.toLocaleTimeString();
+                let dt = lesson_info["duration"] / 60;
+                let strDuration = "";
+                if (dt > 59) {
+                    strDuration += Math.floor(dt / 60) + "小时";
+                }
+                let m = dt % 60;
+                if (m > 0) {
+                    strDuration += (dt % 60) + "分钟";
+                }
 
-				html += "<div id='course_info_head_2' class='course_info_block'>";
-				html += "<div class='info_item'>" + "<span>上课时间：<span>" + strData + " " + strTime + "</div>";
-				html +=
-					"<div class='info_item'>" + "<span>" + gLocal.gui.duration + "：<span>" + strDuration + "</div>";
-				html += "<div class='info_item'>" + "<span>" + gLocal.gui.speaker + "：<span>";
-				html +=
-					"<a href='../uhome/course.php?userid=" +
-					lesson_info.teacher +
-					"'>" +
-					lesson_info.teacher_info.nickname +
-					"</a>";
-				html += "</span>";
-				//html += "<span>地区:缅甸</span>";
-				html += "</div>";
-				html += "</div>";
-				// end of course_info_head_2
+                html += "<div id='lesson_info_head_2' class='course_info_block'>";
+                html += "<div class='info_item'>" + "<span>上课时间：<span>" + strData + " " + strTime + "</div>";
+                html +=
+                    "<div class='info_item'>" + "<span>" + gLocal.gui.duration + "：<span>" + strDuration + "</div>";
+                html += "<div class='info_item'>" + "<span>" + gLocal.gui.speaker + "：<span>";
+                html +=
+                    "<a href='../uhome/course.php?userid=" +
+                    lesson_info.teacher +
+                    "'>" +
+                    lesson_info.teacher_info.nickname +
+                    "</a>";
+                html += "</span>";
+                //html += "<span>地区:缅甸</span>";
+                html += "</div>";
+                html += "</div>";
+                // end of course_info_head_2
 
-				//live
-				if (lesson_info.live && lesson_info.live.length > 0) {
-					html += "<div id='course_info_live' class='course_info_block'>";
-					html += "<h2>" + gLocal.gui.notice_live + "</h2>";
-					try {
-						html += marked(lesson_info.live);
-					} catch (e) {
-						html += e.message;
-					}
-					html += "</div>";
-				}
-				//end of live
+                //live
+                if (lesson_info.live && lesson_info.live.length > 0) {
+                    html += "<div id='course_info_live' class='course_info_block'>";
+                    html += "<h2>" + gLocal.gui.notice_live + "</h2>";
+                    try {
+                        html += marked(lesson_info.live);
+                    } catch (e) {
+                        html += e.message;
+                    }
+                    html += "</div>";
+                }
+                //end of live
 
-				//replay
-				if (lesson_info.replay && lesson_info.replay.length > 0) {
-					html += "<div id='course_info_replay' class='course_info_block'>";
-					html += "<h2>" + gLocal.gui.record_replay + "</h2>";
-					try {
-						html += marked(lesson_info.replay);
-					} catch (e) {
-						html += e.message;
-					}
-					html += "</div>";
-				}
-				//end of replay
+                //replay
+                if (lesson_info.replay && lesson_info.replay.length > 0) {
+                    html += "<div id='course_info_replay' class='course_info_block'>";
+                    html += "<h2>" + gLocal.gui.record_replay + "</h2>";
+                    try {
+                        html += marked(lesson_info.replay);
+                    } catch (e) {
+                        html += e.message;
+                    }
+                    html += "</div>";
+                }
+                //end of replay
 
-				//attachment
-				if (lesson_info.attachment && lesson_info.attachment.length > 0) {
-					html += "<div id='course_info_attachment' class='course_info_block'>";
-					html += "<h2>" + gLocal.gui.attachment + "</h2>";
-					try {
-						html += "<div class='course_info_content'>";
-						html += note_init(lesson_info.attachment);
-						html += "</div>";
-					} catch (e) {
-						html += e.message;
-					}
-					html += "</div>";
-				}
-				//end of attachment
+                //attachment
+                if (lesson_info.attachment && lesson_info.attachment.length > 0) {
+                    html += "<div id='course_info_attachment' class='course_info_block'>";
+                    html += "<h2>" + gLocal.gui.attachment + "</h2>";
+                    try {
+                        html += "<div class='course_info_content'>";
+                        html += note_init(lesson_info.attachment);
+                        html += "</div>";
+                    } catch (e) {
+                        html += e.message;
+                    }
+                    html += "</div>";
+                }
+                //end of attachment
 
-				//content
-				if (lesson_info.content && lesson_info.content.length > 0) {
-					html += "<div id='course_info_content' class='course_info_block'>";
-					html += "<h2>" + gLocal.gui.detaile + "</h2>";
-					try {
-						html += marked(lesson_info.content);
-					} catch (e) {
-						html += e.message;
-					}
-					html += "</div>";
-				}
-				//end of attachment
-				$("#lesson_info").html(html);
-				$("#page_title").text(lesson_info.title);
-				note_refresh_new();
-				render_course_info(lesson_info.course_id);
-				render_lesson_list(lesson_info.course_id, lesson_info.id);
-			}
-		}
-	);
+                //content
+                if (lesson_info.content && lesson_info.content.length > 0) {
+                    html += "<div id='course_info_content' class='course_info_block'>";
+                    html += "<h2>" + gLocal.gui.detaile + "</h2>";
+                    try {
+                        html += marked(lesson_info.content);
+                    } catch (e) {
+                        html += e.message;
+                    }
+                    html += "</div>";
+                }
+                //end of attachment
+                $("#lesson_info").html(html);
+                $("#page_title").text(lesson_info.title);
+                note_refresh_new();
+                render_course_info(lesson_info.course_id);
+                render_lesson_list(lesson_info.course_id, lesson_info.id);
+            }
+        }
+    );
 }
+
 function render_course_info(course_id) {
-	$.get(
-		"../course/course_get.php",
-		{
-			id: course_id,
-		},
-		function (data, status) {
-			let html = "";
-			let course_info = JSON.parse(data);
-			if (course_info) {
-				let html = "";
-				html += "<div id='parent_title'>";
-				html += "<a href='../course/course.php?id=" + course_info.id + "'>";
-				html += course_info.title;
-				html += "</a>";
-				html += "</div>";
-				html += "<div id='course_button'>";
-				html += "<button>关注</button>";
-				html += "<button>报名</button>";
-				html += "</div>";
-				$("#course_info").html(html);
-			}
-		}
-	);
+    $.get(
+        "../course/course_get.php", {
+            id: course_id,
+        },
+        function(data, status) {
+            let html = "";
+            let course_info = JSON.parse(data);
+            if (course_info) {
+                let html = "";
+                html += "<div id='parent_title'>";
+                html += "<a href='../course/course.php?id=" + course_info.id + "'>";
+                html += course_info.title;
+                html += "</a>";
+                html += "</div>";
+                html += "<div id='course_button'>";
+                html += "<button>关注</button>";
+                html += "<button>报名</button>";
+                html += "</div>";
+                $("#course_info").html(html);
+            }
+        }
+    );
 }
+
 function render_lesson_list(course_id, currLesson) {
-	$.get(
-		"../course/lesson_list.php",
-		{
-			id: course_id,
-		},
-		function (data, status) {
-			let arrLesson = JSON.parse(data);
-			let html = "";
-			for (const lesson of arrLesson) {
-				let currlessonStyle = "";
-				if (lesson.id == currLesson) {
-					currlessonStyle = " curr_lesson";
-				} else {
-					currlessonStyle = " not_curr_lesson";
-				}
-				//计算课程是否已经开始
-				let now = new Date();
-				let class_lesson_time = "";
-				let dt = lesson["duration"] / 60;
-				if (now < lesson["date"]) {
-					class_lesson_time = "not_started";
-				} else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
-					class_lesson_time = "in_progress";
-				} else {
-					class_lesson_time = "already_over";
-				}
+    $.get(
+        "../course/lesson_list.php", {
+            id: course_id,
+        },
+        function(data, status) {
+            let arrLesson = JSON.parse(data);
+            let html = "";
+            for (const lesson of arrLesson) {
+                let currlessonStyle = "";
+                if (lesson.id == currLesson) {
+                    currlessonStyle = " curr_lesson";
+                } else {
+                    currlessonStyle = " not_curr_lesson";
+                }
+                //计算课程是否已经开始
+                let now = new Date();
+                let class_lesson_time = "";
+                let dt = lesson["duration"] / 60;
+                if (now < lesson["date"]) {
+                    class_lesson_time = "not_started";
+                } else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
+                    class_lesson_time = "in_progress";
+                } else {
+                    class_lesson_time = "already_over";
+                }
 
-				html += '<div class="lesson_card ' + currlessonStyle + '" >';
-				let d = new Date();
-				d.setTime(lesson["date"]);
-				let strData = d.toLocaleDateString();
-				let strTime = d.toLocaleTimeString();
-				html += '<div class="pd-10">';
-				html += "<div class='datatime " + class_lesson_time + "'>" + strData + " " + strTime + "</div>";
-				html +=
-					'<div class="title" ><a href="../course/lesson.php?id=' +
-					lesson["id"] +
-					'">' +
-					lesson["title"] +
-					"</a></div>";
+                html += '<div class="lesson_card ' + currlessonStyle + '" >';
+                let d = new Date();
+                d.setTime(lesson["date"]);
+                let strData = d.toLocaleDateString();
+                let strTime = d.toLocaleTimeString();
+                html += '<div class="pd-10">';
+                html += "<div class='datatime " + class_lesson_time + "'>" + strData + " " + strTime + "</div>";
+                html +=
+                    '<div class="title" ><a href="../course/lesson.php?id=' +
+                    lesson["id"] +
+                    '">' +
+                    lesson["title"] +
+                    "</a></div>";
 
-				html += "</div>";
+                html += "</div>";
 
-				html += "</div>";
-			}
-			$("#lesson_list").html(html);
-		}
-	);
+                html += "</div>";
+            }
+            $("#lesson_list").html(html);
+        }
+    );
 }
 
 function lesson_get_timeline_settime(start, div) {
-	let lessonTime;
-	if (start) {
-		lessonTime = new Date(parseInt(start));
-	} else {
-		lessonTime = new Date();
-	}
-	let month = lessonTime.getMonth() + 1;
-	month = month > 9 ? month : "0" + month;
-	let d = lessonTime.getDate();
-	d = d > 9 ? d : "0" + d;
-	let data = lessonTime.getFullYear() + "-" + month + "-" + d;
-	let strData = "<input type='date'  id='" + div + "_date' value='" + data + "'/>";
+    let lessonTime;
+    if (start) {
+        lessonTime = new Date(parseInt(start));
+    } else {
+        lessonTime = new Date();
+    }
+    let month = lessonTime.getMonth() + 1;
+    month = month > 9 ? month : "0" + month;
+    let d = lessonTime.getDate();
+    d = d > 9 ? d : "0" + d;
+    let data = lessonTime.getFullYear() + "-" + month + "-" + d;
+    let strData = "<input type='date'  id='" + div + "_date' value='" + data + "'/>";
 
-	let H = lessonTime.getHours();
-	H = H > 9 ? H : "0" + H;
-	let M = lessonTime.getMinutes();
-	M = M > 9 ? M : "0" + M;
-	let strTime = "<input type='time'  id='" + div + "_time' value='" + H + ":" + M + "'/>";
+    let H = lessonTime.getHours();
+    H = H > 9 ? H : "0" + H;
+    let M = lessonTime.getMinutes();
+    M = M > 9 ? M : "0" + M;
+    let strTime = "<input type='time'  id='" + div + "_time' value='" + H + ":" + M + "'/>";
 
-	$("#form_" + div).html(strData + strTime);
+    $("#form_" + div).html(strData + strTime);
 }
 
 function lesson_get_timeline_submit() {
-	let start_date = new Date();
-	let start_data = $("#start_date").val().split("-");
-	let start_time = $("#start_time").val().split(":");
+    let start_date = new Date();
+    let start_data = $("#start_date").val().split("-");
+    let start_time = $("#start_time").val().split(":");
 
-	start_date.setFullYear(start_data[0], parseInt(start_data[1]) - 1, start_data[2]);
-	start_date.setHours(start_time[0], start_time[1]);
+    start_date.setFullYear(start_data[0], parseInt(start_data[1]) - 1, start_data[2]);
+    start_date.setHours(start_time[0], start_time[1]);
 
-	let end_date = new Date();
-	let end_data = $("#end_date").val().split("-");
-	let end_time = $("#end_time").val().split(":");
+    let end_date = new Date();
+    let end_data = $("#end_date").val().split("-");
+    let end_time = $("#end_time").val().split(":");
 
-	end_date.setFullYear(end_data[0], parseInt(end_data[1]) - 1, end_data[2]);
-	end_date.setHours(end_time[0], end_time[1], 0, 0);
+    end_date.setFullYear(end_data[0], parseInt(end_data[1]) - 1, end_data[2]);
+    end_date.setHours(end_time[0], end_time[1], 0, 0);
 
-	location.assign("../course/lesson_get_timeline.php?start=" + start_date.getTime() + "&end=" + end_date.getTime());
+    location.assign("../course/lesson_get_timeline.php?start=" + start_date.getTime() + "&end=" + end_date.getTime());
 }
 
 function lesson_get_timeline_json(start, end) {
-	$.get(
-		"../ucenter/active_log_get.php",
-		{
-			start: start,
-			end: end,
-		},
-		function (data) {
-			$("#timeline_json").val(data);
-			let json = JSON.parse(data);
-			let html = "<table>";
-			for (const row of json) {
-				html += "<tr>";
-				let start_date = new Date(parseInt(row.time));
-				html += "<td>" + start_date.getHours() + ":" + start_date.getMinutes() + "</td>";
+    $.get(
+        "../ucenter/active_log_get.php", {
+            start: start,
+            end: end,
+        },
+        function(data) {
+            $("#timeline_json").val(data);
+            let json = JSON.parse(data);
+            let html = "<table>";
+            for (const row of json) {
+                html += "<tr>";
+                let start_date = new Date(parseInt(row.time));
+                html += "<td>" + start_date.getHours() + ":" + start_date.getMinutes() + "</td>";
 
-				html += "<td>" + gLocal.LogType[row.active] + "</td>";
-				html += "<td>";
-				switch (row.active) {
-					case "30":
-						html += "<a href='../dict/?word=" + row.content + "' target='_blank'>" + row.content + "</a>";
-						break;
-					case "11":
-						break;
-					case "20":
-						break;
-					default:
-						html += row.content;
-						break;
-				}
-				html += "</td>";
-				html += "</tr>";
-			}
-			html += "</table>";
-			$("#timeline_table").html(html);
-		}
-	);
-}
+                html += "<td>" + gLocal.LogType[row.active] + "</td>";
+                html += "<td>";
+                switch (row.active) {
+                    case "30":
+                        html += "<a href='../dict/?word=" + row.content + "' target='_blank'>" + row.content + "</a>";
+                        break;
+                    case "11":
+                        break;
+                    case "20":
+                        break;
+                    default:
+                        html += row.content;
+                        break;
+                }
+                html += "</td>";
+                html += "</tr>";
+            }
+            html += "</table>";
+            $("#timeline_table").html(html);
+        }
+    );
+}

app/course/lesson.php

@@ -1,44 +1,61 @@
 <?PHP
-    include "../pcdl/html_head.php";
+include "../pcdl/html_head.php";
 ?>
+
 <body>
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
 
-<script src="../course/lesson.js"></script>
-<?php
+    <script src="../course/lesson.js"></script>
+    <?php
     require_once("../pcdl/head_bar.php");
-?>
+    ?>
+
+    <link type="text/css" rel="stylesheet" href="./style.css" />
+
+    <style>
+        .padding_LR_1rem {
+            padding: 0 1rem;
+        }
+
+        #lesson_info_shell {
+            padding: 2rem 1rem;
+        }
+
+        #course_info_shell {
+            background-color: var(--box-bg-color1);
+        }
+
+        #course_info {
+            display: flex;
+            justify-content: space-between;
+            padding: 6px;
+        }
+
+        #parent_title,
+        #parent_title a {
+            font-size: 13px;
+            line-height: 2.4em;
+            font-weight: 500;
+            color: var(--tool-color);
+        }
+    </style>
+
+    <div id='course_content'>
+        <div id='course_info_shell' class='padding_LR_1rem'>
+            <div id='course_info' class="section_inner"></div>
+        </div>
+        <div id='lesson_info_shell'>
+            <div id='lesson_info' class="section_inner"></div>
+        </div>
+        <div id='lesson_list_shell'>
+            <div id='lesson_list' class="section_inner lesson"></div>
+        </div>
+    </div>
 
-<link type="text/css" rel="stylesheet" href="./style.css" />
-
-<style>
-#course_info_shell{
-    background-color: var(--box-bg-color1);
-}
-#course_info{
-    display:flex;
-    justify-content: space-between;
-    padding: 6px;
-}
-
-#parent_title,#parent_title a {
-    font-size: 13px;
-    line-height: 2.4em;
-    font-weight: 500;
-    color: var(--tool-color);
-}
-</style>
-
-<div id='course_content' >
-    <div id='course_info_shell'><div id='course_info' class="section_inner"></div></div>
-    <div id='lesson_info_shell'><div id='lesson_info' class="section_inner"></div></div>
-    <div id='lesson_list_shell'><div id='lesson_list' class="section_inner lesson"></div></div>
-</div>
-
-<script>
-lesson_load("<?php echo $_GET["id"]; ?>");
-</script>
-<?php
-include "../pcdl/html_foot.php";
-?>
+    <script>
+        lesson_load("<?php echo $_GET["id"]; ?>");
+    </script>
+    <?php
+    include "../pcdl/html_foot.php";
+    ?>

app/course/style.css

@@ -1,93 +1,90 @@
 #course_frame {
-	display: flex;
+    display: flex;
 }
+
 #course_content {
-	margin: 0;
-	padding: 0;
-}
-#lesson_list {
+    margin: 0;
+    padding: 0;
 }
+
 #course_info_head_1 {
-	display: flex;
-}
-#course_info_head_face {
-	width: 200px;
-	height: 200px;
-	padding: 12px;
+    display: flex;
 }
+
 #course_info_head_face img {
-	width: 100%;
-	border-radius: 12px;
+    width: 100%;
+    border-radius: 12px;
 }
+
 .section_inner {
-	max-width: 960px;
-	margin: 0 auto;
+    max-width: 960px;
+    margin: 0 auto;
 }
+
 #course_info_head_title {
-	padding: 12px 0;
+    padding: 12px 0;
 }
+
 #course_title {
-	font-size: 22px;
-	font-weight: 700;
+    font-size: 22px;
+    font-weight: 700;
 }
 
 #course_subtitle {
-	font-size: 13px;
-	font-weight: 600;
-	padding: 10px 0;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 10px 0;
 }
+
 #lesson_list_shell {
-	background-color: var(--drop-bg-color);
+    padding: 2rem 1rem;
+    background-color: #f5f5f5;
 }
-.course_info_block {
-	border-top: 1px solid var(--box-bg-color2);
-	padding: 10px 5px;
+
+
 }
-.course_info_block:first-child {
-	border-top: none;
+.course_info_block {
+    padding: 1rem 0;
 }
 .course_info_block h2 {
-	font-size: 16px;
-}
-#lesson_list {
-	display: flex;
-	flex-wrap: wrap;
+    font-size: 16px;
 }
 #lesson_list .lesson_card {
-	width: 50%;
-	padding: 15px;
+    width: 50%;
+    padding: 15px;
 }
 .datatime {
-	display: inline;
-
-	padding: 1px 4px;
+    display: inline;
+    padding: 1px 4px;
 }
 .not_started {
-	background-color: orangered;
-	color: var(--bg-color);
+    background-color: orangered;
+    color: var(--bg-color);
 }
 .in_progress,
 .already_over {
-	color: var(--btn-hover-bg-color);
+    color: var(--btn-hover-bg-color);
 }
 .lesson_card .title {
-	padding: 5px;
-	font-size: 17px;
-	font-weight: 600;
+    padding: 5px;
+    font-size: 17px;
+    font-weight: 600;
 }
 .curr_lesson {
-	border-left: 2px solid var(--tool-bt-bg-color1);
+    border-left: 2px solid var(--tool-bt-bg-color1);
 }
 .curr_lesson a {
-	color: var(--main-color);
+    color: var(--main-color);
 }
 .not_curr_lesson {
-	border-left: 2px solid var(--border-line-color);
-	color: gray;
+    border-left: 2px solid var(--border-line-color);
+    color: gray;
 }
 .not_curr_lesson a {
-	color: gray;
-}
-#course_info_head_2 {
-	padding: 10px 0;
+    color: gray;
 }
+#lesson_info_head_2 {
+    padding: 1rem 0;
+    border-top: 1px solid var(--border-line-color);
+    border-bottom: 1px solid var(--border-line-color);
+}