page list with sort intro.review by:@xuqi
Showing
5 changed files
with
132 additions
and
0 deletions
| @@ -36,6 +36,22 @@ | @@ -36,6 +36,22 @@ | ||
| 36 | <div class="list-right pull-right"> | 36 | <div class="list-right pull-right"> |
| 37 | {{> product/shop-entry}} | 37 | {{> product/shop-entry}} |
| 38 | 38 | ||
| 39 | + {{# sortIntro}} | ||
| 40 | + <div class="sort-intro clearfix"> | ||
| 41 | + <div class="texts pull-left"> | ||
| 42 | + <p class="name">{{name}}</p> | ||
| 43 | + <p class="en-name">{{enName}}</p> | ||
| 44 | + <p class="desc">{{description}}</p> | ||
| 45 | + <div class="key-entry"> | ||
| 46 | + {{#each keyEntry}} | ||
| 47 | + <a href="{{url}}">{{name}}</a> | ||
| 48 | + {{/each}} | ||
| 49 | + </div> | ||
| 50 | + </div> | ||
| 51 | + <img class="pull-right img" src="{{img}}"> | ||
| 52 | + </div> | ||
| 53 | + {{/ sortIntro}} | ||
| 54 | + | ||
| 39 | {{> product/standard-content}} | 55 | {{> product/standard-content}} |
| 40 | 56 | ||
| 41 | {{> product/latest-walk}} | 57 | {{> product/latest-walk}} |
| @@ -34,6 +34,22 @@ | @@ -34,6 +34,22 @@ | ||
| 34 | {{> product/left-content}} | 34 | {{> product/left-content}} |
| 35 | </div> | 35 | </div> |
| 36 | <div class="list-right pull-right"> | 36 | <div class="list-right pull-right"> |
| 37 | + {{# sortIntro}} | ||
| 38 | + <div class="sort-intro clearfix"> | ||
| 39 | + <div class="texts pull-left"> | ||
| 40 | + <p class="name">{{name}}</p> | ||
| 41 | + <p class="en-name">{{enName}}</p> | ||
| 42 | + <p class="desc">{{description}}</p> | ||
| 43 | + <div class="key-entry"> | ||
| 44 | + {{#each keyEntry}} | ||
| 45 | + <a href="{{url}}">{{name}}</a> | ||
| 46 | + {{/each}} | ||
| 47 | + </div> | ||
| 48 | + </div> | ||
| 49 | + <img class="pull-right img" src="{{img}}"> | ||
| 50 | + </div> | ||
| 51 | + {{/ sortIntro}} | ||
| 52 | + | ||
| 37 | {{> product/standard-content}} | 53 | {{> product/standard-content}} |
| 38 | 54 | ||
| 39 | {{> product/latest-walk}} | 55 | {{> product/latest-walk}} |
| @@ -155,4 +155,77 @@ | @@ -155,4 +155,77 @@ | ||
| 155 | color: #f00; | 155 | color: #f00; |
| 156 | } | 156 | } |
| 157 | } | 157 | } |
| 158 | + | ||
| 159 | + .sort-intro { | ||
| 160 | + margin-bottom: 20px; | ||
| 161 | + | ||
| 162 | + .texts { | ||
| 163 | + width: 386px; | ||
| 164 | + height: 298px; | ||
| 165 | + padding: 0 50px; | ||
| 166 | + border: 1px solid #eaeceb; | ||
| 167 | + text-align: center; | ||
| 168 | + overflow: hidden; | ||
| 169 | + } | ||
| 170 | + | ||
| 171 | + .name { | ||
| 172 | + font-size: 30px; | ||
| 173 | + font-weight: bold; | ||
| 174 | + margin-top: 60px; | ||
| 175 | + } | ||
| 176 | + | ||
| 177 | + .en-name { | ||
| 178 | + font-size: 14px; | ||
| 179 | + font-weight: bold; | ||
| 180 | + } | ||
| 181 | + | ||
| 182 | + .desc { | ||
| 183 | + margin-top: 15px; | ||
| 184 | + color: #666; | ||
| 185 | + margin-top: 15px; | ||
| 186 | + font-size: 12px; | ||
| 187 | + line-height: 150%; | ||
| 188 | + } | ||
| 189 | + | ||
| 190 | + .img { | ||
| 191 | + width: 480px; | ||
| 192 | + height: 300px; | ||
| 193 | + } | ||
| 194 | + | ||
| 195 | + .key-entry { | ||
| 196 | + width: 330px; | ||
| 197 | + margin: 30px auto 0; | ||
| 198 | + | ||
| 199 | + a { | ||
| 200 | + float: left; | ||
| 201 | + display: block; | ||
| 202 | + width: 110px; | ||
| 203 | + height: 14px; | ||
| 204 | + line-height: 14px; | ||
| 205 | + font-size: 12px; | ||
| 206 | + margin-bottom: 5px; | ||
| 207 | + color: #069; | ||
| 208 | + text-decoration: underline; | ||
| 209 | + } | ||
| 210 | + } | ||
| 211 | + } | ||
| 212 | +} | ||
| 213 | + | ||
| 214 | +@media (max-width: 1180px) { | ||
| 215 | + .product-list-page .sort-intro { | ||
| 216 | + .texts { | ||
| 217 | + width: 346px; | ||
| 218 | + height: 248px; | ||
| 219 | + padding: 0 30px; | ||
| 220 | + } | ||
| 221 | + | ||
| 222 | + .name { | ||
| 223 | + margin-top: 30px; | ||
| 224 | + } | ||
| 225 | + | ||
| 226 | + .img { | ||
| 227 | + width: 400px; | ||
| 228 | + height: 250px; | ||
| 229 | + } | ||
| 230 | + } | ||
| 158 | } | 231 | } |
| @@ -429,6 +429,26 @@ class Index1Controller extends AbstractAction | @@ -429,6 +429,26 @@ class Index1Controller extends AbstractAction | ||
| 429 | 'name' => '包类/装备' | 429 | 'name' => '包类/装备' |
| 430 | ) | 430 | ) |
| 431 | ), | 431 | ), |
| 432 | + 'sortIntro' => array( | ||
| 433 | + 'name' => '羽绒服', | ||
| 434 | + 'enName' => 'DOWN COAT', | ||
| 435 | + 'desc' => '羽绒服是冬季必不可少的服饰之一，冬天的街头充斥着各种各样的羽绒服，特别是在北方。时下羽绒服融入了毛领、收腰等时尚元素，更显潮人们的完美身材。', | ||
| 436 | + 'keyEntry' => array( | ||
| 437 | + array( | ||
| 438 | + 'name' => 'Livis' | ||
| 439 | + ), | ||
| 440 | + array( | ||
| 441 | + 'name' => 'LEE' | ||
| 442 | + ), | ||
| 443 | + array( | ||
| 444 | + 'name' => 'LE2E' | ||
| 445 | + ), | ||
| 446 | + array( | ||
| 447 | + 'name' => 'LE2E' | ||
| 448 | + ) | ||
| 449 | + ), | ||
| 450 | + 'img' => 'http://img13.static.yhbimg.com/adpic/2015/12/22/06/0276abe61367884cea21b779e47141891b.jpg' | ||
| 451 | + ), | ||
| 432 | 'shopEntry' => array( | 452 | 'shopEntry' => array( |
| 433 | 'home' => 'adidas.yohobuy.com', | 453 | 'home' => 'adidas.yohobuy.com', |
| 434 | 'logo' => 'http://img11.static.yhbimg.com/brandLogo/2013/01/16/09/01f515687de080f94243cb1aa0fedb2fe1.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90', | 454 | 'logo' => 'http://img11.static.yhbimg.com/brandLogo/2013/01/16/09/01f515687de080f94243cb1aa0fedb2fe1.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90', |
-
Please register or login to post a comment