feat: ui

apps/web/src/view/Course/components/Card/index.less

@@ -3,7 +3,7 @@
 
   &:hover {
     .cover {
-      background-size: 105%;
+      background-size: 125%;
     }
   }
 
@@ -11,7 +11,7 @@
     transition: background-size 0.25s linear;
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: 120%;
     .mask {
       transition: background-image 0.25s linear;
       position: relative;
@@ -22,15 +22,6 @@
         rgba(0, 0, 0, 0.1),
         rgba(255, 255, 255, 0)
       );
-      p {
-        margin: 0;
-        position: absolute;
-        bottom: 10px;
-        left: 10px;
-        right: 10px;
-        color: #fff;
-        font-size: 18px;
-      }
     }
   }
 }

apps/web/src/view/Course/components/Card/index.tsx

@@ -4,12 +4,13 @@ import "./index.less";
 interface IProps {
   imgUrl: string;
   title: string;
+  summary?: string;
   styles?: {};
   onClick?: MouseEventHandler;
 }
 
 export default function Card(props: IProps) {
-  const { imgUrl, title, styles, ...rest } = props;
+  const { imgUrl, title, styles, summary, ...rest } = props;
 
   return (
     <div className="course-card" {...rest} style={{ ...styles }}>
@@ -21,6 +22,7 @@ export default function Card(props: IProps) {
       >
         <div className="mask">
           <p className="bs ellipsis">{title}</p>
+          <div className="bs ellipsis">{summary}</div>
         </div>
       </div>
     </div>

apps/web/src/view/Course/index.less

@@ -58,6 +58,20 @@
 
             &.table {
               grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+              .course-card .mask {
+                p {
+                  margin: 0;
+                  position: absolute;
+                  bottom: 10px;
+                  left: 10px;
+                  right: 10px;
+                  color: #fff;
+                  font-size: 14px;
+                }
+                > div {
+                  display: none;
+                }
+              }
             }
             &.tab {
               grid-template-columns: 1fr;
@@ -67,8 +81,27 @@
                   height: 330px;
                 }
                 .mask {
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  flex-direction: column;
+                  color: #fff;
+                  text-align: center;
                   p {
-                    font-size: 20px;
+                    margin: 0;
+                    background: rgba(0, 0, 0, 0.7);
+                    font-size: 22px;
+                    padding: 10px;
+                    line-height: 1.5;
+                    border-radius: 6px 6px 0 0;
+                    width: 60%;
+                  }
+                  > div {
+                    width: 60%;
+                    background: rgba(0, 0, 0, 0.3);
+                    padding: 6px;
+                    line-height: 1.4;
+                    border-radius: 0 0 6px 6px;
                   }
                 }
               }

apps/web/src/view/Course/index.tsx

@@ -117,6 +117,7 @@ export default function Index() {
                       key={d.course_id}
                       imgUrl={d.course_cover_url}
                       title={d.course_title}
+                      summary={d.course_summary}
                     />
                   ))}
                 </div>

apps/web/src/view/Login/index.less

@@ -1,9 +1,21 @@
 .login {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
+  > img {
+    width: 44px;
+  }
+
+  h4 {
+    font-weight: 400;
+  }
+
   .form {
     border-radius: 6px;
     background-color: #fff;

apps/web/src/view/Login/index.tsx

@@ -50,10 +50,9 @@ export default function Login() {
   }, [countdown]);
 
   return (
-    <div
-      className="container login"
-      style={{ textAlign: "center", paddingTop: 100 }}
-    >
+    <div className="container login">
+      <img src="/favicon.svg" />
+      <h4>欢迎，Backset.cn!</h4>
       <div style={{ width: 320 }}>
         <div className="form">
           <input