<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="../css/common.css">
<link rel="stylesheet" type="text/css" href="../icon/iconfont.css">
<link rel="stylesheet" type="text/css" href="../css/index.css">
<link rel="stylesheet" href="../css/swiper.css">
<script src="../js/base.js"></script>
<script src="../js/jquery-2.1.0.js"></script>
<style>
.displayStyle {
display: none;
}
.menu_default {
position: fixed;
top: 0.88rem;
left: 0;
z-index: 10;
background: #fff;
transition: height 1s;
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<!--头部-->
<div class="header">
<!--左 菜单条目-->
<div class="iconfont icon-caidan" onclick="show_hidden()">
</div>
<!--中 主页面图标-->
<div class="header_mid">
<img src="../images/LOGO.png" >
</div>
</div>
<!--左边菜单栏时出现列表-->
<div class="container menu_default displayStyle">
<!--首页-->
<div class="menu_item">
<div class="menu_text">首页</div>
<div class="iconfont icon-jinru"></div>
</div>
<div class="menu_item">
<div class="menu_text">首页</div>
<div class="iconfont icon-jinru"></div>
</div>
<div class="menu_item">
<div class="menu_text">首页</div>
<div class="iconfont icon-jinru"></div>
</div>
<div class="menu_item">
<div class="menu_text">首页</div>
<div class="iconfont icon-jinru"></div>
</div>
<div class="menu_item">
<div class="menu_text">首页</div>
<div class="iconfont icon-jinru"></div>
</div>
<div class="menu_item">
<div class="menu_text">首页</div>
<div class="iconfont icon-jinru"></div>
</div>
</div>
<!-------------图片------------->
<!--轮播图-->
<div class="banner">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../images/bicon_01@2x.png">
</div>
<div class="swiper-slide">
<img src="../images/bicon_23@2x.png">
</div>
<div class="swiper-slide">
<img src="../images/bicon_43@2x.png">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--图片展示-->
<div class="pic1">
<div class="pic1_dynamic">
源于德国
</div>
<div class="pic1_subtitle">
FORM GERMANY
</div>
<div class="pic1_mid">
</div>
</div>
<!--最新动态-->
<div class="pic2">
<div class="pic2_dynamic">
最新动态
</div>
<div class="pic2_subtitle">
NEWS
</div>
<!--动态消息列表-->
<div class="pic2_box pic2_margin_top">
<div class="pic2_box_left">
<img src="../images/bicon_03@2x.png">
</div>
<div class="pic2_box_right">
<div class="pic2_box_right_top">
品质优越，更广泛的满足高端人群的需求
品质优越，更广泛的满足高端人群的需求
</div>
<div class="pic2_box_right_bottom">
2018-11-01
</div>
</div>
</div>
<div class="pic2_box">
<div class="pic2_box_left">
<img src="../images/bicon_03@2x.png">
</div>
<div class="pic2_box_right">
<div class="pic2_box_right_top">
品质优越，更广泛的满足高端人群的需求
品质优越，更广泛的满足高端人群的需求
</div>
<div class="pic2_box_right_bottom">
2018-11-01
</div>
</div>
</div>
<!--查看更多-->
<div class="pic2_viewMore">
查看更多+
</div>
</div>
<!--四小块-->
<div class="pic3">
<!--在线选色-->
<div class="pic3_block select_color">
<!--pic3盒子-->
<div class="pic3_block_box">
<!--图片-->
<div class="pic3_pic_box">
<div class="pic3_pic">
<img src="../images/bicon_04@2x.png">
</div>
</div>
<!--大标题-->
<div class="pic3_big_text">
在线选色
</div>
<!--小标题-->
<div class="pic3_small_text">
进入某个空间，我们最先被触发得感知是—色彩
</div>
<!--查看更多-->
<div class="pic3_viewMore">
查看更多
</div>
</div>
</div>
<!--产品中心-->
<div class="pic3_block product_color">
<!--pic3盒子-->
<div class="pic3_block_box">
<!--图片-->
<div class="pic3_pic_box">
<div class="pic3_pic product_pic">
<img src="../images/bicon_05@2x.png">
</div>
</div>
<!--大标题-->
<div class="pic3_big_text">
在线选色
</div>
<!--小标题-->
<div class="pic3_small_text">
进入某个空间，我们最先被触发得感知是—色彩
</div>
<!--查看更多-->
<div class="pic3_viewMore">
查看更多
</div>
</div>
</div>
<!--加盟可耐美-->
<div class="pic3_block join_color">
<!--pic3盒子-->
<div class="pic3_block_box">
<!--图片-->
<div class="pic3_pic_box">
<div class="pic3_pic join_pic">
<img src="../images/bicon_06@2x.png">
</div>
</div>
<!--大标题-->
<div class="pic3_big_text">
在线选色
</div>
<!--小标题-->
<div class="pic3_small_text">
进入某个空间，我们最先被触发得感知是—色彩
</div>
<!--查看更多-->
<div class="pic3_viewMore">
查看更多
</div>
</div>
</div>
<!--防伪查询-->
<div class="pic3_block inquire_color">
<!--pic3盒子-->
<div class="pic3_block_box">
<!--图片-->
<div class="pic3_pic_box">
<div class="pic3_pic inquire_pic">
<img src="../images/bicon_07@2x.png">
</div>
</div>
<!--大标题-->
<div class="pic3_big_text">
在线选色
</div>
<!--小标题-->
<div class="pic3_small_text">
进入某个空间，我们最先被触发得感知是—色彩
</div>
<!--查看更多-->
<div class="pic3_viewMore">
查看更多
</div>
</div>
</div>
</div>
<!--产品认证-->
<div class="pic4">
<div class="pic4_dynamic">
可耐美产品认证
</div>
<div class="pic4_subtitle">
CERTIFICATION COSMETIC PRODUCTS
</div>
<!--图片轮播-->
<div class="pic4_banner">
<div class="pic4_banner_mid">
<img src="../images/bicon_08@2x.png">
</div>
<div class="pic4_banner_left">
<!--<img src="../images/bicon_09@2x.png">-->
</div>
<div class="pic4_banner_right">
</div>
</div>
<!--查看更多-->
<div class="pic4_viewMore">
查看更多+
</div>
</div>
<!--底部介绍-->
<div class="bottom">
<p class="bottom_addr">
公司地址：北京市大兴区欣雅街兴创国际中心3A-1501室
</p>
<p class="bottom_tel">
电话 : 010-64482186
</p>
<p class="bottom_fax">
传真：010-6448-2226
</p>
<p class="bottom_email">
公司邮箱：beijing@germanyclime.cn
</p>
<p class="bottom_copyright">Copyright © 2015 All Rights Reserved 可耐美 版权所有</p>
</div>
<!--底部菜单栏-->
<div class="footer_menu">
<div class="footer_item">
<div class="footer_item_icon icon_select"></div>
<div class="footer_item_text">在线选色</div>
</div>
<div class="footer_item">
<div class="footer_item_icon icon_product"></div>
<div class="footer_item_text">产品中心</div>
</div>
<div class="footer_item">
<div class="footer_item_icon icon_inquire"></div>
<div class="footer_item_text">防伪查询</div>
</div>
<div class="footer_item">
<div class="footer_item_icon icon_join icon_big"></div>
<div class="footer_item_text">加盟可耐美</div>
</div>
</div>
</div>
</div>
</body>
<!-- Swiper JS -->
<script src="../js/swiper.min.js"></script>
<script>
function show_hidden() {
if($(".menu_default").hasClass("displayStyle")) {
$(".menu_default").removeClass("displayStyle");
}else {
$(".menu_default").addClass("displayStyle");
}
}
var swiper = new Swiper('.swiper-container',{
// observer:true, //修改swiper自己或子元素时，自动初始化swiper
// observeParents:true, //修改swiper的父元素时，自动初始化swiper
// zoom: true,
loop: true, // 循环模式选项
// autoplay: {
// disableOnInteraction: false,
// },
pagination: {
el: '.swiper-pagination',
},
});
</script>
</html>