master

分支 (1)

管理

管理

master

zhii
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="description" content="纸匠做为纸玩行业领导者,现有创意生活家居,实用办公用品,礼品装饰品,商业道具,儿童益智玩具与教程五大系列产品,专注于儿童产品开发,让儿童感受到环保、益智、学习乐趣">
    <meta name="keywords" content="纸匠,纸匠纸玩,纸玩,儿童产品">
	<title>纸匠官方网站|纸玩行业领导者，专注儿童产品开发</title>
    <link rel="shortcut icon" href="images/logo.ico">
	<link rel="stylesheet" href="css/jquery.fullPage.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/all.css">
	<style>
/*@font-face {
     font-family: SourceHanSerifTC; !*这里是说明调用来的字体名字*!
     src: url(fonts/SourceHanSerifTC-Regular.otf); !*这里是字体文件路径*!
}*/
html{
	overflow: hidden;
}
ul{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: #fff;
    opacity: 0.4;
}
li{
	list-style:none;
}

a:hover{
    text-decoration: none;
    color: #fff;
    opacity: 1;
}
.bd-bg img{
	width: 100%;
	height: 100%;
}
.bd-box{
    width: 80%;
    height: auto;
    background-color: #fff;
    position: absolute;
    top: 3%;
    left: 12%;
    padding: 20px;
    margin: 0 auto;
}
.bd-box-img{
    float: left;
}

.section2{
	background:url(images/bg.png) repeat;
}
 .section3{
    background:url(images/bg.png) repeat;
}
#nav{
	position: fixed;
	width: 10%;
	height: auto;
	text-align: left;
	z-index: 99;
	left: 46px;
    top: 180px;
}
.logo{
    position:fixed;
    z-index: 99;
    top: 46px;
    left: 40px;
}
.logo a{
    opacity: 1;
}
.pageChose b{
	display: inline-block;
	width: 0;
	height: 1px;
	background-color: #fff;
    opacity: 0.4;
	position: relative;
    top: 0;
    left: 3%;
	margin: 0 5px 5px 5px;
	transition: all 0.5s ease;
}
.pageChose:hover b{
	width: 10px;
}
.pageChose{
	margin-top: 30px;
	position: relative;
}
.pageChose a{
    transition: all 0.5s ease;
    padding-left: 20px;
}

#nav li {
    font-family: 'SourceHanSerifTC';
    font-size: 1em;
}
.pageChose a:hover{
	display: inline-block;
	color: #fff;
	transform: scale(1.2);
	cursor: pointer;
    transform-origin: left;
}
.pageChose>a:hover{
    width: 10rem;
}
#dowebok img{
	width: 100%;
	height: auto;
}
.container .row .col {
	padding: 0 !important;
}
.row{
	padding: 20px;
	background-color: #fff;
}
.bd-box-img img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    animation-duration:0.5s;
}
.bd-box-img1 img{
	animation-duration: 1s;
}
.bd-box-img2 img{
	animation-duration: 1.5s;
}
.section .container .row .col img{
	animation-duration: 0.5s;
}
.section .container .row .col1 img{
	animation-duration: 1s;
}
.section .container .row .col2 img{
	animation-duration: 1.5s;
}
@media(min-width: 1024px) and (max-width: 1366px){
	.container{
		padding: 100px;
	}
	.row{
		position: relative;
		left: 7%;
	}
}
 @media(min-width: 1367px) and (max-width: 1680px){
 	.row{
 		position: relative;
 		left: 6%;
 	}
 	.container{
		padding: 50px;
	}
 }
 .bd-bg{
    position: relative;
 	background:url(images/hd-bg.jpg) no-repeat 100% 100%;
 	background-size: cover;
 	width: 100%;
 	height: 100%;
 }
 @media (min-width:1200px) and (max-width: 1280px){
 	.container{
 		width: 920px;
 	}
 }
 .container img{
 	visibility: hidden;
 }
 .container .row{
 	display: none;
 }

 .bd-nav-info{
    width: 85%;
    position: absolute;
    top: -10px;
    left: 120px;
    z-index: 99;
 }
 .bd-nav-info a:hover{
    color: #fff;
 }
 .bd-nav-info li{
    padding: 10px 0;
 }

 .bd-nav-info li a{
    margin: 0;
 }
 #nav .first-child{
    height: 60px;
    width: 1px;
    opacity: 0.4;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), #ffffff);
    position: absolute;
    left: 2%;
    top: -12%;
 }
 #nav .last-border{
    height: 60px;
    width: 1px;
    opacity: 0.4;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.12), #ffffff);
    position: absolute;
    left: 3px;
    bottom: -70px;
 }
 .pageChose i{
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    margin-top: 7px;
 }
 .list-border{
    width: 2px;
    height: 20px;
    background-color: #fff;
    opacity: 0.4;
    position: absolute;
    left: 1%;
    margin-top: 6px;
 }
 .bd-nav-info-1{
    width: 90%;
    position: absolute;
    top: -10px;
    left: 120px;
    z-index: 99;
 }
 .bd-nav-info-1 a{
    padding: 0;
     position: relative;
 }
