Home Verkennen Help
Inloggen
zhengjinyi
/
caimei-authentic-ross-static
2
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

合并

zhengjinyi 2 jaren geleden
bovenliggende
b25d29fec8 07a90e76bb
commit
32012fac13
100 gewijzigde bestanden met toevoegingen van 4319 en 76 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 287 0
      about.html
  2. 132 0
      brand-detail.html
  3. 442 0
      brand-ross.html
  4. 160 0
      brand.html
  5. 163 0
      case.html
  6. 304 0
      css/about.css
  7. 363 0
      css/about.scss
  8. 98 40
      css/base.css
  9. 118 36
      css/base.scss
  10. 24 0
      css/brand-detail.css
  11. 26 0
      css/brand-detail.scss
  12. 352 0
      css/brand-ross.css
  13. 424 0
      css/brand-ross.scss
  14. 63 0
      css/brand.css
  15. 73 0
      css/brand.scss
  16. 58 0
      css/case.css
  17. 65 0
      css/case.scss
  18. 19 0
      css/index.css
  19. 19 0
      css/index.scss
  20. 102 0
      css/product-diactivplvs.css
  21. 116 0
      css/product-diactivplvs.scss
  22. 109 0
      css/product-intradermik.css
  23. 131 0
      css/product-intradermik.scss
  24. 75 0
      css/product-kestos.css
  25. 86 0
      css/product-kestos.scss
  26. 95 0
      css/product-mesobiolift.css
  27. 115 0
      css/product-mesobiolift.scss
  28. 135 0
      css/product-rollaction.css
  29. 165 0
      css/product-rollaction.scss
  30. BIN
      img/about-banner.png
  31. BIN
      img/about-honor.png
  32. BIN
      img/about-icon-01.png
  33. BIN
      img/about-icon-02.png
  34. BIN
      img/about-icon-03.png
  35. BIN
      img/about-team-01.png
  36. BIN
      img/about-team-02.png
  37. BIN
      img/brand-logo.jpg
  38. BIN
      img/brand-ross-ad.jpg
  39. BIN
      img/brand-ross-app-01.png
  40. BIN
      img/brand-ross-app-02.png
  41. BIN
      img/brand-ross-app-03.png
  42. BIN
      img/brand-ross-app-04.png
  43. BIN
      img/brand-ross-app-05.png
  44. BIN
      img/brand-ross-app-06.png
  45. BIN
      img/brand-ross-app-07.png
  46. BIN
      img/brand-ross-concat.png
  47. BIN
      img/brand-ross-map.png
  48. BIN
      img/brand-ross-therapy-active-01.png
  49. BIN
      img/brand-ross-therapy-active-02.png
  50. BIN
      img/brand-ross-therapy-active-03.png
  51. BIN
      img/brand-ross-therapy-active-04.png
  52. BIN
      img/brand-ross-therapy-active-05.png
  53. BIN
      img/brand-ross-therapy-cover-01.png
  54. BIN
      img/brand-ross-therapy-cover-02.png
  55. BIN
      img/brand-ross-therapy-cover-03.png
  56. BIN
      img/brand-ross-therapy-cover-04.png
  57. BIN
      img/brand-ross-therapy-cover-05.png
  58. BIN
      img/brand-ross-video-cover.png
  59. BIN
      img/brand-section-bg.png
  60. BIN
      img/case-banner.png
  61. BIN
      img/case-bg.png
  62. BIN
      img/case-content-01.png
  63. BIN
      img/case-content-02.png
  64. BIN
      img/case-content-03.png
  65. BIN
      img/case-content-04.png
  66. BIN
      img/case-content-05.png
  67. BIN
      img/case-content-06.png
  68. BIN
      img/case-content-07.png
  69. BIN
      img/case-cover-01.png
  70. BIN
      img/case-cover-02.png
  71. BIN
      img/case-cover-03.png
  72. BIN
      img/case-cover-04.png
  73. BIN
      img/case-cover-05.png
  74. BIN
      img/case-cover-06.png
  75. BIN
      img/case-cover-07.png
  76. BIN
      img/icon-arrow-left.png
  77. BIN
      img/icon-arrow-right.png
  78. BIN
      img/icon-comma-01.png
  79. BIN
      img/icon-comma-02.png
  80. BIN
      img/icon-company.png
  81. BIN
      img/icon-doctor.png
  82. BIN
      img/icon-heart.png
  83. BIN
      img/icon-right.png
  84. BIN
      img/icon-star.png
  85. BIN
      img/product-diactivplvs-about.png
  86. BIN
      img/product-diactivplvs-banner.png
  87. BIN
      img/product-diactivplvs-service-01.png
  88. BIN
      img/product-diactivplvs-service-02.png
  89. BIN
      img/product-diactivplvs-service-03.png
  90. BIN
      img/product-diactivplvs-service-04.png
  91. BIN
      img/product-intradermik-about.png
  92. BIN
      img/product-intradermik-banner.png
  93. BIN
      img/product-intradermik-service-bg-01.png
  94. BIN
      img/product-intradermik-service-bg-02.png
  95. BIN
      img/product-intradermik-service-bg-03.png
  96. BIN
      img/product-intradermik-service-bg-04.png
  97. BIN
      img/product-intradermik-service-cover-01.png
  98. BIN
      img/product-intradermik-service-cover-02.png
  99. BIN
      img/product-intradermik-service-cover-03.png
  100. BIN
      img/product-intradermik-service-cover-04.png

+ 287 - 0
about.html
Bestand weergeven 

@@ -0,0 +1,287 @@
 
+<!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="./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 clearfix">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li>
 
+            <a href="#">品牌中心</a>
 
+            <ul class="menu">
 
+              <li><a href="#">ROS'S介绍</a></li>
 
+              <li class="dropdown">
 
+                <a href="javascript:void(0)">产品系列</a>
 
+                <ul class="submenu clearfix">
 
+                  <li><a href="#">Diactivplvs</a></li>
 
+                  <li><a href="#">Ntradermik</a></li>
 
+                  <li><a href="#">Esobiolift RF</a></li>
 
+                  <li><a href="#">Rollaction</a></li>
 
+                  <li><a href="#">Kestos T2</a></li>
 
+                </ul>
 
+              </li>
 
+              <li><a href="#">案例展示</a></li>
 
+              <li><a href="#">授权认证</a></li>
 
+            </ul>
 
+          </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>

+ 132 - 0
brand-detail.html
Bestand weergeven 

@@ -0,0 +1,132 @@
 
+<!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="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/brand-detail.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 clearfix">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li>
 
+            <a href="#">品牌中心</a>
 
+            <ul class="menu">
 
+              <li><a href="#">ROS'S介绍</a></li>
 
+              <li class="dropdown">
 
+                <a href="javascript:void(0)">产品系列</a>
 
+                <ul class="submenu clearfix">
 
+                  <li><a href="#">Diactivplvs</a></li>
 
+                  <li><a href="#">Ntradermik</a></li>
 
+                  <li><a href="#">Esobiolift RF</a></li>
 
+                  <li><a href="#">Rollaction</a></li>
 
+                  <li><a href="#">Kestos T2</a></li>
 
+                </ul>
 
+              </li>
 
+              <li><a href="#">案例展示</a></li>
 
+              <li><a href="#">授权认证</a></li>
 
+            </ul>
 
+          </li>
 
+          <li><a href="#">合作加盟</a></li>
 
+          <li><a href="#">新闻动态</a></li>
 
+          <li><a href="#">联系我们</a></li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+    <!-- 顶部导航栏 end -->
 
+
 
+    <div class="container main">
 
+      <div class="title">品牌活动标题</div>
 
+      <div class="line"></div>
 
+      <div class="detail">
 
+        <p>
 
+          深圳艾斯佰丽生物科技有限公司主营来自西班牙备受美容养生界青睐的云智能体疗管理系统「BINARY PREMIUM」，是西班牙
 
+          ROS'S BINARY PREMIUM中国区总代理，拥有资深的健康专家团队，优质、专业的售后服务团队，为您提供全方位一站式体验
 
+          和服务。
 
+        </p>
 
+        <p>我们期待有梦想,有激情,有能力的你加入我们,为你提供 “有成长、有舞台、有未来” 的平台!</p>
 
+        <img src="/img/brand-ross-app-01.png" alt="" />
 
+        <p>
 
+          我们希望艾斯佰丽能给我们同事的，不仅仅是一份工作，也是一段成长的旅程。但个人的成长肯定不是温室式的成长，我们都是透过克
 
+          服一个又一个困难而成长。每个有能力的人，都希望有一个舞台让他发挥所长。一个足球员，一定会希望有个球场实现他冠军的梦，一
 
+          个百米飞人，肯定希望有个奥林匹克的赛道。我们经常说互联网就是商界的奥林匹克，在艾斯佰丽这里，我们希望大家能有机会把自己
 
+          的所知所能的，发挥到极致。
 
+        </p>
 
+        <p>我们相信的是，只要艾斯佰丽有美好的将来，也一定会带给同事更好的未来。</p>
 
+      </div>
 
+    </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>

+ 442 - 0
brand-ross.html
Bestand weergeven 

@@ -0,0 +1,442 @@
 
+<!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>首页-艾斯佰丽官网-ROSS介绍</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/brand-ross.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 clearfix">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li>
 
+            <a href="#">品牌中心</a>
 
+            <ul class="menu">
 
+              <li><a href="#">ROS'S介绍</a></li>
 
+              <li class="dropdown">
 
+                <a href="javascript:void(0)">产品系列</a>
 
+                <ul class="submenu clearfix">
 
+                  <li><a href="#">Diactivplvs</a></li>
 
+                  <li><a href="#">Ntradermik</a></li>
 
+                  <li><a href="#">Esobiolift RF</a></li>
 
+                  <li><a href="#">Rollaction</a></li>
 
+                  <li><a href="#">Kestos T2</a></li>
 
+                </ul>
 
+              </li>
 
+              <li><a href="#">案例展示</a></li>
 
+              <li><a href="#">授权认证</a></li>
 
+            </ul>
 
+          </li>
 
+          <li><a href="#">合作加盟</a></li>
 
+          <li><a href="#">新闻动态</a></li>
 
+          <li><a href="#">联系我们</a></li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+    <!-- 顶部导航栏 end -->
 
+
 
+    <!-- 广告位 start-->
 
+    <div class="advertising">
 
+      <div class="video-container">
 
+        <video src="" poster="/img/brand-ross-video-cover.png"></video>
 
+        <div class="play"></div>
 
+      </div>
 
+    </div>
 
+    <!-- 广告位 end -->
 
+
 
+    <div class="main">
 
+      <!-- 关于ross start -->
 
+      <div class="about wrapper">
 
+        <div class="container">
 
+          <div class="title">关于ROS'S</div>
 
+          <div class="content clearfix">
 
+            <div class="swiper fl">
 
+              <div class="swiper-container" id="aboutSwiepr">
 
+                <div class="swiper-wrapper">
 
+                  <div class="swiper-slide">
 
+                    <img src="/img/banner1.png" alt="" />
 
+                  </div>
 
+                  <div class="swiper-slide">
 
+                    <img src="/img/banner1.png" alt="" />
 
+                  </div>
 
+                </div>
 
+                <!-- 如果需要导航按钮 -->
 
+                <div class="swiper-prev"></div>
 
+                <div class="swiper-next"></div>
 
+              </div>
 
+            </div>
 
+            <div class="section fl">
 
+              <div class="item">
 
+                <div class="num">01</div>
 
+                <div class="line"></div>
 
+                <div class="desc">
 
