首页 发现 帮助
登录
zhengjinyi
/
caimei-authentic-ross-static
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

艾斯佰丽页面

yuwenjun1997 2 年之前
父节点
39de2c7fc5
当前提交
4f470f9aa7
共有 10 个文件被更改，包括 967 次插入 和 0 次删除
分列视图 显示文件统计
  1. 271 0
      about.html
  2. 318 0
      css/about.css
  3. 378 0
      css/about.scss
  4. 二进制
      img/about-banner.png
  5. 二进制
      img/about-honor.png
  6. 二进制
      img/about-icon-01.png
  7. 二进制
      img/about-icon-02.png
  8. 二进制
      img/about-icon-03.png
  9. 二进制
      img/about-team-01.png
  10. 二进制
      img/about-team-02.png

+ 271 - 0
about.html
查看文件 

@@ -0,0 +1,271 @@
 
+<!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/about.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="banner">
 
+      <img src="./img/about-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
+    <div class="main">
 
+      <!-- 关于艾斯佰丽 start -->
 
+      <div class="about">
 
+        <div class="container">
 
+          <div class="title">艾斯佰丽</div>
 
+          <div class="description">
 
+            艾斯佰丽主营来自西班牙备受美容养生界青睐的云智能体疗管理系统「BINARY PREMIUM」，是西班牙ROS'S BINARY
 
+            PREMIUM<br />
 
+            中国区总代理，拥有资深的健康专家团队，优质、专业的售后服务团队，为您提供全方位一站式体验和服务。
 
+          </div>
 
+          <div class="content">
 
+            <div class="item">
 
+              <img src="./img/about-icon-01.png" alt="有成长" />
 
+              <div class="tip">有成长</div>
 
+              <div class="desc">
 
+                我们希望艾斯佰丽能给我们同事的，不仅仅是一份工作，也是一段成长的旅程。但个人的成长肯定不是温室式的成长，我们都是透过克服一个又一个困难而成长。
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="./img/about-icon-02.png" alt="有未来" />
 
+              <div class="tip">有未来</div>
 
+              <div class="desc">
 
+                每个有能力的人，都希望有一个舞台让他发挥所长。我们经常说互联网就是商界的奥林匹克在艾斯佰丽这里，我们希望大家能有机会把自己所知所能的，发挥到极致。
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="./img/about-icon-03.png" alt="有成长" />
 
+              <div class="tip">有成长</div>
 
+              <div class="desc">我们相信的是，只要艾斯佰丽有美好的将来也一定会带给同事更好的未来。</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于艾斯佰丽 end -->
 
+
 
+      <!-- 董事长 start -->
 
+      <div class="profile">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title">董事长</div>
 
+            <div class="subtitle">艾斯佰丽<span>/hbury</span></div>
 
+            <div class="tags">
 
+              <span>深圳艾斯佰丽集团创始人</span>
 
+              <i></i>
 
+              <span>深圳艾斯佰丽董事长</span>
 
+              <i></i>
 
+              <span>深圳艾斯佰丽CEO</span>
 
+            </div>
 
+            <div class="line"></div>
 
+            <div class="description">
 
+              这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明这里是事迹说明。
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 董事长 end -->
 
+
 
+      <!-- 团队介绍 start -->
 
+      <div class="team">
 
+        <div class="container">
 
+          <div class="title">团队</div>
 
+          <div class="content clearfix">
 
+            <div class="item">
 
+              <div class="cover">
 
+                <div class="tip">团队活动</div>
 
+                <div class="line"></div>
 
+                <div class="desc">艾斯佰丽大家庭活动照</div>
 
+              </div>
 
+            </div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-02.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-02.png" alt="" /></div>
 
+            <div class="item"><img src="img/about-team-01.png" alt="" /></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 团队介绍 end -->
 
+
 
+      <!-- 发展历程 start -->
 
+      <div class="development">
 
+        <div class="container">
 
+          <div class="title">发展历程</div>
 
