Ana Sayfa Keşfet Yardım
Giriş Yap
zhengjinyi
/
caimei-authentic-ross-static
2
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

页面提交

yuwenjun1997 2 yıl önce
ebeveyn
995df8e431
işleme
ab1b9fb918
80 değiştirilmiş dosya ile 2419 ekleme ve 90 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 19 2
      about.html
  2. 132 0
      brand-detail.html
  3. 19 2
      brand-ross.html
  4. 19 2
      brand.html
  5. 163 0
      case.html
  6. 90 27
      css/base.css
  7. 110 24
      css/base.scss
  8. 24 0
      css/brand-detail.css
  9. 26 0
      css/brand-detail.scss
  10. 58 0
      css/case.css
  11. 65 0
      css/case.scss
  12. 12 2
      css/product-diactivplvs.css
  13. 11 2
      css/product-diactivplvs.scss
  14. 56 5
      css/product-intradermik.css
  15. 72 5
      css/product-intradermik.scss
  16. 75 0
      css/product-kestos.css
  17. 86 0
      css/product-kestos.scss
  18. 95 0
      css/product-mesobiolift.css
  19. 115 0
      css/product-mesobiolift.scss
  20. 135 0
      css/product-rollaction.css
  21. 165 0
      css/product-rollaction.scss
  22. BIN
      img/case-banner.png
  23. BIN
      img/case-bg.png
  24. BIN
      img/case-content-01.png
  25. BIN
      img/case-content-02.png
  26. BIN
      img/case-content-03.png
  27. BIN
      img/case-content-04.png
  28. BIN
      img/case-content-05.png
  29. BIN
      img/case-content-06.png
  30. BIN
      img/case-content-07.png
  31. BIN
      img/case-cover-01.png
  32. BIN
      img/case-cover-02.png
  33. BIN
      img/case-cover-03.png
  34. BIN
      img/case-cover-04.png
  35. BIN
      img/case-cover-05.png
  36. BIN
      img/case-cover-06.png
  37. BIN
      img/case-cover-07.png
  38. BIN
      img/icon-right.png
  39. BIN
      img/product-diactivplvs-about.png
  40. BIN
      img/product-diactivplvs-banner.png
  41. BIN
      img/product-diactivplvs-service-01.png
  42. BIN
      img/product-diactivplvs-service-02.png
  43. BIN
      img/product-diactivplvs-service-03.png
  44. BIN
      img/product-diactivplvs-service-04.png
  45. BIN
      img/product-intradermik-about.png
  46. BIN
      img/product-intradermik-banner.png
  47. BIN
      img/product-intradermik-service-bg-01.png
  48. BIN
      img/product-intradermik-service-bg-02.png
  49. BIN
      img/product-intradermik-service-bg-03.png
  50. BIN
      img/product-intradermik-service-bg-04.png
  51. BIN
      img/product-intradermik-service-cover-01.png
  52. BIN
      img/product-intradermik-service-cover-02.png
  53. BIN
      img/product-intradermik-service-cover-03.png
  54. BIN
      img/product-intradermik-service-cover-04.png
  55. BIN
      img/product-kestos-banner.png
  56. BIN
      img/product-kestos-bg-about.png
  57. BIN
      img/product-kestos-service-01.png
  58. BIN
      img/product-kestos-service-02.png
  59. BIN
      img/product-mesobiolift-about.png
  60. BIN
      img/product-mesobiolift-banner.png
  61. BIN
      img/product-mesobiolift-service-01.png
  62. BIN
      img/product-mesobiolift-service-02.png
  63. BIN
      img/product-rollaction-about-01.png
  64. BIN
      img/product-rollaction-about-02.png
  65. BIN
      img/product-rollaction-about-03.png
  66. BIN
      img/product-rollaction-about-04.png
  67. BIN
      img/product-rollaction-about-05.png
  68. BIN
      img/product-rollaction-banner.png
  69. BIN
      img/product-rollaction-service-01.png
  70. BIN
      img/product-rollaction-service-02.png
  71. BIN
      img/product-rollaction-service-03.png
  72. BIN
      img/service-title-bg-one.png
  73. BIN
      img/service-title-bg-three.png
  74. BIN
      img/service-title-bg-two.png
  75. 19 2
      index.html
  76. 109 5
      product-diactivplvs.html
  77. 178 12
      product-intradermik.html
  78. 166 0
      product-kestos.html
  79. 189 0
      product-mesobiolift.html
  80. 211 0
      product-rollaction.html