+                  ROS'S是一家专注于二进制先进美容仪器研发、制造 和销售的西班牙企业。成立于1978年，公司涉及美容、
 
+                  康复理疗、医疗等领域：ROS'S----来自智能科技的成 果给您的身体一个崭新的生命。
 
+                </div>
 
+              </div>
 
+              <div class="item">
 
+                <div class="num">02</div>
 
+                <div class="line"></div>
 
+                <div class="desc">ROS'S是一家专注于二进制先进美容仪器研发、制造 和销</div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于ross end -->
 
+
 
+      <!-- 关于疗法 start -->
 
+      <div class="therapy wrapper">
 
+        <div class="container">
 
+          <div class="title">关于疗法</div>
 
+          <div class="content">
 
+            <div class="item">
 
+              <div class="cover">
 
+                <div class="tip">热透疗法</div>
 
+                <div class="line"></div>
 
+                <img src="/img/brand-ross-therapy-cover-01.png" alt="" />
 
+              </div>
 
+              <div class="active">
 
+                <img src="/img/brand-ross-therapy-active-01.png" alt="448KHz热透疗法" />
 
+                <div class="info">
 
+                  <div class="tip">448KHz热透疗法</div>
 
+                  <div class="subtip">电容模式应用人体组织</div>
 
+                  <div class="section">
 
+                    <dl>
 
+                      <dt>身体护理</dt>
 
+                      <dd>- 肌肉理疗</dd>
 
+                      <dd>- 肌肉损伤</dd>
 
+                      <dd>- 肌肉松弛</dd>
 
+                    </dl>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item hover">
 
+              <div class="cover">
 
+                <div class="tip">面部护理</div>
 
+                <div class="line"></div>
 
+                <img src="/img/brand-ross-therapy-cover-02.png" alt="面部护理" />
 
+              </div>
 
+              <div class="active">
 
+                <img src="/img/brand-ross-therapy-active-02.png" alt="面部护理" />
 
+                <div class="info">
 
+                  <div class="tip">面部护理</div>
 
+                  <div class="subtip">电容模式应用人体组织</div>
 
+                  <div class="section">
 
+                    <dl>
 
+                      <dt>身体护理</dt>
 
+                      <dd>- 肌肉理疗</dd>
 
+                      <dd>- 肌肉损伤</dd>
 
+                      <dd>- 肌肉松弛</dd>
 
+                    </dl>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <div class="cover">
 
+                <div class="tip">电提升</div>
 
+                <div class="line"></div>
 
+                <img src="/img/brand-ross-therapy-cover-03.png" alt="电提升" />
 
+              </div>
 
+              <div class="active">
 
+                <img src="/img/brand-ross-therapy-active-03.png" alt="电提升" />
 
+                <div class="info">
 
+                  <div class="tip">电提升</div>
 
+                  <div class="subtip">电容模式应用人体组织</div>
 
+                  <div class="section">
 
+                    <dl>
 
+                      <dt>身体护理</dt>
 
+                      <dd>- 肌肉理疗</dd>
 
+                      <dd>- 肌肉损伤</dd>
 
+                      <dd>- 肌肉松弛</dd>
 
+                    </dl>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <div class="cover">
 
+                <div class="tip">电紧致</div>
 
+                <div class="line"></div>
 
+                <img src="/img/brand-ross-therapy-cover-04.png" alt="电紧致" />
 
+              </div>
 
+              <div class="active">
 
+                <img src="/img/brand-ross-therapy-active-04.png" alt="电紧致" />
 
+                <div class="info">
 
+                  <div class="tip">电紧致</div>
 
+                  <div class="subtip">电容模式应用人体组织</div>
 
+                  <div class="section">
 
+                    <dl>
 
+                      <dt>身体护理</dt>
 
+                      <dd>- 肌肉理疗</dd>
 
+                      <dd>- 肌肉损伤</dd>
 
+                      <dd>- 肌肉松弛</dd>
 
+                    </dl>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <div class="cover">
 
+                <div class="tip">电脂解</div>
 
+                <div class="line"></div>
 
+                <img src="/img/brand-ross-therapy-cover-05.png" alt="电脂解" />
 
+              </div>
 
+              <div class="active">
 
+                <img src="/img/brand-ross-therapy-active-05.png" alt="电脂解" />
 
+                <div class="info">
 
+                  <div class="tip">电脂解</div>
 
+                  <div class="subtip">电容模式应用人体组织</div>
 
+                  <div class="section">
 
+                    <dl>
 
+                      <dt>身体护理</dt>
 
+                      <dd>- 肌肉理疗</dd>
 
+                      <dd>- 肌肉损伤</dd>
 
+                      <dd>- 肌肉松弛</dd>
 
+                    </dl>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于疗法 end -->
 
+
 
+      <!-- 七大应用 start -->
 
+      <div class="application wrapper">
 
+        <div class="container">
 
+          <div class="title">七大应用</div>
 
+          <div class="content clearfix">
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-01.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">01</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-02.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">01</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-03.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">02</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-04.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">03</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-05.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">04</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-06.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">05</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="item">
 
+              <img src="/img/brand-ross-app-07.png" alt="" />
 
+              <div class="active">
 
+                <div class="info">
 
+                  <div class="num">06</div>
 
+                  <div class="line"></div>
 
+                  <div class="tip">美学缺陷</div>
 
+                  <div class="link">立即查看</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 七大应用 end -->
 
+
 
+      <!-- 分布区域 start -->
 
+      <div class="distribution wrapper">
 
+        <div class="container">
 
+          <div class="title">分布区域</div>
 
+          <div class="content">
 
+            <img src="/img/brand-ross-map.png" alt="" />
 
+            <div class="section">
 
+              <div class="item">
 
+                <div class="row star">44</div>
 
+                <div class="row">ROS'S坚持科技创新已44年</div>
 
+              </div>
 
+              <div class="line"></div>
 
+              <div class="item">
 
+                <div class="row company">2000+</div>
 
+                <div class="row">超过2000+所专业治疗机构</div>
 
+              </div>
 
+              <div class="line"></div>
 
+              <div class="item">
 
+                <div class="row doctor">10000+</div>
 
+                <div class="row">全球10000+名ROS'S专业体疗师</div>
 
+              </div>
 
+              <div class="line"></div>
 
+              <div class="item">
 
+                <div class="row heart">千万</div>
 
+                <div class="row">ROS'S治疗和服务的人群</div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 分布区域 end -->
 
+
 
+      <!-- 联系我们 start -->
 
+      <div class="contact wrapper">
 
+        <div class="container">
 
+          <div class="title">联系我们</div>
 
+          <div class="content clearfix">
 
+            <div class="cover fl">
 
+              <img src="/img/brand-ross-concat.png" alt="" />
 
+            </div>
 
+            <div class="form-container fr">
 
+              <textarea placeholder="如有问题请您留言（必填）"></textarea>
 
+              <div class="submit">提交</div>
 
+            </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 -->
 
+
 
+    <script src="./libs/swiper/swiper.min.js"></script>
 
+    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script>
 
+      var mySwiper = new Swiper('#aboutSwiepr', {
 
+        loop: true, // 循环模式选项
 
+        // 如果需要前进后退按钮
 
+        navigation: {
 
+          nextEl: '.swiper-next',
 
+          prevEl: '.swiper-prev',
 
+        },
 
+        on: {
 
+          slideChangeTransitionEnd: function () {
 
+            onChangeAboutItemWithSwiper(this.realIndex)
 
+          },
 
+        },
 
+      })
 
+
 
+      // 文案随着轮播图切换
 
+      function onChangeAboutItemWithSwiper(index) {
 
+        $('#aboutSwiepr').parent().siblings('.section').children('.item').hide().eq(index).show()
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

+ 160 - 0
brand.html
Bestand weergeven 

@@ -0,0 +1,160 @@
 
+<!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="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/brand.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 clearfix">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li>
 
+            <a href="#">品牌中心</a>
 
+            <ul class="menu">
 
+              <li><a href="#">ROS'S介绍</a></li>
 
+              <li class="dropdown">
 
+                <a href="javascript:void(0)">产品系列</a>
 
+                <ul class="submenu clearfix">
 
+                  <li><a href="#">Diactivplvs</a></li>
 
+                  <li><a href="#">Ntradermik</a></li>
 
+                  <li><a href="#">Esobiolift RF</a></li>
 
+                  <li><a href="#">Rollaction</a></li>
 
+                  <li><a href="#">Kestos T2</a></li>
 
+                </ul>
 
+              </li>
 
+              <li><a href="#">案例展示</a></li>
 
+              <li><a href="#">授权认证</a></li>
 
+            </ul>
 
+          </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">
 
+      <div class="brand">
 
+        <div class="container">
 
+          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
 
+          <div class="content">
 
+            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
 
+            <div class="name">西班牙奢华护肤品牌</div>
 
+            <div class="link">品牌故事</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="brand">
 
+        <div class="container">
 
+          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
 
+          <div class="content">
 
+            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
 
+            <div class="name">西班牙奢华护肤品牌</div>
 
+            <div class="link">品牌故事</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="brand">
 
+        <div class="container">
 
+          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
 
+          <div class="content">
 
+            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
 
+            <div class="name">西班牙奢华护肤品牌</div>
 
+            <div class="link">品牌故事</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="brand">
 
+        <div class="container">
 
+          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
 
+          <div class="content">
 
+            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
 
+            <div class="name">西班牙奢华护肤品牌</div>
 
+            <div class="link">品牌故事</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </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>

+ 163 - 0
case.html
Bestand weergeven 

@@ -0,0 +1,163 @@
 
+<!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="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/case.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 clearfix">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li>
 
+            <a href="#">品牌中心</a>
 
+            <ul class="menu">
 
+              <li><a href="#">ROS'S介绍</a></li>
 
+              <li class="dropdown">
 
+                <a href="javascript:void(0)">产品系列</a>
 
+                <ul class="submenu clearfix">
 
+                  <li><a href="#">Diactivplvs</a></li>
 
+                  <li><a href="#">Ntradermik</a></li>
 
+                  <li><a href="#">Esobiolift RF</a></li>
 
+                  <li><a href="#">Rollaction</a></li>
 
+                  <li><a href="#">Kestos T2</a></li>
 
+                </ul>
 
+              </li>
 
+              <li><a href="#">案例展示</a></li>
 
+              <li><a href="#">授权认证</a></li>
 
+            </ul>
 
+          </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/case-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
+    <div class="title container">​ROS'S案例分享</div>
 
+    <div class="main">
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="/img/case-cover-01.png" alt="" /></div>
 
+          <div class="content fr"><img src="/img/case-content-01.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/case-cover-02.png" alt="" /></div>
 
+          <div class="content fl"><img src="/img/case-content-02.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="/img/case-cover-03.png" alt="" /></div>
 
+          <div class="content fr"><img src="/img/case-content-03.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/case-cover-04.png" alt="" /></div>
 
+          <div class="content fl"><img src="/img/case-content-04.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="/img/case-cover-05.png" alt="" /></div>
 
+          <div class="content fr"><img src="/img/case-content-05.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/case-cover-06.png" alt="" /></div>
 
+          <div class="content fl"><img src="/img/case-content-06.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+      <div class="case">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="/img/case-cover-07.png" alt="" /></div>
 
+          <div class="content fr"><img src="/img/case-content-07.png" alt="" /></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 底部区域 start -->
 
+    <div class="footer">
 
+      <div class="container clearfix">
 
+        <div class="section fl">
 
+          <div class="logo"><img src="/img/logo2.png" alt="logo" /></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>

+ 304 - 0
css/about.css
Bestand weergeven 

@@ -0,0 +1,304 @@
 
+.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;
 
+}

