minxing-devtools-core
Version:
409 lines (355 loc) • 11.3 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>frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
html, body {
height: 100%;
background-color: #eee;
}
.h10 {
height: 10px;
}
/* 两列样式 */
.row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.col {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.section2 .col {
background-color: #fff;
}
.section2 .col:first-child {
border-bottom: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
}
.section2 .col:last-child {
border-bottom: 1px solid #d2d2d2;
}
/* 条目总体样式 */
.item {
display: table;
height: 70px;
width: 100%;
}
.item .itemlogo, .item .itemshelf {
display: table-cell;
vertical-align: middle;
}
.item .itemlogo {
width: 70px;
}
.item .itemlogo img {
margin-left: 10px;
width: 40px;
}
.item .itemshelf .shelfinfo01 {
font-size: 20px;
color: #AFAFAF;
}
/* 条目特例 */
.shelf2 .userlogo img {
width: 50px;
}
.favorable .itemshelf .shelfinfo01 {
font-size: 16px;
color: #F97B02;
}
.favorable .itemshelf .shelfinfo02 {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.nearby .itemshelf .shelfinfo01 {
font-size: 16px;
color: #4CAD35;
}
.nearby .itemshelf .shelfinfo02 {
font-size: 12px;
color: #666;
margin-top: 5px;
}
/* 第三部分 */
.section3 .item {
background-color: #fff;
position: relative;
border-bottom: 1px solid #d3d3d3;
}
.section3 .item .itemlogo {
position: absolute;
top: 10px;
}
.section3 .itemshelf {
margin-left: 70px;
display: block;
}
.section3 .item .userlogo img {
width: 40px;
padding: 2px;
border: 1px solid #e7e7e7;
border-radius: 2px;
}
.section3 .itemshelf .shelfinfo01 {
color: #000;
font-size: 16px;
line-height: 18px;
margin-top: 10px;
}
.section3 .itemshelf .ordering {
color: #fff;
font-size: 12px;
background-color: #5bb06c;
padding: 2px 4px;
display: inline-block;
}
.section3 .itemshelf .shelfinfo03 {
color: #999;
font-size: 12px;
margin-right: 10px;
border-bottom: 1px dotted #666;
padding: 10px 0;
}
.section3 .style2 .itemshelf .shelfinfo03 {
color: #999;
font-size: 12px;
margin-right: 10px;
border-bottom: 0;
padding: 10px 0;
}
.section3 .itemshelf .staring {
color: #999;
font-size: 12px;
line-height: 14px;
margin-top: 5px;
}
.section3 .itemshelf .staring img {
height: 12px;
}
.section3 .itemshelf .shelfinfo04 {
color: #999;
font-size: 12px;
padding: 10px 0;
}
.section3 .itemshelf .shelfinfo05 {
color: #999;
font-size: 12px;
padding: 10px 0 0 0;
}
/* 标题栏小图标 */
.section3 .itemshelf .shelfinfo01 .pei {
color: #fff;
font-size: 12px;
background-color: #82782f;
margin-left: 5px;
padding: 1px;
border-radius: 3px;
}
.section3 .itemshelf .shelfinfo01 .ticket {
color: #fff;
font-size: 12px;
background-color: #3585b7;
margin-left: 5px;
padding: 2px;
border-radius: 3px;
}
.section3 .itemshelf .shelfinfo01 .fu {
color: #fff;
font-size: 12px;
background-color: #e5322d;
margin-left: 5px;
padding: 2px;
border-radius: 3px;
}
.section3 .itemshelf .shelfinfo01 .compensate {
color: #fff;
font-size: 12px;
background-color: #2768ba;
margin-left: 5px;
padding: 2px;
border-radius: 3px;
}
.section3 .itemshelf .shelfinfo01 .new {
color: #fff;
font-size: 12px;
background-color: #e5322d;
margin-left: 5px;
padding: 2px;
border-radius: 3px;
}
.section3 .itemshelf .shelfinfo04 .jian {
color: #fff;
font-size: 12px;
background-color: #cd22e2;
padding: 1px;
border-radius: 3px;
margin-right: 5px;
}
.section3 .itemshelf .shelfinfo05 .quatity {
color: #fff;
font-size: 12px;
background-color: #dc0414;
padding: 1px;
border-radius: 3px;
margin-right: 5px;
}
/*slide*/
.swipe {
overflow: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.swipe-wrap > div {
overflow: hidden;
position: relative;
}
.swipe-wrap img {
width: 100%;
height: auto;
max-height: 240px;
min-height: 132px;
min-width: 320px;
max-width: 640px;
}
#slide {
margin: 0 auto;
position: relative;
}
#pointer {
position: absolute;
bottom: 12px;
overflow: hidden;
width: 100%;
text-align: center;
}
#pointer a {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 6px;
margin-right: 4px;
background-color: #FFFFFF;
}
#pointer a.active {
background-color: #999999;
}
/*slide*/
</style>
</head>
<body>
<div id='slide' class='swipe'>
<div class='swipe-wrap' id="banner-content">
<div onclick="" tapmode="">
<img src="../image/45.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/46.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/46.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/46.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/46.png"/>
</div>
</div>
<div id="pointer">
<a class="active"></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</div>
<div class="row section2">
<div class="col">
<div class="item shelf2 favorable" tapmode="itemhover" onclick="">
<div class="itemlogo userlogo"><img src="../image/96.png" alt=""></div>
<div class="itemshelf">
<div class="shelfinfo01">优惠活动</div>
<div class="shelfinfo02">赠饮,打折应有尽有</div>
</div>
</div>
</div>
<div class="col">
<div class="item shelf2 nearby" tapmode="itemhover" onclick="">
<div class="itemlogo userlogo"><img src="../image/99.png" alt=""></div>
<div class="itemshelf">
<div class="shelfinfo01">附近团购</div>
<div class="shelfinfo02">查看附近团购</div>
</div>
</div>
</div>
</div>
<!-- 第三部分 -->
<!-- 如何复用listitem，1.最简单的样式不变，直接复制 2.复制以后修改其中某一行的样式，最外层用div包裹给予新class，即可隔离原有的样式 -->
<div class="h10"></div>
<div class="section3">
<div class="item style1" tapmode="itemhover" onclick="">
<div class="itemlogo userlogo"><img src="../image/100.png" alt=""></div>
<div class="itemshelf">
<div class="shelfinfo01">【连锁】丽华快餐<span class="ticket">票</span><span class="pei">配</span></div>
<div class="shelfinfo02 ordering">接受预定中</div>
<div class="shelfinfo03">月售37307单 / 0元起送 / 34分钟</div>
<div class="shelfinfo04"><span class="jian">减</span>满20元减13元</div>
</div>
</div>
<div class="item style2" tapmode="itemhover" onclick="">
<div class="itemlogo userlogo"><img src="../image/97.png" alt=""></div>
<div class="itemshelf">
<div class="shelfinfo01">【连锁】宏状元<span class="ticket">票</span><span class="pei">配</span></div>
<div class="shelfinfo02 staring"><img src="../image/star_45.png" alt="">（2117）</div>
<div class="shelfinfo03">月售754单 / 35元起送 / 45分钟</div>
</div>
</div>
<div class="item style1" tapmode="itemhover" onclick="">
<div class="itemlogo userlogo"><img src="../image/98.png" alt=""></div>
<div class="itemshelf">
<div class="shelfinfo01">【连锁】久久丫<span class="fu">付</span><span class="pei">配</span></div>
<div class="shelfinfo02 staring"><img src="../image/star_45.png" alt="">（604）</div>
<div class="shelfinfo03">月售753单 / 30元起送 / 45分钟</div>
<div class="shelfinfo04"><span class="jian">减</span>满20元减10元，在线支付再减3元</div>
</div>
</div>
</div>
<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');
},
transitionEnd: function (index, element) {
}
});
}
initSlide();
</script>
</body>
</html>