完成屏幕适配功能
This commit is contained in:
MTrunning
@@ -14,24 +14,23 @@ $colors: (
|
||||
);
|
||||
|
||||
// 字体大小
|
||||
$base-font-size: 1rem;
|
||||
$base-font-size: 0.2rem;
|
||||
$font-sizes: (
|
||||
xxs: 0.6154,
|
||||
xxs: 0.1,
|
||||
//8px
|
||||
xs: 0.7692,
|
||||
xs: 0.125,
|
||||
//10px
|
||||
sm: 0.9231,
|
||||
sm: 0.2875,
|
||||
//12px
|
||||
md: 1 ,
|
||||
md: 0.1625,
|
||||
//13px
|
||||
lg: 1.0769 ,
|
||||
lg: 0.175,
|
||||
//14px
|
||||
xl: 1.2308 ,
|
||||
xl: 0.2,
|
||||
//16px
|
||||
xxl: 1.3846 ,
|
||||
xxl: 0.225,
|
||||
//18px
|
||||
xxxl: 1.5385
|
||||
//20px
|
||||
xxxl: 0.25 //20px,,,,
|
||||
);
|
||||
|
||||
// 宽高
|
||||
@@ -61,14 +60,14 @@ $flex-jc: (
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly
|
||||
evenly: space-evenly,
|
||||
);
|
||||
|
||||
$flex-ai: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
stretch: stretch
|
||||
stretch: stretch,
|
||||
);
|
||||
|
||||
.flex-1 {
|
||||
@@ -79,20 +78,20 @@ $flex-ai: (
|
||||
//spacing
|
||||
$spacing-types: (
|
||||
m: margin,
|
||||
p: padding
|
||||
p: padding,
|
||||
);
|
||||
$spacing-directions: (
|
||||
t: top,
|
||||
r: right,
|
||||
b: bottom,
|
||||
l: left
|
||||
l: left,
|
||||
);
|
||||
$spacing-base-size: 1rem;
|
||||
$spacing-base-size: 0.2rem;
|
||||
$spacing-sizes: (
|
||||
0: 0,
|
||||
1: 0.25,
|
||||
2: 0.5,
|
||||
3: 1,
|
||||
4: 1.5,
|
||||
5: 3
|
||||
5: 3,
|
||||
);
|
||||
|
||||
+27
-30
@@ -1,36 +1,35 @@
|
||||
#index {
|
||||
* {
|
||||
color: #D3D6DD;
|
||||
}
|
||||
|
||||
color: #d3d6dd;
|
||||
background-color: #000000;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.bg {
|
||||
padding: 1rem;
|
||||
padding: 0.2rem 0.2rem 0 0.2rem;
|
||||
background-image: url("../assets/pageBg.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.host-body {
|
||||
.title {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
width: 6.25rem;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.title-text {
|
||||
font-size: 2rem;
|
||||
font-size: 0.2rem;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.title-bototm {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
bottom: -0.375rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
@@ -39,19 +38,19 @@
|
||||
// 平行四边形
|
||||
.react-left {
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 0.225rem;
|
||||
width: 3.75rem;
|
||||
height: 0.625rem;
|
||||
line-height: 0.625rem;
|
||||
text-align: center;
|
||||
transform: skewX(-45deg);
|
||||
|
||||
.react-after {
|
||||
position: absolute;
|
||||
right: -25px;
|
||||
top: 0px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
right: -0.3125rem;
|
||||
top: 0;
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
background-color: #0f1325;
|
||||
transform: skewX(45deg);
|
||||
}
|
||||
@@ -64,22 +63,21 @@
|
||||
|
||||
.react-right {
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 0.225rem;
|
||||
width: 3.75rem;
|
||||
height: 0.625rem;
|
||||
line-height: 0.625rem;
|
||||
text-align: center;
|
||||
transform: skewX(45deg);
|
||||
|
||||
.react-before {
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: 0px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
left: -0.3125rem;
|
||||
top: 0;
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
background-color: #0f1325;
|
||||
transform: skewX(-45deg);
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
@@ -88,9 +86,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.body-box {
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -102,10 +99,10 @@
|
||||
|
||||
// 底部数据
|
||||
.bototm-box {
|
||||
margin-top: 10px;
|
||||
margin-top: 0.125rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+16
-33
@@ -10,7 +10,6 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -49,7 +48,6 @@ a {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
// 字体加粗
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
@@ -63,14 +61,13 @@ a {
|
||||
}
|
||||
|
||||
.bg-color-black {
|
||||
background-color: rgba(19, 25, 47, .6);
|
||||
background-color: rgba(19, 25, 47, 0.6);
|
||||
}
|
||||
|
||||
.bg-color-blue {
|
||||
background-color: #1A5CD7;
|
||||
background-color: #1a5cd7;
|
||||
}
|
||||
|
||||
|
||||
.colorBlack {
|
||||
color: #272727 !important;
|
||||
|
||||
@@ -80,10 +77,10 @@ a {
|
||||
}
|
||||
|
||||
.colorGrass {
|
||||
color: #33CEA0;
|
||||
color: #33cea0;
|
||||
|
||||
&:hover {
|
||||
color: #33CEA0 !important;
|
||||
color: #33cea0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,10 +93,10 @@ a {
|
||||
}
|
||||
|
||||
.colorText {
|
||||
color: #D3D6DD !important;
|
||||
color: #d3d6dd !important;
|
||||
|
||||
&:hover {
|
||||
color: #D3D6DD !important;
|
||||
color: #d3d6dd !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,10 +108,8 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//颜色
|
||||
@each $colorkey,
|
||||
$color in $colors {
|
||||
@each $colorkey, $color in $colors {
|
||||
.text-#{$colorkey} {
|
||||
color: $color;
|
||||
}
|
||||
@@ -124,7 +119,6 @@ $color in $colors {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//对齐
|
||||
@each $var in (left, center, right) {
|
||||
.text-#{$var} {
|
||||
@@ -133,46 +127,38 @@ $color in $colors {
|
||||
}
|
||||
|
||||
//flex
|
||||
@each $key,
|
||||
$value in $flex-jc {
|
||||
@each $key, $value in $flex-jc {
|
||||
.jc-#{$key} {
|
||||
justify-content: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key,
|
||||
$value in $flex-ai {
|
||||
@each $key, $value in $flex-ai {
|
||||
.ai-#{$key} {
|
||||
align-items: $value;
|
||||
}
|
||||
}
|
||||
|
||||
//字体
|
||||
@each $fontkey,
|
||||
$fontvalue in $font-sizes {
|
||||
@each $fontkey, $fontvalue in $font-sizes {
|
||||
.fs-#{$fontkey} {
|
||||
font-size: $fontvalue * $base-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//.mt-1 => margin top
|
||||
//spacing
|
||||
|
||||
@each $typekey,
|
||||
$type in $spacing-types {
|
||||
|
||||
@each $typekey, $type in $spacing-types {
|
||||
//.m-1
|
||||
@each $sizekey,
|
||||
$size in $spacing-sizes {
|
||||
@each $sizekey, $size in $spacing-sizes {
|
||||
.#{$typekey}-#{$sizekey} {
|
||||
#{$type}: $size * $spacing-base-size;
|
||||
}
|
||||
}
|
||||
|
||||
//.mx-1
|
||||
@each $sizekey,
|
||||
$size in $spacing-sizes {
|
||||
@each $sizekey, $size in $spacing-sizes {
|
||||
.#{$typekey}x-#{$sizekey} {
|
||||
#{$type}-left: $size * $spacing-base-size;
|
||||
#{$type}-right: $size * $spacing-base-size;
|
||||
@@ -185,11 +171,8 @@ $type in $spacing-types {
|
||||
}
|
||||
|
||||
//.mt-1
|
||||
@each $directionkey,
|
||||
$direction in $spacing-directions {
|
||||
|
||||
@each $sizekey,
|
||||
$size in $spacing-sizes {
|
||||
@each $directionkey, $direction in $spacing-directions {
|
||||
@each $sizekey, $size in $spacing-sizes {
|
||||
.#{$typekey}#{$directionkey}-#{$sizekey} {
|
||||
#{$type}-#{$direction}: $size * $spacing-base-size;
|
||||
}
|
||||
@@ -199,4 +182,4 @@ $type in $spacing-types {
|
||||
.#{$typekey} {
|
||||
#{$type}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user