官网静态页面

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "compile-hero.disable-compile-files-on-did-save-code": false,
+  "compile-hero.scss-output-directory": "./"
+}

css/base.css

@@ -0,0 +1,263 @@
+body {
+  min-height: 100vh;
+  font-size: 16px;
+  color: #272727;
+  font-family: "Microsoft YaHei", SimSun, Arial, Helvetica, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  font-size: 16px;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  padding: 0;
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+  color: #272727;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #cccecf;
+}
+
+.container {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fl {
+  float: left !important;
+}
+
+.fr {
+  float: right !important;
+}
+
+.clearfix::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.mt18 {
+  margin-top: 18px;
+}
+
+.mr18 {
+  margin-right: 18px;
+}
+
+.mb18 {
+  margin-bottom: 18px;
+}
+
+.ml18 {
+  margin-left: 18px;
+}
+
+.section-title {
+  position: relative;
+  text-align: center;
+  height: 66px;
+}
+.section-title img {
+  display: block;
+  height: 50px;
+  margin: 0 auto;
+}
+.section-title h3 {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: 34px;
+  font-weight: normal;
+}
+
+.header {
+  position: sticky;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  background-color: #fff;
+}
+.header .logo h1 {
+  font-size: 0;
+}
+.header .logo img {
+  display: block;
+  height: 42px;
+}
+.header .nav {
+  display: flex;
+  align-items: center;
+  height: 68px;
+}
+.header .nav li {
+  position: relative;
+  height: 100%;
+  margin-left: 56px;
+}
+.header .nav li:hover::after {
+  opacity: 1;
+}
+.header .nav li:hover a {
+  color: #0688d2;
+}
+.header .nav li:first-child {
+  margin-left: 0;
+}
+.header .nav li::after {
+  content: "";
+  opacity: 0;
+  width: 100%;
+  height: 3px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-color: #0688d2;
+  transition: all 0.2s;
+}
+.header .nav li.active::after {
+  opacity: 1;
+}
+.header .nav li.active a {
+  color: #0688d2;
+}
+.header .nav li a {
+  display: block;
+  line-height: 68px;
+  transition: all 0.2s;
+}
+
+.footer {
+  margin-top: 120px;
+  padding-top: 38px;
+  padding-bottom: 24px;
+  background: #1b1b1b;
+}
+.footer .container .section {
+  margin-right: 180px;
+}
+.footer .container .section .item {
+  position: relative;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 20px;
+  padding-left: 30px;
+  font-size: 12px;
+}
+.footer .container .section .item::before {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.footer .container .section .item.mobile span:last-child {
+  margin-left: 16px;
+}
+.footer .container .nav {
+  margin-left: 110px;
+}
+.footer .container .nav li {
+  margin-top: 25px;
+  text-align: center;
+}
+.footer .container .nav li:first-child {
+  margin-top: 12px;
+}
+.footer .container .nav li a {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+}
+.footer .container .nav li a:hover {
+  color: #0688d2;
+}
+.footer .container .qrcode {
+  padding: 7px;
+  background: rgba(255, 255, 255, 0.06);
+}
+.footer .container .qrcode img {
+  display: block;
+  width: 94px;
+  height: 94px;
+  background-color: #fff;
+}
+.footer .container .qrcode .tip {
+  font-size: 12px;
+  color: #ffffff;
+  margin-top: 5px;
+  text-align: center;
+}
+.footer .line {
+  width: 100%;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin: 32px 0 24px;
+}
+.footer .link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.footer .link i {
+  display: block;
+  height: 10px;
+  width: 1px;
+  background-color: rgba(255, 255, 255, 0.4);
+  margin: 0 16px;
+}
+.footer .link a {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 12px;
+}
+.footer .link a:hover {
+  color: #0688d2;
+}
+.footer .copyright {
+  margin-top: 20px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 12px;
+}
+.footer .copyright a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: underline;
+}
+.footer .copyright * {
+  margin: 0 24px;
+}

css/base.scss

@@ -0,0 +1,284 @@
+body {
+  min-height: 100vh;
+  font-size: 16px;
+  color: #272727;
+  font-family: 'Microsoft YaHei', SimSun, Arial, Helvetica, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  font-size: 16px;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  padding: 0;
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+  color: #272727;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #cccecf;
+}
+
+.container {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fl {
+  float: left !important;
+}
+.fr {
+  float: right !important;
+}
+.clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.mt18 {
+  margin-top: 18px;
+}
+
+.mr18 {
+  margin-right: 18px;
+}
+
+.mb18 {
+  margin-bottom: 18px;
+}
+
+.ml18 {
+  margin-left: 18px;
+}
+
+.section-title {
+  position: relative;
+  text-align: center;
+  height: 66px;
+  img {
+    display: block;
+    height: 50px;
+    margin: 0 auto;
+  }
+  h3 {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    font-size: 34px;
+    font-weight: normal;
+  }
+}
+
+// 导航菜单
+.header {
+  position: sticky;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  background-color: #fff;
+  .logo {
+    h1 {
+      font-size: 0;
+    }
+    img {
+      display: block;
+      height: 42px;
+    }
+  }
+  .nav {
+    display: flex;
+    align-items: center;
+    height: 68px;
+    li {
+      position: relative;
+      height: 100%;
+      margin-left: 56px;
+      &:hover {
+        &::after {
+          opacity: 1;
+        }
+        a {
+          color: #0688d2;
+        }
+      }
+      &:first-child {
+        margin-left: 0;
+      }
+      &::after {
+        content: '';
+        opacity: 0;
+        width: 100%;
+        height: 3px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        background-color: #0688d2;
+        transition: all .2s;
+      }
+      &.active {
+        &::after {
+          opacity: 1;
+        }
+        a {
+          color: #0688d2;
+        }
+      }
+      a {
+        display: block;
+        line-height: 68px;
+        transition: all .2s;
+      }
+    }
+  }
+}
+
+// 底部区域
+.footer {
+  margin-top: 120px;
+  padding-top: 38px;
+  padding-bottom: 24px;
+  background: #1b1b1b;
+
+  .container {
+    .section {
+      margin-right: 180px;
+      .item {
+        position: relative;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 20px;
+        padding-left: 30px;
+        font-size: 12px;
+
+        &::before {
+          content: '';
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #fff;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        &.mobile {
+          span {
+            &:last-child {
+              margin-left: 16px;
+            }
+          }
+        }
+      }
+    }
+
+    .nav {
+      margin-left: 110px;
+      li {
+        margin-top: 25px;
+        text-align: center;
+        &:first-child {
+          margin-top: 12px;
+        }
+        a {
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.5);
+
+          &:hover {
+            color: #0688d2;
+          }
+        }
+      }
+    }
+
+    .qrcode {
+      padding: 7px;
+      background: rgba(255, 255, 255, 0.06);
+      img {
+        display: block;
+        width: 94px;
+        height: 94px;
+        background-color: #fff;
+      }
+      .tip {
+        font-size: 12px;
+        color: #ffffff;
+        margin-top: 5px;
+        text-align: center;
+      }
+    }
+  }
+
+  .line {
+    width: 100%;
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.3);
+    margin: 32px 0 24px;
+  }
+
+  .link {
+    display: flex;
+    justify-content: 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: #0688d2;
+      }
+    }
+  }
+
+  .copyright {
+    margin-top: 20px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.4);
+    font-size: 12px;
+    a {
+      color: rgba(255, 255, 255, 0.8);
+      text-decoration: underline;
+    }
+    * {
+      margin: 0 24px;
+    }
+  }
+}

