feat: 响应式
This commit is contained in:
mozzie
parent
7ea972bd06
commit
d87cd736d8
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -12,3 +12,14 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.main-footer {
|
||||
span {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
.options {
|
||||
margin-top: 100px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
> section {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
padding: 40px;
|
||||
&.popular {
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user