|
@@ -1,4 +1,9 @@
|
|
|
|
+@function vh-calc($num) {
|
|
|
|
+ @return calc(100vh * ($num / var(--design-height)));
|
|
|
|
+}
|
|
|
|
+
|
|
.home {
|
|
.home {
|
|
|
|
+ --design-height: 938;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
|
|
@@ -13,22 +18,24 @@
|
|
|
|
|
|
&__title {
|
|
&__title {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 166px;
|
|
|
|
|
|
+ top: vh-calc(166);
|
|
left: 50%;
|
|
left: 50%;
|
|
- width: 1260px;
|
|
|
|
- height: 333px;
|
|
|
|
|
|
+ width: vh-calc(1260);
|
|
|
|
+ height: vh-calc(333);
|
|
background: url('@/assets/images/ylct/home/title-min.png') no-repeat center / contain;
|
|
background: url('@/assets/images/ylct/home/title-min.png') no-repeat center / contain;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
&__logo {
|
|
&__logo {
|
|
position: absolute;
|
|
position: absolute;
|
|
- right: 364px;
|
|
|
|
- bottom: 122px;
|
|
|
|
|
|
+ right: vh-calc(364);
|
|
|
|
+ bottom: vh-calc(122);
|
|
}
|
|
}
|
|
&__btn {
|
|
&__btn {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
- bottom: 70px;
|
|
|
|
|
|
+ bottom: vh-calc(70);
|
|
|
|
+ width: vh-calc(162);
|
|
|
|
+ height: vh-calc(162);
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|