http://m.sui.taobao.org/components/#panel
使用基本结构，列表的嵌入式标题，栅格的大小比例，侧栏显示
http://m.sui.taobao.org/extends/
使用幻灯片模式进行轮播图
其index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商店管理</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<!-- <link rel="stylesheet" href="../resources/css/shop/shopmanegement.css">-->
</head>
<body>
<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
<!-- 单个page ,第一个.page默认被展示-->
<div class="page">
<!-- 标题栏 -->
<header class="bar bar-nav">
<a class="icon icon-me pull-left open-panel"></a>
<h1 class="title">标题</h1>
</header>
<!-- 工具栏 -->
<nav class="bar bar-tab">
<a class="tab-item external active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item external" href="#" id="me">
<span class="icon icon-me"></span>
<span class="tab-label">个人</span>
</a>
</nav>
<!--轮播展示区-->
<div class="content">
<!-- Slider -->
<div class="swiper-container" data-space-between='10'>
<div class="swiper-wrapper">
<!--<div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
<div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
<div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>-->
</div>
<div class="swiper-pagination"></div>
</div>
<!--全类查询区-->
<div class="total-shop-button">
<a href="#" external>全部商店</a>
</div>
<!--一级类别展示区-->
<div class="row">
<!--<div class="col-50 shop-classify">
<div class="word">
<p class="shop-title">本期推荐</p>
<p class="shop-desc">近期相关活动、新款上市、旅游资讯</p>
</div>
<div class="shop-classify-img-wrap">
<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style=' 2.2rem;'>
</div>
</div>-->
</div>
</div>
</div>
<!--侧边栏-->
<div class="panel-overlay"></div>
<div class="panel panel-right panel-reveal" id="panel-left-demo">
<div class="content-block">
<p>
<a href="/myo2o/frontend/myrecord" class="close-panel">消费记录</a>
</p>
<p>
<a href="/myo2o/frontend/mypoint" class="close-panel">我的积分</a>
</p>
<p>
<a href="/myo2o/frontend/pointrecord" class="close-panel">积分兑换记录</a>
</p>
<!-- Click on link with "close-panel" class will close panel -->
</div>
</div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/frontend/index.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/common/commons.js' charset="utf-8"></script>
</body>
</html>
index.js
$(function() {
//定义访问后台，获取头条列表和店铺一级类别列表的URL
var url = '/frontend/listmainpageinfo';
//访问后台，获取头条列表和店铺一级类别列表
$.getJSON(url, function (data) {
if (data.success) {
//获取后台传递过来的头条列表
var headLineList = data.headLineList;
var swiperHtml = '';
//遍历列表，并拼接处轮播图组
headLineList.map(function (item, index) {
swiperHtml += ''
+ '<div class="swiper-slide img-wrap">'
+'<a href="' + item.lineLink
+'" external><img class="banner-img" src="'+ item.lineImg
+'" alt="'+ item.lineName +'"></a>'
+ '</div>';
});
//将轮播图组赋值给前端HTML控件
$('.swiper-wrapper').html(swiperHtml);
//设定轮播图组轮换时间为3秒
$(".swiper-container").swiper({
autoplay: 3000,
//用户对轮播图进行操作时，是否自动停止autoplay
autoplayDisableOnInteraction: false
});
//获取后台传递的店铺一级列表
var shopCategoryList = data.shopCategoryList;
var categoryHtml = '';
//遍历店铺一级列表，拼接出col-50 的类别
shopCategoryList.map(function (item, index) {
categoryHtml += ''
+ '<div class="col-50 shop-classify" data-category='
+ item.shopCategoryId +'>' + '<div class="word">'
+ '<p class="shop-title">'+ item.shopCategoryName +'</p>'
+ '<p class="shop-desc">'+ item.shopCategoryDesc +'</p>'
+ '</div>' + '<div class="shop-classify-img-warp">'
+ '<img class="shop-img" src="'+ item.shopCategoryImg
+'">' + '</div>' + '</div>';
});
//将拼接好的类别列表赋值给前端HTML控件
$('.row').html(categoryHtml);
}
});
//点击个人，显示侧边栏
$('#me').click(function () {
$.openPanel('#panel-left-demo');
});
//给类别按钮赋上点击响应事件
$('.row').on('click', '.shop-classify', function (e) {
var shopCategoryId = e.currentTarget.dataset.category;
var newUrl = '/frontend/shoplist?parentId=' + shopCategoryId;
window.location.href = newUrl;
});
});