sileya-ai
/
vr-shopxo-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search

feat/task1-c-wallet
devil_gong 2018-08-30 18:05:11 +08:00
parent 2f20b17dd9
commit 7a8dfdd32a
4 changed files with 588 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

276
service/Application/Home/View/Default/Search/Index.html
View File

@ -12,10 +12,284 @@
<!-- goods category -->
<include file="Public/GoodsCategory" />
<div class="am-container">
hello
<div class="search-list">
<div class="am-u-sm-12 am-u-md-12">
<div class="theme-popover">
<div class="searchAbout">
<span class="font-pale">相关搜索：</span>
<a title="坚果" href="#">坚果</a>
<a title="瓜子" href="#">瓜子</a>
<a title="鸡腿" href="#">豆干</a>
</div>
<ul class="select">
<p class="title font-normal">
<span class="fl">松子</span>
<span class="total fl">搜索到<strong class="num">997</strong>件相关商品</span>
</p>
<div class="clear"></div>
<li class="select-result">
<dl>
<dt>已选</dt>
<dd class="select-no"></dd>
<p class="eliminateCriteria">清除</p>
</dl>
</li>
<div class="clear"></div>
<li class="select-list">
<dl id="select1">
<dt class="am-badge am-round">品牌</dt>
<div class="dd-conent">
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">百草味</a></dd>
<dd><a href="#">良品铺子</a></dd>
<dd><a href="#">新农哥</a></dd>
<dd><a href="#">楼兰蜜语</a></dd>
<dd><a href="#">口水娃</a></dd>
<dd><a href="#">考拉兄弟</a></dd>
</div>
</dl>
</li>
<li class="select-list">
<dl id="select2">
<dt class="am-badge am-round">种类</dt>
<div class="dd-conent">
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">东北松子</a></dd>
<dd><a href="#">巴西松子</a></dd>
<dd><a href="#">夏威夷果</a></dd>
<dd><a href="#">松子</a></dd>
</div>
</dl>
</li>
<li class="select-list">
<dl id="select3">
<dt class="am-badge am-round">选购热点</dt>
<div class="dd-conent">
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">手剥松子</a></dd>
<dd><a href="#">薄壳松子</a></dd>
<dd><a href="#">进口零食</a></dd>
<dd><a href="#">有机零食</a></dd>
</div>
</dl>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="search-content">
<ul class="sort-nav" data-am-sticky="{animation: 'slide-top'}">
<li class="first">
<a title="综合">综合排序</a>
</li>
<li>
<a title="销量">销量排序</a>
<i class="am-icon-sort-amount-asc"></i>
</li>
<li>
<a title="价格">价格优先</a>
<i class="am-icon-sort-amount-asc"></i>
</li>
<li class="big"><a title="评价" href="#">评价为主</a></li>
</ul>
<div class="clear"></div>
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 data-list">
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="../images/imgsearch1.jpg" />
<p class="title fl">【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮</p>
<p class="price fl">
<b>¥</b>
<strong>56.90</strong>
</p>
<p class="number fl">
销量<span>1110</span>
</p>
</div>
</li>
</ul>
</div>
<!--分页 -->
<ul class="am-pagination am-pagination-right search-pages">
<li class="am-disabled"><a href="#">&laquo;</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
<button type="button" class="am-btn am-btn-default am-btn-block search-pages-submit">加载更多 <i class="am-icon-angle-double-down"></i></button>
</div>
</div>
</div>
<!-- 罩层 -->
<div class="theme-popover-mask"></div>
<!-- footer start -->
<include file="Public/Footer" />
<!-- footer end -->

157
service/Public/Home/Default/Css/Search.css Normal file
View File

