feat: 响应式

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;

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;
+      }
+    }
+  }
+}

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;
+    }
+  }
+}

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;

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

@@ -50,6 +50,7 @@ export default function Login() {
   }, [countdown]);
 
   return (
+    <>
       <div className="container login">
         <img src="/favicon.svg" />
         <h4>欢迎，Backset.cn!</h4>
@@ -110,5 +111,34 @@ export default function Login() {
           </button>
         </div>
       </div>
+      {/* <svg width="100%" viewBox="0 0 1440 690" className="bg">
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="5%" stop-color="#F78DA7"></stop>
+            <stop offset="95%" stop-color="#8ED1FC"></stop>
+          </linearGradient>
+        </defs>
+        <path
+          d="M 0,500 C 0,500 0,166 0,166 C 95.69377990430621,161.38755980861242 191.38755980861242,156.77511961722487 291,154 C 390.6124401913876,151.22488038277513 494.1435406698564,150.28708133971293 586,170 C 677.8564593301436,189.71291866028707 758.0382775119618,230.07655502392345 862,216 C 965.9617224880382,201.92344497607655 1093.7033492822968,133.40669856459328 1194,116 C 1294.2966507177032,98.5933014354067 1367.1483253588517,132.29665071770336 1440,166 C 1440,166 1440,500 1440,500 Z"
+          stroke="none"
+          stroke-width="0"
+          fill="url(#gradient)"
+          fill-opacity="0.53"
+        ></path>
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="5%" stop-color="#F78DA7"></stop>
+            <stop offset="95%" stop-color="#8ED1FC"></stop>
+          </linearGradient>
+        </defs>
+        <path
+          d="M 0,500 C 0,500 0,333 0,333 C 110.17224880382773,303.77511961722485 220.34449760765546,274.55023923444975 307,278 C 393.65550239234454,281.44976076555025 456.7942583732058,317.5741626794258 536,320 C 615.2057416267942,322.4258373205742 710.4784688995214,291.1531100478469 825,296 C 939.5215311004786,300.8468899521531 1073.2918660287082,341.8133971291866 1179,354 C 1284.7081339712918,366.1866028708134 1362.3540669856459,349.5933014354067 1440,333 C 1440,333 1440,500 1440,500 Z"
+          stroke="none"
+          stroke-width="0"
+          fill="url(#gradient)"
+          fill-opacity="1"
+        ></path>
+      </svg> */}
+    </>
   );
 }

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,31 +17,13 @@
       width: 96px;
       height: 96px;
     }
-  }
 
-  .bg {
-    position: absolute;
-    bottom: 0;
-  }
-
-  h2 {
-    font-size: 24px;
-  }
-  h4 {
-    font-weight: 400;
-    color: var(--color-text-3);
-  }
-}
     .options {
       margin-top: 100px;
       position: relative;
       display: flex;
 
-  > section {
+      .popular {
-    position: relative;
-    width: 30%;
-    padding: 40px;
-    &.popular {
         position: absolute;
         right: 5%;
         width: 35%;
@@ -65,6 +37,11 @@
           color: rgb(var(--primary-5));
         }
       }
+
+      > section {
+        position: relative;
+        width: 30%;
+        padding: 40px;
         > img {
           width: 100%;
         }
@@ -129,6 +106,54 @@
           }
         }
       }
+
+      @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 {
+    position: absolute;
+    bottom: 0;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+  h4 {
+    font-weight: 400;
+    color: var(--color-text-3);
+  }
 }
 
 .overlay {
@@ -140,12 +165,11 @@
   border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
-.text-gradient {
+@media (max-width: 1120px) {
-  background-image: linear-gradient(
+  .subscribe {
-    45deg,
+    position: relative;
-    hsl(357, 95%, 50%) 25%,
+    .container {
-    hsl(417, 95%, 50%)
+      padding-bottom: 24px;
-  );
+    }
-  -webkit-background-clip: text;
+  }
-  -webkit-text-fill-color: transparent;
 }

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

@@ -42,18 +42,11 @@ function Subscribe() {
         <h2>订阅</h2>
         <h4>订阅后，全站免费，无任何其他附加收费</h4>
         <h4>👇 忘记备注手机号、开通慢、seekdeer老用户，任何需求，请加微信</h4>
-        <img className="buddy" src="https://1500018521.vod2.myqcloud.com/cba178a0vodsh1500018521/35f91076243791580783633066/FSDCg83tazAA.png" />
+        <img
+          className="buddy"
+          src="https://1500018521.vod2.myqcloud.com/cba178a0vodsh1500018521/35f91076243791580783633066/FSDCg83tazAA.png"
+        />
         <div className="options overlay">
-          <section>
-            <h3>微信</h3>
-            <p>请备注: 手机号</p>
-            <img src="https://1500018521.vod2.myqcloud.com/cba178a0vodsh1500018521/79e68497243791580784272166/P5H9X9MuIa4A.jpg" />
-          </section>
-          <section>
-            <h3>支付宝</h3>
-            <p>请备注: 手机号</p>
-            <img src="https://1500018521.vod2.myqcloud.com/cba178a0vodsh1500018521/3aedfda0243791580783877255/jBJKs35aVeAA.jpg" />
-          </section>
           {/* popular */}
           <section className="popular">
             <div className="original">￥499</div>
@@ -62,9 +55,6 @@ function Subscribe() {
             <p>
               12个月内，在线学习所有课程(视频、文字)，快速掌握各种指标编写技术。随着菜场猪肉价格波动，订阅价格也会产生波动，越早订阅越划算
             </p>
-            {/* <button className="bs btn br3" style={{ width: "100%" }}>
-              订阅
-            </button> */}
             <ul>
               <li>
                 <Icon size={20} color="green">
@@ -86,6 +76,16 @@ function Subscribe() {
               </li>
             </ul>
           </section>
+          <section>
+            <h3>微信</h3>
+            <p>请备注: 手机号</p>
+            <img src="https://1500018521.vod2.myqcloud.com/cba178a0vodsh1500018521/79e68497243791580784272166/P5H9X9MuIa4A.jpg" />
+          </section>
+          <section>
+            <h3>支付宝</h3>
+            <p>请备注: 手机号</p>
+            <img src="https://1500018521.vod2.myqcloud.com/cba178a0vodsh1500018521/3aedfda0243791580783877255/jBJKs35aVeAA.jpg" />
+          </section>
         </div>
       </div>
     </div>