css/index.css

@@ -0,0 +1,316 @@
+@charset "UTF-8";
+/* scss中可以用mixin来扩展 */
+.banner {
+  width: 100%;
+  height: 700px;
+}
+.banner img {
+  display: block;
+  height: 100%;
+}
+
+.main .container {
+  margin-top: 120px;
+}
+.main .container .section-title {
+  margin-bottom: 80px;
+}
+.main .container.our-brand .content .item {
+  position: relative;
+  width: 286px;
+  height: 286px;
+  float: left;
+  background-color: #ddd;
+}
+.main .container.our-brand .content .item:first-child {
+  width: 592px;
+  height: 592px;
+}
+.main .container.our-brand .content .item img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.main .container.our-brand .content .item:hover .active {
+  opacity: 1;
+}
+.main .container.our-brand .content .item .active {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.4s;
+}
+.main .container.our-brand .content .item .active .title {
+  font-size: 34px;
+  color: #fff;
+}
+.main .container.our-brand .content .item .active .line {
+  width: 40px;
+  height: 1px;
+  margin: 32px 0 60px;
+  background-color: #fff;
+}
+.main .container.our-brand .content .item .active .link {
+  width: 160px;
+  height: 48px;
+  border: 1px solid #ffffff;
+  text-align: center;
+  line-height: 48px;
+  color: #fff;
+  cursor: pointer;
+}
+.main .container.brand-activity .content {
+  display: flex;
+  justify-content: center;
+}
+.main .container.brand-activity .content .item {
+  position: relative;
+  width: 280px;
+  height: 600px;
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: all 0.4s;
+}
+.main .container.brand-activity .content .item a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.main .container.brand-activity .content .item img {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: block;
+  width: 640px;
+  height: 600px;
+}
+.main .container.brand-activity .content .item.hover {
+  width: 640px;
+}
+.main .container.brand-activity .content .item:nth-child(1) .cover::after {
+  content: "01";
+}
+.main .container.brand-activity .content .item:nth-child(2) .cover::after {
+  content: "02";
+}
+.main .container.brand-activity .content .item:nth-child(3) .cover::after {
+  content: "03";
+}
+.main .container.brand-activity .content .item .active {
+  position: absolute;
+  width: 100%;
+  height: 280px;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  padding-left: 24px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
+}
+.main .container.brand-activity .content .item .active .title {
+  margin-top: 206px;
+  width: 232px;
+  font-size: 24px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.main .container.brand-activity .content .item .active .line {
+  width: 20px;
+  height: 2px;
+  margin-top: 16px;
+  background-color: #fff;
+}
+.main .container.brand-activity .content .item .active .description {
+  display: none;
+}
+.main .container.brand-activity .content .item .active::after {
+  position: absolute;
+  content: "01";
+  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 30px;
+  left: 24px;
+  bottom: 66px;
+}
+.main .container.brand-activity .content .item .hover-active {
+  position: absolute;
+  width: 486px;
+  height: 160px;
+  padding-top: 32px;
+  padding-left: 32px;
+  box-sizing: border-box;
+  border-top-left-radius: 32px;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+  transition: opacity 0.4s;
+}
+.main .container.brand-activity .content .item .hover-active .title {
+  font-size: 24px;
+  color: #fff;
+  width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.main .container.brand-activity .content .item .hover-active .line {
+  width: 20px;
+  height: 2px;
+  margin: 16px 0 22px;
+  background-color: #fff;
+}
+.main .container.brand-activity .content .item .hover-active .description {
+  text-align: justify;
+  width: 300px;
+  font-size: 16px;
+  color: #fff;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.main .container.brand-activity .content .item .hover-active::after {
+  position: absolute;
+  content: "01";
+  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 90px;
+  line-height: 90px;
+  right: 32px;
+  bottom: 24px;
+}
+.main .container.company-values .content .item {
+  position: relative;
+  float: left;
+  height: 340px;
+  width: 390px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.main .container.company-values .content .item img {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transition: all 0.4s;
+}
+.main .container.company-values .content .item.no-mb {
+  margin-bottom: 0;
+}
+.main .container.company-values .content .item.no-mr {
+  margin-right: 0;
+}
+.main .container.company-values .content .item:nth-child(1), .main .container.company-values .content .item:nth-child(7) {
+  width: 795px;
+}
+.main .container.company-values .content .item:hover img {
+  transform: scale(1.2);
+}
+.main .container.company-values .content .item:nth-child(2) .cover, .main .container.company-values .content .item:nth-child(3) .cover, .main .container.company-values .content .item:nth-child(7) .cover {
+  background: transparent;
+}
+.main .container.company-values .content .item:nth-child(2):hover, .main .container.company-values .content .item:nth-child(3):hover, .main .container.company-values .content .item:nth-child(7):hover {
+  border: 1px solid #0688d2;
+}
+.main .container.company-values .content .item:nth-child(2):hover img, .main .container.company-values .content .item:nth-child(3):hover img, .main .container.company-values .content .item:nth-child(7):hover img {
+  opacity: 0;
+}
+.main .container.company-values .content .item:nth-child(2):hover .subtitle,
+.main .container.company-values .content .item:nth-child(2):hover .title, .main .container.company-values .content .item:nth-child(3):hover .subtitle,
+.main .container.company-values .content .item:nth-child(3):hover .title, .main .container.company-values .content .item:nth-child(7):hover .subtitle,
+.main .container.company-values .content .item:nth-child(7):hover .title {
+  color: #0688d2;
+}
+.main .container.company-values .content .item:nth-child(2):hover .line::before, .main .container.company-values .content .item:nth-child(2):hover .line::after, .main .container.company-values .content .item:nth-child(3):hover .line::before, .main .container.company-values .content .item:nth-child(3):hover .line::after, .main .container.company-values .content .item:nth-child(7):hover .line::before, .main .container.company-values .content .item:nth-child(7):hover .line::after {
+  background-color: #0688d2;
+}
+.main .container.company-values .content .item .cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+}
+.main .container.company-values .content .item .cover .line {
+  width: 180px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotateZ(-45deg);
+}
+.main .container.company-values .content .item .cover .line::after, .main .container.company-values .content .item .cover .line::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: "";
+  display: block;
+  width: 20px;
+  height: 1px;
+  background-color: #fff;
+}
+.main .container.company-values .content .item .cover .line::before {
+  right: 0;
+  left: unset;
+}
+.main .container.company-values .content .item .cover .title {
+  color: #fff;
+  font-size: 24px;
+}
+.main .container.company-values .content .item .cover .subtitle {
+  font-size: 18px;
+  color: #fff;
+  margin-top: 12px;
+}
+.main .container.company-values .content .item .cover .subtitle.en {
+  text-transform: uppercase;
+}
+.main .container.friendly_link .content .item {
+  float: left;
+  position: relative;
+  width: 230px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid #d8d8d8;
+  overflow: hidden;
+  margin-right: 12px;
+  margin-top: 20px;
+}
+.main .container.friendly_link .content .item:nth-child(5n) {
+  margin-right: 0;
+}
+.main .container.friendly_link .content .item:nth-child(-n+5) {
+  margin-top: 0;
+}
+.main .container.friendly_link .content .item img {
+  display: block;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}

css/index.scss

@@ -0,0 +1,393 @@
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
+// 轮播图
+.banner {
+  width: 100%;
+  height: 700px;
+
+  img {
+    display: block;
+    height: 100%;
+  }
+}
+
+.main {
+  .container {
+    margin-top: 120px;
+    .section-title {
+      margin-bottom: 80px;
+    }
+
+    &.our-brand {
+      .content {
+        .item {
+          position: relative;
+          width: 286px;
+          height: 286px;
+          float: left;
+          background-color: #ddd;
+
+          &:first-child {
+            width: 592px;
+            height: 592px;
+          }
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+
+          &:hover {
+            .active {
+              opacity: 1;
+            }
+          }
+
+          .active {
+            opacity: 0;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            background-color: rgba(0, 0, 0, 0.5);
+            transition: opacity 0.4s;
+
+            .title {
+              font-size: 34px;
+              color: #fff;
+            }
+            .line {
+              width: 40px;
+              height: 1px;
+              margin: 32px 0 60px;
+              background-color: #fff;
+            }
+            .link {
+              width: 160px;
+              height: 48px;
+              border: 1px solid #ffffff;
+              text-align: center;
+              line-height: 48px;
+              color: #fff;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+
+    &.brand-activity {
+      .content {
+        display: flex;
+        justify-content: center;
+
+        .item {
+          position: relative;
+
+          width: 280px;
+          height: 600px;
+          overflow: hidden;
+          flex-shrink: 0;
+          transition: all 0.4s;
+
+          a {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+
+          img {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            display: block;
+            width: 640px;
+            height: 600px;
+          }
+
+          &.hover {
+            width: 640px;
+          }
+
+          &:nth-child(1) {
+            .cover {
+              &::after {
+                content: '01';
+              }
+            }
+          }
+
+          &:nth-child(2) {
+            .cover {
+              &::after {
+                content: '02';
+              }
+            }
+          }
+
+          &:nth-child(3) {
+            .cover {
+              &::after {
+                content: '03';
+              }
+            }
+          }
+
+          .active {
+            position: absolute;
+            width: 100%;
+            height: 280px;
+            bottom: 0;
+            left: 0;
+            box-sizing: border-box;
+            padding-left: 24px;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
+            .title {
+              margin-top: 206px;
+              width: 232px;
+              font-size: 24px;
+              color: #fff;
+              @include ellipsis(1);
+            }
+            .line {
+              width: 20px;
+              height: 2px;
+              margin-top: 16px;
+              background-color: #fff;
+            }
+            .description {
+              display: none;
+            }
+
+            &::after {
+              position: absolute;
+              content: '01';
+              background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
+              -webkit-background-clip: text;
+              color: transparent;
+              font-size: 30px;
+              left: 24px;
+              bottom: 66px;
+            }
+          }
+
+          .hover-active {
+            position: absolute;
+            width: 486px;
+            height: 160px;
+            padding-top: 32px;
+            padding-left: 32px;
+            box-sizing: border-box;
+            border-top-left-radius: 32px;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+            transition: opacity 0.4s;
+            .title {
+              font-size: 24px;
+              color: #fff;
+              width: 300px;
+              @include ellipsis(1);
+            }
+            .line {
+              width: 20px;
+              height: 2px;
+              margin: 16px 0 22px;
+              background-color: #fff;
+            }
+            .description {
+              text-align: justify;
+              width: 300px;
+              font-size: 16px;
+              color: #fff;
+              line-height: 1.5;
+              @include ellipsis(2);
+            }
+
+            &::after {
+              position: absolute;
+              content: '01';
+              background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
+              -webkit-background-clip: text;
+              color: transparent;
+              font-size: 90px;
+              line-height: 90px;
+              right: 32px;
+              bottom: 24px;
+            }
+          }
+        }
+      }
+    }
+
+    &.company-values {
+      .content {
+        .item {
+          position: relative;
+          float: left;
+          height: 340px;
+          width: 390px;
+          margin-right: 15px;
+          margin-bottom: 15px;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          img {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            transition: all 0.4s;
+          }
+
+          &.no-mb {
+            margin-bottom: 0;
+          }
+
+          &.no-mr {
+            margin-right: 0;
+          }
+
+          &:nth-child(1),
+          &:nth-child(7) {
+            width: 795px;
+          }
+
+          &:hover {
+            img {
+              transform: scale(1.2);
+            }
+          }
+          &:nth-child(2),
+          &:nth-child(3),
+          &:nth-child(7) {
+            .cover {
+              background: transparent;
+            }
+
+            &:hover {
+              border: 1px solid #0688d2;
+              img {
+                opacity: 0;
+              }
+
+              .subtitle,
+              .title {
+                color: #0688d2;
+              }
+
+              .line {
+                &::before,
+                &::after {
+                  background-color: #0688d2;
+                }
+              }
+            }
+          }
+
+          .cover {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.5);
+
+            .line {
+              width: 180px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%) rotateZ(-45deg);
+
+              &::after,
+              &::before {
+                position: absolute;
+                left: 0;
+                top: 0;
+                content: '';
+                display: block;
+                width: 20px;
+                height: 1px;
+                background-color: #fff;
+              }
+
+              &::before {
+                right: 0;
+                left: unset;
+              }
+            }
+
+            .title {
+              color: #fff;
+              font-size: 24px;
+            }
+
+            .subtitle {
+              font-size: 18px;
+              color: #fff;
+              margin-top: 12px;
+              &.en {
+                text-transform: uppercase;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.head_quarter {
+    }
+
+    &.friendly_link {
+      .content {
+        .item {
+          float: left;
+          position: relative;
+          width: 230px;
+          height: 100px;
+          box-sizing: border-box;
+          border: 1px solid #d8d8d8;
+          overflow: hidden;
+          margin-right: 12px;
+          margin-top: 20px;
+
+          &:nth-child(5n) {
+            margin-right: 0;
+          }
+
+          &:nth-child(-n + 5) {
+            margin-top: 0;
+          }
+
+          img {
+            display: block;
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+      }
+    }
+  }
+}

css/normalize.css

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

index.html

@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>首页-艾斯佰丽官网</title>
+    <link rel="stylesheet" href="./css/normalize.css" />
+    <link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+    <link rel="stylesheet" href="./css/base.css" />
+    <link rel="stylesheet" href="./css/index.css" />
+  </head>
+  <body>
+    <!-- 顶部导航栏 start -->
+    <div class="header">
+      <div class="container flex">
+        <div class="logo">
+          <h1>艾斯佰丽</h1>
+          <img src="./img/logo.png" alt="艾斯佰丽" />
+        </div>
+        <ul class="nav">
+          <li class="active"><a href="#">首页</a></li>
+          <li><a href="#">艾斯佰丽</a></li>
+          <li><a href="#">品牌中心</a></li>
+          <li><a href="#">合作加盟</a></li>
+          <li><a href="#">新闻动态</a></li>
+          <li><a href="#">联系我们</a></li>
+        </ul>
+      </div>
+    </div>
+    <!-- 顶部导航栏 end -->
+
+    <!-- banner区域 start -->
+    <div class="swiper-container banner" id="banner">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <img src="./img/banner1.png" alt="" />
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+    </div>
+    <!-- banner区域 end -->
+
+    <!-- 内容区域 start -->
+    <div class="main">
+      <div class="container our-brand">
+        <div class="section-title">
+          <img src="./img/title_our_brand.png" alt="" />
+          <h3>我们的品牌</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="item mr18">
+            <img src="./img/our-brand-01.png" alt="" />
+            <div class="active">
+              <div class="title">Diactivplvs</div>
+              <div class="line"></div>
+              <div class="link">查看品牌</div>
+            </div>
+          </div>
+          <div class="item mr18 mb18">
+            <img src="./img/our-brand-02.png" alt="" />
+            <div class="active">
+              <div class="title">Diactivplvs</div>
+              <div class="line"></div>
+              <div class="link">查看品牌</div>
+            </div>
+          </div>
+          <div class="item mb18">
+            <img src="./img/our-brand-03.png" alt="" />
+            <div class="active">
+              <div class="title">Diactivplvs</div>
+              <div class="line"></div>
+              <div class="link">查看品牌</div>
+            </div>
+          </div>
+          <div class="item mr18">
+            <img src="./img/our-brand-04.png" alt="" />
+            <div class="active">
+              <div class="title">Diactivplvs</div>
+              <div class="line"></div>
+              <div class="link">查看品牌</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="./img/our-brand-05.png" alt="" />
+            <div class="active">
+              <div class="title">Diactivplvs</div>
+              <div class="line"></div>
+              <div class="link">查看品牌</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="container brand-activity">
+        <div class="section-title">
+          <img src="./img/title_brand_activities.png" alt="" />
+          <h3>品牌活动</h3>
+        </div>
+        <div class="content" id="activity">
+          <div class="item hover">
+            <a href="#">
+              <img src="./img/brand_activity_01.png" alt="" />
+              <div class="cover hover-active">
+                <div class="title">品牌活动标题</div>
+                <div class="line"></div>
+                <div class="description">这里是品牌活动说明，这里是品牌活动说明</div>
+              </div>
+            </a>
+          </div>
+          <div class="item">
+            <a href="#">
+              <img src="./img/brand_activity_01.png" alt="" />
+              <div class="cover active">
+                <div class="title">品牌活动标题</div>
+                <div class="line"></div>
+                <div class="description">这里是品牌活动说明，这里是品牌活动说明</div>
+              </div>
+            </a>
+          </div>
+          <div class="item">
+            <a href="#">
+              <img src="./img/brand_activity_01.png" alt="" />
+              <div class="cover active">
+                <div class="title">品牌活动标题</div>
+                <div class="line"></div>
+                <div class="description">这里是品牌活动说明，这里是品牌活动说明</div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="container company-values">
+        <div class="section-title">
+          <img src="./img/title_company_values.png" alt="" />
+          <h3>公司价值观</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="item">
+            <img src="./img/company_values_01.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">团队风采</div>
+              <div class="subtitle en">Team style​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="item no-mr">
+            <img src="./img/company_values_03.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">团队合作</div>
+              <div class="subtitle en">TEAMWORK​​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="./img/company_values_03.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">诚信</div>
+              <div class="subtitle en">SINCERITY​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="./img/company_values_04.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">专业</div>
+              <div class="subtitle en">profession​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="item no-mr">
+            <img src="./img/company_values_05.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">责任</div>
+              <div class="subtitle en">responsibility​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="item no-mb">
+            <img src="./img/company_values_06.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">发展</div>
+              <div class="subtitle en">development​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="item no-mr no-mb">
+            <img src="./img/company_values_07.png" alt="团队风采" />
+            <div class="cover">
+              <div class="title">创造美丽人生</div>
+              <div class="subtitle en">create a beautiful life​</div>
+              <div class="line"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container head_quarter">
+        <div class="section-title">
+          <img src="./img/title_head_quarter.png" alt="" />
+          <h3>公司总部</h3>
+        </div>
+        <div class="content">
+          <img src="./img/map.png" alt="" />
+        </div>
+      </div>
+
+      <div class="container friendly_link">
+        <div class="section-title">
+          <img src="./img/title_friendly_link.png" alt="" />
+          <h3>友情链接</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+          <div class="item">
+            <a href="#"><img src="./img/brand_activity_01.png" alt="" /></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 内容区域 end -->
+
+    <!-- 底部区域 start -->
+    <div class="footer">
+      <div class="container clearfix">
+        <div class="section fl">
+          <div class="logo"><img src="./img/logo2.png" alt="" /></div>
+          <div class="item mobile">
+            <span>0755-23769340</span>
+            <span>周一至周五：09:00-18:00</span>
+          </div>
+          <div class="item email">518000</div>
+          <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+        </div>
+        <ul class="nav fl">
+          <li><a href="#">首页</a></li>
+          <li><a href="#">ROS'S</a></li>
+          <li><a href="#">系列产品</a></li>
+        </ul>
+        <ul class="nav fl">
+          <li><a href="#">案例展示</a></li>
+          <li><a href="#">授权认证</a></li>
+          <li><a href="#">联系我们</a></li>
+        </ul>
+        <div class="qrcode fr">
+          <img src="./img/qrcode.jpg" alt="二维码" />
+          <div class="tip">扫一扫加关注</div>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="link">
+        <a href="#">法律声明</a>
+        <i></i>
+        <a href="#">隐私政策</a>
+        <i></i>
+        <a href="#">购物付款类型</a>
+        <i></i>
+        <a href="#">服务付款类型</a>
+        <i></i>
+        <a href="#">支付方式</a>
+        <i></i>
+        <a href="#">产品售后与申诉</a>
+        <i></i>
+        <a href="#">服务投诉与申诉</a>
+        <i></i>
+        <a href="#">族蚂议价流程</a>
+        <i></i>
+        <a href="#">关于族蚂网</a>
+        <i></i>
+        <a href="#">如何创建主体</a>
+        <i></i>
+        <a href="#">违规举报</a>
+        <i></i>
+        <a href="#">知识产权维护</a>
+      </div>
+      <div class="copyright">
+        <a href="#">本网站使用族蚂技术创建及服务器托管</a>
+        <span>Copyright ©2019</span>
+        <span>acebelleshenzhen.com</span>
+        <span>版权所有 粤ICP备2020131296号</span>
+      </div>
+    </div>
+    <!-- 底部区域 end -->
+
+    <script src="./libs/swiper/swiper.min.js"></script>
+    <script src="./libs/jquery-3.6.0.min.js"></script>
+    <script>
+      var mySwiper = new Swiper('#banner', {
+        loop: true, // 循环模式选项
+        // 如果需要分页器
+        pagination: {
+          el: '.swiper-pagination',
+        },
+      })
+      $('#activity .item').each(function (index, el) {
+        $(el).hover(
+          function () {
+            $('#activity .item').removeClass('hover').find('.cover').removeClass('hover-active').addClass('active')
+            $(this).addClass('hover').find('.cover').addClass('hover-active').removeClass('active')
+          },
+          function () {}
+        )
+      })
+    </script>
+  </body>
+</html>