@ -0,0 +1,157 @@
@charset "utf-8";
/* CSS Document */
/*通用格式*/
*, *:after, *:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
/*任何标签、包括它前面、后面生成的内容都不要影响盒子的边框*/
ul, li, ol {list-style: none;}
dl,dt,dd{ margin:0px auto; padding:0px;}
p {margin: 0 0 .3rem 0; font-size:14px; }
[class*="am-u-"] {padding-left:0rem;padding-right:0rem;}
.am-thumbnails {margin-left: 0rem;margin-right: 0rem;}
.am-thumbnail {margin-bottom:0;}
.am-thumbnails > li {padding: 0 0rem 0.2rem .2rem;}
img{ width:100%;}
.price{color: #e4393c;font-weight: 600;}
.theme-popover {z-index: 1009;overflow:visible;background:#fff;}
.sort-nav a:hover, .sort-nav a:focus { color: #d2364c; }
/* select */
.sort-nav{padding:0px;font-size:12px}
.suggest,.searchAbout{ display:none;}
.select li {margin: 10px 0 5px 0px;}
.select dl{zoom:1;position:relative;line-height:24px; margin:10px 0px; }
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dt{width:80%;margin-left:10%;margin-bottom:5px;position:absolute;cursor: pointer;height:24px;line-height:24px;}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select a{display:inline-block;white-space:nowrap;height:24px; line-height:24px;padding:0 10px;text-decoration:none;color:#000;border-radius:2px;}
.select a:hover{color:#d2364c;}
.select .selected a{color:#d2364c; border:1px solid #d2364c;}
ul.pagination{display:none;}
/*搜索显示*/
.select-result{display: none;}
li.select-result dl{padding: 40px 0 5px 0px;}
li.select-result dt {left:-30px; top:10px;font-weight:bold;width:50px;}
.select-no{color:#999}
.select .select-result a{padding-right:20px;background: url("../images/close.png") right 9px no-repeat}
.select .select-result a:hover{background-position:right -15px}
.eliminateCriteria{display:none;line-height:21px;margin-top:4px;width:35px;float:right;color:#F00;cursor:pointer;}
/*排序*/
.sort-nav { width:100%; border-bottom: 1px solid #eee; background: #fff; overflow: hidden; }
.sort-nav li{ float:left;width:33.33%;height:30px; line-height:30px; text-align:center; padding:0px 0px;}
.sort-nav li a{font-size:14px;}
.sort-nav li.big{display:none;}
.sort-nav li.first {color: #F03726;}
/*筛选条件*/
.select-list{ float:left;display:inline; left:0;width:33.33%; height:30px;}
.select-list dl dt{left:0px; cursor:pointer; top:-10px;text-align: center;}
{display:none ;float:left; top:20px; padding-top:5px; z-index:10; left:0px; width:300%;position:absolute;}
.select-list .dd-conent{display:none ;float:left; top:20px; padding-top:5px; z-index:10; left:0px; width:300%;position:absolute; background:#fff;overflow: hidden;}
.select-list .dd-conent dd{width:33.33% ;text-align: center;margin-left: 0px;height:25px ;}
dl#select2 .dd-conent{ left:-100%; right:-100%;}
dl#select3 .dd-conent{ left:-200%; right:0px;}
.am-badge{font-size:12px ;padding:0px 0px;background-color: #999999;color: #ffffff;}
.theme-popover-mask{z-index:5;width: 100%;height: auto;position:fixed ;background:#000 ;top:0;opacity: 0.6;}
.theme-popover{width: 100%;}
/*搜索结果*/
.i-pic.limit {margin:5px;border: 1px #e8e8e8 solid;overflow: hidden;position: relative;cursor: pointer;}
.number.fl{position: absolute;bottom:5px;right:5px ;}
.price.fl{padding: 5px;}
/*分页*/
.am-pagination li{ float:none;}
.search-side{display: none;}
.limit p.title,.i-pic.check p.title{padding:0px 5px;margin:5px 0px;overflow:hidden;height:18px;line-height:18px ;}
.search-pages-submit { margin: 10px 0; }
@media only screen and (min-width: 640px) {
/* select */
.theme-popover { padding: 0 5px; }
.select-list .dd-conent dd{width:auto;text-align: center;margin-left:5px;}
.select li.select-result{display: none;}
.suggest,.searchAbout,ul.pagination{ display:block;}
.select .title.font-normal{margin-top:0px;margin-left:0px}
.select,.sort-nav{padding:5px 10px;box-shadow: 0px 0px 2px #ccc;margin-top:5px;background: #fff;}
.searchAbout{padding:10px;}
.select-list{width:100%;padding:0px 0px;}
.select li{list-style:none;padding:0px 0px 0px 100px;border-top:#eee 1px dashed;float: none;display: block;height: auto;}
.select-result dl dt{width:100px;}
.eliminateCriteria{width:80px;float:right;margin-right:20px;}
.am-badge{font-size:14px ;padding:0px 0px;background: none;color: #000000;}
/*排序*/
.sort-nav{padding:0px 0px;border-radius: 0px 0px 4px 4px; margin:10px 5px; font-size: 12px;width:auto;overflow: hidden;}
.sort-nav li{ display:inline; height:35px; line-height:35px; padding:0px 20px;width:auto;border-right:1px dotted #ddd;}
.sort-nav li.big{display:block;border: none;}
.sort-nav li.first{background: #F5F5F5;color: #000;}
/*筛选条件*/
.select-list,.select-list dl{width:100%;}
.select dl dt{left:-100px;top:10px;}
.select-list dl dt{top:5px;}
.select dt{width:100px;margin-left:0;text-align:center;color:#666;height:24px;line-height:24px;}
.select-list .dd-conent{ display:inline-block;float:left;background: none;width:100%;position: static;}
dl#select2 .dd-conent,dl#select3 .dd-conent{ left:0; right:0;}
/*搜索结果*/
li.select-result dl {padding: 10px 0px;}
.scoll{ margin-top:70px;}
.am-slider-default .am-direction-nav a {z-index:0;}
span.am-icon-th-list{color:orangered;margin-right:1px ;}
/*改写的布局*/
.flood li{width:33.3%;float: left; text-align: center;}
.smallnav img{max-width:60px;}
.smallnav{ font-size:14px;}
/*文字布局*/
.limit p.title,.i-pic.check p.title{padding:0px 10px;overflow:hidden;height:36px;line-height:18px ;}
.price.fl{font-size:16px ;}
.search-pages-submit { display: none; }
}
@media only screen and (min-width:1025px) {
.search{margin: 0px 40px 0px 0px;padding-top:10px ;}
.nav.white{padding-left:0px}
/*选中效果*/
.search-list ul li:hover .i-pic.limit,.search-side li:hover .i-pic.check{box-shadow:0px 12px 12px -10px rgba(0,0,0,.4);}
}
@media only screen and (max-width: 640px) {
.theme-popover { padding: 0; }
.data-list li:nth-child(2n) .i-pic.limit { margin-right: 0px; }
.data-list li:nth-child(2n+1) .i-pic.limit { margin-left: 0px; }
.search-pages { display: none; }
.search-pages-submit { display: block; }
.eliminateCriteria { margin-top: -28px; }
}

1
service/Public/Home/Default/Js/Common.js
View File

@ -84,6 +84,7 @@ $(function()
{
if($(window).width() > 625)
{
// 防止导航浮动
$('.nav-search').css('position','relative');
}
});

155
service/Public/Home/Default/Js/Search.js Normal file
View File

@ -0,0 +1,155 @@
$(function()
{
$("#select1 dd").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectA").remove();
} else {
var copyThisA = $(this).clone();
if ($("#selectA").length > 0) {
$("#selectA a").html($(this).text());
} else {
$(".select-result dl").append(copyThisA.attr("id", "selectA"));
}
}
});
$("#select2 dd").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectB").remove();
} else {
var copyThisB = $(this).clone();
if ($("#selectB").length > 0) {
$("#selectB a").html($(this).text());
} else {
$(".select-result dl").append(copyThisB.attr("id", "selectB"));
}
}
});
$("#select3 dd").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectC").remove();
} else {
var copyThisC = $(this).clone();
if ($("#selectC").length > 0) {
$("#selectC a").html($(this).text());
} else {
$(".select-result dl").append(copyThisC.attr("id", "selectC"));
}
}
});
$(document).on("click", "#selectA", function() {
$(this).remove();
$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
});
$(document).on("click", "#selectB", function() {
$(this).remove();
$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
});
$(document).on("click", "#selectC", function() {
$(this).remove();
$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
});
$(document).on("click", ".select dd", function() {
if ($(".select-result dd").length > 1) {
$(".select-no").hide();
$(".eliminateCriteria").show();
$(".select-result").show();
} else {
$(".select-no").show();
$(".select-result").hide();
}
});
$(".eliminateCriteria").on("click", function() {
$("#selectA").remove();
$("#selectB").remove();
$("#selectC").remove();
$(".select-all").addClass("selected").siblings().removeClass("selected");
$(".eliminateCriteria").hide();
$(".select-no").show();
$(".select-result").hide();
});
var hh = document.documentElement.clientHeight;
var ls = document.documentElement.clientWidth;
if (ls < 640) {
$(".select dt").on('click', function() {
if ($(this).next("div").css("display") == 'none') {
$(".theme-popover-mask").height(hh);
$(".theme-popover").css("position", "fixed");
$(this).next("div").slideToggle("slow");
$(".select div").not($(this).next()).hide();
}
else{
$(".theme-popover-mask").height(0);
$(".theme-popover").css("position", "static");
$(this).next("div").slideUp("slow");;
}
})
$(document).on("click", ".eliminateCriteria", function() {
$(".dd-conent").hide();
})
$(document).on("click", ".select dd", function() {
$(".theme-popover-mask").height(0);
$(".theme-popover").css("position", "static");
$(".dd-conent").hide();
});
$(document).on("click", ".theme-popover-mask", function() {
$(".theme-popover-mask").height(0);
$(".theme-popover").css("position", "static");
$(".dd-conent").hide();
});
}
// 导航显示/隐藏处理
function search_nav()
{
// 滚动处理导航
$(window).scroll(function()
{
if($(window).width() <= 625)
{
var scroll = $(document).scrollTop();
if($('.nav-search').length > 0)
{
if(scroll > 30)
{
$('.nav-search').css('display','none');
} else {
$('.nav-search').css('display','block');
}
}
}
});
}
// 浏览器窗口实时事件
$(window).resize(function()
{
search_nav();
});
search_nav();
});