Browse Source

新增静态页面

zhengjinyi 2 years ago
parent
commit
b25d29fec8
76 changed files with 3848 additions and 322 deletions
  1. 209 0
      appliance-2.html
  2. 190 0
      appliance-3.html
  3. 193 0
      appliance-4.html
  4. 196 0
      appliance-5.html
  5. 189 0
      appliance-6.html
  6. 193 0
      appliance-7.html
  7. 197 0
      appliance.html
  8. 186 0
      contact-consult.html
  9. 220 0
      contact-join.html
  10. 158 0
      contact.html
  11. 306 0
      cooperative.html
  12. 88 0
      css/appliance.css
  13. 87 0
      css/appliance.scss
  14. 266 0
      css/contact.css
  15. 267 0
      css/contact.scss
  16. 288 0
      css/cooperative.css
  17. 293 0
      css/cooperative.scss
  18. BIN
      img/appliance-img1-1.png
  19. BIN
      img/appliance-img1-2.png
  20. BIN
      img/appliance-img1-3.png
  21. BIN
      img/appliance-img1-4.png
  22. BIN
      img/appliance-img1-5.png
  23. BIN
      img/appliance-img2-1.png
  24. BIN
      img/appliance-img2-2.png
  25. BIN
      img/appliance-img2-3.png
  26. BIN
      img/appliance-img2-4.png
  27. BIN
      img/appliance-img2-5.png
  28. BIN
      img/appliance-img3-1.png
  29. BIN
      img/appliance-img3-2.png
  30. BIN
      img/appliance-img3-3.png
  31. BIN
      img/appliance-img3-4.png
  32. BIN
      img/appliance-img4-1.png
  33. BIN
      img/appliance-img4-2.png
  34. BIN
      img/appliance-img4-3.png
  35. BIN
      img/appliance-img4-4.png
  36. BIN
      img/appliance-img5-1.png
  37. BIN
      img/appliance-img5-2.png
  38. BIN
      img/appliance-img5-3.png
  39. BIN
      img/appliance-img5-4.png
  40. BIN
      img/appliance-img6-1.png
  41. BIN
      img/appliance-img6-2.png
  42. BIN
      img/appliance-img6-3.png
  43. BIN
      img/appliance-img6-4.png
  44. BIN
      img/appliance-img7-1.png
  45. BIN
      img/appliance-img7-2.png
  46. BIN
      img/appliance-img7-3.png
  47. BIN
      img/appliance-img7-4.png
  48. BIN
      img/appliance-lbg.png
  49. BIN
      img/contact-banner1.png
  50. BIN
      img/contact-banner2.png
  51. BIN
      img/contact-banner3.png
  52. BIN
      img/contact-icon-down.png
  53. BIN
      img/contact-icon-up.png
  54. BIN
      img/contact-img1.png
  55. BIN
      img/contact-img2.png
  56. BIN
      img/contact-img3.png
  57. BIN
      img/cooperative_banner.png
  58. BIN
      img/cooperative_brand_1@2x.png
  59. BIN
      img/cooperative_brand_2@2x.png
  60. BIN
      img/cooperative_brand_3@2x.png
  61. BIN
      img/cooperative_brand_4@2x.png
  62. BIN
      img/cooperative_brand_5@2x.png
  63. BIN
      img/cooperative_mode_1@2x.png
  64. BIN
      img/cooperative_mode_2@2x.png
  65. BIN
      img/cooperative_mode_3@2x.png
  66. BIN
      img/cooperative_mode_4@2x.png
  67. BIN
      img/cooperative_mode_5@2x.png
  68. BIN
      img/cooperative_mode_6@2x.png
  69. BIN
      img/cooperative_server@2x.png
  70. BIN
      img/cooperative_server_1@2x.png
  71. BIN
      img/cooperative_server_2@2x.png
  72. BIN
      img/cooperative_server_3@2x.png
  73. BIN
      img/cooperative_title01@2x.png
  74. BIN
      img/cooperative_title02@2x.png
  75. BIN
      img/cooperative_title03@2x.png
  76. 322 322
      index.html

+ 209 - 0
appliance-2.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>减脂塑形</h1>
+					<p>Body reshaping</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img2-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-抚平橘皮</div>
+							<div class="appliance-lir-text">
+								<p>
+									橘皮纹就是一种橘皮组织。所谓橘皮组织就是指海绵组织,也就是脂肪细胞
+									周围多余的水份与老化废物代谢不良的结果。而产生表皮出现凹凸不平的波
+									纹。ROS'S系统透热疗法,浅层探头收紧皮肤结合深层探头刺激淋巴循环,
+									促进细胞新生,加快代谢,达到抚平橘皮纹的效果。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img2-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-减内脏脂肪</div>
+							<div class="appliance-lir-text">
+								<p>
+									内脏脂肪是围绕着人的内脏器官存在于身体内部,过多的内脏脂肪堆积就会
+									导致高血脂、脂肪肝等亚健康疾病的产生。ROS'S通过448kHz细胞平衡疗法,
+									独特的低频中波刺激,使细胞正负离子交换穿透细胞膜达到平衡,修复以及
+									再生的作用,从而恢复细胞活性,最终达到消除内脏脂肪的目的。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img2-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-祛除软脂肪团</div>
+							<div class="appliance-lir-text">
+								<p>
+									脂肪是由甘油和脂肪酸组成的三酰甘油酯。脂肪有软硬之分,可以用手触摸
+									到。软脂肪块是每个脂肪细胞的体积过大,软脂肪酸就是油ROS'S通过浅层
+									+深层结合的方式将脂肪分解成甘油和脂肪酸,同时增加细胞循环代谢能力,
+									通过人体三大代谢系统加快代谢过剩脂肪。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img2-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-祛除硬脂肪团</div>
+							<div class="appliance-lir-text">
+								<p>
+									硬脂肪块多是自小形成的,那是因为脂肪细胞数量多,硬脂肪酸就是通常说
+									的普通脂肪,ROS'S疗程透热疗法实现改善细胞平衡,脂肪由硬变软,由大 变小,代谢出体外。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img2-5.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-祛除水肿型脂肪团</div>
+							<div class="appliance-lir-text">
+								<p>
+									女性的免疫力下降,身体代谢和循环会出现不同程度的障碍,这时候水肿就
+									变得特别明显了。水肿的坏处很多,不仅让人看起来臃肿有肥胖感,而且往
+									往神色倦怠,更直接影响内分泌。如果不及时排除,往往会越积越深,形成
+									恶性循环。ROSS疗程激活细胞,改善身体循环加速代谢。
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 190 - 0
appliance-3.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>肌肉抗衰</h1>
+					<p>Muscle anti-aging</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img3-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-紧致肌肉</div>
+							<div class="appliance-lir-text">
+								<p>
+									ROS'S肌肉重塑产生的脉冲波深入皮下,刺激肌肉中的运动神经,促使肌肉
+									有规律的产生运动,强健退化的肌肉纤维,放松萎缩的肌肉群,恢复紧致饱 满的肌肉线条。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img3-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-肌肉重塑</div>
+							<div class="appliance-lir-text">
+								<p>
+									由于年龄或手术等原因时,肌肉长期不使用,必然会导致肌肉的废用性萎缩,
+									而且萎缩的程度随时间的推进呈逐渐加重的趋势。我们使用ROS'S肌肉重塑
+									疗法,直接作用在萎缩肌肉上,从而达到训练效果,提高肌肉力量。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img3-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-改善肌原纤维</div>
+							<div class="appliance-lir-text">
+								<p>
+									肌原纤维是肌肉组织的一种成分。它能够保持皮肤的弹性,防止皮肤发生松
+									弛。同时特比较容易发生损伤。当肌肉受损或则粘连发生病变时,肌原纤维 会发生溶解和坏死。
+									ROS'S肌肉重塑疗法不同波段针对肌肉做放松紧致使肌 肉达到一个平衡状态。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img3-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-重塑体型</div>
+							<div class="appliance-lir-text">
+								<p>
+									ROS'S肌肉重塑疗法模拟物理运动的方式增加肌肉转化热量的能力,来燃烧
+									和代谢脂肪。增肌塑形、放松身心压力、促进代谢循环的效果,帮助人体恢
+									复紧致、匀称、健康和充满活力的年轻体态。
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 193 - 0
appliance-4.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>运动损伤</h1>
+					<p>Sports injury</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img4-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-运动损伤</div>
+							<div class="appliance-lir-text">
+								<p>
+									运动损伤在临床当中是比较常见的,一般来讲分为急性损伤以及慢性损伤。
+									急性损伤是比较多见的,主要是在运动的过程当中出现了损伤。运动损伤的
+									治疗以及康复需要根据不同类型的运动损伤来采取不同的治疗方法。透热疗
+									法三大模式,非热,温热,高热,可用于治疗运动损伤。透热疗法利用高频
+									声波在受损组织深处产生热量,治疗过程中会感到非常舒适。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img4-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-肩颈劳损</div>
+							<div class="appliance-lir-text">
+								<p>
+									ROS'S通过肌肉重塑+透热疗法,可以有效缓解身体的各个部位产生的疼痛
+									状况,包括颈椎病、腰椎病、肩周炎及带状疱疹后期恢复等疼痛现象,同时
+									帮助韧带扭伤、肌肉拉伤及运动疼痛的早期康复。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img4-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-腰椎康复</div>
+							<div class="appliance-lir-text">
+								<p>
+									热疗通过增加受伤部位的血流量,控制肿胀,软化关节组织。这种疗法也可
+									以加速受伤部位的愈合,结合肌肉重塑改善肌肉僵硬,和长期肌肉紧张牵扯 到骨骼变形产生的疼痛问题。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img4-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-关节损伤</div>
+							<div class="appliance-lir-text">
+								<p>
+									关节周围软组织如关节囊、韧带、肌腱等发生撕裂伤。运用ROS'S透热治疗
+									对关节疼痛进行调理,穿透皮肤直达病变组织,产生热效应,让病变组织血
+									管扩张,促进血液循环,改善组织的营养代谢,促进炎症的消除,激活免疫
+									系统,对正常细胞有调节作用,对炎症细胞有吞噬作用。
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 196 - 0
appliance-5.html

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>亚健康</h1>
+					<p>Subhealth</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img5-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-提高基础体温</div>
+							<div class="appliance-lir-text">
+								<p>
+									通过ROS'S发烧疗法40-60分钟操作使人体体温物理升至38.5—40.5度之间,
+									人为的给人体创造“发烧”的环境。发热是机体受到有害刺激后的一种反应
+									形式,一定程度的发热可以唤醒机体的抵抗力,提高自身的抗病能力。发烧
+									疗法提升基础体温,抑制癌细胞、改善机体血氧浓度;修复受损组织;改善 血液粘稠。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img5-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-提升免疫力</div>
+							<div class="appliance-lir-text">
+								<p>
+									人的温度每提高一度,人体免疫力就提高20%。ROS'S发烧疗法,提升人体
+									免疫力,一定程度的发热可以唤醒人体的抵抗力,提高自身的抗病能力。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img5-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-淋巴引流</div>
+							<div class="appliance-lir-text">
+								<p>
+									淋巴排毒的好处是可以增强人体免疫力,调整人体毒素的代谢,对于因为毒
+									素蓄积而引起的疾病,具有一定的好处。淋巴排毒在临床中常用于治疗一些
+									慢性疾病,比如过早衰老、浑身酸痛、记忆力下降、男性性功能下降,还有
+									女性月经不调等方面,都能通过淋巴排毒进行调整和治疗。 ROS'S操作透热
+									能量给予通过淋巴腺系统准确地加压全身淋巴结的位置,使由血管渗透出含
+									大量毒素及废物的淋巴液,加快运行至每个淋巴结。从而加速排泄体内毒素。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img5-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-加速新陈代谢</div>
+							<div class="appliance-lir-text">
+								<p>
+									办公一族长期久坐,容易长富贵包。富贵包就是脖子后面的脂肪堆积导致的
+									比较大的包块,大多是由于长期劳作引起,比如脖子长期受压或者长期低头。
+									如果出现富贵包不进行治疗,很可能导致颈后和肩背部酸痛,出现富贵包的
+									地方还有可能压迫到神经,引起知觉障碍,有时伴有头晕、恶心等,ROS'S
+									通过透热治疗,改善头部血液循环增加血氧饱和度上升可以有效缓解这个问 题。
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 189 - 0
appliance-6.html

