Home Explore Help
Sign In
zhengjinyi
/
caimei-authentic-ross-static
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

页面开发

yuwenjun1997 2 years ago
parent
4f470f9aa7
commit
995df8e431
50 changed files with 2063 additions and 57 deletions
Split View Show Diff Stats
  1. 0 1
      about.html
  2. 425 0
      brand-ross.html
  3. 143 0
      brand.html
  4. 0 14
      css/about.css
  5. 0 15
      css/about.scss
  6. 8 13
      css/base.css
  7. 10 14
      css/base.scss
  8. 352 0
      css/brand-ross.css
  9. 424 0
      css/brand-ross.scss
  10. 63 0
      css/brand.css
  11. 73 0
      css/brand.scss
  12. 19 0
      css/index.css
  13. 19 0
      css/index.scss
  14. 92 0
      css/product-diactivplvs.css
  15. 107 0
      css/product-diactivplvs.scss
  16. 58 0
      css/product-intradermik.css
  17. 64 0
      css/product-intradermik.scss
  18. BIN
      img/brand-logo.jpg
  19. BIN
      img/brand-ross-ad.jpg
  20. BIN
      img/brand-ross-app-01.png
  21. BIN
      img/brand-ross-app-02.png
  22. BIN
      img/brand-ross-app-03.png
  23. BIN
      img/brand-ross-app-04.png
  24. BIN
      img/brand-ross-app-05.png
  25. BIN
      img/brand-ross-app-06.png
  26. BIN
      img/brand-ross-app-07.png
  27. BIN
      img/brand-ross-concat.png
  28. BIN
      img/brand-ross-map.png
  29. BIN
      img/brand-ross-therapy-active-01.png
  30. BIN
      img/brand-ross-therapy-active-02.png
  31. BIN
      img/brand-ross-therapy-active-03.png
  32. BIN
      img/brand-ross-therapy-active-04.png
  33. BIN
      img/brand-ross-therapy-active-05.png
  34. BIN
      img/brand-ross-therapy-cover-01.png
  35. BIN
      img/brand-ross-therapy-cover-02.png
  36. BIN
      img/brand-ross-therapy-cover-03.png
  37. BIN
      img/brand-ross-therapy-cover-04.png
  38. BIN
      img/brand-ross-therapy-cover-05.png
  39. BIN
      img/brand-ross-video-cover.png
  40. BIN
      img/brand-section-bg.png
  41. BIN
      img/icon-arrow-left.png
  42. BIN
      img/icon-arrow-right.png
  43. BIN
      img/icon-comma-01.png
  44. BIN
      img/icon-comma-02.png
  45. BIN
      img/icon-company.png
  46. BIN
      img/icon-doctor.png
  47. BIN
      img/icon-heart.png
  48. BIN
      img/icon-star.png
  49. 150 0
      product-diactivplvs.html
  50. 56 0
      product-intradermik.html

+ 0 - 1
about.html
View File 

@@ -6,7 +6,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>首页-艾斯佰丽官网-艾斯佰丽</title>
 
     <link rel="stylesheet" href="./css/normalize.css" />
 
-    <link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="./css/base.css" />
 
     <link rel="stylesheet" href="./css/about.css" />
 
   </head>

+ 425 - 0
brand-ross.html
View File 

@@ -0,0 +1,425 @@
 
+<!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">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li><a href="#">品牌中心</a></li>
 
+          <li><a href="#">合作加盟</a></li>
 
+          <li><a href="#">新闻动态</a></li>
 
+          <li><a href="#">联系我们</a></li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+    <!-- 顶部导航栏 end -->
 
+
 
+    <!-- 广告位 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>

+ 143 - 0
brand.html
View File 

@@ -0,0 +1,143 @@
 
+<!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">
 
+          <li class="active"><a href="#">首页</a></li>
 
+          <li><a href="#">艾斯佰丽</a></li>
 
+          <li><a href="#">品牌中心</a></li>
 
+          <li><a href="#">合作加盟</a></li>
 
+          <li><a href="#">新闻动态</a></li>
 
+          <li><a href="#">联系我们</a></li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+    <!-- 顶部导航栏 end -->
 
+
 