+ 19 - 2
about.html
Dosyayı Görüntüle 

@@ -17,10 +17,27 @@
 
           <h1>艾斯佰丽</h1>
 
           <img src="./img/logo.png" alt="艾斯佰丽" />
 
         </div>
 
-        <ul class="nav">
 
+        <ul class="nav clearfix">
 
           <li class="active"><a href="#">首页</a></li>
 
           <li><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>

+ 132 - 0
brand-detail.html
Dosyayı Görüntüle 

@@ -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>

+ 19 - 2
brand-ross.html
Dosyayı Görüntüle 

@@ -18,10 +18,27 @@
 
           <h1>艾斯佰丽</h1>
 
           <img src="./img/logo.png" alt="艾斯佰丽" />
 
         </div>
 
-        <ul class="nav">
 
+        <ul class="nav clearfix">
 
           <li class="active"><a href="#">首页</a></li>
 
           <li><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>

+ 19 - 2
brand.html
Dosyayı Görüntüle 

@@ -17,10 +17,27 @@
 
           <h1>艾斯佰丽</h1>
 
           <img src="./img/logo.png" alt="艾斯佰丽" />
 
         </div>
 
-        <ul class="nav">
 
+        <ul class="nav clearfix">
 
           <li class="active"><a href="#">首页</a></li>
 
           <li><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>

+ 163 - 0
case.html
Dosyayı Görüntüle 

@@ -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>

+ 90 - 27
css/base.css
Dosyayı Görüntüle 

@@ -113,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:hover .menu {
 
+  display: block;
 
+}
 
+.header .nav > li > a {
 
+  display: block;
 
+  line-height: 68px;
 
 }
 
-.header .nav li::after {
 
+.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;
 
+  transform: translateX(-50%);
 
 }
 
-.header .nav li.active::after {
 
-  opacity: 1;
 
-}
 
-.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 {

+ 110 - 24
css/base.scss
Dosyayı Görüntüle 

@@ -114,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 0.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 0.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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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;
 
+    }
 
+  }
 
+}

+ 58 - 0
css/case.css
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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;
 
+}

+ 12 - 2
css/product-diactivplvs.css
Dosyayı Görüntüle 

@@ -1,3 +1,6 @@
 
+.main {
 
+  margin-top: -80px;
 
+}
 
 .main .title {
 
   font-size: 24px;
 
   font-weight: bold;
 
@@ -46,12 +49,19 @@
 
   margin-bottom: 80px;
 
 }
 
 .main .service .cover {
 
+  position: relative;
 
   width: 646px;
 
   height: 490px;
 
   background: #fff;
 
-  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
 
   box-sizing: border-box;
 
-  padding: 24px;
 
+}
 
