minxing-tools-core
Version:
436 lines (378 loc) • 11 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>
body {
min-width: 320px;
}
.category {
width: 100%;
margin-top: 20px;
}
.category li {
display: inline-block;
width: 23.9%;
text-align: center;
padding: 30px 0 10px;
background-size: 40px;
background-repeat: no-repeat;
background-position: top;
}
.category li a {
margin: 15px 10px 0 10px;
}
.group {
background-image: url("../image/icon_home_group@2x.png");
}
.self {
background-image: url("../image/icon_home_self_service@2x.png");
}
.ship {
background-image: url("../image/icon_home_ship@2x.png");
}
.ticket {
background-image: url("../image/icon_home_ticket@2x.png");
}
.drive {
background-image: url("../image/icon_home_drive@2x.png");
}
.visa {
background-image: url("../image/icon_home_visa@2x.png");
}
.hotel {
background-image: url("../image/icon_home_hotel@2x.png");
}
.hotspot {
background-image: url("../image/icon_home_hotspot@2x.png");
}
img {
width: 100%;
height: 100%;
}
.imgs {
padding: 10px 0;
width: 100%;
background-color: #F0F0F0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.imgs li {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 55px;
}
.imgs li:not(:last-child) {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
border-right: 1px solid #EDEDEB;
height: 55px;
}
.img:first-of-type {
padding-top: 0;
}
.img {
height: 124px;
padding-top: 10px;
background-color: #F4F4F4;
position: relative;
}
dt {
height: 35px;
line-height: 35px;
}
dt :first-child {
width: 80%;
padding-left: 10px;
}
dt :last-child {
color: #3ABA63;
}
.detail {
padding: 5px 10px;
color: #A4A4A4;
font-size: 10px;
line-height: 18px;
border-bottom: 1px solid #EDEDED;
}
.detail:first-line {
color: #000000;
font-size: 15px;
}
.price {
font-size: 16px;
padding-left: 10px;
border-bottom: 1px solid #EDEDED;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
line-height: 25px;
}
.newPrice {
color: #F67570;
}
.oldPrice {
color: #999999;
font-size: 10px;
margin-left: 15px;
}
.zero-buy {
border-bottom: 1px solid #EDEDED;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.zero-buy .price {
border-bottom: none;
}
.buy {
display: block;
width: 20%;
margin: 2px 5% 2px 0;
background-color: #FC7924;
color: #FFFFFF;
text-align: center;
padding: 5px 0;
border-radius: 2px;
height: 12px;
font-size: 12px;
}
/*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;
}
.lable {
background-image: -webkit-linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
background-image: linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
padding-left: 20px;
display: block;
color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#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;
}
</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/47.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/48.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/49.png"/>
</div>
<div onclick="" tapmode="">
<img src="../image/50.png"/>
</div>
</div>
<div id="pointer">
<a class="active"></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</div>
<ul class="category">
<li class="group" tapmode=""><a>
云api
</a></li>
<li class="self" tapmode=""><a>
端api
</a></li>
<li class="ship" tapmode=""><a>
开发
</a></li>
<li class="ticket" tapmode=""><a>
价格
</a></li>
<li class="drive" tapmode=""><a>
文档
</a></li>
<li class="visa" tapmode=""><a>
社区
</a></li>
<li class="hotel" tapmode=""><a>
云服务
</a></li>
<li class="hotspot" tapmode=""><a>
培训
</a></li>
</ul>
<ul class="imgs">
<li onclick="" tapmode=""><img src="../image/57.png"></li>
<li onclick="" tapmode=""><img src="../image/58.png"></li>
<li onclick="" tapmode=""><img src="../image/59.png"></li>
</ul>
<dl>
<dt><span>尾货专区</span><span>更多 ></span></dt>
<dd class="img" onclick="" tapmode="">
<img src="../image/51.png">
<div class="lable">10月21日 | 北京出发</div>
</dd>
<dd class="detail">
北京-西欧7晚9天极致自由行<br>
北京往返布鲁塞尔+1晚酒店，极致西欧自由的行走
</dd>
<dd class="price">
<span class="newPrice">￥3399</span>
<del class="oldPrice">￥6599</del>
</dd>
<dd class="img" onclick="" tapmode="">
<img src="../image/52.png">
<div class="lable">10月22日 | 北京出发</div>
</dd>
<dd class="detail">
北京-韩国首尔7日游<br>
超值游轮，汗蒸幕，乐天通票，奥特莱斯
</dd>
<dd class="price">
<span class="newPrice">￥2099</span>
<del class="oldPrice">￥3260</del>
</dd>
<dd class="img" onclick="" tapmode="">
<img src="../image/54.png">
<div class="lable">10月24日 | 北京出发</div>
</dd>
<dd class="detail">
北京-苏梅随心5晚6日自助旅游<br>
赠送境外旅游意外险，2人即可成团
</dd>
<dd class="price">
<span class="newPrice">￥4199</span>
<del class="oldPrice">￥5699</del>
</dd>
<dd class="img" onclick="" tapmode="">
<img src="../image/55.png">
<div class="lable">10月25日 | 北京出发</div>
</dd>
<dd class="detail">
俄罗斯-贝加尔湖休闲4日游<br>
世界最深湖，休闲胜地，只要3999
</dd>
<dd class="price">
<span class="newPrice">￥3999</span>
<del class="oldPrice">￥6599</del>
</dd>
<dd class="img" onclick="" tapmode="">
<img src="../image/56.png">
<div class="lable">10月26日 | 北京出发</div>
</dd>
<dd class="detail">
莫斯科-圣彼得堡8日游<br>
海航往返，克里姆林宫，卡洛明斯克庄园
</dd>
<dd class="price">
<span class="newPrice">￥4399</span>
<del class="oldPrice">￥7599</del>
</dd>
</dl>
<dl>
<dt><span>0元购专区</span><span>更多 ></span></dt>
<dd class="img" onclick="" tapmode="">
<img src="../image/53.png">
<div class="lable">10月28日 | 北京出发</div>
</dd>
<dd class="detail">
东京-横滨-京都-富士山6日游<br>
途牛独家包团，EY全网最低价
</dd>
<dd class="zero-buy">
<div class="price">
<span class="newPrice">￥0</span>
<del class="oldPrice">￥6599</del>
</div>
<a class="buy">立即抢购</a>
</dd>
</dl>
<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>