Merge branch 'develop' of http://git.dev.yoho.cn/ued/yohogirls-frontend into develop
Conflicts: web/package.json
Showing
14 changed files
with
2207 additions
and
2161 deletions
No preview for this file type
No preview for this file type
No preview for this file type
| @@ -7,8 +7,9 @@ | @@ -7,8 +7,9 @@ | ||
| 7 | var $ = require('jquery'), | 7 | var $ = require('jquery'), |
| 8 | share = require('../plugin/share'), | 8 | share = require('../plugin/share'), |
| 9 | box = require('../plugin/box'), | 9 | box = require('../plugin/box'), |
| 10 | - imgZoom = require('../plugin/imgzoom'), | ||
| 11 | - tools = require('yoho-tools'); | 10 | + imgZoom = require('../plugin/imgZoom'), |
| 11 | + tools = require('yoho-tools'), | ||
| 12 | + mulLine = require('mlellipsis'); | ||
| 12 | 13 | ||
| 13 | require('lazyload'); | 14 | require('lazyload'); |
| 14 | require('../plugin/slider'); | 15 | require('../plugin/slider'); |
| @@ -20,10 +21,41 @@ exports.init = function() { | @@ -20,10 +21,41 @@ exports.init = function() { | ||
| 20 | detailTitle = $(".detail-title").find("h1"), | 21 | detailTitle = $(".detail-title").find("h1"), |
| 21 | detailSubtitle = $(".detail-title").find("h2"), | 22 | detailSubtitle = $(".detail-title").find("h2"), |
| 22 | ajaxParam, | 23 | ajaxParam, |
| 24 | + i, | ||
| 25 | + data, | ||
| 23 | cidNum; | 26 | cidNum; |
| 24 | 27 | ||
| 25 | //底部数据相关变量 | 28 | //底部数据相关变量 |
| 29 | + var adItem = '', //边栏广告 | ||
| 30 | + sideVideoTpl = '', //边栏视频模板 | ||
| 31 | + sideVideoData = '', //边栏视频数据 | ||
| 32 | + sideVideoHtml = '', //边栏视频渲染的html | ||
| 33 | + sidePostTpl = '', //边栏relatedpost模板 | ||
| 34 | + sidePostData = '', //边栏relatedpost数据 | ||
| 35 | + sidePostHtml = ''; //边栏relatedpost渲染的html | ||
| 26 | 36 | ||
| 37 | + //related-post截行相关变量 | ||
| 38 | + var relatedPost = '', | ||
| 39 | + postList = '', //post列表 | ||
| 40 | + totalLineNum = '', //总行数 | ||
| 41 | + titleLineNum = '', //title行数 | ||
| 42 | + subTitleLineNum = ''; //subtitle行数 | ||
| 43 | + | ||
| 44 | + //滑出边栏小视频side-video播放区域暂停相关变量 | ||
| 45 | + var relatedPostsOffsetTop = '', | ||
| 46 | + relatedPostsTop = '', | ||
| 47 | + relatedPostsMarginLeft = ''; | ||
| 48 | + | ||
| 49 | + //页面滑动热播位置变化相关变量 | ||
| 50 | + var detailBodyOffsetTop = '', | ||
| 51 | + relatedPostsOffsetHeightTop = '', | ||
| 52 | + distance = '', | ||
| 53 | + eleTop = '', | ||
| 54 | + detailBodyHeight = ''; | ||
| 55 | + | ||
| 56 | + | ||
| 57 | + //初始化截行插件 | ||
| 58 | + mulLine.init(); | ||
| 27 | //分享 | 59 | //分享 |
| 28 | share.init({ | 60 | share.init({ |
| 29 | shareUrl: shareUrl, | 61 | shareUrl: shareUrl, |
| @@ -114,167 +146,211 @@ exports.init = function() { | @@ -114,167 +146,211 @@ exports.init = function() { | ||
| 114 | type: 'GET', | 146 | type: 'GET', |
| 115 | url: YohoConfig.mainUrl + '/channel/detail/getright', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc, | 147 | url: YohoConfig.mainUrl + '/channel/detail/getright', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc, |
| 116 | success: function(response) { | 148 | success: function(response) { |
| 117 | - console.log(response); | ||
| 118 | - var data = response.data; | ||
| 119 | - | ||
| 120 | - var sidePost = data.mosts, | ||
| 121 | - video = data.video, | ||
| 122 | - banner = data.banners; | ||
| 123 | - | 149 | + data = response.data; |
| 124 | //广告 | 150 | //广告 |
| 125 | - var adItem = ''; | ||
| 126 | - for (var i = 0; i < banner.length; i++) { | ||
| 127 | - adItem += '<a href="' + banner[i].link + '" target="_blank"><img src="' + banner[i].img + '" alt="" /></a>' | 151 | + for (i = 0; i < data.banners.length; i++) { |
| 152 | + adItem += '<a href="' + data.banners[i].link + '" target="_blank"><img src="' + data.banners[i].img + '" alt="" /></a>' | ||
| 128 | } | 153 | } |
| 129 | $(".detail-ad").html(adItem); | 154 | $(".detail-ad").html(adItem); |
| 155 | + | ||
| 130 | //没有广告去掉margin | 156 | //没有广告去掉margin |
| 131 | - if (banner.length == 0) { | 157 | + if (data.banners.length == 0) { |
| 132 | $(".detail-side .app-download").css("margin", 0); | 158 | $(".detail-side .app-download").css("margin", 0); |
| 133 | } | 159 | } |
| 160 | + | ||
| 134 | //视频 | 161 | //视频 |
| 135 | - if (video.length != 0) { | ||
| 136 | - var $flash = $('<object width="100%" id="newestvideo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">\n\ | ||
| 137 | - <param name="movie" value="' + YohoConfig.resUrl + '/res/new/boys/swf/util/VideoPlayerSmall.swf?url=' + video.video + '&language=' + video.language + '&title1=【Yoho!Boys】' + video.title + '\r\n' + video.subtitle + '&shareurl=' + video.link + '&sharepic=' + video.cover + '&coverpic=' + video.cover + '">\n\ | ||
| 138 | - <param name="quality" value="high">\n\ | ||
| 139 | - <param name="bgcolor" value="#ffffff">\n\ | ||
| 140 | - <param value="true" name="allowFullScreen">\n\ | ||
| 141 | - <param name="allowScriptAccess" value="always">\n\ | ||
| 142 | - <param name="wmode" value="transparent">\n\ | ||
| 143 | - <embed align="middle" width="100%" src="' + YohoConfig.resUrl + '/res/new/boys/swf/util/VideoPlayerSmall.swf?url=' + video.video + '&language=' + video.language + '&title1=【Yoho!Boys】' + video.title + '\r\n' + video.subtitle + '&shareurl=' + video.link + '&shareurl=' + video.link + '&sharepic=' + video.cover + '&coverpic=' + video.cover + '" name="vMessage" wmode="transparent" quality="high" bgcolor="#ffffff" play="true" loop="false" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="flash">\n\ | ||
| 144 | - </object>'); | ||
| 145 | - var $ipadVideo = $('<video id="side-video-ipad" style="display:none;" controls="controls" preload="auto" poster="' + video.cover + '"><source src="' + video.video + '" type="video/mp4"></video>'); | ||
| 146 | - $(".side-video").find("img").hide(); | ||
| 147 | - $(".side-video").find("h3").text(video.title); | ||
| 148 | - $(".side-video").find("p").text(video.subtitle); | ||
| 149 | - $(".side-video").find("a").attr("href", video.link); | ||
| 150 | - $(".video-area").append($flash); | ||
| 151 | - $(".video-area").append($ipadVideo); | ||
| 152 | - $(".side-video").show(); | ||
| 153 | - | ||
| 154 | - if (navigator.userAgent.indexOf("iPad") !== -1) { | ||
| 155 | - // 封面视频播放器替换为H5的VIDEO标签 | ||
| 156 | - if (!!$(".video-area").find("object").size()) { | ||
| 157 | - $(".video-area").find("object").hide(); | ||
| 158 | - $("#side-video-ipad").show(); | ||
| 159 | - } | ||
| 160 | - } | 162 | + sideVideoTpl = $('#side-video-tpl').html(); |
| 163 | + sideVideoData = { | ||
| 164 | + video: data.video | ||
| 161 | } | 165 | } |
| 162 | 166 | ||
| 163 | - //热播 | ||
| 164 | - if (sidePost.length > 0) { | ||
| 165 | - var sidePostItem = ''; | ||
| 166 | - for (var i = 0; i < sidePost.length; i++) { | ||
| 167 | - if (sidePost[i].isVideo) { | ||
| 168 | - sidePostItem = '<li>' + | ||
| 169 | - '<a class="clearfix" href="' + sidePost[i].link + '" onclick="hotClickEvent();">' + | ||
| 170 | - '<div class="pic"><img src="' + sidePost[i].coverImage + '" alt="" /><span class="play-icon"></span></div>' + | ||
| 171 | - '<div class="post-title"><h4>' + sidePost[i].title + '</h4><p>' + sidePost[i].subtitle + '</p></div>' + | ||
| 172 | - '</a>' + | ||
| 173 | - '</li>'; | ||
| 174 | - } else { | ||
| 175 | - sidePostItem = '<li>' + | ||
| 176 | - '<a class="clearfix" href="' + sidePost[i].link + '" onclick="hotClickEvent();">' + | ||
| 177 | - '<div class="pic"><img src="' + sidePost[i].coverImage + '" alt="" /></div>' + | ||
| 178 | - '<div class="post-title"><h4>' + sidePost[i].title + '</h4><p>' + sidePost[i].subtitle + '</p></div>' + | ||
| 179 | - '</a>' + | ||
| 180 | - '</li>'; | ||
| 181 | - } | ||
| 182 | - $(".side-postslist").append($(sidePostItem)); | ||
| 183 | - } | ||
| 184 | - $(".side-related-posts").show(); | 167 | + sideVideoHtml = mustache.render(sideVideoTpl, sideVideoData); |
| 185 | 168 | ||
| 186 | - //热播根据行数截取字符 | ||
| 187 | - var citems = $(".side-related-posts li"); | ||
| 188 | - var totalLineNum = 3; | ||
| 189 | - if (citems.length > 0) { | ||
| 190 | - citems.each(function(index, obj) { | ||
| 191 | - var self = $(obj); | ||
| 192 | - var titleLineNum = self.find("h4").getTextLineNumber("title"); | ||
| 193 | - var subTitleLineNum = self.find("p").getTextLineNumber("subtitle"); | ||
| 194 | - if (titleLineNum > 2) { | ||
| 195 | - self.find("h4").mlellipsis(2); | ||
| 196 | - titleLineNum = 2; | ||
| 197 | - } | ||
| 198 | - if (subTitleLineNum > totalLineNum - titleLineNum) { | ||
| 199 | - self.find("p").mlellipsis(totalLineNum - titleLineNum, "detail"); | ||
| 200 | - } | 169 | + $('.detail-side').append($(sideVideoHtml)); |
| 170 | + if (navigator.userAgent.indexOf('iPad') !== -1) { | ||
| 171 | + // 封面视频播放器替换为H5的VIDEO标签 | ||
| 172 | + if (!!$('.video-area').find('object').size()) { | ||
| 173 | + $('.video-area').find('object').hide(); | ||
| 174 | + $('.side-video').find('video').show(); | ||
| 175 | + } | ||
| 176 | + } | ||
| 201 | 177 | ||
| 202 | - }); | 178 | + //边栏related-post |
| 179 | + sidePostTpl = $('#side-related-posts').html(); | ||
| 180 | + sidePostData = { | ||
| 181 | + relatedPost: { | ||
| 182 | + postList: data.mosts | ||
| 203 | } | 183 | } |
| 204 | } | 184 | } |
| 185 | + sidePostHtml = mustache.render(sidePostTpl, sidePostData); | ||
| 186 | + $('.detail-side').append($(sidePostHtml)); | ||
| 187 | + | ||
| 188 | + //边栏related-post根据行数截取字符 | ||
| 189 | + relatedPost = relatedPost; | ||
| 190 | + postList = relatedPost.find("li"); | ||
| 191 | + if (postList.length > 0) { | ||
| 192 | + totalLineNum = 3; | ||
| 193 | + postList.each(function(index, obj) { | ||
| 194 | + titleLineNum = $(obj).find('h3').getTextLineNumber('title'); | ||
| 195 | + subTitleLineNum = $(obj).find('p').getTextLineNumber('subtitle'); | ||
| 196 | + if (titleLineNum > 2) { | ||
| 197 | + $(obj).find('h3').mlellipsis(2); | ||
| 198 | + titleLineNum = 2; | ||
| 199 | + } | ||
| 200 | + if (subTitleLineNum > totalLineNum - titleLineNum) { | ||
| 201 | + $(obj).find('p').mlellipsis(totalLineNum - titleLineNum, 'detail'); | ||
| 202 | + } | ||
| 203 | + }); | ||
| 204 | + } | ||
| 205 | 205 | ||
| 206 | //滑出小视频播放区域暂停小视频 | 206 | //滑出小视频播放区域暂停小视频 |
| 207 | - var relatedPostsOffsetTop = $(".side-related-posts").offset().top - $("#minEnterprise").outerHeight(), | ||
| 208 | - relatedPostsTop = $("#minEnterprise").outerHeight(), | ||
| 209 | - relatedPostsMarginLeft = $(".detail-container").width() / 2 - $(".side-related-posts").outerWidth(); | ||
| 210 | $(window).resize(function() { | 207 | $(window).resize(function() { |
| 211 | - relatedPostsOffsetTop = $(".side-related-posts").offset().top - $("#minEnterprise").outerHeight(), | ||
| 212 | - relatedPostsTop = $("#minEnterprise").outerHeight(), | ||
| 213 | - relatedPostsMarginLeft = $(".detail-container").width() / 2 - $(".side-related-posts").outerWidth(); | ||
| 214 | - }); | ||
| 215 | - $(window).bind("scroll", function() { | 208 | + relatedPostsOffsetTop = relatedPost.offset().top - $('#minEnterprise').outerHeight(); |
| 209 | + relatedPostsTop = $('#minEnterprise').outerHeight(); | ||
| 210 | + relatedPostsMarginLeft = $('.detail-container').width() / 2 - relatedPost.outerWidth(); | ||
| 211 | + }).resize(); | ||
| 212 | + $(window).bind('scroll', function() { | ||
| 216 | function thisMovie(movieName) { | 213 | function thisMovie(movieName) { |
| 217 | - if (navigator.appName.indexOf("Microsoft") != -1) { | 214 | + if (navigator.appName.indexOf('Microsoft') != -1) { |
| 218 | return window[movieName]; | 215 | return window[movieName]; |
| 219 | } else { | 216 | } else { |
| 220 | return document[movieName]; | 217 | return document[movieName]; |
| 221 | } | 218 | } |
| 222 | } | 219 | } |
| 223 | - if ($(".side-video").size() > 0) { | ||
| 224 | - if ($(window).scrollTop() >= $(".side-video").offset().top || $(window).scrollTop() < $(".side-video").offset().top - $(window).height()) { | 220 | + if ($('.side-video').size() > 0) { |
| 221 | + if ($(window).scrollTop() >= $('.side-video').offset().top || $(window).scrollTop() < $('.side-video').offset().top - $(window).height()) { | ||
| 225 | 222 | ||
| 226 | try { | 223 | try { |
| 227 | - if (navigator.appName.indexOf("Microsoft") != -1) { | ||
| 228 | - //$(".detail-right-video").find("object").get(0).StopMovie(); | ||
| 229 | - | ||
| 230 | - thisMovie("newestvideo").StopMovie(); | ||
| 231 | - } else if (navigator.userAgent.indexOf("iPad") !== -1) { | ||
| 232 | - var videoId = document.getElementById("side-video-ipad"); | 224 | + if (navigator.appName.indexOf('Microsoft') != -1) { |
| 225 | + thisMovie('newestvideo').StopMovie(); | ||
| 226 | + } else if (navigator.userAgent.indexOf('iPad') !== -1) { | ||
| 227 | + var videoId = document.getElementById('side-video-ipad'); | ||
| 233 | videoId.pause(); | 228 | videoId.pause(); |
| 234 | } else { | 229 | } else { |
| 235 | - $(".side-video").find("embed").get(0).StopMovie(); | 230 | + $('.side-video').find('embed').get(0).StopMovie(); |
| 236 | } | 231 | } |
| 237 | 232 | ||
| 238 | } catch (e) {} | 233 | } catch (e) {} |
| 239 | } | 234 | } |
| 240 | } | 235 | } |
| 241 | 236 | ||
| 242 | - if ($(window).scrollTop() >= relatedPostsOffsetTop && $(".side-related-posts").css("display") != "none") { | ||
| 243 | - if (navigator.userAgent.indexOf("iPad") !== -1) return; | 237 | + if ($(window).scrollTop() >= relatedPostsOffsetTop && relatedPost.css('display') !== 'none') { |
| 238 | + if (navigator.userAgent.indexOf('iPad') !== -1) return; | ||
| 244 | //right_tab_toped=true; | 239 | //right_tab_toped=true; |
| 245 | - $(".side-related-posts").css({ | ||
| 246 | - "position": "fixed", | ||
| 247 | - "left": "50%", | ||
| 248 | - "margin-left": relatedPostsMarginLeft, | ||
| 249 | - "top": relatedPostsTop | 240 | + relatedPost.css({ |
| 241 | + 'position': 'fixed', | ||
| 242 | + 'left': '50%', | ||
| 243 | + 'margin-left': relatedPostsMarginLeft, | ||
| 244 | + 'top': relatedPostsTop | ||
| 250 | }); | 245 | }); |
| 251 | 246 | ||
| 252 | //热播位置 | 247 | //热播位置 |
| 253 | - var detailBodyOffsetTop = $(".detail-body").offset().top; | ||
| 254 | - var relatedPostsOffsetHeightTop, distance, eleTop; | ||
| 255 | - var height = $(".detail-body").outerHeight(); | ||
| 256 | - relatedPostsOffsetHeightTop = $('.side-related-posts').offset().top + $('.side-related-posts').outerHeight(); | ||
| 257 | - distance = height + detailBodyOffsetTop; | ||
| 258 | - eleTop = distance - $('.side-related-posts').outerHeight(); | 248 | + detailBodyOffsetTop = $('.detail-body').offset().top; |
| 249 | + detailBodyHeight = $('.detail-body').outerHeight(); | ||
| 250 | + relatedPostsOffsetHeightTop = relatedPost.offset().top + relatedPost.outerHeight(); | ||
| 251 | + distance = detailBodyHeight + detailBodyOffsetTop; | ||
| 252 | + eleTop = distance - relatedPost.outerHeight(); | ||
| 259 | if (relatedPostsOffsetHeightTop >= distance) { | 253 | if (relatedPostsOffsetHeightTop >= distance) { |
| 260 | - $('.side-related-posts').css({ | ||
| 261 | - "position": "absolute", | ||
| 262 | - "top": eleTop - relatedPostsTop | 254 | + relatedPost.css({ |
| 255 | + 'position': 'absolute', | ||
| 256 | + 'top': eleTop - relatedPostsTop | ||
| 263 | }); | 257 | }); |
| 264 | } | 258 | } |
| 265 | - if ($('.side-related-posts').offset().top - $(window).scrollTop() > relatedPostsTop) { | ||
| 266 | - $('.side-related-posts').css({ | ||
| 267 | - "position": "fixed", | ||
| 268 | - "top": relatedPostsTop | 259 | + if (relatedPost.offset().top - $(window).scrollTop() > relatedPostsTop) { |
| 260 | + relatedPost.css({ | ||
| 261 | + 'position': 'fixed', | ||
| 262 | + 'top': relatedPostsTop | ||
| 269 | }); | 263 | }); |
| 270 | } | 264 | } |
| 271 | - } else if ($(window).scrollTop() < relatedPostsOffsetTop && $(".side-related-posts").css("display") != "none") { | 265 | + } else if ($(window).scrollTop() < relatedPostsOffsetTop && relatedPost.css('display') !== 'none') { |
| 272 | //right_tab_toped=false; | 266 | //right_tab_toped=false; |
| 273 | - $(".side-related-posts").removeAttr("style").show(); | 267 | + relatedPost.removeAttr('style').show(); |
| 274 | } | 268 | } |
| 275 | 269 | ||
| 276 | 270 | ||
| 277 | }); | 271 | }); |
| 278 | } | 272 | } |
| 279 | }); | 273 | }); |
| 274 | + | ||
| 275 | + //底部数据的获取 | ||
| 276 | + $.ajax({ | ||
| 277 | + type: 'GET', | ||
| 278 | + url: YohoConfig.mainUrl + '/channel/detail/getbottom', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc, | ||
| 279 | + success: function(response) { | ||
| 280 | + data = response.data; | ||
| 281 | + | ||
| 282 | + var relatedPost = data.related, | ||
| 283 | + prevnext = data.prevnext, | ||
| 284 | + attitude = data.attitude, | ||
| 285 | + commentnum = data.commentnum; | ||
| 286 | + | ||
| 287 | + //新品播报 | ||
| 288 | + var relatedPostItem = ''; | ||
| 289 | + for (var i = 0; i < relatedPost.length; i++) { | ||
| 290 | + if (relatedPost[i].isVideo == true) { | ||
| 291 | + relatedPostItem = '<li>' + | ||
| 292 | + '<a href="' + relatedPost[i].link + '" target="_blank" onclick="relatedClickEvent();">' + | ||
| 293 | + '<div class="pic"><img src="' + relatedPost[i].cover + '" alt="" /><span class="play-icon"></span></div>' + | ||
| 294 | + '<div class="post-title"><h4>' + relatedPost[i].title + '</h4><p>' + relatedPost[i].subtitle + '</p></div>' + | ||
| 295 | + '</a>' + | ||
| 296 | + '</li>'; | ||
| 297 | + } else { | ||
| 298 | + relatedPostItem = '<li>' + | ||
| 299 | + '<a href="' + relatedPost[i].link + '" target="_blank">' + | ||
| 300 | + '<div class="pic"><img src="' + relatedPost[i].cover + '" alt="" /></div>' + | ||
| 301 | + '<div class="post-title"><h4>' + relatedPost[i].title + '</h4><p>' + relatedPost[i].subtitle + '</p></div>' + | ||
| 302 | + '</a>' + | ||
| 303 | + '</li>'; | ||
| 304 | + } | ||
| 305 | + $(".postslist").append(relatedPostItem); | ||
| 306 | + | ||
| 307 | + //新品播报根据行数截取字符 | ||
| 308 | + var citems = $(".related-posts li"); | ||
| 309 | + var totalLineNum = 3; | ||
| 310 | + if (citems.length > 0) { | ||
| 311 | + citems.each(function(index, obj) { | ||
| 312 | + var self = $(obj); | ||
| 313 | + var titleLineNum = self.find("h4").getTextLineNumber("title"); | ||
| 314 | + var subTitleLineNum = self.find("p").getTextLineNumber("subtitle"); | ||
| 315 | + if (titleLineNum > 2) { | ||
| 316 | + self.find("h4").mlellipsis(2); | ||
| 317 | + titleLineNum = 2; | ||
| 318 | + } | ||
| 319 | + if (subTitleLineNum > totalLineNum - titleLineNum) { | ||
| 320 | + self.find("p").mlellipsis(totalLineNum - titleLineNum, "detail"); | ||
| 321 | + } | ||
| 322 | + | ||
| 323 | + }); | ||
| 324 | + } | ||
| 325 | + }; | ||
| 326 | + | ||
| 327 | + //上一篇下一篇 | ||
| 328 | + if (prevnext.prev.title) { | ||
| 329 | + $(".news-next-prev .prev").show(); | ||
| 330 | + $(".news-next-prev .prev").find("a").attr("href", prevnext.prev.link).attr("title", prevnext.prev.title).attr("onclick", "prevOrNextClickEvent();"); | ||
| 331 | + } | ||
| 332 | + if (prevnext.next.title) { | ||
| 333 | + $(".news-next-prev .next").show(); | ||
| 334 | + $(".news-next-prev .next").find("a").attr("href", prevnext.next.link).attr("title", prevnext.next.title).attr("onclick", "prevOrNextClickEvent();"); | ||
| 335 | + } | ||
| 336 | + | ||
| 337 | + //态度 | ||
| 338 | + if (attitude.userWow > 0) { | ||
| 339 | + $(".stats-btn .wow").addClass("current"); | ||
| 340 | + }; | ||
| 341 | + if (attitude.userWtf > 0) { | ||
| 342 | + $(".stats-btn .wtf").addClass("current"); | ||
| 343 | + }; | ||
| 344 | + if (attitude.userZzz > 0) { | ||
| 345 | + $(".stats-btn .zzz").addClass("current"); | ||
| 346 | + }; | ||
| 347 | + setattitude(attitude.wowCount, attitude.zzzCount, attitude.wtfCount); | ||
| 348 | + | ||
| 349 | + if (commentnum > 0) { | ||
| 350 | + $(".comment-num").text(commentnum); | ||
| 351 | + } else { | ||
| 352 | + $(".comment-num").html('<img src="' + YohoConfig.resUrl + '/res/new/boys/images/mobile/comment-mobile.png">'); | ||
| 353 | + } | ||
| 354 | + } | ||
| 355 | + }); | ||
| 280 | } | 356 | } |
| @@ -9,8 +9,8 @@ var $ = require('jquery'), | @@ -9,8 +9,8 @@ var $ = require('jquery'), | ||
| 9 | swiper = require('yoho-idangerous.swiper'); | 9 | swiper = require('yoho-idangerous.swiper'); |
| 10 | 10 | ||
| 11 | require('lazyload'); | 11 | require('lazyload'); |
| 12 | -require('../plugin/imgslider'); | ||
| 13 | -require('../plugin/imgzoom'); | 12 | +require('../plugin/imgSlider'); |
| 13 | +require('../plugin/imgZoom'); | ||
| 14 | 14 | ||
| 15 | exports.init = function() { | 15 | exports.init = function() { |
| 16 | var shareUrl = $('.share').attr('data-link'), | 16 | var shareUrl = $('.share').attr('data-link'), |
| @@ -2,137 +2,137 @@ | @@ -2,137 +2,137 @@ | ||
| 2 | * 评论及登录插件 | 2 | * 评论及登录插件 |
| 3 | * author:liuyue | 3 | * author:liuyue |
| 4 | * date:2015-01-07 | 4 | * date:2015-01-07 |
| 5 | -*/ | 5 | + */ |
| 6 | var $ = require("jquery"), | 6 | var $ = require("jquery"), |
| 7 | - validate = require("./validate"), | ||
| 8 | - box = require("./box"), | ||
| 9 | - tools = require("yoho-tools"), | ||
| 10 | - tips = require("./tips"); | ||
| 11 | - mustache = require("mustache"); | 7 | + validate = require("./validate"), |
| 8 | + box = require("./box"), | ||
| 9 | + tools = require("yoho-tools"), | ||
| 10 | + tips = require("./tips"); | ||
| 11 | +mustache = require("mustache"); | ||
| 12 | require("./login"); | 12 | require("./login"); |
| 13 | 13 | ||
| 14 | (function(global, undefined) { | 14 | (function(global, undefined) { |
| 15 | 15 | ||
| 16 | - var Comment = function(element, options) { | ||
| 17 | - this.options = options; | ||
| 18 | - this.$element = $(element); | ||
| 19 | - //this.$loginBox = $(this.options.loginbox).appendTo("body"); | ||
| 20 | - this.init(); | ||
| 21 | - }; | ||
| 22 | - | ||
| 23 | - | ||
| 24 | - Comment.DEFAULTS = { | ||
| 25 | - cid: '', | ||
| 26 | - commentPageUrl: '/writer/default/comment', | ||
| 27 | - publishUrl: '/writer/default/publish', | ||
| 28 | - deleteUrl: '/writer/default/delete', | ||
| 29 | - commentNum: $(".comment-num"), | ||
| 30 | - commentItemTpl: '<li class="clearfix">'+ | ||
| 31 | - '<div class="userimg">'+ | ||
| 32 | - '<img src="\{{userimg}}" alt="">'+ | ||
| 33 | - '<i class="\{{partnerType}}"></i>'+ | ||
| 34 | - '</div>'+ | ||
| 35 | - '<div class="userinfo">'+ | ||
| 36 | - '<h6>\{{username}}</h6> '+ | ||
| 37 | - '<p class="comment-text">\{{content}}</p>'+ | ||
| 38 | - '\{{# isSelf}}'+ | ||
| 39 | - '<a class="delete-comment" href="javascript:;" pid="{{id}}"></a>'+ | ||
| 40 | - '\{{/ isSelf}} '+ | ||
| 41 | - '</div>'+ | ||
| 42 | - '</li>', | ||
| 43 | - thirdLogin: false, | ||
| 44 | - isEdit: false, | ||
| 45 | - isMobile: false, | ||
| 46 | - login: '' | ||
| 47 | - }; | ||
| 48 | - | ||
| 49 | - | ||
| 50 | - Comment.prototype = { | ||
| 51 | - constructor: Comment, | ||
| 52 | - | ||
| 53 | - init:function() { | ||
| 54 | - // 组件的创建主函数。 | ||
| 55 | - this._creat(); | ||
| 56 | - }, | ||
| 57 | - | ||
| 58 | - // 主函数，主要是创建节点，绑定事件。 | ||
| 59 | - _creat: function() { | ||
| 60 | - if ($(".comments-list").size() > 0 || $(".comment-textarea").size() > 0) return; | ||
| 61 | - // 创建节点 | ||
| 62 | - this._creatCommentDom(); | ||
| 63 | - | ||
| 64 | - this._creatThirdLogin(); | ||
| 65 | - | ||
| 66 | - // 绑定事件 | ||
| 67 | - this._bindEvent(); | ||
| 68 | - }, | ||
| 69 | - | ||
| 70 | - _creatCommentDom:function() { | ||
| 71 | - var that = this; | ||
| 72 | - //var id = {id:this.options.cid}; | ||
| 73 | - $.ajax({ | ||
| 74 | - type:'GET', | ||
| 75 | - url:YohoConfig.mainUrl + this.options.commentPageUrl, | 16 | + var Comment = function(element, options) { |
| 17 | + this.options = options; | ||
| 18 | + this.$element = $(element); | ||
| 19 | + //this.$loginBox = $(this.options.loginbox).appendTo("body"); | ||
| 20 | + this.init(); | ||
| 21 | + }; | ||
| 22 | + | ||
| 23 | + | ||
| 24 | + Comment.DEFAULTS = { | ||
| 25 | + cid: '', | ||
| 26 | + commentPageUrl: '/writer/default/comment', | ||
| 27 | + publishUrl: '/writer/default/publish', | ||
| 28 | + deleteUrl: '/writer/default/delete', | ||
| 29 | + commentNum: $(".comment-num"), | ||
| 30 | + commentItemTpl: '<li class="clearfix">' + | ||
| 31 | + '<div class="userimg">' + | ||
| 32 | + '<img src="\{{userimg}}" alt="">' + | ||
| 33 | + '<i class="\{{partnerType}}"></i>' + | ||
| 34 | + '</div>' + | ||
| 35 | + '<div class="userinfo">' + | ||
| 36 | + '<h6>\{{username}}</h6> ' + | ||
| 37 | + '<p class="comment-text">\{{content}}</p>' + | ||
| 38 | + '\{{# isSelf}}' + | ||
| 39 | + '<a class="delete-comment" href="javascript:;" pid="{{id}}"></a>' + | ||
| 40 | + '\{{/ isSelf}} ' + | ||
| 41 | + '</div>' + | ||
| 42 | + '</li>', | ||
| 43 | + thirdLogin: false, | ||
| 44 | + isEdit: false, | ||
| 45 | + isMobile: false, | ||
| 46 | + login: '' | ||
| 47 | + }; | ||
| 48 | + | ||
| 49 | + | ||
| 50 | + Comment.prototype = { | ||
| 51 | + constructor: Comment, | ||
| 52 | + | ||
| 53 | + init: function() { | ||
| 54 | + // 组件的创建主函数。 | ||
| 55 | + this._creat(); | ||
| 56 | + }, | ||
| 57 | + | ||
| 58 | + // 主函数，主要是创建节点，绑定事件。 | ||
| 59 | + _creat: function() { | ||
| 60 | + if ($(".comments-list").size() > 0 || $(".comment-textarea").size() > 0) return; | ||
| 61 | + // 创建节点 | ||
| 62 | + this._creatCommentDom(); | ||
| 63 | + | ||
| 64 | + this._creatThirdLogin(); | ||
| 65 | + | ||
| 66 | + // 绑定事件 | ||
| 67 | + this._bindEvent(); | ||
| 68 | + }, | ||
| 69 | + | ||
| 70 | + _creatCommentDom: function() { | ||
| 71 | + var that = this; | ||
| 72 | + //var id = {id:this.options.cid}; | ||
| 73 | + $.ajax({ | ||
| 74 | + type: 'GET', | ||
| 75 | + url: YohoConfig.mainUrl + this.options.commentPageUrl, | ||
| 76 | /*data: id, | 76 | /*data: id, |
| 77 | dataType:'json',*/ | 77 | dataType:'json',*/ |
| 78 | - success:function(response) { | ||
| 79 | - var data = response.data, //返回数据的data | ||
| 80 | - viewMoreNum = data.total - 5, //评论总数-5，除显示评论剩下的评论数量 | ||
| 81 | - moreString = viewMoreNum + '', //剩余评论数量转为字符串 | ||
| 82 | - moreFirstnum = moreString.slice(0,1), //评论数量的首数字 | ||
| 83 | - commentTpl = $('#comment-tpl').html(), //引入评论html模板 | ||
| 84 | - commentPage, //分页数据 | ||
| 85 | - commentHtml, //用数据渲染后的html | ||
| 86 | - commentData; //评论数据 | ||
| 87 | - | ||
| 88 | - | ||
| 89 | - if(data.length === 0) return; | ||
| 90 | - | ||
| 91 | - commentData = { | ||
| 92 | - comment: data.comment | ||
| 93 | - }; | ||
| 94 | - | ||
| 95 | - //评论多于五条，渲染more节点 | ||
| 96 | - if (viewMoreNum > 0) { | ||
| 97 | - commentData = { | ||
| 98 | - comment: data.comment, | ||
| 99 | - more: { | ||
| 100 | - moreNum : viewMoreNum | ||
| 101 | - } | ||
| 102 | - } | ||
| 103 | - } | ||
| 104 | - | ||
| 105 | - //如果分页数据不为空和undefined，渲染分页 | ||
| 106 | - if ($.trim(data.page) !== '' || typeof(data.page) === 'undefined' || !!data.page) { | 78 | + success: function(response) { |
| 79 | + var data = response.data, //返回数据的data | ||
| 80 | + viewMoreNum = data.total - 5, //评论总数-5，除显示评论剩下的评论数量 | ||
| 81 | + moreString = viewMoreNum + '', //剩余评论数量转为字符串 | ||
| 82 | + moreFirstnum = moreString.slice(0, 1), //评论数量的首数字 | ||
| 83 | + commentTpl = $('#comment-tpl').html(), //引入评论html模板 | ||
| 84 | + commentPage, //分页数据 | ||
| 85 | + commentHtml, //用数据渲染后的html | ||
| 86 | + commentData; //评论数据 | ||
| 87 | + | ||
| 88 | + | ||
| 89 | + if (data.length === 0) return; | ||
| 90 | + | ||
| 91 | + commentData = { | ||
| 92 | + comment: data.comment | ||
| 93 | + }; | ||
| 94 | + | ||
| 95 | + //评论多于五条，渲染more节点 | ||
| 96 | + if (viewMoreNum > 0) { | ||
| 97 | + commentData = { | ||
| 98 | + comment: data.comment, | ||
| 99 | + more: { | ||
| 100 | + moreNum: viewMoreNum | ||
| 101 | + } | ||
| 102 | + } | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + //如果分页数据不为空和undefined，渲染分页 | ||
| 106 | + if ($.trim(data.page) !== '' || typeof(data.page) === 'undefined' || !!data.page) { | ||
| 107 | commentPage = data.page; | 107 | commentPage = data.page; |
| 108 | - commentData = { | ||
| 109 | - comment: data.comment, | ||
| 110 | - more: { | ||
| 111 | - moreNum : viewMoreNum | ||
| 112 | - }, | ||
| 113 | - page: commentPage | ||
| 114 | - } | ||
| 115 | - } | 108 | + commentData = { |
| 109 | + comment: data.comment, | ||
| 110 | + more: { | ||
| 111 | + moreNum: viewMoreNum | ||
| 112 | + }, | ||
| 113 | + page: commentPage | ||
| 114 | + } | ||
| 115 | + } | ||
| 116 | commentHtml = mustache.render(commentTpl, commentData, { | 116 | commentHtml = mustache.render(commentTpl, commentData, { |
| 117 | html: commentPage | 117 | html: commentPage |
| 118 | }); | 118 | }); |
| 119 | - that.$element.prepend($(commentHtml)); | ||
| 120 | - | ||
| 121 | - //5条后的评论隐藏 | ||
| 122 | - that.$element.find("li").eq(4).nextAll().hide(); //5条后的评论隐藏 | ||
| 123 | - //评论总数上千显示k+，上万显示w+ | ||
| 124 | - if (moreString.length === 4) { | ||
| 125 | - $(".view-more").find("span").text(moreFirstnum + 'k+'); | ||
| 126 | - } else if (moreString.length === 5) { | ||
| 127 | - $(".view-more").find("span").text(moreFirstnum + 'w+'); | ||
| 128 | - } | 119 | + that.$element.prepend($(commentHtml)); |
| 120 | + | ||
| 121 | + //5条后的评论隐藏 | ||
| 122 | + that.$element.find("li").eq(4).nextAll().hide(); //5条后的评论隐藏 | ||
| 123 | + //评论总数上千显示k+，上万显示w+ | ||
| 124 | + if (moreString.length === 4) { | ||
| 125 | + $(".view-more").find("span").text(moreFirstnum + 'k+'); | ||
| 126 | + } else if (moreString.length === 5) { | ||
| 127 | + $(".view-more").find("span").text(moreFirstnum + 'w+'); | ||
| 128 | + } | ||
| 129 | } | 129 | } |
| 130 | - }); | ||
| 131 | - }, | 130 | + }); |
| 131 | + }, | ||
| 132 | 132 | ||
| 133 | 133 | ||
| 134 | - //创建评论文本域 | ||
| 135 | - /*_creatTextareaDom:function(){ | 134 | + //创建评论文本域 |
| 135 | + /*_creatTextareaDom:function(){ | ||
| 136 | data = this.options.login; | 136 | data = this.options.login; |
| 137 | var textarea = $('<div class="comment-textarea"><textarea placeholder="'+tips.getTips("textareaPlaceholder")+'" cid='+this.options.cid+'></textarea></div>'), | 137 | var textarea = $('<div class="comment-textarea"><textarea placeholder="'+tips.getTips("textareaPlaceholder")+'" cid='+this.options.cid+'></textarea></div>'), |
| 138 | loginarea = $('<div class="login-status clearfix">\n\ | 138 | loginarea = $('<div class="login-status clearfix">\n\ |
| @@ -160,51 +160,51 @@ require("./login"); | @@ -160,51 +160,51 @@ require("./login"); | ||
| 160 | 160 | ||
| 161 | },*/ | 161 | },*/ |
| 162 | 162 | ||
| 163 | - //创建第三方登录 | ||
| 164 | - _creatThirdLogin:function(){ | ||
| 165 | - var thirdLoginTpl = $("#third-login-tpl").html(); | 163 | + //创建第三方登录 |
| 164 | + _creatThirdLogin: function() { | ||
| 165 | + var thirdLoginTpl = $("#third-login-tpl").html(); | ||
| 166 | + | ||
| 167 | + if (this.options.thirdLogin === true) { | ||
| 168 | + $(thirdLoginTpl).appendTo(this.$element); | ||
| 169 | + //this.$element.html(thirdLoginTpl); | ||
| 170 | + } | ||
| 171 | + }, | ||
| 172 | + | ||
| 173 | + //事件绑定 | ||
| 174 | + _bindEvent: function() { | ||
| 175 | + var that = this; | ||
| 176 | + //查看更多评论 | ||
| 177 | + this.$element.on("click.comment", ".view-more", function() { | ||
| 178 | + that.$element.find("li").show(); //显示第一页后五条 | ||
| 179 | + that.$element.find(".comment-pager-content").show(); //显示分页按钮 | ||
| 180 | + that.$element.find(".view-more").remove(); //移除view more | ||
| 181 | + }); | ||
| 166 | 182 | ||
| 167 | - if (this.options.thirdLogin === true) { | ||
| 168 | - $(thirdLoginTpl).appendTo(this.$element); | ||
| 169 | - //this.$element.html(thirdLoginTpl); | ||
| 170 | - } | ||
| 171 | - }, | ||
| 172 | - | ||
| 173 | - //事件绑定 | ||
| 174 | - _bindEvent: function(){ | ||
| 175 | - var that = this; | ||
| 176 | - //查看更多评论 | ||
| 177 | - this.$element.on("click.comment",".view-more",function() { | ||
| 178 | - that.$element.find("li").show(); //显示第一页后五条 | ||
| 179 | - that.$element.find(".comment-pager-content").show(); //显示分页按钮 | ||
| 180 | - that.$element.find(".view-more").remove(); //移除view more | ||
| 181 | - }); | ||
| 182 | - | ||
| 183 | - //弹出登录框 | ||
| 184 | - /*$(this).login(); | 183 | + //弹出登录框 |
| 184 | + /*$(this).login(); | ||
| 185 | this.$element.on("click.login",".publish-btn",function() { | 185 | this.$element.on("click.login",".publish-btn",function() { |
| 186 | if(that.options.isFeedback) return; | 186 | if(that.options.isFeedback) return; |
| 187 | $(this).login("loginBoxAnimate"); | 187 | $(this).login("loginBoxAnimate"); |
| 188 | });*/ | 188 | });*/ |
| 189 | 189 | ||
| 190 | - //显示删除按钮 | ||
| 191 | - if (this.options.isMobile) { | ||
| 192 | - this.$element.find(".delete-comment").show(); | ||
| 193 | - } else { | ||
| 194 | - this.$element.on("mouseenter","li",function() { | ||
| 195 | - $(this).find(".delete-comment").show(); | ||
| 196 | - }).on("mouseleave","li",function(){ | ||
| 197 | - $(this).find(".delete-comment").hide(); | ||
| 198 | - }); | ||
| 199 | - } | ||
| 200 | - | ||
| 201 | - | ||
| 202 | - //发表评论 | ||
| 203 | - this.$element.on("click.publish",".publish-btn",function() { | ||
| 204 | - var $textarea = that.$element.find("textarea"), | ||
| 205 | - nameInput = that.$element.find(".name-input"), | 190 | + //显示删除按钮 |
| 191 | + if (this.options.isMobile) { | ||
| 192 | + this.$element.find(".delete-comment").show(); | ||
| 193 | + } else { | ||
| 194 | + this.$element.on("mouseenter", "li", function() { | ||
| 195 | + $(this).find(".delete-comment").show(); | ||
| 196 | + }).on("mouseleave", "li", function() { | ||
| 197 | + $(this).find(".delete-comment").hide(); | ||
| 198 | + }); | ||
| 199 | + } | ||
| 200 | + | ||
| 201 | + | ||
| 202 | + //发表评论 | ||
| 203 | + this.$element.on("click.publish", ".publish-btn", function() { | ||
| 204 | + var $textarea = that.$element.find("textarea"), | ||
| 205 | + nameInput = that.$element.find(".name-input"), | ||
| 206 | emailInput = that.$element.find(".email-input"), | 206 | emailInput = that.$element.find(".email-input"), |
| 207 | - comment = $textarea.val(), | 207 | + comment = $textarea.val(), |
| 208 | cid, | 208 | cid, |
| 209 | data, | 209 | data, |
| 210 | commentsNum, | 210 | commentsNum, |
| @@ -216,7 +216,7 @@ require("./login"); | @@ -216,7 +216,7 @@ require("./login"); | ||
| 216 | if (!tools.IYOHO_isUserName(nameInput.val())) { | 216 | if (!tools.IYOHO_isUserName(nameInput.val())) { |
| 217 | box.alert(tips.getTips("commentUncompleted"), 5, function() { | 217 | box.alert(tips.getTips("commentUncompleted"), 5, function() { |
| 218 | nameInput.focus(); | 218 | nameInput.focus(); |
| 219 | - }); | 219 | + }); |
| 220 | return false; | 220 | return false; |
| 221 | }; | 221 | }; |
| 222 | 222 | ||
| @@ -224,7 +224,7 @@ require("./login"); | @@ -224,7 +224,7 @@ require("./login"); | ||
| 224 | if (emailInput.val() !== '' && !tools.IYOHO_isEmail(emailInput.val())) { | 224 | if (emailInput.val() !== '' && !tools.IYOHO_isEmail(emailInput.val())) { |
| 225 | box.alert(tips.getTips("commentUncompleted"), 5, function() { | 225 | box.alert(tips.getTips("commentUncompleted"), 5, function() { |
| 226 | emailInput.focus(); | 226 | emailInput.focus(); |
| 227 | - }); | 227 | + }); |
| 228 | return false; | 228 | return false; |
| 229 | }; | 229 | }; |
| 230 | 230 | ||
| @@ -232,61 +232,66 @@ require("./login"); | @@ -232,61 +232,66 @@ require("./login"); | ||
| 232 | if (typeof(comment) === 'undefined' || $.trim(comment) === '') { | 232 | if (typeof(comment) === 'undefined' || $.trim(comment) === '') { |
| 233 | box.alert(tips.getTips("commentUncompleted"), 5, function() { | 233 | box.alert(tips.getTips("commentUncompleted"), 5, function() { |
| 234 | $textarea.focus(); | 234 | $textarea.focus(); |
| 235 | - }); | 235 | + }); |
| 236 | return false; | 236 | return false; |
| 237 | }; | 237 | }; |
| 238 | 238 | ||
| 239 | - if (comment.length > 100) { | ||
| 240 | - box.alert(tips.getTips("commentToMuch"), 5); | ||
| 241 | - return false; | ||
| 242 | - }; | ||
| 243 | - | ||
| 244 | - cid = that.$element.attr('cid'); | ||
| 245 | - if (!cid) { | ||
| 246 | - return false; | ||
| 247 | - }; | 239 | + if (comment.length > 100) { |
| 240 | + box.alert(tips.getTips("commentToMuch"), 5); | ||
| 241 | + return false; | ||
| 242 | + }; | ||
| 248 | 243 | ||
| 249 | - data = {id:cid,comment:comment,sync:'222',title:'111'}; | 244 | + cid = that.$element.attr('cid'); |
| 245 | + if (!cid) { | ||
| 246 | + return false; | ||
| 247 | + }; | ||
| 250 | 248 | ||
| 251 | - $.ajax({ | ||
| 252 | - type: 'GET', | ||
| 253 | - url: YohoConfig.mainUrl + that.options.publishUrl, | ||
| 254 | - success: function(response) { | ||
| 255 | - if (response.code === '800000') { | ||
| 256 | - box.alert(tips.getTips("relogin"), 5); | ||
| 257 | - that.$element.login("setLogout"); | ||
| 258 | - return false; | ||
| 259 | - }; | 249 | + data = { |
| 250 | + id: cid, | ||
| 251 | + comment: comment, | ||
| 252 | + sync: '222', | ||
| 253 | + title: '111' | ||
| 254 | + }; | ||
| 260 | 255 | ||
| 261 | - if (response.status && response.data) { | ||
| 262 | - var $commentsList = $(".comments-list"); | ||
| 263 | - publishHtml = mustache.render(that.options.commentItemTpl, response.data); | 256 | + $.ajax({ |
| 257 | + type: 'GET', | ||
| 258 | + url: YohoConfig.mainUrl + that.options.publishUrl, | ||
| 259 | + success: function(response) { | ||
| 260 | + if (response.code === '800000') { | ||
| 261 | + box.alert(tips.getTips("relogin"), 5); | ||
| 262 | + that.$element.login("setLogout"); | ||
| 263 | + return false; | ||
| 264 | + }; | ||
| 264 | 265 | ||
| 265 | - if ($commentsList .find("li").size() === 0){ | ||
| 266 | - $commentsList.html(publishHtml); | 266 | + if (response.status && response.data) { |
| 267 | + var $commentsList = $(".comments-list"); | ||
| 268 | + publishHtml = mustache.render(that.options.commentItemTpl, response.data); | ||
| 269 | + | ||
| 270 | + if ($commentsList.find("li").size() === 0) { | ||
| 271 | + $commentsList.html(publishHtml); | ||
| 272 | + } else { | ||
| 273 | + $commentsList.find("li").eq(0).before(publishHtml); | ||
| 274 | + } | ||
| 275 | + | ||
| 276 | + box.alert(tips.getTips("publishSuccess"), 5); | ||
| 277 | + $(".comment-textarea textarea").val(''); | ||
| 278 | + | ||
| 279 | + commentsNum = 1; | ||
| 280 | + if (!!parseInt(that.options.commentNum.eq(0).text())) { | ||
| 281 | + commentsNum = parseInt(that.options.commentNum.eq(0).text()) + 1; | ||
| 282 | + }; | ||
| 283 | + that.options.commentNum.text(commentsNum); | ||
| 284 | + } else if (900000 === response.code) { | ||
| 285 | + box.alert(tips.getTips("notSameContent"), 5); | ||
| 267 | } else { | 286 | } else { |
| 268 | - $commentsList.find("li").eq(0).before(publishHtml); | 287 | + box.alert(tips.getTips("systemBus"), 5); |
| 269 | } | 288 | } |
| 270 | 289 | ||
| 271 | - box.alert(tips.getTips("publishSuccess"), 5); | ||
| 272 | - $(".comment-textarea textarea").val(''); | ||
| 273 | - | ||
| 274 | - commentsNum = 1; | ||
| 275 | - if(!!parseInt(that.options.commentNum.eq(0).text())){ | ||
| 276 | - commentsNum = parseInt(that.options.commentNum.eq(0).text())+1; | ||
| 277 | - }; | ||
| 278 | - that.options.commentNum.text(commentsNum); | ||
| 279 | - } else if (900000 === response.code) { | ||
| 280 | - box.alert(tips.getTips("notSameContent"), 5); | ||
| 281 | - } else { | ||
| 282 | - box.alert(tips.getTips("systemBus"), 5); | 290 | + publishHtml = mustache.render(that.options.commentItemTpl, response.data); |
| 291 | + that.$element.find(".comments-list").prepend(publishHtml); | ||
| 283 | } | 292 | } |
| 284 | - | ||
| 285 | - publishHtml = mustache.render(that.options.commentItemTpl, response.data); | ||
| 286 | - that.$element.find(".comments-list").prepend(publishHtml); | ||
| 287 | - } | ||
| 288 | - }) | ||
| 289 | - /*$.ajax({ | 293 | + }) |
| 294 | + /*$.ajax({ | ||
| 290 | type:'POST', | 295 | type:'POST', |
| 291 | url:YohoConfig.mainUrl + that.options.publishUrl, | 296 | url:YohoConfig.mainUrl + that.options.publishUrl, |
| 292 | data: data, | 297 | data: data, |
| @@ -351,109 +356,105 @@ require("./login"); | @@ -351,109 +356,105 @@ require("./login"); | ||
| 351 | } | 356 | } |
| 352 | } | 357 | } |
| 353 | }); */ | 358 | }); */ |
| 354 | - }); | 359 | + }); |
| 355 | 360 | ||
| 356 | //评论翻页 | 361 | //评论翻页 |
| 357 | - this.$element.on("click.commentPage",".pager-item",function(){ | ||
| 358 | - var url = $(this).attr("href"), | 362 | + this.$element.on("click.commentPage", ".pager-item", function() { |
| 363 | + var url = $(this).attr("href"), | ||
| 359 | pageHtml, | 364 | pageHtml, |
| 360 | pageIcon, | 365 | pageIcon, |
| 361 | commentListTop; | 366 | commentListTop; |
| 362 | - $.ajax({ | ||
| 363 | - type: 'GET', | 367 | + $.ajax({ |
| 368 | + type: 'GET', | ||
| 364 | url: url, | 369 | url: url, |
| 365 | success: function(response) { | 370 | success: function(response) { |
| 366 | - | ||
| 367 | - $(".comments-list").empty(); | ||
| 368 | - pageHtml = mustache.render(that.options.commentItemTpl, response.data.comment); | 371 | + |
| 372 | + $(".comments-list").empty(); | ||
| 373 | + pageHtml = mustache.render(that.options.commentItemTpl, response.data.comment); | ||
| 369 | $(".comments-list").html(pageHtml); | 374 | $(".comments-list").html(pageHtml); |
| 370 | 375 | ||
| 371 | - pageIcon = $('<div class="channel-index-pager">'+response.data.page+'</div>'); | ||
| 372 | - $(".comment-pager-content").html(pageIcon); | 376 | + pageIcon = $('<div class="channel-index-pager">' + response.data.page + '</div>'); |
| 377 | + $(".comment-pager-content").html(pageIcon); | ||
| 373 | 378 | ||
| 374 | - commentListTop = $(".comments-list").offset().top - $("#minEnterprise").outerHeight(); | ||
| 375 | - $(window).scrollTop(commentListTop); | 379 | + commentListTop = $(".comments-list").offset().top - $("#minEnterprise").outerHeight(); |
| 380 | + $(window).scrollTop(commentListTop); | ||
| 376 | } | 381 | } |
| 377 | - }); | ||
| 378 | - | ||
| 379 | - return false; | ||
| 380 | - }); | ||
| 381 | - | ||
| 382 | - | ||
| 383 | - | ||
| 384 | - //删除评论 | ||
| 385 | - this.$element.on("click.deleteComment",".delete-comment",function(){ | ||
| 386 | - var _this = $(this); | ||
| 387 | - var id = _this.attr('pid'); | ||
| 388 | - var deleteTip = tips.getTips("deleteComment"); | ||
| 389 | - if(that.options.isFeedback){ | ||
| 390 | - deleteTip = tips.getTips("deleteFeedback"); | ||
| 391 | - }else if(that.options.isEdit){ | ||
| 392 | - deleteTip = tips.getTips("deleteEdit"); | ||
| 393 | - } | ||
| 394 | - box.confirm(deleteTip, function() | ||
| 395 | - { | ||
| 396 | - $.ajax | ||
| 397 | - ({ | ||
| 398 | - type:'POST', | ||
| 399 | - url:YohoConfig.mainUrl+that.options.deleteUrl, | ||
| 400 | - data:'id='+id, | ||
| 401 | - dataType:'json', | ||
| 402 | - success:function(response) | ||
| 403 | - { | ||
| 404 | - if (response.status) | ||
| 405 | - { | ||
| 406 | - _this.parents("li").remove(); | ||
| 407 | - var comments = parseInt($(".comment-num").eq(0).text())-1; | ||
| 408 | - if(comments > 0){ | ||
| 409 | - that.options.commentNum.text(comments); | ||
| 410 | - }else{ | ||
| 411 | - that.options.commentNum.html('<img src="'+YohoConfig.resUrl+'boysweb/assets/images/mobile/comment-mobile.png">'); | ||
| 412 | - $(".comment-num.zero").text(0); | ||
| 413 | - $(".comment-num.edit-comment").text('留言'); | ||
| 414 | - } | ||
| 415 | - } | ||
| 416 | - } | ||
| 417 | - }); | ||
| 418 | - }); | ||
| 419 | - }); | 382 | + }); |
| 420 | 383 | ||
| 421 | - $(".third-login-box").on("click","a",function(){ | ||
| 422 | - var _this = $(this); | ||
| 423 | - if (!_this.attr('ref')) return; | ||
| 424 | - window.open(_this.attr('ref'), "","width=760,height=650,top=300,left=300"); | ||
| 425 | return false; | 384 | return false; |
| 426 | - }) | ||
| 427 | - $(".third-login-box").on("click","a.yoho",function(){ | ||
| 428 | - $(this).login("loginBoxAnimate"); | ||
| 429 | - }) | ||
| 430 | - }, | ||
| 431 | - | ||
| 432 | - publishComment:function(){ | ||
| 433 | - var textareaVal = $(".comment-textarea").find("textarea").val(); | ||
| 434 | - if (!!!textareaVal || $.trim(textareaVal) === '') return; | ||
| 435 | - if(this.options.isFeedback) return; | ||
| 436 | - $(".publish-btn").trigger("click.publish"); | ||
| 437 | - } | ||
| 438 | - | ||
| 439 | - }; | ||
| 440 | - | 385 | + }); |
| 441 | 386 | ||
| 442 | - function Plugin(option, _relatedTarget) { | ||
| 443 | - return this.each(function() { | ||
| 444 | - var $this = $(this); | ||
| 445 | - var data = $this.data('yoho.Comment'); | ||
| 446 | - var options = $.extend({}, Comment.DEFAULTS, $this.data(), typeof option == 'object' && option); | ||
| 447 | - // 如果没有初始化，则初始化该对象，并且把该对象绑定到此元素的yoho.PicSilder属性下。 | ||
| 448 | - if (!data) $this.data('yoho.Comment', (data = new Comment(this, options))); | ||
| 449 | 387 | ||
| 450 | - // 如果传递的options是一个字符串，则表示调用改对象的原型方法。 | ||
| 451 | - if (typeof option == 'string') data[option](_relatedTarget); | ||
| 452 | - }); | ||
| 453 | - }; | ||
| 454 | 388 | ||
| 389 | + //删除评论 | ||
| 390 | + this.$element.on("click.deleteComment", ".delete-comment", function() { | ||
| 391 | + var _this = $(this); | ||
| 392 | + var id = _this.attr('pid'); | ||
| 393 | + var deleteTip = tips.getTips("deleteComment"); | ||
| 394 | + if (that.options.isFeedback) { | ||
| 395 | + deleteTip = tips.getTips("deleteFeedback"); | ||
| 396 | + } else if (that.options.isEdit) { | ||
| 397 | + deleteTip = tips.getTips("deleteEdit"); | ||
| 398 | + } | ||
| 399 | + box.confirm(deleteTip, function() { | ||
| 400 | + $.ajax({ | ||
| 401 | + type: 'POST', | ||
| 402 | + url: YohoConfig.mainUrl + that.options.deleteUrl, | ||
| 403 | + data: 'id=' + id, | ||
| 404 | + dataType: 'json', | ||
| 405 | + success: function(response) { | ||
| 406 | + if (response.status) { | ||
| 407 | + _this.parents("li").remove(); | ||
| 408 | + var comments = parseInt($(".comment-num").eq(0).text()) - 1; | ||
| 409 | + if (comments > 0) { | ||
| 410 | + that.options.commentNum.text(comments); | ||
| 411 | + } else { | ||
| 412 | + that.options.commentNum.html('<img src="' + YohoConfig.resUrl + 'boysweb/assets/images/mobile/comment-mobile.png">'); | ||
| 413 | + $(".comment-num.zero").text(0); | ||
| 414 | + $(".comment-num.edit-comment").text('留言'); | ||
| 415 | + } | ||
| 416 | + } | ||
| 417 | + } | ||
| 418 | + }); | ||
| 419 | + }); | ||
| 420 | + }); | ||
| 455 | 421 | ||
| 456 | - $.fn.comment = Plugin; | ||
| 457 | - $.fn.comment.Constructor = Comment; | 422 | + $(".third-login-box").on("click", "a", function() { |
| 423 | + var _this = $(this); | ||
| 424 | + if (!_this.attr('ref')) return; | ||
| 425 | + window.open(_this.attr('ref'), "", "width=760,height=650,top=300,left=300"); | ||
| 426 | + return false; | ||
| 427 | + }) | ||
| 428 | + $(".third-login-box").on("click", "a.yoho", function() { | ||
| 429 | + $(this).login("loginBoxAnimate"); | ||
| 430 | + }) | ||
| 431 | + }, | ||
| 432 | + | ||
| 433 | + publishComment: function() { | ||
| 434 | + var textareaVal = $(".comment-textarea").find("textarea").val(); | ||
| 435 | + if (!!!textareaVal || $.trim(textareaVal) === '') return; | ||
| 436 | + if (this.options.isFeedback) return; | ||
| 437 | + $(".publish-btn").trigger("click.publish"); | ||
| 438 | + } | ||
| 439 | + | ||
| 440 | + }; | ||
| 441 | + | ||
| 442 | + | ||
| 443 | + function Plugin(option, _relatedTarget) { | ||
| 444 | + return this.each(function() { | ||
| 445 | + var $this = $(this); | ||
| 446 | + var data = $this.data('yoho.Comment'); | ||
| 447 | + var options = $.extend({}, Comment.DEFAULTS, $this.data(), typeof option == 'object' && option); | ||
| 448 | + // 如果没有初始化，则初始化该对象，并且把该对象绑定到此元素的yoho.PicSilder属性下。 | ||
| 449 | + if (!data) $this.data('yoho.Comment', (data = new Comment(this, options))); | ||
| 450 | + | ||
| 451 | + // 如果传递的options是一个字符串，则表示调用改对象的原型方法。 | ||
| 452 | + if (typeof option == 'string') data[option](_relatedTarget); | ||
| 453 | + }); | ||
| 454 | + }; | ||
| 455 | + | ||
| 456 | + | ||
| 457 | + $.fn.comment = Plugin; | ||
| 458 | + $.fn.comment.Constructor = Comment; | ||
| 458 | 459 | ||
| 459 | })(this); | 460 | })(this); |
| @@ -25,7 +25,11 @@ | @@ -25,7 +25,11 @@ | ||
| 25 | "yoho-tools": "~0.0.4", | 25 | "yoho-tools": "~0.0.4", |
| 26 | "yoho-tips": "~0.0.1", | 26 | "yoho-tips": "~0.0.1", |
| 27 | "jquery-ui": "~1.11.1", | 27 | "jquery-ui": "~1.11.1", |
| 28 | - "mustache": "~2.0.0", | 28 | + |
| 29 | + "mustache": "2.0.0", | ||
| 30 | + "yoho-idangerous.swiper": "0.0.2", | ||
| 31 | + "jquery.autocomplete": "0.0.2", | ||
| 32 | + "mlellipsis": "0.0.2", | ||
| 29 | "jquery.autocomplete": "~0.0.2" | 33 | "jquery.autocomplete": "~0.0.2" |
| 30 | }, | 34 | }, |
| 31 | "devDependencies": { | 35 | "devDependencies": { |
| @@ -329,7 +329,7 @@ | @@ -329,7 +329,7 @@ | ||
| 329 | height: 41px; | 329 | height: 41px; |
| 330 | } | 330 | } |
| 331 | } | 331 | } |
| 332 | -.postslist{ | 332 | +.related-posts .postslist{ |
| 333 | margin: 14px 0 0 0; | 333 | margin: 14px 0 0 0; |
| 334 | width: 794px; | 334 | width: 794px; |
| 335 | li{ | 335 | li{ |
| @@ -531,44 +531,45 @@ | @@ -531,44 +531,45 @@ | ||
| 531 | padding-bottom: 7px; | 531 | padding-bottom: 7px; |
| 532 | background: url("../assets/images/detail/side-line.png") no-repeat left bottom; | 532 | background: url("../assets/images/detail/side-line.png") no-repeat left bottom; |
| 533 | } | 533 | } |
| 534 | -} | ||
| 535 | -.side-postslist{ | ||
| 536 | - li{ | ||
| 537 | - margin: 18px 0 0 0; | ||
| 538 | - .pic{ | ||
| 539 | - position: relative; | ||
| 540 | - float: left; | ||
| 541 | - width: 89px; | ||
| 542 | - height: 59px; | ||
| 543 | - img{ | ||
| 544 | - width: 100%; | ||
| 545 | - height: 100%; | ||
| 546 | - display: block; | ||
| 547 | - } | ||
| 548 | - .play-icon{ | ||
| 549 | - position: absolute; | ||
| 550 | - width: 20px; | ||
| 551 | - height: 19px; | ||
| 552 | - background: url("../assets/images/detail/play-icon-s.png"); | ||
| 553 | - left: 50%; | ||
| 554 | - top: 50%; | ||
| 555 | - margin: -10px 0 0 -10px; | ||
| 556 | - } | ||
| 557 | - } | ||
| 558 | - .post-title{ | ||
| 559 | - float: left; | ||
| 560 | - width: 180px; | ||
| 561 | - margin: 0 0 0 18px; | ||
| 562 | - h4{ | ||
| 563 | - font-weight: bold; | ||
| 564 | - font-size: 15px; | ||
| 565 | - line-height: 16px; | 534 | + |
| 535 | + .postslist{ | ||
| 536 | + li{ | ||
| 537 | + margin: 18px 0 0 0; | ||
| 538 | + .pic{ | ||
| 539 | + position: relative; | ||
| 540 | + float: left; | ||
| 541 | + width: 89px; | ||
| 542 | + height: 59px; | ||
| 543 | + img{ | ||
| 544 | + width: 100%; | ||
| 545 | + height: 100%; | ||
| 546 | + display: block; | ||
| 547 | + } | ||
| 548 | + .play-icon{ | ||
| 549 | + position: absolute; | ||
| 550 | + width: 20px; | ||
| 551 | + height: 19px; | ||
| 552 | + background: url("../assets/images/detail/play-icon-s.png"); | ||
| 553 | + left: 50%; | ||
| 554 | + top: 50%; | ||
| 555 | + margin: -10px 0 0 -10px; | ||
| 556 | + } | ||
| 566 | } | 557 | } |
| 567 | - p{ | ||
| 568 | - font-weight: bold; | ||
| 569 | - color: #333; | ||
| 570 | - line-height: 20px; | ||
| 571 | - font-size: 15px; | 558 | + .post-title{ |
| 559 | + float: left; | ||
| 560 | + width: 180px; | ||
| 561 | + margin: 0 0 0 18px; | ||
| 562 | + h4{ | ||
| 563 | + font-weight: bold; | ||
| 564 | + font-size: 15px; | ||
| 565 | + line-height: 16px; | ||
| 566 | + } | ||
| 567 | + p{ | ||
| 568 | + font-weight: bold; | ||
| 569 | + color: #333; | ||
| 570 | + line-height: 20px; | ||
| 571 | + font-size: 15px; | ||
| 572 | + } | ||
| 572 | } | 573 | } |
| 573 | } | 574 | } |
| 574 | } | 575 | } |
| 1 | -@media screen and (min-width:1190px){ | ||
| 2 | -.mags-container{ | ||
| 3 | - width: 1080px; | ||
| 4 | - margin: 0 auto; | ||
| 5 | -} | ||
| 6 | -.newest-mags{ | ||
| 7 | - margin: 43px 0 0 0; | ||
| 8 | -} | ||
| 9 | -.mags-info{ | ||
| 10 | - width: 640px; | ||
| 11 | - h2{ | ||
| 12 | - margin: 26px 0 0 0; | ||
| 13 | - height: 83px; | ||
| 14 | - background-size: 36% 100%; | ||
| 15 | - } | ||
| 16 | - .mags-text{ | ||
| 17 | - margin: 38px auto 0; | ||
| 18 | - width: 430px; | ||
| 19 | - line-height: 24px; | ||
| 20 | - font-size: 15px; | ||
| 21 | - } | ||
| 22 | - .date-price{ | ||
| 23 | - margin: 42px 0 0 0; | ||
| 24 | - p{ | ||
| 25 | - font-size: 20px; | ||
| 26 | - color: #333333; | ||
| 27 | - text-align: center; | ||
| 28 | - } | ||
| 29 | - .price{ | ||
| 30 | - color: #666666; | ||
| 31 | - font-size: 16px; | ||
| 32 | - } | ||
| 33 | - } | ||
| 34 | - .mags-buy{ | ||
| 35 | - margin: 22px 0 0 0; | ||
| 36 | - .buy-btn{ | ||
| 37 | - width: 160px; | ||
| 38 | - height: 34px; | ||
| 39 | - line-height: 34px; | ||
| 40 | - font-size: 20px; | ||
| 41 | - background: url("../assets/images/magazine/buy-btn.png") no-repeat center center; | ||
| 42 | - } | ||
| 43 | - } | ||
| 44 | -} | ||
| 45 | - | ||
| 46 | -.mags-slide{ | ||
| 47 | - width: 340px; | ||
| 48 | - .slide-box{ | ||
| 49 | - height:426px; | ||
| 50 | - li{ | ||
| 51 | - width: 340px; | ||
| 52 | - height: 426px; | ||
| 53 | - } | ||
| 54 | - } | ||
| 55 | - .slide-ctrl{ | ||
| 56 | - margin: 20px 0 0 0; | ||
| 57 | - li{ | ||
| 58 | - margin: 0 0 0 15px; | ||
| 59 | - a{ | ||
| 60 | - display: block; | ||
| 61 | - width: 12px; | ||
| 62 | - height: 12px; | ||
| 63 | - background: url("../assets/images/magazine/slide-ctrl.png"); | ||
| 64 | - } | ||
| 65 | - } | ||
| 66 | - li.on{ | ||
| 67 | - a{ | ||
| 68 | - background: url("../assets/images/magazine/slide-ctrl-current.png"); | ||
| 69 | - } | ||
| 70 | - } | ||
| 71 | - } | ||
| 72 | -} | ||
| 73 | - | ||
| 74 | -.column-slide{ | ||
| 75 | - margin: 50px 0 0 0; | ||
| 76 | - .slide-box{ | ||
| 77 | - height: 361px; | ||
| 78 | - width: 1080px; | ||
| 79 | - .slide-piclist{ | ||
| 80 | - width:1100px; | ||
| 81 | - } | ||
| 82 | - li{ | ||
| 83 | - width: 255px; | ||
| 84 | - margin: 0 20px 0 0; | ||
| 85 | - float: left; | ||
| 86 | - img{ | ||
| 87 | - width: 100%; | ||
| 88 | - height: 321px; | ||
| 89 | - display: block; | ||
| 90 | - } | ||
| 91 | - span{ | ||
| 92 | - display: block; | ||
| 93 | - margin: 18px 0 0 0; | ||
| 94 | - line-height: 22px; | ||
| 95 | - text-align: center; | ||
| 96 | - font-size: 18px; | ||
| 97 | - color: #000; | ||
| 98 | - font-weight: bold; | ||
| 99 | - } | ||
| 100 | - } | ||
| 101 | - } | ||
| 102 | -} | ||
| 103 | -.column-slide.magazine-list{ | ||
| 104 | - .slide-box{ | ||
| 105 | - width: 1100px; | ||
| 106 | - li{ | ||
| 107 | - width:275px; | ||
| 108 | - a{ | ||
| 109 | - width: 255px; | ||
| 110 | - } | ||
| 111 | - } | ||
| 112 | - } | ||
| 113 | -} | ||
| 114 | -.mags-column{ | ||
| 115 | - margin: 43px 0 0 0; | ||
| 116 | - h2{ | ||
| 117 | - line-height: 48px; | ||
| 118 | - font-size: 28px; | ||
| 119 | - text-align: center; | ||
| 120 | - color: #000; | ||
| 121 | - font-weight: bold; | ||
| 122 | - } | ||
| 123 | - .column-slide{ | ||
| 124 | - margin: 0 0 20px 0; | ||
| 125 | - h4{ | ||
| 126 | - line-height: 45px; | ||
| 127 | - font-size: 20px; | ||
| 128 | - font-weight: bold; | ||
| 129 | - } | ||
| 130 | - .slide-box{ | ||
| 131 | - margin: 5px 0 0 0; | ||
| 132 | - height: 424px; | ||
| 133 | - line-height: 424px; | ||
| 134 | - .slide-piclist{ | ||
| 135 | - float: left; | ||
| 136 | - width: 1096px; | ||
| 137 | - height: 424px; | ||
| 138 | - } | ||
| 139 | - li{ | ||
| 140 | - margin: 0 17px 0 0; | ||
| 141 | - width: 120px; | ||
| 142 | - height: 212px; | ||
| 143 | - .img-wrap{ | ||
| 144 | - width: 120px; | ||
| 145 | - height: 180px; | ||
| 146 | - } | ||
| 147 | - img{ | ||
| 148 | - width: 120px; | ||
| 149 | - height: 180px; | ||
| 150 | - } | ||
| 151 | - span{ | ||
| 152 | - margin: 0; | ||
| 153 | - line-height: 32px; | ||
| 154 | - font-size: 14px; | ||
| 155 | - } | ||
| 156 | - } | ||
| 157 | - } | ||
| 158 | - } | ||
| 159 | -} | ||
| 160 | -.column-slide.mags-app-download{ | ||
| 161 | - margin: 37px 0 0 0; | ||
| 162 | - .slide-box{ | ||
| 163 | - height: auto; | ||
| 164 | - li{ | ||
| 165 | - height: 172px; | ||
| 166 | - img{ | ||
| 167 | - width: auto; | ||
| 168 | - margin: 0 auto; | ||
| 169 | - } | ||
| 170 | - span{ | ||
| 171 | - margin: 0; | ||
| 172 | - display: block; | ||
| 173 | - font-weight: normal; | ||
| 174 | - font-size: 18px; | ||
| 175 | - line-height: 22px; | ||
| 176 | - text-align: center; | ||
| 177 | - } | ||
| 178 | - h6{ | ||
| 179 | - margin: 15px 0 0 12px; | ||
| 180 | - font-size: 25px; | ||
| 181 | - } | ||
| 182 | - p{ | ||
| 183 | - margin: 0 0 0 12px; | ||
| 184 | - line-height: 20px; | ||
| 185 | - color: #666666; | ||
| 186 | - font-size: 18px; | ||
| 187 | - } | ||
| 188 | - strong{ | ||
| 189 | - display: block; | ||
| 190 | - margin: 22px 0 0 12px; | ||
| 191 | - line-height: 18px; | ||
| 192 | - font-size: 16px; | ||
| 193 | - color: #000; | ||
| 194 | - } | ||
| 195 | - } | ||
| 196 | - li.column-slide02{ | ||
| 197 | - img{ | ||
| 198 | - margin:11px 0 0 88px; | ||
| 199 | - width: 170px; | ||
| 200 | - height: 130px; | ||
| 201 | - } | ||
| 202 | - } | ||
| 203 | - } | ||
| 204 | -} | ||
| 205 | - | ||
| 206 | -.column-slide.rule{ | ||
| 207 | - margin: 40px 0 0 0; | ||
| 208 | - h2{ | ||
| 209 | - line-height: 48px; | ||
| 210 | - font-size: 28px; | ||
| 211 | - font-weight: bold; | ||
| 212 | - text-align: center; | ||
| 213 | - } | ||
| 214 | - .slide-box{ | ||
| 215 | - margin: 15px 0 0 0; | ||
| 216 | - height: 381px; | ||
| 217 | - } | ||
| 218 | -} | ||
| 219 | - | 1 | +@media screen and (min-width: 1190px) { |
| 2 | + .mags-container { | ||
| 3 | + width: 1080px; | ||
| 4 | + margin: 0 auto; | ||
| 5 | + } | ||
| 6 | + .newest-mags { | ||
| 7 | + margin: 43px 0 0 0; | ||
| 8 | + } | ||
| 9 | + .mags-info { | ||
| 10 | + width: 640px; | ||
| 11 | + h2 { | ||
| 12 | + margin: 26px 0 0 0; | ||
| 13 | + height: 83px; | ||
| 14 | + background-size: 36% 100%; | ||
| 15 | + } | ||
| 16 | + .mags-text { | ||
| 17 | + margin: 38px auto 0; | ||
| 18 | + width: 430px; | ||
| 19 | + line-height: 24px; | ||
| 20 | + font-size: 15px; | ||
| 21 | + } | ||
| 22 | + .date-price { | ||
| 23 | + margin: 42px 0 0 0; | ||
| 24 | + p { | ||
| 25 | + font-size: 20px; | ||
| 26 | + color: #333333; | ||
| 27 | + text-align: center; | ||
| 28 | + } | ||
| 29 | + .price { | ||
| 30 | + color: #666666; | ||
| 31 | + font-size: 16px; | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | + .mags-buy { | ||
| 35 | + margin: 22px 0 0 0; | ||
| 36 | + .buy-btn { | ||
| 37 | + width: 160px; | ||
| 38 | + height: 34px; | ||
| 39 | + line-height: 34px; | ||
| 40 | + font-size: 20px; | ||
| 41 | + background: url("../assets/images/magazine/buy-btn.png") no-repeat center center; | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | + .mags-slide { | ||
| 46 | + width: 340px; | ||
| 47 | + .slide-box { | ||
| 48 | + height: 426px; | ||
| 49 | + li { | ||
| 50 | + width: 340px; | ||
| 51 | + height: 426px; | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + .slide-ctrl { | ||
| 55 | + margin: 20px 0 0 0; | ||
| 56 | + li { | ||
| 57 | + margin: 0 0 0 15px; | ||
| 58 | + a { | ||
| 59 | + display: block; | ||
| 60 | + width: 12px; | ||
| 61 | + height: 12px; | ||
| 62 | + background: url("../assets/images/magazine/slide-ctrl.png"); | ||
| 63 | + } | ||
| 64 | + } | ||
| 65 | + li.on { | ||
| 66 | + a { | ||
| 67 | + background: url("../assets/images/magazine/slide-ctrl-current.png"); | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + .column-slide { | ||
| 73 | + margin: 50px 0 0 0; | ||
| 74 | + .slide-box { | ||
| 75 | + height: 361px; | ||
| 76 | + width: 1080px; | ||
| 77 | + .slide-piclist { | ||
| 78 | + width: 1100px; | ||
| 79 | + } | ||
| 80 | + li { | ||
| 81 | + width: 255px; | ||
| 82 | + margin: 0 20px 0 0; | ||
| 83 | + float: left; | ||
| 84 | + img { | ||
| 85 | + width: 100%; | ||
| 86 | + height: 321px; | ||
| 87 | + display: block; | ||
| 88 | + } | ||
| 89 | + span { | ||
| 90 | + display: block; | ||
| 91 | + margin: 18px 0 0 0; | ||
| 92 | + line-height: 22px; | ||
| 93 | + text-align: center; | ||
| 94 | + font-size: 18px; | ||
| 95 | + color: #000; | ||
| 96 | + font-weight: bold; | ||
| 97 | + } | ||
| 98 | + } | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | + .column-slide.magazine-list { | ||
| 102 | + .slide-box { | ||
| 103 | + width: 1100px; | ||
| 104 | + li { | ||
| 105 | + width: 275px; | ||
| 106 | + a { | ||
| 107 | + width: 255px; | ||
| 108 | + } | ||
| 109 | + } | ||
| 110 | + } | ||
| 111 | + } | ||
| 112 | + .mags-column { | ||
| 113 | + margin: 43px 0 0 0; | ||
| 114 | + h2 { | ||
| 115 | + line-height: 48px; | ||
| 116 | + font-size: 28px; | ||
| 117 | + text-align: center; | ||
| 118 | + color: #000; | ||
| 119 | + font-weight: bold; | ||
| 120 | + } | ||
| 121 | + .column-slide { | ||
| 122 | + margin: 0 0 20px 0; | ||
| 123 | + h4 { | ||
| 124 | + line-height: 45px; | ||
| 125 | + font-size: 20px; | ||
| 126 | + font-weight: bold; | ||
| 127 | + } | ||
| 128 | + .slide-box { | ||
| 129 | + margin: 5px 0 0 0; | ||
| 130 | + height: 424px; | ||
| 131 | + line-height: 424px; | ||
| 132 | + .slide-piclist { | ||
| 133 | + float: left; | ||
| 134 | + width: 1096px; | ||
| 135 | + height: 424px; | ||
| 136 | + } | ||
| 137 | + li { | ||
| 138 | + margin: 0 17px 0 0; | ||
| 139 | + width: 120px; | ||
| 140 | + height: 212px; | ||
| 141 | + .img-wrap { | ||
| 142 | + width: 120px; | ||
| 143 | + height: 180px; | ||
| 144 | + } | ||
| 145 | + img { | ||
| 146 | + width: 120px; | ||
| 147 | + height: 180px; | ||
| 148 | + } | ||
| 149 | + span { | ||
| 150 | + margin: 0; | ||
| 151 | + line-height: 32px; | ||
| 152 | + font-size: 14px; | ||
| 153 | + } | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + } | ||
| 157 | + } | ||
| 158 | + .column-slide.mags-app-download { | ||
| 159 | + margin: 37px 0 0 0; | ||
| 160 | + .slide-box { | ||
| 161 | + height: auto; | ||
| 162 | + li { | ||
| 163 | + height: 172px; | ||
| 164 | + img { | ||
| 165 | + width: auto; | ||
| 166 | + margin: 0 auto; | ||
| 167 | + } | ||
| 168 | + span { | ||
| 169 | + margin: 0; | ||
| 170 | + display: block; | ||
| 171 | + font-weight: normal; | ||
| 172 | + font-size: 18px; | ||
| 173 | + line-height: 22px; | ||
| 174 | + text-align: center; | ||
| 175 | + } | ||
| 176 | + h6 { | ||
| 177 | + margin: 15px 0 0 12px; | ||
| 178 | + font-size: 25px; | ||
| 179 | + } | ||
| 180 | + p { | ||
| 181 | + margin: 0 0 0 12px; | ||
| 182 | + line-height: 20px; | ||
| 183 | + color: #666666; | ||
| 184 | + font-size: 18px; | ||
| 185 | + } | ||
| 186 | + strong { | ||
| 187 | + display: block; | ||
| 188 | + margin: 22px 0 0 12px; | ||
| 189 | + line-height: 18px; | ||
| 190 | + font-size: 16px; | ||
| 191 | + color: #000; | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | + li.column-slide02 { | ||
| 195 | + img { | ||
| 196 | + margin: 11px 0 0 88px; | ||
| 197 | + width: 170px; | ||
| 198 | + height: 130px; | ||
| 199 | + } | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + } | ||
| 203 | + .column-slide.rule { | ||
| 204 | + margin: 40px 0 0 0; | ||
| 205 | + h2 { | ||
| 206 | + line-height: 48px; | ||
| 207 | + font-size: 28px; | ||
| 208 | + font-weight: bold; | ||
| 209 | + text-align: center; | ||
| 210 | + } | ||
| 211 | + .slide-box { | ||
| 212 | + margin: 15px 0 0 0; | ||
| 213 | + height: 381px; | ||
| 214 | + } | ||
| 215 | + } | ||
| 220 | } | 216 | } |
| 1 | -@media screen and (max-width:768px){ | ||
| 2 | - | ||
| 3 | -.about-container{ | ||
| 4 | - width: 668px; | ||
| 5 | - margin: 20px auto 0; | 1 | +@media screen and (max-width: 768px) { |
| 2 | + .about-container { | ||
| 3 | + width: 668px; | ||
| 4 | + margin: 20px auto 0; | ||
| 5 | + } | ||
| 6 | + .about-nav { | ||
| 7 | + margin: 0 0 0 40px; | ||
| 8 | + li { | ||
| 9 | + line-height: 22px; | ||
| 10 | + font-size: 14px; | ||
| 11 | + margin-bottom: 15px; | ||
| 12 | + } | ||
| 13 | + } | ||
| 14 | + .about-body { | ||
| 15 | + margin: 0 0 0 200px; | ||
| 16 | + max-width: 370px; | ||
| 17 | + h2 { | ||
| 18 | + line-height: 22px; | ||
| 19 | + font-size: 14px; | ||
| 20 | + } | ||
| 21 | + p { | ||
| 22 | + line-height: 18px; | ||
| 23 | + font-size: 12px; | ||
| 24 | + } | ||
| 25 | + .about-section { | ||
| 26 | + margin: 15px 0 0 0; | ||
| 27 | + } | ||
| 28 | + .about-section.contact-us { | ||
| 29 | + img { | ||
| 30 | + margin: 8px 0 0 -5px; | ||
| 31 | + display: block; | ||
| 32 | + width: 95px; | ||
| 33 | + height: 95px; | ||
| 34 | + } | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + .about-us-qr { | ||
| 38 | + width: 230px; | ||
| 39 | + margin: 34px 0 0 3px; | ||
| 40 | + .product { | ||
| 41 | + margin-bottom: 30px; | ||
| 42 | + background-image: url("../assets/images/about/line.png"); | ||
| 43 | + background-repeat: no-repeat; | ||
| 44 | + background-position: top center; | ||
| 45 | + background-size: 2% 76%; | ||
| 46 | + } | ||
| 47 | + .product-wrap { | ||
| 48 | + float: left; | ||
| 49 | + img { | ||
| 50 | + display: block; | ||
| 51 | + width: 87px; | ||
| 52 | + height: 87px; | ||
| 53 | + } | ||
| 54 | + img.qr-img { | ||
| 55 | + width: 91px; | ||
| 56 | + height: 91px; | ||
| 57 | + } | ||
| 58 | + span { | ||
| 59 | + display: block; | ||
| 60 | + text-align: center; | ||
| 61 | + line-height: 30px; | ||
| 62 | + font-size: 12px; | ||
| 63 | + } | ||
| 64 | + em { | ||
| 65 | + font-size: 12px; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + .product-wrap.product-wrap-right { | ||
| 69 | + float: right; | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + .links-list { | ||
| 73 | + margin: 10px 0 0 0; | ||
| 74 | + width: 414px; | ||
| 75 | + li { | ||
| 76 | + float: left; | ||
| 77 | + line-height: 34px; | ||
| 78 | + width: 110px; | ||
| 79 | + margin: 0 28px 0 0; | ||
| 80 | + a { | ||
| 81 | + font-size: 12px; | ||
| 82 | + color: #333333; | ||
| 83 | + } | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + .feedback .comment-textarea { | ||
| 87 | + width: 370px; | ||
| 88 | + textarea { | ||
| 89 | + width: 354px; | ||
| 90 | + } | ||
| 91 | + .login-status { | ||
| 92 | + width: 100%; | ||
| 93 | + } | ||
| 94 | + } | ||
| 6 | } | 95 | } |
| 7 | - | ||
| 8 | -.about-nav{ | ||
| 9 | - margin: 0 0 0 40px; | ||
| 10 | - li{ | ||
| 11 | - line-height: 22px; | ||
| 12 | - font-size: 14px; | ||
| 13 | - margin-bottom: 15px; | ||
| 14 | - } | ||
| 15 | -} | ||
| 16 | -.about-body{ | ||
| 17 | - margin: 0 0 0 200px; | ||
| 18 | - max-width: 370px; | ||
| 19 | - h2{ | ||
| 20 | - line-height: 22px; | ||
| 21 | - font-size: 14px; | ||
| 22 | - } | ||
| 23 | - p{ | ||
| 24 | - line-height: 18px; | ||
| 25 | - font-size: 12px; | ||
| 26 | - } | ||
| 27 | - .about-section{ | ||
| 28 | - margin: 15px 0 0 0; | ||
| 29 | - } | ||
| 30 | - .about-section.contact-us{ | ||
| 31 | - img{ | ||
| 32 | - margin: 8px 0 0 -5px; | ||
| 33 | - display: block; | ||
| 34 | - width: 95px; | ||
| 35 | - height: 95px; | ||
| 36 | - } | ||
| 37 | - } | ||
| 38 | -} | ||
| 39 | -.about-us-qr{ | ||
| 40 | - width: 230px; | ||
| 41 | - margin: 34px 0 0 3px; | ||
| 42 | - .product{ | ||
| 43 | - margin-bottom: 30px; | ||
| 44 | - background-image: url("../assets/images/about/line.png"); | ||
| 45 | - background-repeat: no-repeat; | ||
| 46 | - background-position: top center; | ||
| 47 | - background-size: 2% 76%; | ||
| 48 | - } | ||
| 49 | - .product-wrap{ | ||
| 50 | - float: left; | ||
| 51 | - img{ | ||
| 52 | - display: block; | ||
| 53 | - width: 87px; | ||
| 54 | - height: 87px; | ||
| 55 | - } | ||
| 56 | - img.qr-img{ | ||
| 57 | - width: 91px; | ||
| 58 | - height: 91px; | ||
| 59 | - } | ||
| 60 | - span{ | ||
| 61 | - display: block; | ||
| 62 | - text-align: center; | ||
| 63 | - line-height: 30px; | ||
| 64 | - font-size: 12px; | ||
| 65 | - } | ||
| 66 | - em{ | ||
| 67 | - font-size: 12px; | ||
| 68 | - } | ||
| 69 | - } | ||
| 70 | - .product-wrap.product-wrap-right{ | ||
| 71 | - float: right; | ||
| 72 | - } | ||
| 73 | -} | ||
| 74 | - | ||
| 75 | -.links-list{ | ||
| 76 | - margin: 10px 0 0 0; | ||
| 77 | - width: 414px; | ||
| 78 | - li{ | ||
| 79 | - float: left; | ||
| 80 | - line-height: 34px; | ||
| 81 | - width: 110px; | ||
| 82 | - margin: 0 28px 0 0; | ||
| 83 | - a{ | ||
| 84 | - font-size: 12px; | ||
| 85 | - color: #333333; | ||
| 86 | - } | ||
| 87 | - } | ||
| 88 | -} | ||
| 89 | - | ||
| 90 | -.feedback .comment-textarea{ | ||
| 91 | - width: 370px; | ||
| 92 | - textarea{ | ||
| 93 | - width: 354px; | ||
| 94 | - } | ||
| 95 | - .login-status{ | ||
| 96 | - width: 100%; | ||
| 97 | - } | ||
| 98 | -} | ||
| 99 | -} |
| 1 | -@media screen and (max-width:768px){ | ||
| 2 | - | ||
| 3 | -.detail-container{ | ||
| 4 | - width: 668px; | ||
| 5 | - margin: 14px auto 0; | ||
| 6 | -} | ||
| 7 | - | ||
| 8 | - | ||
| 9 | -/*detail标题*/ | ||
| 10 | -.detail-title{ | ||
| 11 | - width: 100%; | ||
| 12 | - margin: 0 0 8px 0; | ||
| 13 | - h1{ | ||
| 14 | - line-height: 20px; | ||
| 15 | - font-size: 14px; | ||
| 16 | - font-weight: bold; | ||
| 17 | - } | ||
| 18 | - h2{ | ||
| 19 | - line-height: 20px; | ||
| 20 | - font-size: 14px; | ||
| 21 | - font-weight: bold; | ||
| 22 | - } | ||
| 23 | - .detail-category{ | ||
| 24 | - font-size: 12px; | ||
| 25 | - color: #666666; | ||
| 26 | - line-height: 30px; | ||
| 27 | - a{ | ||
| 28 | - color: #666666; | ||
| 29 | - } | ||
| 30 | - } | ||
| 31 | -} | ||
| 32 | - | ||
| 33 | -/*detail主体*/ | ||
| 34 | -.detail-body{ | ||
| 35 | - float: left; | ||
| 36 | - width: 460px; | ||
| 37 | - object{ | ||
| 38 | - width: 460px; | ||
| 39 | - height: 259px; | ||
| 40 | - } | ||
| 41 | - embed{ | ||
| 42 | - width: 460px; | ||
| 43 | - height: 259px; | ||
| 44 | - } | ||
| 45 | - video{ | ||
| 46 | - width: 460px; | ||
| 47 | - height: 259px; | ||
| 48 | - } | ||
| 49 | -} | ||
| 50 | -.video-wrap.current{ | ||
| 51 | - width: 182px; | ||
| 52 | - object{ | ||
| 53 | - width: 182px; | ||
| 54 | - height: 103px; | ||
| 55 | - } | ||
| 56 | - embed{ | ||
| 57 | - width: 182px; | ||
| 58 | - height: 103px; | ||
| 59 | - } | ||
| 60 | - video{ | ||
| 61 | - width: 182px; | ||
| 62 | - height: 103px; | ||
| 63 | - } | ||
| 64 | -} | ||
| 65 | -/*slide图片*/ | ||
| 66 | -.detail-slide-body{ | ||
| 67 | - width: 100%; | ||
| 68 | - height: 266px; | ||
| 69 | - overflow: hidden; | ||
| 70 | -} | ||
| 71 | -.detail-slide-piclist{ | ||
| 72 | - li{ | ||
| 73 | - float: left; | ||
| 74 | - width:460px; | ||
| 75 | - height: 266px; | ||
| 76 | - line-height: 266px; | ||
| 77 | - } | ||
| 78 | -} | ||
| 79 | -.detail-slide-ctrl{ | ||
| 80 | - padding: 15px 0 0 0; | ||
| 81 | - width: 100%; | ||
| 82 | - height: 44px; | ||
| 83 | - position: relative; | ||
| 84 | - .detail-slide-ctrl-prev,.detail-slide-ctrl-next{ | ||
| 85 | - position:relative; | ||
| 86 | - margin: -44px 0 0 0; | ||
| 87 | - width: 20px; | ||
| 88 | - height: 44px; | ||
| 89 | - line-height: 44px; | ||
| 90 | - background-size: 50% 50%; | ||
| 91 | - } | ||
| 92 | - .detail-slide-ctrl-prev{ | ||
| 93 | - margin-right: -20px; | ||
| 94 | - } | ||
| 95 | - .detail-slide-ctrl-next{ | ||
| 96 | - margin-left: -20px; | ||
| 97 | - } | ||
| 98 | -} | ||
| 99 | -.detail-slide-ctrl-tabs{ | ||
| 100 | - li{ | ||
| 101 | - position: relative; | ||
| 102 | - float: left; | ||
| 103 | - margin: 0 0 0 4px; | ||
| 104 | - img{ | ||
| 105 | - display: block; | ||
| 106 | - width: 77px; | ||
| 107 | - height: 44px; | ||
| 108 | - } | ||
| 109 | - } | ||
| 110 | - li:first-child{ | ||
| 111 | - margin: 0; | ||
| 112 | - } | ||
| 113 | - li.current{ | ||
| 114 | - .border{ | ||
| 115 | - position: absolute; | ||
| 116 | - left: 0px; | ||
| 117 | - right: 0px; | ||
| 118 | - top: 0px; | ||
| 119 | - bottom: 0px; | ||
| 120 | - border: 1px solid #000; | ||
| 121 | - } | ||
| 122 | - .arrow{ | ||
| 123 | - position: absolute; | ||
| 124 | - width: 11px; | ||
| 125 | - height: 6px; | ||
| 126 | - top: -5px; | ||
| 127 | - left: 50%; | ||
| 128 | - margin: 0 0 0 -5px; | ||
| 129 | - background-image: url("../assets/images/detail/slide-arrow.png"); | ||
| 130 | - background-size: 100% 100%; | ||
| 131 | - } | ||
| 132 | - } | ||
| 133 | -} | ||
| 134 | - | ||
| 135 | -/*资讯主体*/ | ||
| 136 | -.text-body{ | ||
| 137 | - line-height: 20px; | ||
| 138 | - p{ | ||
| 139 | - margin: 16px 0; | ||
| 140 | - line-height: 20px; | ||
| 141 | - font-size: 12px; | ||
| 142 | - } | ||
| 143 | -} | ||
| 144 | - | ||
| 145 | -/*标签*/ | ||
| 146 | -.tag-box{ | ||
| 147 | - margin: 26px 0 0 0; | ||
| 148 | - padding: 0 0 11px 0; | ||
| 149 | - background-size: 100%; | ||
| 150 | - .taglist{ | ||
| 151 | - padding: 0 0 0 18px; | ||
| 152 | - background: url("../assets/images/detail/tag-icon.png") no-repeat 1px 6px; | ||
| 153 | - } | ||
| 154 | - li{ | ||
| 155 | - float: left; | ||
| 156 | - line-height: 24px; | ||
| 157 | - height: 24px; | ||
| 158 | - a{ | ||
| 159 | - padding: 0 10px 0 10px; | ||
| 160 | - font-size: 14px; | ||
| 161 | - color: #1c1c1b; | ||
| 162 | - font-weight: bold; | ||
| 163 | - } | ||
| 164 | - } | ||
| 165 | - li:last-child{ | ||
| 166 | - background: none; | ||
| 167 | - } | ||
| 168 | - li.last-child{ | ||
| 169 | - background: none; | ||
| 170 | - } | ||
| 171 | -} | ||
| 172 | - | ||
| 173 | -/*统计栏*/ | ||
| 174 | -.stats-btn{ | ||
| 175 | - margin: 16px 0 0 0; | ||
| 176 | - .statslist{ | ||
| 177 | - float: right; | ||
| 178 | - } | ||
| 179 | - li{ | ||
| 180 | - float: left; | ||
| 181 | - width: 52px; | ||
| 182 | - img{ | ||
| 183 | - display: block; | ||
| 184 | - margin: 1px 0 0 1px; | ||
| 185 | - } | ||
| 186 | - strong{ | ||
| 187 | - float: left; | ||
| 188 | - width: 20px; | ||
| 189 | - height: 20px; | ||
| 190 | - img{ | ||
| 191 | - display: block; | ||
| 192 | - width: 18px; | ||
| 193 | - height: 18px; | ||
| 194 | - } | ||
| 195 | - } | ||
| 196 | - span{ | ||
| 197 | - float: left; | ||
| 198 | - margin: -6px 0 0 -2px; | ||
| 199 | - font-size: 10px; | ||
| 200 | - color: #000; | ||
| 201 | - } | ||
| 202 | - } | ||
| 203 | - li.comments{ | ||
| 204 | - margin: 0; | ||
| 205 | - padding: 0; | ||
| 206 | - border-left: 1px solid #000; | ||
| 207 | - img,span{ | ||
| 208 | - float: right; | ||
| 209 | - } | ||
| 210 | - span{ | ||
| 211 | - margin: 10px 0 0 0; | ||
| 212 | - img{ | ||
| 213 | - width: 17px; | ||
| 214 | - height: 8px; | ||
| 215 | - } | ||
| 216 | - line-height:8px; | ||
| 217 | - } | ||
| 218 | - img{ | ||
| 219 | - width: 18px; | ||
| 220 | - height: 17px; | ||
| 221 | - } | ||
| 222 | - } | ||
| 223 | - li.current{ | ||
| 224 | - strong{ | ||
| 225 | - background-image: url("../assets/images/detail/stats-cur-bg.png"); | ||
| 226 | - background-size: 100% 100%; | ||
| 227 | - } | ||
| 228 | - } | ||
| 229 | -} | ||
| 230 | - | ||
| 231 | -/*评论*/ | ||
| 232 | -.comments-box{ | ||
| 233 | - margin: 5px 0 0 0; | ||
| 234 | -} | ||
| 235 | -.comments-list{ | ||
| 236 | - li{ | ||
| 237 | - padding:6px 0 10 0; | ||
| 238 | - border-bottom: 1px solid #dbdbdb; | ||
| 239 | - position: relative; | ||
| 240 | - .userimg{ | ||
| 241 | - float: left; | ||
| 242 | - margin: 5px 0 0 3px; | ||
| 243 | - width: 28px; | ||
| 244 | - height: 28px; | ||
| 245 | - img{ | ||
| 246 | - width: 100%; | ||
| 247 | - height:100%; | ||
| 248 | - } | ||
| 249 | - i{ | ||
| 250 | - width: 11px; | ||
| 251 | - height: 11px; | ||
| 252 | - left: 20px; | ||
| 253 | - bottom: 4px; | ||
| 254 | - background-size: 100% 100%; | ||
| 255 | - } | ||
| 256 | - } | ||
| 257 | - .userinfo{ | ||
| 258 | - float: left; | ||
| 259 | - margin: 0 0 0 10px; | ||
| 260 | - h6{ | ||
| 261 | - line-height: 20px; | ||
| 262 | - font-size: 13px; | ||
| 263 | - font-weight: bold; | ||
| 264 | - } | ||
| 265 | - p{ | ||
| 266 | - margin: 2px 0 0 0; | ||
| 267 | - line-height: 16px; | ||
| 268 | - font-size: 12px; | ||
| 269 | - } | ||
| 270 | - } | ||
| 271 | - } | ||
| 272 | -} | ||
| 273 | -.view-more{ | ||
| 274 | - margin: 18px 0 23px 0; | ||
| 275 | - font-weight: bold; | ||
| 276 | - text-align: center; | ||
| 277 | - font-size: 14px; | ||
| 278 | - line-height: 16px; | ||
| 279 | - a{ | ||
| 280 | - color: #000; | ||
| 281 | - } | ||
| 282 | -} | ||
| 283 | -.comment-textarea{ | ||
| 284 | - | ||
| 285 | - .anonymous-info { | ||
| 286 | - margin-bottom: 6px; | ||
| 287 | - | ||
| 288 | - input { | ||
| 289 | - padding: 0 6px; | ||
| 290 | - width: 217px; | ||
| 291 | - height: 23px; | ||
| 292 | - line-height: 23px; | ||
| 293 | - | ||
| 294 | - &:first-child { | ||
| 295 | - width: 216px; | ||
| 296 | - } | ||
| 297 | - } | ||
| 298 | - } | ||
| 299 | - | ||
| 300 | - textarea{ | ||
| 301 | - width: 447px; | ||
| 302 | - height: 35px; | ||
| 303 | - border: 1px solid #000; | ||
| 304 | - resize:none; | ||
| 305 | - margin: 0; | ||
| 306 | - padding: 6px; | ||
| 307 | - } | ||
| 308 | - .login-status{ | ||
| 309 | - width: 455px; | ||
| 310 | - height: 24px; | ||
| 311 | - padding: 2px; | ||
| 312 | - border: 1px solid #000; | ||
| 313 | - border-top: none; | ||
| 314 | - .userimg{ | ||
| 315 | - float: left; | ||
| 316 | - margin: 3px 0 0 10px; | ||
| 317 | - width: 20px; | ||
| 318 | - height: 20px; | ||
| 319 | - i{ | ||
| 320 | - width: 7px; | ||
| 321 | - height: 7px; | ||
| 322 | - left: 15px; | ||
| 323 | - background-size: 100% 100%; | ||
| 324 | - } | ||
| 325 | - } | ||
| 326 | - .userinfo{ | ||
| 327 | - margin: 0 0 0 18px; | ||
| 328 | - font-size: 12px; | ||
| 329 | - line-height: 24px; | ||
| 330 | - } | ||
| 331 | - .anonymous{ | ||
| 332 | - line-height: 20px; | ||
| 333 | - } | ||
| 334 | - .publish{ | ||
| 335 | - margin: 0px 16px 0 0; | ||
| 336 | - .publish-btn{ | ||
| 337 | - width: 55px; | ||
| 338 | - height: 22px; | ||
| 339 | - line-height: 22px; | ||
| 340 | - background-image: url("../assets/images/detail/publish-btn.png"); | ||
| 341 | - background-size: 100% 100%; | ||
| 342 | - font-size: 12px; | ||
| 343 | - } | ||
| 344 | - } | ||
| 345 | - } | ||
| 346 | -} | ||
| 347 | -/*上一篇下一篇*/ | ||
| 348 | -.news-next-prev{ | ||
| 349 | - margin: 30px 0 0 0; | ||
| 350 | - height: 16px; | ||
| 351 | - .prev{ | ||
| 352 | - float: left; | ||
| 353 | - a{ | ||
| 354 | - margin: 0 0 0 12px; | ||
| 355 | - padding: 0 0 0 22px; | ||
| 356 | - background: url("../assets/images/detail/prev-arrow-1024.png") no-repeat left center; | ||
| 357 | - } | ||
| 358 | - | ||
| 359 | - } | ||
| 360 | - .next{ | ||
| 361 | - float: right; | ||
| 362 | - a{ | ||
| 363 | - margin: 0 12px 0 0; | ||
| 364 | - padding: 0 22px 0 0; | ||
| 365 | - background: url("../assets/images/detail/next-arrow-1024.png") no-repeat right center; | ||
| 366 | - } | ||
| 367 | - | ||
| 368 | - } | ||
| 369 | - a{ | ||
| 370 | - display: block; | ||
| 371 | - line-height: 16px; | ||
| 372 | - font-size: 14px; | ||
| 373 | - color: #999999; | ||
| 374 | - } | ||
| 375 | -} | ||
| 376 | - | ||
| 377 | -/*related posts*/ | ||
| 378 | -.related-posts{ | ||
| 379 | - margin: 25px 0 0 0; | ||
| 380 | - h2{ | ||
| 381 | - padding: 0 0 6px 0; | ||
| 382 | - line-height: 22px; | ||
| 383 | - font-size: 14px; | ||
| 384 | - color: #000; | ||
| 385 | - font-weight: bold; | ||
| 386 | - background-image: url("../assets/images/detail/detail-line-1024.png"); | ||
| 387 | - background-repeat: no-repeat; | ||
| 388 | - background-position: center bottom; | ||
| 389 | - background-size: 100%; | ||
| 390 | - } | ||
| 391 | - | ||
| 392 | - .load-more { | ||
| 393 | - width: 119px; | ||
| 394 | - height: 25px; | ||
| 395 | - } | ||
| 396 | -} | ||
| 397 | -.postslist{ | ||
| 398 | - margin: 14px 0 0 0; | ||
| 399 | - width: 488px; | ||
| 400 | - li{ | ||
| 401 | - float: left; | ||
| 402 | - margin: 0 32px 0 0; | ||
| 403 | - width: 212px; | ||
| 404 | - height: 198px; | ||
| 405 | - .pic{ | ||
| 406 | - position: relative; | ||
| 407 | - img{ | ||
| 408 | - display: block; | ||
| 409 | - width: 100%; | ||
| 410 | - height: 135px; | ||
| 411 | - } | ||
| 412 | - .play-icon{ | ||
| 413 | - position: absolute; | ||
| 414 | - width: 47px; | ||
| 415 | - height: 43px; | ||
| 416 | - background: url("../assets/images/detail/play-icon-1024.png"); | ||
| 417 | - background-size: 100% 100%; | ||
| 418 | - left: 50%; | ||
| 419 | - top: 50%; | ||
| 420 | - margin: -22px 0 0 -23px; | ||
| 421 | - } | ||
| 422 | - | ||
| 423 | - .arrow-bottom { | ||
| 424 | - border-width: 28px; | ||
| 425 | - border-right-width: 0; | ||
| 426 | - } | ||
| 427 | - } | ||
| 428 | - h4{ | ||
| 429 | - margin: 6px 0 0 0; | ||
| 430 | - font-size: 12px; | ||
| 431 | - color: #000; | ||
| 432 | - line-height: 14px; | ||
| 433 | - font-weight: bold; | ||
| 434 | - } | ||
| 435 | - p{ | ||
| 436 | - font-weight:bold; | ||
| 437 | - margin: 5px 0 0 0; | ||
| 438 | - line-height: 14px; | ||
| 439 | - font-size: 12px; | ||
| 440 | - color: #333; | ||
| 441 | - } | ||
| 442 | - } | ||
| 443 | -} | ||
| 444 | - | ||
| 445 | -/*分享*/ | ||
| 446 | -.share{ | ||
| 447 | - top: 256px; | ||
| 448 | - left: 50%; | ||
| 449 | - margin-left: -370px; | ||
| 450 | - h4{ | ||
| 451 | - line-height: 23px; | ||
| 452 | - font-size: 13px; | ||
| 453 | - color: #000; | ||
| 454 | - margin-bottom: 4px; | ||
| 455 | - } | ||
| 456 | - li{ | ||
| 457 | - width: 30px; | ||
| 458 | - height: 30px; | ||
| 459 | - margin-bottom: 10px; | ||
| 460 | - img{ | ||
| 461 | - display: block; | ||
| 462 | - width: 100%; | ||
| 463 | - height: 100%; | ||
| 464 | - } | ||
| 465 | - } | ||
| 466 | -} | ||
| 467 | - | ||
| 468 | -/*detail侧边栏*/ | ||
| 469 | -.detail-side{ | ||
| 470 | - float: left; | ||
| 471 | - margin: 0 0 0 26px; | ||
| 472 | - width: 182px; | ||
| 473 | -} | ||
| 474 | -.detail-ad{ | ||
| 475 | - img{ | ||
| 476 | - display: block; | ||
| 477 | - width: 100%; | ||
| 478 | - } | ||
| 479 | -} | ||
| 480 | -.app-download{ | ||
| 481 | - margin: 17px 0 0 0; | ||
| 482 | - padding: 6px 0 6px 6px; | ||
| 483 | - width: 176px; | ||
| 484 | - height: 62px; | ||
| 485 | - background-size: 100% 100%; | ||
| 486 | - .qr{ | ||
| 487 | - float: left; | ||
| 488 | - width: 66px; | ||
| 489 | - height: 62px; | ||
| 490 | - img{ | ||
| 491 | - display: block; | ||
| 492 | - width: 100%; | ||
| 493 | - height: 100%; | ||
| 494 | - } | ||
| 495 | - } | ||
| 496 | - .app-main{ | ||
| 497 | - float: left; | ||
| 498 | - margin: 0 0 0 5px; | ||
| 499 | - h6{ | ||
| 500 | - margin: 0; | ||
| 501 | - line-height: 20px; | ||
| 502 | - font-size: 13px; | ||
| 503 | - color: #000; | ||
| 504 | - } | ||
| 505 | - p{ | ||
| 506 | - width: 90px; | ||
| 507 | - line-height: 12px; | ||
| 508 | - font-size: 10px; | ||
| 509 | - color: #989898; | ||
| 510 | - } | ||
| 511 | - .download-btn{ | ||
| 512 | - margin: 2px 0 0 0; | ||
| 513 | - a{ | ||
| 514 | - float: left; | ||
| 515 | - margin: 0 0 0 10px; | ||
| 516 | - width: 33px; | ||
| 517 | - height: 13px; | ||
| 518 | - img{ | ||
| 519 | - display: block; | ||
| 520 | - width: 100%; | ||
| 521 | - height: 100%; | ||
| 522 | - } | ||
| 523 | - } | ||
| 524 | - a:first-child{ | ||
| 525 | - width: 46px; | ||
| 526 | - height: 13px; | ||
| 527 | - margin: 0; | ||
| 528 | - } | ||
| 529 | - } | ||
| 530 | - } | ||
| 531 | -} | ||
| 532 | -.focus-us{ | ||
| 533 | - margin: 19px 0 0 0; | ||
| 534 | - padding: 12px 15px 17px; | ||
| 535 | - width: 152px; | ||
| 536 | - height: 66px; | ||
| 537 | - background-size: 100% 100%; | ||
| 538 | - h4{ | ||
| 539 | - line-height: 20px; | ||
| 540 | - font-size: 18px; | ||
| 541 | - color: #000; | ||
| 542 | - text-align: center; | ||
| 543 | - } | ||
| 544 | - .focuslist{ | ||
| 545 | - margin:7px auto 0; | ||
| 546 | - li{ | ||
| 547 | - float: left; | ||
| 548 | - width: 15px; | ||
| 549 | - height: 15px; | ||
| 550 | - margin: 0 0px 0 16px; | ||
| 551 | - img{ | ||
| 552 | - display: block; | ||
| 553 | - height: 100%; | ||
| 554 | - margin: 0 auto; | ||
| 555 | - } | ||
| 556 | - } | ||
| 557 | - li.focus-wx{ | ||
| 558 | - position: relative; | ||
| 559 | - .pop{ | ||
| 560 | - display: none; | ||
| 561 | - z-index: 999; | ||
| 562 | - position: absolute; | ||
| 563 | - width: 85px; | ||
| 564 | - height: 76px; | ||
| 565 | - left: -34px; | ||
| 566 | - top: 18px; | ||
| 567 | - line-height: 76px; | ||
| 568 | - vertical-align: middle; | ||
| 569 | - background-size: 310%; | ||
| 570 | - img{ | ||
| 571 | - display: inline; | ||
| 572 | - vertical-align: middle; | ||
| 573 | - width: 65px; | ||
| 574 | - height: 65px; | ||
| 575 | - margin: 7px 0 0 0; | ||
| 576 | - } | ||
| 577 | - } | ||
| 578 | - } | ||
| 579 | - li:first-child{ | ||
| 580 | - margin: 0 0 0 4px; | ||
| 581 | - } | ||
| 582 | - } | ||
| 583 | - .textbox{ | ||
| 584 | - margin: 8px 0 0 0; | ||
| 585 | - input{ | ||
| 586 | - float: left; | ||
| 587 | - padding: 0 0 0 4px; | ||
| 588 | - width: 108px; | ||
| 589 | - height: 14px; | ||
| 590 | - border: 1px solid #000; | ||
| 591 | - outline: none; | ||
| 592 | - font-size: 12px; | ||
| 593 | - } | ||
| 594 | - a{ | ||
| 595 | - float: left; | ||
| 596 | - display: inline-block; | ||
| 597 | - width: 38px; | ||
| 598 | - height: 16px; | ||
| 599 | - line-height: 16px; | ||
| 600 | - background: #000; | ||
| 601 | - color: #fff; | ||
| 602 | - font-size: 12px; | ||
| 603 | - text-align: center; | ||
| 604 | - } | ||
| 605 | - } | ||
| 606 | -} | ||
| 607 | -.side-map{ | ||
| 608 | - .map-section{ | ||
| 609 | - h2{ | ||
| 610 | - font-size: 16px; | ||
| 611 | - background-size: 100%; | ||
| 612 | - } | ||
| 613 | - h6{ | ||
| 614 | - margin: 8px 0 0 6px; | ||
| 615 | - font-size: 13px; | ||
| 616 | - line-height: 16px; | ||
| 617 | - color: #000; | ||
| 618 | - } | ||
| 619 | - p{ | ||
| 620 | - font-size: 12px; | ||
| 621 | - } | ||
| 622 | - } | ||
| 623 | -} | ||
| 624 | -.side-video{ | ||
| 625 | - margin: 17px 0 0 0; | ||
| 626 | - .video-area{ | ||
| 627 | - object{ | ||
| 628 | - height: 98px; | ||
| 629 | - embed{ | ||
| 630 | - height: 98px; | ||
| 631 | - } | ||
| 632 | - } | ||
| 633 | - video{ | ||
| 634 | - height: 98px; | ||
| 635 | - } | ||
| 636 | - img{ | ||
| 637 | - width: 100%; | ||
| 638 | - display: block; | ||
| 639 | - } | ||
| 640 | - } | ||
| 641 | - h3{ | ||
| 642 | - margin: 3px 0 0 0; | ||
| 643 | - line-height: 18px; | ||
| 644 | - font-size: 12px; | ||
| 645 | - font-weight: bold; | ||
| 646 | - color: #000; | ||
| 647 | - } | ||
| 648 | - p{ | ||
| 649 | - margin: 5px 0 0 0; | ||
| 650 | - line-height: 14px; | ||
| 651 | - font-size: 12px; | ||
| 652 | - color: #000; | ||
| 653 | - } | ||
| 654 | -} | ||
| 655 | -.side-related-posts{ | ||
| 656 | - margin: 24px 0 0 0; | ||
| 657 | - h2{ | ||
| 658 | - line-height: 21px; | ||
| 659 | - font-size: 14px; | ||
| 660 | - padding-bottom: 3px; | ||
| 661 | - background-size: 100%; | ||
| 662 | - } | ||
| 663 | -} | ||
| 664 | -.side-postslist{ | ||
| 665 | - li{ | ||
| 666 | - margin: 11px 0 0 0; | ||
| 667 | - max-height: 37px; | ||
| 668 | - overflow: hidden; | ||
| 669 | - .pic{ | ||
| 670 | - width: 57px; | ||
| 671 | - height: 38px; | ||
| 672 | - .play-icon{ | ||
| 673 | - width: 17px; | ||
| 674 | - height: 16px; | ||
| 675 | - background-size: 100% 100%; | ||
| 676 | - left: 50%; | ||
| 677 | - top: 50%; | ||
| 678 | - margin: -8px 0 0 -9px; | ||
| 679 | - } | ||
| 680 | - } | ||
| 681 | - .post-title{ | ||
| 682 | - float: left; | ||
| 683 | - width: 115px; | ||
| 684 | - margin: 0 0 0 10px; | ||
| 685 | - h4{ | ||
| 686 | - font-weight: bold; | ||
| 687 | - font-size: 12px; | ||
| 688 | - line-height: 16px; | ||
| 689 | - } | ||
| 690 | - p{ | ||
| 691 | - margin: 5px 0 0 0; | ||
| 692 | - color: #333; | ||
| 693 | - font-weight: bold; | ||
| 694 | - line-height: 16px; | ||
| 695 | - font-size: 12px; | ||
| 696 | - } | ||
| 697 | - } | ||
| 698 | - } | ||
| 699 | -} | ||
| 700 | - | ||
| 701 | -.detail-zoom { | ||
| 702 | - width: 500px; | ||
| 703 | - margin-left: -250px; | ||
| 704 | - text-align: center; | ||
| 705 | - | ||
| 706 | - img { | ||
| 707 | - max-width: 500px; | ||
| 708 | - } | ||
| 709 | - | ||
| 710 | - .guide-btn { | ||
| 711 | - | ||
| 712 | - &.prev { | ||
| 713 | - left: -70px; | ||
| 714 | - } | ||
| 715 | - | ||
| 716 | - &.next { | ||
| 717 | - right: -70px; | ||
| 718 | - } | ||
| 719 | - } | ||
| 720 | -} | 1 | +@media screen and (max-width: 768px) { |
| 2 | + .detail-container { | ||
| 3 | + width: 668px; | ||
| 4 | + margin: 14px auto 0; | ||
| 5 | + } | ||
| 6 | + /*detail标题*/ | ||
| 7 | + | ||
| 8 | + .detail-title { | ||
| 9 | + width: 100%; | ||
| 10 | + margin: 0 0 8px 0; | ||
| 11 | + h1 { | ||
| 12 | + line-height: 20px; | ||
| 13 | + font-size: 14px; | ||
| 14 | + font-weight: bold; | ||
| 15 | + } | ||
| 16 | + h2 { | ||
| 17 | + line-height: 20px; | ||
| 18 | + font-size: 14px; | ||
| 19 | + font-weight: bold; | ||
| 20 | + } | ||
| 21 | + .detail-category { | ||
| 22 | + font-size: 12px; | ||
| 23 | + color: #666666; | ||
| 24 | + line-height: 30px; | ||
| 25 | + a { | ||
| 26 | + color: #666666; | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | + /*detail主体*/ | ||
| 31 | + | ||
| 32 | + .detail-body { | ||
| 33 | + float: left; | ||
| 34 | + width: 460px; | ||
| 35 | + object { | ||
| 36 | + width: 460px; | ||
| 37 | + height: 259px; | ||
| 38 | + } | ||
| 39 | + embed { | ||
| 40 | + width: 460px; | ||
| 41 | + height: 259px; | ||
| 42 | + } | ||
| 43 | + video { | ||
| 44 | + width: 460px; | ||
| 45 | + height: 259px; | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + .video-wrap.current { | ||
| 49 | + width: 182px; | ||
| 50 | + object { | ||
| 51 | + width: 182px; | ||
| 52 | + height: 103px; | ||
| 53 | + } | ||
| 54 | + embed { | ||
| 55 | + width: 182px; | ||
| 56 | + height: 103px; | ||
| 57 | + } | ||
| 58 | + video { | ||
| 59 | + width: 182px; | ||
| 60 | + height: 103px; | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + /*slide图片*/ | ||
| 64 | + | ||
| 65 | + .detail-slide-body { | ||
| 66 | + width: 100%; | ||
| 67 | + height: 266px; | ||
| 68 | + overflow: hidden; | ||
| 69 | + } | ||
| 70 | + .detail-slide-piclist { | ||
| 71 | + li { | ||
| 72 | + float: left; | ||
| 73 | + width: 460px; | ||
| 74 | + height: 266px; | ||
| 75 | + line-height: 266px; | ||
| 76 | + } | ||
| 77 | + } | ||
| 78 | + .detail-slide-ctrl { | ||
| 79 | + padding: 15px 0 0 0; | ||
| 80 | + width: 100%; | ||
| 81 | + height: 44px; | ||
| 82 | + position: relative; | ||
| 83 | + .detail-slide-ctrl-prev, .detail-slide-ctrl-next { | ||
| 84 | + position: relative; | ||
| 85 | + margin: -44px 0 0 0; | ||
| 86 | + width: 20px; | ||
| 87 | + height: 44px; | ||
| 88 | + line-height: 44px; | ||
| 89 | + background-size: 50% 50%; | ||
| 90 | + } | ||
| 91 | + .detail-slide-ctrl-prev { | ||
| 92 | + margin-right: -20px; | ||
| 93 | + } | ||
| 94 | + .detail-slide-ctrl-next { | ||
| 95 | + margin-left: -20px; | ||
| 96 | + } | ||
| 97 | + } | ||
| 98 | + .detail-slide-ctrl-tabs { | ||
| 99 | + li { | ||
| 100 | + position: relative; | ||
| 101 | + float: left; | ||
| 102 | + margin: 0 0 0 4px; | ||
| 103 | + img { | ||
| 104 | + display: block; | ||
| 105 | + width: 77px; | ||
| 106 | + height: 44px; | ||
| 107 | + } | ||
| 108 | + } | ||
| 109 | + li:first-child { | ||
| 110 | + margin: 0; | ||
| 111 | + } | ||
| 112 | + li.current { | ||
| 113 | + .border { | ||
| 114 | + position: absolute; | ||
| 115 | + left: 0px; | ||
| 116 | + right: 0px; | ||
| 117 | + top: 0px; | ||
| 118 | + bottom: 0px; | ||
| 119 | + border: 1px solid #000; | ||
| 120 | + } | ||
| 121 | + .arrow { | ||
| 122 | + position: absolute; | ||
| 123 | + width: 11px; | ||
| 124 | + height: 6px; | ||
| 125 | + top: -5px; | ||
| 126 | + left: 50%; | ||
| 127 | + margin: 0 0 0 -5px; | ||
| 128 | + background-image: url("../assets/images/detail/slide-arrow.png"); | ||
| 129 | + background-size: 100% 100%; | ||
| 130 | + } | ||
| 131 | + } | ||
| 132 | + } | ||
| 133 | + /*资讯主体*/ | ||
| 134 | + | ||
| 135 | + .text-body { | ||
| 136 | + line-height: 20px; | ||
| 137 | + p { | ||
| 138 | + margin: 16px 0; | ||
| 139 | + line-height: 20px; | ||
| 140 | + font-size: 12px; | ||
| 141 | + } | ||
| 142 | + } | ||
| 143 | + /*标签*/ | ||
| 144 | + | ||
| 145 | + .tag-box { | ||
| 146 | + margin: 26px 0 0 0; | ||
| 147 | + padding: 0 0 11px 0; | ||
| 148 | + background-size: 100%; | ||
| 149 | + .taglist { | ||
| 150 | + padding: 0 0 0 18px; | ||
| 151 | + background: url("../assets/images/detail/tag-icon.png") no-repeat 1px 6px; | ||
| 152 | + } | ||
| 153 | + li { | ||
| 154 | + float: left; | ||
| 155 | + line-height: 24px; | ||
| 156 | + height: 24px; | ||
| 157 | + a { | ||
| 158 | + padding: 0 10px 0 10px; | ||
| 159 | + font-size: 14px; | ||
| 160 | + color: #1c1c1b; | ||
| 161 | + font-weight: bold; | ||
| 162 | + } | ||
| 163 | + } | ||
| 164 | + li:last-child { | ||
| 165 | + background: none; | ||
| 166 | + } | ||
| 167 | + li.last-child { | ||
| 168 | + background: none; | ||
| 169 | + } | ||
| 170 | + } | ||
| 171 | + /*统计栏*/ | ||
| 172 | + | ||
| 173 | + .stats-btn { | ||
| 174 | + margin: 16px 0 0 0; | ||
| 175 | + .statslist { | ||
| 176 | + float: right; | ||
| 177 | + } | ||
| 178 | + li { | ||
| 179 | + float: left; | ||
| 180 | + width: 52px; | ||
| 181 | + img { | ||
| 182 | + display: block; | ||
| 183 | + margin: 1px 0 0 1px; | ||
| 184 | + } | ||
| 185 | + strong { | ||
| 186 | + float: left; | ||
| 187 | + width: 20px; | ||
| 188 | + height: 20px; | ||
| 189 | + img { | ||
| 190 | + display: block; | ||
| 191 | + width: 18px; | ||
| 192 | + height: 18px; | ||
| 193 | + } | ||
| 194 | + } | ||
| 195 | + span { | ||
| 196 | + float: left; | ||
| 197 | + margin: -6px 0 0 -2px; | ||
| 198 | + font-size: 10px; | ||
| 199 | + color: #000; | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + li.comments { | ||
| 203 | + margin: 0; | ||
| 204 | + padding: 0; | ||
| 205 | + border-left: 1px solid #000; | ||
| 206 | + img, span { | ||
| 207 | + float: right; | ||
| 208 | + } | ||
| 209 | + span { | ||
| 210 | + margin: 10px 0 0 0; | ||
| 211 | + img { | ||
| 212 | + width: 17px; | ||
| 213 | + height: 8px; | ||
| 214 | + } | ||
| 215 | + line-height:8px; | ||
| 216 | + } | ||
| 217 | + img { | ||
| 218 | + width: 18px; | ||
| 219 | + height: 17px; | ||
| 220 | + } | ||
| 221 | + } | ||
| 222 | + li.current { | ||
| 223 | + strong { | ||
| 224 | + background-image: url("../assets/images/detail/stats-cur-bg.png"); | ||
| 225 | + background-size: 100% 100%; | ||
| 226 | + } | ||
| 227 | + } | ||
| 228 | + } | ||
| 229 | + /*评论*/ | ||
| 230 | + | ||
| 231 | + .comments-box { | ||
| 232 | + margin: 5px 0 0 0; | ||
| 233 | + } | ||
| 234 | + .comments-list { | ||
| 235 | + li { | ||
| 236 | + padding: 6px 0 10 0; | ||
| 237 | + border-bottom: 1px solid #dbdbdb; | ||
| 238 | + position: relative; | ||
| 239 | + .userimg { | ||
| 240 | + float: left; | ||
| 241 | + margin: 5px 0 0 3px; | ||
| 242 | + width: 28px; | ||
| 243 | + height: 28px; | ||
| 244 | + img { | ||
| 245 | + width: 100%; | ||
| 246 | + height: 100%; | ||
| 247 | + } | ||
| 248 | + i { | ||
| 249 | + width: 11px; | ||
| 250 | + height: 11px; | ||
| 251 | + left: 20px; | ||
| 252 | + bottom: 4px; | ||
| 253 | + background-size: 100% 100%; | ||
| 254 | + } | ||
| 255 | + } | ||
| 256 | + .userinfo { | ||
| 257 | + float: left; | ||
| 258 | + margin: 0 0 0 10px; | ||
| 259 | + h6 { | ||
| 260 | + line-height: 20px; | ||
| 261 | + font-size: 13px; | ||
| 262 | + font-weight: bold; | ||
| 263 | + } | ||
| 264 | + p { | ||
| 265 | + margin: 2px 0 0 0; | ||
| 266 | + line-height: 16px; | ||
| 267 | + font-size: 12px; | ||
| 268 | + } | ||
| 269 | + } | ||
| 270 | + } | ||
| 271 | + } | ||
| 272 | + .view-more { | ||
| 273 | + margin: 18px 0 23px 0; | ||
| 274 | + font-weight: bold; | ||
| 275 | + text-align: center; | ||
| 276 | + font-size: 14px; | ||
| 277 | + line-height: 16px; | ||
| 278 | + a { | ||
| 279 | + color: #000; | ||
| 280 | + } | ||
| 281 | + } | ||
| 282 | + .comment-textarea { | ||
| 283 | + .anonymous-info { | ||
| 284 | + margin-bottom: 6px; | ||
| 285 | + input { | ||
| 286 | + padding: 0 6px; | ||
| 287 | + width: 217px; | ||
| 288 | + height: 23px; | ||
| 289 | + line-height: 23px; | ||
| 290 | + &:first-child { | ||
| 291 | + width: 216px; | ||
| 292 | + } | ||
| 293 | + } | ||
| 294 | + } | ||
| 295 | + textarea { | ||
| 296 | + width: 447px; | ||
| 297 | + height: 35px; | ||
| 298 | + border: 1px solid #000; | ||
| 299 | + resize: none; | ||
| 300 | + margin: 0; | ||
| 301 | + padding: 6px; | ||
| 302 | + } | ||
| 303 | + .login-status { | ||
| 304 | + width: 455px; | ||
| 305 | + height: 24px; | ||
| 306 | + padding: 2px; | ||
| 307 | + border: 1px solid #000; | ||
| 308 | + border-top: none; | ||
| 309 | + .userimg { | ||
| 310 | + float: left; | ||
| 311 | + margin: 3px 0 0 10px; | ||
| 312 | + width: 20px; | ||
| 313 | + height: 20px; | ||
| 314 | + i { | ||
| 315 | + width: 7px; | ||
| 316 | + height: 7px; | ||
| 317 | + left: 15px; | ||
| 318 | + background-size: 100% 100%; | ||
| 319 | + } | ||
| 320 | + } | ||
| 321 | + .userinfo { | ||
| 322 | + margin: 0 0 0 18px; | ||
| 323 | + font-size: 12px; | ||
| 324 | + line-height: 24px; | ||
| 325 | + } | ||
| 326 | + .anonymous { | ||
| 327 | + line-height: 20px; | ||
| 328 | + } | ||
| 329 | + .publish { | ||
| 330 | + margin: 0px 16px 0 0; | ||
| 331 | + .publish-btn { | ||
| 332 | + width: 55px; | ||
| 333 | + height: 22px; | ||
| 334 | + line-height: 22px; | ||
| 335 | + background-image: url("../assets/images/detail/publish-btn.png"); | ||
| 336 | + background-size: 100% 100%; | ||
| 337 | + font-size: 12px; | ||
| 338 | + } | ||
| 339 | + } | ||
| 340 | + } | ||
| 341 | + } | ||
| 342 | + /*上一篇下一篇*/ | ||
| 343 | + | ||
| 344 | + .news-next-prev { | ||
| 345 | + margin: 30px 0 0 0; | ||
| 346 | + height: 16px; | ||
| 347 | + .prev { | ||
| 348 | + float: left; | ||
| 349 | + a { | ||
| 350 | + margin: 0 0 0 12px; | ||
| 351 | + padding: 0 0 0 22px; | ||
| 352 | + background: url("../assets/images/detail/prev-arrow-1024.png") no-repeat left center; | ||
| 353 | + } | ||
| 354 | + } | ||
| 355 | + .next { | ||
| 356 | + float: right; | ||
| 357 | + a { | ||
| 358 | + margin: 0 12px 0 0; | ||
| 359 | + padding: 0 22px 0 0; | ||
| 360 | + background: url("../assets/images/detail/next-arrow-1024.png") no-repeat right center; | ||
| 361 | + } | ||
| 362 | + } | ||
| 363 | + a { | ||
| 364 | + display: block; | ||
| 365 | + line-height: 16px; | ||
| 366 | + font-size: 14px; | ||
| 367 | + color: #999999; | ||
| 368 | + } | ||
| 369 | + } | ||
| 370 | + /*related posts*/ | ||
| 371 | + | ||
| 372 | + .related-posts { | ||
| 373 | + margin: 25px 0 0 0; | ||
| 374 | + h2 { | ||
| 375 | + padding: 0 0 6px 0; | ||
| 376 | + line-height: 22px; | ||
| 377 | + font-size: 14px; | ||
| 378 | + color: #000; | ||
| 379 | + font-weight: bold; | ||
| 380 | + background-image: url("../assets/images/detail/detail-line-1024.png"); | ||
| 381 | + background-repeat: no-repeat; | ||
| 382 | + background-position: center bottom; | ||
| 383 | + background-size: 100%; | ||
| 384 | + } | ||
| 385 | + .load-more { | ||
| 386 | + width: 119px; | ||
| 387 | + height: 25px; | ||
| 388 | + } | ||
| 389 | + } | ||
| 390 | + .related-posts .postslist { | ||
| 391 | + margin: 14px 0 0 0; | ||
| 392 | + width: 488px; | ||
| 393 | + li { | ||
| 394 | + float: left; | ||
| 395 | + margin: 0 32px 0 0; | ||
| 396 | + width: 212px; | ||
| 397 | + height: 198px; | ||
| 398 | + .pic { | ||
| 399 | + position: relative; | ||
| 400 | + img { | ||
| 401 | + display: block; | ||
| 402 | + width: 100%; | ||
| 403 | + height: 135px; | ||
| 404 | + } | ||
| 405 | + .play-icon { | ||
| 406 | + position: absolute; | ||
| 407 | + width: 47px; | ||
| 408 | + height: 43px; | ||
| 409 | + background: url("../assets/images/detail/play-icon-1024.png"); | ||
| 410 | + background-size: 100% 100%; | ||
| 411 | + left: 50%; | ||
| 412 | + top: 50%; | ||
| 413 | + margin: -22px 0 0 -23px; | ||
| 414 | + } | ||
| 415 | + .arrow-bottom { | ||
| 416 | + border-width: 28px; | ||
| 417 | + border-right-width: 0; | ||
| 418 | + } | ||
| 419 | + } | ||
| 420 | + h4 { | ||
| 421 | + margin: 6px 0 0 0; | ||
| 422 | + font-size: 12px; | ||
| 423 | + color: #000; | ||
| 424 | + line-height: 14px; | ||
| 425 | + font-weight: bold; | ||
| 426 | + } | ||
| 427 | + p { | ||
| 428 | + font-weight: bold; | ||
| 429 | + margin: 5px 0 0 0; | ||
| 430 | + line-height: 14px; | ||
| 431 | + font-size: 12px; | ||
| 432 | + color: #333; | ||
| 433 | + } | ||
| 434 | + } | ||
| 435 | + } | ||
| 436 | + /*分享*/ | ||
| 437 | + | ||
| 438 | + .share { | ||
| 439 | + top: 256px; | ||
| 440 | + left: 50%; | ||
| 441 | + margin-left: -370px; | ||
| 442 | + h4 { | ||
| 443 | + line-height: 23px; | ||
| 444 | + font-size: 13px; | ||
| 445 | + color: #000; | ||
| 446 | + margin-bottom: 4px; | ||
| 447 | + } | ||
| 448 | + li { | ||
| 449 | + width: 30px; | ||
| 450 | + height: 30px; | ||
| 451 | + margin-bottom: 10px; | ||
| 452 | + img { | ||
| 453 | + display: block; | ||
| 454 | + width: 100%; | ||
| 455 | + height: 100%; | ||
| 456 | + } | ||
| 457 | + } | ||
| 458 | + } | ||
| 459 | + /*detail侧边栏*/ | ||
| 460 | + | ||
| 461 | + .detail-side { | ||
| 462 | + float: left; | ||
| 463 | + margin: 0 0 0 26px; | ||
| 464 | + width: 182px; | ||
| 465 | + } | ||
| 466 | + .detail-ad { | ||
| 467 | + img { | ||
| 468 | + display: block; | ||
| 469 | + width: 100%; | ||
| 470 | + } | ||
| 471 | + } | ||
| 472 | + .app-download { | ||
| 473 | + margin: 17px 0 0 0; | ||
| 474 | + padding: 6px 0 6px 6px; | ||
| 475 | + width: 176px; | ||
| 476 | + height: 62px; | ||
| 477 | + background-size: 100% 100%; | ||
| 478 | + .qr { | ||
| 479 | + float: left; | ||
| 480 | + width: 66px; | ||
| 481 | + height: 62px; | ||
| 482 | + img { | ||
| 483 | + display: block; | ||
| 484 | + width: 100%; | ||
| 485 | + height: 100%; | ||
| 486 | + } | ||
| 487 | + } | ||
| 488 | + .app-main { | ||
| 489 | + float: left; | ||
| 490 | + margin: 0 0 0 5px; | ||
| 491 | + h6 { | ||
| 492 | + margin: 0; | ||
| 493 | + line-height: 20px; | ||
| 494 | + font-size: 13px; | ||
| 495 | + color: #000; | ||
| 496 | + } | ||
| 497 | + p { | ||
| 498 | + width: 90px; | ||
| 499 | + line-height: 12px; | ||
| 500 | + font-size: 10px; | ||
| 501 | + color: #989898; | ||
| 502 | + } | ||
| 503 | + .download-btn { | ||
| 504 | + margin: 2px 0 0 0; | ||
| 505 | + a { | ||
| 506 | + float: left; | ||
| 507 | + margin: 0 0 0 10px; | ||
| 508 | + width: 33px; | ||
| 509 | + height: 13px; | ||
| 510 | + img { | ||
| 511 | + display: block; | ||
| 512 | + width: 100%; | ||
| 513 | + height: 100%; | ||
| 514 | + } | ||
| 515 | + } | ||
| 516 | + a:first-child { | ||
| 517 | + width: 46px; | ||
| 518 | + height: 13px; | ||
| 519 | + margin: 0; | ||
| 520 | + } | ||
| 521 | + } | ||
| 522 | + } | ||
| 523 | + } | ||
| 524 | + .focus-us { | ||
| 525 | + margin: 19px 0 0 0; | ||
| 526 | + padding: 12px 15px 17px; | ||
| 527 | + width: 152px; | ||
| 528 | + height: 66px; | ||
| 529 | + background-size: 100% 100%; | ||
| 530 | + h4 { | ||
| 531 | + line-height: 20px; | ||
| 532 | + font-size: 18px; | ||
| 533 | + color: #000; | ||
| 534 | + text-align: center; | ||
| 535 | + } | ||
| 536 | + .focuslist { | ||
| 537 | + margin: 7px auto 0; | ||
| 538 | + li { | ||
| 539 | + float: left; | ||
| 540 | + width: 15px; | ||
| 541 | + height: 15px; | ||
| 542 | + margin: 0 0px 0 16px; | ||
| 543 | + img { | ||
| 544 | + display: block; | ||
| 545 | + height: 100%; | ||
| 546 | + margin: 0 auto; | ||
| 547 | + } | ||
| 548 | + } | ||
| 549 | + li.focus-wx { | ||
| 550 | + position: relative; | ||
| 551 | + .pop { | ||
| 552 | + display: none; | ||
| 553 | + z-index: 999; | ||
| 554 | + position: absolute; | ||
| 555 | + width: 85px; | ||
| 556 | + height: 76px; | ||
| 557 | + left: -34px; | ||
| 558 | + top: 18px; | ||
| 559 | + line-height: 76px; | ||
| 560 | + vertical-align: middle; | ||
| 561 | + background-size: 310%; | ||
| 562 | + img { | ||
| 563 | + display: inline; | ||
| 564 | + vertical-align: middle; | ||
| 565 | + width: 65px; | ||
| 566 | + height: 65px; | ||
| 567 | + margin: 7px 0 0 0; | ||
| 568 | + } | ||
| 569 | + } | ||
| 570 | + } | ||
| 571 | + li:first-child { | ||
| 572 | + margin: 0 0 0 4px; | ||
| 573 | + } | ||
| 574 | + } | ||
| 575 | + .textbox { | ||
| 576 | + margin: 8px 0 0 0; | ||
| 577 | + input { | ||
| 578 | + float: left; | ||
| 579 | + padding: 0 0 0 4px; | ||
| 580 | + width: 108px; | ||
| 581 | + height: 14px; | ||
| 582 | + border: 1px solid #000; | ||
| 583 | + outline: none; | ||
| 584 | + font-size: 12px; | ||
| 585 | + } | ||
| 586 | + a { | ||
| 587 | + float: left; | ||
| 588 | + display: inline-block; | ||
| 589 | + width: 38px; | ||
| 590 | + height: 16px; | ||
| 591 | + line-height: 16px; | ||
| 592 | + background: #000; | ||
| 593 | + color: #fff; | ||
| 594 | + font-size: 12px; | ||
| 595 | + text-align: center; | ||
| 596 | + } | ||
| 597 | + } | ||
| 598 | + } | ||
| 599 | + .side-map { | ||
| 600 | + .map-section { | ||
| 601 | + h2 { | ||
| 602 | + font-size: 16px; | ||
| 603 | + background-size: 100%; | ||
| 604 | + } | ||
| 605 | + h6 { | ||
| 606 | + margin: 8px 0 0 6px; | ||
| 607 | + font-size: 13px; | ||
| 608 | + line-height: 16px; | ||
| 609 | + color: #000; | ||
| 610 | + } | ||
| 611 | + p { | ||
| 612 | + font-size: 12px; | ||
| 613 | + } | ||
| 614 | + } | ||
| 615 | + } | ||
| 616 | + .side-video { | ||
| 617 | + margin: 17px 0 0 0; | ||
| 618 | + .video-area { | ||
| 619 | + object { | ||
| 620 | + height: 98px; | ||
| 621 | + embed { | ||
| 622 | + height: 98px; | ||
| 623 | + } | ||
| 624 | + } | ||
| 625 | + video { | ||
| 626 | + height: 98px; | ||
| 627 | + } | ||
| 628 | + img { | ||
| 629 | + width: 100%; | ||
| 630 | + display: block; | ||
| 631 | + } | ||
| 632 | + } | ||
| 633 | + h3 { | ||
| 634 | + margin: 3px 0 0 0; | ||
| 635 | + line-height: 18px; | ||
| 636 | + font-size: 12px; | ||
| 637 | + font-weight: bold; | ||
| 638 | + color: #000; | ||
| 639 | + } | ||
| 640 | + p { | ||
| 641 | + margin: 5px 0 0 0; | ||
| 642 | + line-height: 14px; | ||
| 643 | + font-size: 12px; | ||
| 644 | + color: #000; | ||
| 645 | + } | ||
| 646 | + } | ||
| 647 | + .side-related-posts { | ||
| 648 | + margin: 24px 0 0 0; | ||
| 649 | + h2 { | ||
| 650 | + line-height: 21px; | ||
| 651 | + font-size: 14px; | ||
| 652 | + padding-bottom: 3px; | ||
| 653 | + background-size: 100%; | ||
| 654 | + } | ||
| 655 | + .postslist { | ||
| 656 | + li { | ||
| 657 | + margin: 11px 0 0 0; | ||
| 658 | + max-height: 37px; | ||
| 659 | + overflow: hidden; | ||
| 660 | + .pic { | ||
| 661 | + width: 57px; | ||
| 662 | + height: 38px; | ||
| 663 | + .play-icon { | ||
| 664 | + width: 17px; | ||
| 665 | + height: 16px; | ||
| 666 | + background-size: 100% 100%; | ||
| 667 | + left: 50%; | ||
| 668 | + top: 50%; | ||
| 669 | + margin: -8px 0 0 -9px; | ||
| 670 | + } | ||
| 671 | + } | ||
| 672 | + .post-title { | ||
| 673 | + float: left; | ||
| 674 | + width: 115px; | ||
| 675 | + margin: 0 0 0 10px; | ||
| 676 | + h4 { | ||
| 677 | + font-weight: bold; | ||
| 678 | + font-size: 12px; | ||
| 679 | + line-height: 16px; | ||
| 680 | + } | ||
| 681 | + p { | ||
| 682 | + margin: 5px 0 0 0; | ||
| 683 | + color: #333; | ||
| 684 | + font-weight: bold; | ||
| 685 | + line-height: 16px; | ||
| 686 | + font-size: 12px; | ||
| 687 | + } | ||
| 688 | + } | ||
| 689 | + } | ||
| 690 | + } | ||
| 691 | + } | ||
| 692 | + .detail-zoom { | ||
| 693 | + width: 500px; | ||
| 694 | + margin-left: -250px; | ||
| 695 | + text-align: center; | ||
| 696 | + img { | ||
| 697 | + max-width: 500px; | ||
| 698 | + } | ||
| 699 | + .guide-btn { | ||
| 700 | + &.prev { | ||
| 701 | + left: -70px; | ||
| 702 | + } | ||
| 703 | + &.next { | ||
| 704 | + right: -70px; | ||
| 705 | + } | ||
| 706 | + } | ||
| 707 | + } | ||
| 721 | } | 708 | } |
| 1 | -@media screen and (max-width:768px){ | ||
| 2 | -.mags-container{ | ||
| 3 | - width: 668px; | ||
| 4 | - margin: 0 auto; | ||
| 5 | -} | ||
| 6 | -.newest-mags{ | ||
| 7 | - margin: 25px 0 0 0; | ||
| 8 | -} | ||
| 9 | -.mags-info{ | ||
| 10 | - width: 395px; | ||
| 11 | - h2{ | ||
| 12 | - margin: 17px 0 0 0; | ||
| 13 | - height: 51px; | ||
| 14 | - background-size: 36% 100%; | ||
| 15 | - } | ||
| 16 | - .mags-text{ | ||
| 17 | - margin: 24px auto 0; | ||
| 18 | - width: 258px; | ||
| 19 | - line-height: 18px; | ||
| 20 | - font-size: 12px; | ||
| 21 | - } | ||
| 22 | - .date-price{ | ||
| 23 | - margin: 20px 0 0 0; | ||
| 24 | - p{ | ||
| 25 | - font-size: 14px; | ||
| 26 | - } | ||
| 27 | - .price{ | ||
| 28 | - font-size: 12px; | ||
| 29 | - } | ||
| 30 | - } | ||
| 31 | - .mags-buy{ | ||
| 32 | - margin: 20px 0 0 0; | ||
| 33 | - .buy-btn{ | ||
| 34 | - width: 99px; | ||
| 35 | - height: 21px; | ||
| 36 | - line-height: 21px; | ||
| 37 | - font-size: 14px; | ||
| 38 | - background-size: 100% 100%; | ||
| 39 | - } | ||
| 40 | - } | ||
| 41 | -} | ||
| 42 | - | ||
| 43 | -.mags-slide{ | ||
| 44 | - width: 210px; | ||
| 45 | - .slide-box{ | ||
| 46 | - height:264px; | ||
| 47 | - li{ | ||
| 48 | - width: 210px; | ||
| 49 | - height: 264px; | ||
| 50 | - } | ||
| 51 | - } | ||
| 52 | - .slide-ctrl{ | ||
| 53 | - margin: 8px 0 0 0; | ||
| 54 | - li{ | ||
| 55 | - margin: 0 0 0 9px; | ||
| 56 | - a{ | ||
| 57 | - display: block; | ||
| 58 | - width: 8px; | ||
| 59 | - height: 8px; | ||
| 60 | - background-size: 100% 100%; | ||
| 61 | - } | ||
| 62 | - } | ||
| 63 | - li.on{ | ||
| 64 | - a{ | ||
| 65 | - background-size: 100% 100%; | ||
| 66 | - } | ||
| 67 | - } | ||
| 68 | - } | ||
| 69 | -} | ||
| 70 | - | ||
| 71 | -.column-slide{ | ||
| 72 | - margin: 27px 0 0 0; | ||
| 73 | - .slide-box{ | ||
| 74 | - height: 221px; | ||
| 75 | - .slide-piclist{ | ||
| 76 | - width: 680px; | ||
| 77 | - } | ||
| 78 | - li{ | ||
| 79 | - width: 158px; | ||
| 80 | - margin: 0 12px 0 0; | ||
| 81 | - img{ | ||
| 82 | - width: 100%; | ||
| 83 | - height: 198px; | ||
| 84 | - display: block; | ||
| 85 | - } | ||
| 86 | - span{ | ||
| 87 | - margin: 7px 0 0 0; | ||
| 88 | - line-height: 16px; | ||
| 89 | - font-size: 12px; | ||
| 90 | - } | ||
| 91 | - } | ||
| 92 | - } | ||
| 93 | - .slide-ctrl{ | ||
| 94 | - | ||
| 95 | - a.slide-ctrl-prev{ | ||
| 96 | - left: -30px; | ||
| 97 | - } | ||
| 98 | - a.slide-ctrl-next{ | ||
| 99 | - right: -40px; | ||
| 100 | - } | ||
| 101 | - } | ||
| 102 | -} | ||
| 103 | -.column-slide.magazine-list{ | ||
| 104 | - .slide-box{ | ||
| 105 | - width: 680px; | ||
| 106 | - li{ | ||
| 107 | - width:170px; | ||
| 108 | - a{ | ||
| 109 | - width: 158px; | ||
| 110 | - } | ||
| 111 | - } | ||
| 112 | - } | ||
| 113 | -} | ||
| 114 | -.mags-column{ | ||
| 115 | - margin: 28px 0 0 0; | ||
| 116 | - h2{ | ||
| 117 | - line-height: 23px; | ||
| 118 | - font-size: 20px; | ||
| 119 | - } | ||
| 120 | - .column-slide{ | ||
| 121 | - margin: 0 0 20px 0; | ||
| 122 | - h4{ | ||
| 123 | - line-height: 35px; | ||
| 124 | - font-size: 14px; | ||
| 125 | - } | ||
| 126 | - .slide-box{ | ||
| 127 | - margin: 0px 0 0 0; | ||
| 128 | - .slide-piclist{ | ||
| 129 | - width: 688px; | ||
| 130 | - } | ||
| 131 | - li{ | ||
| 132 | - margin: 0 22px 0 0; | ||
| 133 | - width: 150px; | ||
| 134 | - } | ||
| 135 | - } | ||
| 136 | - .slide-box{ | ||
| 137 | - margin: 0; | ||
| 138 | - height: 268px; | ||
| 139 | - .slide-piclist{ | ||
| 140 | - float: left; | ||
| 141 | - width: 680px; | ||
| 142 | - height: 268px; | ||
| 143 | - } | ||
| 144 | - li{ | ||
| 145 | - margin: 0 8px 0 0; | ||
| 146 | - width: 76px; | ||
| 147 | - height: 134px; | ||
| 148 | - .img-wrap{ | ||
| 149 | - width: 76px; | ||
| 150 | - height: 114px; | ||
| 151 | - } | ||
| 152 | - img{ | ||
| 153 | - width: 76px; | ||
| 154 | - height: 114px; | ||
| 155 | - } | ||
| 156 | - span{ | ||
| 157 | - margin: 0; | ||
| 158 | - line-height: 20px; | ||
| 159 | - font-size: 12px; | ||
| 160 | - } | ||
| 161 | - } | ||
| 162 | - } | ||
| 163 | - .slide-ctrl{ | ||
| 164 | - | ||
| 165 | - a.slide-ctrl-prev{ | ||
| 166 | - left: -30px; | ||
| 167 | - } | ||
| 168 | - a.slide-ctrl-next{ | ||
| 169 | - right: -30px; | ||
| 170 | - } | ||
| 171 | - } | ||
| 172 | - } | ||
| 173 | -} | ||
| 174 | -.column-slide.mags-app-download{ | ||
| 175 | - margin: 20px 0 0 0; | ||
| 176 | - .slide-box{ | ||
| 177 | - height: auto; | ||
| 178 | - li{ | ||
| 179 | - img{ | ||
| 180 | - width: auto; | ||
| 181 | - margin: 0 auto; | ||
| 182 | - } | ||
| 183 | - span{ | ||
| 184 | - font-size: 12px; | ||
| 185 | - line-height: 14px; | ||
| 186 | - } | ||
| 187 | - h6{ | ||
| 188 | - margin: 8px 0 0 12px; | ||
| 189 | - line-height: 20px; | ||
| 190 | - font-size: 18px; | ||
| 191 | - } | ||
| 192 | - p{ | ||
| 193 | - margin: 0 0 0 12px; | ||
| 194 | - line-height: 14px; | ||
| 195 | - color: #666666; | ||
| 196 | - font-size: 13px; | ||
| 197 | - } | ||
| 198 | - strong{ | ||
| 199 | - display: block; | ||
| 200 | - margin: 12px 0 0 12px; | ||
| 201 | - line-height: 18px; | ||
| 202 | - font-size: 12px; | ||
| 203 | - color: #000; | ||
| 204 | - } | ||
| 205 | - } | ||
| 206 | - li.column-slide01{ | ||
| 207 | - img{ | ||
| 208 | - width: 120px; | ||
| 209 | - height: 110px; | ||
| 210 | - } | ||
| 211 | - } | ||
| 212 | - li.column-slide02{ | ||
| 213 | - img{ | ||
| 214 | - margin: 11px 0 0 38px; | ||
| 215 | - width: 123px; | ||
| 216 | - height: 94px; | ||
| 217 | - } | ||
| 218 | - } | ||
| 219 | - li.column-slide03{ | ||
| 220 | - img{ | ||
| 221 | - width: 94px; | ||
| 222 | - height: 90px; | ||
| 223 | - } | ||
| 224 | - } | ||
| 225 | - } | ||
| 226 | -} | ||
| 227 | - | ||
| 228 | -.column-slide.rule{ | ||
| 229 | - margin: 40px 0 0 0; | ||
| 230 | - h2{ | ||
| 231 | - line-height: 48px; | ||
| 232 | - font-size: 28px; | ||
| 233 | - font-weight: bold; | ||
| 234 | - text-align: center; | ||
| 235 | - } | ||
| 236 | - .slide-box{ | ||
| 237 | - margin: 15px 0 0 0; | ||
| 238 | - height: 237px; | ||
| 239 | - } | ||
| 240 | -} | ||
| 241 | - | ||
| 242 | -.magazine-zoom { | ||
| 243 | - width: 400px; | ||
| 244 | - margin-left: -200px; | ||
| 245 | - text-align: center; | ||
| 246 | - | ||
| 247 | - img { | ||
| 248 | - max-width: 400px; | ||
| 249 | - } | ||
| 250 | - | ||
| 251 | - .guide-btn { | ||
| 252 | - | ||
| 253 | - &.prev { | ||
| 254 | - left: -90px; | ||
| 255 | - } | ||
| 256 | - | ||
| 257 | - &.next { | ||
| 258 | - right: -90px; | ||
| 259 | - } | ||
| 260 | - } | ||
| 261 | -} | 1 | +@media screen and (max-width: 768px) { |
| 2 | + .mags-container { | ||
| 3 | + width: 668px; | ||
| 4 | + margin: 0 auto; | ||
| 5 | + } | ||
| 6 | + .newest-mags { | ||
| 7 | + margin: 25px 0 0 0; | ||
| 8 | + } | ||
| 9 | + .mags-info { | ||
| 10 | + width: 395px; | ||
| 11 | + h2 { | ||
| 12 | + margin: 17px 0 0 0; | ||
| 13 | + height: 51px; | ||
| 14 | + background-size: 36% 100%; | ||
| 15 | + } | ||
| 16 | + .mags-text { | ||
| 17 | + margin: 24px auto 0; | ||
| 18 | + width: 258px; | ||
| 19 | + line-height: 18px; | ||
| 20 | + font-size: 12px; | ||
| 21 | + } | ||
| 22 | + .date-price { | ||
| 23 | + margin: 20px 0 0 0; | ||
| 24 | + p { | ||
| 25 | + font-size: 14px; | ||
| 26 | + } | ||
| 27 | + .price { | ||
| 28 | + font-size: 12px; | ||
| 29 | + } | ||
| 30 | + } | ||
| 31 | + .mags-buy { | ||
| 32 | + margin: 20px 0 0 0; | ||
| 33 | + .buy-btn { | ||
| 34 | + width: 99px; | ||
| 35 | + height: 21px; | ||
| 36 | + line-height: 21px; | ||
| 37 | + font-size: 14px; | ||
| 38 | + background-size: 100% 100%; | ||
| 39 | + } | ||
| 40 | + } | ||
| 41 | + } | ||
| 42 | + .mags-slide { | ||
| 43 | + width: 210px; | ||
| 44 | + .slide-box { | ||
| 45 | + height: 264px; | ||
| 46 | + li { | ||
| 47 | + width: 210px; | ||
| 48 | + height: 264px; | ||
| 49 | + } | ||
| 50 | + } | ||
| 51 | + .slide-ctrl { | ||
| 52 | + margin: 8px 0 0 0; | ||
| 53 | + li { | ||
| 54 | + margin: 0 0 0 9px; | ||
| 55 | + a { | ||
| 56 | + display: block; | ||
| 57 | + width: 8px; | ||
| 58 | + height: 8px; | ||
| 59 | + background-size: 100% 100%; | ||
| 60 | + } | ||
| 61 | + } | ||
| 62 | + li.on { | ||
| 63 | + a { | ||
| 64 | + background-size: 100% 100%; | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + .column-slide { | ||
| 70 | + margin: 27px 0 0 0; | ||
| 71 | + .slide-box { | ||
| 72 | + height: 221px; | ||
| 73 | + .slide-piclist { | ||
| 74 | + width: 680px; | ||
| 75 | + } | ||
| 76 | + li { | ||
| 77 | + width: 158px; | ||
| 78 | + margin: 0 12px 0 0; | ||
| 79 | + img { | ||
| 80 | + width: 100%; | ||
| 81 | + height: 198px; | ||
| 82 | + display: block; | ||
| 83 | + } | ||
| 84 | + span { | ||
| 85 | + margin: 7px 0 0 0; | ||
| 86 | + line-height: 16px; | ||
| 87 | + font-size: 12px; | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | + } | ||
| 91 | + .slide-ctrl { | ||
| 92 | + a.slide-ctrl-prev { | ||
| 93 | + left: -30px; | ||
| 94 | + } | ||
| 95 | + a.slide-ctrl-next { | ||
| 96 | + right: -40px; | ||
| 97 | + } | ||
| 98 | + } | ||
| 99 | + } | ||
| 100 | + .column-slide.magazine-list { | ||
| 101 | + .slide-box { | ||
| 102 | + width: 680px; | ||
| 103 | + li { | ||
| 104 | + width: 170px; | ||
| 105 | + a { | ||
| 106 | + width: 158px; | ||
| 107 | + } | ||
| 108 | + } | ||
| 109 | + } | ||
| 110 | + } | ||
| 111 | + .mags-column { | ||
| 112 | + margin: 28px 0 0 0; | ||
| 113 | + h2 { | ||
| 114 | + line-height: 23px; | ||
| 115 | + font-size: 20px; | ||
| 116 | + } | ||
| 117 | + .column-slide { | ||
| 118 | + margin: 0 0 20px 0; | ||
| 119 | + h4 { | ||
| 120 | + line-height: 35px; | ||
| 121 | + font-size: 14px; | ||
| 122 | + } | ||
| 123 | + .slide-box { | ||
| 124 | + margin: 0px 0 0 0; | ||
| 125 | + .slide-piclist { | ||
| 126 | + width: 688px; | ||
| 127 | + } | ||
| 128 | + li { | ||
| 129 | + margin: 0 22px 0 0; | ||
| 130 | + width: 150px; | ||
| 131 | + } | ||
| 132 | + } | ||
| 133 | + .slide-box { | ||
| 134 | + margin: 0; | ||
| 135 | + height: 268px; | ||
| 136 | + .slide-piclist { | ||
| 137 | + float: left; | ||
| 138 | + width: 680px; | ||
| 139 | + height: 268px; | ||
| 140 | + } | ||
| 141 | + li { | ||
| 142 | + margin: 0 8px 0 0; | ||
| 143 | + width: 76px; | ||
| 144 | + height: 134px; | ||
| 145 | + .img-wrap { | ||
| 146 | + width: 76px; | ||
| 147 | + height: 114px; | ||
| 148 | + } | ||
| 149 | + img { | ||
| 150 | + width: 76px; | ||
| 151 | + height: 114px; | ||
| 152 | + } | ||
| 153 | + span { | ||
| 154 | + margin: 0; | ||
| 155 | + line-height: 20px; | ||
| 156 | + font-size: 12px; | ||
| 157 | + } | ||
| 158 | + } | ||
| 159 | + } | ||
| 160 | + .slide-ctrl { | ||
| 161 | + a.slide-ctrl-prev { | ||
| 162 | + left: -30px; | ||
| 163 | + } | ||
| 164 | + a.slide-ctrl-next { | ||
| 165 | + right: -30px; | ||
| 166 | + } | ||
| 167 | + } | ||
| 168 | + } | ||
| 169 | + } | ||
| 170 | + .column-slide.mags-app-download { | ||
| 171 | + margin: 20px 0 0 0; | ||
| 172 | + .slide-box { | ||
| 173 | + height: auto; | ||
| 174 | + li { | ||
| 175 | + img { | ||
| 176 | + width: auto; | ||
| 177 | + margin: 0 auto; | ||
| 178 | + } | ||
| 179 | + span { | ||
| 180 | + font-size: 12px; | ||
| 181 | + line-height: 14px; | ||
| 182 | + } | ||
| 183 | + h6 { | ||
| 184 | + margin: 8px 0 0 12px; | ||
| 185 | + line-height: 20px; | ||
| 186 | + font-size: 18px; | ||
| 187 | + } | ||
| 188 | + p { | ||
| 189 | + margin: 0 0 0 12px; | ||
| 190 | + line-height: 14px; | ||
| 191 | + color: #666666; | ||
| 192 | + font-size: 13px; | ||
| 193 | + } | ||
| 194 | + strong { | ||
| 195 | + display: block; | ||
| 196 | + margin: 12px 0 0 12px; | ||
| 197 | + line-height: 18px; | ||
| 198 | + font-size: 12px; | ||
| 199 | + color: #000; | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + li.column-slide01 { | ||
| 203 | + img { | ||
| 204 | + width: 120px; | ||
| 205 | + height: 110px; | ||
| 206 | + } | ||
| 207 | + } | ||
| 208 | + li.column-slide02 { | ||
| 209 | + img { | ||
| 210 | + margin: 11px 0 0 38px; | ||
| 211 | + width: 123px; | ||
| 212 | + height: 94px; | ||
| 213 | + } | ||
| 214 | + } | ||
| 215 | + li.column-slide03 { | ||
| 216 | + img { | ||
| 217 | + width: 94px; | ||
| 218 | + height: 90px; | ||
| 219 | + } | ||
| 220 | + } | ||
| 221 | + } | ||
| 222 | + } | ||
| 223 | + .column-slide.rule { | ||
| 224 | + margin: 40px 0 0 0; | ||
| 225 | + h2 { | ||
| 226 | + line-height: 48px; | ||
| 227 | + font-size: 28px; | ||
| 228 | + font-weight: bold; | ||
| 229 | + text-align: center; | ||
| 230 | + } | ||
| 231 | + .slide-box { | ||
| 232 | + margin: 15px 0 0 0; | ||
| 233 | + height: 237px; | ||
| 234 | + } | ||
| 235 | + } | ||
| 236 | + .magazine-zoom { | ||
| 237 | + width: 400px; | ||
| 238 | + margin-left: -200px; | ||
| 239 | + text-align: center; | ||
| 240 | + img { | ||
| 241 | + max-width: 400px; | ||
| 242 | + } | ||
| 243 | + .guide-btn { | ||
| 244 | + &.prev { | ||
| 245 | + left: -90px; | ||
| 246 | + } | ||
| 247 | + &.next { | ||
| 248 | + right: -90px; | ||
| 249 | + } | ||
| 250 | + } | ||
| 251 | + } | ||
| 262 | } | 252 | } |
| @@ -4,7 +4,6 @@ | @@ -4,7 +4,6 @@ | ||
| 4 | } | 4 | } |
| 5 | 5 | ||
| 6 | 6 | ||
| 7 | -/*detail标题*/ | ||
| 8 | .detail-title{ | 7 | .detail-title{ |
| 9 | width: 100%; | 8 | width: 100%; |
| 10 | margin: 0 0 5px 0; | 9 | margin: 0 0 5px 0; |
| @@ -29,10 +28,10 @@ | @@ -29,10 +28,10 @@ | ||
| 29 | text-decoration: underline; | 28 | text-decoration: underline; |
| 30 | } | 29 | } |
| 31 | } | 30 | } |
| 32 | -} | 31 | +} |
| 32 | + | ||
| 33 | 33 | ||
| 34 | -/*detail主体*/ | ||
| 35 | -.detail-body{ | 34 | +.detail-body{ |
| 36 | float: left; | 35 | float: left; |
| 37 | width: 630px; | 36 | width: 630px; |
| 38 | font-size:14px; | 37 | font-size:14px; |
| @@ -609,7 +608,7 @@ | @@ -609,7 +608,7 @@ | ||
| 609 | background-size: 100% 100%; | 608 | background-size: 100% 100%; |
| 610 | } | 609 | } |
| 611 | } | 610 | } |
| 612 | -.postslist{ | 611 | +.related-posts .postslist{ |
| 613 | margin: 14px 0 0 0; | 612 | margin: 14px 0 0 0; |
| 614 | width: 672px; | 613 | width: 672px; |
| 615 | li{ | 614 | li{ |
| @@ -866,7 +865,6 @@ | @@ -866,7 +865,6 @@ | ||
| 866 | } | 865 | } |
| 867 | } | 866 | } |
| 868 | .side-video{ | 867 | .side-video{ |
| 869 | - display: none; | ||
| 870 | margin: 29px 0 0 0; | 868 | margin: 29px 0 0 0; |
| 871 | .video-area{ | 869 | .video-area{ |
| 872 | position: relative; | 870 | position: relative; |
| @@ -910,7 +908,6 @@ | @@ -910,7 +908,6 @@ | ||
| 910 | } | 908 | } |
| 911 | } | 909 | } |
| 912 | .side-related-posts{ | 910 | .side-related-posts{ |
| 913 | - display: none; | ||
| 914 | margin: 35px 0 0 0; | 911 | margin: 35px 0 0 0; |
| 915 | background: #fff; | 912 | background: #fff; |
| 916 | h2{ | 913 | h2{ |
| @@ -921,55 +918,56 @@ | @@ -921,55 +918,56 @@ | ||
| 921 | background-repeat: no-repeat; | 918 | background-repeat: no-repeat; |
| 922 | background-position: left bottom; | 919 | background-position: left bottom; |
| 923 | } | 920 | } |
| 924 | -} | ||
| 925 | -.side-postslist{ | ||
| 926 | - li{ | ||
| 927 | - margin: 18px 0 0 0; | ||
| 928 | - a{ | ||
| 929 | - display: block; | ||
| 930 | - } | ||
| 931 | - .pic{ | ||
| 932 | - position: relative; | ||
| 933 | - float: left; | ||
| 934 | - margin: 3px 0 0 0; | ||
| 935 | - width: 77px; | ||
| 936 | - height: 51px; | ||
| 937 | - img{ | ||
| 938 | - width: 100%; | ||
| 939 | - height: 100%; | ||
| 940 | - display: block; | ||
| 941 | - } | ||
| 942 | - .play-icon{ | ||
| 943 | - position: absolute; | ||
| 944 | - width: 20px; | ||
| 945 | - height: 19px; | ||
| 946 | - background-image: url("../assets/images/detail/play-icon-s.png"); | ||
| 947 | - left: 50%; | ||
| 948 | - top: 50%; | ||
| 949 | - margin: -10px 0 0 -10px; | 921 | + .postslist{ |
| 922 | + li{ | ||
| 923 | + margin: 18px 0 0 0; | ||
| 924 | + a{ | ||
| 925 | + display: block; | ||
| 950 | } | 926 | } |
| 951 | - } | ||
| 952 | - .post-title{ | ||
| 953 | - float: left; | ||
| 954 | - width: 155px; | ||
| 955 | - margin: 0 0 0 14px; | ||
| 956 | - h4{ | ||
| 957 | - font-weight: bold; | ||
| 958 | - font-size: 14px; | ||
| 959 | - line-height: 14px; | 927 | + .pic{ |
| 928 | + position: relative; | ||
| 929 | + float: left; | ||
| 930 | + margin: 3px 0 0 0; | ||
| 931 | + width: 77px; | ||
| 932 | + height: 51px; | ||
| 933 | + img{ | ||
| 934 | + width: 100%; | ||
| 935 | + height: 100%; | ||
| 936 | + display: block; | ||
| 937 | + } | ||
| 938 | + .play-icon{ | ||
| 939 | + position: absolute; | ||
| 940 | + width: 20px; | ||
| 941 | + height: 19px; | ||
| 942 | + background-image: url("../assets/images/detail/play-icon-s.png"); | ||
| 943 | + left: 50%; | ||
| 944 | + top: 50%; | ||
| 945 | + margin: -10px 0 0 -10px; | ||
| 946 | + } | ||
| 960 | } | 947 | } |
| 961 | - p{ | ||
| 962 | - font-weight: bold; | ||
| 963 | - margin: 5px 0 0 0; | ||
| 964 | - color: #333; | ||
| 965 | - line-height: 16px; | ||
| 966 | - font-size: 14px; | ||
| 967 | - width: 100%; | 948 | + .post-title{ |
| 949 | + float: left; | ||
| 950 | + width: 155px; | ||
| 951 | + margin: 0 0 0 14px; | ||
| 952 | + h4{ | ||
| 953 | + font-weight: bold; | ||
| 954 | + font-size: 14px; | ||
| 955 | + line-height: 14px; | ||
| 956 | + } | ||
| 957 | + p{ | ||
| 958 | + font-weight: bold; | ||
| 959 | + margin: 5px 0 0 0; | ||
| 960 | + color: #333; | ||
| 961 | + line-height: 16px; | ||
| 962 | + font-size: 14px; | ||
| 963 | + width: 100%; | ||
| 964 | + } | ||
| 968 | } | 965 | } |
| 969 | } | 966 | } |
| 970 | } | 967 | } |
| 971 | } | 968 | } |
| 972 | 969 | ||
| 970 | + | ||
| 973 | .login-box{ | 971 | .login-box{ |
| 974 | position: fixed; | 972 | position: fixed; |
| 975 | width: 400px; | 973 | width: 400px; |
| 1 | -.mags-container{ | ||
| 2 | - width: 924px; | ||
| 3 | - margin: 0 auto; | ||
| 4 | -} | ||
| 5 | -.newest-mags{ | ||
| 6 | - margin: 46px 0 0 0; | ||
| 7 | -} | ||
| 8 | -.mags-info{ | ||
| 9 | - float: left; | ||
| 10 | - width: 546px; | ||
| 11 | - h2{ | ||
| 12 | - margin: 23px 0 0 0; | ||
| 13 | - height: 70px; | ||
| 14 | - background: url("../assets/images/magazine/mags-title.png") no-repeat center center; | ||
| 15 | - } | ||
| 16 | - .mags-text{ | ||
| 17 | - margin: 24px auto 0; | ||
| 18 | - width: 360px; | ||
| 19 | - line-height: 20px; | ||
| 20 | - font-size: 14px; | ||
| 21 | - text-align: center; | ||
| 22 | - color: #444444; | ||
| 23 | - } | ||
| 24 | - .date-price{ | ||
| 25 | - margin: 35px 0 0 0; | ||
| 26 | - p{ | ||
| 27 | - font-size: 17px; | ||
| 28 | - color: #333333; | ||
| 29 | - text-align: center; | ||
| 30 | - } | ||
| 31 | - .price{ | ||
| 32 | - color: #666666; | ||
| 33 | - font-size: 14px; | ||
| 34 | - } | ||
| 35 | - } | ||
| 36 | - .mags-buy{ | ||
| 37 | - margin: 18px 0 0 0; | ||
| 38 | - .buy-btn{ | ||
| 39 | - display: block; | ||
| 40 | - margin: 0 auto; | ||
| 41 | - width: 137px; | ||
| 42 | - height: 29px; | ||
| 43 | - line-height: 29px; | ||
| 44 | - font-size: 17px; | ||
| 45 | - color: #fff; | ||
| 46 | - text-align: center; | ||
| 47 | - background-image: url("../assets/images/magazine/buy-btn-1024.png"); | ||
| 48 | - background-position: center center; | ||
| 49 | - background-repeat: no-repeat; | ||
| 50 | - } | ||
| 51 | - } | 1 | +.mags-container { |
| 2 | + width: 924px; | ||
| 3 | + margin: 0 auto; | ||
| 52 | } | 4 | } |
| 53 | 5 | ||
| 54 | -.mags-slide{ | ||
| 55 | - float: left; | ||
| 56 | - width: 292px; | ||
| 57 | - .slide-box{ | ||
| 58 | - width: 100%; | ||
| 59 | - height:366px; | ||
| 60 | - overflow: hidden; | ||
| 61 | - li{ | ||
| 62 | - float: left; | ||
| 63 | - width: 292px; | ||
| 64 | - height: 366px; | ||
| 65 | - img{ | ||
| 66 | - display: block; | ||
| 67 | - width: 100%; | ||
| 68 | - height: 100%; | ||
| 69 | - } | ||
| 70 | - } | ||
| 71 | - } | ||
| 72 | - .slide-ctrl{ | ||
| 73 | - margin: 10px 0 0 0; | ||
| 74 | - text-align: center; | ||
| 75 | - .slide-ctrl-tabs{ | ||
| 76 | - display: inline-block; | ||
| 77 | - } | ||
| 78 | - a{ | ||
| 79 | - float: left; | ||
| 80 | - margin: 0 0 0 14px; | ||
| 81 | - width: 10px; | ||
| 82 | - height: 10px; | ||
| 83 | - background-image: url("../assets/images/magazine/slide-ctrl-1024.png"); | ||
| 84 | - text-indent: -50px; | ||
| 85 | - overflow: hidden; | ||
| 86 | - } | ||
| 87 | - a:first-child{ | ||
| 88 | - margin: 0; | ||
| 89 | - } | ||
| 90 | - a.activeSlide{ | ||
| 91 | - background-image: url("../assets/images/magazine/slide-ctrl-current-1024.png"); | ||
| 92 | - } | ||
| 93 | - a:focus{ | ||
| 94 | - outline:none; | ||
| 95 | - } | ||
| 96 | - } | 6 | +.newest-mags { |
| 7 | + margin: 46px 0 0 0; | ||
| 97 | } | 8 | } |
| 98 | 9 | ||
| 99 | -.column-slide{ | ||
| 100 | - margin: 41px 0 0 0; | ||
| 101 | - position: relative; | ||
| 102 | - .slide-box{ | ||
| 103 | - width: 100%; | ||
| 104 | - height: auto; | ||
| 105 | - overflow: hidden; | ||
| 106 | - position:relative; | ||
| 107 | - height: 312px; | ||
| 108 | - .loading-img{ | ||
| 109 | - position: absolute; | ||
| 110 | - top: 50%; | ||
| 111 | - left: 50%; | ||
| 112 | - margin: -23px 0 0 -23px; | ||
| 113 | - } | ||
| 114 | - .slide-piclist{ | ||
| 115 | - position: relative; | ||
| 116 | - width:940px; | ||
| 117 | - top: 0; | ||
| 118 | - left: 0; | ||
| 119 | - } | ||
| 120 | - li{ | ||
| 121 | - position: relative; | ||
| 122 | - width: 218px; | ||
| 123 | - float: left; | ||
| 124 | - margin: 0 17px 0 0; | ||
| 125 | - .img-wrap{ | ||
| 126 | - position: relative; | ||
| 127 | - .border{ | ||
| 128 | - position: absolute; | ||
| 129 | - left: 0; | ||
| 130 | - top: 0; | ||
| 131 | - right: 0; | ||
| 132 | - bottom: 0; | ||
| 133 | - border: 1px solid #ccc; | ||
| 134 | - } | ||
| 135 | - .special-icon{ | ||
| 136 | - position: absolute; | ||
| 137 | - left: 0; | ||
| 138 | - top: 0; | ||
| 139 | - width: 36px; | ||
| 140 | - height: 15px; | ||
| 141 | - background: url("../assets/images/magazine/special.png"); | ||
| 142 | - } | ||
| 143 | - } | ||
| 144 | - img{ | ||
| 145 | - width: 100%; | ||
| 146 | - height: 274px; | ||
| 147 | - display: block; | ||
| 148 | - } | ||
| 149 | - span{ | ||
| 150 | - display: block; | ||
| 151 | - margin: 18px 0 0 0; | ||
| 152 | - line-height: 20px; | ||
| 153 | - text-align: center; | ||
| 154 | - font-size: 16px; | ||
| 155 | - color: #000; | ||
| 156 | - font-weight: bold; | ||
| 157 | - } | ||
| 158 | - } | ||
| 159 | - } | ||
| 160 | - .slide-ctrl{ | ||
| 161 | - display: none; | ||
| 162 | - a{ | ||
| 163 | - position: absolute; | ||
| 164 | - width: 35px; | ||
| 165 | - height: 50px; | ||
| 166 | - top: 38%; | ||
| 167 | - margin-top: -18px; | ||
| 168 | - background-image: url("../assets/images/magazine/slide-ctrl-btn-1024.png"); | ||
| 169 | - z-index: 1; | ||
| 170 | - } | ||
| 171 | - a.slide-ctrl-prev{ | ||
| 172 | - background-position: 0 0; | ||
| 173 | - left: -46px; | ||
| 174 | - } | ||
| 175 | - a.slide-ctrl-next{ | ||
| 176 | - background-position: -35px 0; | ||
| 177 | - right: -50px; | ||
| 178 | - } | ||
| 179 | - } | 10 | +.mags-info { |
| 11 | + float: left; | ||
| 12 | + width: 546px; | ||
| 13 | + h2 { | ||
| 14 | + margin: 23px 0 0 0; | ||
| 15 | + height: 70px; | ||
| 16 | + background: url("../assets/images/magazine/mags-title.png") no-repeat center center; | ||
| 17 | + } | ||
| 18 | + .mags-text { | ||
| 19 | + margin: 24px auto 0; | ||
| 20 | + width: 360px; | ||
| 21 | + line-height: 20px; | ||
| 22 | + font-size: 14px; | ||
| 23 | + text-align: center; | ||
| 24 | + color: #444444; | ||
| 25 | + } | ||
| 26 | + .date-price { | ||
| 27 | + margin: 35px 0 0 0; | ||
| 28 | + p { | ||
| 29 | + font-size: 17px; | ||
| 30 | + color: #333333; | ||
| 31 | + text-align: center; | ||
| 32 | + } | ||
| 33 | + .price { | ||
| 34 | + color: #666666; | ||
| 35 | + font-size: 14px; | ||
| 36 | + } | ||
| 37 | + } | ||
| 38 | + .mags-buy { | ||
| 39 | + margin: 18px 0 0 0; | ||
| 40 | + .buy-btn { | ||
| 41 | + display: block; | ||
| 42 | + margin: 0 auto; | ||
| 43 | + width: 137px; | ||
| 44 | + height: 29px; | ||
| 45 | + line-height: 29px; | ||
| 46 | + font-size: 17px; | ||
| 47 | + color: #fff; | ||
| 48 | + text-align: center; | ||
| 49 | + background-image: url("../assets/images/magazine/buy-btn-1024.png"); | ||
| 50 | + background-position: center center; | ||
| 51 | + background-repeat: no-repeat; | ||
| 52 | + } | ||
| 53 | + } | ||
| 180 | } | 54 | } |
| 181 | 55 | ||
| 182 | -.column-slide.magazine-list{ | ||
| 183 | - .slide-box{ | ||
| 184 | - width: 940px; | ||
| 185 | - li{ | ||
| 186 | - width:235px; | ||
| 187 | - margin: 0; | ||
| 188 | - a{ | ||
| 189 | - display: block; | ||
| 190 | - width: 218px; | ||
| 191 | - } | ||
| 192 | - } | ||
| 193 | - } | 56 | +.mags-slide { |
| 57 | + float: left; | ||
| 58 | + width: 292px; | ||
| 59 | + .slide-box { | ||
| 60 | + width: 100%; | ||
| 61 | + height: 366px; | ||
| 62 | + overflow: hidden; | ||
| 63 | + li { | ||
| 64 | + float: left; | ||
| 65 | + width: 292px; | ||
| 66 | + height: 366px; | ||
| 67 | + img { | ||
| 68 | + display: block; | ||
| 69 | + width: 100%; | ||
| 70 | + height: 100%; | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + .slide-ctrl { | ||
| 75 | + margin: 10px 0 0 0; | ||
| 76 | + text-align: center; | ||
| 77 | + .slide-ctrl-tabs { | ||
| 78 | + display: inline-block; | ||
| 79 | + } | ||
| 80 | + a { | ||
| 81 | + float: left; | ||
| 82 | + margin: 0 0 0 14px; | ||
| 83 | + width: 10px; | ||
| 84 | + height: 10px; | ||
| 85 | + background-image: url("../assets/images/magazine/slide-ctrl-1024.png"); | ||
| 86 | + text-indent: -50px; | ||
| 87 | + overflow: hidden; | ||
| 88 | + } | ||
| 89 | + a:first-child { | ||
| 90 | + margin: 0; | ||
| 91 | + } | ||
| 92 | + a.activeSlide { | ||
| 93 | + background-image: url("../assets/images/magazine/slide-ctrl-current-1024.png"); | ||
| 94 | + } | ||
| 95 | + a:focus { | ||
| 96 | + outline: none; | ||
| 97 | + } | ||
| 98 | + } | ||
| 194 | } | 99 | } |
| 195 | 100 | ||
| 196 | -.mags-column{ | ||
| 197 | - margin: 43px 0 0 0; | ||
| 198 | - h2{ | ||
| 199 | - line-height: 25px; | ||
| 200 | - font-size: 24px; | ||
| 201 | - text-align: center; | ||
| 202 | - color: #000; | ||
| 203 | - font-weight: bold; | ||
| 204 | - } | ||
| 205 | - .column-slide{ | ||
| 206 | - margin: 4px 0 20px 0; | ||
| 207 | - h4{ | ||
| 208 | - line-height: 47px; | ||
| 209 | - font-size: 17px; | ||
| 210 | - font-weight: bold; | ||
| 211 | - } | ||
| 212 | - .slide-box{ | ||
| 213 | - margin: 0; | ||
| 214 | - height: 362px; | ||
| 215 | - line-height: 362px; | ||
| 216 | - text-align: center; | ||
| 217 | - .slide-piclist{ | ||
| 218 | - float: left; | ||
| 219 | - width: 928px; | ||
| 220 | - height: 362px; | ||
| 221 | - } | ||
| 222 | - li{ | ||
| 223 | - margin: 0 14px 0 0; | ||
| 224 | - width: 102px; | ||
| 225 | - height: 181px; | ||
| 226 | - .img-wrap{ | ||
| 227 | - width: 102px; | ||
| 228 | - height: 153px; | ||
| 229 | - } | ||
| 230 | - img{ | ||
| 231 | - width: 102px; | ||
| 232 | - height: 153px; | ||
| 233 | - } | ||
| 234 | - span{ | ||
| 235 | - margin: 0; | ||
| 236 | - line-height: 28px; | ||
| 237 | - font-size: 14px; | ||
| 238 | - } | ||
| 239 | - } | ||
| 240 | - } | ||
| 241 | - .slide-ctrl{ | ||
| 242 | - a{ | ||
| 243 | - top: 50%; | ||
| 244 | - margin-top: -25px; | ||
| 245 | - } | ||
| 246 | - | ||
| 247 | - a.slide-ctrl-prev{ | ||
| 248 | - background-position: 0 0; | ||
| 249 | - left: -46px; | ||
| 250 | - } | ||
| 251 | - a.slide-ctrl-next{ | ||
| 252 | - background-position: -35px 0; | ||
| 253 | - right: -46px; | ||
| 254 | - } | ||
| 255 | - } | ||
| 256 | - } | ||
| 257 | -} | ||
| 258 | -.column-slide.mags-app-download{ | ||
| 259 | - margin: 20px 0 0 0; | ||
| 260 | - .slide-box{ | ||
| 261 | - height: auto; | ||
| 262 | - li{ | ||
| 263 | - img{ | ||
| 264 | - width: auto; | ||
| 265 | - margin: 0 auto; | ||
| 266 | - } | ||
| 267 | - span{ | ||
| 268 | - margin: 0; | ||
| 269 | - display: block; | ||
| 270 | - font-weight: bold; | ||
| 271 | - font-size: 15px; | ||
| 272 | - line-height: 20px; | ||
| 273 | - text-align: center; | ||
| 274 | - } | ||
| 275 | - h6{ | ||
| 276 | - margin: 15px 0 0 12px; | ||
| 277 | - font-size: 22px; | ||
| 278 | - } | ||
| 279 | - p{ | ||
| 280 | - margin: 0 0 0 12px; | ||
| 281 | - line-height: 20px; | ||
| 282 | - color: #666666; | ||
| 283 | - font-size: 16px; | ||
| 284 | - } | ||
| 285 | - strong{ | ||
| 286 | - display: block; | ||
| 287 | - margin: 22px 0 0 12px; | ||
| 288 | - line-height: 18px; | ||
| 289 | - font-size: 14px; | ||
| 290 | - color: #000; | ||
| 291 | - } | ||
| 292 | - } | ||
| 293 | - li.column-slide01{ | ||
| 294 | - img{ | ||
| 295 | - width: 170px; | ||
| 296 | - height: 150px; | ||
| 297 | - } | ||
| 298 | - } | ||
| 299 | - li.column-slide02{ | ||
| 300 | - img{ | ||
| 301 | - margin: 11px 0 0 55px; | ||
| 302 | - width: 170px; | ||
| 303 | - height: 130px; | ||
| 304 | - } | ||
| 305 | - } | ||
| 306 | - li.column-slide03{ | ||
| 307 | - img{ | ||
| 308 | - width: 129px; | ||
| 309 | - height: 124px; | ||
| 310 | - } | ||
| 311 | - } | ||
| 312 | - } | 101 | +.column-slide { |
| 102 | + margin: 41px 0 0 0; | ||
| 103 | + position: relative; | ||
| 104 | + .slide-box { | ||
| 105 | + width: 100%; | ||
| 106 | + height: auto; | ||
| 107 | + overflow: hidden; | ||
| 108 | + position: relative; | ||
| 109 | + height: 312px; | ||
| 110 | + .loading-img { | ||
| 111 | + position: absolute; | ||
| 112 | + top: 50%; | ||
| 113 | + left: 50%; | ||
| 114 | + margin: -23px 0 0 -23px; | ||
| 115 | + } | ||
| 116 | + .slide-piclist { | ||
| 117 | + position: relative; | ||
| 118 | + width: 940px; | ||
| 119 | + top: 0; | ||
| 120 | + left: 0; | ||
| 121 | + } | ||
| 122 | + li { | ||
| 123 | + position: relative; | ||
| 124 | + width: 218px; | ||
| 125 | + float: left; | ||
| 126 | + margin: 0 17px 0 0; | ||
| 127 | + .img-wrap { | ||
| 128 | + position: relative; | ||
| 129 | + .border { | ||
| 130 | + position: absolute; | ||
| 131 | + left: 0; | ||
| 132 | + top: 0; | ||
| 133 | + right: 0; | ||
| 134 | + bottom: 0; | ||
| 135 | + border: 1px solid #ccc; | ||
| 136 | + } | ||
| 137 | + .special-icon { | ||
| 138 | + position: absolute; | ||
| 139 | + left: 0; | ||
| 140 | + top: 0; | ||
| 141 | + width: 36px; | ||
| 142 | + height: 15px; | ||
| 143 | + background: url("../assets/images/magazine/special.png"); | ||
| 144 | + } | ||
| 145 | + } | ||
| 146 | + img { | ||
| 147 | + width: 100%; | ||
| 148 | + height: 274px; | ||
| 149 | + display: block; | ||
| 150 | + } | ||
| 151 | + span { | ||
| 152 | + display: block; | ||
| 153 | + margin: 18px 0 0 0; | ||
| 154 | + line-height: 20px; | ||
| 155 | + text-align: center; | ||
| 156 | + font-size: 16px; | ||
| 157 | + color: #000; | ||
| 158 | + font-weight: bold; | ||
| 159 | + } | ||
| 160 | + } | ||
| 161 | + } | ||
| 162 | + .slide-ctrl { | ||
| 163 | + display: none; | ||
| 164 | + a { | ||
| 165 | + position: absolute; | ||
| 166 | + width: 35px; | ||
| 167 | + height: 50px; | ||
| 168 | + top: 38%; | ||
| 169 | + margin-top: -18px; | ||
| 170 | + background-image: url("../assets/images/magazine/slide-ctrl-btn-1024.png"); | ||
| 171 | + z-index: 1; | ||
| 172 | + } | ||
| 173 | + a.slide-ctrl-prev { | ||
| 174 | + background-position: 0 0; | ||
| 175 | + left: -46px; | ||
| 176 | + } | ||
| 177 | + a.slide-ctrl-next { | ||
| 178 | + background-position: -35px 0; | ||
| 179 | + right: -50px; | ||
| 180 | + } | ||
| 181 | + } | ||
| 313 | } | 182 | } |
| 314 | 183 | ||
| 315 | -.column-slide.rule{ | ||
| 316 | - margin: 33px 0 0 0; | ||
| 317 | - h2{ | ||
| 318 | - line-height: 48px; | ||
| 319 | - font-size: 24px; | ||
| 320 | - font-weight: bold; | ||
| 321 | - text-align: center; | ||
| 322 | - } | ||
| 323 | - .slide-box{ | ||
| 324 | - margin: 11px 0 0 0; | ||
| 325 | - height: 332px; | ||
| 326 | - } | ||
| 327 | - .slide-ctrl{ | ||
| 328 | - a{ | ||
| 329 | - margin-top: 0; | ||
| 330 | - } | ||
| 331 | - } | 184 | +.column-slide.magazine-list { |
| 185 | + .slide-box { | ||
| 186 | + width: 940px; | ||
| 187 | + li { | ||
| 188 | + width: 235px; | ||
| 189 | + margin: 0; | ||
| 190 | + a { | ||
| 191 | + display: block; | ||
| 192 | + width: 218px; | ||
| 193 | + } | ||
| 194 | + } | ||
| 195 | + } | ||
| 332 | } | 196 | } |
| 333 | 197 | ||
| 334 | -/*大图弹层样式*/ | ||
| 335 | -.img-zoom { | ||
| 336 | - display: none; | ||
| 337 | - position: fixed; | ||
| 338 | - top: 50%; | ||
| 339 | - left: 50%; | ||
| 340 | - z-index: 1000; | 198 | +.mags-column { |
| 199 | + margin: 43px 0 0 0; | ||
| 200 | + h2 { | ||
| 201 | + line-height: 25px; | ||
| 202 | + font-size: 24px; | ||
| 203 | + text-align: center; | ||
| 204 | + color: #000; | ||
| 205 | + font-weight: bold; | ||
| 206 | + } | ||
| 207 | + .column-slide { | ||
| 208 | + margin: 4px 0 20px 0; | ||
| 209 | + h4 { | ||
| 210 | + line-height: 47px; | ||
| 211 | + font-size: 17px; | ||
| 212 | + font-weight: bold; | ||
| 213 | + } | ||
| 214 | + .slide-box { | ||
| 215 | + margin: 0; | ||
| 216 | + height: 362px; | ||
| 217 | + line-height: 362px; | ||
| 218 | + text-align: center; | ||
| 219 | + .slide-piclist { | ||
| 220 | + float: left; | ||
| 221 | + width: 928px; | ||
| 222 | + height: 362px; | ||
| 223 | + } | ||
| 224 | + li { | ||
| 225 | + margin: 0 14px 0 0; | ||
| 226 | + width: 102px; | ||
| 227 | + height: 181px; | ||
| 228 | + .img-wrap { | ||
| 229 | + width: 102px; | ||
| 230 | + height: 153px; | ||
| 231 | + } | ||
| 232 | + img { | ||
| 233 | + width: 102px; | ||
| 234 | + height: 153px; | ||
| 235 | + } | ||
| 236 | + span { | ||
| 237 | + margin: 0; | ||
| 238 | + line-height: 28px; | ||
| 239 | + font-size: 14px; | ||
| 240 | + } | ||
| 241 | + } | ||
| 242 | + } | ||
| 243 | + .slide-ctrl { | ||
| 244 | + a { | ||
| 245 | + top: 50%; | ||
| 246 | + margin-top: -25px; | ||
| 247 | + } | ||
| 248 | + a.slide-ctrl-prev { | ||
| 249 | + background-position: 0 0; | ||
| 250 | + left: -46px; | ||
| 251 | + } | ||
| 252 | + a.slide-ctrl-next { | ||
| 253 | + background-position: -35px 0; | ||
| 254 | + right: -46px; | ||
| 255 | + } | ||
| 256 | + } | ||
| 257 | + } | ||
| 258 | +} | ||
| 341 | 259 | ||
| 342 | - &.show { | ||
| 343 | - display: block; | ||
| 344 | - } | 260 | +.column-slide.mags-app-download { |
| 261 | + margin: 20px 0 0 0; | ||
| 262 | + .slide-box { | ||
| 263 | + height: auto; | ||
| 264 | + li { | ||
| 265 | + img { | ||
| 266 | + width: auto; | ||
| 267 | + margin: 0 auto; | ||
| 268 | + } | ||
| 269 | + span { | ||
| 270 | + margin: 0; | ||
| 271 | + display: block; | ||
| 272 | + font-weight: bold; | ||
| 273 | + font-size: 15px; | ||
| 274 | + line-height: 20px; | ||
| 275 | + text-align: center; | ||
| 276 | + } | ||
| 277 | + h6 { | ||
| 278 | + margin: 15px 0 0 12px; | ||
| 279 | + font-size: 22px; | ||
| 280 | + } | ||
| 281 | + p { | ||
| 282 | + margin: 0 0 0 12px; | ||
| 283 | + line-height: 20px; | ||
| 284 | + color: #666666; | ||
| 285 | + font-size: 16px; | ||
| 286 | + } | ||
| 287 | + strong { | ||
| 288 | + display: block; | ||
| 289 | + margin: 22px 0 0 12px; | ||
| 290 | + line-height: 18px; | ||
| 291 | + font-size: 14px; | ||
| 292 | + color: #000; | ||
| 293 | + } | ||
| 294 | + } | ||
| 295 | + li.column-slide01 { | ||
| 296 | + img { | ||
| 297 | + width: 170px; | ||
| 298 | + height: 150px; | ||
| 299 | + } | ||
| 300 | + } | ||
| 301 | + li.column-slide02 { | ||
| 302 | + img { | ||
| 303 | + margin: 11px 0 0 55px; | ||
| 304 | + width: 170px; | ||
| 305 | + height: 130px; | ||
| 306 | + } | ||
| 307 | + } | ||
| 308 | + li.column-slide03 { | ||
| 309 | + img { | ||
| 310 | + width: 129px; | ||
| 311 | + height: 124px; | ||
| 312 | + } | ||
| 313 | + } | ||
| 314 | + } | ||
| 315 | +} | ||
| 345 | 316 | ||
| 346 | - .guide-btn { | ||
| 347 | - position: absolute; | ||
| 348 | - width: 20px; | ||
| 349 | - height: 34px; | ||
| 350 | - background-image: url("../assets/images/arrow-girl.png"); | ||
| 351 | - background-repeat: no-repeat; | ||
| 352 | - top: 50%; | ||
| 353 | - margin-top: -17px; | 317 | +.column-slide.rule { |
| 318 | + margin: 33px 0 0 0; | ||
| 319 | + h2 { | ||
| 320 | + line-height: 48px; | ||
| 321 | + font-size: 24px; | ||
| 322 | + font-weight: bold; | ||
| 323 | + text-align: center; | ||
| 324 | + } | ||
| 325 | + .slide-box { | ||
| 326 | + margin: 11px 0 0 0; | ||
| 327 | + height: 332px; | ||
| 328 | + } | ||
| 329 | + .slide-ctrl { | ||
| 330 | + a { | ||
| 331 | + margin-top: 0; | ||
| 332 | + } | ||
| 333 | + } | ||
| 334 | +} | ||
| 354 | 335 | ||
| 355 | - &.prev { | ||
| 356 | - left: -112px; | ||
| 357 | - } | 336 | +/*澶у浘寮瑰眰鏍峰紡*/ |
| 358 | 337 | ||
| 359 | - &.next { | ||
| 360 | - right: -112px; | ||
| 361 | - background-position: -20px 0; | ||
| 362 | - } | ||
| 363 | - } | 338 | +.img-zoom { |
| 339 | + display: none; | ||
| 340 | + position: fixed; | ||
| 341 | + top: 50%; | ||
| 342 | + left: 50%; | ||
| 343 | + z-index: 1000; | ||
| 344 | + &.show { | ||
| 345 | + display: block; | ||
| 346 | + } | ||
| 347 | + .guide-btn { | ||
| 348 | + position: absolute; | ||
| 349 | + width: 20px; | ||
| 350 | + height: 34px; | ||
| 351 | + background-image: url("../assets/images/arrow-girl.png"); | ||
| 352 | + background-repeat: no-repeat; | ||
| 353 | + top: 50%; | ||
| 354 | + margin-top: -17px; | ||
| 355 | + &.prev { | ||
| 356 | + left: -112px; | ||
| 357 | + } | ||
| 358 | + &.next { | ||
| 359 | + right: -112px; | ||
| 360 | + background-position: -20px 0; | ||
| 361 | + } | ||
| 362 | + } | ||
| 364 | } | 363 | } |
| 365 | 364 | ||
| 366 | .magazine-zoom { | 365 | .magazine-zoom { |
| 367 | - width: 600px; | ||
| 368 | - margin-left: -300px; | ||
| 369 | - text-align: center; | ||
| 370 | - | ||
| 371 | - img { | ||
| 372 | - max-width: 600px; | ||
| 373 | - } | 366 | + width: 600px; |
| 367 | + margin-left: -300px; | ||
| 368 | + text-align: center; | ||
| 369 | + img { | ||
| 370 | + max-width: 600px; | ||
| 371 | + } | ||
| 374 | } | 372 | } |
| 375 | 373 | ||
| 376 | .overlay { | 374 | .overlay { |
| 377 | - display: none; | ||
| 378 | - position: fixed; | ||
| 379 | - top: 0; | ||
| 380 | - bottom: 0; | ||
| 381 | - right: 0; | ||
| 382 | - left:0; | ||
| 383 | - background: #000; | ||
| 384 | - opacity: 0.6; | ||
| 385 | - filter: alpha(opacity=60); | ||
| 386 | - z-index: 999; | ||
| 387 | - | ||
| 388 | - &.show { | ||
| 389 | - display: block; | ||
| 390 | - } | 375 | + display: none; |
| 376 | + position: fixed; | ||
| 377 | + top: 0; | ||
| 378 | + bottom: 0; | ||
| 379 | + right: 0; | ||
| 380 | + left: 0; | ||
| 381 | + background: #000; | ||
| 382 | + opacity: 0.6; | ||
| 383 | + filter: alpha(opacity = 60); | ||
| 384 | + z-index: 999; | ||
| 385 | + &.show { | ||
| 386 | + display: block; | ||
| 387 | + } | ||
| 391 | } | 388 | } |
-
Please register or login to post a comment