完成

web_html/assets/css/style.css

@@ -402,138 +402,6 @@ header .search-icon img {
      object-fit: contain;
 }
 
-.nav-list {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  background-color: #8FC31F;
-  background: linear-gradient(145deg, #8FC31F 0%, #036EB8 100%);
-  z-index: 80;
-  display: none;
-  transition: opacity .6s ease;
-}
-
-.nav-list.active {
-  display: block;
-  opacity: 1;
-}
-
-.nav-list .w .first-level {
-  padding-top: 20%;
-}
-
-.nav-list .w .first-level:after {
-  content: "";
-  clear: both;
-  display: block;
-  visibility: hidden;
-  width: 0;
-  height: 0;
-}
-
-.nav-list .w .first-level li {
-  float: left;
-  font-size: 16px;
-  color: #fff;
-  margin-right: 80px;
-}
-
-.nav-list .w .first-level li a {
-  display: block;
-  position: relative;
-  padding-left: 100px;
-  transition: all .5s ease;
-}
-
-.nav-list .w .first-level li a::after {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: all .5s ease;
-  width: 80px;
-  background-color: #fff;
-  height: 1px;
-  transition: all .5s ease;
-}
-
-.nav-list .w .first-level li a:hover {
-  padding-left: 80px;
-  padding-right: 20px;
-}
-
-.nav-list .w .first-level li a:hover::after {
-  width: 60px;
-}
-
-.nav-list .w .sec-level {
-  margin-top: 80px;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-}
-
-.nav-list .w .sec-level li {
-  color: #fff;
-}
-
-.nav-list .w .sec-level li h2 {
-  font-size: 24px;
-  font-weight: 600;
-  cursor: pointer;
-  margin-bottom: 60px;
-}
-
-.nav-list .w .sec-level li h2 span {
-  margin-right: 20px;
-}
-
-.nav-list .w .sec-level li a {
-  display: block;
-  font-size: 16px;
-  margin-bottom: 32px;
-  padding-left: 20px;
-  transition: all .3s ease;
-  position: relative;
-}
-
-.nav-list .w .sec-level li a::after {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  left: 20px;
-  height: 1px;
-  background-color: #fff;
-  bottom: 4px;
-  width: 0;
-}
-
-.nav-list .w .sec-level li a:hover {
-  padding-left: 35px;
-}
-
-.nav-list .w .sec-level li a:hover::after {
-  width: 10px;
-}
-
-.nav-list .w .sec-level::after {
-  content: '';
-  position: absolute;
-  z-index: 1;
-}
-
-.nav-list .line {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  height: 1px;
-  background-color: #fff;
-}
-
 .mobile-head {
   display: none;
   height: 0.55rem;
@@ -911,6 +779,51 @@ footer .copyright .nav li::after {
   background-color: #fff;
 }
 
+@media (max-width: 992px) {
+  footer {
+    margin-top: 0.5rem;
+    padding-top: 0.4rem;
+  }
+  footer .wrap .left {
+    float: none;
+  }
+  footer .wrap .right {
+    float: none;
+  }
+  footer .wrap .right .img {
+    margin-left: 0;
+    margin-right: 0.2rem;
+  }
+  footer .contact {
+    margin-bottom: 0.2rem;
+  }
+  footer .friendly {
+    display: none;
+    margin-top: 0.3rem;
+    border-bottom: none;
+  }
+  footer .friendly li {
+    margin-bottom: 0.05rem;
+  }
+  footer .copyright {
+    display: flex;
+    flex-direction: column-reverse;
+    flex-wrap: wrap;
+    margin-top: 0.2rem;
+  }
+  footer .copyright p {
+    float: none;
+    width: 100%;
+  }
+  footer .copyright .nav {
+    float: none;
+    width: 100%;
+    padding-bottom: 0.2rem;
+    margin-bottom: 0.15rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  }
+}
+
 html {
   font-size: 100px !important;
 }

web_html/src/scss/components/_footer.scss

@@ -77,4 +77,52 @@ footer {
             }
         }
     }
+}
+
+
+@media (max-width:992px) {
+    footer{
+        margin-top: 0.5rem;
+        padding-top: 0.4rem;
+        .wrap{
+            .left{
+                float: none;
+            }
+            .right{
+                float: none;
+                .img{
+                    margin-left: 0;
+                    margin-right: 0.2rem;
+                }
+            }
+        }
+        .contact{
+            margin-bottom: 0.2rem;
+        }
+        .friendly{
+            display: none;
+            margin-top: 0.3rem;
+            border-bottom: none;
+            li{
+                margin-bottom: 0.05rem;
+            }
+        }
+        .copyright{
+            display: flex;
+            flex-direction:column-reverse;
+            flex-wrap: wrap;
+            margin-top: 0.2rem;
+            p{
+                float: none;
+                width: 100%;
+            }
+            .nav{
+                float: none;
+                width: 100%;
+                padding-bottom: 0.2rem;
+                margin-bottom: 0.15rem;
+                border-bottom: 1px solid rgba(255,255,255,0.3);
+            }
+        }
+    }
 }

web_html/src/scss/components/_header.scss

@@ -120,137 +120,6 @@ header {
         }
     }
 }
-
-.nav-list {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: $color;
-    background: linear-gradient(145deg, $color 0%, $color2 100%);
-    z-index: 80;
-    display: none;
-    // opacity: 0;
-    transition: opacity .6s ease;
-    // position: relative;
-
-    &.active {
-        display: block;
-        opacity: 1;
-    }
-
-    .w {
-        .first-level {
-            padding-top: 20%;
-            @include clear();
-
-            li {
-                float: left;
-                font-size: 16px;
-                color: #fff;
-                margin-right: 80px;
-
-                a {
-                    display: block;
-                    position: relative;
-                    padding-left: 100px;
-                    transition: all .5s ease;
-
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        z-index: 1;
-                        left: 0;
-                        top: 50%;
-                        transform: translateY(-50%);
-                        transition: all .5s ease;
-                        width: 80px;
-                        background-color: #fff;
-                        height: 1px;
-                        transition: all .5s ease;
-                    }
-
-                    &:hover {
-                        padding-left: 80px;
-                        padding-right: 20px;
-
-                        &::after {
-                            width: 60px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .sec-level {
-            margin-top: 80px;
-            display: flex;
-            justify-content: space-between;
-            position: relative;
-
-            li {
-
-                color: #fff;
-
-                h2 {
-                    font-size: 24px;
-                    font-weight: 600;
-                    cursor: pointer;
-                    margin-bottom: 60px;
-
-                    span {
-                        margin-right: 20px;
-                    }
-                }
-
-                a {
-                    display: block;
-                    font-size: 16px;
-                    margin-bottom: 32px;
-                    padding-left: 20px;
-                    transition: all .3s ease;
-                    position: relative;
-
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        z-index: 1;
-                        left: 20px;
-                        height: 1px;
-                        background-color: #fff;
-                        bottom: 4px;
-                        width: 0;
-                    }
-
-                    &:hover {
-                        padding-left: 35px;
-
-                        &::after {
-                            width: 10px;
-                        }
-                    }
-                }
-            }
-
-            &::after {
-                content: '';
-                position: absolute;
-                z-index: 1;
-
-            }
-        }
-    }
-
-    .line {
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        height: 1px;
-        background-color: #fff;
-    }
-}
-
 .mobile-head {
     display: none;
     height: 0.55rem;