From d87cd736d8fa3ffd698d3b8f8befbc357cdee99c Mon Sep 17 00:00:00 2001 From: mozzie Date: Tue, 28 Mar 2023 13:52:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=93=8D=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/assets/base.less | 9 +- apps/web/src/components/Footer/index.less | 11 + apps/web/src/components/Nav/index.less | 13 ++ apps/web/src/view/Course/index.less | 8 +- apps/web/src/view/Login/index.less | 2 +- apps/web/src/view/Login/index.tsx | 116 +++++++---- apps/web/src/view/Subscribe/index.less | 236 ++++++++++++---------- apps/web/src/view/Subscribe/index.tsx | 28 +-- 8 files changed, 257 insertions(+), 166 deletions(-) diff --git a/apps/web/src/assets/base.less b/apps/web/src/assets/base.less index 1526a2e..d5b470b 100644 --- a/apps/web/src/assets/base.less +++ b/apps/web/src/assets/base.less @@ -1,5 +1,4 @@ @import "normalize.css"; -// @import "@arco-design/web-react/dist/css/arco.css"; :root { --color-primary-1: #006eed; @@ -59,6 +58,14 @@ body { margin: 0 auto; } +@media (max-width: 1120px) { + .container { + padding-left: 24px; + padding-right: 24px; + width: auto; + } +} + input { outline: none; border: 0; diff --git a/apps/web/src/components/Footer/index.less b/apps/web/src/components/Footer/index.less index 9a9d7e3..6242c5d 100644 --- a/apps/web/src/components/Footer/index.less +++ b/apps/web/src/components/Footer/index.less @@ -12,3 +12,14 @@ text-decoration: none; } } + +@media (max-width: 1120px) { + .main-footer { + span { + &:nth-of-type(1), + &:nth-of-type(2) { + display: none; + } + } + } +} diff --git a/apps/web/src/components/Nav/index.less b/apps/web/src/components/Nav/index.less index 9811bdc..58b247d 100644 --- a/apps/web/src/components/Nav/index.less +++ b/apps/web/src/components/Nav/index.less @@ -61,6 +61,11 @@ header { color: #fff; } } + @media (max-width: 1120px) { + .btn { + margin-left: 0; + } + } .profile { .avatar-ddl { position: relative; @@ -124,3 +129,11 @@ header { } } } + +@media (max-width: 1120px) { + header { + .start span { + display: none; + } + } +} diff --git a/apps/web/src/view/Course/index.less b/apps/web/src/view/Course/index.less index 1903843..ff3d508 100644 --- a/apps/web/src/view/Course/index.less +++ b/apps/web/src/view/Course/index.less @@ -1,7 +1,7 @@ .course { display: flex; flex-direction: column; - padding: 100px 0 0 0; + padding-top: 100px; height: 100vh; .action-bar { @@ -24,6 +24,12 @@ } } + @media (max-width: 1120px) { + .action-bar { + display: none; + } + } + .thumbnail-timeline { flex: 1; position: relative; diff --git a/apps/web/src/view/Login/index.less b/apps/web/src/view/Login/index.less index 6711a41..cc90ecd 100644 --- a/apps/web/src/view/Login/index.less +++ b/apps/web/src/view/Login/index.less @@ -61,4 +61,4 @@ display: flex; align-items: center; } -} +} \ No newline at end of file diff --git a/apps/web/src/view/Login/index.tsx b/apps/web/src/view/Login/index.tsx index 336280b..708a6b1 100644 --- a/apps/web/src/view/Login/index.tsx +++ b/apps/web/src/view/Login/index.tsx @@ -50,24 +50,25 @@ export default function Login() { }, [countdown]); return ( -
- -

欢迎，Backset.cn!

