测测

assets/css/base.scss

@@ -0,0 +1,1067 @@
+body {
+  min-height: 100vh;
+  color: #272727;
+  font-family: 'Microsoft YaHei', SimSun, Arial, Helvetica, sans-serif;
+}
+
+input,
+textarea,
+select {
+  outline-color: #f3920d;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  font-size: 16px;
+}
+
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  padding: 0;
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+  color: #272727;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #cccecf;
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.fl {
+  float: left !important;
+}
+.fr {
+  float: right !important;
+}
+.clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+@-webkit-keyframes rowup-left {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(-600px, 0, 0);
+    transform: translate3d(-600px, 0, 0);
+  }
+}
+
+@keyframes rowup-left {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(-600px, 0, 0);
+    transform: translate3d(-600px, 0, 0);
+  }
+}
+@-webkit-keyframes rowup-right {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(600px, 0, 0);
+    transform: translate3d(600px, 0, 0);
+  }
+}
+@keyframes rowup-right {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(600px, 0, 0);
+    transform: translate3d(600px, 0, 0);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  html {
+    font-size: 16px !important;
+  }
+
+  .only-mobile {
+    display: none !important;
+  }
+
+  .container {
+    width: 1200px;
+    margin: 0 auto;
+  }
+
+  .mt18 {
+    margin-top: 18px;
+  }
+
+  .mr18 {
+    margin-right: 18px;
+  }
+
+  .mb18 {
+    margin-bottom: 18px;
+  }
+
+  .ml18 {
+    margin-left: 18px;
+  }
+
+  .section-title {
+    position: relative;
+    text-align: center;
+    height: 70px;
+    margin: 100px 0 60px;
+    img {
+      display: block;
+      height: 58px;
+      margin: 0 auto;
+    }
+    h3 {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      font-size: 41px;
+      font-weight: normal;
+      font-weight: bold;
+    }
+  }
+
+  .banner {
+    &.swiper-container {
+      width: 100%;
+      height: 700px;
+
+      .swiper-slide {
+        img {
+          display: block;
+          height: 100%;
+        }
+      }
+
+      .swiper-pagination-bullet {
+        width: 10px;
+        height: 10px;
+        background: #fff;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border: 1px solid #000;
+
+        &.swiper-pagination-bullet-active {
+          background: #000;
+        }
+      }
+    }
+
+    &.single {
+      width: 100%;
+      height: 530px;
+
+      img {
+        display: block;
+        height: 530px;
+      }
+    }
+  }
+
+  // 导航菜单
+  .navbar {
+    height: 90px;
+    background-color: #fff;
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: 90;
+    .container {
+      width: 100%;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      padding: 0 40px;
+      height: 90px;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .navbar-header {
+      .logo {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        h1 {
+          font-size: 0;
+        }
+        img {
+          display: block;
+          // width: 64px;
+          height: 42px;
+        }
+      }
+    }
+    .navbar-collapse {
+      .nav {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+
+        & > li {
+          margin-left: 116px;
+          position: relative;
+
+          &::after {
+            content: '';
+            display: none;
+            width: 28px;
+            height: 3px;
+            background: #f3920d;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+          }
+
+          &.active {
+            & > a {
+              color: #f3920d;
+            }
+            &::after {
+              display: block;
+            }
+          }
+
+          &:hover {
+            & > a {
+              color: #f3920d;
+            }
+            &::after {
+              display: block;
+            }
+          }
+
+          &:first-child {
+            margin-left: 0;
+          }
+          & > a {
+            height: 66px;
+            display: block;
+            span {
+              display: block;
+              text-align: center;
+
+              &:first-child {
+                font-size: 28px;
+              }
+
+              &:last-child {
+                font-size: 20px;
+                margin-top: 2px;
+              }
+            }
+          }
+        }
+
+        .dropdown {
+          position: relative;
+
+          &:hover {
+            .dropdown-menu {
+              display: block;
+            }
+          }
+
+          .dropdown-menu {
+            display: none;
+            top: 66px;
+            position: absolute;
+            background: #fff;
+            left: 50%;
+            -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+
+            & > li {
+              &:hover {
+                background: #f3920d;
+                & > a {
+                  color: #fff;
+                }
+                .dropdown-submenu {
+                  display: block;
+                }
+              }
+
+              & > a {
+                display: block;
+                line-height: 50px;
+                text-align: center;
+                width: 128px;
+                font-size: 20px;
+              }
+            }
+
+            .submenu-toggle {
+              background: url(/img/icon-arrow-right.png) no-repeat;
+              background-position: 98% center;
+              background-size: 18px;
+            }
+
+            .dropdown-submenu {
+              display: none;
+              position: absolute;
+              top: 0;
+              left: 128px;
+              background: #fff;
+              width: 220px;
+              min-height: 200px;
+              -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+              // padding: 16px 24px 16px 23px;
+              padding: 10px 24px;
+              border-left: 1px solid #e8e8e8;
+
+              & > li {
+                // float: left;
+                // &:nth-child(2n) {
+                //   margin-right: 0;
+                // }
+
+                // &:nth-child(1),
+                // &:nth-child(2) {
+                //   margin-top: 0;
+                // }
+                margin: 9px 0;
+
+                & > a {
+                  display: block;
+                  line-height: 32px;
+                  text-align: center;
+                  background: #eee;
+                  color: #000;
+                  font-size: 14px;
+
+                  &:hover {
+                    color: #f3920d;
+                    background-color: rgba(243, 146, 13, 0.3);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 底部区域
+  .footer {
+    margin-top: 120px;
+    padding-top: 42px;
+    background: #1b1b1b;
+
+    .container {
+      width: 1650px;
+      .section {
+        margin-right: 34px;
+        float: left;
+
+        .logo {
+          img {
+            &:first-child {
+              width: 188px;
+            }
+
+            &:last-child {
+              width: 136px;
+              margin-left: 30px;
+            }
+          }
+        }
+
+        .item {
+          position: relative;
+          margin-top: 20px;
+          padding-left: 44px;
+          font-size: 25px;
+          color: #fff;
+          font-weight: lighter;
+
+          &::before {
+            content: '';
+            display: block;
+            width: 27px;
+            height: 27px;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 27px;
+          }
+
+          &.mobile {
+            &::before {
+              background-image: url(/img/icon-mobile.png);
+            }
+            span {
+              &:last-child {
+                margin-left: 16px;
+              }
+            }
+          }
+
+          &.email {
+            &::before {
+              background-image: url(/img/icon-email.png);
+            }
+          }
+
+          &.address {
+            &::before {
+              background-image: url(/img/icon-address.png);
+            }
+          }
+
+          &.contact {
+            &::before {
+              background-image: url(/img/icon-contact.png);
+            }
+          }
+
+          &.site {
+            &::before {
+              background-image: url(/img/icon-site.png);
+            }
+          }
+        }
+      }
+
+      .nav {
+        margin-left: 86px;
+        float: left;
+
+        li {
+          text-align: left;
+          margin-top: 14px;
+          &:first-child {
+            margin-top: 12px;
+          }
+          a {
+            font-size: 20px;
+            font-weight: lighter;
+            color: #fff;
+            text-transform: uppercase;
+            &:hover {
+              color: #f3920d;
+            }
+          }
+        }
+      }
+
+      .qrcode-content {
+        float: right;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+        margin-top: 80px;
+        .qrcode {
+          width: 150px;
+          text-align: center;
+          margin-left: 25px;
+          img {
+            width: 119px;
+            height: 119px;
+            background-color: #fff;
+          }
+          .tip {
+            font-size: 25px;
+            color: #ffffff;
+            margin-top: 11px;
+            text-align: center;
+            font-weight: lighter;
+          }
+        }
+      }
+    }
+
+    .line {
+      width: 1784px;
+      margin: 0 auto;
+      height: 1px;
+      background-color: #fff;
+      margin-top: 40px;
+    }
+
+    .link {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      i {
+        display: block;
+        height: 10px;
+        width: 1px;
+        background-color: rgba(255, 255, 255, 0.4);
+        margin: 0 16px;
+      }
+      a {
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 12px;
+        &:hover {
+          color: #f3920d;
+        }
+      }
+    }
+
+    .copyright {
+      text-align: center;
+      color: #bebebe;
+      font-size: 22px;
+      font-weight: lighter;
+      line-height: 64px;
+      a {
+        // color: rgba(255, 255, 255, 0.8);
+        color: #fff;
+        text-decoration: underline;
+      }
+      * {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 50px;
+  }
+
+  .only-pc {
+    display: none !important;
+  }
+
+  .scroll-box {
+    overflow-x: auto;
+    white-space: nowrap;
+    font-size: 0;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      display: none;
+    }
+  }
+
+  .section-title {
+    position: relative;
+    text-align: center;
+    height: 0.64rem;
+    margin: 1rem 0 0.65rem;
+    img {
+      display: block;
+      height: 0.58rem;
+      margin: 0 auto;
+    }
+    h3 {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      font-size: 0.34rem;
+      font-weight: bold;
+    }
+  }
+
+  .banner {
+    &.swiper-container {
+      width: 7.5rem;
+      height: 2.74rem;
+
+      .swiper-slide {
+        img {
+          display: block;
+          width: 7.5rem;
+          height: 2.74rem;
+        }
+      }
+
+      .swiper-pagination {
+        bottom: 0;
+
+        .swiper-pagination-bullet {
+          width: 0.1rem;
+          height: 0.1rem;
+          background: #fff;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          border: 0.01rem solid #000;
+
+          &.swiper-pagination-bullet-active {
+            background: #000;
+          }
+        }
+      }
+    }
+
+    &.single {
+      width: 100%;
+      height: 2.08rem;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 2.08rem;
+      }
+    }
+  }
+
+  // 导航菜单
+  .navbar {
+    font-size: 0.26rem;
+    height: 1.04rem;
+    background: #fff;
+    // overflow-x: hidden;
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: 90;
+
+    .navbar-header {
+      position: relative;
+      z-index: 2;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      background: #fff;
+
+      .logo {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        width: 2rem;
+        height: 1.04rem;
+        background: #f3920d;
+        h1 {
+          font-size: 0;
+        }
+        img {
+          display: block;
+          width: 1.78rem;
+        }
+      }
+
+      .navbar-toggle {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        .name {
+          font-size: 0.3rem;
+          color: #f3920d;
+          margin-right: 0.16rem;
+        }
+        .icon-bar {
+          display: inline-block;
+          width: 0.48rem;
+          height: 0.48rem;
+          background: url(/img/icon-menu.png) no-repeat center;
+          background-size: 0.42rem;
+          font-size: 0;
+          margin-right: 0.32rem;
+          margin-bottom: 0.03rem;
+        }
+        &[aria-expanded='true'] {
+          .icon-bar {
+            background-image: url(/img/icon-menu-close.png);
+            background-size: 0.48rem;
+          }
+          .name {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .navbar-collapse {
+      display: none;
+      position: absolute;
+      width: 100%;
+      height: 100vh;
+      overflow-y: auto;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      padding-left: 1.34rem;
+      right: 0;
+      top: 0;
+      z-index: 1;
+      background-color: transparent;
+      -webkit-transition: background-color 0.2s;
+      transition: background-color 0.2s;
+
+      &::-webkit-scrollbar {
+        width: 2px;
+        height: 2px;
+        background-color: #f5f5f5;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        background-color: #cccecf;
+      }
+
+      .nav {
+        background: #fff;
+        padding: 0.48rem;
+        padding-top: 1.04rem;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        min-height: 100vh;
+
+        li {
+          a {
+            display: block;
+          }
+        }
+
+        & > li {
+          border-top: 0.01rem solid #d8d8d8;
+          border-bottom: 0.01rem solid #d8d8d8;
+          & > a {
+            font-size: 0.3rem;
+            line-height: 1rem;
+
+            span {
+              &:last-child {
+                display: none;
+              }
+            }
+          }
+        }
+        .dropdown {
+          .dropdown-toggle {
+            background-image: url(/img/icon-menu-arrow-down.png);
+            background-position: right center;
+            background-size: 0.48rem;
+            background-repeat: no-repeat;
+          }
+
+          &.open {
+            .dropdown-toggle {
+              background-image: url(/img/icon-menu-arrow-up.png);
+            }
+          }
+
+          .dropdown-menu {
+            display: none;
+            padding-bottom: 0.24rem;
+            & > li {
+              & > a {
+                line-height: 0.66rem;
+                color: #666666;
+              }
+            }
+          }
+
+          .dropdown-submenu {
+            padding: 0.24rem 0;
+
+            li {
+              float: left;
+              margin-right: 0.4rem;
+              margin-top: 0.24rem;
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+              &:nth-child(-n + 2) {
+                margin-top: 0;
+              }
+              a {
+                line-height: 0.56rem;
+                width: 2.08rem;
+                height: 0.56rem;
+                background: #f7f7f7;
+                text-align: center;
+                color: #666666;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 底部区域
+  .footer {
+    position: relative;
+    background: #050001;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-top: 1rem;
+
+    .container {
+      width: 6.86rem;
+      margin: 0 auto;
+      position: relative;
+
+      .logo {
+        img {
+          &:first-child {
+            width: 1.88rem;
+          }
+
+          &:last-child {
+            width: 1.36rem;
+          }
+        }
+      }
+
+      .title {
+        font-size: 0.3rem;
+        color: #fff;
+        margin-top: 0.46rem;
+      }
+
+      .section {
+        opacity: 0.8;
+        width: 100%;
+        padding: 0.32rem 0;
+        margin-top: 3.8rem;
+        border: 0.01rem solid #fff;
+        border-left: 0;
+        border-right: 0;
+        border-bottom-color: rgba(255, 255, 255, 0.3);
+        .item {
+          position: relative;
+          margin-top: 0.25rem;
+          padding-left: 0.6rem;
+          font-size: 0.24rem;
+          color: #fff;
+
+          &:nth-child(2) {
+            margin-top: 0;
+          }
+
+          &::before {
+            content: '';
+            display: block;
+            width: 0.4rem;
+            height: 0.4rem;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 0.4rem;
+          }
+
+          &.mobile {
+            &::before {
+              background-image: url(/img/icon-mobile.png);
+            }
+            span {
+              &:last-child {
+                margin-left: 0.4rem;
+              }
+            }
+          }
+
+          &.email {
+            &::before {
+              background-image: url(/img/icon-email.png);
+            }
+          }
+
+          &.address {
+            &::before {
+              background-image: url(/img/icon-address.png);
+            }
+          }
+
+          &.contact {
+            &::before {
+              background-image: url(/img/icon-contact.png);
+            }
+          }
+
+          &.site {
+            &::before {
+              background-image: url(/img/icon-site.png);
+            }
+          }
+        }
+      }
+
+      .nav {
+        opacity: 0.8;
+        position: absolute;
+        top: 2.11rem;
+
+        &.first {
+          left: 0;
+        }
+
+        &.second {
+          left: 3.91rem;
+        }
+        li {
+          margin-top: 0.24rem;
+          a {
+            display: block;
+            font-size: 0.24rem;
+            color: #fff;
+          }
+        }
+      }
+
+      .qrcode-content {
+        position: absolute;
+        right: 0;
+        bottom: -2.04rem;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+
+        .qrcode {
+          &:first-child {
+            margin-right: 0.16rem;
+          }
+          img {
+            display: block;
+            width: 1.19rem;
+            height: 1.19rem;
+            background-color: #fff;
+          }
+          .tip {
+            font-size: 0.2rem;
+            color: #ffffff;
+            margin-top: 0.16rem;
+            text-align: center;
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+
+    .copyright {
+      width: 100%;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      text-align: left;
+      color: #fff;
+      font-size: 0.2rem;
+      padding: 0.4rem;
+      opacity: 0.8;
+      a {
+        width: 4.2rem;
+        color: #fff;
+      }
+      * {
+        display: block;
+        margin-bottom: 0.16rem;
+      }
+    }
+  }
+}