diff --git a/apps/web/src/view/Course/components/Card/index.less b/apps/web/src/view/Course/components/Card/index.less
index 3c7cc9e..d7cb1ca 100644
--- a/apps/web/src/view/Course/components/Card/index.less
+++ b/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;
- }
}
}
}
diff --git a/apps/web/src/view/Course/components/Card/index.tsx b/apps/web/src/view/Course/components/Card/index.tsx
index 83a5838..98e2997 100644
--- a/apps/web/src/view/Course/components/Card/index.tsx
+++ b/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 (
@@ -21,6 +22,7 @@ export default function Card(props: IProps) {
>
diff --git a/apps/web/src/view/Course/index.less b/apps/web/src/view/Course/index.less
index c209cff..af2bb79 100644
--- a/apps/web/src/view/Course/index.less
+++ b/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;
}
}
}
diff --git a/apps/web/src/view/Course/index.tsx b/apps/web/src/view/Course/index.tsx
index efb2079..33d9674 100644
--- a/apps/web/src/view/Course/index.tsx
+++ b/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}
/>
))}
diff --git a/apps/web/src/view/Login/index.less b/apps/web/src/view/Login/index.less
index 222f0a5..6711a41 100644
--- a/apps/web/src/view/Login/index.less
+++ b/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;
diff --git a/apps/web/src/view/Login/index.tsx b/apps/web/src/view/Login/index.tsx
index e9c010a..336280b 100644
--- a/apps/web/src/view/Login/index.tsx
+++ b/apps/web/src/view/Login/index.tsx
@@ -50,10 +50,9 @@ export default function Login() {
}, [countdown]);
return (
-
+
+
+
欢迎,Backset.cn!