+          <div class="content">
 
+            <div class="item with-time-left">
 
+              <div class="time">2016<span>年</span></div>
 
+              <dl class="node">
 
+                <dt>应时而生</dt>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+            <div class="item with-time-right">
 
+              <div class="time">2017-2018<span>年</span></div>
 
+              <dl class="node">
 
+                <dt>应时而生</dt>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+            <div class="item with-time-left">
 
+              <div class="time">2019-2020<span>年</span></div>
 
+              <dl class="node">
 
+                <dt>应时而生</dt>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+
 
+            <div class="item with-time-right">
 
+              <div class="time">2019-2020<span>年至今</span></div>
 
+              <dl class="node">
 
+                <dt>应时而生</dt>
 
+                <dd>
 
+                  <div class="tip">深圳艾斯佰丽生物科技有限公司成立</div>
 
+                  <div class="subtip">Company established</div>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 发展历程 end -->
 
+
 
+      <!-- 荣誉证书 start-->
 
+      <div class="honor">
 
+        <div class="container">
 
+          <div class="title">荣誉证书</div>
 
+          <div class="content clearfix">
 
+            <div class="item">
 
+              <a href="#"><img src="./img/about-honor.png" alt="" /></a>
 
+            </div>
 
+            <div class="item">
 
+              <a href="#"><img src="./img/about-honor.png" alt="" /></a>
 
+            </div>
 
+            <div class="item">
 
+              <a href="#"><img src="./img/about-honor.png" alt="" /></a>
 
+            </div>
 
+            <div class="item">
 
+              <a href="#"><img src="./img/about-honor.png" alt="" /></a>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 荣誉证书 end -->
 
+    </div>
 
+
 
+    <!-- 底部区域 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 -->
 
+  </body>
 
+</html>

+ 318 - 0
css/about.css
查看文件 

@@ -0,0 +1,318 @@
 
+.banner {
 
+  position: relative;
 
+  width: 100%;
 
+  min-width: 1200px;
 
+  height: 530px;
 
+  overflow: hidden;
 
+}
 
+.banner img {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
+}
 
+
 
+.main .about {
 
+  padding: 120px 0;
 
+  background: #fff;
 
+}
 
+.main .about .title {
 
+  font-size: 34px;
 
+  text-align: center;
 
+  margin-bottom: 32px;
 
+}
 
+.main .about .description {
 
+  font-size: 16px;
 
+  color: #505050;
 
+  text-align: center;
 
+  line-height: 32px;
 
+}
 
+.main .about .content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-top: 80px;
 
+}
 
+.main .about .content .item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  width: 380px;
 
+  height: 387px;
 
+  box-sizing: border-box;
 
+  border: 1px solid #e8e8e8;
 
+  padding: 40px 30px;
 
+}
 
+.main .about .content .item img {
 
+  display: block;
 
+  width: 72px;
 
+  height: 72px;
 
+  margin-top: 20px;
 
+}
 
+.main .about .content .item .tip {
 
+  font-size: 18px;
 
+  color: #505050;
 
+  font-weight: bold;
 
+  margin-top: 32px;
 
+}
 
+.main .about .content .item .desc {
 
+  margin-top: 32px;
 
+  font-size: 16px;
 
+  color: #505050;
 
+  line-height: 32px;
 
+  text-align: center;
 
+}
 
+.main .profile {
 
+  background: #f7f7f7;
 
+  padding: 60px 0;
 
+}
 
+.main .profile .cover {
 
+  width: 470px;
 
+  height: 479px;
 
+  overflow: hidden;
 
+  background-color: pink;
 
+}
 
+.main .profile .cover img {
 
+  display: block;
 
+  width: 100%;
 
+}
 
+.main .profile .content {
 
+  width: 672px;
 
+  margin-left: 50px;
 
+}
 
+.main .profile .content .title {
 
+  font-size: 34px;
 
+}
 