@@ -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>首页-艾斯佰丽-合作加盟</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/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>产后康复</h1>
+					<p>Postpartum rehabilitation</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img6-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-妊娠纹修复</div>
+							<div class="appliance-lir-text">
+								<p>
+									妊娠纹是膨胀纹的一种,是妊娠过程中出现的一种病理性皮肤改变。妊娠纹
+									早期表现为暗红色或紫红色的条纹,分娩后半年到一年后逐渐出现色素脱失、
+									皮肤萎缩,最后稳定呈现出一种白色或银色的条纹。 ROS'S透热疗法高热模
+									式激活热休克蛋白,促进胶原蛋白和弹性蛋白的新生,淡化色素,抚平纹路。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img6-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-耻骨闭合</div>
+							<div class="appliance-lir-text">
+								<p>
+									ROS'S深层细胞平衡修复耻骨联合弹性韧带,恢复韧带弹性力量和肌肉重塑
+									疗法重塑大腿内收肌张力带动耻骨联合闭合。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img6-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-盆底肌修复</div>
+							<div class="appliance-lir-text">
+								<p>
+									由于孕晚期松弛素或顺产外力引发的盆底肌松弛,ROS'S透热疗法在修复肌
+									纤维损伤的同时肌肉重塑疗法精准的锻炼盆底括约肌的收缩力量达到紧致。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img6-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-腹直肌修复</div>
+							<div class="appliance-lir-text">
+								<p>
+									ROS'S肌肉绑带无死角环绕改善由于孕期宝宝慢慢长大引发的腹部腹直肌分
+									离,和腹部腹横肌无力,从人体天然的绑腹带着手从根源上促进腹直肌闭合, 重塑腰线。
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 193 - 0
appliance-7.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>私密健康</h1>
+					<p>Pelvic floor</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img7-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-盆底肌修复</div>
+							<div class="appliance-lir-text">
+								<p>
+									通过神经肌肉电刺激(NMES)技术,对盆底肌肉进行有规律的刺激,促使盆底
+									肌肉群收缩运动,激发传感神经的灵敏度,从而达到修复盆底肌肉受损状态,
+									恢复盆底肌肉的张力和弹性,从而承托盆腔脏器,防止病毒入侵,预防漏尿,
+									紧实阴道括约肌,提升两性生活质量,收缩耻骨联合,调节假胯宽。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img7-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-卵巢抗衰</div>
+							<div class="appliance-lir-text">
+								<p>
+									卵巢作为女性最大的性腺器官,历来都被称为是女性的“生命之源”,它所
+									分泌的雌激素和孕激素直接影响着的女性生殖系统、神经系统、免疫系统、
+									心脑血管系统、骨骼系统等9大系统400多个组织器官。卵巢抗衰能够延缓女
+									性更年期,预防衰老,调节女性生殖系统功能,预防卵巢囊肿。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img7-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-盆腔升温</div>
+							<div class="appliance-lir-text">
+								<p>
+									独特频率448kHz,引起人体组织中离子负载的位移以及组织的摩擦,从而导
+									致组织内源性热,独特的自动激活模式,达到人体最深层次,恢复机体功能,
+									从而调理宫寒,腰骶酸痛,带脉淤堵,提升盆腔抗炎能力,排出盆腔毒素, 代谢盆腔积液。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img7-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-子宫复旧</div>
+							<div class="appliance-lir-text">
+								<p>
+									产后复旧指的是产妇的子宫肌肉收缩恢复作用,会使产妇的子宫明显的缩小。
+									通常来说,在产后的五到六周就可以恢复到产前的状态。增强子宫弹性,修
+									复子宫内膜,加强机能代谢,缩短产后妈妈恶露期,预防子宫肌瘤。
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 197 - 0
appliance.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/appliance.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="appliance-title">
+					<h1>美学缺陷</h1>
+					<p>Aesthetic defect</p>
+				</div>
+				<div class="appliance-content">
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img1-1.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-抗衰老</div>
+							<div class="appliance-lir-text">
+								<p>
+									人体各个组织都是由细胞组成,随着时间的推移,年龄和身体因素等,细胞
+									开始出现衰老后它的代谢能力,分解能力和循环能力不断减少衰退,原有的
+									分子结构逐渐改变,这些变化的积累会使细胞逐渐出现衰老现象。ROS'S系
+									统主要针对人体肌肉和皮肤的每个细胞进行激活,修复和再生。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img1-2.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-减少皱纹</div>
+							<div class="appliance-lir-text">
+								<p>
+									ROS'S系统针对恢复真皮组织饱满度,从而对皱纹带来“提拉紧实”的作用。
+									疏通面部毛细血管、细微神经,合成弹性纤维,使肌肤更柔滑。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img1-3.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-紧致肌肤</div>
+							<div class="appliance-lir-text">
+								<p>
+									面部不够紧实有弹性,鼻唇沟(笑纹)加深,眼睑开始松弛。肌肤逐渐松弛,
+									导致面部整体下垂。ROS'S系统激活肌肤所必需的支撑纤维(胶原蛋白、弹 性纤维和透明质酸)。
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img1-4.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-淡化表情纹</div>
+							<div class="appliance-lir-text">
+								<p>ROS'S系统电提升:刺激微循环和常规新陈代谢,可有效细化淡纹、改善双 下巴、色素沉着等问题。</p>
+							</div>
+						</div>
+					</div>
+					<div class="appliance-li">
+						<div class="appliance-lil">
+							<img src="./img/appliance-img1-5.png" alt="" />
+						</div>
+						<div class="appliance-lir">
+							<div class="appliance-lir-top">-改善晒斑</div>
+							<div class="appliance-lir-text">
+								<p>对于色素较深且面积较小的色斑,ROS'S系统可加速细胞新陈代谢,刺激细 胞新生,达到改善晒斑的效果。</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 186 - 0
contact-consult.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/contact.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/contact-banner2.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="contact-content consult">
+					<div class="contact-main consult">
+						<div class="contact-title">
+							<div class="contact-title-l">
+								<p>联系方式</p>
+							</div>
+							<div class="contact-title-r">
+								<a href="./contact.html">联系方式</a>
+								<a href="./contact-join.html">人才招聘</a>
+							</div>
+						</div>
+						<div class="contact-image">
+							<img src="./img/contact-img2.png" alt="人才招聘" />
+						</div>
+						<div class="contact-consult">
+							<div class="contact-form">
+								<div class="label">姓名:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">电话:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">省份:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">城市:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">地址:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">店名:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">店面积:</div>
+								<input class="form-input" type="text" />
+							</div>
+							<div class="contact-form">
+								<div class="label">意向品牌:</div>
+								<select class="form-select" name="" id="">
+									<option value="1">阿斯卡纶第三代</option>
+									<option value="1">阿斯卡纶第三代</option>
+									<option value="1">阿斯卡纶第三代</option>
+									<option value="1">阿斯卡纶第三代</option>
+									<option value="1">阿斯卡纶第三代</option>
+									<option value="1">阿斯卡纶第三代</option>
+								</select>
+							</div>
+							<div class="contact-form">
+								<textarea class="textarea" name="" placeholder="备注"></textarea>
+							</div>
+							<div class="contact-form none">
+								<a class="btn" href="JavaScript:void(0);">提交</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.contact-join-cell').click(function () {
+					if ($(this).hasClass('on')) {
+						$(this).removeClass('on').next('.contact-join-main').slideUp()
+					} else {
+						$(this).addClass('on').next('.contact-join-main').slideDown()
+						$(this).siblings('.contact-join-cell').removeClass('on').next('.contact-join-main').slideUp()
+					}
+				})
+			})
+		</script>
+	</body>
+</html>

