feat: 详情页新增模块

server/public/css/insight.css

@@ -1285,7 +1285,7 @@ body {
   object-fit: cover;
 }
 .detail .content {
-  padding: 16px 0 0;
+  padding: 12px 0 0;
   flex: 1;
 }
 .detail .content h2 {
@@ -1294,8 +1294,8 @@ body {
 }
 .detail .content .price-area {
   position: relative;
-  margin: 24px 0 36px;
-  padding: 15px 0 20px 74px;
+  margin: 24px 0 0;
+  padding: 15px 0 19px 74px;
   border-radius: 4px;
   background-color: #FAFAFA;
 }
@@ -1309,7 +1309,9 @@ body {
   line-height: 20px;
 }
 .detail .content .price-area .price {
+  height: 30px;
   line-height: 30px;
+  overflow: hidden;
 }
 .detail .content .price-area .price b {
   font-size: 30px;
@@ -1354,6 +1356,15 @@ body {
   background-size: 20px 16px;
   height: 16px;
 }
+.detail .content .upgrade-date {
+  padding-left: 18px;
+  margin: 16px 0 18px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #9C9C9C;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAACbm5ucnJybm5ubm5ucnJycnJycnJybm5ucnJybm5uampqfn5+bm5udnZ2cnJycnJzzKI+kAAAAEHRSTlMAQOCAcL+gUCDvsDAQwI+QcvKIKAAAAMNJREFUKM+Nkt0WhCAIhMU/yNWW93/aLRMx8+yJ229mShjzcjJ65zzkBYLAbRJMiA5UHAKgKwemkX02LtCFke3nxvyo9bx1Spabbd/bD/Amyan7rO3eILJoZmgCQzPSE8JlzVzMANWaq8atoGOs38YVRPZVAk8ogSOMHG9QY5VqLFbJRCUwyzKUylNkGTMlTrqMYb7ulIgj6MH0aElOtolM32Hp/7E7tRxJqyZMkhNzuAp2Vo3maiZuU2BVajhLjdm8mx/WeQgbBjSSzgAAAABJRU5ErkJggg==") no-repeat 0 50%;
+  background-size: 14px 14px;
+}
 .detail .content .button {
   width: 162px;
   height: 40px;
@@ -1464,22 +1475,60 @@ body {
   line-height: 22px;
   font-weight: 600;
 }
-.course-section .wrapper .about-info .model:nth-of-type(1) .header {
+.course-section .wrapper .about-info .model:nth-of-type(2) .header {
   background-image: url("../images/side_bg1.png");
 }
-.course-section .wrapper .about-info .model:nth-of-type(2) .header {
+.course-section .wrapper .about-info .model:nth-of-type(3) .header {
   background-image: url("../images/side_bg2.png");
 }
 .course-section .wrapper .about-info .model:nth-of-type(n+2) {
   margin-top: 20px;
 }
+.course-section .wrapper .about-info .includes-list {
+  margin-top: -8px;
+  padding: 0 26px 2px;
+}
+.course-section .wrapper .about-info .includes-list li {
+  margin: 0 0 12px;
+  padding: 0 0 0 28px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 14px;
+  color: #606060;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-position: 0 50%;
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+}
+.course-section .wrapper .about-info .includes-list li.course-time {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAANlBMVEUAAAAAv5kAvZcAv5cAv5oAvpgAv58Av5kAv5kAvpgAvZcAv5kAv5cAvpkAv5gAv5kAv5kAv5kxwMZ9AAAAEXRSTlMAwGAgz7AQ79+AQI9goJ+gcPfexZcAAACdSURBVDjLzdS3DsMwDARQUYUqVsr9/8+GBghkkchMsW/i8AAd1MIF4V5omRK/KGObzGqizLQO0BUV0K5IRtGJ9ohAF6NUW3RRBPBMPpIcyUOvCrTooJQeEDZsJPWbVjOQZAqr7KBYBSUTDQJA5nJ8Fs928eNc6f3DZnLwEHnHwq2Nu106CxXkPSo6dYDWycBUxNYzVyOZuw+jc/h/PthwDXIXZtTeAAAAAElFTkSuQmCC");
+}
+.course-section .wrapper .about-info .includes-list li.course-articles {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAOVBMVEUAAAAAvZcAv5kAv58AvpgAv5kAvpkAwJgAvpUAv5kAvZcAv5oAvZoAv5kAv5oAvpkAv5gAv5kAv5nS/do/AAAAEnRSTlMAQMAQgO9wXzDfIM+QjzCgkFBGhX/JAAAAoklEQVQ4y9XP3QrCMAyG4cQ0/dnc1O/+L1aoVSNk7WQH4nNQaHkJDX1BMnvENknhKsnMKdig71kMROZYT74A3EQg24ifJwXAvv9LNI2jNGMZRZWOoxkYRpHO/UhUb3W7uRPRJPUm0omMo5Fw04kmRRN626G59rbjh3z44+FkLH604kP2J53tpLDrTz+OViCyI9pIFBuK0EsqfqOJDGFPFtrvDpOoF0zbYyVjAAAAAElFTkSuQmCC");
+}
+.course-section .wrapper .about-info .includes-list li.course-auth {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAQlBMVEUAAAAAv5kAu5cAv5kAv5cAv5YAv58AvpgAvpgAvpkAv5cAv5kAvpgAvZkAv5kAv5gAv5cAv5oAv5gAvZcAt5cAv5kFRtYcAAAAFXRSTlMAwEDvQDAQgKCQIN+wUM+QYM9wYCBkQRK2AAAA+klEQVQ4y82SS67CMAxFnTj/9EMLd/9bfX2Uxk4RQozgjGLrxFZ7Qz9OuNmuvtkN0tiBAUSpDQNdh4rBnfkYmvHANMczwPni/OEsAMfRuUWkUsErKTIwB9owIiXAa8e3vSIFIJEmoZazNB6DDrhdEimCO6cA7klK20ljO0lO76WI+SxNZoflvqcOD0GkM9k0Bk+f4G2jvJwOgcMLyUDhSBGzkha3s/aSlbzUH7PvJelK8uFZuv53hSzJdylOpKgYtNTGX5RzlVKkUlHVNsuodJJCZMCJkgAuWmJjJgb4MT3eK1T9pQN2TNFPhWPo8jUbaZVVeUhxDPQt/gABgRECKzRvXAAAAABJRU5ErkJggg==");
+}
+.course-section .wrapper .about-info .includes-list li.course-certificate {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAQlBMVEUAAAAAvZcAv5kAv58Av5kAvpgAv5cAv5cAv5oAv5kAv5gAvpcAv5gAv5kAv5oAvZkAvZYAvpkAvJkAv5YAv5kAv5kFB+LeAAAAFXRSTlMAQMAQ74AgMNDfsGCfj7+QcG9QcFAgYhM6AAAA6klEQVQ4y8WR23KFIAxFTQLhop5bu///VwtRZ1pQ+nTaNc44wCLswPTniM98zVNMyhhyq04AIl8SAS0SATRdYavvkDx3rK0UcEJoK925w78xOPnCQ21FZv/SE0lgLFVZUVmllyIK7rNMRGzEQSZvRXQBBt0lLPa/wXWSEFENG449L0AbSV2NJIe0z7fBTVJr05s0A9Iep0Qkexat4wS+Dh7qdfm7A3TwLIwNPpJtO5/0nQgXkRwiFR5VssgtbPV2klgbaSS5eTKEfhCLFIpkxwWZTmGk8tkN9PTdDcgAf6RfpJCptpPD9E98AWheGjKvelrQAAAAAElFTkSuQmCC");
+}
 .course-section .wrapper .about-info .masters-list {
   padding: 0 20px 5px 26px;
 }
 .course-section .wrapper .about-info .masters-list li {
   margin-bottom: 20px;
+}
+.course-section .wrapper .about-info .masters-list li .master-intro {
   display: flex;
 }
+.course-section .wrapper .about-info .masters-list li .master-desc {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #797979;
+}
 .course-section .wrapper .about-info .masters-list li .avatar {
   margin-right: 20px;
   width: 68px;
@@ -1503,6 +1552,7 @@ body {
   font-size: 14px;
   line-height: 20px;
   color: #797979;
+  font-weight: 600;
 }
 .course-section .wrapper .about-info .courses-list {
   padding: 0 0 3px;

server/public/css/insight.less

@@ -889,7 +889,7 @@ body{
     }
   }
   .content{
-    padding: 16px 0 0;
+    padding: 12px 0 0;
     flex: 1;
     h2{
       font-size: 24px;
@@ -897,8 +897,8 @@ body{
     }
     .price-area{
       position: relative;
-      margin: 24px 0 36px;
-      padding: 15px 0 20px 74px;
+      margin: 24px 0 0;
+      padding: 15px 0 19px 74px;
       border-radius: 4px;
       background-color: #FAFAFA;
       &:before{
@@ -911,7 +911,9 @@ body{
         line-height: 20px;
       }
       .price{
+        height: 30px;
         line-height: 30px;
+        overflow: hidden;
         b{
           font-size: 30px;
           color: #FB541F;
@@ -958,6 +960,15 @@ body{
         }
       }
     }
+    .upgrade-date{
+      padding-left: 18px;
+      margin: 16px 0 18px;
+      font-size: 12px;
+      line-height: 18px;
+      color: #9C9C9C;
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAACbm5ucnJybm5ubm5ucnJycnJycnJybm5ucnJybm5uampqfn5+bm5udnZ2cnJycnJzzKI+kAAAAEHRSTlMAQOCAcL+gUCDvsDAQwI+QcvKIKAAAAMNJREFUKM+Nkt0WhCAIhMU/yNWW93/aLRMx8+yJ229mShjzcjJ65zzkBYLAbRJMiA5UHAKgKwemkX02LtCFke3nxvyo9bx1Spabbd/bD/Amyan7rO3eILJoZmgCQzPSE8JlzVzMANWaq8atoGOs38YVRPZVAk8ogSOMHG9QY5VqLFbJRCUwyzKUylNkGTMlTrqMYb7ulIgj6MH0aElOtolM32Hp/7E7tRxJqyZMkhNzuAp2Vo3maiZuU2BVajhLjdm8mx/WeQgbBjSSzgAAAABJRU5ErkJggg==") no-repeat 0 50%;
+      background-size: 14px 14px;
+    }
     .button{
       width: 162px;
       height: 40px;
@@ -1068,21 +1079,59 @@ body{
             font-weight: 600;
           }
         }
-        &:nth-of-type(1) .header{
+        &:nth-of-type(2) .header{
           background-image: url("../images/side_bg1.png")
         }
-        &:nth-of-type(2) .header{
+        &:nth-of-type(3) .header{
           background-image: url("../images/side_bg2.png")
         }
         &:nth-of-type(n+2){
           margin-top: 20px;
         }
       }
+      .includes-list{
+        margin-top: -8px;
+        padding: 0 26px 2px;
+        li{
+          margin: 0 0 12px;
+          padding: 0 0 0 28px;
+          height: 20px;
+          line-height: 20px;
+          font-size: 14px;
+          color: #606060;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          background-position: 0 50%;
+          background-repeat: no-repeat;
+          background-size: 18px 18px;
+          &.course-time{
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAANlBMVEUAAAAAv5kAvZcAv5cAv5oAvpgAv58Av5kAv5kAvpgAvZcAv5kAv5cAvpkAv5gAv5kAv5kAv5kxwMZ9AAAAEXRSTlMAwGAgz7AQ79+AQI9goJ+gcPfexZcAAACdSURBVDjLzdS3DsMwDARQUYUqVsr9/8+GBghkkchMsW/i8AAd1MIF4V5omRK/KGObzGqizLQO0BUV0K5IRtGJ9ohAF6NUW3RRBPBMPpIcyUOvCrTooJQeEDZsJPWbVjOQZAqr7KBYBSUTDQJA5nJ8Fs928eNc6f3DZnLwEHnHwq2Nu106CxXkPSo6dYDWycBUxNYzVyOZuw+jc/h/PthwDXIXZtTeAAAAAElFTkSuQmCC");
+          }
+          &.course-articles{
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAOVBMVEUAAAAAvZcAv5kAv58AvpgAv5kAvpkAwJgAvpUAv5kAvZcAv5oAvZoAv5kAv5oAvpkAv5gAv5kAv5nS/do/AAAAEnRSTlMAQMAQgO9wXzDfIM+QjzCgkFBGhX/JAAAAoklEQVQ4y9XP3QrCMAyG4cQ0/dnc1O/+L1aoVSNk7WQH4nNQaHkJDX1BMnvENknhKsnMKdig71kMROZYT74A3EQg24ifJwXAvv9LNI2jNGMZRZWOoxkYRpHO/UhUb3W7uRPRJPUm0omMo5Fw04kmRRN626G59rbjh3z44+FkLH604kP2J53tpLDrTz+OViCyI9pIFBuK0EsqfqOJDGFPFtrvDpOoF0zbYyVjAAAAAElFTkSuQmCC");
+          }
+          &.course-auth{
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAQlBMVEUAAAAAv5kAu5cAv5kAv5cAv5YAv58AvpgAvpgAvpkAv5cAv5kAvpgAvZkAv5kAv5gAv5cAv5oAv5gAvZcAt5cAv5kFRtYcAAAAFXRSTlMAwEDvQDAQgKCQIN+wUM+QYM9wYCBkQRK2AAAA+klEQVQ4y82SS67CMAxFnTj/9EMLd/9bfX2Uxk4RQozgjGLrxFZ7Qz9OuNmuvtkN0tiBAUSpDQNdh4rBnfkYmvHANMczwPni/OEsAMfRuUWkUsErKTIwB9owIiXAa8e3vSIFIJEmoZazNB6DDrhdEimCO6cA7klK20ljO0lO76WI+SxNZoflvqcOD0GkM9k0Bk+f4G2jvJwOgcMLyUDhSBGzkha3s/aSlbzUH7PvJelK8uFZuv53hSzJdylOpKgYtNTGX5RzlVKkUlHVNsuodJJCZMCJkgAuWmJjJgb4MT3eK1T9pQN2TNFPhWPo8jUbaZVVeUhxDPQt/gABgRECKzRvXAAAAABJRU5ErkJggg==");
+          }
+          &.course-certificate{
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAQlBMVEUAAAAAvZcAv5kAv58Av5kAvpgAv5cAv5cAv5oAv5kAv5gAvpcAv5gAv5kAv5oAvZkAvZYAvpkAvJkAv5YAv5kAv5kFB+LeAAAAFXRSTlMAQMAQ74AgMNDfsGCfj7+QcG9QcFAgYhM6AAAA6klEQVQ4y8WR23KFIAxFTQLhop5bu///VwtRZ1pQ+nTaNc44wCLswPTniM98zVNMyhhyq04AIl8SAS0SATRdYavvkDx3rK0UcEJoK925w78xOPnCQ21FZv/SE0lgLFVZUVmllyIK7rNMRGzEQSZvRXQBBt0lLPa/wXWSEFENG449L0AbSV2NJIe0z7fBTVJr05s0A9Iep0Qkexat4wS+Dh7qdfm7A3TwLIwNPpJtO5/0nQgXkRwiFR5VssgtbPV2klgbaSS5eTKEfhCLFIpkxwWZTmGk8tkN9PTdDcgAf6RfpJCptpPD9E98AWheGjKvelrQAAAAAElFTkSuQmCC");
+          }
+        }
+      }
       .masters-list{
         padding: 0 20px 5px 26px;
         li{
           margin-bottom: 20px;
-          display: flex;
+          .master-intro{
+            display: flex;
+          }
+          .master-desc{
+            margin-top: 16px;
+            font-size: 14px;
+            line-height: 20px;
+            color: #797979;
+          }
           .avatar{
             margin-right: 20px;
             width: 68px;
@@ -1106,6 +1155,7 @@ body{
             font-size: 14px;
             line-height: 20px;
             color: #797979;
+            font-weight: 600;
           }
         }
       }

server/views/detail.html

@@ -42,6 +42,7 @@
                 <div class="p8"><%= course.discountmsg%></div>
               </div>
             </div>
+            <div class="upgrade-date">最近更新时间：2023-10</div>
             <a href="<%= course.payHref%>" class="button"
               ><%= parseFloat(course.price) ? "立即购买":"免费领取" %></a
             >
@@ -61,19 +62,33 @@
             </div>
           </div>
           <div class="about-info">
+            <div class="model">
+              <div class="header">
+                <h4>本课程包括</h4>
+              </div>
+              <ul class="includes-list">
+                <li class="course-time">44.5小时长的精选视频</li>
+                <li class="course-articles">20 篇文章</li>
+                <li class="course-auth">永久访问权</li>
+                <li class="course-certificate">结业证书</li>
+              </ul>
+            </div>
             <div class="model">
               <div class="header">
                 <h4>授课教师</h4>
               </div>
               <ul class="masters-list">
                 <li>
-                  <div class="avatar">
-                    <img src="<%= teacher.img%>" alt="讲师" />
-                  </div>
-                  <div class="info">
-                    <h5><%= teacher.name%></h5>
-                    <div class="title"><%= teacher.title%></div>
+                  <div class="master-intro">
+                    <div class="avatar">
+                      <img src="<%= teacher.img%>" alt="讲师" />
+                    </div>
+                    <div class="info">
+                      <h5><%= teacher.name%></h5>
+                      <div class="title"><%= teacher.title%></div>
+                    </div>
                   </div>
+                  <div class="master-desc">中国环境科学学会环境工程分会副秘书长，8年 双碳领域从业经验，采用新型技术降低碳足迹， 实现可持续发展</div>
                 </li>
               </ul>
             </div>