+.main .profile .content .subtitle {
 
+  font-size: 34px;
 
+  color: #0688d2;
 
+  margin: 40px 0 16px;
 
+}
 
+.main .profile .content .subtitle span {
 
+  font-size: 24px;
 
+  color: #272727;
 
+  margin-left: 12px;
 
+}
 
+.main .profile .content .tags {
 
+  display: flex;
 
+  align-items: center;
 
+  font-size: 0;
 
+}
 
+.main .profile .content .tags span {
 
+  font-size: 16px;
 
+}
 
+.main .profile .content .tags i {
 
+  display: block;
 
+  height: 12px;
 
+  width: 1px;
 
+  background: #505050;
 
+  margin: 0 24px;
 
+}
 
+.main .profile .content .line {
 
+  width: 100%;
 
+  height: 1px;
 
+  background: #e8e8e8;
 
+  position: relative;
 
+  margin: 20px 0 40px;
 
+}
 
+.main .profile .content .line::before {
 
+  content: "";
 
+  display: block;
 
+  width: 24px;
 
+  height: 2px;
 
+  background: #0688d2;
 
+  position: absolute;
 
+  left: 0;
 
+  bottom: 0;
 
+}
 
+.main .profile .content .description {
 
+  font-size: 16px;
 
+  color: #999;
 
+  line-height: 32px;
 
+  text-align: justify;
 
+}
 
+.main .team {
 
+  padding: 120px 0;
 
+  background: #fff;
 
+}
 
+.main .team .title {
 
+  font-size: 34px;
 
+  text-align: center;
 
+}
 
+.main .team .content {
 
+  margin-top: 80px;
 
+}
 
+.main .team .content .item {
 
+  width: 388px;
 
+  height: 340px;
 
+  float: left;
 
+  margin-right: 17px;
 
+  margin-top: 18px;
 
+  overflow: hidden;
 
+}
 
+.main .team .content .item:first-child {
 
+  position: relative;
 
+  background: #eff9ff;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.main .team .content .item:first-child .cover {
 
+  width: 160px;
 
+}
 
+.main .team .content .item:first-child .cover .line {
 
+  width: 18px;
 
+  height: 3px;
 
+  background: #0688d2;
 
+  margin: 18px 0 24px;
 
+}
 
+.main .team .content .item:first-child .cover .tip {
 
+  font-size: 34px;
 
+}
 
+.main .team .content .item:first-child .cover .desc {
 
+  font-size: 16px;
 
+  color: #999;
 
+}
 
+.main .team .content .item:nth-child(-n+3) {
 
+  margin-top: 0;
 
+}
 
+.main .team .content .item:nth-child(3), .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(8), .main .team .content .item:nth-child(10) {
 
+  margin-right: 0;
 
+}
 
+.main .team .content .item:nth-child(5), .main .team .content .item:nth-child(9) {
 
+  width: 795px;
 
+}
 
+.main .team .content .item img {
 
+  display: block;
 
+  width: 100%;
 
+  transition: all 0.4s;
 
+}
 
+.main .team .content .item:hover img {
 
+  transform: scale(1.2);
 
+}
 
+.main .development {
 
+  padding: 100px 0;
 
+  background: #f7f7f7;
 
+}
 
+.main .development .title {
 
+  font-size: 34px;
 
+  text-align: center;
 
+}
 
+.main .development .content {
 
+  position: relative;
 
+  margin-top: 80px;
 
+  width: 2px;
 
+  margin: 0 auto;
 
+  background: #e8e8e8;
 
+}
 
+.main .development .content .item {
 
+  position: relative;
 
+  width: 2px;
 
+  margin-top: 60px;
 
+}
 
+.main .development .content .item::before {
 
+  content: "";
 
+  position: absolute;
 
+  width: 10px;
 
+  height: 10px;
 
+  box-sizing: border-box;
 
+  border: 1px solid #999999;
 
+  background: #fff;
 
+  border-radius: 50%;
 
+  left: -4px;
 
+  z-index: 5;
 
+  top: 32px;
 
+}
 