+ 220 - 0
contact-join.html

@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/contact.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/contact-banner3.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="contact-content">
+					<div class="contact-main">
+						<div class="contact-title">
+							<div class="contact-title-l">
+								<p>联系方式</p>
+							</div>
+							<div class="contact-title-r">
+								<a href="./contact.html">联系方式</a>
+								<a href="./contact-consult.html">在线咨询</a>
+							</div>
+						</div>
+						<div class="contact-image">
+							<img src="./img/contact-img3.png" alt="人才招聘" />
+						</div>
+						<div class="contact-join">
+							<h1>职位申请</h1>
+							<div class="contact-join-cell">
+								<p>总经理助理</p>
+								<span></span>
+							</div>
+							<div class="contact-join-main">
+								<p>工作地点:深圳(提供住宿)</p>
+								<p>薪酬:8-12k</p>
+								<p>岗位要求:</p>
+								<p>1、本科及以上学历,形象气质佳,综合素质佳,人品端正,保密意识强。</p>
+								<p>2、沟通表达能力强,有较强的文书写作能力,能以英文为工作语言(专业八级)。</p>
+								<p>3、逻辑清晰,执行力强,抗压能力强。</p>
+								<p>4、熟练操作OFFICE软件,能适应不定期出差。有海外留学背景者佳。</p>
+							</div>
+							<div class="contact-join-cell">
+								<p>总经理助理</p>
+								<span></span>
+							</div>
+							<div class="contact-join-main">
+								<p>工作地点:深圳(提供住宿)</p>
+								<p>薪酬:8-12k</p>
+								<p>岗位要求:</p>
+								<p>1、本科及以上学历,形象气质佳,综合素质佳,人品端正,保密意识强。</p>
+								<p>2、沟通表达能力强,有较强的文书写作能力,能以英文为工作语言(专业八级)。</p>
+								<p>3、逻辑清晰,执行力强,抗压能力强。</p>
+								<p>4、熟练操作OFFICE软件,能适应不定期出差。有海外留学背景者佳。</p>
+							</div>
+							<div class="contact-join-cell">
+								<p>总经理助理</p>
+								<span></span>
+							</div>
+							<div class="contact-join-main">
+								<p>工作地点:深圳(提供住宿)</p>
+								<p>薪酬:8-12k</p>
+								<p>岗位要求:</p>
+								<p>1、本科及以上学历,形象气质佳,综合素质佳,人品端正,保密意识强。</p>
+								<p>2、沟通表达能力强,有较强的文书写作能力,能以英文为工作语言(专业八级)。</p>
+								<p>3、逻辑清晰,执行力强,抗压能力强。</p>
+								<p>4、熟练操作OFFICE软件,能适应不定期出差。有海外留学背景者佳。</p>
+							</div>
+							<div class="contact-join-cell">
+								<p>总经理助理</p>
+								<span></span>
+							</div>
+							<div class="contact-join-main">
+								<p>工作地点:深圳(提供住宿)</p>
+								<p>薪酬:8-12k</p>
+								<p>岗位要求:</p>
+								<p>1、本科及以上学历,形象气质佳,综合素质佳,人品端正,保密意识强。</p>
+								<p>2、沟通表达能力强,有较强的文书写作能力,能以英文为工作语言(专业八级)。</p>
+								<p>3、逻辑清晰,执行力强,抗压能力强。</p>
+								<p>4、熟练操作OFFICE软件,能适应不定期出差。有海外留学背景者佳。</p>
+							</div>
+							<div class="contact-join-cell">
+								<p>总经理助理</p>
+								<span></span>
+							</div>
+							<div class="contact-join-main">
+								<p>工作地点:深圳(提供住宿)</p>
+								<p>薪酬:8-12k</p>
+								<p>岗位要求:</p>
+								<p>1、本科及以上学历,形象气质佳,综合素质佳,人品端正,保密意识强。</p>
+								<p>2、沟通表达能力强,有较强的文书写作能力,能以英文为工作语言(专业八级)。</p>
+								<p>3、逻辑清晰,执行力强,抗压能力强。</p>
+								<p>4、熟练操作OFFICE软件,能适应不定期出差。有海外留学背景者佳。</p>
+							</div>
+							<div class="contact-join-cell">
+								<p>总经理助理</p>
+								<span></span>
+							</div>
+							<div class="contact-join-main">
+								<p>工作地点:深圳(提供住宿)</p>
+								<p>薪酬:8-12k</p>
+								<p>岗位要求:</p>
+								<p>1、本科及以上学历,形象气质佳,综合素质佳,人品端正,保密意识强。</p>
+								<p>2、沟通表达能力强,有较强的文书写作能力,能以英文为工作语言(专业八级)。</p>
+								<p>3、逻辑清晰,执行力强,抗压能力强。</p>
+								<p>4、熟练操作OFFICE软件,能适应不定期出差。有海外留学背景者佳。</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.contact-join-cell').click(function () {
+					if ($(this).hasClass('on')) {
+						$(this).removeClass('on').next('.contact-join-main').slideUp()
+					} else {
+						$(this).addClass('on').next('.contact-join-main').slideDown()
+						$(this).siblings('.contact-join-cell').removeClass('on').next('.contact-join-main').slideUp()
+					}
+				})
+			})
+		</script>
+	</body>
+</html>

