zoomla
Version:
16年专业研发|中文alexa排名第一的CMS品牌-基于dotNET core、功能强大，集成站群、微信开发、小程序与ERP及OA办公系统，支持国际语言和多民族语言，世界五百强与大型门户专用高端网站内核CMS系统
341 lines (323 loc) • 13.4 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>{$SiteName/}_首页</title>
{$MetaKeywords/}
{$MetaDescription/}
<title>逐浪百变微站_首页</title>
{$MetaKeywords/}
{$MetaDescription/}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="renderer" content="webkit">
<link href="/dist/css/zico.min.css" rel="stylesheet"/>
<link href="/dist/css/ZLico.css" rel="stylesheet"/>
<link rel="stylesheet" href="/dist/css/weui.min.css" />
<script type="text/javascript" src="/JS/jquery-1.11.1.min.js" ></script>
<link rel="stylesheet" href="/dist/css/swiper.min.css" />
<script src="/dist/js/swiper.min.js"></script>
<link href="{$CssDir/}style.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet" />
<style>
</style>
{ZL:GetCSS(1,1)/}
</head>
<body>
<div class="page tabbar js_show">
<div class="page__bd" style="height:100%;">
<div class="weui-tab">
<div class="weui-tab__panel">
<div class="weui-flex home_header">
<div class="weui-flex__item">
<h1><i class="zi zi_clockCir"></i>上海微百货</h1>
</div><!--头部第一块结束-->
<div class="weui-flex__item home_header_r" >
<span class="pull-right"><a href="#" ><i class="zi zi_gift"></i><br/>惊喜</a></span>
<span class="pull-right"><a href="javascript:;" id="showIOSActionSheet"><i class="zi zi_alignjustify"></i><br/>Menu</a></span>
</div>
</div>
<div class="home_top " hidden>
<h1><i class="zi zi_clockCir"></i>上海微百货</h1>
<!--<a class="logo" ><img src="{$CssDir/}images/logo.jpg" alt="南京微生活" /></a><-->
<form action="#">
<input type="text" class="form-control" name="keyword" placeholder="输入关键字查询" />
<button type="submit"><i class="zi zi_search"></i></button>
</form>
<a href="#" class="pull-right gift"><i class="zi zi_gift"></i><br/>惊喜</a>
</div>
<!--头部结束-->
<div class="page__bd">
<!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
<div class="weui-search-bar" id="searchBar">
<form action="/Search/SearchList" class="weui-search-bar__form" method="get">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" name="keyword" id="searchInput" placeholder="搜索" />
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-cells searchbar-result" id="searchResult" style="display: none;">
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>苹果</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>apple</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>pinguo</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>test</p>
</div>
</div>
</div>
</div>
<!--搜索框结束-->
<div class="mycontainer padding0_xs">
<div class="home_pics">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="{$CssDir/}images/weui_home_banner1.jpg" alt="第一张banner图" /></a></div>
<div class="swiper-slide"><a href="#"><img src="{$CssDir/}images/weui_home_banner2.jpg" alt="第二张banner图" /></a></div>
<div class="swiper-slide"><a href="#"><img src="{$CssDir/}images/weui_home_banner3.jpg" alt="第三张banner图" /></a></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--轮播图结束-->
<div class="home_menus">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li><a href="{ZL:GetNodeLinkUrl(145)/}"><img src="{$CssDir/}images/home_pic1.jpg" alt="党政机关" /><br/>党政机关</a></li>
<li><a href="{ZL:GetNodeLinkUrl(146)/}"><img src="{$CssDir/}images/home_pic2.jpg" alt="美食天地" /><br/>美食天地</a></li>
<li><a href="{ZL:GetNodeLinkUrl(147)/}"><img src="{$CssDir/}images/home_pic3.jpg" alt="休闲娱乐" /><br/>休闲娱乐</a></li>
<li><a href="{ZL:GetNodeLinkUrl(148)/}"><img src="{$CssDir/}images/home_pic4.jpg" alt="宾馆住宿" /><br/>宾馆住宿</a></li>
<li><a href="{ZL:GetNodeLinkUrl(149)/}"><img src="{$CssDir/}images/home_pic5.jpg" alt="拼车租车" /><br/>拼车租车</a></li>
<li><a href="{ZL:GetNodeLinkUrl(150)/}"><img src="{$CssDir/}images/home_pic6.jpg" alt="快递物流" /><br/>快递物流</a></li>
<li><a href="{ZL:GetNodeLinkUrl(151)/}"><img src="{$CssDir/}images/home_pic7.jpg" alt="时尚女人" /><br/>时尚女人</a></li>
<li><a href="{ZL:GetNodeLinkUrl(152)/}"><img src="{$CssDir/}images/home_pic8.jpg" alt="乡镇商户" /><br/>乡镇商户</a></li>
<li><a href="{ZL:GetNodeLinkUrl(153)/}"><img src="{$CssDir/}images/home_pic9.jpg" alt="便民服务" /><br/>便民服务</a></li>
<li><a href="{ZL:GetNodeLinkUrl(154)/}"><img src="{$CssDir/}images/home_pic10.jpg" alt="汽车相关" /><br/>汽车相关</a></li>
<li><a href="{ZL:GetNodeLinkUrl(155)/}"><img src="{$CssDir/}images/home_pic11.jpg" alt="手机电脑" /><br/>手机电脑</a></li>
<li><a href="{ZL:GetNodeLinkUrl(156)/}"><img src="{$CssDir/}images/home_pic12.jpg" alt="服装鞋包" /><br/>服装鞋包</a></li>
<li><a href="{ZL:GetNodeLinkUrl(157)/}"><img src="{$CssDir/}images/home_pic13.jpg" alt="婚庆礼仪" /><br/>婚庆礼仪</a></li>
<li><a href="{ZL:GetNodeLinkUrl(158)/}"><img src="{$CssDir/}images/home_pic14.jpg" alt="摄影摄像" /><br/>摄影摄像</a></li>
<li><a href="{ZL:GetNodeLinkUrl(159)/}"><img src="{$CssDir/}images/home_pic15.jpg" alt="医药诊所" /><br/>医药诊所</a></li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li><a href="{ZL:GetNodeLinkUrl(160)/}"><img src="{$CssDir/}images/home_pic1.jpg" alt="潮流女装" /><br/>潮流女装</a></li>
<li><a href="{ZL:GetNodeLinkUrl(161)/}"><img src="{$CssDir/}images/home_pic2.jpg" alt="品牌男装" /><br/>品牌男装</a></li>
<li><a href="{ZL:GetNodeLinkUrl(162)/}"><img src="{$CssDir/}images/home_pic3.jpg" alt="美妆个护" /><br/>美妆个护</a></li>
<li><a href="{ZL:GetNodeLinkUrl(163)/}"><img src="{$CssDir/}images/home_pic4.jpg" alt="家用电器" /><br/>家用电器</a></li>
<li><a href="{ZL:GetNodeLinkUrl(164)/}"><img src="{$CssDir/}images/home_pic5.jpg" alt="电脑办公" /><br/>电脑办公</a></li>
<li><a href="{ZL:GetNodeLinkUrl(165)/}"><img src="{$CssDir/}images/home_pic6.jpg" alt="手机数码" /><br/>手机数码</a></li>
<li><a href="{ZL:GetNodeLinkUrl(166)/}"><img src="{$CssDir/}images/home_pic7.jpg" alt="母婴童装" /><br/>母婴童装</a></li>
<li><a href="{ZL:GetNodeLinkUrl(167)/}"><img src="{$CssDir/}images/home_pic8.jpg" alt="家居家纺" /><br/>家居家纺</a></li>
<li><a href="{ZL:GetNodeLinkUrl(168)/}"><img src="{$CssDir/}images/home_pic9.jpg" alt="厨房用品" /><br/>厨房用品</a></li>
<li><a href="{ZL:GetNodeLinkUrl(169)/}"><img src="{$CssDir/}images/home_pic10.jpg" alt="家具建材" /><br/>家具建材</a></li>
<li><a href="{ZL:GetNodeLinkUrl(170)/}"><img src="{$CssDir/}images/home_pic11.jpg" alt="食品生鲜" /><br/>食品生鲜</a></li>
<li><a href="{ZL:GetNodeLinkUrl(171)/}"><img src="{$CssDir/}images/home_pic12.jpg" alt="酒水饮料" /><br/>酒水饮料</a></li>
<li><a href="{ZL:GetNodeLinkUrl(172)/}"><img src="{$CssDir/}images/home_pic13.jpg" alt="运动户外" /><br/>运动户外</a></li>
<li><a href="{ZL:GetNodeLinkUrl(173)/}"><img src="{$CssDir/}images/home_pic14.jpg" alt="鞋靴箱包" /><br/>鞋靴箱包</a></li>
<li><a href="{ZL:GetNodeLinkUrl(174)/}"><img src="{$CssDir/}images/home_pic15.jpg" alt="奢品礼品" /><br/>奢品礼品</a></li>
</ul>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--图标结束-->
</div>
<div class="page__bd">
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">推荐商家</div>
<div class="weui-panel__bd">
{ZL.Label id="输出推荐商家列表" ShowNum="2" /}
</div>
<div class="weui-panel__ft">
<a href="{ZL:GetNodeListUrl(145)/}" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">热门商家</div>
<div class="weui-panel__bd">
{ZL.Label id="输出非推荐商家列表" ShowNum="2" /}
</div>
<div class="weui-panel__ft">
<a href="{ZL:GetNodeListUrl(145)/}" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">地市新闻</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
{ZL.Label id="首页输出地市新闻列表" NodeID="175" ShowNum="5" /}
</div>
</div>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">关于我们</div>
<div class="weui-panel__bd">
{ZL.Label id="首页输出关于我们列表" NodeID="176" ShowNum="5" /}
</div>
</div>
</div>
<div class="home_ico" style=" text-align:center">
欣赏来自逐浪官方的图标工具，接受我们满满的诚意：<br/>
<p>
<i class="zi z01-icon001"></i>
<i class="zi z01-icon002"></i>
<i class="zi z01-icon003"></i>
<i class="zi z01-icon004"></i>
<i class="zi Z01-icon004"></i>
<i class="zi z01-icon005"></i>
<i class="zi z01-icon006"></i>
<i class="zi z01-icon007"></i>
<i class="zi z01-icon008"></i>
<i class="zi z01-icon009"></i>
<i class="zi z01-icon010"></i>
</p>
</div>
<!--功能结束-->
<div class="weui-tabbar page__ft j_bottom">
<a href="#" class="weui-tabbar__item weui-bar__item_on">
<i class="zi z01-icon001 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="{ZL:GetNodeListUrl(145)/}" class="weui-tabbar__item">
<i class="zi z01-icon002 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">商家</p>
</a>
<a href="{ZL:GetNodeLinkUrl(177)/}" class="weui-tabbar__item">
<i class="zi z01-icon003 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">商城</p>
</a>
<a href="/User/" class="weui-tabbar__item">
<i class="zi z01-icon004 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">会员</p>
</a>
</div>
<!--foot end-->
<div>
<div class="weui-mask" id="iosMask" style="opacity:1; display: none;"></div>
<div class="weui-actionsheet" id="iosActionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
//滚动图？
var swiper = new Swiper('.home_pics .swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
loop: true,
grabCursor: true,
autoplay: 3000
});
var swiper1 = new Swiper('.home_menus .swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
loop: true,
grabCursor: true
});
$(function(){
var $searchBar = $('#searchBar'),
$searchResult = $('#searchResult'),
$searchText = $('#searchText'),
$searchInput = $('#searchInput'),
$searchClear = $('#searchClear'),
$searchCancel = $('#searchCancel');
function hideSearchResult(){
$searchResult.hide();
$searchInput.val('');
}
function cancelSearch(){
hideSearchResult();
$searchBar.removeClass('weui-search-bar_focusing');
$searchText.show();
}
$searchText.on('click', function(){
$searchBar.addClass('weui-search-bar_focusing');
$searchInput.focus();
});
$searchInput
.on('blur', function () {
if(!this.value.length) cancelSearch();
})
.on('input', function(){
if(this.value.length) {
$searchResult.show();
} else {
$searchResult.hide();
}
})
;
$searchClear.on('click', function(){
hideSearchResult();
$searchInput.focus();
});
$searchCancel.on('click', function(){
cancelSearch();
$searchInput.blur();
});
});
// ios
$(function(){
var $iosActionsheet = $('#iosActionsheet');
var $iosMask = $('#iosMask');
function hideActionSheet() {
$iosActionsheet.removeClass('weui-actionsheet_toggle');
$iosMask.fadeOut(200);
}
$iosMask.on('click', hideActionSheet);
$('#iosActionsheetCancel').on('click', hideActionSheet);
$("#showIOSActionSheet").on("click", function(){
$iosActionsheet.addClass('weui-actionsheet_toggle');
$iosMask.fadeIn(200);
});
});
</script>