fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by xuqi
Commit df909f82506f3e8dfd4f977ef99bcc05386bc0d6 1 parent d05dc69a

guang build

Inline Side-by-side
Showing 25 changed files with 738 additions and 9 deletions
  1 +{{> layout/header}}
  2 +<div class="guang-index-page guang-page yoho-page clearfix">
  3 + {{# guang}}
  4 + <div class="left-side">
  5 + <div id="slider" class="slider">
  6 + <ul>
  7 + {{# slider}}
  8 + <li>
  9 + <a href="{{href}}">
  10 + <img class="lazy" data-original="{{img}}">
  11 + </a>
  12 + </li>
  13 + {{/ slider}}
  14 + </ul>
  15 + </div>
  16 + <div id="pjax-container" class="msg">
  17 + <ul class="msg-nav">
  18 + {{# msgTypes}}
  19 + <li data-type="{{typeId}}" {{#if isActive}}class="actived"{{/if}}>
  20 + <a class="pjax-link" href="{{navUrl}}">{{type}}</a>
  21 + </li>
  22 + {{/ msgTypes}}
  23 + </ul>
  24 + <div id="msg-list" class="msg-list">
  25 + {{# msgs}}
  26 + {{> guang/msg}}
  27 + {{/ msgs}}
  28 + </div>
  29 + <div class="msg-pager pager">
  30 + {{{msgPager}}}
  31 + </div>
  32 + </div>
  33 + </div>
  34 + <div class="right-side">
  35 + {{> guang/ex-reco}}
  36 + {{> guang/hot-tag}}
  37 + {{> guang/ad}}
  38 + </div>
  39 + {{/ guang}}
  40 +</div>
  41 +{{> layout/footer}}
  1 +<div class="ads">
  2 + {{# ads}}
  3 + <a class="ad" href="{{url}}">
  4 + <img class="lazy" data-original="{{img}}">
  5 + </a>
  6 + {{/ ads}}
  7 +</div>
  1 +<div class="ex-reco">
  2 + <h1 class="ex-reco-title">精彩推荐</h1>
  3 + <div id="ex-reco-list" class="ex-reco-list">
  4 + {{# exRecos}}
  5 + <div class="ex-reco-item clearfix">
  6 + <a class="ex-reco-img" href="{{url}}" target="_blank">
  7 + <span class="bg-img" style="background-image:url({{img}})"></span>
  8 + </a>
  9 + <a href="{{url}}" target="_blank">
  10 + <p class="ex-reco-context">{{title}}</p>
  11 + </a>
  12 + </div>
  13 + {{/ exRecos}}
  14 + </div>
  15 +</div>
  1 +<div class="hot">
  2 + <h1 class="hot-title">热门标签</h1>
  3 + <div class="hot-tag-list">
  4 + {{#hotTags}}
  5 + <a class="hot-tag" href="{{url}}">
  6 + {{tagname}}
  7 + </a>
  8 + {{/hotTags}}
  9 + </div>
  10 +</div>
  1 +<div class="msg-content clearfix" data-id="{{id}}">
  2 + <div class="msg-img">
  3 + <div class="classification">
  4 + {{classification}}
  5 + </div>
  6 + {{#if isReco}}
  7 + <div class="reco"></div>
  8 + {{/if}}
  9 + <a href="{{href}}">
  10 + <img class="lazy{{#if isSquareImg}} square{{/if}}" data-original="{{img}}">
  11 + </a>
  12 + </div>
  13 + <div class="msg-info">
  14 + <a class="msg-title" href="{{href}}">{{title}}</a>
  15 + <p class="msg-app">
  16 + <a href="{{editorHref}}">
  17 + <span class="author">{{author}}</span>
  18 + </a>
  19 + <span class="publish-time">
  20 + <i class="iconfont">&#xe625;</i>
  21 + {{pTime}}
  22 + </span>
  23 + <span class="page-view">
  24 + <i class="iconfont">&#xe627;</i>
  25 + {{pView}}
  26 + </span>
  27 + </p>
  28 + <p class="content">{{content}}</p>
  29 + <div class="footer">
  30 + <div class="tags">
  31 + {{# tags}}
  32 + <a class="msg-tag" href="{{href}}" target="_blank">{{tag}}</a>
  33 + {{/ tags}}
  34 + </div>
  35 + <div class="like-comment">
  36 + <span class="like">
  37 + <i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe626;</i>
  38 + <b class="like-num num-{{like}}">(<em class="num">{{like}}</em>)</b>
  39 + </span>
  40 + <span class="comment">
  41 + <i class="iconfont">&#xe623;</i>
  42 + {{# comment}}
  43 + ({{.}})
  44 + {{/ comment}}
  45 + </span>
  46 + </div>
  47 + </div>
  48 + </div>
  49 +</div>
@@ -19,9 +19,16 @@ @@ -19,9 +19,16 @@
19 19
20 {{!-- 列表 --}} 20 {{!-- 列表 --}}
21 {{#if productListPage}} 21 {{#if productListPage}}
22 -<script>  
23 - seajs.use(['js/product/list', 'js/product/product'], function (list, product) {  
24 - product.init(4);  
25 - });  
26 -</script> 22 + <script>
  23 + seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
  24 + product.init(4);
  25 + });
  26 + </script>
  27 +{{/if}}
  28 +
  29 +{{!-- 逛 --}}
  30 +{{#if guangIndexPage}}
  31 + <script>
  32 + seajs.use('js/guang/index');
  33 + </script>
27 {{/if}} 34 {{/if}}
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015 5 +Created by FontForge 20120731 at Tue Dec 15 13:44:11 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015
19 bbox="0 -214 1172.1 864" 19 bbox="0 -214 1172.1 864"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E61B" 22 + unicode-range="U+0078-E627"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -97,5 +97,39 @@ d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" /> @@ -97,5 +97,39 @@ d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" />
97 <glyph glyph-name="uniE61B" unicode="&#xe61b;" 97 <glyph glyph-name="uniE61B" unicode="&#xe61b;"
98 d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328 98 d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328
99 q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" /> 99 q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" />
  100 + <glyph glyph-name="uniE61C" unicode="&#xe61c;"
  101 +d="M982 137l-4 6l-10 12q-12 13 -42 38q-12 10 -25.5 20.5t-27.5 21t-26 17.5l-48 31l-21 11q-5 2 -11.5 3t-13 0.5t-11.5 -2.5q-7 -2 -13.5 -7.5t-9.5 -10.5l-17 -25q-4 -6 -8 -13l-12 -24q-9 -18 -15 -28q-7 -14 -21 -24t-32 -13.5t-36 7.5q-102 57 -171 123
  102 +q-101 95 -135 172q-8 13 -1.5 37t26.5 34q12 6 25 11.5t23 9.5t18 9q7 4 14.5 8.5t18.5 11.5l2 1l4 4l2 1l3 3q19 18 9 43l-3 8q-1 4 -4 10t-12.5 24.5t-19.5 34.5q-8 14 -19.5 31t-21.5 31q-10 13 -20.5 24t-18.5 17.5t-14.5 11.5t-9.5 6l-4 2l-13 7q-9 4 -17.5 4.5t-16 -1
  103 +t-16.5 -4.5q-5 -2 -9.5 -4.5t-8.5 -4t-9 -4.5l-7 -4q-3 -2 -8 -6t-7 -5t-7.5 -5.5t-7 -5.5t-8 -6.5t-7.5 -5.5q-44 -37 -69.5 -82.5t-19.5 -86.5q10 -72 88 -198.5t182.5 -225.5t237.5 -173t209 -84q79 -10 169 73q16 15 31.5 34.5t24.5 38.5q6 14 7.5 30t-5.5 31v0z
  104 +M982 137z" />
  105 + <glyph glyph-name="uniE61D" unicode="&#xe61d;"
  106 +d="M888 620q8 8 18.5 10.5t20.5 0t18 -10.5q4 -4 6.5 -8.5t4 -9.5t1.5 -10.5t-1.5 -10t-4 -9.5t-6.5 -9l-406 -405q-12 -12 -28.5 -12t-27.5 12q-6 5 -9 12.5t-3 15.5t3 15t9 13zM539 214q3 -3 5 -6t3.5 -7t2 -7.5t0.5 -7.5t-0.5 -8t-2 -7.5t-3.5 -6.5t-5 -6
  107 +q-12 -12 -28.5 -12t-28.5 12l-406 405q-7 8 -10 18.5t0 20.5t10 18q6 6 13.5 9t15 3t15 -3t13.5 -9zM539 214z" />
  108 + <glyph glyph-name="uniE61E" unicode="&#xe61e;"
  109 +d="M127 769v-770h770v770h-770zM555 170h-86v86h86v-86zM555 298h-86v257h86v-257z" />
  110 + <glyph glyph-name="uniE61F" unicode="&#xe61f;"
  111 +d="M511.5 747q-72.5 0 -141 -22.5t-123.5 -64t-96 -96.5t-63.5 -123t-22.5 -141q0 -91 35 -173.5t95 -142.5t143 -95.5t173.5 -35.5t173.5 35.5t143 95.5t95 142.5t35 173.5q1 73 -22 141t-64 123t-96 96.5t-123.5 64t-141 22.5zM452 100h-1v0l-38 38l-179 180l38 37
  112 +l179 -179l318 318l38 -38zM512 -147q-91 0 -175 35q-80 34 -142 96t-96 142q-8 21 -15 42t-11 43t-6.5 44t-2.5 45q0 91 35 174q34 81 96 142.5t142 95.5q84 36 175 36q45 0 88.5 -9t85.5 -27q40 -16 75.5 -40.5t66.5 -54.5q20 -21 38 -44t32.5 -47.5t25.5 -51.5
  113 +q35 -83 35 -174t-35 -174q-34 -80 -96 -142t-142 -96q-14 -6 -28 -11t-28.5 -9t-29 -6.5t-29 -4.5t-29.5 -3t-30 -1zM511.5 747q-90.5 0 -173 -35.5t-142.5 -95.5t-95.5 -142.5t-35.5 -173.5t35.5 -173.5t95.5 -142.5t142.5 -95t173 -35t173.5 35t142.5 95t95 142.5
  114 +t35.5 173.5t-35.5 173.5t-95 142.5t-142.5 95.5t-173.5 35.5zM451 99l-38 39l-180 180l39 38l179 -180l318 318l39 -38zM414 138l37 -37l355 355l-37 37l-318 -318l-179 180l-38 -37z" />
  115 + <glyph glyph-name="uniE620" unicode="&#xe620;"
  116 +d="M958 662q0 30 -21 51.5t-51 21.5h-749q-30 0 -51 -21.5t-21 -51.5v-748q0 -30 21 -51t51 -21h749q30 0 51 21t21 51v748zM778 358l-267 -267q-14 -14 -34 -14q-9 0 -18 3.5t-16 10.5l-168 168q-14 14 -14 34t14 34q9 10 21.5 13t25 0t21.5 -13l134 -133l233 232
  117 +q9 10 21.5 13t25 0t21.5 -13q14 -14 14 -34t-14 -34z" />
  118 + <glyph glyph-name="uniE621" unicode="&#xe621;"
  119 +d="M384 556v-513l321 257z" />
  120 + <glyph glyph-name="uniE622" unicode="&#xe622;" horiz-adv-x="1000"
  121 +d="M662 566v-499l-299 250zM662 566z" />
  122 + <glyph glyph-name="uniE623" unicode="&#xe623;" horiz-adv-x="1000"
  123 +d="M744 502h-488q-25 0 -46 -12t-33 -33t-12 -46v-290q0 -38 26.5 -64.5t64.5 -26.5h227l200 -138v138h61q38 0 64.5 26.5t26.5 64.5v290q0 15 -4.5 29t-13 25t-19.5 19.5t-25 13t-29 4.5zM744 262z" />
  124 + <glyph glyph-name="uniE625" unicode="&#xe625;"
  125 +d="M511 748q-91 0 -173.5 -35.5t-142 -95t-95 -142t-35.5 -173.5q0 -61 16 -118.5t45 -106.5t70 -90t90 -70t106.5 -45t118.5 -16q91 0 173.5 35.5t142.5 95t95 142t35 173.5q0 185 -130.5 315.5t-315.5 130.5zM734 253h-237q-7 0 -14 3q-22 9 -22 33v237q0 10 5 18.5
  126 +t13 13.5t18 5q8 0 14.5 -3t11.5 -8t8 -11.5t3 -14.5v-200h200q10 0 18.5 -5t13.5 -13.5t5 -18.5t-5 -18t-13.5 -13t-18.5 -5zM734 253z" />
  127 + <glyph glyph-name="uniE626" unicode="&#xe626;" horiz-adv-x="1025"
  128 +d="M994 79q-18 9 -16 30.5t27 46.5q24 27 17.5 54.5t-33.5 40.5q-17 8 -24.5 17.5t-2 20t26.5 19.5q20 7 27 30.5t-1 52.5t-28 53q-17 19 -92 24.5t-142 1.5l-67 -4q3 2 3 145q0 69 -14 109t-37.5 53.5t-60.5 12.5q-18 0 -28.5 -5t-17 -13t-11 -26.5t-7.5 -38t-10 -56.5
  129 +t-16 -74q-12 -47 -38 -94t-54 -80t-55.5 -59t-44 -39t-17.5 -13v-386q8 -12 20 -21t25.5 -15.5t25 -11t23.5 -8.5t16 -6q9 -4 65 -10.5t105.5 -11t51.5 -4.5q4 0 11 0.5t30 2.5t45 4.5t52 6.5t56.5 8t53.5 9.5t47 11t33.5 13t15.5 14.5q5 17 4 30.5t-3.5 23t2.5 17.5t21 15
  130 +q14 5 23 14.5t12 20.5t3 23t-3.5 22t-8.5 18t-10 11zM0 295v-380q0 -28 20 -48.5t49 -20.5h137v518h-137q-29 0 -49 -20.5t-20 -48.5zM0 295z" />
  131 + <glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1025"
  132 +d="M512 623q-167 0 -304.5 -89.5t-205.5 -236.5q-4 -9 0 -18q45 -96 121 -169.5t177 -115t212 -41.5q167 0 304.5 89.5t205.5 236.5q1 3 1.5 6t0 6t-1.5 6q-68 147 -205.5 236.5t-304.5 89.5zM512 57q-96 0 -163.5 67.5t-67.5 163.5t67.5 163.5t163.5 67.5t163.5 -67.5
  133 +t67.5 -163.5q0 -47 -18.5 -89.5t-49.5 -73.5t-73.5 -49.5t-89.5 -18.5zM364 288q0 -61 43.5 -104.5t104.5 -43.5t104.5 43.5t43.5 104.5t-43.5 104.5t-104.5 43.5t-104.5 -43.5t-43.5 -104.5z" />
100 </font> 134 </font>
101 </defs></svg> 135 </defs></svg>
  1 +/**
  2 + * 图片移入闪动效果JS
  3 + * @auhor: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/7/29
  5 + */
  6 +var $ = require('yoho.jquery');
  7 +
  8 +$('.page').on('mouseover', 'a img, a .bg-img', function(e) {
  9 + var $el = $(e.target);
  10 +
  11 + //slider中的图片不做此效果
  12 + if ($el.closest('.slider').length > 0) {
  13 + return;
  14 + }
  15 +
  16 + $el.addClass('blink');
  17 +
  18 + setTimeout(function() {
  19 + $el.removeClass('blink');
  20 + }, 100);
  21 +});
  1 +/**
  2 + * 逛首页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/12/15
  5 + */
  6 +
  7 +var $ = require('yoho.jquery'),
  8 + lazyLoad = require('yoho.lazyload');
  9 +
  10 +var msg = require('./msg');
  11 +
  12 +require('yoho.pjax');
  13 +
  14 +require('./img-blink');
  15 +
  16 +require('./right-side');
  17 +
  18 +lazyLoad({
  19 + failure_limit: 50
  20 +});
  21 +
  22 +msg.dotLazy();
  23 +
  24 +$(document).pjax('.pjax-link, .msg-pager a', '#pjax-container', {
  25 + timeout: 2000
  26 +});
  27 +
  28 +$(document).on('pjax:end', function() {
  29 + msg.dotLazy();
  30 +});
  1 +var $ = require('yoho.jquery'),
  2 + lazyLoad = require('yoho.lazyload');
  3 +
  4 +var prising;
  5 +
  6 +require('yoho.dotdotdot');
  7 +
  8 +//资讯文字截取和lazyload
  9 +function dotLazy() {
  10 +
  11 + //文字截取
  12 + $('.msg-title, .msg-content .content').dotdotdot({
  13 + wrap: 'letter'
  14 + });
  15 +
  16 + //Lazyload
  17 + lazyLoad($('#msg-list img.lazy'));
  18 +}
  19 +
  20 +//资讯点赞
  21 +$('.guang-page').on('click', '.like-icon', function() {
  22 + var $this = $(this),
  23 + msgId = $this.closest('.msg-content').data('id'),
  24 + url;
  25 +
  26 + //同一资讯多次点击归一处理
  27 + if (prising === msgId) {
  28 + return;
  29 + }
  30 +
  31 + prising = msgId;
  32 +
  33 + $this.toggleClass('liked');
  34 +
  35 + //点赞或取消点赞
  36 + if ($this.hasClass('liked')) {
  37 + url = '/msg/prise';
  38 + } else {
  39 + url = '/msg/cancelprise';
  40 + }
  41 + $.ajax({
  42 + type: 'GET',
  43 + url: url,
  44 + data: {
  45 + id: msgId,
  46 + time: new Date().getTime()
  47 + }
  48 + }).then(function(data) {
  49 + if (data.code === 200) {
  50 + if (data.data * 1 === 0) {
  51 + $this.next('span').addClass('num-0').children('.num').html('0'); //隐藏数字显示
  52 + } else {
  53 + $this.next('span').removeClass('num-0').children('.num').html(data.data);
  54 + }
  55 + }
  56 + prising = false;
  57 + });
  58 +}).on('mouseenter mouseleave', '.like-icon', function() {
  59 + $(this).closest('.like').toggleClass('hover');
  60 +});
  61 +
  62 +exports.dotLazy = dotLazy;
  1 +/**
  2 + * 右侧栏文字截取js
  3 + */
  4 +var $ = require('yoho.jquery');
  5 +
  6 +require('yoho.dotdotdot');
  7 +
  8 +$('.ex-reco-context').dotdotdot({
  9 + wrap: 'letter'
  10 +});
@@ -16,7 +16,9 @@ @@ -16,7 +16,9 @@
16 "yoho.lazyload": "1.0.0", 16 "yoho.lazyload": "1.0.0",
17 "yoho.handlebars": "3.0.3", 17 "yoho.handlebars": "3.0.3",
18 "yoho.jquery": "1.8.3", 18 "yoho.jquery": "1.8.3",
19 - "json2": "1.0.0" 19 + "json2": "1.0.0",
  20 + "yoho.pjax": "1.0.0",
  21 + "yoho.dotdotdot": "1.0.0"
20 }, 22 },
21 "devDependencies": { 23 "devDependencies": {
22 "expect.js": "0.3.1" 24 "expect.js": "0.3.1"
  1 +.guang-index-page {
  2 + .slider {
  3 + height: 327px;
  4 + width: 100%;
  5 + overflow: hidden;
  6 + }
  7 +
  8 + .msg-nav {
  9 + border-bottom: 1px solid #000;
  10 + margin-top: 24px;
  11 + height: 30px;
  12 + li {
  13 + float: left;
  14 + height: 30px;
  15 + line-height: 30px;
  16 + text-align: center;
  17 + font-size: 18px;
  18 + padding: 0 28px;
  19 +
  20 + a {
  21 + display: block;
  22 + height: 100%;
  23 + width: 100%;
  24 + color: #333;
  25 + }
  26 +
  27 + &.actived {
  28 + background-color: #111;
  29 +
  30 + a {
  31 + color: #fff;
  32 + }
  33 + }
  34 + }
  35 + }
  36 + .msg-pager {
  37 + float: right;
  38 + margin: 20px 0;
  39 + }
  40 +}
  1 +.guang-page {
  2 + width: 1150px;
  3 + margin: 0 auto;
  4 +
  5 + .left-side {
  6 + float: left;
  7 + width: 830px;
  8 + }
  9 +
  10 + .right-side {
  11 + float: left;
  12 + width: 290px;
  13 + margin-left: 30px;
  14 + }
  15 +
  16 + img.blink,
  17 + .bg-img.blink {
  18 + opacity: 0.8;
  19 + filter: alpha(opacity=80);
  20 + }
  21 +
  22 + /*精彩推荐*/
  23 + .ex-reco-title {
  24 + color: #333;
  25 + line-height: 24px;
  26 + padding-bottom: 10px;
  27 + border-bottom: 1px solid #ccc;
  28 + font-size: 20px;
  29 + font-weight: bold;
  30 + }
  31 + .ex-recos-list {
  32 + margin-top: 14px;
  33 + }
  34 + .ex-reco-item {
  35 + box-sizing: border-box;
  36 + height: 60px;
  37 + margin-bottom: 14px;
  38 + &:last-child {
  39 + margin-bottom: 0;
  40 + }
  41 + }
  42 + .ex-reco-img {
  43 + display: block;
  44 + float: left;
  45 + width: 90px;
  46 + height: 60px;
  47 + span {
  48 + display: block;
  49 + height: 100%;
  50 + width: 100%;
  51 + -webkit-background-size:cover;
  52 + -moz-background-size:cover;
  53 + background-size:cover;
  54 + background-position: center;
  55 + img {
  56 + width: 100%;
  57 + height: 100%;
  58 + }
  59 + }
  60 + margin-right: 5px;
  61 + }
  62 + .ex-reco-context {
  63 + float: left;
  64 + max-width: 195px;
  65 + height: 40px;
  66 + line-height: 20px;
  67 + font-size: 13px;
  68 + color: #666;
  69 + white-space: nowrap;
  70 + overflow: hidden;
  71 + text-overflow: ellipsis;
  72 +
  73 + &:hover {
  74 + color: #cc3300;
  75 + }
  76 + }
  77 +
  78 + /*热门标签*/
  79 + .hot {
  80 + margin-top: 40px;
  81 +
  82 + .hot-title {
  83 + color: #333;
  84 + line-height: 24px;
  85 + padding-bottom: 10px;
  86 + border-bottom: 1px solid #ccc;
  87 + font-weight: bold;
  88 + font-size: 20px;
  89 + }
  90 +
  91 + .hot-tag-list {
  92 + margin-top: 14px;
  93 + max-height: 150px;
  94 + overflow: hidden;
  95 + }
  96 +
  97 + .hot-tag {
  98 + display: inline-block;
  99 + float: left;
  100 + padding: 5px;
  101 + font-size: 12px;
  102 + background-color: #ccc;
  103 + border: none;
  104 + margin-right: 10px;
  105 + margin-bottom: 10px;
  106 + color: white;
  107 + font-weight: bold;
  108 + &:hover {
  109 + background-color: #333;
  110 + }
  111 + }
  112 + }
  113 +
  114 + /*广告位*/
  115 + .ads {
  116 + margin-top: 30px;
  117 +
  118 + .ad {
  119 + display: block;
  120 + box-sizing: border-box;
  121 + margin-bottom: 24px;
  122 + width: 290px;
  123 + img {
  124 + display: block;
  125 + width: 100%;
  126 + }
  127 + }
  128 + }
  129 +
  130 + /*资讯*/
  131 + .msg-content {
  132 + padding: 24px 0;
  133 + border-bottom: 1px solid #ccc;
  134 + position: relative;
  135 +
  136 + .content {
  137 + height: 80px;
  138 + line-height: 24px;
  139 + }
  140 + .msg-img {
  141 + position: relative;
  142 + float: left;
  143 + margin-right: 26px;
  144 +
  145 + img {
  146 + display: block;
  147 + width: 360px;
  148 + height: 240px;
  149 + }
  150 + img.square {
  151 + height: 360px;
  152 + }
  153 + }
  154 +
  155 + .classification {
  156 + position: absolute;
  157 + background-color: #000;
  158 + color: #fff;
  159 + text-align: center;
  160 + width: 80px;
  161 + height: 32px;
  162 + line-height: 32px;
  163 + font-size: 13px;
  164 + opacity: 0.9;
  165 + filter: Alpha(opacity=90);
  166 + z-index: 99;
  167 + }
  168 +
  169 + .reco {
  170 + position: absolute;
  171 + top: 0;
  172 + left: 66px;
  173 + height: 32px;
  174 + width: 32px;
  175 + background: image-url("guang/msg-reco.png");
  176 + background-size: 100% 100%;
  177 + z-index: 100;
  178 + }
  179 +
  180 + .msg-info {
  181 + float: left;
  182 + width: 440px;
  183 + }
  184 +
  185 + .msg-title {
  186 + display: block;
  187 + font-size: 22px;
  188 + color: #333;
  189 + line-height: 30px;
  190 + max-height: 64px;
  191 +
  192 + &:hover {
  193 + color: #CC3300;
  194 + }
  195 + }
  196 +
  197 + .content {
  198 + font-size: 14px;
  199 + color: #666;
  200 + }
  201 +
  202 + .msg-app {
  203 + line-height: 34px;
  204 + color: #999;
  205 + font-size: 13px;
  206 + }
  207 +
  208 + .author {
  209 + display: block;
  210 + float: left;
  211 + color: #333;
  212 + margin-right: 22px;
  213 + max-width: 180px;
  214 + white-space: nowrap;
  215 + overflow: hidden;
  216 + text-overflow: ellipsis;
  217 +
  218 + &:hover {
  219 + color: #CC3300;
  220 + }
  221 + }
  222 +
  223 + .publish-time, .page-view {
  224 + color: #999;
  225 + }
  226 +
  227 + .tags, .like-comment {
  228 + position: absolute;
  229 + bottom: 24px;
  230 + font-size: 12px;
  231 + &.tags {
  232 + left: 386px;
  233 + max-width: 350px;
  234 + height: 20px;
  235 + overflow: hidden;
  236 + }
  237 + &.like-comment {
  238 + right: 0;
  239 + color: #999;
  240 + }
  241 + .like {
  242 + margin-right: 10px;
  243 + .num-0 {
  244 + display: none;
  245 + }
  246 +
  247 + &.hover .num {
  248 + color: #000;
  249 + }
  250 + }
  251 + .like-icon {
  252 + cursor: pointer;
  253 + }
  254 + }
  255 +
  256 + .msg-tag {
  257 + display: inline-block;
  258 + text-align: center;
  259 + height: 20px;
  260 + line-height: 20px;
  261 + padding: 0 10px;
  262 + margin-right: 10px;
  263 + background-color: #ccc;
  264 + color: #fff;
  265 + &:last-child {
  266 + margin-right: 0;
  267 + }
  268 + &:hover {
  269 + background-color: #333;
  270 + }
  271 + }
  272 + }
  273 +
  274 +}
  275 +
  276 +@import "home";
@@ -79,4 +79,4 @@ a:focus { @@ -79,4 +79,4 @@ a:focus {
79 width: 990px; 79 width: 990px;
80 } 80 }
81 } 81 }
82 -@import "home/index", "product/index"; 82 +@import "home/index", "product/index", "guang/index";
  1 +<?php
  2 +use Action\AbstractAction;
  3 +
  4 +/**
  5 + * 逛
  6 + */
  7 +class GuangController extends AbstractAction
  8 +{
  9 + /**
  10 + * 逛首页
  11 + */
  12 + public function indexAction()
  13 + {
  14 + $data = array(
  15 + 'guangIndexPage' => true,
  16 + 'guang' => array(
  17 + 'slider' => array(
  18 + array(
  19 + 'href' => '',
  20 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
  21 + ),
  22 + array(
  23 + 'href' => '',
  24 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  25 + )
  26 + ),
  27 + 'msgTypes' => array(
  28 + array(
  29 + 'typeId' => 1,
  30 + 'type' => '最新',
  31 + 'navUrl' => '/'
  32 + ),
  33 + array(
  34 + 'typeId' => 2,
  35 + 'type' => '话题',
  36 + 'isActive' => true,
  37 + 'navUrl' => '/'
  38 + ),
  39 + array(
  40 + 'typeId' => 3,
  41 + 'type' => '搭配',
  42 + 'navUrl' => '/'
  43 + ),
  44 + array(
  45 + 'typeId' => 4,
  46 + 'type' => '潮人',
  47 + 'navUrl' => '/'
  48 + ),
  49 + array(
  50 + 'typeId' => 5,
  51 + 'type' => '潮物',
  52 + 'navUrl' => '/'
  53 + ),
  54 + array(
  55 + 'typeId' => 6,
  56 + 'type' => '小贴士',
  57 + 'navUrl' => '/'
  58 + )
  59 + ),
  60 + 'msgs' => array(
  61 + array(
  62 + 'id' => 1,
  63 + 'classification' => '话题',
  64 + 'isReco' => true,
  65 + 'href' => '',
  66 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
  67 + 'isSquareImg' => true,
  68 + 'title' => '破旧除新！Publish完美释出2015最新春季[TheResistance]系列看看你很长的时候会不会分页啊，奇怪的人类',
  69 + 'author' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
  70 + 'editorHref' => '',
  71 + 'pTime' => '2015-03-08 15:33',
  72 + 'pView' => '225',
  73 + 'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
  74 + 'tags' => array(
  75 + array(
  76 + 'href' => '',
  77 + 'tag' => 'adidas OriginalsQ'
  78 + )
  79 + ),
  80 + 'like' => 0,
  81 + 'liked' => false,
  82 + 'comment' => false
  83 + )
  84 + ),
  85 + 'exRecos' => array(
  86 + array(
  87 + 'url' => '',
  88 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
  89 + 'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
  90 + )
  91 + ),
  92 + 'hotTags' => array(
  93 + array(
  94 + 'tagname' => 'LEE',
  95 + 'url' => ''
  96 + )
  97 + ),
  98 + 'ads' => array(
  99 + array(
  100 + 'url' => '',
  101 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
  102 + )
  103 + ),
  104 + 'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
  105 + )
  106 + );
  107 + $this->_view->display('index', $data);
  108 + }
  109 +
  110 + /**
  111 + * 逛详情页
  112 + */
  113 + public function detailAction()
  114 + {
  115 +
  116 + }
  117 +
  118 + /**
  119 + * 编辑页
  120 + */
  121 + public function editorAction()
  122 + {
  123 +
  124 + }
  125 +}