+ 158 - 0
contact.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/contact.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/contact-banner1.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="container">
+				<div class="contact-content">
+					<div class="contact-main">
+						<div class="contact-title">
+							<div class="contact-title-l">
+								<p>联系方式</p>
+							</div>
+							<div class="contact-title-r">
+								<a href="./contact-join.html">人才招聘</a>
+								<a href="">在线咨询</a>
+							</div>
+						</div>
+						<div class="contact-image">
+							<img src="./img/contact-img1.png" alt="联系我们" />
+						</div>
+						<div class="contact-tell">
+							<div class="contact-tell-item">
+								<h1>网址</h1>
+								<p>​http://www.acebelleshenzhen.com</p>
+							</div>
+							<div class="contact-tell-item mid">
+								<h1>联系电话</h1>
+								<p>0755-23769340</p>
+							</div>
+							<div class="contact-tell-item">
+								<h1>公司地址</h1>
+								<p>深圳市福田区卓越世纪中心四号楼32层</p>
+							</div>
+						</div>
+						<div class="contact-maps">
+							<div class="contact-maps-Baidu">这里放百度地图</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 306 - 0
cooperative.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>首页-艾斯佰丽-合作加盟</title>
+		<link rel="stylesheet" href="./css/normalize.css" />
+		<link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
+		<link rel="stylesheet" href="./css/base.css" />
+		<link rel="stylesheet" href="./css/cooperative.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="./index.html">首页</a></li>
+					<li><a href="#">艾斯佰丽</a></li>
+					<li><a href="#">品牌中心</a></li>
+					<li><a href="./cooperative.html">合作加盟</a></li>
+					<li><a href="#">新闻动态</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+			</div>
+		</div>
+		<!-- 顶部导航栏 end -->
+
+		<!-- banner区域 start -->
+		<div class="banner" id="banner">
+			<img src="./img/cooperative_banner.png" alt="" />
+		</div>
+		<!-- banner区域 end -->
+
+		<!-- 内容区域 start -->
+		<div class="main clearfix">
+			<div class="cooperative-tab">
+				<div class="container">
+					<a href="JavaScript:void(0);" class="tab-item select">
+						<h1>品牌实力</h1>
+						<p>Brand strength</p>
+						<span class="line"></span>
+					</a>
+					<a href="JavaScript:void(0);" class="tab-item">
+						<h1>服务优势</h1>
+						<p>Service advantage</p>
+						<span class="line"></span>
+					</a>
+					<a href="JavaScript:void(0);" class="tab-item">
+						<h1>服务模式</h1>
+						<p>Service mode</p>
+						<span class="line"></span>
+					</a>
+					<a href="./index.html" class="tab-item-last">
+						<h1>在线咨询</h1>
+						<p>Join online</p>
+					</a>
+				</div>
+			</div>
+			<div class="cooperative-main">
+				<div class="container" id="cooperative-main">
+					<!-- 品牌实力 -->
+					<div class="cooperative-main-item select">
+						<div class="main-title">
+							<img src="./img/cooperative_title01@2x.png" alt="" />
+							<p>品牌实力</p>
+						</div>
+						<div class="main-content">
+							<div class="main-content-item">
+								<div class="item first">
+									<img src="./img/cooperative_brand_1@2x.png" alt="" />
+								</div>
+								<div class="item">
+									<img src="./img/cooperative_brand_2@2x.png" alt="" />
+								</div>
+							</div>
+							<div class="main-content-mids">
+								<div class="item">
+									<img src="./img/cooperative_brand_3@2x.png" alt="" />
+								</div>
+							</div>
+							<div class="main-content-item">
+								<div class="item first">
+									<img src="./img/cooperative_brand_4@2x.png" alt="" />
+								</div>
+								<div class="item">
+									<img src="./img/cooperative_brand_5@2x.png" alt="" />
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- 服务优势 -->
+					<div class="cooperative-main-item">
+						<div class="main-title">
+							<img src="./img/cooperative_title02@2x.png" alt="" />
+							<p>服务优势</p>
+						</div>
+						<div class="main-content">
+							<div class="main-content-serve">
+								<div class="server-title">
+									<img src="./img/cooperative_server_1@2x.png" alt="" />
+									<p class="title">服务优势标题</p>
+								</div>
+								<div class="server-text">
+									<p class="min">这里是服务优势说明这里是服务优势说明这里...</p>
+									<p class="max">
+										这里是服务优势说明这里是服务优势说明这里这里是服务优势说明这里是服务优势说明这里这里是服务优势说明这里是服务优势说明这里
+									</p>
+									<a class="btn-show" href="JavaScript:void(0);">展开</a>
+								</div>
+							</div>
+							<div class="main-content-serve">
+								<div class="server-title">
+									<img src="./img/cooperative_server_2@2x.png" alt="" />
+									<p class="title">服务优势标题</p>
+								</div>
+								<div class="server-text">
+									<p class="min">这里是服务优势说明这里是服务优势说明这里...</p>
+									<p class="max">
+										这里是服务优势说明这里是服务优势说明这里这里是服务优势说明这里是服务优势说明这里这里是服务优势说明这里是服务优势说明这里
+									</p>
+									<a class="btn-show" href="JavaScript:void(0);">展开</a>
+								</div>
+							</div>
+							<div class="main-content-serve">
+								<div class="server-title">
+									<img src="./img/cooperative_server_3@2x.png" alt="" />
+									<p class="title">服务优势标题</p>
+								</div>
+								<div class="server-text">
+									<p class="min">这里是服务优势说明这里是服务优势说明这里...</p>
+									<p class="max">
+										这里是服务优势说明这里是服务优势说明这里这里是服务优势说明这里是服务优势说明这里这里是服务优势说明这里是服务优势说明这里
+									</p>
+									<a class="btn-show" href="JavaScript:void(0);">展开</a>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- 服务模式 -->
+					<div class="cooperative-main-item">
+						<div class="main-title">
+							<img src="./img/cooperative_title03@2x.png" alt="" />
+							<p>服务模式</p>
+						</div>
+						<div class="main-content">
+							<div class="main-content-mode">
+								<div class="mode-label">
+									<img src="./img/cooperative_mode_1@2x.png" alt="" />
+								</div>
+								<div class="mode-content">
+									<h1>千万业绩定制</h1>
+									<p>
+										打造极致产品,吸引尊贵会员提升品牌高度,建立客户美誉度;让终端门店真正落地马上赚钱,实现千万业绩。
+									</p>
+								</div>
+							</div>
+							<div class="main-content-mode">
+								<div class="mode-label">
+									<img src="./img/cooperative_mode_2@2x.png" alt="" />
+								</div>
+								<div class="mode-content">
+									<h1>客户答谢会</h1>
+									<p>
+										感恩,答谢终端消费者,打造高端会员交圈,提升服务附加值:分享
+										智慧,丰富生活,创造人生价值;传递社会责任感、传播正能量,引 领全新贵族 生活方式的开启。
+									</p>
+								</div>
+							</div>
+							<div class="main-content-mode">
+								<div class="mode-label">
+									<img src="./img/cooperative_mode_3@2x.png" alt="" />
+								</div>
+								<div class="mode-content">
+									<h1>千万业绩定制</h1>
+									<p>
+										打造极致产品,吸引尊贵会员提升品牌高度,建立客户美誉度;让终端门店真正落地马上赚钱,实现千万业绩。
+									</p>
+								</div>
+							</div>
+							<div class="main-content-mode">
+								<div class="mode-label">
+									<img src="./img/cooperative_mode_4@2x.png" alt="" />
+								</div>
+								<div class="mode-content">
+									<h1>客户答谢会</h1>
+									<p>
+										感恩,答谢终端消费者,打造高端会员交圈,提升服务附加值:分享
+										智慧,丰富生活,创造人生价值;传递社会责任感、传播正能量,引 领全新贵族 生活方式的开启。
+									</p>
+								</div>
+							</div>
+							<div class="main-content-mode">
+								<div class="mode-label">
+									<img src="./img/cooperative_mode_5@2x.png" alt="" />
+								</div>
+								<div class="mode-content">
+									<h1>千万业绩定制</h1>
+									<p>
+										打造极致产品,吸引尊贵会员提升品牌高度,建立客户美誉度;让终端门店真正落地马上赚钱,实现千万业绩。
+									</p>
+								</div>
+							</div>
+							<div class="main-content-mode">
+								<div class="mode-label">
+									<img src="./img/cooperative_mode_6@2x.png" alt="" />
+								</div>
+								<div class="mode-content">
+									<h1>客户答谢会</h1>
+									<p>
+										感恩,答谢终端消费者,打造高端会员交圈,提升服务附加值:分享
+										智慧,丰富生活,创造人生价值;传递社会责任感、传播正能量,引 领全新贵族 生活方式的开启。
+									</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 内容区域 end -->
+
+		<!-- 底部区域 start -->
+		<div class="footer">
+			<div class="container clearfix">
+				<div class="section fl">
+					<div class="logo"><img src="./img/logo2.png" alt="" /></div>
+					<div class="item mobile">
+						<span>0755-23769340</span>
+						<span>周一至周五:09:00-18:00</span>
+					</div>
+					<div class="item email">518000</div>
+					<div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+				</div>
+				<ul class="nav fl">
+					<li><a href="#">首页</a></li>
+					<li><a href="#">ROS'S</a></li>
+					<li><a href="#">系列产品</a></li>
+				</ul>
+				<ul class="nav fl">
+					<li><a href="#">案例展示</a></li>
+					<li><a href="#">授权认证</a></li>
+					<li><a href="#">联系我们</a></li>
+				</ul>
+				<div class="qrcode fr">
+					<img src="./img/qrcode.jpg" alt="二维码" />
+					<div class="tip">扫一扫加关注</div>
+				</div>
+			</div>
+			<div class="line"></div>
+			<div class="link">
+				<a href="#">法律声明</a>
+				<i></i>
+				<a href="#">隐私政策</a>
+				<i></i>
+				<a href="#">购物付款类型</a>
+				<i></i>
+				<a href="#">服务付款类型</a>
+				<i></i>
+				<a href="#">支付方式</a>
+				<i></i>
+				<a href="#">产品售后与申诉</a>
+				<i></i>
+				<a href="#">服务投诉与申诉</a>
+				<i></i>
+				<a href="#">族蚂议价流程</a>
+				<i></i>
+				<a href="#">关于族蚂网</a>
+				<i></i>
+				<a href="#">如何创建主体</a>
+				<i></i>
+				<a href="#">违规举报</a>
+				<i></i>
+				<a href="#">知识产权维护</a>
+			</div>
+			<div class="copyright">
+				<a href="#">本网站使用族蚂技术创建及服务器托管</a>
+				<span>Copyright ©2019</span>
+				<span>acebelleshenzhen.com</span>
+				<span>版权所有 粤ICP备2020131296号</span>
+			</div>
+		</div>
+		<!-- 底部区域 end -->
+
+		<script src="./libs/swiper/swiper.min.js"></script>
+		<script src="./libs/jquery-3.6.0.min.js"></script>
+		<script>
+			$(function () {
+				$('.cooperative-tab .tab-item').click(function () {
+					$(this).addClass('select').siblings('.tab-item').removeClass('select')
+					var index = $(this).index()
+					$('.cooperative-main-item').eq(index).show().siblings('.cooperative-main-item').hide()
+				})
+				$('.btn-show').click(function () {
+					console.log('11111111111')
+					$(this).siblings('.min').hide()
+					$(this).siblings('.max').show()
+				})
+			})
+		</script>
+	</body>
+</html>

