minxing-devtools-core
Version:
136 lines (134 loc) • 6.63 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
.swipe {overflow: hidden;position: relative;}
.swipe-wrap {overflow: hidden; position: relative;}
.swipe-wrap .swipe-con { float:left; position: relative;}
.swipe-wrap .swipe-con img{ width:100%; vertical-align: middle; }
#main{ padding: 2px; background-color: #e5e5e5; }
#main .flex-vertical .layout{ background:#e66961 url() right bottom no-repeat; margin: .3rem; padding: .3rem; background-size: auto 50%; line-height: 2rem; color: white; font-size: 1.8rem; }
#main .flex-vertical .layout p{ font-size: 1rem; }
#main .flex-vertical .layout.ic-hot{ background-image: url(../image/ic-hot.png); }
#main .flex-vertical .layout.ic-article{ background-image: url(../image/ic-article.png); background-color: #6ab494; }
#main .flex-vertical .layout.ic-tag{ background-image: url(../image/ic-tag.png); background-color: #9e9a8d; font-size: 1.6rem;}
#main .flex-vertical .layout.ic-coffee{ background-image: url(../image/ic-coffee.png); background-color: #ebd275; font-size: 1.6rem;}
#main .flex-vertical .layout.ic-shop{ background-image: url(../image/ic-shop.png); background-color: #6ab494; }
#main .flex-vertical .layout.ic-like{ background-image: url(../image/ic-like.png); background-color: #d8c09d; font-size: 1.6rem;}
#main .flex-vertical .layout.ic-lable{ background-image: url(../image/ic-lable.png); font-size: 1.2rem;}
#main .flex-vertical .layout.ic-more{ background-image: url(../image/ic-more.png); background-color: #ebd275; font-size: 1.2rem; background-size:
50% auto; background-position: center right; }
.flex-2{ -webkit-box-flex: 2; -webkit-flex: 2; flex: 2; }
.hover{ opacity: .8; }
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" >
<div class='swipe'>
<div class='swipe-wrap'>
<div class="swipe-con">
<img src="../image/api_100.png" alt="">
</div>
<div class="swipe-con">
<img src="../image/api_100.png" alt="">
</div>
<div class="swipe-con">
<img src="../image/api_100.png" alt="">
</div>
<div class="swipe-con">
<img src="../image/api_100.png" alt="">
</div>
<div class="swipe-con">
<img src="../image/api_100.png" alt="">
</div>
</div>
</div>
<div id="main" class="flex-wrap flex-con" >
<div class="flex-con flex-wrap flex-vertical">
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con flex-2 layout-wrap">
<div class="flex-con layout ic-hot">
<h6>标题1</h6>
<p>简介</p>
</div>
</div>
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con flex-2 layout-wrap">
<div class="flex-con layout ic-tag">
<h6>标题2</h6>
<p>简介</p>
</div>
</div>
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con layout-wrap">
<div class="flex-con layout ic-article">
<h6>标题3</h6>
<p>简介</p>
</div>
</div>
</div>
<div class="flex-wrap flex-con flex-vertical">
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con layout-wrap">
<div class="flex-con layout ic-coffee">
<h6>标题4</h6>
<p>简介</p>
</div>
</div>
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con flex-2 layout-wrap">
<div class="flex-con layout ic-shop">
<h6>标题5</h6>
<p>简介</p>
</div>
</div>
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con layout-wrap">
<div class="flex-con layout ic-like">
<h6>标题6</h6>
<p>简介</p>
</div>
</div>
<div class="flex-wrap flex-con">
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con layout-wrap">
<div class="flex-con layout ic-lable">
<h6>标题7</h6>
<p>简介</p>
</div>
</div>
<div tapmode="hover" onclick="funOpenArticle( this );" class="flex-wrap flex-con layout-wrap">
<div class="flex-con layout ic-more">
<h6>标题8</h6>
<p>简介</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">
apiready = function(){
};
var mySwipe = new Swipe($api.dom('.swipe'), {
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
transitionEnd: function(index, elem) {
}
});
function funOpenArticle( tag ){
api.openWin({
name: 'win_webpage',
url: './win_webpage.html',
pageParam: {
name: tag.querySelector('h6').innerHTML
}
});
}
</script>