移动端适配

css/base.css

@@ -560,7 +560,9 @@ a {
     right: 0;
     top: 0;
     z-index: 1;
-    background: transparent;
+    background-color: transparent;
+    -webkit-transition: background-color 0.2s;
+    transition: background-color 0.2s;
   }
   .navbar .navbar-collapse::-webkit-scrollbar {
     width: 2px;

css/base.scss

@@ -638,7 +638,9 @@ a {
       right: 0;
       top: 0;
       z-index: 1;
-      background: transparent;
+      background-color: transparent;
+      -webkit-transition: background-color 0.2s;
+      transition: background-color 0.2s;
 
       &::-webkit-scrollbar {
         width: 2px;

css/contact.css

@@ -336,19 +336,19 @@
   .main .container .content .map .map-tip {
     position: absolute;
     z-index: 9;
-    font-size: 14px;
+    font-size: 0.24rem;
     color: #fff;
-    min-width: 228px;
+    min-width: 2.28rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    padding: 24px 16px;
+    padding: 0.24rem;
     background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
-    border-radius: 8px;
+    border-radius: 0.12rem;
     left: 0;
     bottom: 0;
     -webkit-transform: translate(-47%, -50px);
     transform: translate(-47%, -50px);
-    line-height: 24px;
+    line-height: 0.4rem;
   }
   .main .container .content .map .map-tip::after {
     position: absolute;
@@ -358,7 +358,7 @@
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 12px 10px 0 10px;
+    border-width: 0.12rem 0.1rem 0 0.1rem;
     border-color: #0688d2 transparent transparent transparent;
     -webkit-transform: translate(-50%, 100%);
     transform: translate(-50%, 100%);
@@ -435,7 +435,7 @@
     background-size: 0.48rem;
     background-image: url(/img/contact-icon-up.png);
     background-color: #fff;
-    font-size: 0.26rem;
+    font-size: 0.28rem;
   }
   .main .container .content .job-list .job .requirements {
     line-height: 0.48rem;
@@ -443,7 +443,7 @@
     margin: 0.16rem 0;
   }
   .main .container .content .job-list .job .requirements p {
-    font-size: 0.24rem;
+    font-size: 0.26rem;
   }
   .main .container .content .job-list .job .link {
     padding: 0 0.16rem;
@@ -451,7 +451,7 @@
   }
   .main .container .content .job-list .job .link a {
     display: block;
-    font-size: 0.24rem;
+    font-size: 0.26rem;
     color: #0688d2;
   }
 

css/contact.scss

@@ -400,19 +400,19 @@
           .map-tip {
             position: absolute;
             z-index: 9;
-            font-size: 14px;
+            font-size: 0.24rem;
             color: #fff;
-            min-width: 228px;
+            min-width: 2.28rem;
             -webkit-box-sizing: border-box;
             box-sizing: border-box;
-            padding: 24px 16px;
+            padding: 0.24rem;
             background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
-            border-radius: 8px;
+            border-radius: 0.12rem;
             left: 0;
             bottom: 0;
             -webkit-transform: translate(-47%, -50px);
             transform: translate(-47%, -50px);
-            line-height: 24px;
+            line-height: 0.4rem;
 
             &::after {
               position: absolute;
@@ -422,7 +422,7 @@
               width: 0;
               height: 0;
               border-style: solid;
-              border-width: 12px 10px 0 10px;
+              border-width: 0.12rem 0.1rem 0 0.1rem;
               border-color: #0688d2 transparent transparent transparent;
               -webkit-transform: translate(-50%, 100%);
               transform: translate(-50%, 100%);
@@ -520,7 +520,7 @@
               background-size: 0.48rem;
               background-image: url(/img/contact-icon-up.png);
               background-color: #fff;
-              font-size: 0.26rem;
+              font-size: 0.28rem;
             }
             .requirements {
               line-height: 0.48rem;
@@ -528,7 +528,7 @@
               margin: 0.16rem 0;
 
               p {
-                font-size: 0.24rem;
+                font-size: 0.26rem;
               }
             }
             .link {
@@ -536,7 +536,7 @@
               margin-bottom: 0.24rem;
               a {
                 display: block;
-                font-size: 0.24rem;
+                font-size: 0.26rem;
                 color: #0688d2;
               }
             }

js/dist/main.dev.js

@@ -52,11 +52,14 @@ function startMenuAction() {
       }
 
       $(this).attr('aria-expanded', expanded);
+
+      if (expanded === 'false') {
+        $(target).css('background-color', 'transparent');
+      }
+
       $(target).slideToggle(function () {
         if (expanded === 'true') {
-          $(this).css('background', 'rgba(0, 0, 0, 0.3)');
-        } else {
-          $(this).css('background', 'transparent');
+          $(this).css('background-color', 'rgba(0, 0, 0, 0.6)');
         }
 
         isAnimated = false;

js/main.js

@@ -48,11 +48,12 @@ function startMenuAction() {
         expanded = 'true'
       }
       $(this).attr('aria-expanded', expanded)
+      if (expanded === 'false') {
+        $(target).css('background-color', 'transparent')
+      }
       $(target).slideToggle(function () {
         if (expanded === 'true') {
-          $(this).css('background', 'rgba(0, 0, 0, 0.3)')
-        } else {
-          $(this).css('background', 'transparent')
+          $(this).css('background-color', 'rgba(0, 0, 0, 0.6)')
         }
         isAnimated = false
       })