+ 88 - 0
css/appliance.css

@@ -0,0 +1,88 @@
+.banner {
+  width: 100%;
+  height: 530px;
+}
+.banner img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.main {
+  height: auto;
+  box-sizing: border-box;
+}
+.main .appliance-title {
+  width: 100%;
+  height: 244px;
+  box-sizing: border-box;
+  padding: 80px 0;
+}
+.main .appliance-title h1 {
+  font-size: 34px;
+  line-height: 45px;
+  color: #272727;
+  text-align: center;
+  font-weight: normal;
+}
+.main .appliance-title p {
+  font-size: 16px;
+  line-height: 30px;
+  color: #999999;
+  text-align: center;
+}
+.main .appliance-content {
+  width: 100%;
+  height: auto;
+}
+.main .appliance-content .appliance-li {
+  width: 100%;
+  height: 380px;
+  margin-bottom: 80px;
+  transition: all 0.5s;
+}
+.main .appliance-content .appliance-li:hover {
+  transform: translateY(-10px);
+  box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
+}
+.main .appliance-content .appliance-li:last-child {
+  margin-bottom: 0;
+}
+.main .appliance-content .appliance-li .appliance-lil {
+  width: 570px;
+  height: 100%;
+  float: left;
+}
+.main .appliance-content .appliance-li .appliance-lil img {
+  width: 570px;
+  height: 100%;
+  display: block;
+}
+.main .appliance-content .appliance-li .appliance-lir {
+  width: 630px;
+  height: 380px;
+  background: url(../img/appliance-lbg.png);
+  background-size: cover;
+  float: right;
+  box-sizing: border-box;
+  padding: 48px 38px;
+}
+.main .appliance-content .appliance-li .appliance-lir .appliance-lir-top {
+  width: 100%;
+  height: 31px;
+  font-size: 24px;
+  color: #272727;
+  text-align: left;
+  margin-bottom: 30px;
+}
+.main .appliance-content .appliance-li .appliance-lir .appliance-lir-text {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 10px;
+}
+.main .appliance-content .appliance-li .appliance-lir .appliance-lir-text p {
+  font-size: 16px;
+  color: #505050;
+  text-align: justify;
+  line-height: 35px;
+}

+ 87 - 0
css/appliance.scss