+.main .development .content .item:last-child::before {
 
+  background: #0688d2;
 
+  border-color: #fff;
 
+}
 
+.main .development .content .item:last-child .time {
 
+  border: 1px solid #0688d2;
 
+  border-left: 0;
 
+  color: #0688d2;
 
+}
 
+.main .development .content .item:last-child .node {
 
+  background: #0688d2;
 
+}
 
+.main .development .content .item:last-child .node dt,
 
+.main .development .content .item:last-child .node .tip,
 
+.main .development .content .item:last-child .node .subtip {
 
+  color: #ffffff;
 
+}
 
+.main .development .content .item.with-time-left .time {
 
+  position: absolute;
 
+  left: -16px;
 
+  top: 0;
 
+  transform: translateX(-100%);
 
+}
 
+.main .development .content .item.with-time-left .node {
 
+  padding-left: 44px;
 
+  margin-left: -16px;
 
+}
 
+.main .development .content .item.with-time-right .time {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 16px;
 
+}
 
+.main .development .content .item.with-time-right .node {
 
+  position: relative;
 
+  transform: translate(-100%);
 
+  text-align: right;
 
+  padding-right: 44px;
 
+  right: -16px;
 
+}
 
+.main .development .content .item .time {
 
+  font-size: 34px;
 
+  color: #505050;
 
+  white-space: nowrap;
 
+  padding: 20px 24px;
 
+  height: 100%;
 
+  box-sizing: border-box;
 
+}
 
+.main .development .content .item .time span {
 
+  font-size: 14px;
 
+  margin-left: 10px;
 
+}
 
+.main .development .content .item .node {
 
+  width: 526px;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+  padding: 20px 24px;
 
+}
 
+.main .development .content .item .node dd,
 
+.main .development .content .item .node dt {
 
+  margin-left: 0;
 
+}
 
+.main .development .content .item .node dt {
 
+  font-size: 34px;
 
+  color: #505050;
 
+}
 
+.main .development .content .item .node dd {
 
+  font-size: 14px;
 
+  color: #505050;
 
+  margin-top: 24px;
 
+}
 
+.main .development .content .item .node dd .tip {
 
+  margin-bottom: 8px;
 
+}
 
+.main .honor {
 
+  padding: 120px 0;
 
+  padding-bottom: 0;
 
+  background: #fff;
 
+}
 
+.main .honor .title {
 
+  font-size: 32px;
 
+  text-align: center;
 
+}
 
+.main .honor .content {
 
+  margin-top: 80px;
 
+}
 
+.main .honor .content .item {
 
+  width: 288px;
 
+  height: 330px;
 
+  float: left;
 
+  margin-right: 15px;
 
+}
 
+.main .honor .content .item:nth-child(4n) {
 
+  margin-right: 0;
 
+}

+ 378 - 0
css/about.scss
查看文件 

@@ -0,0 +1,378 @@
 
+.banner {
 
+  position: relative;
 
+  width: 100%;
 
+  min-width: 1200px;
 
+  height: 530px;
 
+  overflow: hidden;
 
+
 
+  img {
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    transform: translate(-50%, -50%);
 
+  }
 
+}
 
+
 
