<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aiberle历程</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
article, section, time, aside {
display: block;
}
.point-time {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 45%;
left:5%;
background: #fff;
margin-left: -7px;
border-radius: 50%;
border: 4px solid #958570;
}
.content {
width: 100%;
margin: 0 auto;
}
.content article {
position: relative;
}
.content article > h3 {
width: 100%;
height: 20px;
line-height: 20px;
text-align: left;
text-indent: 3%;
font-size: 1.4em;
color: #fff;
padding: 10px 0 20px;
background-color: #dd6d01;
}
.content article section {
padding: 0;
position: relative;
}
.content article section:before {
content: "";
width: 2px;
top: 0;
bottom: 0;
left: 5%;
background: #e6e6e6;
position: absolute;
}
/*.content article section:last-child:before {
display: none;
}*/
.content article section time {
width: 12%;
display: block;
position: absolute;
top: 44%;
left: 8%;
}
.content article section time > span {
display: block;
text-align: center;
}
.content article section aside {
color: #3a3a38;
margin-left: 20%;
}
.content article section .brief {
color: #9f9f9f;
}
.content article section .things {
padding: 10px 10px 0 0;
position: relative;
}
.content article section .things img {
width: 100%;
display: block;
}
</style>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>
//屏蔽分享
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
});
</script>
</head>
<body style="background: #fff;">
<div class="loading-bg">
<div class="mui-loading">
<div class="mui-spinner">
</div>
加载中...
</div>
</div>
<div class="mui-content" style="background: #fff;">
<div class="content">
<article>
<section>
<span class="point-time"></span>
<time datetime="2006">
<span>2006</span>
</time>
<aside>
<p class="things">
<img src="images/pp-time.jpg" />
<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2006.png" />
</p>
</aside>
</section>
<section>
<span class="point-time"></span>
<time datetime="2007">
<span>2007</span>
</time>
<aside>
<p class="things">
<img src="images/pp-time.jpg" />
<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2007.png" />
</p>
</aside>
</section>
<section>
<span class="point-time"></span>
<time datetime="2011">
<span>2011</span>
</time>
<aside>
<p class="things">
<img src="images/pp-time.jpg" />
<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2011.png" />
</p>
</aside>
</section>
<section>
<span class="point-time point-green"></span>
<time datetime="2014">
<span>2014</span>
</time>
<aside>
<p class="things">
<img src="images/pp-time.jpg" />
<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2014.png" />
</p>
</aside>
</section>
<section>
<span class="point-time"></span>
<time datetime="2016">
<span>2016</span>
</time>
<aside>
<p class="things">
<img src="images/pp-time.jpg" />
<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2016.png" />
</p>
</aside>
</section>
<section style="padding-bottom: 10px;">
<span class="point-time"></span>
<time datetime="2017">
<span>2017</span>
</time>
<aside>
<p class="things">
<img src="images/pp-time.jpg" />
<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2017.png" />
</p>
</aside>
</section>
</article>
</div>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
mui.ready(function(){
document.querySelector('.loading-bg').style.display='none';
});
</script>
</body>
</html>