.pageChose>ul>li a{
    position: relative;
}
.pageChose>ul>li a:after{
    display: block;
    position: absolute;
    content: '';
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all 1.5s;
}
.pageChose>ul>li a:hover:after{
    width: 100%;
}
 .bd-nav-info-1 a:hover{
    color: #fff;
 }
 .bd-nav-info-2 a:hover{
    color: #fff;
 }
  .bd-nav-info-3 a:hover{
    color: #fff;
 }
.bd-nav-info-1 li{
    padding: 10px 0;
  }
.bd-nav-info-2 li{
    padding: 10px 0;
}
.bd-nav-info-3 li{
    padding: 10px 0;
}
.bd-nav-info li a{
    padding: 0;
}
 .bd-nav-info-1 li a{
    padding: 0;
  }
.bd-nav-info-2 li a{
   padding: 0;
}
.bd-nav-info-3 li a{
    padding: 0;
}
.bd-nav-info-2{
    width: 85%;
    position: absolute;
    top: -10px;
    left: 120px;
    z-index: 99
 }
 .bd-nav-info-3{
    width: 85%;
    position: absolute;
    top: -10px;
    left: 120px;
    z-index: 99
 }
 .border-t{
    width: 80%;
    height: 2px;
    border: solid 1px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
 }
 .logo-bottom{
    width: 48px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 20px;
 }
 .logo-bottom img{
    visibility: visible;
 }
 .footer-col{
    text-align: center;
 }
 .foot{
    padding: 5px 0;
 }


 .switch{
  height: 533px;
  width:800px;
  margin: 0 auto;
  transform: rotate(5deg);
  background-color: #fff;
  box-shadow: 0 0 14px 2px rgba(0,0,0,0.2);
  position: relative;
  left: 5%;
}
.drawer_sw_con {
  position:relative;
  margin: auto;
  width: 800px !important;
  height: auto;
}
.switch  div.drawer_sw_item{
  position:absolute;
  width: 800px;
  height:auto;
  border-radius:10px;
  font-size: 14em;
  font-weight:  bold;
  font-family:微软雅黑;
  color: #fff;
  line-height: 400px;
  text-align:center;
  transform: rotate(-5deg);
  box-shadow: 0 0 10px 2px rgba(0,0,0,0.03)
}
.pageChose ul{
    display: none;
}
#notice{
    position: fixed;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #aa7322;
    z-index:999;
    padding-left: 30px;
    color:#FFF;
    font-size: 12px;
    overflow: hidden;
}
#notice>a{
    float: right;
    width: 40px;
    height: 35px;
    background: url(images/close.png) no-repeat center;
    -webkit-background-size: 16px;
    background-size: 16px;
    opacity:1;
}
#notice span{
    float: left;
}
.noticeDetails{
    float: left;
    position: relative;
    /*-webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;*/
}
.noticeDetails li{
    height: 35px;
}
.noticeDetails a{
    opacity:1;
}
.noticeDetails a:hover{
    color:#FFF;
    text-decoration: underline;
}
.language {
    z-index: 99;
    position: absolute;
    right: 4%;
    top: 45px;
    width: 100px;
    height: 80px;
}
.language a {
    float: left;
    font-size: 14px;
    opacity: 0.8
}
.language a:nth-child(3) {
    margin-right: 8px;
}
.language span {
    float: left;
    width: 20px;
    height: 20px;
    background: url('images/language.png');
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.language em {
    float: left;
    width: 20px;
    text-align: center;
    color: #fff;
    opacity: 0.8
}
.down {
    z-index: 11;
    position: absolute;
    right: 6%;
    bottom: 60px;
    width: 32px;
    height: 48px;
    background: url(images/scroll@2x.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    animation: sport 2s linear infinite;
}
@keyframes sport {
            0%{
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }25%{
                    -webkit-transform: translateY(15px);
                    -ms-transform: translateY(15px);
                    -o-transform: translateY(15px);
                    transform: translateY(15px);
                }
            50%{-ms-transform: translateY(30px);
                    -o-transform: translateY(30px);
                    transform: translateY(30px);
                    transform: translateY(15px);
                opacity: 0.5}
            75%{-ms-transform: translateY(15px);
                -o-transform: translateY(15px);
                transform: translateY(15px);}
            100%{-webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);}
        }

	</style>
</head>
<body style="position:relative;">
    <div id="notice">
        <span style="margin-right:8px">公告：</span>
        <ul class="noticeDetails">
        </ul>
        <a href="#" class="closeNotice"></a>
    </div>
    <div class="logo">
        <a href="#"><img src="images/logo.png" alt="纸匠"></a>
    </div>
	<ul id="nav">
            <li class="first-child"></li>
			<li class="page1 pageChose"><i></i><a class="nav-hover-1">关于纸匠<b></b></a>
                 <ul class="bd-nav-info-1" style="display: none;">
                    <li>
                        <a href="about.html" rel="nofollow">纸匠简介</a>
                    </li>
                    <li>
                        <a href="axis.html">纸匠文化轴</a>
                    </li>
                    <li>
                        <a href="course.html">纸匠历程</a>
                    </li>
                    <li>
                        <a href="last.html">纸匠荣誉</a>
                    </li>
                     <li>
                         <a href="news.html">纸匠动态</a>
                     </li>
                </ul>
            </li>
            <li class="list-border"></li>
			<li class="page2 pageChose"><i></i><a class="navcourse-hover-2">创客教育<b></b></a>
                <ul class="bd-nav-info-2" style="display: none;">
                    <li>
                        <a href="education.html">创客教育</a>
                    </li>
                    <li>
                        <a href="show.html">场景展示</a>
                    </li>
                    <li>
                        <a href="video.html">课程介绍</a>
                    </li>
                    <li>
                        <a href="join.html">创客招商</a>
                    </li>
                    <li>
                        <a href="teacher.html">合作名师</a>
                    </li>
                    <li>
                        <a href="institution.html">合作机构</a>
                    </li>
                </ul>
            </li>
            <li class="list-border"></li>
			<li class="page3 pageChose"><i></i><a class="nav-hover">纸匠文化<b></b></a>
                <ul class="bd-nav-info" style="display: none;">

                    <li>
                        <a href="culture_about.html">文化简介</a>
                    </li>
                    <li>
                        <a href="contest.html">纸玩大赛</a>
                    </li>
                    <li>
                        <a href="expo.html">展览展示</a>
                    </li>
                </ul>
           </li>
            <li class="list-border"></li>
			<li class="page4 pageChose"><i></i><a class="nav-hover-3">纸匠文创<b></b></a>
                 <ul class="bd-nav-info-3" style="display: none;">
                     <li>
                         <a href="creative_about.html">文创简介</a>
                     </li>
                    <li>
                        <a href="family.html">家居介绍</a>
                    </li>
                    <li>
                        <a href="prop.html">道具介绍</a>
                    </li>
                    <li>
                        <a href="gift.html">礼品介绍</a>
                    </li>
                    <li>
                        <a href="stationery.html">文具介绍</a>
                    </li>
                    <li>
                        <a href="work.html">办公用品</a>
                    </li>
                    <li>
                        <a href="live.html">生活用品</a>
                    </li>
                </ul>
            </li>
            <li class="list-border"></li>
			<li class="page6 pageChose"><i></i><a href="team.html" rel="nofollow">加入我们</a></li>
            <li class="list-border"></li>
			<li class="page8 pageChose"><i></i><a href="derivative.html">衍生品</a></li>
            <li class="list-border"></li>
            <li class="page8 pageChose"><i></i><a href="shopping/index.html" target="_blank">纸匠商城</a></li>
            <li class="last-border"></li>
		</ul>

    <div id="dowebok">

        <div class="section">
            <div class="bd-bg">
                <div class="down"></div>
                <div class="language"><a href="https://www.papermaker.cn/zhijiang-en/index.html">EN</a><em>/</em><a href="../zhijiang/index.html">中文</a><span></span></div>
            </div>
        </div>
        <div class="section section2">

            <div id="switch" class="switch">
                <div>
                    <div class="sw_items_sty1">
                        <img src="images/banner3.jpg" alt="纸匠">
                    </div>
                </div>
                <div>
                    <div class="sw_items_sty2">
                        <img src="images/banner2.jpg" alt="纸匠">
                    </div>
                </div>
                <div>
                    <div class="sw_items_sty3">
                        <img src="images/banner.jpg" alt="纸匠">
                    </div>
                </div>
            </div>
        </div>

    </div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/ajax.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script src="js/jquery.drawerSwitch.min.js"></script>
    <script>
        $(function () {
            $(".pageChose").hover(function () {
                $(this).children("ul").fadeIn(1000);
            },function () {
                $(this).children("ul").stop().fadeOut();
            });

            ajax("post","index/notice",function (res) {
                var data = res.data;
                var html = "";
                for(var i=0;i<data.length;i++){
                    html += '<li><a href="newDetail.html?newsId='+data[i].id+'">'+data[i].name+'</a></li>'
                }
                $(".noticeDetails").append(html);

                var num = $('.noticeDetails').find('li').length;
                if(num > 1){
                    var time=setInterval(transform,3500);
                    $('.noticeDetails li a').mousemove(function(){
                        clearInterval(time);
                    }).mouseout(function(){
                        time = setInterval(transform,3500);
                    });
                }
            });

            function transform() {
                $(".noticeDetails").animate({
                    top:"-35px"
                },1000,function () {
                    $(this).css("top","0").find("li:first").appendTo(this);
                })
            }

            //关闭公告
            $(".closeNotice").click(function () {
                $("#notice").hide();
            })

        })
    </script>
</body>
</html>