+.main {
 
+  .about {
 
+    padding: 120px 0;
 
+    background: #fff;
 
+    .title {
 
+      font-size: 34px;
 
+      text-align: center;
 
+      margin-bottom: 32px;
 
+    }
 
+
 
+    .description {
 
+      font-size: 16px;
 
+      color: #505050;
 
+      text-align: center;
 
+      line-height: 32px;
 
+    }
 
+
 
+    .content {
 
+      display: flex;
 
+      justify-content: space-between;
 
+      margin-top: 80px;
 
+      .item {
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-items: center;
 
+        width: 380px;
 
+        height: 387px;
 
+        box-sizing: border-box;
 
+        border: 1px solid #e8e8e8;
 
+        padding: 40px 30px;
 
+
 
+        img {
 
+          display: block;
 
+          width: 72px;
 
+          height: 72px;
 
+          margin-top: 20px;
 
+        }
 
+
 
+        .tip {
 
+          font-size: 18px;
 
+          color: #505050;
 
+          font-weight: bold;
 
+          margin-top: 32px;
 
+        }
 
+
 
+        .desc {
 
+          margin-top: 32px;
 
+          font-size: 16px;
 
+          color: #505050;
 
+          line-height: 32px;
 
+          text-align: center;
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .profile {
 
+    background: #f7f7f7;
 
+    padding: 60px 0;
 
+    .cover {
 
+      width: 470px;
 
+      height: 479px;
 
+      overflow: hidden;
 
+      background-color: pink;
 
+      img {
 
+        display: block;
 
+        width: 100%;
 
+      }
 
+    }
 
+    .content {
 
+      width: 672px;
 
+      margin-left: 50px;
 
+
 
+      .title {
 
+        font-size: 34px;
 
+      }
 
+      .subtitle {
 
+        font-size: 34px;
 
+        color: #0688d2;
 
+        margin: 40px 0 16px;
 
+
 
+        span {
 
+          font-size: 24px;
 
+          color: #272727;
 
+          margin-left: 12px;
 
+        }
 
+      }
 
+      .tags {
 
+        display: flex;
 
+        align-items: center;
 
+        font-size: 0;
 
+
 
+        span {
 
+          font-size: 16px;
 
+        }
 
+
 
+        i {
 
+          display: block;
 
+          height: 12px;
 
+          width: 1px;
 
+          background: #505050;
 
+          margin: 0 24px;
 
+        }
 
+      }
 
+      .line {
 
+        width: 100%;
 
+        height: 1px;
 
+        background: #e8e8e8;
 
+        position: relative;
 
+        margin: 20px 0 40px;
 
+        &::before {
 
+          content: '';
 
+          display: block;
 
+          width: 24px;
 
+          height: 2px;
 
+          background: #0688d2;
 
+          position: absolute;
 
+          left: 0;
 
+          bottom: 0;
 
+        }
 
+      }
 
+      .description {
 
+        font-size: 16px;
 
+        color: #999;
 
+        line-height: 32px;
 
+        text-align: justify;
 
+      }
 
+    }
 
+  }
 
+
 
+  .team {
 
+    padding: 120px 0;
 
+    background: #fff;
 
+
 
+    .title {
 
+      font-size: 34px;
 
+      text-align: center;
 
+    }
 
+
 
+    .content {
 
+      margin-top: 80px;
 
+
 
+      .item {
 
+        width: 388px;
 
+        height: 340px;
 
+        float: left;
 
+        margin-right: 17px;
 
+        margin-top: 18px;
 
+        overflow: hidden;
 
+
 
+        &:first-child {
 
+          position: relative;
 
+          background: #eff9ff;
 
+          display: flex;
 
+          justify-content: center;
 
+          align-items: center;
 
+
 
+          .cover {
 
+            width: 160px;
 
+
 
+            .line {
 
+              width: 18px;
 
+              height: 3px;
 
+              background: #0688d2;
 
+              margin: 18px 0 24px;
 
+            }
 
+
 
+            .tip {
 
+              font-size: 34px;
 
+            }
 
+
 
+            .desc {
 
+              font-size: 16px;
 
+              color: #999;
 
+            }
 
+          }
 
+        }
 
+
 
+        &:nth-child(-n + 3) {
 
+          margin-top: 0;
 
+        }
 
+
 
+        &:nth-child(3),
 
+        &:nth-child(5),
 
+        &:nth-child(8),
 
+        &:nth-child(10) {
 
+          margin-right: 0;
 
+        }
 
+
 
+        &:nth-child(5),
 
+        &:nth-child(9) {
 
+          width: 795px;
 
+        }
 
+
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          transition: all 0.4s;
 
+        }
 
+
 
+        &:hover {
 
+          img {
 
+            transform: scale(1.2);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .development {
 
+    padding: 100px 0;
 
+    background: #f7f7f7;
 
+
 
+    .title {
 
+      font-size: 34px;
 
+      text-align: center;
 
+    }
 
+
 
+    .content {
 
+      position: relative;
 
+      margin-top: 80px;
 
+      width: 2px;
 
+      margin: 0 auto;
 
+      background: #e8e8e8;
 
+
 
+      .item {
 
+        position: relative;
 
+        width: 2px;
 
+        margin-top: 60px;
 
+
 
+        &::before {
 
+          content: '';
 
+          position: absolute;
 
+          width: 10px;
 
+          height: 10px;
 
+          box-sizing: border-box;
 
+          border: 1px solid #999999;
 
+          background: #fff;
 
+          border-radius: 50%;
 
+          left: -4px;
 
+          z-index: 5;
 
+          top: 32px;
 
+        }
 
+
 
+        &:last-child {
 
+          &::before {
 
+            background: #0688d2;
 
+            border-color: #fff;
 
+          }
 
+          .time {
 
+            border: 1px solid #0688d2;
 
+            border-left: 0;
 
+
 
+            color: #0688d2;
 
+          }
 
+
 
+          .node {
 
+            background: #0688d2;
 
+
 
+            dt,
 
+            .tip,
 
+            .subtip {
 
+              color: #ffffff;
 
+            }
 
+          }
 
+        }
 
+
 
+        &.with-time-left {
 
+          .time {
 
+            position: absolute;
 
+            left: -16px;
 
+            top: 0;
 
+            transform: translateX(-100%);
 
+          }
 
+
 
+          .node {
 
+            padding-left: 44px;
 
+            margin-left: -16px;
 
+          }
 
+        }
 
+
 
+        &.with-time-right {
 
+          .time {
 
+            position: absolute;
 
+            top: 0;
 
+            left: 16px;
 
+          }
 
+
 
+          .node {
 
+            position: relative;
 
+            transform: translate(-100%);
 
+            text-align: right;
 
+            padding-right: 44px;
 
+            right: -16px;
 
+          }
 
+        }
 
+
 
+        .time {
 
+          font-size: 34px;
 
+          color: #505050;
 
+          white-space: nowrap;
 
+          padding: 20px 24px;
 
+          height: 100%;
 
+          box-sizing: border-box;
 
+
 
+          span {
 
+            font-size: 14px;
 
+            margin-left: 10px;
 
+          }
 
+        }
 
+        .node {
 
+          width: 526px;
 
+          margin: 0;
 
+          box-sizing: border-box;
 
+          padding: 20px 24px;
 
+
 
+          dd,
 
+          dt {
 
+            margin-left: 0;
 
+          }
 
+
 
+          dt {
 
+            font-size: 34px;
 
+            color: #505050;
 
+          }
 
+          dd {
 
+            font-size: 14px;
 
+            color: #505050;
 
+            margin-top: 24px;
 
+
 
+            .tip {
 
+              margin-bottom: 8px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .honor {
 
+    padding: 120px 0;
 
+    padding-bottom: 0;
 
+    background: #fff;
 
+    .title {
 
+      font-size: 32px;
 
+      text-align: center;
 
+    }
 
+
 
+    .content {
 
+      margin-top: 80px;
 
+      .item {
 
+        width: 288px;
 
+        height: 330px;
 
+        float: left;
 
+        margin-right: 15px;
 
+
 
+        &:nth-child(4n) {
 
+          margin-right: 0;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

二进制
img/about-banner.png
查看文件


二进制
img/about-honor.png
查看文件


二进制
img/about-icon-01.png
查看文件


二进制
img/about-icon-02.png
查看文件


二进制
img/about-icon-03.png
查看文件


二进制
img/about-team-01.png
查看文件


二进制
img/about-team-02.png
查看文件