minxing-devtools-core
Version:
268 lines (242 loc) • 7.84 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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>frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
.swipe {
overflow: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
height: 165px;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.swipe-wrap > div {
overflow: hidden;
position: relative;
}
.swipe-wrap img {
width: 100%;
height: 165px;
max-height: 240px;
min-height: 132px;
min-width: 320px;
max-width: 640px;
}
#slide {
margin: 0 auto;
position: relative;
}
#pointer {
position: absolute;
bottom: 0px;
overflow: hidden;
width: 92%;
text-align: right;
}
#pointer a {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 3px;
margin-right: 4px;
background-color: #9B9B9B;
margin-bottom: 1.5px;
}
#pointer a.active {
width: 6px;
height: 6px;
background-color: #000000;
margin-bottom: 0;
}
.banner-lable {
position: relative;
padding: 10px;
line-height: 17px;
font-size: 13px;
padding: 5px 10px 0 10px;
}
/*banner*/
/*list列表*/
.listView li {
padding: 10px;
border-bottom: 1px solid #D8D8D8;
}
.listView-item, .listView-text {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.listView-img {
width: 80px;
height: 60px;
}
.listView-img img {
width: 100%;
display: block;
}
.listView-text {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
margin: 0 5px;
overflow: hidden;
position: relative;
}
.listView-text-title {
height: 26px;
line-height: 24px;
font-size: 16px;
}
.listView-text-subtitle {
color: gray;
font-size: 12px;
line-height: 16px;
margin-left: 3px;
height: 40px;
overflow: hidden;
}
.listView-text-tips {
height: 15px;
position: absolute;
right: 10px;
bottom: 3px;
font-size: 12px;
line-height: 17px;
color: gray;
float: right;
margin-top: 2px;
border: 1px solid;
border-radius: 10px;
text-align: center;
padding: 0 5px;
}
/*list列表*/
</style>
</head>
<body>
<div id='slide' class='swipe'>
<div class='swipe-wrap' id="banner-content">
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/83.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/84.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/85.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/86.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/87.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/88.png"/>
</div>
</div>
</div>
<div class="banner-lable">
<span id="banner-title">apicloud重新定义移动应用开发</span>
<div id="pointer">
<a class="active"></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
</div>
</div>
<ul class="listView">
<li>
<a class="listView-item">
<div class="listView-img"><img src="../image/90.png"></div>
<div class="listView-text">
<p class="listView-text-title">apicloud云端一体</p>
<p class="listView-text-subtitle">
apicloud重新定义移动应用开发
</p>
<span class="listView-text-tips">098999</span></div>
</a>
</li>
<li>
<a class="listView-item">
<div class="listView-img"><img src="../image/91.png"></div>
<div class="listView-text">
<p class="listView-text-title">apicloud云端一体</p>
<p class="listView-text-subtitle">
apicloud重新定义移动应用开发
</p>
<span class="listView-text-tips">098999</span></div>
</a>
</li>
<li>
<a class="listView-item">
<div class="listView-img"><img src="../image/92.png"></div>
<div class="listView-text">
<p class="listView-text-title">apicloud云端一体</p>
<p class="listView-text-subtitle">
apicloud重新定义移动应用开发
</p>
<span class="listView-text-tips">098999</span></div>
</a>
</li>
<li>
<a class="listView-item">
<div class="listView-img"><img src="../image/93.png"></div>
<div class="listView-text">
<p class="listView-text-title">apicloud云端一体</p>
<p class="listView-text-subtitle">
apicloud重新定义移动应用开发
</p>
<span class="listView-text-tips">098999</span></div>
</a>
</li>
<li>
<a class="listView-item">
<div class="listView-img"><img src="../image/94.png"></div>
<div class="listView-text">
<p class="listView-text-title">apicloud云端一体</p>
<p class="listView-text-subtitle">
apicloud重新定义移动应用开发
</p>
<span class="listView-text-tips">098999</span></div>
</a>
</li>
</ul>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script>
function initSlide() {
var $pointer = $api.byId('pointer');
window.mySlide = Swipe(slide, {
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function (index, element) {
console.log();
var $actA = $api.dom($pointer, 'a.active');
$api.removeCls($actA, 'active');
$api.addCls($api.eq($pointer, index + 1), 'active');
$api.html($api.byId('banner-title'), $api.attr(element, 'data-value'))
},
transitionEnd: function (index, element) {
}
});
}
initSlide();
</script>
</body>
</html>