+.main .service .cover img {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
+  display: block;
 
+  width: 700px;
 
 }
 
 .main .service .content {
 
   width: 416px;

+ 11 - 2
css/product-diactivplvs.scss
Dosyayı Görüntüle 

@@ -1,4 +1,5 @@
 
 .main {
 
+  margin-top: -80px;
 
   .title {
 
     font-size: 24px;
 
     font-weight: bold;
 
@@ -50,12 +51,20 @@
 
     margin-top: 180px;
 
     margin-bottom: 80px;
 
     .cover {
 
+      position: relative;
 
       width: 646px;
 
       height: 490px;
 
       background: #fff;
 
-      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
 
       box-sizing: border-box;
 
-      padding: 24px;
 
+
 
+      img {
 
+        position: absolute;
 
+        left: 50%;
 
+        top: 50%;
 
+        transform: translate(-50%, -50%);
 
+        display: block;
 
+        width: 700px;
 
+      }
 
     }
 
     .content {
 
       width: 416px;

+ 56 - 5
css/product-intradermik.css
Dosyayı Görüntüle 

@@ -1,7 +1,13 @@
 
+.main {
 
+  margin-top: -80px;
 
+}
 
 .main .title {
 
   font-size: 24px;
 
   font-weight: bold;
 
 }
 
+.main .about {
 
+  margin-bottom: 180px;
 
+}
 
 .main .about .cover {
 
   width: 614px;
 
   height: 412px;
 
@@ -42,17 +48,62 @@
 
   background: #d8d8d8;
 
 }
 
 .main .service {
 
-  margin-top: 180px;
 
-  margin-bottom: 80px;
 
+  margin: 80px 0;
 
 }
 
 .main .service .cover {
 
   width: 640px;
 
   height: 480px;
 
   box-sizing: border-box;
 
-  padding: 24px;
 
-  background-color: pink;
 
+}
 
+.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;
 
-  background: #0688d2;
 
+  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;
 
 }

+ 72 - 5
css/product-intradermik.scss
Dosyayı Görüntüle 

@@ -1,10 +1,12 @@
 
 .main {
 
+  margin-top: -80px;
 
   .title {
 
     font-size: 24px;
 
     font-weight: bold;
 
   }
 
 
   .about {
 
+    margin-bottom: 180px;
 
     .cover {
 
       width: 614px;
 
       height: 412px;
 
@@ -47,18 +49,83 @@
 
   }
 
 
   .service {
 
-    margin-top: 180px;
 
-    margin-bottom: 80px;
 
+    margin: 80px 0;
 
+
 
     .cover {
 
       width: 640px;
 
       height: 480px;
 
       box-sizing: border-box;
 
-      padding: 24px;
 
-      background-color: pink;
 
     }
 
+
 
+    &.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;
 
-      background: #0688d2;
 
+      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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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/case-banner.png
Dosyayı Görüntüle


BIN
img/case-bg.png
Dosyayı Görüntüle


BIN
img/case-content-01.png
Dosyayı Görüntüle


BIN
img/case-content-02.png
Dosyayı Görüntüle


BIN
img/case-content-03.png
Dosyayı Görüntüle


BIN
img/case-content-04.png
Dosyayı Görüntüle


BIN
img/case-content-05.png
Dosyayı Görüntüle


BIN
img/case-content-06.png
Dosyayı Görüntüle


BIN
img/case-content-07.png
Dosyayı Görüntüle


BIN
img/case-cover-01.png
Dosyayı Görüntüle


BIN
img/case-cover-02.png
Dosyayı Görüntüle


BIN
img/case-cover-03.png
Dosyayı Görüntüle


BIN
img/case-cover-04.png
Dosyayı Görüntüle


BIN
img/case-cover-05.png
Dosyayı Görüntüle


BIN
img/case-cover-06.png
Dosyayı Görüntüle


BIN
img/case-cover-07.png
Dosyayı Görüntüle


BIN
img/icon-right.png
Dosyayı Görüntüle


BIN
img/product-diactivplvs-about.png
Dosyayı Görüntüle


BIN
img/product-diactivplvs-banner.png
Dosyayı Görüntüle


BIN
img/product-diactivplvs-service-01.png
Dosyayı Görüntüle


BIN
img/product-diactivplvs-service-02.png
Dosyayı Görüntüle


BIN
img/product-diactivplvs-service-03.png
Dosyayı Görüntüle


BIN
img/product-diactivplvs-service-04.png
Dosyayı Görüntüle


BIN
img/product-intradermik-about.png
Dosyayı Görüntüle


BIN
img/product-intradermik-banner.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-bg-01.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-bg-02.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-bg-03.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-bg-04.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-cover-01.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-cover-02.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-cover-03.png
Dosyayı Görüntüle


BIN
img/product-intradermik-service-cover-04.png
Dosyayı Görüntüle


BIN
img/product-kestos-banner.png
Dosyayı Görüntüle


BIN
img/product-kestos-bg-about.png
Dosyayı Görüntüle


BIN
img/product-kestos-service-01.png
Dosyayı Görüntüle


BIN
img/product-kestos-service-02.png
Dosyayı Görüntüle


BIN
img/product-mesobiolift-about.png
Dosyayı Görüntüle


BIN
img/product-mesobiolift-banner.png
Dosyayı Görüntüle


BIN
img/product-mesobiolift-service-01.png
Dosyayı Görüntüle


BIN
img/product-mesobiolift-service-02.png
Dosyayı Görüntüle


BIN
img/product-rollaction-about-01.png
Dosyayı Görüntüle


BIN
img/product-rollaction-about-02.png
Dosyayı Görüntüle


BIN
img/product-rollaction-about-03.png
Dosyayı Görüntüle


BIN
img/product-rollaction-about-04.png
Dosyayı Görüntüle


BIN
img/product-rollaction-about-05.png
Dosyayı Görüntüle


BIN
img/product-rollaction-banner.png
Dosyayı Görüntüle


BIN
img/product-rollaction-service-01.png
Dosyayı Görüntüle


BIN
img/product-rollaction-service-02.png
Dosyayı Görüntüle


BIN
img/product-rollaction-service-03.png
Dosyayı Görüntüle


BIN
img/service-title-bg-one.png
Dosyayı Görüntüle


BIN
img/service-title-bg-three.png
Dosyayı Görüntüle


BIN
img/service-title-bg-two.png
Dosyayı Görüntüle


+ 19 - 2
index.html
Dosyayı Görüntüle 

@@ -18,10 +18,27 @@
 
           <h1>艾斯佰丽</h1>
 
           <img src="./img/logo.png" alt="艾斯佰丽" />
 
         </div>
 
-        <ul class="nav">
 
+        <ul class="nav clearfix">
 
           <li class="active"><a href="#">首页</a></li>
 
           <li><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>

+ 109 - 5
product-diactivplvs.html
Dosyayı Görüntüle 

@@ -10,12 +10,54 @@
 
     <link rel="stylesheet" href="./css/product-diactivplvs.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/product-diactivplvs-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
     <div class="main">
 
       <!-- 关于 Diactivplvs start-->
 
       <div class="about">
 
         <div class="container clearfix">
 
           <div class="cover fl">
 
-            <img src="" alt="" />
 
+            <img src="/img/product-diactivplvs-about.png" alt="" />
 
           </div>
 
           <div class="content fr">
 
             <div class="title">Diactivplvs</div>
 
@@ -35,7 +77,7 @@
 
       <div class="service">
 
         <div class="container clearfix">
 
           <div class="cover fr">
 
-            <img src="" alt="" />
 
+            <img src="/img/product-diactivplvs-service-01.png" alt="透热448KHZ来自细胞核心运动" />
 
           </div>
 
           <div class="content fl">
 
             <div class="title">透热448KHZ来自细胞核心运动</div>
 
@@ -59,7 +101,7 @@
 
       <div class="service">
 
         <div class="container clearfix">
 
           <div class="cover fl">
 
-            <img src="" alt="" />
 
+            <img src="/img/product-diactivplvs-service-02.png" alt="电刺激" />
 
           </div>
 
           <div class="content fr">
 
             <div class="title">电刺激</div>
 
@@ -97,7 +139,7 @@
 
       <div class="service">
 
         <div class="container clearfix">
 
           <div class="cover fr">
 
-            <img src="" alt="" />
 
+            <img src="/img/product-diactivplvs-service-03.png" alt="电针灸" />
 
           </div>
 
           <div class="content fl">
 
             <div class="title">电针灸</div>
 
@@ -128,7 +170,7 @@
 
       <div class="service">
 
         <div class="container clearfix">
 
           <div class="cover fl">
 
-            <img src="" alt="" />
 
+            <img src="/img/product-diactivplvs-service-04.png" alt="盆底理疗的透热应用女性私密美学" />
 
           </div>
 
           <div class="content fr">
 
             <div class="title">盆底理疗的透热应用女性私密美学</div>
 
@@ -146,5 +188,67 @@
 
       </div>
 
       <!-- 服务四 end -->
 
     </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>

+ 178 - 12
product-intradermik.html
Dosyayı Görüntüle 

@@ -10,12 +10,54 @@
 
     <link rel="stylesheet" href="./css/product-intradermik.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/product-intradermik-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
     <div class="main">
 
       <!-- 关于 Diactivplvs start-->
 
       <div class="about">
 
         <div class="container clearfix">
 
           <div class="cover fl">
 
-            <img src="" alt="" />
 
+            <img src="/img/product-intradermik-about.png" alt="" />
 
           </div>
 
           <div class="content fr">
 
             <div class="title">INTRADERMIK</div>
 
@@ -32,25 +74,149 @@
 
       </div>
 
       <!-- 关于 Diactivplvs end-->
 
 
-      <!-- 服务 一 -->
 
-      <div class="service">
 
+      <!-- 服务一 start -->
 
+      <div class="service one">
 
         <div class="container clearfix">
 
-          <div class="cover"><img src="" alt="" /></div>
 
-          <div class="content">
 
-            <div class="title"></div>
 
+          <div class="cover fr"><img src="/img/product-intradermik-service-cover-01.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title mb56">肌肉重塑疗法</div>
 
             <ul class="detail">
 
-              <li class="lh40 mt32">
 
-                -
 
-                电容：电流以位移电流形式，让分子间摩擦运动能够增加温度，主要作用于真皮层和肌肉层，修复皮肤的受损和肌肉的理疗。
 
+              <li>
 
+                <div class="label">- 电脂解</div>
 
+                <div class="text lh28">
 
+                  具有独特的脉冲低频可变电流——约18Hz，直接作用于脂肪细胞及其所含的脂肪，导致其破坏并促其去除。
 
+                </div>
 
               </li>
 
-              <li class="lh40 mt32">
 
-                -
 
-                电阻：特定的频率激活细胞，让细胞产生跨膜运动，主要作用于脂肪层、骨骼、肌腱和脏腑，改善身体各种亚健康问题及修复身体内部组织。
 
+              <li>
 
+                <div class="label">- 电紧致</div>
 
+                <div class="text lh28">30多种可变电流，可强烈具有选择性地产生肌肉收缩和肌肉放松。</div>
 
               </li>
 
             </ul>
 
           </div>
 
         </div>
 
       </div>
 
+      <!-- 服务一 end -->
 
+
 
+      <!-- 服务二 start -->
 
+      <div class="service two">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/product-intradermik-service-cover-02.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title">透热疗法</div>
 
+            <div class="subtitle mb24">应用448KHZ特定频率实现对细胞的平衡、修复、再生。</div>
 
+            <ul class="detail">
 
+              <li>
 
+                <div class="label">- 非热疗法</div>
 
+                <div class="text lh28">促进细胞新陈代谢；平衡恢复细胞外基质流通。</div>
 
+              </li>
 
+              <li>
 
+                <div class="label">- 温热疗法</div>
 
+                <div class="text lh28">活化酶类物质；细胞修复；激活HSP；分解脂肪。</div>
 
+              </li>
 
+              <li>
 
+                <div class="label">- 高热疗法</div>
 
+                <div class="text lh28">增加微循环；血管舒张。</div>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务二 end -->
 
+
 
+      <!-- 服务三 start -->
 
+      <div class="service three">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/product-intradermik-service-cover-03.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title mb56">发烧疗法</div>
 
+            <ul class="detail">
 
+              <li class="lh28">- 激活全身细胞</li>
 
+              <li class="lh28">- 提高基础体温、提升组织氧含量</li>
 
+              <li class="lh28">- 提升机体抗病毒能力、物理升温抗癌</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务三 end -->
 
+
 
+      <!-- 服务四 start -->
 
+      <div class="service four">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/product-intradermik-service-cover-04.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title mb56">私密养护</div>
 
+            <ul class="detail">
 
+              <li class="lh28">
 
+                - 专业用于女性盆底修复通过私密内置探头可有效治疗私密炎症，增加敏感度，改善月经不调，提升私密抵抗力。
 
+              </li>
 
+              <li class="lh28">- 应用电刺激直接作用于盆底肌肉层，改善由盆底肌松弛造成的漏尿、脱垂、阴道松弛等情况。</li>
 
+            </ul>
 
+          </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>

+ 166 - 0
product-kestos.html
Dosyayı Görüntüle 

@@ -0,0 +1,166 @@
 
+<!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>首页-艾斯佰丽官网-产品系列-kestos T2</title>
 
+    <link rel="stylesheet" href="./css/normalize.css" />
 
+    <link rel="stylesheet" href="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/product-kestos.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/product-kestos-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
+    <div class="main">
 
+      <!-- 服务 start -->
 
+      <div class="service">
 
+        <div class="container">
 
+          <div class="item">
 
+            <div class="cover"><img src="/img/product-kestos-service-01.png" alt="" /></div>
 
+            <div class="content">
 
+              <div class="title">热应用(红外线)</div>
 
+              <ul class="detail">
 
+                <li>远、近红外 （ 电热带、红外灯、红外绑带）</li>
 
+                <li><span class="mr40">热解脂</span><span>改善排汗</span></li>
 
+                <li><span>舒张血管</span><span>促进护肤产品吸收</span></li>
 
+              </ul>
 
+            </div>
 
+          </div>
 
+          <div class="item">
 
+            <div class="item">
 
+              <div class="cover"><img src="/img/product-kestos-service-02.png" alt="" /></div>
 
+              <div class="content">
 
+                <div class="title">电刺激</div>
 
+                <ul class="detail">
 
+                  <li>
 
+                    神经肌肉电刺激（NMES）同时刺激了运动神经纤维和传入感觉神经纤维，利用
 
+                    神经细胞的电兴奋性，通过脉冲电流刺激支配肌肉神经促使肌肉进行等张和等长
 
+                    训练，达到肌肉饱满和健康弹性状态。
 
+                  </li>
 
+                </ul>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务 end -->
 
+
 
+      <!-- 关于 start -->
 
+      <div class="about">
 
+        <div class="container">
 
+          <div class="title">远近红外线与神经肌肉电刺激联合应用</div>
 
+          <div class="line"></div>
 
+          <div class="description">
 
+            红外线具有较强的温控效应和共振效应，易被人体吸收转化为内能，使水分子活化，增强其分子间的结合力， 从而
 
+            活化蛋白质等生物大分子，使生物体细胞处于最高振动能级，表现出由内到外的温热效应促使毛细血管扩张
 
+            血液循环，强化各组织之间的新陈代谢，增加组织的再生能力。
 
+          </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="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>

+ 189 - 0
product-mesobiolift.html
Dosyayı Görüntüle 

@@ -0,0 +1,189 @@
 
+<!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>首页-艾斯佰丽官网-产品系列-mesobiolift</title>
 
+    <link rel="stylesheet" href="./css/normalize.css" />
 
+    <link rel="stylesheet" href="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/product-mesobiolift.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/product-mesobiolift-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
+    <div class="main">
 
+      <!-- 关于 start -->
 
+      <div class="about">
 
+        <div class="container">
 
+          <div class="cover"><img src="/img/product-mesobiolift-about.png" alt=""></div>
 
+          <div class="content">
 
+            <div class="title">三大强效活性成分应对衰老问题</div>
 
+            <div class="subtitle">射频RF+直流电DC</div>
 
+            <div class="section">
 
+              <div class="description">
 
+                吸热技术能够引起组织内部温度可控性升高(43º)，并将超级干细胞产品中的活性成分推入皮肤最深层。Mesobiolift可用于三大治疗:
 
+              </div>
 
+              <ul>
 
+                <li>1. 面部皮肤再致密化、使用超级干细胞活性成分</li>
 
+                <li>2. 身体紧致、使用紧致活性成分</li>
 
+                <li>3. 身体抗充血、使用强效缩氨酸等抗充血活性成分</li>
 
+              </ul>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于 end -->
 
+
 
+      <!-- 服务一 start -->
 
+      <div class="service one">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/product-mesobiolift-service-01.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title">面部治疗</div>
 
+            <div class="line"></div>
 
+            <div class="description">
 
+              在面部治疗中，组织对通过电流的阻力导致真皮组织温度得到可控性升高，而不伤害表皮。热疗有双重效果：
 
+            </div>
 
+            <ul class="detail">
 
+              <li>1、血液循环的直接激活</li>
 
+              <li>2、胶原收缩</li>
 
+              <li>直接效果：皮下组织胶原蛋白紧致</li>
 
+              <li>渐进效果：新弹性纤维的形成</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务一 end -->
 
+
 
+      <!-- 服务二 start -->
 
+      <div class="service two">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="/img/product-mesobiolift-service-02.png" alt="" /></div>
 
+          <div class="content fr">
 
+            <div class="title">身体治疗</div>
 
+            <div class="line"></div>
 
+            <div class="description">
 
+              射频能诱导皮肤成纤维细胞增殖，改善组织动静脉系统。是治疗大腿内侧、腹部或手臂等难操作部位松弛问题最合适的能量形式之一。还能够激活刺激循环系统，以改善水肿，同时为皮肤提供额外的氧气和营养物质。
 
+            </div>
 
+
 
+            <ul class="detail">
 
+              <li>1、紧致治疗 皮肤激活再生</li>
 
+              <li class="text">· 1-3MHz 皮肤预热</li>
 
+              <li class="text">· 吸热波 活性紧致成分渗透</li>
 
+              <li class="text">· 1MHz射频 刺激循环，促进活性成分吸收</li>
 
+              <li>2、抗充血治疗刺激治疗区域血液循环</li>
 
+              <li>1.) 射频RF</li>
 
+              <li class="text">具有血管扩张、强化组织作用的热疗</li>
 
+              <li>2.) 直流电DC</li>
 
+              <li class="text">缩氨酸等抗充血活性成分渗透、血管收缩作用</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务二 end -->
 
+
 
+      <!-- 底部区域 start -->
 
+      <div class="footer">
 
+        <div class="container clearfix">
 
+          <div class="section fl">
 
+            <div class="logo"><img src="./img/logo2.png" alt="" /></div>
 
+            <div class="item mobile">
 
+              <span>0755-23769340</span>
 
+              <span>周一至周五：09:00-18:00</span>
 
+            </div>
 
+            <div class="item email">518000</div>
 
+            <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
+          </div>
 
+          <ul class="nav fl">
 
+            <li><a href="#">首页</a></li>
 
+            <li><a href="#">ROS'S</a></li>
 
+            <li><a href="#">系列产品</a></li>
 
+          </ul>
 
+          <ul class="nav fl">
 
+            <li><a href="#">案例展示</a></li>
 
+            <li><a href="#">授权认证</a></li>
 
+            <li><a href="#">联系我们</a></li>
 
+          </ul>
 
+          <div class="qrcode fr">
 
+            <img src="./img/qrcode.jpg" alt="二维码" />
 
+            <div class="tip">扫一扫加关注</div>
 
+          </div>
 
+        </div>
 
+        <div class="line"></div>
 
+        <div class="link">
 
+          <a href="#">法律声明</a>
 
+          <i></i>
 
+          <a href="#">隐私政策</a>
 
+          <i></i>
 
+          <a href="#">购物付款类型</a>
 
+          <i></i>
 
+          <a href="#">服务付款类型</a>
 
+          <i></i>
 
+          <a href="#">支付方式</a>
 
+          <i></i>
 
+          <a href="#">产品售后与申诉</a>
 
+          <i></i>
 
+          <a href="#">服务投诉与申诉</a>
 
+          <i></i>
 
+          <a href="#">族蚂议价流程</a>
 
+          <i></i>
 
+          <a href="#">关于族蚂网</a>
 
+          <i></i>
 
+          <a href="#">如何创建主体</a>
 
+          <i></i>
 
+          <a href="#">违规举报</a>
 
+          <i></i>
 
+          <a href="#">知识产权维护</a>
 
+        </div>
 
+        <div class="copyright">
 
+          <a href="#">本网站使用族蚂技术创建及服务器托管</a>
 
+          <span>Copyright ©2019</span>
 
+          <span>acebelleshenzhen.com</span>
 
+          <span>版权所有 粤ICP备2020131296号</span>
 
+        </div>
 
+      </div>
 
+      <!-- 底部区域 end -->
 
+    </div>
 
+  </body>
 
+</html>

+ 211 - 0
product-rollaction.html
Dosyayı Görüntüle 

@@ -0,0 +1,211 @@
 
+<!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>首页-艾斯佰丽官网-产品系列-rollaction</title>
 
+    <link rel="stylesheet" href="./css/normalize.css" />
 
+    <link rel="stylesheet" href="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/product-rollaction.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/product-rollaction-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
+    <div class="main">
 
+      <!-- 关于 start -->
 
+      <div class="about">
 
+        <div class="container">
 
+          <div class="item">
 
+            <div class="cover"><img src="/img/product-rollaction-about-01.png" alt="" /></div>
 
+          </div>
 
+          <div class="item">
 
+            <div class="cover"><img src="/img/product-rollaction-about-02.png" alt="" /></div>
 
+          </div>
 
+          <div class="item">
 
+            <div class="cover"><img src="/img/product-rollaction-about-03.png" alt="" /></div>
 
+            <div class="active">
 
+              <div class="title">Rollaction技术：按压</div>
 
+              <div class="line"></div>
 
+              <div class="detail">
 
+                Rollaction作用于所有深层组织且不产生任何牵引而是通过对从皮肤到深层肌肉的所有组织进行可控的规律性按压
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="item">
 
+            <div class="cover"><img src="/img/product-rollaction-about-04.png" alt="" /></div>
 
+          </div>
 
+          <div class="item">
 
+            <div class="cover"><img src="/img/product-rollaction-about-05.png" alt="" /></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于 end -->
 
+
 
+      <!-- 服务一 start -->
 
+      <div class="service one">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/product-rollaction-service-01.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title">身体理疗</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <li class="lh40">
 
+                <div class="lable">- 紧致皮肤</div>
 
+                <div class="text">Rollaction 直接作用于深层脂肪，去除难看橘皮组织</div>
 
+              </li>
 
+              <li class="lh40">
 
+                <div class="lable">- 塑形</div>
 
+                <div class="text">探头的滚动旋转动作溶解积聚的脂肪，并加速其通过淋巴管排出</div>
 
+              </li>
 
+              <li class="lh40">
 
+                <div class="lable">- 紧实</div>
 
+                <div class="text">肌肉痉挛压迫滋养组织的毛细血管，阻止血液顺利到达组织。</div>
 
+                <div class="text">深层的理疗活性按摩能够提供足够氧气和营养，滋养修复肌肉纤维。</div>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务一 end -->
 
+
 
+      <!-- 服务二 start -->
 
+      <div class="service two">
 
+        <div class="container clearfix">
 
+          <div class="cover fl"><img src="/img/product-rollaction-service-02.png" alt="" /></div>
 
+          <div class="content fr">
 
+            <div class="title">血液系统</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <li class="lh40">
 
+                通过机械刺激，血管壁中的肌肉纤维被激活。血液供应的增加促进了代谢，从而 改善循环系统。
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务二 end -->
 
+
 
+      <!-- 服务三 start -->
 
+      <div class="service three">
 
+        <div class="container clearfix">
 
+          <div class="cover fr"><img src="/img/product-rollaction-service-03.png" alt="" /></div>
 
+          <div class="content fl">
 
+            <div class="title">护理效果</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <li class="lh40">
 
+                我们所有的组织（肌肉、骨骼、结缔组织等）都需要足够的血液供应。错误姿势、久坐不动的生活方式、肌肉损伤等都会导致我们的肌肉痉挛，
 
+                阻碍供氧途径，导致运动系统严重失衡，甚至引起器官功能障碍。 Rollaction作用于整个肌肉区域，
 
+                其旋转滚动和渐进施压，有助于恢复护理区域的血液循环和神经冲动。
 
+              </li>
 
+            </ul>
 
+          </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="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>