Authored by lore-w

列表页990适配

@@ -80,6 +80,14 @@ @@ -80,6 +80,14 @@
80 {{#each goods}} 80 {{#each goods}}
81 {{> product/good}} 81 {{> product/good}}
82 {{/each}} 82 {{/each}}
  83 +
  84 + {{# hasNextPage}}
  85 + <div class="block-next-page">
  86 + <a href="{{href}}">
  87 + <img src="{{src}}" alt=""/>
  88 + </a>
  89 + </div>
  90 + {{/ hasNextPage}}
83 <div class="good-item-wrapper"> 91 <div class="good-item-wrapper">
84 <div class="good-info-main"></div> 92 <div class="good-info-main"></div>
85 <div class="good-select-color"></div> 93 <div class="good-select-color"></div>
@@ -104,17 +104,19 @@ exports.init = function(num) { @@ -104,17 +104,19 @@ exports.init = function(num) {
104 wrapperPt = $goodItemWrapper.css('paddingTop'); 104 wrapperPt = $goodItemWrapper.css('paddingTop');
105 containerPt = $goodsContainer.css('paddingTop'); 105 containerPt = $goodsContainer.css('paddingTop');
106 106
107 - wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth; 107 + //wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
  108 + wrapperWidth = $goodItemWrapper.width();
108 109
109 wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1); 110 wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
110 wrapperY = (event.targetY - 1) * 111 wrapperY = (event.targetY - 1) *
111 (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1); 112 (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
112 113
113 //todo 114 //todo
  115 + //event.offsetR表示当前列表距离浏览器右侧边缘的距离
114 diffWidth = event.offsetR - ((15 + 50) * ulNum + 25); 116 diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
115 117
116 if (diffWidth <= 0) { 118 if (diffWidth <= 0) {
117 - wrapperX = wrapperX + diffWidth; 119 + wrapperX = wrapperX + diffWidth - 25;
118 } 120 }
119 $goodItemWrapper.css({ 121 $goodItemWrapper.css({
120 width: wrapperWidth, 122 width: wrapperWidth,
@@ -139,4 +139,27 @@ @@ -139,4 +139,27 @@
139 .good-info { 139 .good-info {
140 margin-right: 10px; 140 margin-right: 10px;
141 } 141 }
  142 +}
  143 +
  144 +/*next page*/
  145 +
  146 +.block-next-page {
  147 + width: 222px;
  148 + height: 297px;
  149 + padding-top: 22px;
  150 + margin-bottom: 35px;
  151 + margin-right: 10px;
  152 + float: left;
  153 + cursor: pointer;
  154 +
  155 + a {
  156 + display: block;
  157 +
  158 + img {
  159 + width: 100%;
  160 + height: 100%;
  161 + display: block;
  162 + overflow: hidden;
  163 + }
  164 + }
142 } 165 }
1 @import "search", "list", "new-sale", "filter-box", "sort-pager", "good", "latest-walk", "left-content"; 1 @import "search", "list", "new-sale", "filter-box", "sort-pager", "good", "latest-walk", "left-content";
2 2
3 .product-page { 3 .product-page {
  4 +
  5 + /*分页*/
4 .product-pager { 6 .product-pager {
5 padding: 20px 0; 7 padding: 20px 0;
6 font-size: 12px; 8 font-size: 12px;
@@ -11,6 +13,7 @@ @@ -11,6 +13,7 @@
11 float: right; 13 float: right;
12 } 14 }
13 } 15 }
  16 + /*分页 END*/
14 17
15 .list-left { 18 .list-left {
16 width: 160px; 19 width: 160px;
@@ -21,8 +24,7 @@ @@ -21,8 +24,7 @@
21 } 24 }
22 } 25 }
23 26
24 -.product-list-page,  
25 -.new-sale-page { 27 +.product-list-page, .new-sale-page {
26 .goods-container { 28 .goods-container {
27 height: auto; 29 height: auto;
28 padding-top: 25px; 30 padding-top: 25px;
@@ -32,11 +34,37 @@ @@ -32,11 +34,37 @@
32 .good-info { 34 .good-info {
33 width: 235px; 35 width: 235px;
34 } 36 }
  37 +
  38 + .block-next-page {
  39 + width: 235px;
  40 + height: 314px;
  41 + }
35 } 42 }
36 } 43 }
37 44
38 @media (max-width: 1180px) { 45 @media (max-width: 1180px) {
39 - .product-page .list-right {  
40 - width: 810px; 46 +
  47 + .product-list-page, .new-sale-page {
  48 +
  49 + .list-right {
  50 + width: 810px;
  51 + }
  52 +
  53 + .goods-container {
  54 + height: auto;
  55 + padding-top: 25px;
  56 + position: relative;
  57 + width: 810px + 10px;//每列增加右边距
  58 +
  59 + .good-info {
  60 + width: 195px;
  61 + height: 350px;
  62 + }
  63 +
  64 + .block-next-page {
  65 + width: 195px;
  66 + height: 261px;
  67 + }
  68 + }
41 } 69 }
42 } 70 }
@@ -371,6 +371,10 @@ class IndexController extends AbstractAction @@ -371,6 +371,10 @@ class IndexController extends AbstractAction
371 'salePrice' => '899' 371 'salePrice' => '899'
372 ) 372 )
373 ), 373 ),
  374 + 'hasNextPage' => array(
  375 + 'href' => '',
  376 + 'src' => 'http://img10.static.yhbimg.com/product/2014/01/15/11/01fa01614784f6239760f1b749663016f1.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
  377 + ),
374 'totalCount' => '2273', 378 'totalCount' => '2273',
375 'pager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>' 379 'pager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
376 ), 380 ),
@@ -767,6 +771,10 @@ class IndexController extends AbstractAction @@ -767,6 +771,10 @@ class IndexController extends AbstractAction
767 'salePrice' => '899' 771 'salePrice' => '899'
768 ) 772 )
769 ), 773 ),
  774 + 'hasNextPage' => array(
  775 + 'href' => '',
  776 + 'src' => 'http://img10.static.yhbimg.com/product/2014/01/15/11/01fa01614784f6239760f1b749663016f1.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
  777 + ),
770 'leftContent' => array( 778 'leftContent' => array(
771 array( 779 array(
772 'allSort' => array( 780 'allSort' => array(