优化样式

index.css

@@ -1,8 +1,7 @@
 
-.scroller::-webkit-scrollbar {
+::-webkit-scrollbar {
     width: 0;
     height: 8px;
-
     background: #f2f2f2; 
     background-color: transparent;
     padding-right: 2px;
@@ -17,55 +16,61 @@
 .scroller{
     overflow-y: scroll;
     scrollbar-width: thin; 
-    height: 8px;
     border-radius: 10px;
     scrollbar-color: #b4bbc5 #f2f2f2;
     scrollbar-track-color: #b4bbc5 #f2f2f2;
     -ms-scrollbar-track-color: #b4bbc5 #f2f2f2;
 }
 
-
-
+*{
+    margin: 0;
+    padding: 0;
+}
+html,body{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
 body{
-    margin:0;
     position:relative;
-    left:0;
 }
 
-#base{
-    position:absolute;
+.base{
     width:100%;
+    height: 100%;
+    position: relative;
 }
 
 .back-picture{
     position: absolute;
     border-width: 0;
-    left:0;
-    top:0;
+    left:50%;
+    top:50%;
+    transform: translate(-50%,-50%);
     width:100%;
-    height:1070px;
     background-color:darkseagreen;
 }
 
+
 .titles{
     position:absolute;
-    top:193px;
+    top:12%;
     /* left:674px; */
     width:100%;
     text-align: center;
 }
 
 .locate1{
-    top:272px;
+    top:20%;
 }
 
 .locate2{
-    top:363px;
+    top:32%;
 }
 
 .buttons{
     position:absolute;
-    top:874px;
+    bottom: 12%;
     left:0;
     width: 100%;
     display:flex;
@@ -109,16 +114,29 @@ body{
 
 
 .herald{
-    position: absolute;
-    top:-400px;
-    left:182px;
+    position: fixed;
+    top:45%;
+    left: 50%;
+    transform: translateX(-50%);
     border-radius: 50px / 45px;
     color:#000000;
     font-size: 12px;
-    font-family:'Microsoft YaHei','Arial Negreta', 'Arial Normal', 'Arial';
-    visibility: hidden;
-    text-align: center;
     padding:0 10px 0 10px;
+    width: 25%;
+    text-align: center;
+    visibility: hidden;
+}
+
+.herald .toast{
+    width: 100%;
+}
+
+.herald .toast-content{
+    width: 52%;
+    position: absolute;
+    top: 37%;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .ready:hover .herald{
@@ -126,23 +144,14 @@ body{
 }
 
 
-.toast-content{
-    position: absolute;
-    top:85px;
-    left:104px;
-} 
-
 
 .contact{
-    position: absolute;
-    top:88px;
-    width: 100%;
+    position: fixed;
+    top:20px;
+    right: 20px;
 }
 
 .contact-icon{
-    position: absolute;
-    left:1778px;
-    /* right:39px; */
     width:105px;
     height:25px;
     display: flex;
@@ -152,9 +161,7 @@ body{
 .contact-content{
     position: absolute;
     top:33px;
-    /* right:39px; */
-    left:1686px;
-
+    right:0;
     visibility: hidden;
 }
 
@@ -194,4 +201,8 @@ body{
 .block3{
     top:193px;
     height:103px;
+}
+
+.qrcode{
+    width: 75px;
 }