+ 363 - 0
css/about.scss
Bestand weergeven 

@@ -0,0 +1,363 @@
 
+.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;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 98 - 40
css/base.css
Bestand weergeven 

@@ -84,23 +84,18 @@ a {
 
   margin-left: 18px;
 
 }
 
 
-.section-title {
 
+.banner {
 
   position: relative;
 
-  text-align: center;
 
-  height: 66px;
 
-}
 
-.section-title img {
 
-  display: block;
 
-  height: 50px;
 
-  margin: 0 auto;
 
+  width: 100%;
 
+  min-width: 1200px;
 
+  height: 530px;
 
+  overflow: hidden;
 
 }
 
-.section-title h3 {
 
+.banner img {
 
   position: absolute;
 
   left: 50%;
 
-  bottom: 0;
 
-  transform: translateX(-50%);
 
-  font-size: 34px;
 
-  font-weight: normal;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
 }
 
 
 .header {
 
@@ -118,46 +113,109 @@ a {
 
   display: block;
 
   height: 42px;
 
 }
 
-.header .nav {
 
-  display: flex;
 
-  align-items: center;
 
-  height: 68px;
 
-}
 
-.header .nav li {
 
+.header .nav > li {
 
+  float: left;
 
   position: relative;
 
-  height: 100%;
 
-  margin-left: 56px;
 
+  margin-right: 56px;
 
 }
 
-.header .nav li:hover::after {
 
-  opacity: 1;
 
+.header .nav > li:last-child {
 
+  margin-right: 0;
 
 }
 
-.header .nav li:hover a {
 
+.header .nav > li:hover > a {
 
   color: #0688d2;
 
 }
 
-.header .nav li:first-child {
 
-  margin-left: 0;
 
+.header .nav > li:hover::after {
 
+  display: block;
 
 }
 
-.header .nav li::after {
 
+.header .nav > li:hover .menu {
 
+  display: block;
 
+}
 
+.header .nav > li > a {
 
+  display: block;
 
+  line-height: 68px;
 
+}
 
+.header .nav > li::after {
 
   content: "";
 
-  opacity: 0;
 
-  width: 100%;
 
-  height: 3px;
 
   position: absolute;
 
-  left: 0;
 
+  display: none;
 
+  width: 32px;
 
+  height: 3px;
 
+  background: #0688d2;
 
+  left: 50%;
 
   bottom: 0;
 
-  background-color: #0688d2;
 
-  transition: all 0.2s;
 
-}
 
-.header .nav li.active::after {
 
-  opacity: 1;
 
+  transform: translateX(-50%);
 
 }
 
-.header .nav li.active a {
 
+.header .nav > li.active > a {
 
   color: #0688d2;
 
 }
 
-.header .nav li a {
 
+.header .nav > li.active::after {
 
   display: block;
 
-  line-height: 68px;
 
-  transition: all 0.2s;
 
+}
 
+.header .nav .menu {
 
+  display: none;
 
+  position: absolute;
 
+  background: #fff;
 
+  border: 1px solid #f8f8f8;
 
+  min-width: 128px;
 
+  left: 50%;
 
+  top: 68px;
 
+  transform: translateX(-50%);
 
+}
 
+.header .nav .menu > li:hover {
 
+  background: #0688d2;
 
+}
 
+.header .nav .menu > li:hover > a {
 
+  color: #fff;
 
+}
 
+.header .nav .menu > li:hover .submenu {
 
+  display: block;
 
+}
 
+.header .nav .menu > li > a {
 
+  display: block;
 
+  font-size: 14px;
 
+  text-align: center;
 
+  line-height: 50px;
 
+}
 
+.header .nav .menu > li.dropdown > a {
 
+  background: url(/img/icon-arrow-right.png) no-repeat;
 
+  background-position: 88% center;
 
+  background-size: 16px;
 
+}
 
+.header .nav .menu .submenu {
 
+  display: none;
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  background: #fff;
 
+  width: 306px;
 
+  min-height: 200px;
 
+  border: 1px solid #f8f8f8;
 
+  border-left-color: #e8e8e8;
 
+  transform: translateX(100%) translateX(-1px);
 
+  box-sizing: border-box;
 
+  padding: 16px 24px;
 
+}
 
+.header .nav .menu .submenu > li {
 
+  float: left;
 
+  margin: 16px 16px 0 0;
 
+}
 
+.header .nav .menu .submenu > li:nth-child(2n) {
 
+  margin-right: 0;
 
+}
 
+.header .nav .menu .submenu > li:nth-child(-n+2) {
 
+  margin-top: 0;
 
+}
 
+.header .nav .menu .submenu > li > a {
 
+  display: block;
 
+  font-size: 14px;
 
+  width: 120px;
 
+  text-align: center;
 
+  line-height: 32px;
 
+  background: #f7f7f7;
 
+}
 
+.header .nav .menu .submenu > li > a:hover {
 
+  background: #eff9ff;
 
+  color: #0688d2;
 
 }
 
 
 .footer {

+ 118 - 36
css/base.scss
Bestand weergeven 

@@ -82,22 +82,18 @@ a {
 
   margin-left: 18px;
 
 }
 
 
-.section-title {
 
+.banner {
 
   position: relative;
 
-  text-align: center;
 
-  height: 66px;
 
+  width: 100%;
 
+  min-width: 1200px;
 
+  height: 530px;
 
+  overflow: hidden;
 
+
 
   img {
 
-    display: block;
 
-    height: 50px;
 
-    margin: 0 auto;
 
-  }
 
-  h3 {
 
     position: absolute;
 
     left: 50%;
 
-    bottom: 0;
 
-    transform: translateX(-50%);
 
-    font-size: 34px;
 
-    font-weight: normal;
 
+    top: 50%;
 
+    transform: translate(-50%, -50%);
 
   }
 
 }
 
 
@@ -118,48 +114,134 @@ a {
 
       height: 42px;
 
     }
 
   }
 
+
 
   .nav {
 
-    display: flex;
 
-    align-items: center;
 
-    height: 68px;
 
-    li {
 
+    & > li {
 
+      float: left;
 
       position: relative;
 
-      height: 100%;
 
-      margin-left: 56px;
 
+      margin-right: 56px;
 
+
 
+      &:last-child {
 
+        margin-right: 0;
 
+      }
 
+
 
       &:hover {
 
+        & > a {
 
+          color: #0688d2;
 
+        }
 
+
 
         &::after {
 
-          opacity: 1;
 
+          display: block;
 
         }
 
-        a {
 
-          color: #0688d2;
 
+
 
+        .menu {
 
+          display: block;
 
         }
 
       }
 
-      &:first-child {
 
-        margin-left: 0;
 
+
 
+      & > a {
 
+        display: block;
 
+        line-height: 68px;
 
       }
 
+
 
       &::after {
 
         content: '';
 
-        opacity: 0;
 
-        width: 100%;
 
-        height: 3px;
 
         position: absolute;
 
-        left: 0;
 
+        display: none;
 
+        width: 32px;
 
+        height: 3px;
 
+        background: #0688d2;
 
+        left: 50%;
 
         bottom: 0;
 
-        background-color: #0688d2;
 
-        transition: all .2s;
 
+        transform: translateX(-50%);
 
       }
 
+
 
       &.active {
 
+        & > a {
 
+          color: #0688d2;
 
+        }
 
+
 
         &::after {
 
-          opacity: 1;
 
+          display: block;
 
         }
 
-        a {
 
-          color: #0688d2;
 
+      }
 
+    }
 
+
 
+    .menu {
 
+      display: none;
 
+      position: absolute;
 
+      background: #fff;
 
+      border: 1px solid #f8f8f8;
 
+      min-width: 128px;
 
+      left: 50%;
 
+      top: 68px;
 
+      transform: translateX(-50%);
 
+      & > li {
 
+        &:hover {
 
+          background: #0688d2;
 
+
 
+          & > a {
 
+            color: #fff;
 
+          }
 
+
 
+          .submenu {
 
+            display: block;
 
+          }
 
+        }
 
+
 
+        & > a {
 
+          display: block;
 
+          font-size: 14px;
 
+          text-align: center;
 
+          line-height: 50px;
 
+        }
 
+
 
+        &.dropdown > a {
 
+          background: url(/img/icon-arrow-right.png) no-repeat;
 
+          background-position: 88% center;
 
+          background-size: 16px;
 
         }
 
       }
 
-      a {
 
-        display: block;
 
-        line-height: 68px;
 
-        transition: all .2s;
 
+
 
+      .submenu {
 
+        display: none;
 
+        position: absolute;
 
+        top: 0;
 
+        right: 0;
 
+        background: #fff;
 
+        width: 306px;
 
+        min-height: 200px;
 
+        border: 1px solid #f8f8f8;
 
+        border-left-color: #e8e8e8;
 
+        transform: translateX(100%) translateX(-1px);
 
+        box-sizing: border-box;
 
+        padding: 16px 24px;
 
+        & > li {
 
+          float: left;
 
+          margin: 16px 16px 0 0;
 
+
 
+          &:nth-child(2n) {
 
+            margin-right: 0;
 
+          }
 
+
 
+          &:nth-child(-n + 2) {
 
+            margin-top: 0;
 
+          }
 
+
 
+          & > a {
 
+            display: block;
 
+            font-size: 14px;
 
+            width: 120px;
 
+            text-align: center;
 
+            line-height: 32px;
 
+            background: #f7f7f7;
 
+
 
+            &:hover {
 
+              background: #eff9ff;
 
+              color: #0688d2;
 
+            }
 
+          }
 
+        }
 
       }
 
     }
 
   }

+ 24 - 0
css/brand-detail.css
Bestand weergeven 

@@ -0,0 +1,24 @@
 
+.main {
 
+  padding-top: 50px;
 
+}
 
+.main .title {
 
+  font-size: 28px;
 
+}
 
+.main .line {
 
+  width: 100%;
 
+  margin: 40px 0 70px;
 
+  position: relative;
 
+  height: 1px;
 
+  background-color: #d8d8d8;
 
+}
 
+.main .line::after {
 
+  content: "";
 
+  display: block;
 
+  width: 24px;
 
+  height: 2px;
 
+  background: #0688d2;
 
+}
 
+.main .detail p {
 
+  line-height: 34px;
 
+  margin: 32px 0;
 
+}

+ 26 - 0
css/brand-detail.scss
Bestand weergeven 

@@ -0,0 +1,26 @@
 
+.main {
 
+  padding-top: 50px;
 
+  .title {
 
+    font-size: 28px;
 
+  }
 
+  .line {
 
+    width: 100%;
 
+    margin: 40px 0 70px;
 
+    position: relative;
 
+    height: 1px;
 
+    background-color: #d8d8d8;
 
+    &::after {
 
+      content: '';
 
+      display: block;
 
+      width: 24px;
 
+      height: 2px;
 
+      background: #0688d2;
 
+    }
 
+  }
 
+  .detail {
 
+    p {
 
+      line-height: 34px;
 
+      margin: 32px 0;
 
+    }
 
+  }
 
+}

+ 352 - 0
css/brand-ross.css
Bestand weergeven 

@@ -0,0 +1,352 @@
 
+.advertising {
 
+  width: 100%;
 
+  height: 1055px;
 
+  box-sizing: border-box;
 
+  background: #f2f2f2;
 
+  overflow: hidden;
 
+  background: url(/img/brand-ross-ad.jpg) no-repeat center;
 
+  background-size: cover;
 
+}
 
+.advertising .video-container {
 
+  position: relative;
 
+  width: 1200px;
 
+  height: 570px;
 
+  margin: 0 auto;
 
+  margin-top: 485px;
 
+  background: pink;
 
+}
 
+.advertising .video-container .play {
 
+  position: absolute;
 
+  width: 64px;
 
+  height: 64px;
 
+  border-radius: 50%;
 
+  z-index: 2;
 
+  bottom: 155px;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  cursor: pointer;
 
+}
 
+.advertising .video-container video {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.main .wrapper {
 
+  margin-top: 120px;
 
+}
 
+.main .wrapper .title {
 
+  font-size: 34px;
 
+  text-align: center;
 
+}
 
+.main .wrapper .content {
 
+  margin-top: 80px;
 
+}
 
+.main .about .content {
 
+  height: 540px;
 
+}
 
+.main .about .content .swiper {
 
+  width: 720px;
 
+  height: 100%;
 
+  position: relative;
 
+}
 
+.main .about .content .swiper .swiper-prev,
 
+.main .about .content .swiper .swiper-next {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  width: 48px;
 
+  height: 72px;
 
+  background-color: rgba(55, 55, 55, 0.3) !important;
 
+  z-index: 5;
 
+  cursor: pointer;
 
+  background: url(/img/icon-arrow-left.png) no-repeat center;
 
+}
 
+.main .about .content .swiper .swiper-next {
 
+  left: unset;
 
+  right: 0;
 
+  background: url(/img/icon-arrow-right.png) no-repeat center;
 
+}
 
+.main .about .content .swiper img {
 
+  width: 100%;
 
+  height: 540px;
 
+}
 
+.main .about .content .section {
 
+  width: 480px;
 
+  height: 540px;
 
+  background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
 
+  background-color: #f3920d;
 
+  background-repeat: no-repeat;
 
+  background-position: 48px 48px, 341px 410px;
 
+}
 
+.main .about .content .section .item {
 
+  width: 390px;
 
+  margin: 0 auto;
 
+  margin-top: 73px;
 
+  display: none;
 
+}
 
+.main .about .content .section .item .num {
 
+  font-size: 32px;
 
+  color: #fff;
 
+  text-align: center;
 
+}
 
+.main .about .content .section .item .line {
 
+  width: 1px;
 
+  height: 24px;
 
+  margin: 25px auto 40px;
 
+  background: #fff;
 
+}
 
+.main .about .content .section .item .desc {
 
+  font-size: 16px;
 
+  color: #fff;
 
+  line-height: 40px;
 
+}
 
+.main .therapy .content {
 
+  margin-top: 80px;
 
+  height: 540px;
 
+  display: flex;
 
+  align-items: flex-start;
 
+}
 
+.main .therapy .content .item {
 
+  flex-shrink: 0;
 
+  height: 100%;
 
+}
 
+.main .therapy .content .item.hover .cover {
 
+  display: none;
 
+}
 
+.main .therapy .content .item.hover .active {
 
+  display: block;
 
+}
 
+.main .therapy .content .item:first-child .cover {
 
+  border-left: 0;
 
+}
 
+.main .therapy .content .item .cover {
 
+  position: relative;
 
+  width: 180px;
 
+  height: 100%;
 
+  box-sizing: border-box;
 
+  border-left: 1px solid rgba(243, 146, 13, 0.2);
 
+  background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
 
+  overflow: hidden;
 
+}
 
+.main .therapy .content .item .cover .tip {
 
+  font-size: 16px;
 
+  text-align: center;
 
+  margin-top: 57px;
 
+  margin-bottom: 40px;
 
+  font-weight: bold;
 
+}
 
+.main .therapy .content .item .cover .line {
 
+  width: 24px;
 
+  height: 2px;
 
+  background: #f3920d;
 
+  margin: 0 auto;
 
+}
 
+.main .therapy .content .item .cover img {
 
+  position: absolute;
 
+  width: 128px;
 
+  height: 128px;
 
+  bottom: 44px;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+}
 
+.main .therapy .content .item .active {
 
+  position: relative;
 
+  display: none;
 
+  width: 480px;
 
+  height: 100%;
 
+  text-align: center;
 
+  color: #fff;
 
+}
 
+.main .therapy .content .item .active img {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main .therapy .content .item .active .info {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.main .therapy .content .item .active .info .tip {
 
+  font-size: 24px;
 
+  margin-bottom: 10px;
 
+}
 
+.main .therapy .content .item .active .info .subtip {
 
+  font-size: 16px;
 
+  margin-bottom: 60px;
 
+}
 
+.main .therapy .content .item .active .info .section {
 
+  width: 160px;
 
+  margin: 0 auto;
 
+  border: 1px solid #fff;
 
+  padding: 36px 0;
 
+}
 
+.main .therapy .content .item .active .info .section dl {
 
+  padding: 0;
 
+}
 
+.main .therapy .content .item .active .info .section dl dt {
 
+  margin-bottom: 24px;
 
+}
 
+.main .therapy .content .item .active .info .section dl dd {
 
+  margin: 0;
 
+  margin-top: 10px;
 
+}
 
+.main .application .content .item {
 
+  position: relative;
 
+  float: left;
 
+  width: 390px;
 
+  height: 390px;
 
+  margin-right: 15px;
 
+  margin-top: 15px;
 
+  overflow: hidden;
 
+}
 
+.main .application .content .item img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+  transition: all 0.4s;
 
+}
 
+.main .application .content .item:nth-child(-n+3) {
 
+  margin-top: 0;
 
+}
 
+.main .application .content .item:nth-child(5), .main .application .content .item:nth-child(6) {
 
+  width: 795px;
 
+}
 
+.main .application .content .item:nth-child(3), .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(7) {
 
+  margin-right: 0;
 
+}
 
+.main .application .content .item .active {
 
+  opacity: 0;
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  background: rgba(0, 0, 0, 0.39);
 
+  z-index: 1;
 
+  top: 0;
 
+  left: 0;
 
+  transition: all 0.4s;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  flex-direction: column;
 
+}
 
+.main .application .content .item .active .info .num {
 
+  font-size: 50px;
 
+  background: linear-gradient(to bottom, #fff, transparent);
 
+  -webkit-background-clip: text;
 
+  color: transparent;
 
+  text-align: center;
 
+}
 
+.main .application .content .item .active .info .tip {
 
+  font-size: 24px;
 
+  color: #fff;
 
+  text-align: center;
 
+}
 
+.main .application .content .item .active .info .line {
 
+  width: 28px;
 
+  height: 2px;
 
+  background: #fff;
 
+  margin: 24px auto;
 
+}
 
+.main .application .content .item .active .info .link {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  width: 160px;
 
+  height: 48px;
 
+  border: 1px solid #fff;
 
+  font-size: 16px;
 
+  color: #fff;
 
+  margin-top: 52px;
 
+  cursor: pointer;
 
+}
 
+.main .application .content .item:hover .active {
 
+  opacity: 1;
 
+}
 
+.main .application .content .item:hover img {
 
+  transform: scale(1.06);
 
+}
 
+.main .distribution .content img {
 
+  display: block;
 
+  width: 100%;
 
+}
 
+.main .distribution .content .section {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-top: 80px;
 
+}
 
+.main .distribution .content .section .line {
 
+  width: 1px;
 
+  height: 12px;
 
+  background: #b2b2b2;
 
+  transform: translateY(52px);
 
+}
 
+.main .distribution .content .section .item {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  flex-direction: column;
 
+}
 
+.main .distribution .content .section .item .row:first-child {
 
+  padding-left: 36px;
 
+  background: url(/img/icon-star.png) no-repeat left center;
 
+  line-height: 37px;
 
+  font-size: 28px;
 
+}
 
+.main .distribution .content .section .item .row.company {
 
+  background-image: url(/img/icon-company.png);
 
+}
 
+.main .distribution .content .section .item .row.doctor {
 
+  background-image: url(/img/icon-doctor.png);
 
+}
 
+.main .distribution .content .section .item .row.heart {
 
+  background-image: url(/img/icon-heart.png);
 
+}
 
+.main .distribution .content .section .item .row:last-child {
 
+  font-size: 14px;
 
+  color: #999;
 
+  margin-top: 12px;
 
+}
 
+.main .contact .content .cover {
 
+  width: 626px;
 
+  height: 418px;
 
+}
 
+.main .contact .content .cover img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main .contact .content .form-container {
 
+  box-sizing: border-box;
 
+}
 
+.main .contact .content .form-container textarea {
 
+  display: block;
 
+  width: 526px;
 
+  height: 344px;
 
+  box-sizing: border-box;
 
+  padding: 12px;
 
+  line-height: 26px;
 
+  font-size: 16px;
 
+  border-color: #dedede;
 
+}
 
+.main .contact .content .form-container .submit {
 
+  font-size: 16px;
 
+  color: #fff;
 
+  height: 48px;
 
+  background: #f3920d;
 
+  text-align: center;
 
+  line-height: 48px;
 
+  margin-top: 26px;
 
+  cursor: pointer;
 
+  transition: all 0.4s;
 
+}
 
+.main .contact .content .form-container .submit:hover {
 
+  background: #e78d0d;
 
+}

+ 424 - 0
css/brand-ross.scss
Bestand weergeven 

@@ -0,0 +1,424 @@
 
+.advertising {
 
+  width: 100%;
 
+  height: 1055px;
 
+  box-sizing: border-box;
 
+  background: #f2f2f2;
 
+  overflow: hidden;
 
+  background: url(/img/brand-ross-ad.jpg) no-repeat center;
 
+  background-size: cover;
 
+
 
+  .video-container {
 
+    position: relative;
 
+    width: 1200px;
 
+    height: 570px;
 
+    margin: 0 auto;
 
+    margin-top: 485px;
 
+    background: pink;
 
+
 
+    .play {
 
+      position: absolute;
 
+      width: 64px;
 
+      height: 64px;
 
+      border-radius: 50%;
 
+      z-index: 2;
 
+      bottom: 155px;
 
+      left: 50%;
 
+      transform: translateX(-50%);
 
+      cursor: pointer;
 
+    }
 
+
 
+    video {
 
+      display: block;
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+  }
 
+}
 
+
 
+.main {
 
+  .wrapper {
 
+    margin-top: 120px;
 
+    .title {
 
+      font-size: 34px;
 
+      text-align: center;
 
+    }
 
+
 
+    .content {
 
+      margin-top: 80px;
 
+    }
 
+  }
 
+
 
+  .about {
 
+    .content {
 
+      height: 540px;
 
+      .swiper {
 
+        width: 720px;
 
+        height: 100%;
 
+        position: relative;
 
+
 
+        .swiper-prev,
 
+        .swiper-next {
 
+          position: absolute;
 
+          left: 0;
 
+          top: 50%;
 
+          transform: translateY(-50%);
 
+          width: 48px;
 
+          height: 72px;
 
+          background-color: rgba(55, 55, 55, 0.3) !important;
 
+          z-index: 5;
 
+          cursor: pointer;
 
+          background: url(/img/icon-arrow-left.png) no-repeat center;
 
+        }
 
+
 
+        .swiper-next {
 
+          left: unset;
 
+          right: 0;
 
+          background: url(/img/icon-arrow-right.png) no-repeat center;
 
+        }
 
+
 
+        img {
 
+          width: 100%;
 
+          height: 540px;
 
+        }
 
+      }
 
+
 
+      .section {
 
+        width: 480px;
 
+        height: 540px;
 
+        background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
 
+        background-color: #f3920d;
 
+        background-repeat: no-repeat;
 
+        background-position: 48px 48px, 341px 410px;
 
+
 
+        .item {
 
+          width: 390px;
 
+          margin: 0 auto;
 
+          margin-top: 73px;
 
+          display: none;
 
+
 
+          .num {
 
+            font-size: 32px;
 
+            color: #fff;
 
+            text-align: center;
 
+          }
 
+
 
+          .line {
 
+            width: 1px;
 
+            height: 24px;
 
+            margin: 25px auto 40px;
 
+            background: #fff;
 
+          }
 
+
 
+          .desc {
 
+            font-size: 16px;
 
+            color: #fff;
 
+            line-height: 40px;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .therapy {
 
+    .content {
 
+      margin-top: 80px;
 
+      height: 540px;
 
+      display: flex;
 
+      align-items: flex-start;
 
+      .item {
 
+        flex-shrink: 0;
 
+        height: 100%;
 
+        &.hover {
 
+          .cover {
 
+            display: none;
 
+          }
 
+          .active {
 
+            display: block;
 
+          }
 
+        }
 
+
 
+        &:first-child {
 
+          .cover {
 
+            border-left: 0;
 
+          }
 
+        }
 
+
 
+        .cover {
 
+          position: relative;
 
+          width: 180px;
 
+          height: 100%;
 
+          box-sizing: border-box;
 
+          border-left: 1px solid rgba(243, 146, 13, 0.2);
 
+          background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
 
+          overflow: hidden;
 
+
 
+          .tip {
 
+            font-size: 16px;
 
+            text-align: center;
 
+            margin-top: 57px;
 
+            margin-bottom: 40px;
 
+            font-weight: bold;
 
+          }
 
+
 
+          .line {
 
+            width: 24px;
 
+            height: 2px;
 
+            background: #f3920d;
 
+            margin: 0 auto;
 
+          }
 
+
 
+          img {
 
+            position: absolute;
 
+            width: 128px;
 
+            height: 128px;
 
+            bottom: 44px;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+          }
 
+        }
 
+
 
+        .active {
 
+          position: relative;
 
+          display: none;
 
+          width: 480px;
 
+          height: 100%;
 
+          text-align: center;
 
+          color: #fff;
 
+
 
+          img {
 
+            width: 100%;
 
+            height: 100%;
 
+          }
 
+
 
+          .info {
 
+            position: absolute;
 
+            left: 0;
 
+            top: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            display: flex;
 
+            flex-direction: column;
 
+            justify-content: center;
 
+            align-items: center;
 
+            .tip {
 
+              font-size: 24px;
 
+              margin-bottom: 10px;
 
+            }
 
+            .subtip {
 
+              font-size: 16px;
 
+              margin-bottom: 60px;
 
+            }
 
+            .section {
 
+              width: 160px;
 
+              margin: 0 auto;
 
+              border: 1px solid #fff;
 
+              padding: 36px 0;
 
+              dl {
 
+                padding: 0;
 
+                dt {
 
+                  margin-bottom: 24px;
 
+                }
 
+                dd {
 
+                  margin: 0;
 
+                  margin-top: 10px;
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .application {
 
+    .content {
 
+      .item {
 
+        position: relative;
 
+        float: left;
 
+        width: 390px;
 
+        height: 390px;
 
+        margin-right: 15px;
 
+        margin-top: 15px;
 
+        overflow: hidden;
 
+
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+          transition: all 0.4s;
 
+        }
 
+
 
+        &:nth-child(-n + 3) {
 
+          margin-top: 0;
 
+        }
 
+        &:nth-child(5),
 
+        &:nth-child(6) {
 
+          width: 795px;
 
+        }
 
+
 
+        &:nth-child(3),
 
+        &:nth-child(5),
 
+        &:nth-child(7) {
 
+          margin-right: 0;
 
+        }
 
+
 
+        .active {
 
+          opacity: 0;
 
+          position: absolute;
 
+          width: 100%;
 
+          height: 100%;
 
+          background: rgba(0, 0, 0, 0.39);
 
+          z-index: 1;
 
+          top: 0;
 
+          left: 0;
 
+          transition: all 0.4s;
 
+
 
+          display: flex;
 
+          justify-content: center;
 
+          align-items: center;
 
+          flex-direction: column;
 
+
 
+          .info {
 
+            .num {
 
+              font-size: 50px;
 
+              background: linear-gradient(to bottom, #fff, transparent);
 
+              -webkit-background-clip: text;
 
+              color: transparent;
 
+              text-align: center;
 
+            }
 
+            .tip {
 
+              font-size: 24px;
 
+              color: #fff;
 
+              text-align: center;
 
+            }
 
+            .line {
 
+              width: 28px;
 
+              height: 2px;
 
+              background: #fff;
 
+              margin: 24px auto;
 
+            }
 
+            .link {
 
+              display: flex;
 
+              justify-content: center;
 
+              align-items: center;
 
+              width: 160px;
 
+              height: 48px;
 
+              border: 1px solid #fff;
 
+              font-size: 16px;
 
+              color: #fff;
 
+              margin-top: 52px;
 
+              cursor: pointer;
 
+            }
 
+          }
 
+        }
 
+
 
+        &:hover {
 
+          .active {
 
+            opacity: 1;
 
+          }
 
+
 
+          img {
 
+            transform: scale(1.06);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .distribution {
 
+    .content {
 
+      img {
 
+        display: block;
 
+        width: 100%;
 
+      }
 
+
 
+      .section {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        margin-top: 80px;
 
+
 
+        .line {
 
+          width: 1px;
 
+          height: 12px;
 
+          background: #b2b2b2;
 
+          transform: translateY(52px);
 
+        }
 
+        .item {
 
+          display: flex;
 
+          justify-content: center;
 
+          align-items: center;
 
+          flex-direction: column;
 
+
 
+          .row:first-child {
 
+            padding-left: 36px;
 
+            background: url(/img/icon-star.png) no-repeat left center;
 
+            line-height: 37px;
 
+            font-size: 28px;
 
+          }
 
+
 
+          .row.company {
 
+            background-image: url(/img/icon-company.png);
 
+          }
 
+
 
+          .row.doctor {
 
+            background-image: url(/img/icon-doctor.png);
 
+          }
 
+
 
+          .row.heart {
 
+            background-image: url(/img/icon-heart.png);
 
+          }
 
+
 
+          .row:last-child {
 
+            font-size: 14px;
 
+            color: #999;
 
+            margin-top: 12px;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .contact {
 
+    .content {
 
+      .cover {
 
+        width: 626px;
 
+        height: 418px;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
+      }
 
+
 
+      .form-container {
 
+        box-sizing: border-box;
 
+        textarea {
 
+          display: block;
 
+          width: 526px;
 
+          height: 344px;
 
+          box-sizing: border-box;
 
+          padding: 12px;
 
+          line-height: 26px;
 
+          font-size: 16px;
 
+          border-color: #dedede;
 
+        }
 
+
 
+        .submit {
 
+          font-size: 16px;
 
+          color: #fff;
 
+          height: 48px;
 
+          background: #f3920d;
 
+          text-align: center;
 
+          line-height: 48px;
 
+          margin-top: 26px;
 
+          cursor: pointer;
 
+          transition: all 0.4s;
 
+
 
+          &:hover {
 
+            background: #e78d0d;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 63 - 0
css/brand.css
Bestand weergeven 

@@ -0,0 +1,63 @@
 
+.main .brand {
 
+  margin-top: 60px;
 
+}
 
+.main .brand:first-child {
 
+  margin-top: 120px;
 
+}
 
+.main .brand .container {
 
+  position: relative;
 
+}
 
+.main .brand .cover {
 
+  width: 880px;
 
+  height: 420px;
 
+  background: pink;
 
+}
 
+.main .brand .content {
 
+  position: absolute;
 
+  right: 0;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  flex-direction: column;
 
+  width: 360px;
 
+  height: 340px;
 
+  border: 3px solid #e8e8e8;
 
+  box-sizing: border-box;
 
+  background: #fff;
 
+}
 
+.main .brand .content .brand-logo {
 
+  position: relative;
 
+  width: 174px;
 
+  height: 106px;
 
+  background: skyblue;
 
+  overflow: hidden;
 
+}
 
+.main .brand .content .brand-logo img {
 
+  display: block;
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
+}
 
+.main .brand .content .name {
 
+  font-size: 16px;
 
+  color: #505050;
 
+  margin: 24px 0 32px;
 
+}
 
+.main .brand .content .link {
 
+  width: 160px;
 
+  height: 48px;
 
+  background: #f7f7f7;
 
+  opacity: 1;
 
+  font-size: 16px;
 
+  color: #505050;
 
+  text-align: center;
 
+  line-height: 48px;
 
+  cursor: pointer;
 
+  transition: all 0.4s;
 
+}
 
+.main .brand .content .link:hover {
 
+  background: #eee;
 
+}

+ 73 - 0
css/brand.scss
Bestand weergeven 

@@ -0,0 +1,73 @@
 
+.main {
 
+  .brand {
 
+    margin-top: 60px;
 
+
 
+    &:first-child {
 
+      margin-top: 120px;
 
+    }
 
+
 
+    .container {
 
+      position: relative;
 
+    }
 
+
 
+    .cover {
 
+      width: 880px;
 
+      height: 420px;
 
+      background: pink;
 
+    }
 
+
 
+    .content {
 
+      position: absolute;
 
+      right: 0;
 
+      top: 50%;
 
+      transform: translateY(-50%);
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      flex-direction: column;
 
+      width: 360px;
 
+      height: 340px;
 
+      border: 3px solid #e8e8e8;
 
+      box-sizing: border-box;
 
+      background: #fff;
 
+      .brand-logo {
 
+        position: relative;
 
+        width: 174px;
 
+        height: 106px;
 
+        background: skyblue;
 
+        overflow: hidden;
 
+
 
+        img {
 
+          display: block;
 
+          position: absolute;
 
+          left: 50%;
 
+          top: 50%;
 
+          transform: translate(-50%, -50%);
 
+        }
 
+      }
 
+
 
+      .name {
 
+        font-size: 16px;
 
+        color: #505050;
 
+        margin: 24px 0 32px;
 
+      }
 
+
 
+      .link {
 
+        width: 160px;
 
+        height: 48px;
 
+        background: #f7f7f7;
 
+        opacity: 1;
 
+        font-size: 16px;
 
+        color: #505050;
 
+        text-align: center;
 
+        line-height: 48px;
 
+        cursor: pointer;
 
+        transition: all 0.4s;
 
+
 
+        &:hover {
 
+          background: #eee;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 58 - 0
css/case.css
Bestand weergeven 

@@ -0,0 +1,58 @@
 
+.title {
 
+  font-size: 34px;
 
+  text-align: center;
 
+  margin-top: 100px;
 
+}
 
+
 
+.main .case {
 
+  box-sizing: border-box;
 
+}
 
+.main .case:nth-child(1) {
 
+  padding-top: 80px !important;
 
+}
 
+.main .case:nth-child(odd) {
 
+  height: 690px;
 
+  padding: 120px 0;
 
+}
 
+.main .case:nth-child(odd) .cover {
 
+  width: 668px;
 
+  height: 410px;
 
+}
 
+.main .case:nth-child(even) {
 
+  height: 720px;
 
+  padding: 162px 0;
 
+  background: url(/img/case-bg.png) no-repeat center;
 
+  background-size: auto 720px;
 
+}
 
+.main .case:nth-child(even) .cover {
 
+  width: 568px;
 
+  height: 397px;
 
+}
 
+.main .case .cover {
 
+  background: pink;
 
+}
 
+.main .case .content {
 
+  position: relative;
 
+  background: skyblue;
 
+  width: 490px;
 
+  height: 410px;
 
+  margin-top: 50px;
 
+}
 
+.main .case .content img {
 
+  display: block;
 
+  width: 580px;
 
+  height: 516px;
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
+}
 
+.main .case .cover img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.footer {
 
+  margin-top: 0;
 
+}

+ 65 - 0
css/case.scss
Bestand weergeven 

@@ -0,0 +1,65 @@
 
+.title {
 
+  font-size: 34px;
 
+  text-align: center;
 
+  margin-top: 100px;
 
+}
 
+.main {
 
+  .case {
 
+    box-sizing: border-box;
 
+
 
+    &:nth-child(1) {
 
+      padding-top: 80px !important;
 
+    }
 
+
 
+    &:nth-child(odd) {
 
+      height: 690px;
 
+      padding: 120px 0;
 
+      .cover {
 
+        width: 668px;
 
+        height: 410px;
 
+      }
 
+    }
 
+    &:nth-child(even) {
 
+      height: 720px;
 
+      padding: 162px 0;
 
+      background: url(/img/case-bg.png) no-repeat center;
 
+      background-size: auto 720px;
 
+      .cover {
 
+        width: 568px;
 
+        height: 397px;
 
+      }
 
+    }
 
+    .cover {
 
+      background: pink;
 
+    }
 
+    .content {
 
+      position: relative;
 
+      background: skyblue;
 
+      width: 490px;
 
+      height: 410px;
 
+      margin-top: 50px;
 
+
 
+      img {
 
+        display: block;
 
+        width: 580px;
 
+        height: 516px;
 
+        position: absolute;
 
+        left: 50%;
 
+        top: 50%;
 
+        transform: translate(-50%, -50%);
 
+      }
 
+    }
 
+
 
+    .cover {
 
+      img {
 
+        display: block;
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.footer {
 
+  margin-top: 0;
 
+}

+ 19 - 0
css/index.css
Bestand weergeven 

@@ -1,5 +1,24 @@
 
 @charset "UTF-8";
 
 /* scss中可以用mixin来扩展 */
 
+.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;
 
+}
 
+
 
 .banner {
 
   width: 100%;
 
   height: 700px;

+ 19 - 0
css/index.scss
Bestand weergeven 

@@ -7,6 +7,25 @@
 
   -webkit-box-orient: vertical;
 
 }
 
 
+.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;
 
+  }
 
+}
 
+
 
 // 轮播图
 
 .banner {
 
   width: 100%;

+ 102 - 0
css/product-diactivplvs.css
Bestand weergeven 

@@ -0,0 +1,102 @@
 
+.main {
 
+  margin-top: -80px;
 
+}
 
+.main .title {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+}
 
+.main .about .cover {
 
+  width: 614px;
 
+  height: 412px;
 
+  background-color: pink;
 
+}
 
+.main .about .container {
 
+  position: relative;
 
+}
 
+.main .about .content {
 
+  position: absolute;
 
+  bottom: 0;
 
+  right: 0;
 
+  width: 518px;
 
+}
 
+.main .about .content .title {
 
+  font-size: 34px;
 
+  text-transform: uppercase;
 
+}
 
+.main .about .content .detail {
 
+  font-size: 14px;
 
+  line-height: 40px;
 
+  text-align: justify;
 
+}
 
+.main .about .content .tags {
 
+  margin-top: 36px;
 
+  display: flex;
 
+}
 
+.main .about .content .tags .tag {
 
+  padding: 8px 14px;
 
+  font-size: 16px;
 
+  color: #0688d2;
 
+  background: #eff9ff;
 
+}
 
+.main .about .content .line {
 
+  margin: 32px 0;
 
+  width: 32px;
 
+  height: 2px;
 
+  background: #d8d8d8;
 
+}
 
+.main .service {
 
+  margin-top: 180px;
 
+  margin-bottom: 80px;
 
+}
 
+.main .service .cover {
 
+  position: relative;
 
+  width: 646px;
 
+  height: 490px;
 
+  background: #fff;
 
+  box-sizing: border-box;
 
+}
 
+.main .service .cover img {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
+  display: block;
 
+  width: 700px;
 
+}
 
+.main .service .content {
 
+  width: 416px;
 
+}
 
+.main .service .content .title {
 
+  padding-top: 24px;
 
+}
 
+.main .service .content .line {
 
+  margin: 32px 0;
 
+  width: 32px;
 
+  height: 2px;
 
+  background: #d8d8d8;
 
+}
 
+.main .service .content .detail {
 
+  font-size: 14px;
 
+  text-align: justify;
 
+}
 
+.main .service .content .detail .lh40 {
 
+  line-height: 40px;
 
+}
 
+.main .service .content .detail .lh28 {
 
+  line-height: 28px;
 
+}
 
+.main .service .content .detail .mt32 {
 
+  margin-top: 32px;
 
+}
 
+.main .service .content .detail .mt16 {
 
+  margin-top: 16px;
 
+}
 
+.main .service .content .detail li .label {
 
+  margin-bottom: 16px;
 
+}
 
+.main .service .content .detail li .text {
 
+  color: #999999;
 
+}
 
+.main .service .content .detail .description {
 
+  font-size: 16px;
 
+}

+ 116 - 0
css/product-diactivplvs.scss
Bestand weergeven 

@@ -0,0 +1,116 @@
 
+.main {
 
+  margin-top: -80px;
 
+  .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+  }
 
+
 
+  .about {
 
+    .cover {
 
+      width: 614px;
 
+      height: 412px;
 
+      background-color: pink;
 
+    }
 
+    .container {
 
+      position: relative;
 
+    }
 
+    .content {
 
+      position: absolute;
 
+      bottom: 0;
 
+      right: 0;
 
+      width: 518px;
 
+      .title {
 
+        font-size: 34px;
 
+        text-transform: uppercase;
 
+      }
 
+      .detail {
 
+        font-size: 14px;
 
+        line-height: 40px;
 
+        text-align: justify;
 
+      }
 
+      .tags {
 
+        margin-top: 36px;
 
+        display: flex;
 
+        .tag {
 
+          padding: 8px 14px;
 
+          font-size: 16px;
 
+          color: #0688d2;
 
+          background: #eff9ff;
 
+        }
 
+      }
 
+      .line {
 
+        margin: 32px 0;
 
+        width: 32px;
 
+        height: 2px;
 
+        background: #d8d8d8;
 
+      }
 
+    }
 
+  }
 
+
 
+  .service {
 
+    margin-top: 180px;
 
+    margin-bottom: 80px;
 
+    .cover {
 
+      position: relative;
 
+      width: 646px;
 
+      height: 490px;
 
+      background: #fff;
 
+      box-sizing: border-box;
 
+
 
+      img {
 
+        position: absolute;
 
+        left: 50%;
 
+        top: 50%;
 
+        transform: translate(-50%, -50%);
 
+        display: block;
 
+        width: 700px;
 
+      }
 
+    }
 
+    .content {
 
+      width: 416px;
 
+
 
+      .title {
 
+        padding-top: 24px;
 
+      }
 
+      .line {
 
+        margin: 32px 0;
 
+        width: 32px;
 
+        height: 2px;
 
+        background: #d8d8d8;
 
+      }
 
+      .detail {
 
+        font-size: 14px;
 
+        text-align: justify;
 
+
 
+        .lh40 {
 
+          line-height: 40px;
 
+        }
 
+
 
+        .lh28 {
 
+          line-height: 28px;
 
+        }
 
+
 
+        .mt32 {
 
+          margin-top: 32px;
 
+        }
 
+
 
+        .mt16 {
 
+          margin-top: 16px;
 
+        }
 
+
 
+        li {
 
+          .label {
 
+            margin-bottom: 16px;
 
+          }
 
+          .text {
 
+            color: #999999;
 
+          }
 
+        }
 
+
 
+        .description {
 
+          font-size: 16px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 109 - 0
css/product-intradermik.css
Bestand weergeven 

@@ -0,0 +1,109 @@
 
+.main {
 
+  margin-top: -80px;
 
+}
 
+.main .title {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+}
 
+.main .about {
 
+  margin-bottom: 180px;
 
+}
 
+.main .about .cover {
 
+  width: 614px;
 
+  height: 412px;
 
+  background-color: pink;
 
+}
 
+.main .about .container {
 
+  position: relative;
 
+}
 
+.main .about .content {
 
+  position: absolute;
 
+  bottom: 0;
 
+  right: 0;
 
+  width: 518px;
 
+}
 
+.main .about .content .title {
 
+  font-size: 34px;
 
+  text-transform: uppercase;
 
+}
 
+.main .about .content .detail {
 
+  font-size: 14px;
 
+  line-height: 40px;
 
+  text-align: justify;
 
+}
 
+.main .about .content .tags {
 
+  margin-top: 36px;
 
+  display: flex;
 
+}
 
+.main .about .content .tags .tag {
 
+  padding: 8px 14px;
 
+  font-size: 16px;
 
+  color: #0688d2;
 
+  background: #eff9ff;
 
+}
 
+.main .about .content .line {
 
+  margin: 32px 0;
 
+  width: 32px;
 
+  height: 2px;
 
+  background: #d8d8d8;
 
+}
 
+.main .service {
 
+  margin: 80px 0;
 
+}
 
+.main .service .cover {
 
+  width: 640px;
 
+  height: 480px;
 
+  box-sizing: border-box;
 
+}
 
+.main .service.one .content {
 
+  background-image: url(/img/product-intradermik-service-bg-01.png);
 
+}
 
+.main .service.two .content {
 
+  background-image: url(/img/product-intradermik-service-bg-02.png);
 
+}
 
+.main .service.three .content {
 
+  background-image: url(/img/product-intradermik-service-bg-03.png);
 
+}
 
+.main .service.four .content {
 
+  background-image: url(/img/product-intradermik-service-bg-04.png);
 
+}
 
+.main .service .content {
 
+  width: 560px;
 
+  height: 480px;
 
+  box-sizing: border-box;
 
+  background: rgba(0, 0, 0, 0.39);
 
+  padding: 70px 60px 0;
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  background-size: 560px;
 
+}
 
+.main .service .content .title {
 
+  color: #fff;
 
+  margin-bottom: 20px;
 
+}
 
+.main .service .content .mb24 {
 
+  margin-bottom: 40px;
 
+}
 
+.main .service .content .mb56 {
 
+  margin-bottom: 56px;
 
+}
 
+.main .service .content .lh40 {
 
+  line-height: 40px;
 
+}
 
+.main .service .content .lh28 {
 
+  line-height: 28px;
 
+}
 
+.main .service .content .subtitle {
 
+  font-size: 16px;
 
+  color: #fff;
 
+}
 
+.main .service .content .detail {
 
+  color: #fff;
 
+  font-size: 16px;
 
+}
 
+.main .service .content .detail li {
 
+  margin-top: 32px;
 
+}
 
+.main .service .content .detail .label {
 
+  margin-bottom: 16px;
 
+}

+ 131 - 0
css/product-intradermik.scss
Bestand weergeven 

@@ -0,0 +1,131 @@
 
+.main {
 
+  margin-top: -80px;
 
+  .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+  }
 
+
 
+  .about {
 
+    margin-bottom: 180px;
 
+    .cover {
 
+      width: 614px;
 
+      height: 412px;
 
+      background-color: pink;
 
+    }
 
+    .container {
 
+      position: relative;
 
+    }
 
+    .content {
 
+      position: absolute;
 
+      bottom: 0;
 
+      right: 0;
 
+      width: 518px;
 
+      .title {
 
+        font-size: 34px;
 
+        text-transform: uppercase;
 
+      }
 
+      .detail {
 
+        font-size: 14px;
 
+        line-height: 40px;
 
+        text-align: justify;
 
+      }
 
+      .tags {
 
+        margin-top: 36px;
 
+        display: flex;
 
+        .tag {
 
+          padding: 8px 14px;
 
+          font-size: 16px;
 
+          color: #0688d2;
 
+          background: #eff9ff;
 
+        }
 
+      }
 
+      .line {
 
+        margin: 32px 0;
 
+        width: 32px;
 
+        height: 2px;
 
+        background: #d8d8d8;
 
+      }
 
+    }
 
+  }
 
+
 
+  .service {
 
+    margin: 80px 0;
 
+
 
+    .cover {
 
+      width: 640px;
 
+      height: 480px;
 
+      box-sizing: border-box;
 
+    }
 
+
 
+    &.one {
 
+      .content {
 
+        background-image: url(/img/product-intradermik-service-bg-01.png);
 
+      }
 
+    }
 
+    &.two {
 
+      .content {
 
+        background-image: url(/img/product-intradermik-service-bg-02.png);
 
+      }
 
+    }
 
+    &.three {
 
+      .content {
 
+        background-image: url(/img/product-intradermik-service-bg-03.png);
 
+      }
 
+    }
 
+    &.four {
 
+      .content {
 
+        background-image: url(/img/product-intradermik-service-bg-04.png);
 
+      }
 
+    }
 
+
 
+    .content {
 
+      width: 560px;
 
+      height: 480px;
 
+      box-sizing: border-box;
 
+      background: rgba(0, 0, 0, 0.39);
 
+      padding: 70px 60px 0;
 
+      background-repeat: no-repeat;
 
+      background-position: center;
 
+      background-size: 560px;
 
+
 
+      .title {
 
+        color: #fff;
 
+        margin-bottom: 20px;
 
+      }
 
+
 
+      .mb24 {
 
+        margin-bottom: 40px;
 
+      }
 
+
 
+      .mb56 {
 
+        margin-bottom: 56px;
 
+      }
 
+
 
+      .lh40 {
 
+        line-height: 40px;
 
+      }
 
+
 
+      .lh28 {
 
+        line-height: 28px;
 
+      }
 
+
 
+      .subtitle {
 
+        font-size: 16px;
 
+        color: #fff;
 
+      }
 
+
 
+      .detail {
 
+        color: #fff;
 
+        font-size: 16px;
 
+
 
+        li {
 
+          margin-top: 32px;
 
+        }
 
+
 
+        .label {
 
+          margin-bottom: 16px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 75 - 0
css/product-kestos.css
Bestand weergeven 

@@ -0,0 +1,75 @@
 
+.main .service {
 
+  margin-top: 140px;
 
+}
 
+.main .service .container {
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+.main .service .item {
 
+  width: 558px;
 
+}
 
+.main .service .cover {
 
+  width: 558px;
 
+  height: 418px;
 
+}
 
+.main .service .cover img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main .service .content .title {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+  margin: 40px 0 16px;
 
+}
 
+.main .service .content .detail {
 
+  text-align: justify;
 
+  line-height: 32px;
 
+}
 
+.main .service .content .detail .mr40 {
 
+  margin-right: 40px;
 
+}
 
+.main .service .content .detail span {
 
+  color: #505050;
 
+  margin-right: 25px;
 
+}
 
+.main .service .content .detail span::before {
 
+  content: "";
 
+  display: inline-block;
 
+  vertical-align: -5px;
 
+  width: 20px;
 
+  height: 20px;
 
+  background: url(/img/icon-right.png) no-repeat center;
 
+  background-size: 20px;
 
+  margin-right: 8px;
 
+}
 
+.main .about {
 
+  height: 600px;
 
+  background: url(/img/product-kestos-bg-about.png) no-repeat center;
 
+  background-size: auto 600px;
 
+  padding-top: 128px;
 
+  text-align: center;
 
+  box-sizing: border-box;
 
+  margin-top: 140px;
 
+}
 
+.main .about .title {
 
+  font-size: 24px;
 
+  color: #fff;
 
+}
 
+.main .about .line {
 
+  width: 32px;
 
+  height: 2px;
 
+  background-color: #fff;
 
+  margin: 64px auto;
 
+}
 
+.main .about .description {
 
+  width: 804px;
 
+  font-size: 16px;
 
+  line-height: 48px;
 
+  margin: 0 auto;
 
+  color: #fff;
 
+}
 
+
 
+.footer {
 
+  margin-top: 0;
 
+}

+ 86 - 0
css/product-kestos.scss
Bestand weergeven 

@@ -0,0 +1,86 @@
 
+.main {
 
+  .service {
 
+    margin-top: 140px;
 
+    .container {
 
+      display: flex;
 
+      justify-content: space-between;
 
+    }
 
+
 
+    .item {
 
+      width: 558px;
 
+    }
 
+
 
+    .cover {
 
+      width: 558px;
 
+      height: 418px;
 
+
 
+      img {
 
+        display: block;
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+    }
 
+    .content {
 
+      .title {
 
+        font-size: 24px;
 
+        font-weight: bold;
 
+        margin: 40px 0 16px;
 
+      }
 
+      .detail {
 
+        text-align: justify;
 
+        line-height: 32px;
 
+
 
+        .mr40 {
 
+          margin-right: 40px;
 
+        }
 
+
 
+        span {
 
+          color: #505050;
 
+          margin-right: 25px;
 
+
 
+          &::before {
 
+            content: '';
 
+            display: inline-block;
 
+            vertical-align: -5px;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: url(/img/icon-right.png) no-repeat center;
 
+            background-size: 20px;
 
+            margin-right: 8px;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .about {
 
+    height: 600px;
 
+    background: url(/img/product-kestos-bg-about.png) no-repeat center;
 
+    background-size: auto 600px;
 
+    padding-top: 128px;
 
+    text-align: center;
 
+    box-sizing: border-box;
 
+    margin-top: 140px;
 
+    .title {
 
+      font-size: 24px;
 
+      color: #fff;
 
+    }
 
+    .line {
 
+      width: 32px;
 
+      height: 2px;
 
+      background-color: #fff;
 
+      margin: 64px auto;
 
+    }
 
+    .description {
 
+      width: 804px;
 
+      font-size: 16px;
 
+      line-height: 48px;
 
+      margin: 0 auto;
 
+      color: #fff;
 
+    }
 
+  }
 
+}
 
+
 
+.footer {
 
+  margin-top: 0;
 
+}

+ 95 - 0
css/product-mesobiolift.css
Bestand weergeven 

@@ -0,0 +1,95 @@
 
+.main .about {
 
+  margin-top: 100px;
 
+}
 
+.main .about .container {
 
+  position: relative;
 
+}
 
+.main .about .cover {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  width: 680px;
 
+  height: 452px;
 
+  background: pink;
 
+}
 
+.main .about .content {
 
+  box-sizing: border-box;
 
+}
 
+.main .about .content .title {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+  padding: 10px 0 20px;
 
+  text-align: center;
 
+}
 
+.main .about .content .subtitle {
 
+  font-size: 16px;
 
+  text-align: center;
 
+}
 
+.main .about .content .title,
 
+.main .about .content .subtitle,
 
+.main .about .content .section {
 
+  padding-left: 735px;
 
+}
 
+.main .about .content .section {
 
+  height: 427px;
 
+  padding-left: 735px;
 
+  padding-top: 52px;
 
+  padding-right: 40px;
 
+  margin-top: 53px;
 
+  background: #f7f7f7;
 
+}
 
+.main .about .content .section .description {
 
+  line-height: 32px;
 
+}
 
+.main .about .content .section ul li {
 
+  line-height: 40px;
 
+}
 
+.main .service {
 
+  margin-top: 180px;
 
+}
 
+.main .service.one .content {
 
+  background-image: url(/img/service-title-bg-one.png);
 
+}
 
+.main .service.one .cover {
 
+  height: 578px;
 
+}
 
+.main .service.two .content {
 
+  background-image: url(/img/service-title-bg-two.png);
 
+}
 
+.main .service.two .cover {
 
+  height: 700px;
 
+}
 
+.main .service .cover {
 
+  width: 567px;
 
+  background-color: pink;
 
+}
 
+.main .service .content {
 
+  width: 560px;
 
+  box-sizing: border-box;
 
+  padding-top: 113px;
 
+  background-repeat: no-repeat;
 
+  background-position: left top;
 
+}
 
+.main .service .content .title {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+}
 
+.main .service .content .line {
 
+  height: 3px;
 
+  width: 32px;
 
+  background-color: #f7f7f7;
 
+  margin: 32px 0;
 
+}
 
+.main .service .content .description {
 
+  font-size: 16px;
 
+  line-height: 40px;
 
+}
 
+.main .service .content .detail {
 
+  margin-top: 32px;
 
+}
 
+.main .service .content .detail li {
 
+  line-height: 40px;
 
+}
 
+.main .service .content .detail .text {
 
+  color: #999;
 
+}

+ 115 - 0
css/product-mesobiolift.scss
Bestand weergeven 

@@ -0,0 +1,115 @@
 
+.main {
 
+  .about {
 
+    margin-top: 100px;
 
+    .container {
 
+      position: relative;
 
+    }
 
+    .cover {
 
+      position: absolute;
 
+      left: 0;
 
+      top: 0;
 
+      width: 680px;
 
+      height: 452px;
 
+      background: pink;
 
+    }
 
+
 
+    .content {
 
+      box-sizing: border-box;
 
+
 
+      .title {
 
+        font-size: 24px;
 
+        font-weight: bold;
 
+        padding: 10px 0 20px;
 
+        text-align: center;
 
+      }
 
+
 
+      .subtitle {
 
+        font-size: 16px;
 
+        text-align: center;
 
+      }
 
+
 
+      .title,
 
+      .subtitle,
 
+      .section {
 
+        padding-left: 735px;
 
+      }
 
+      .section {
 
+        height: 427px;
 
+        padding-left: 735px;
 
+        padding-top: 52px;
 
+        padding-right: 40px;
 
+        margin-top: 53px;
 
+        background: #f7f7f7;
 
+        .description {
 
+          line-height: 32px;
 
+        }
 
+        ul {
 
+          li {
 
+            line-height: 40px;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .service {
 
+    margin-top: 180px;
 
+
 
+    &.one {
 
+      .content {
 
+        background-image: url(/img/service-title-bg-one.png);
 
+      }
 
+
 
+      .cover {
 
+        height: 578px;
 
+      }
 
+    }
 
+    &.two {
 
+      .content {
 
+        background-image: url(/img/service-title-bg-two.png);
 
+      }
 
+
 
+      .cover {
 
+        height: 700px;
 
+      }
 
+    }
 
+
 
+    .cover {
 
+      width: 567px;
 
+      background-color: pink;
 
+    }
 
+
 
+    .content {
 
+      width: 560px;
 
+      box-sizing: border-box;
 
+      padding-top: 113px;
 
+
 
+      background-repeat: no-repeat;
 
+      background-position: left top;
 
+      .title {
 
+        font-size: 24px;
 
+        font-weight: bold;
 
+      }
 
+      .line {
 
+        height: 3px;
 
+        width: 32px;
 
+        background-color: #f7f7f7;
 
+        margin: 32px 0;
 
+      }
 
+      .description {
 
+        font-size: 16px;
 
+        line-height: 40px;
 
+      }
 
+      .detail {
 
+        margin-top: 32px;
 
+        li {
 
+          line-height: 40px;
 
+        }
 
+
 
+        .text {
 
+          color: #999;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 135 - 0
css/product-rollaction.css
Bestand weergeven 

@@ -0,0 +1,135 @@
 
+.main .about {
 
+  margin-top: 100px;
 
+}
 
+.main .about .container {
 
+  height: 592px;
 
+  position: relative;
 
+}
 
+.main .about .item {
 
+  position: absolute;
 
+  width: 286px;
 
+  height: 286px;
 
+  background-color: pink;
 
+}
 
+.main .about .item:nth-child(3) {
 
+  position: relative;
 
+  width: 592px;
 
+  height: 592px;
 
+  margin: 0 auto;
 
+}
 
+.main .about .item:nth-child(1), .main .about .item:nth-child(2) {
 
+  left: 0;
 
+}
 
+.main .about .item:nth-child(1), .main .about .item:nth-child(4) {
 
+  top: 0;
 
+}
 
+.main .about .item:nth-child(4), .main .about .item:nth-child(5) {
 
+  right: 0;
 
+}
 
+.main .about .item:nth-child(2), .main .about .item:nth-child(5) {
 
+  bottom: 0;
 
+}
 
+.main .about .item .cover {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main .about .item .cover img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main .about .item:hover .active {
 
+  opacity: 1;
 
+}
 
+.main .about .item .active {
 
+  opacity: 0;
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  background: rgba(0, 0, 0, 0.5);
 
+  text-align: center;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  flex-direction: column;
 
+  transition: all 0.4s;
 
+}
 
+.main .about .item .active .title {
 
+  font-size: 24px;
 
+  color: #fff;
 
+}
 
+.main .about .item .active .line {
 
+  width: 32px;
 
+  height: 2px;
 
+  background-color: #ffffff;
 
+  margin: 40px auto;
 
+}
 
+.main .about .item .active .detail {
 
+  font-size: 16px;
 
+  color: #fff;
 
+  line-height: 40px;
 
+  padding: 0 70px;
 
+}
 
+.main .service {
 
+  margin-top: 140px;
 
+}
 
+.main .service .cover {
 
+  width: 568px;
 
+  height: 568px;
 
+  background: pink;
 
+}
 
+.main .service .cover img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main .service.one .content {
 
+  padding-top: 113px;
 
+  background-image: url(/img/service-title-bg-one.png);
 
+}
 
+.main .service.two {
 
+  background: #f7f7f7;
 
+  margin-top: 319px;
 
+}
 
+.main .service.two .container {
 
+  position: relative;
 
+}
 
+.main .service.two .container .cover {
 
+  position: absolute;
 
+  bottom: 76px;
 
+  left: 0;
 
+}
 
+.main .service.two .container .content {
 
+  padding-top: 173px;
 
+  height: 456px;
 
+  background-image: url(/img/service-title-bg-two.png);
 
+  background-position: left 60px;
 
+}
 
+.main .service.three .content {
 
+  padding-top: 113px;
 
+  background-image: url(/img/service-title-bg-three.png);
 
+}
 
+.main .service .content {
 
+  width: 560px;
 
+  text-align: justify;
 
+  background-repeat: no-repeat;
 
+  box-sizing: border-box;
 
+}
 
+.main .service .content .title {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+}
 
+.main .service .content .line {
 
+  width: 32px;
 
+  height: 3px;
 
+  background-color: #e8e8e8;
 
+  margin: 32px 0;
 
+}
 
+.main .service .content .text {
 
+  color: #999;
 
+}
 
+.main .service .content .lh40 {
 
+  line-height: 40px;
 
+}

+ 165 - 0
css/product-rollaction.scss
Bestand weergeven 

@@ -0,0 +1,165 @@
 
+.main {
 
+  .about {
 
+    margin-top: 100px;
 
+    .container {
 
+      height: 592px;
 
+      position: relative;
 
+    }
 
+    .item {
 
+      position: absolute;
 
+      width: 286px;
 
+      height: 286px;
 
+      background-color: pink;
 
+
 
+      &:nth-child(3) {
 
+        position: relative;
 
+        width: 592px;
 
+        height: 592px;
 
+        margin: 0 auto;
 
+      }
 
+
 
+      &:nth-child(1),
 
+      &:nth-child(2) {
 
+        left: 0;
 
+      }
 
+
 
+      &:nth-child(1),
 
+      &:nth-child(4) {
 
+        top: 0;
 
+      }
 
+
 
+      &:nth-child(4),
 
+      &:nth-child(5) {
 
+        right: 0;
 
+      }
 
+
 
+      &:nth-child(2),
 
+      &:nth-child(5) {
 
+        bottom: 0;
 
+      }
 
+
 
+      .cover {
 
+        width: 100%;
 
+        height: 100%;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
+      }
 
+
 
+      &:hover {
 
+        .active {
 
+          opacity: 1;
 
+        }
 
+      }
 
+
 
+      .active {
 
+        opacity: 0;
 
+        position: absolute;
 
+        top: 0;
 
+        left: 0;
 
+        width: 100%;
 
+        height: 100%;
 
+        background: rgba(0, 0, 0, 0.5);
 
+        text-align: center;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        flex-direction: column;
 
+        transition: all 0.4s;
 
+        .title {
 
+          font-size: 24px;
 
+          color: #fff;
 
+        }
 
+        .line {
 
+          width: 32px;
 
+          height: 2px;
 
+          background-color: #ffffff;
 
+          margin: 40px auto;
 
+        }
 
+        .detail {
 
+          font-size: 16px;
 
+          color: #fff;
 
+          line-height: 40px;
 
+          padding: 0 70px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .service {
 
+    margin-top: 140px;
 
+
 
+    .cover {
 
+      width: 568px;
 
+      height: 568px;
 
+      background: pink;
 
+      img {
 
+        display: block;
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+    }
 
+
 
+    &.one {
 
+      .content {
 
+        padding-top: 113px;
 
+        background-image: url(/img/service-title-bg-one.png);
 
+      }
 
+    }
 
+
 
+    &.two {
 
+      background: #f7f7f7;
 
+      margin-top: 319px;
 
+
 
+      .container {
 
+        position: relative;
 
+        .cover {
 
+          position: absolute;
 
+          bottom: 76px;
 
+          left: 0;
 
+        }
 
+
 
+        .content {
 
+          padding-top: 173px;
 
+          height: 456px;
 
+          background-image: url(/img/service-title-bg-two.png);
 
+          background-position: left 60px;
 
+        }
 
+      }
 
+    }
 
+
 
+    &.three {
 
+      .content {
 
+        padding-top: 113px;
 
+        background-image: url(/img/service-title-bg-three.png);
 
+      }
 
+    }
 
+
 
+    .content {
 
+      width: 560px;
 
+      text-align: justify;
 
+      background-repeat: no-repeat;
 
+      box-sizing: border-box;
 
+      .title {
 
+        font-size: 24px;
 
+        font-weight: bold;
 
+      }
 
+      .line {
 
+        width: 32px;
 
+        height: 3px;
 
+        background-color: #e8e8e8;
 
+        margin: 32px 0;
 
+      }
 
+
 
+      .text {
 
+        color: #999;
 
+      }
 
+
 
+      .lh40 {
 
+        line-height: 40px;
 
+      }
 
+    }
 
+  }
 
+}

BIN
img/about-banner.png
Bestand weergeven


BIN
img/about-honor.png
Bestand weergeven


BIN
img/about-icon-01.png
Bestand weergeven


BIN
img/about-icon-02.png
Bestand weergeven


BIN
img/about-icon-03.png
Bestand weergeven


BIN
img/about-team-01.png
Bestand weergeven


BIN
img/about-team-02.png
Bestand weergeven


BIN
img/brand-logo.jpg
Bestand weergeven


BIN
img/brand-ross-ad.jpg
Bestand weergeven


BIN
img/brand-ross-app-01.png
Bestand weergeven


BIN
img/brand-ross-app-02.png
Bestand weergeven


BIN
img/brand-ross-app-03.png
Bestand weergeven


BIN
img/brand-ross-app-04.png
Bestand weergeven


BIN
img/brand-ross-app-05.png
Bestand weergeven


BIN
img/brand-ross-app-06.png
Bestand weergeven


BIN
img/brand-ross-app-07.png
Bestand weergeven


BIN
img/brand-ross-concat.png
Bestand weergeven


BIN
img/brand-ross-map.png
Bestand weergeven


BIN
img/brand-ross-therapy-active-01.png
Bestand weergeven


BIN
img/brand-ross-therapy-active-02.png
Bestand weergeven


BIN
img/brand-ross-therapy-active-03.png
Bestand weergeven


BIN
img/brand-ross-therapy-active-04.png
Bestand weergeven


BIN
img/brand-ross-therapy-active-05.png
Bestand weergeven


BIN
img/brand-ross-therapy-cover-01.png
Bestand weergeven


BIN
img/brand-ross-therapy-cover-02.png
Bestand weergeven


BIN
img/brand-ross-therapy-cover-03.png
Bestand weergeven


BIN
img/brand-ross-therapy-cover-04.png
Bestand weergeven


BIN
img/brand-ross-therapy-cover-05.png
Bestand weergeven


BIN
img/brand-ross-video-cover.png
Bestand weergeven


BIN
img/brand-section-bg.png
Bestand weergeven


BIN
img/case-banner.png
Bestand weergeven


BIN
img/case-bg.png
Bestand weergeven


BIN
img/case-content-01.png
Bestand weergeven


BIN
img/case-content-02.png
Bestand weergeven


BIN
img/case-content-03.png
Bestand weergeven


BIN
img/case-content-04.png
Bestand weergeven


BIN
img/case-content-05.png
Bestand weergeven


BIN
img/case-content-06.png
Bestand weergeven


BIN
img/case-content-07.png
Bestand weergeven


BIN
img/case-cover-01.png
Bestand weergeven


BIN
img/case-cover-02.png
Bestand weergeven


BIN
img/case-cover-03.png
Bestand weergeven


BIN
img/case-cover-04.png
Bestand weergeven


BIN
img/case-cover-05.png
Bestand weergeven


BIN
img/case-cover-06.png
Bestand weergeven


BIN
img/case-cover-07.png
Bestand weergeven


BIN
img/icon-arrow-left.png
Bestand weergeven


BIN
img/icon-arrow-right.png
Bestand weergeven


BIN
img/icon-comma-01.png
Bestand weergeven


BIN
img/icon-comma-02.png
Bestand weergeven


BIN
img/icon-company.png
Bestand weergeven


BIN
img/icon-doctor.png
Bestand weergeven


BIN
img/icon-heart.png
Bestand weergeven


BIN
img/icon-right.png
Bestand weergeven


BIN
img/icon-star.png
Bestand weergeven


BIN
img/product-diactivplvs-about.png
Bestand weergeven


BIN
img/product-diactivplvs-banner.png
Bestand weergeven


BIN
img/product-diactivplvs-service-01.png
Bestand weergeven


BIN
img/product-diactivplvs-service-02.png
Bestand weergeven


BIN
img/product-diactivplvs-service-03.png
Bestand weergeven


BIN
img/product-diactivplvs-service-04.png
Bestand weergeven


BIN
img/product-intradermik-about.png
Bestand weergeven


BIN
img/product-intradermik-banner.png
Bestand weergeven


BIN
img/product-intradermik-service-bg-01.png
Bestand weergeven


BIN
img/product-intradermik-service-bg-02.png
Bestand weergeven


BIN
img/product-intradermik-service-bg-03.png
Bestand weergeven


BIN
img/product-intradermik-service-bg-04.png
Bestand weergeven


BIN
img/product-intradermik-service-cover-01.png
Bestand weergeven


BIN
img/product-intradermik-service-cover-02.png
Bestand weergeven


BIN
img/product-intradermik-service-cover-03.png
Bestand weergeven


BIN
img/product-intradermik-service-cover-04.png
Bestand weergeven


Some files were not shown because too many files changed in this diff