@@ -0,0 +1,87 @@
+.banner {
+	width: 100%;
+	height: 530px;
+	img {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+}
+.main {
+	height: auto;
+	box-sizing: border-box;
+	.appliance-title {
+		width: 100%;
+		height: 244px;
+		box-sizing: border-box;
+		padding: 80px 0;
+		h1 {
+			font-size: 34px;
+			line-height: 45px;
+			color: #272727;
+			text-align: center;
+			font-weight: normal;
+		}
+		p {
+			font-size: 16px;
+			line-height: 30px;
+			color: #999999;
+			text-align: center;
+		}
+	}
+	.appliance-content {
+		width: 100%;
+		height: auto;
+		.appliance-li {
+			width: 100%;
+			height: 380px;
+			margin-bottom: 80px;
+			transition: all 0.5s;
+			&:hover {
+				transform: translateY(-10px);
+				box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
+			}
+			&:last-child {
+				margin-bottom: 0;
+			}
+			.appliance-lil {
+				width: 570px;
+				height: 100%;
+				float: left;
+				img {
+					width: 570px;
+					height: 100%;
+					display: block;
+				}
+			}
+			.appliance-lir {
+				width: 630px;
+				height: 380px;
+				background: url(../img/appliance-lbg.png);
+				background-size: cover;
+				float: right;
+				box-sizing: border-box;
+				padding: 48px 38px;
+				.appliance-lir-top {
+					width: 100%;
+					height: 31px;
+					font-size: 24px;
+					color: #272727;
+					text-align: left;
+					margin-bottom: 30px;
+				}
+				.appliance-lir-text {
+					width: 100%;
+					box-sizing: border-box;
+					padding-left: 10px;
+					p {
+						font-size: 16px;
+						color: #505050;
+						text-align: justify;
+						line-height: 35px;
+					}
+				}
+			}
+		}
+	}
+}

+ 266 - 0
css/contact.css

@@ -0,0 +1,266 @@
+body {
+  background-color: #f7f7f7;
+}
+
+.banner {
+  width: 100%;
+  height: 530px;
+}
+.banner img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.contact-content {
+  width: 100%;
+  min-height: 1127px;
+  position: relative;
+}
+.contact-content.consult {
+  min-height: 1340px;
+}
+.contact-content .contact-main {
+  width: 100%;
+  min-height: 1224px;
+  padding: 0 58px 58px 58px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  position: absolute;
+  top: -110px;
+  left: 0;
+}
+.contact-content .contact-main.consult {
+  min-height: 1440px;
+}
+.contact-content .contact-main .contact-title {
+  width: 100%;
+  height: 110px;
+  float: left;
+}
+.contact-content .contact-main .contact-title .contact-title-l {
+  float: left;
+  position: relative;
+}
+.contact-content .contact-main .contact-title .contact-title-l::before {
+  content: "";
+  width: 24px;
+  height: 4px;
+  background-color: #0688d2;
+  position: absolute;
+  top: 50%;
+  left: 0;
+}
+.contact-content .contact-main .contact-title .contact-title-l p {
+  font-size: 24px;
+  color: #505050;
+  line-height: 110px;
+  padding-left: 48px;
+  position: relative;
+}
+.contact-content .contact-main .contact-title .contact-title-r {
+  box-sizing: border-box;
+  padding: 40px 0;
+  float: right;
+}
+.contact-content .contact-main .contact-title .contact-title-r a {
+  display: block;
+  float: left;
+  margin: 0 10px;
+  font-size: 16px;
+  color: #505050;
+  line-height: 30px;
+  text-align: center;
+}
+.contact-content .contact-main .contact-title .contact-title-r a:hover {
+  color: #0688d2;
+  text-decoration: underline;
+}
+.contact-content .contact-main .contact-image {
+  width: 100%;
+  height: 316px;
+  float: left;
+}
+.contact-content .contact-main .contact-image img {
+  width: 100%;
+  height: 316px;
+  display: block;
+}
+.contact-content .contact-main .contact-tell {
+  width: 100%;
+  height: 56px;
+  float: left;
+  margin-top: 120px;
+  margin-bottom: 79px;
+}
+.contact-content .contact-main .contact-tell .contact-tell-item {
+  float: left;
+}
+.contact-content .contact-main .contact-tell .contact-tell-item.mid {
+  width: 254px;
+  box-sizing: border-box;
+  padding-left: 64px;
+  position: relative;
+  margin: 0 50px;
+}
+.contact-content .contact-main .contact-tell .contact-tell-item.mid::before {
+  content: "";
+  width: 1px;
+  height: 56px;
+  background-color: #e3e6eb;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.contact-content .contact-main .contact-tell .contact-tell-item.mid::after {
+  content: "";
+  width: 1px;
+  height: 56px;
+  background-color: #e3e6eb;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.contact-content .contact-main .contact-tell .contact-tell-item h1 {
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 21px;
+  margin-bottom: 16px;
+  color: #999999;
+}
+.contact-content .contact-main .contact-tell .contact-tell-item p {
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 21px;
+  color: #272727;
+}
+.contact-content .contact-main .contact-maps {
+  width: 100%;
+  height: 430px;
+  float: left;
+}
+.contact-content .contact-main .contact-maps .contact-maps-Baidu {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  text-align: center;
+  font-size: 50px;
+  font-weight: bold;
+  line-height: 430px;
+  color: #ffff;
+}
+.contact-content .contact-main .contact-join {
+  width: 100%;
+  height: auto;
+}
+.contact-content .contact-main .contact-join h1 {
+  line-height: 100px;
+  font-size: 24px;
+  color: #272727;
+  text-align: left;
+  font-weight: normal;
+}
+.contact-content .contact-main .contact-join .contact-join-cell {
+  width: 100%;
+  height: 48px;
+  box-sizing: border-box;
+  border: 1px solid #dedede;
+  padding: 8px 16px;
+  position: relative;
+  cursor: pointer;
+  margin-bottom: 24px;
+}
+.contact-content .contact-main .contact-join .contact-join-cell.on {
+  background-color: #0688d2;
+}
+.contact-content .contact-main .contact-join .contact-join-cell.on p {
+  color: #fff;
+}
+.contact-content .contact-main .contact-join .contact-join-cell.on span {
+  background: url(../img/contact-icon-down.png);
+}
+.contact-content .contact-main .contact-join .contact-join-cell p {
+  font-size: 16px;
+  line-height: 32px;
+  color: #505050;
+}
+.contact-content .contact-main .contact-join .contact-join-cell span {
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: url(../img/contact-icon-up.png);
+  background-size: cover;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+.contact-content .contact-main .contact-join .contact-join-main {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 0 10px 32px 10px;
+  display: none;
+}
+.contact-content .contact-main .contact-join .contact-join-main p {
+  font-size: 16px;
+  line-height: 33px;
+  color: #505050;
+}
+.contact-content .contact-main .contact-consult {
+  width: 100%;
+  height: auto;
+  float: left;
+  margin-top: 80px;
+}
+.contact-content .contact-main .contact-consult .contact-form {
+  width: 100%;
+  min-height: 48px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  border: 1px solid #dedede;
+  line-height: 48px;
+  font-size: 16px;
+  color: #505050;
+  margin-bottom: 24px;
+}
+.contact-content .contact-main .contact-consult .contact-form.none {
+  border: none;
+}
+.contact-content .contact-main .contact-consult .contact-form .label {
+  width: 100px;
+  line-height: 48px;
+  float: left;
+}
+.contact-content .contact-main .contact-consult .contact-form .form-input {
+  border: none;
+  width: 940px;
+  height: 44px;
+  line-height: 44px;
+  float: left;
+}
+.contact-content .contact-main .contact-consult .contact-form .form-select {
+  border: none;
+  width: 940px;
+  height: 44px;
+  line-height: 44px;
+  float: left;
+}
+.contact-content .contact-main .contact-consult .contact-form .textarea {
+  width: 948px;
+  height: 161px;
+  padding: 20px 0;
+  border: none;
+  resize: none;
+  outline: none;
+}
+.contact-content .contact-main .contact-consult .contact-form .btn {
+  width: 526px;
+  height: 48px;
+  line-height: 48px;
+  display: block;
+  margin: 0 auto;
+  background-color: #0688d2;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+}

+ 267 - 0
css/contact.scss

@@ -0,0 +1,267 @@
+body {
+	background-color: #f7f7f7;
+}
+.banner {
+	width: 100%;
+	height: 530px;
+	img {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+}
+.contact-content {
+	width: 100%;
+	min-height: 1127px;
+	position: relative;
+	&.consult {
+		min-height: 1340px;
+	}
+	.contact-main {
+		width: 100%;
+		min-height: 1224px;
+		padding: 0 58px 58px 58px;
+		box-sizing: border-box;
+		background-color: #ffffff;
+		position: absolute;
+		top: -110px;
+		left: 0;
+		&.consult {
+			min-height: 1440px;
+		}
+		.contact-title {
+			width: 100%;
+			height: 110px;
+			float: left;
+			.contact-title-l {
+				float: left;
+				position: relative;
+				&::before {
+					content: '';
+					width: 24px;
+					height: 4px;
+					background-color: #0688d2;
+					position: absolute;
+					top: 50%;
+					left: 0;
+				}
+				p {
+					font-size: 24px;
+					color: #505050;
+					line-height: 110px;
+					padding-left: 48px;
+					position: relative;
+				}
+			}
+			.contact-title-r {
+				box-sizing: border-box;
+				padding: 40px 0;
+				float: right;
+				a {
+					display: block;
+					float: left;
+					margin: 0 10px;
+					font-size: 16px;
+					color: #505050;
+					line-height: 30px;
+					text-align: center;
+					&:hover {
+						color: #0688d2;
+						text-decoration: underline;
+					}
+				}
+			}
+		}
+		.contact-image {
+			width: 100%;
+			height: 316px;
+			float: left;
+			img {
+				width: 100%;
+				height: 316px;
+				display: block;
+			}
+		}
+		// 联系我们CSS样式
+		.contact-tell {
+			width: 100%;
+			height: 56px;
+			float: left;
+			margin-top: 120px;
+			margin-bottom: 79px;
+			.contact-tell-item {
+				float: left;
+				&.mid {
+					width: 254px;
+					box-sizing: border-box;
+					padding-left: 64px;
+					position: relative;
+					margin: 0 50px;
+					&::before {
+						content: '';
+						width: 1px;
+						height: 56px;
+						background-color: #e3e6eb;
+						position: absolute;
+						left: 0;
+						top: 0;
+					}
+					&::after {
+						content: '';
+						width: 1px;
+						height: 56px;
+						background-color: #e3e6eb;
+						position: absolute;
+						right: 0;
+						top: 0;
+					}
+				}
+				h1 {
+					font-weight: normal;
+					font-size: 16px;
+					line-height: 21px;
+					margin-bottom: 16px;
+					color: #999999;
+				}
+				p {
+					font-weight: normal;
+					font-size: 16px;
+					line-height: 21px;
+					color: #272727;
+				}
+			}
+		}
+		.contact-maps {
+			width: 100%;
+			height: 430px;
+			float: left;
+			.contact-maps-Baidu {
+				width: 100%;
+				height: 100%;
+				background-color: #000;
+				text-align: center;
+				font-size: 50px;
+				font-weight: bold;
+				line-height: 430px;
+				color: #ffff;
+			}
+		}
+		// 人才招聘CSS样式
+		.contact-join {
+			width: 100%;
+			height: auto;
+			h1 {
+				line-height: 100px;
+				font-size: 24px;
+				color: #272727;
+				text-align: left;
+				font-weight: normal;
+			}
+			.contact-join-cell {
+				width: 100%;
+				height: 48px;
+				box-sizing: border-box;
+				border: 1px solid #dedede;
+				padding: 8px 16px;
+				position: relative;
+				cursor: pointer;
+				margin-bottom: 24px;
+				&.on {
+					background-color: #0688d2;
+					p {
+						color: #fff;
+					}
+					span {
+						background: url(../img/contact-icon-down.png);
+					}
+				}
+				p {
+					font-size: 16px;
+					line-height: 32px;
+					color: #505050;
+				}
+				span {
+					display: block;
+					width: 32px;
+					height: 32px;
+					background: url(../img/contact-icon-up.png);
+					background-size: cover;
+					position: absolute;
+					right: 8px;
+					top: 8px;
+				}
+			}
+			.contact-join-main {
+				width: 100%;
+				height: auto;
+				box-sizing: border-box;
+				padding: 0 10px 32px 10px;
+				display: none;
+				p {
+					font-size: 16px;
+					line-height: 33px;
+					color: #505050;
+				}
+			}
+		}
+		// 在线咨询CSS样式
+		.contact-consult {
+			width: 100%;
+			height: auto;
+			float: left;
+			margin-top: 80px;
+			.contact-form {
+				width: 100%;
+				min-height: 48px;
+				padding: 0 16px;
+				box-sizing: border-box;
+				border: 1px solid #dedede;
+				line-height: 48px;
+				font-size: 16px;
+				color: #505050;
+				margin-bottom: 24px;
+				&.none {
+					border: none;
+				}
+				.label {
+					width: 100px;
+					line-height: 48px;
+					float: left;
+				}
+				.form-input {
+					border: none;
+					width: 940px;
+					height: 44px;
+					line-height: 44px;
+					float: left;
+				}
+				.form-select {
+					border: none;
+					width: 940px;
+					height: 44px;
+					line-height: 44px;
+					float: left;
+				}
+				.textarea {
+					width: 948px;
+					height: 161px;
+					padding: 20px 0;
+					border: none;
+					resize: none;
+					outline: none;
+				}
+				.btn {
+					width: 526px;
+					height: 48px;
+					line-height: 48px;
+					display: block;
+					margin: 0 auto;
+					background-color: #0688d2;
+					color: #fff;
+					font-size: 16px;
+					text-align: center;
+				}
+			}
+		}
+	}
+}

+ 288 - 0
css/cooperative.css

@@ -0,0 +1,288 @@
+.banner {
+  width: 100%;
+  height: 530px;
+}
+.banner img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.main {
+  height: auto;
+  box-sizing: border-box;
+}
+.main .cooperative-tab {
+  width: 100%;
+  height: 100px;
+  background-color: #f7f7f7;
+}
+.main .cooperative-tab .tab-item-last {
+  display: block;
+  width: 300px;
+  float: left;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 25px 0;
+  position: relative;
+}
+.main .cooperative-tab .tab-item-last h1 {
+  font-size: 24px;
+  color: #272727;
+  line-height: 30px;
+  text-align: center;
+}
+.main .cooperative-tab .tab-item-last p {
+  font-size: 12px;
+  color: #272727;
+  line-height: 20px;
+  text-align: center;
+}
+.main .cooperative-tab .tab-item {
+  display: block;
+  width: 300px;
+  float: left;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 25px 0;
+  position: relative;
+}
+.main .cooperative-tab .tab-item.select h1 {
+  color: #0688d2;
+}
+.main .cooperative-tab .tab-item.select p {
+  color: #0688d2;
+}
+.main .cooperative-tab .tab-item.select::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 9px solid #0688d2;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+}
+.main .cooperative-tab .tab-item .line {
+  display: block;
+  width: 1px;
+  height: 32px;
+  background-color: #dbdbdb;
+  position: absolute;
+  right: 0;
+  top: 35px;
+}
+.main .cooperative-tab .tab-item h1 {
+  font-size: 24px;
+  color: #272727;
+  line-height: 30px;
+  text-align: center;
+}
+.main .cooperative-tab .tab-item p {
+  font-size: 12px;
+  color: #272727;
+  line-height: 20px;
+  text-align: center;
+}
+.main .cooperative-main {
+  width: 100%;
+  min-width: 1000px;
+  box-sizing: border-box;
+  padding: 60px 0;
+}
+.main .cooperative-main .cooperative-main-item {
+  display: none;
+}
+.main .cooperative-main .cooperative-main-item.select {
+  display: block;
+}
+.main .cooperative-main .cooperative-main-item .main-title {
+  width: 400px;
+  margin: 0 auto;
+  position: relative;
+}
+.main .cooperative-main .cooperative-main-item .main-title img {
+  margin: 0 auto;
+  display: block;
+  height: 50px;
+}
+.main .cooperative-main .cooperative-main-item .main-title p {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  font-size: 34px;
+  color: #272727;
+  text-align: center;
+  position: absolute;
+  bottom: -12px;
+  left: 0;
+}
+.main .cooperative-main .cooperative-main-item .main-content {
+  width: 100%;
+  height: auto;
+  margin-top: 100px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-item {
+  width: 286px;
+  height: 592px;
+  float: left;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item {
+  width: 286px;
+  height: 286px;
+  overflow: hidden;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item:hover img {
+  transform: scale(1.2);
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item img {
+  width: 286px;
+  height: 286px;
+  display: block;
+  transition: all 0.4s;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item.first {
+  margin-bottom: 18px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mids {
+  width: 592px;
+  height: 592px;
+  float: left;
+  margin: 0 18px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item {
+  width: 592px;
+  height: 592px;
+  overflow: hidden;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item:hover img {
+  transform: scale(1.2);
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item img {
+  width: 592px;
+  height: 592px;
+  display: block;
+  transition: all 0.4s;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve {
+  width: 400px;
+  height: auto;
+  padding: 30px 32px;
+  box-sizing: border-box;
+  transition: all 0.4s;
+  cursor: pointer;
+  float: left;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve:hover {
+  background-color: #fff;
+  transform: translateY(-10px);
+  box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title {
+  width: 336px;
+  height: 216px;
+  box-sizing: border-box;
+  padding: 40px 0;
+  background: url(../img/cooperative_server@2x.png);
+  background-size: cover;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title {
+  width: 100%;
+  line-height: 45px;
+  margin-top: 20px;
+  position: relative;
+  font-size: 34px;
+  color: #ffffff;
+  text-align: center;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title::before {
+  content: "";
+  width: 16px;
+  height: 2px;
+  background-color: #fff;
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  margin-left: -8px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title img {
+  width: 40px;
+  height: 40px;
+  display: block;
+  margin: 0 auto;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding-top: 24px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p {
+  line-height: 30px;
+  font-size: 16px;
+  color: #505050;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p.max {
+  display: none;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text .btn-show {
+  display: block;
+  width: 100px;
+  height: 28px;
+  text-align: center;
+  box-sizing: border-box;
+  border: 1px solid #e8e8e8;
+  color: #999999;
+  font-size: 12px;
+  line-height: 28px;
+  float: left;
+  margin-top: 20px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode {
+  width: 580px;
+  height: 180px;
+  box-sizing: border-box;
+  padding: 24px 12px;
+  border: 1px solid #e8e8e8;
+  margin-right: 40px;
+  margin-bottom: 40px;
+  transition: all 0.5s;
+  float: left;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode:hover {
+  transform: translateY(-10px);
+  box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode:nth-child(2n) {
+  margin-right: 0;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label {
+  width: 56px;
+  height: 100%;
+  float: left;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label img {
+  width: 56px;
+  height: 56px;
+  float: left;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content {
+  width: 500px;
+  height: 100%;
+  margin-left: 12px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content h1 {
+  font-size: 24px;
+  color: #272727;
+  line-height: 32px;
+  text-align: left;
+  margin-bottom: 10px;
+}
+.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content p {
+  font-size: 16px;
+  color: #505050;
+  line-height: 25px;
+  text-align: justify;
+}

+ 293 - 0
css/cooperative.scss

@@ -0,0 +1,293 @@
+.banner {
+	width: 100%;
+	height: 530px;
+	img {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+}
+.main {
+	height: auto;
+	box-sizing: border-box;
+	.cooperative-tab {
+		width: 100%;
+		height: 100px;
+		background-color: #f7f7f7;
+		.tab-item-last {
+			display: block;
+			width: 300px;
+			float: left;
+			height: 100%;
+			box-sizing: border-box;
+			padding: 25px 0;
+			position: relative;
+			h1 {
+				font-size: 24px;
+				color: #272727;
+				line-height: 30px;
+				text-align: center;
+			}
+			p {
+				font-size: 12px;
+				color: #272727;
+				line-height: 20px;
+				text-align: center;
+			}
+		}
+		.tab-item {
+			display: block;
+			width: 300px;
+			float: left;
+			height: 100%;
+			box-sizing: border-box;
+			padding: 25px 0;
+			position: relative;
+			&.select {
+				h1 {
+					color: #0688d2;
+				}
+				p {
+					color: #0688d2;
+				}
+				&::before {
+					content: '';
+					width: 0;
+					height: 0;
+					border-left: 9px solid transparent;
+					border-right: 9px solid transparent;
+					border-bottom: 9px solid #0688d2;
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					margin-left: -5px;
+				}
+			}
+			.line {
+				display: block;
+				width: 1px;
+				height: 32px;
+				background-color: #dbdbdb;
+				position: absolute;
+				right: 0;
+				top: 35px;
+			}
+			h1 {
+				font-size: 24px;
+				color: #272727;
+				line-height: 30px;
+				text-align: center;
+			}
+			p {
+				font-size: 12px;
+				color: #272727;
+				line-height: 20px;
+				text-align: center;
+			}
+		}
+	}
+	.cooperative-main {
+		width: 100%;
+		min-width: 1000px;
+		box-sizing: border-box;
+		padding: 60px 0;
+		.cooperative-main-item {
+			display: none;
+			&.select {
+				display: block;
+			}
+			.main-title {
+				width: 400px;
+				margin: 0 auto;
+				position: relative;
+				img {
+					margin: 0 auto;
+					display: block;
+					height: 50px;
+				}
+				p {
+					width: 100%;
+					height: 30px;
+					line-height: 30px;
+					font-size: 34px;
+					color: #272727;
+					text-align: center;
+					position: absolute;
+					bottom: -12px;
+					left: 0;
+				}
+			}
+			.main-content {
+				width: 100%;
+				height: auto;
+				margin-top: 100px;
+				.main-content-item {
+					width: 286px;
+					height: 592px;
+					float: left;
+					.item {
+						width: 286px;
+						height: 286px;
+						overflow: hidden;
+						&:hover {
+							img {
+								transform: scale(1.2);
+							}
+						}
+						img {
+							width: 286px;
+							height: 286px;
+							display: block;
+							transition: all 0.4s;
+						}
+						&.first {
+							margin-bottom: 18px;
+						}
+					}
+				}
+				.main-content-mids {
+					width: 592px;
+					height: 592px;
+					float: left;
+					margin: 0 18px;
+					.item {
+						width: 592px;
+						height: 592px;
+						overflow: hidden;
+						&:hover {
+							img {
+								transform: scale(1.2);
+							}
+						}
+						img {
+							width: 592px;
+							height: 592px;
+							display: block;
+							transition: all 0.4s;
+						}
+					}
+				}
+				.main-content-serve {
+					width: 400px;
+					height: auto;
+					padding: 30px 32px;
+					box-sizing: border-box;
+					transition: all 0.4s;
+					cursor: pointer;
+					float: left;
+					&:hover {
+						background-color: #fff;
+						transform: translateY(-10px);
+						box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
+					}
+					.server-title {
+						width: 336px;
+						height: 216px;
+						box-sizing: border-box;
+						padding: 40px 0;
+						background: url(../img/cooperative_server@2x.png);
+						background-size: cover;
+						.title {
+							width: 100%;
+							line-height: 45px;
+							margin-top: 20px;
+							position: relative;
+							font-size: 34px;
+							color: #ffffff;
+							text-align: center;
+							&::before {
+								content: '';
+								width: 16px;
+								height: 2px;
+								background-color: #fff;
+								position: absolute;
+								top: -8px;
+								left: 50%;
+								margin-left: -8px;
+							}
+						}
+						img {
+							width: 40px;
+							height: 40px;
+							display: block;
+							margin: 0 auto;
+						}
+					}
+					.server-text {
+						width: 100%;
+						height: auto;
+						box-sizing: border-box;
+						padding-top: 24px;
+						p {
+							line-height: 30px;
+							font-size: 16px;
+							color: #505050;
+							&.max {
+								display: none;
+							}
+						}
+						.btn-show {
+							display: block;
+							width: 100px;
+							height: 28px;
+							text-align: center;
+							box-sizing: border-box;
+							border: 1px solid #e8e8e8;
+							color: #999999;
+							font-size: 12px;
+							line-height: 28px;
+							float: left;
+							margin-top: 20px;
+						}
+					}
+				}
+				.main-content-mode {
+					width: 580px;
+					height: 180px;
+					box-sizing: border-box;
+					padding: 24px 12px;
+					border: 1px solid #e8e8e8;
+					margin-right: 40px;
+					margin-bottom: 40px;
+					transition: all 0.5s;
+					float: left;
+					&:hover {
+						transform: translateY(-10px);
+						box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
+					}
+					&:nth-child(2n) {
+						margin-right: 0;
+					}
+					.mode-label {
+						width: 56px;
+						height: 100%;
+						float: left;
+						img {
+							width: 56px;
+							height: 56px;
+							float: left;
+						}
+					}
+					.mode-content {
+						width: 500px;
+						height: 100%;
+						margin-left: 12px;
+						h1 {
+							font-size: 24px;
+							color: #272727;
+							line-height: 32px;
+							text-align: left;
+							margin-bottom: 10px;
+						}
+						p {
+							font-size: 16px;
+							color: #505050;
+							line-height: 25px;
+							text-align: justify;
+						}
+					}
+				}
+			}
+		}
+	}
+}

BIN
img/appliance-img1-1.png


BIN
img/appliance-img1-2.png


BIN
img/appliance-img1-3.png


BIN
img/appliance-img1-4.png


BIN
img/appliance-img1-5.png


BIN
img/appliance-img2-1.png


BIN
img/appliance-img2-2.png


BIN
img/appliance-img2-3.png


BIN
img/appliance-img2-4.png


BIN
img/appliance-img2-5.png


BIN
img/appliance-img3-1.png


BIN
img/appliance-img3-2.png


BIN
img/appliance-img3-3.png


BIN
img/appliance-img3-4.png


BIN
img/appliance-img4-1.png


BIN
img/appliance-img4-2.png


BIN
img/appliance-img4-3.png


BIN
img/appliance-img4-4.png


BIN
img/appliance-img5-1.png


BIN
img/appliance-img5-2.png


BIN
img/appliance-img5-3.png


BIN
img/appliance-img5-4.png


BIN
img/appliance-img6-1.png


BIN
img/appliance-img6-2.png


BIN
img/appliance-img6-3.png


BIN
img/appliance-img6-4.png


BIN
img/appliance-img7-1.png


BIN
img/appliance-img7-2.png


BIN
img/appliance-img7-3.png


BIN
img/appliance-img7-4.png


BIN
img/appliance-lbg.png


BIN
img/contact-banner1.png


BIN
img/contact-banner2.png


BIN
img/contact-banner3.png


BIN
img/contact-icon-down.png


BIN
img/contact-icon-up.png


BIN
img/contact-img1.png


BIN
img/contact-img2.png


BIN
img/contact-img3.png


BIN
img/cooperative_banner.png


BIN
img/cooperative_brand_1@2x.png


BIN
img/cooperative_brand_2@2x.png


BIN
img/cooperative_brand_3@2x.png


BIN
img/cooperative_brand_4@2x.png


BIN
img/cooperative_brand_5@2x.png


BIN
img/cooperative_mode_1@2x.png


BIN
img/cooperative_mode_2@2x.png


BIN
img/cooperative_mode_3@2x.png


BIN
img/cooperative_mode_4@2x.png


BIN
img/cooperative_mode_5@2x.png


BIN
img/cooperative_mode_6@2x.png


BIN
img/cooperative_server@2x.png


BIN
img/cooperative_server_1@2x.png


BIN
img/cooperative_server_2@2x.png


BIN
img/cooperative_server_3@2x.png


BIN
img/cooperative_title01@2x.png


BIN
img/cooperative_title02@2x.png


BIN
img/cooperative_title03@2x.png


+ 322 - 322
index.html

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