-
-
- - setLoginForm((p) => ({ - ...p, - user_login: e.target.value, - })) - } - /> - {/* +
+ +

欢迎，Backset.cn!

+
+
+ + setLoginForm((p) => ({ + ...p, + user_login: e.target.value, + })) + } + /> + {/* */} -
- { - if (e.key === "Enter") onClickLogin(); - }} - onChange={(e) => - setLoginForm((p) => ({ - ...p, - user_pass: e.target.value, - })) - } - placeholder="验证码" - /> - - {countdown === DURATION ? "获取" : countdown + "s"} - +
+ { + if (e.key === "Enter") onClickLogin(); + }} + onChange={(e) => + setLoginForm((p) => ({ + ...p, + user_pass: e.target.value, + })) + } + placeholder="验证码" + /> + + {countdown === DURATION ? "获取" : countdown + "s"} + +
+
-
-
+ {/* + + + + + + + + + + + + + + + */} + ); } diff --git a/apps/web/src/view/Subscribe/index.less b/apps/web/src/view/Subscribe/index.less index e144cbf..5c9fa81 100644 --- a/apps/web/src/view/Subscribe/index.less +++ b/apps/web/src/view/Subscribe/index.less @@ -5,16 +5,6 @@ bottom: 0; left: 0; right: 0; - // background: linear-gradient( - // to right bottom, - // hsl(0deg 0% 100%), - // hsl(222deg 92% 65% / 13%) - // ); - // background: linear-gradient( - // to right bottom, - // hsl(0, 0%, 100%), - // hsl(0deg 0% 0% / 21%) - // ); background: #e9e8e5; .container { @@ -27,6 +17,129 @@ width: 96px; height: 96px; } + + .options { + margin-top: 100px; + position: relative; + display: flex; + + .popular { + position: absolute; + right: 5%; + width: 35%; + height: 120%; + top: -10%; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1); + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.125); + .sell { + color: rgb(var(--primary-5)); + } + } + + > section { + position: relative; + width: 30%; + padding: 40px; + > img { + width: 100%; + } + + .original { + color: var(--color-text-3); + font-size: 16px; + text-decoration: line-through; + font-weight: 300; + letter-spacing: 3px; + } + .price { + margin-bottom: 40px; + position: relative; + display: inline-block; + font-family: DINCondensed-Bold, "Century Gothic", CenturyGothic, + AppleGothic, sans-serif; + font-weight: bold; + font-size: 48px; + color: var(--color-text-2); + letter-spacing: 1px; + line-height: 1; + &::before { + position: absolute; + content: "￥"; + left: -20px; + top: 0; + font-size: 20px; + } + } + h3 { + margin: 0; + font-size: 18px; + font-weight: bold; + color: var(--color-text-2); + letter-spacing: 5px; + } + p { + margin: 10px 0 30px 0; + color: var(--color-text-3); + letter-spacing: 1px; + line-height: 1.9; + } + ul { + margin-top: 30px; + list-style: none; + padding: 0; + li { + display: flex; + align-items: center; + color: var(--color-text-2); + margin-bottom: 10px; + span { + color: var(--color-text-4); + } + div { + padding-left: 10px; + span { + padding-left: 10px; + } + } + } + } + } + + @media (max-width: 1120px) { + .popular { + display: block; + text-align: left; + position: relative; + width: auto; + right: auto; + top: auto; + padding: 24px; + background: transparent; + box-shadow: none; + } + > section { + display: inline-block; + width: auto; + text-align: center; + padding: 0; + width: 50%; + p { + margin: 0; + } + img { + padding: 0 10%; + } + } + } + } + + @media (max-width: 1120px) { + .options { + display: block; + } + } } .bg { @@ -42,94 +155,6 @@ color: var(--color-text-3); } } -.options { - margin-top: 100px; - position: relative; - display: flex; - - > section { - position: relative; - width: 30%; - padding: 40px; - &.popular { - position: absolute; - right: 5%; - width: 35%; - height: 120%; - top: -10%; - background: rgba(255, 255, 255, 0.7); - box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1); - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.125); - .sell { - color: rgb(var(--primary-5)); - } - } - > img { - width: 100%; - } - - .original { - color: var(--color-text-3); - font-size: 16px; - text-decoration: line-through; - font-weight: 300; - letter-spacing: 3px; - } - .price { - margin-bottom: 40px; - position: relative; - display: inline-block; - font-family: DINCondensed-Bold, "Century Gothic", CenturyGothic, - AppleGothic, sans-serif; - font-weight: bold; - font-size: 48px; - color: var(--color-text-2); - letter-spacing: 1px; - line-height: 1; - &::before { - position: absolute; - content: "￥"; - left: -20px; - top: 0; - font-size: 20px; - } - } - h3 { - margin: 0; - font-size: 18px; - font-weight: bold; - color: var(--color-text-2); - letter-spacing: 5px; - } - p { - margin: 10px 0 30px 0; - color: var(--color-text-3); - letter-spacing: 1px; - line-height: 1.9; - } - ul { - margin-top: 30px; - list-style: none; - padding: 0; - li { - display: flex; - align-items: center; - color: var(--color-text-2); - margin-bottom: 10px; - span { - color: var(--color-text-4); - } - div { - padding-left: 10px; - span { - padding-left: 10px; - } - } - } - } - } -} .overlay { width: 100%; @@ -140,12 +165,11 @@ border: 1px solid rgba(255, 255, 255, 0.125); } -.text-gradient { - background-image: linear-gradient( - 45deg, - hsl(357, 95%, 50%) 25%, - hsl(417, 95%, 50%) - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; +@media (max-width: 1120px) { + .subscribe { + position: relative; + .container { + padding-bottom: 24px; + } + } } diff --git a/apps/web/src/view/Subscribe/index.tsx b/apps/web/src/view/Subscribe/index.tsx index 1d1ccfd..3d60ebf 100644 --- a/apps/web/src/view/Subscribe/index.tsx +++ b/apps/web/src/view/Subscribe/index.tsx @@ -42,18 +42,11 @@ function Subscribe() {

订阅

订阅后，全站免费，无任何其他附加收费

👇 忘记备注手机号、开通慢、seekdeer老用户，任何需求，请加微信

- +
-
-

微信

-

请备注: 手机号

- -
-
-

支付宝

-

请备注: 手机号

- -
{/* popular */}
￥499
@@ -62,9 +55,6 @@ function Subscribe() {

12个月内，在线学习所有课程(视频、文字)，快速掌握各种指标编写技术。随着菜场猪肉价格波动，订阅价格也会产生波动，越早订阅越划算

- {/* */}
  • @@ -86,6 +76,16 @@ function Subscribe() {
+
+

微信

+

请备注: 手机号

+ +
+
+

支付宝

+

请备注: 手机号

+ +