-
- setLoginForm((p) => ({
- ...p,
- user_login: e.target.value,
- }))
- }
- />
- {/*
+
+
+
欢迎,Backset.cn!
+
-
+ {/*
*/}
+ >
);
}
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() {
+
+ 微信
+ 请备注: 手机号
+
+
+
+ 支付宝
+ 请备注: 手机号
+
+