+    <!-- banner图 start -->
 
+    <div class="banner">
 
+      <img src="./img/about-banner.png" alt="" />
 
+    </div>
 
+    <!-- banner图 end -->
 
+
 
+    <div class="main">
 
+      <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>

+ 0 - 14
css/about.css
View File 

@@ -1,17 +1,3 @@
 
-.banner {
 
-  position: relative;
 
-  width: 100%;
 
-  min-width: 1200px;
 
-  height: 530px;
 
-  overflow: hidden;
 
-}
 
-.banner img {
 
-  position: absolute;
 
-  left: 50%;
 
-  top: 50%;
 
-  transform: translate(-50%, -50%);
 
-}
 
-
 
 .main .about {
 
   padding: 120px 0;
 
   background: #fff;

+ 0 - 15
css/about.scss
View File 

@@ -1,18 +1,3 @@
 
-.banner {
 
-  position: relative;
 
-  width: 100%;
 
-  min-width: 1200px;
 
-  height: 530px;
 
-  overflow: hidden;
 
-
 
-  img {
 
-    position: absolute;
 
-    left: 50%;
 
-    top: 50%;
 
-    transform: translate(-50%, -50%);
 
-  }
 
-}
 
-
 
 .main {
 
   .about {
 
     padding: 120px 0;

+ 8 - 13
css/base.css
View File 

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

+ 10 - 14
css/base.scss
View File 

@@ -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%);
 
   }
 
 }
 
 
@@ -146,7 +142,7 @@ a {
 
         left: 0;
 
         bottom: 0;
 
         background-color: #0688d2;
 
-        transition: all .2s;
 
+        transition: all 0.2s;
 
       }
 
       &.active {
 
         &::after {
 
@@ -159,7 +155,7 @@ a {
 
       a {
 
         display: block;
 
         line-height: 68px;
 
-        transition: all .2s;
 
+        transition: all 0.2s;
 
       }
 
     }
 
   }

+ 352 - 0
css/brand-ross.css
View File 

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

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

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

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

+ 19 - 0
css/index.css
View File 

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

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

+ 92 - 0
css/product-diactivplvs.css
View File 

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

+ 107 - 0
css/product-diactivplvs.scss
View File 

@@ -0,0 +1,107 @@
 
+.main {
 
+  .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 {
 
+      width: 646px;
 
+      height: 490px;
 
+      background: #fff;
 
+      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
 
+      box-sizing: border-box;
 
+      padding: 24px;
 
+    }
 
+    .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;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 58 - 0
css/product-intradermik.css
View File 

@@ -0,0 +1,58 @@
 
+.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 {
 
+  width: 640px;
 
+  height: 480px;
 
+  box-sizing: border-box;
 
+  padding: 24px;
 
+  background-color: pink;
 
+}
 
+.main .service .content {
 
+  width: 560px;
 
+  background: #0688d2;
 
+}

+ 64 - 0
css/product-intradermik.scss
View File 

@@ -0,0 +1,64 @@
 
+.main {
 
+  .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 {
 
+      width: 640px;
 
+      height: 480px;
 
+      box-sizing: border-box;
 
+      padding: 24px;
 
+      background-color: pink;
 
+    }
 
+    .content {
 
+      width: 560px;
 
+      background: #0688d2;
 
+    }
 
+  }
 
+}

BIN
img/brand-logo.jpg
View File


BIN
img/brand-ross-ad.jpg
View File


BIN
img/brand-ross-app-01.png
View File


BIN
img/brand-ross-app-02.png
View File


BIN
img/brand-ross-app-03.png
View File


BIN
img/brand-ross-app-04.png
View File


BIN
img/brand-ross-app-05.png
View File


BIN
img/brand-ross-app-06.png
View File


BIN
img/brand-ross-app-07.png
View File


BIN
img/brand-ross-concat.png
View File


BIN
img/brand-ross-map.png
View File


BIN
img/brand-ross-therapy-active-01.png
View File


BIN
img/brand-ross-therapy-active-02.png
View File


BIN
img/brand-ross-therapy-active-03.png
View File


BIN
img/brand-ross-therapy-active-04.png
View File


BIN
img/brand-ross-therapy-active-05.png
View File


BIN
img/brand-ross-therapy-cover-01.png
View File


BIN
img/brand-ross-therapy-cover-02.png
View File


BIN
img/brand-ross-therapy-cover-03.png
View File


BIN
img/brand-ross-therapy-cover-04.png
View File


BIN
img/brand-ross-therapy-cover-05.png
View File


BIN
img/brand-ross-video-cover.png
View File


BIN
img/brand-section-bg.png
View File


BIN
img/icon-arrow-left.png
View File


BIN
img/icon-arrow-right.png
View File


BIN
img/icon-comma-01.png
View File


BIN
img/icon-comma-02.png
View File


BIN
img/icon-company.png
View File


BIN
img/icon-doctor.png
View File


BIN
img/icon-heart.png
View File


BIN
img/icon-star.png
View File


+ 150 - 0
product-diactivplvs.html
View File 

@@ -0,0 +1,150 @@
 
+<!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>首页-艾斯佰丽官网-产品系列-diactivplvs</title>
 
+    <link rel="stylesheet" href="./css/normalize.css" />
 
+    <link rel="stylesheet" href="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/product-diactivplvs.css" />
 
+  </head>
 
+  <body>
 
+    <div class="main">
 
+      <!-- 关于 Diactivplvs start-->
 
+      <div class="about">
 
+        <div class="container clearfix">
 
+          <div class="cover fl">
 
+            <img src="" alt="" />
 
+          </div>
 
+          <div class="content fr">
 
+            <div class="title">Diactivplvs</div>
 
+            <div class="line"></div>
 
+            <div class="detail">
 
+              Diactivplvs是一款专业的医疗设备，多重专利技术，并拥有全面的背书及医学文献知识，主要是针对组织再生治疗、肌肉康复理疗、术后康复治疗。主要运用于康复、医疗的领域。
 
+            </div>
 
+            <div class="tags">
 
+              <div class="tag">- 针对理疗、美容、面部、身体管理 -</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于 Diactivplvs end-->
 
+
 
+      <!-- 服务一 start -->
 
+      <div class="service">
 
+        <div class="container clearfix">
 
+          <div class="cover fr">
 
+            <img src="" alt="" />
 
+          </div>
 
+          <div class="content fl">
 
+            <div class="title">透热448KHZ来自细胞核心运动</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <li class="lh40 mt32">
 
+                -
 
+                电容：电流以位移电流形式，让分子间摩擦运动能够增加温度，主要作用于真皮层和肌肉层，修复皮肤的受损和肌肉的理疗。
 
+              </li>
 
+              <li class="lh40 mt32">
 
+                -
 
+                电阻：特定的频率激活细胞，让细胞产生跨膜运动，主要作用于脂肪层、骨骼、肌腱和脏腑，改善身体各种亚健康问题及修复身体内部组织。
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务一 end -->
 
+
 
+      <!-- 服务二 start -->
 
+      <div class="service">
 
+        <div class="container clearfix">
 
+          <div class="cover fl">
 
+            <img src="" alt="" />
 
+          </div>
 
+          <div class="content fr">
 
+            <div class="title">电刺激</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <li class="mt16">
 
+                <div class="label">- 肌肉电刺激</div>
 
+                <div class="text lh28">强化肌力，康复，防止废用性肌肉萎缩，增加局部血液循环，肌肉 放松，肌肉紧致。</div>
 
+              </li>
 
+              <li class="mt16">
 
+                <div class="label">- 干扰电疗</div>
 
+                <div class="text lh28">
 
+                  改善肿胀和炎症。改善肌肉受限和增强肌肉协调。刺激人体自身荷 尔蒙，治疗慢性疼痛。
 
+                </div>
 
+              </li>
 
+              <li class="mt16">
 
+                <div class="label">- 科兹电流</div>
 
+                <div class="text lh28">
 
+                  改善肌肉萎缩，肌肉训练，肌肉刺激，辅助肌肉力量训练或肌肉耐力训练，改善新陈代谢减少肌肉紧张。
 
+                </div>
 
+              </li>
 
+              <li class="mt16">
 
+                <div class="label">- 经皮神经电刺激</div>
 
+                <div class="text lh28">
 
+                  缓解关节炎，背部疼痛，腕管综合征，足部疼痛，分娩疼痛，多发性硬化症，坐骨神经痛等。
 
+                </div>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务二 end -->
 
+
 
+      <!-- 服务三 start -->
 
+      <div class="service">
 
+        <div class="container clearfix">
 
+          <div class="cover fr">
 
+            <img src="" alt="" />
 
+          </div>
 
+          <div class="content fl">
 
+            <div class="title">电针灸</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <div class="description lh40">
 
+                基于中国传统针灸技术，电流通过针头进行传导。该疗法将 传统和现代的优点结合。
 
+              </div>
 
+              <li class="mt16">
 
+                <div class="label">- 循环</div>
 
+                <div class="text lh28">血管舒张对水肿和疼痛的部位有镇痛和抗炎作用。</div>
 
+              </li>
 
+              <li class="mt16">
 
+                <div class="label">- 肌肉系统</div>
 
+                <div class="text lh28">修复肌张力不足、肌肉萎缩</div>
 
+              </li>
 
+              <li class="mt16">
 
+                <div class="label">- 神经系统镇痛</div>
 
+                <div class="text lh28">针对挛缩引起的疼痛，具镇痛和肌肉放松效果。</div>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务三 end -->
 
+
 
+      <!-- 服务四 start -->
 
+      <div class="service">
 
+        <div class="container clearfix">
 
+          <div class="cover fl">
 
+            <img src="" alt="" />
 
+          </div>
 
+          <div class="content fr">
 
+            <div class="title">盆底理疗的透热应用女性私密美学</div>
 
+            <div class="line"></div>
 
+            <ul class="detail">
 
+              <li class="lh40 mt32">
 
+                - 专业用于女性盆底修复通过私密内置探头可有效治疗私密炎症， 增加敏感度，改善月经不调，提升私密抵抗力
 
+              </li>
 
+              <li class="lh40 mt32">
 
+                - 应用电刺激直接作用于盆底肌肉层，改善由盆底肌松弛造成的漏尿、脱垂、阴道松弛等情况
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 服务四 end -->
 
+    </div>
 
+  </body>
 
+</html>

+ 56 - 0
product-intradermik.html
View File 

@@ -0,0 +1,56 @@
 
+<!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>首页-艾斯佰丽官网-产品系列-INTRADERMIK</title>
 
+    <link rel="stylesheet" href="./css/normalize.css" />
 
+    <link rel="stylesheet" href="./css/base.css" />
 
+    <link rel="stylesheet" href="./css/product-intradermik.css" />
 
+  </head>
 
+  <body>
 
+    <div class="main">
 
+      <!-- 关于 Diactivplvs start-->
 
+      <div class="about">
 
+        <div class="container clearfix">
 
+          <div class="cover fl">
 
+            <img src="" alt="" />
 
+          </div>
 
+          <div class="content fr">
 
+            <div class="title">INTRADERMIK</div>
 
+            <div class="line"></div>
 
+            <div class="detail">
 
+              INTRADERMIK是一种便携式TECAR治疗设备，适用于物理治疗、康复医 学、运动医学
 
+              、医学美容、整形等领域具有特殊效果的技术和方法。
 
+            </div>
 
+            <div class="tags">
 
+              <div class="tag">- 实现对细胞的平衡、修复、再生 -</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 关于 Diactivplvs end-->
 
+
 
+      <!-- 服务 一 -->
 
+      <div class="service">
 
+        <div class="container clearfix">
 
+          <div class="cover"><img src="" alt="" /></div>
 
+          <div class="content">
 
+            <div class="title"></div>
 
+            <ul class="detail">
 
+              <li class="lh40 mt32">
 
+                -
 
+                电容：电流以位移电流形式，让分子间摩擦运动能够增加温度，主要作用于真皮层和肌肉层，修复皮肤的受损和肌肉的理疗。
 
+              </li>
 
+              <li class="lh40 mt32">
 
+                -
 
+                电阻：特定的频率激活细胞，让细胞产生跨膜运动，主要作用于脂肪层、骨骼、肌腱和脏腑，改善身体各种亚健康问题及修复身体内部组织。
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </body>
 
+</html>