Authored by happyhour7

Merge branch 'develop' of http://git.dev.yoho.cn/ued/yohogirls-frontend into develop

Conflicts:
	web/package.json
... ... @@ -7,8 +7,9 @@
var $ = require('jquery'),
share = require('../plugin/share'),
box = require('../plugin/box'),
imgZoom = require('../plugin/imgzoom'),
tools = require('yoho-tools');
imgZoom = require('../plugin/imgZoom'),
tools = require('yoho-tools'),
mulLine = require('mlellipsis');
require('lazyload');
require('../plugin/slider');
... ... @@ -20,10 +21,41 @@ exports.init = function() {
detailTitle = $(".detail-title").find("h1"),
detailSubtitle = $(".detail-title").find("h2"),
ajaxParam,
i,
data,
cidNum;
//底部数据相关变量
var adItem = '', //边栏广告
sideVideoTpl = '', //边栏视频模板
sideVideoData = '', //边栏视频数据
sideVideoHtml = '', //边栏视频渲染的html
sidePostTpl = '', //边栏relatedpost模板
sidePostData = '', //边栏relatedpost数据
sidePostHtml = ''; //边栏relatedpost渲染的html
//related-post截行相关变量
var relatedPost = '',
postList = '', //post列表
totalLineNum = '', //总行数
titleLineNum = '', //title行数
subTitleLineNum = ''; //subtitle行数
//滑出边栏小视频side-video播放区域暂停相关变量
var relatedPostsOffsetTop = '',
relatedPostsTop = '',
relatedPostsMarginLeft = '';
//页面滑动热播位置变化相关变量
var detailBodyOffsetTop = '',
relatedPostsOffsetHeightTop = '',
distance = '',
eleTop = '',
detailBodyHeight = '';
//初始化截行插件
mulLine.init();
//分享
share.init({
shareUrl: shareUrl,
... ... @@ -114,167 +146,211 @@ exports.init = function() {
type: 'GET',
url: YohoConfig.mainUrl + '/channel/detail/getright', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc,
success: function(response) {
console.log(response);
var data = response.data;
var sidePost = data.mosts,
video = data.video,
banner = data.banners;
data = response.data;
//广告
var adItem = '';
for (var i = 0; i < banner.length; i++) {
adItem += '<a href="' + banner[i].link + '" target="_blank"><img src="' + banner[i].img + '" alt="" /></a>'
for (i = 0; i < data.banners.length; i++) {
adItem += '<a href="' + data.banners[i].link + '" target="_blank"><img src="' + data.banners[i].img + '" alt="" /></a>'
}
$(".detail-ad").html(adItem);
//没有广告去掉margin
if (banner.length == 0) {
if (data.banners.length == 0) {
$(".detail-side .app-download").css("margin", 0);
}
//视频
if (video.length != 0) {
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\
<param name="movie" value="' + YohoConfig.resUrl + '/res/new/boys/swf/util/VideoPlayerSmall.swf?url=' + video.video + '&amp;language=' + video.language + '&amp;title1=【Yoho!Boys】' + video.title + '\r\n' + video.subtitle + '&amp;shareurl=' + video.link + '&amp;sharepic=' + video.cover + '&amp;coverpic=' + video.cover + '">\n\
<param name="quality" value="high">\n\
<param name="bgcolor" value="#ffffff">\n\
<param value="true" name="allowFullScreen">\n\
<param name="allowScriptAccess" value="always">\n\
<param name="wmode" value="transparent">\n\
<embed align="middle" width="100%" src="' + YohoConfig.resUrl + '/res/new/boys/swf/util/VideoPlayerSmall.swf?url=' + video.video + '&amp;language=' + video.language + '&amp;title1=【Yoho!Boys】' + video.title + '\r\n' + video.subtitle + '&amp;shareurl=' + video.link + '&amp;shareurl=' + video.link + '&amp;sharepic=' + video.cover + '&amp;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\
</object>');
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>');
$(".side-video").find("img").hide();
$(".side-video").find("h3").text(video.title);
$(".side-video").find("p").text(video.subtitle);
$(".side-video").find("a").attr("href", video.link);
$(".video-area").append($flash);
$(".video-area").append($ipadVideo);
$(".side-video").show();
if (navigator.userAgent.indexOf("iPad") !== -1) {
// 封面视频播放器替换为H5的VIDEO标签
if (!!$(".video-area").find("object").size()) {
$(".video-area").find("object").hide();
$("#side-video-ipad").show();
}
}
sideVideoTpl = $('#side-video-tpl').html();
sideVideoData = {
video: data.video
}
//热播
if (sidePost.length > 0) {
var sidePostItem = '';
for (var i = 0; i < sidePost.length; i++) {
if (sidePost[i].isVideo) {
sidePostItem = '<li>' +
'<a class="clearfix" href="' + sidePost[i].link + '" onclick="hotClickEvent();">' +
'<div class="pic"><img src="' + sidePost[i].coverImage + '" alt="" /><span class="play-icon"></span></div>' +
'<div class="post-title"><h4>' + sidePost[i].title + '</h4><p>' + sidePost[i].subtitle + '</p></div>' +
'</a>' +
'</li>';
} else {
sidePostItem = '<li>' +
'<a class="clearfix" href="' + sidePost[i].link + '" onclick="hotClickEvent();">' +
'<div class="pic"><img src="' + sidePost[i].coverImage + '" alt="" /></div>' +
'<div class="post-title"><h4>' + sidePost[i].title + '</h4><p>' + sidePost[i].subtitle + '</p></div>' +
'</a>' +
'</li>';
}
$(".side-postslist").append($(sidePostItem));
}
$(".side-related-posts").show();
sideVideoHtml = mustache.render(sideVideoTpl, sideVideoData);
//热播根据行数截取字符
var citems = $(".side-related-posts li");
var totalLineNum = 3;
if (citems.length > 0) {
citems.each(function(index, obj) {
var self = $(obj);
var titleLineNum = self.find("h4").getTextLineNumber("title");
var subTitleLineNum = self.find("p").getTextLineNumber("subtitle");
if (titleLineNum > 2) {
self.find("h4").mlellipsis(2);
titleLineNum = 2;
}
if (subTitleLineNum > totalLineNum - titleLineNum) {
self.find("p").mlellipsis(totalLineNum - titleLineNum, "detail");
}
$('.detail-side').append($(sideVideoHtml));
if (navigator.userAgent.indexOf('iPad') !== -1) {
// 封面视频播放器替换为H5的VIDEO标签
if (!!$('.video-area').find('object').size()) {
$('.video-area').find('object').hide();
$('.side-video').find('video').show();
}
}
});
//边栏related-post
sidePostTpl = $('#side-related-posts').html();
sidePostData = {
relatedPost: {
postList: data.mosts
}
}
sidePostHtml = mustache.render(sidePostTpl, sidePostData);
$('.detail-side').append($(sidePostHtml));
//边栏related-post根据行数截取字符
relatedPost = relatedPost;
postList = relatedPost.find("li");
if (postList.length > 0) {
totalLineNum = 3;
postList.each(function(index, obj) {
titleLineNum = $(obj).find('h3').getTextLineNumber('title');
subTitleLineNum = $(obj).find('p').getTextLineNumber('subtitle');
if (titleLineNum > 2) {
$(obj).find('h3').mlellipsis(2);
titleLineNum = 2;
}
if (subTitleLineNum > totalLineNum - titleLineNum) {
$(obj).find('p').mlellipsis(totalLineNum - titleLineNum, 'detail');
}
});
}
//滑出小视频播放区域暂停小视频
var relatedPostsOffsetTop = $(".side-related-posts").offset().top - $("#minEnterprise").outerHeight(),
relatedPostsTop = $("#minEnterprise").outerHeight(),
relatedPostsMarginLeft = $(".detail-container").width() / 2 - $(".side-related-posts").outerWidth();
$(window).resize(function() {
relatedPostsOffsetTop = $(".side-related-posts").offset().top - $("#minEnterprise").outerHeight(),
relatedPostsTop = $("#minEnterprise").outerHeight(),
relatedPostsMarginLeft = $(".detail-container").width() / 2 - $(".side-related-posts").outerWidth();
});
$(window).bind("scroll", function() {
relatedPostsOffsetTop = relatedPost.offset().top - $('#minEnterprise').outerHeight();
relatedPostsTop = $('#minEnterprise').outerHeight();
relatedPostsMarginLeft = $('.detail-container').width() / 2 - relatedPost.outerWidth();
}).resize();
$(window).bind('scroll', function() {
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
if (navigator.appName.indexOf('Microsoft') != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
if ($(".side-video").size() > 0) {
if ($(window).scrollTop() >= $(".side-video").offset().top || $(window).scrollTop() < $(".side-video").offset().top - $(window).height()) {
if ($('.side-video').size() > 0) {
if ($(window).scrollTop() >= $('.side-video').offset().top || $(window).scrollTop() < $('.side-video').offset().top - $(window).height()) {
try {
if (navigator.appName.indexOf("Microsoft") != -1) {
//$(".detail-right-video").find("object").get(0).StopMovie();
thisMovie("newestvideo").StopMovie();
} else if (navigator.userAgent.indexOf("iPad") !== -1) {
var videoId = document.getElementById("side-video-ipad");
if (navigator.appName.indexOf('Microsoft') != -1) {
thisMovie('newestvideo').StopMovie();
} else if (navigator.userAgent.indexOf('iPad') !== -1) {
var videoId = document.getElementById('side-video-ipad');
videoId.pause();
} else {
$(".side-video").find("embed").get(0).StopMovie();
$('.side-video').find('embed').get(0).StopMovie();
}
} catch (e) {}
}
}
if ($(window).scrollTop() >= relatedPostsOffsetTop && $(".side-related-posts").css("display") != "none") {
if (navigator.userAgent.indexOf("iPad") !== -1) return;
if ($(window).scrollTop() >= relatedPostsOffsetTop && relatedPost.css('display') !== 'none') {
if (navigator.userAgent.indexOf('iPad') !== -1) return;
//right_tab_toped=true;
$(".side-related-posts").css({
"position": "fixed",
"left": "50%",
"margin-left": relatedPostsMarginLeft,
"top": relatedPostsTop
relatedPost.css({
'position': 'fixed',
'left': '50%',
'margin-left': relatedPostsMarginLeft,
'top': relatedPostsTop
});
//热播位置
var detailBodyOffsetTop = $(".detail-body").offset().top;
var relatedPostsOffsetHeightTop, distance, eleTop;
var height = $(".detail-body").outerHeight();
relatedPostsOffsetHeightTop = $('.side-related-posts').offset().top + $('.side-related-posts').outerHeight();
distance = height + detailBodyOffsetTop;
eleTop = distance - $('.side-related-posts').outerHeight();
detailBodyOffsetTop = $('.detail-body').offset().top;
detailBodyHeight = $('.detail-body').outerHeight();
relatedPostsOffsetHeightTop = relatedPost.offset().top + relatedPost.outerHeight();
distance = detailBodyHeight + detailBodyOffsetTop;
eleTop = distance - relatedPost.outerHeight();
if (relatedPostsOffsetHeightTop >= distance) {
$('.side-related-posts').css({
"position": "absolute",
"top": eleTop - relatedPostsTop
relatedPost.css({
'position': 'absolute',
'top': eleTop - relatedPostsTop
});
}
if ($('.side-related-posts').offset().top - $(window).scrollTop() > relatedPostsTop) {
$('.side-related-posts').css({
"position": "fixed",
"top": relatedPostsTop
if (relatedPost.offset().top - $(window).scrollTop() > relatedPostsTop) {
relatedPost.css({
'position': 'fixed',
'top': relatedPostsTop
});
}
} else if ($(window).scrollTop() < relatedPostsOffsetTop && $(".side-related-posts").css("display") != "none") {
} else if ($(window).scrollTop() < relatedPostsOffsetTop && relatedPost.css('display') !== 'none') {
//right_tab_toped=false;
$(".side-related-posts").removeAttr("style").show();
relatedPost.removeAttr('style').show();
}
});
}
});
//底部数据的获取
$.ajax({
type: 'GET',
url: YohoConfig.mainUrl + '/channel/detail/getbottom', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc,
success: function(response) {
data = response.data;
var relatedPost = data.related,
prevnext = data.prevnext,
attitude = data.attitude,
commentnum = data.commentnum;
//新品播报
var relatedPostItem = '';
for (var i = 0; i < relatedPost.length; i++) {
if (relatedPost[i].isVideo == true) {
relatedPostItem = '<li>' +
'<a href="' + relatedPost[i].link + '" target="_blank" onclick="relatedClickEvent();">' +
'<div class="pic"><img src="' + relatedPost[i].cover + '" alt="" /><span class="play-icon"></span></div>' +
'<div class="post-title"><h4>' + relatedPost[i].title + '</h4><p>' + relatedPost[i].subtitle + '</p></div>' +
'</a>' +
'</li>';
} else {
relatedPostItem = '<li>' +
'<a href="' + relatedPost[i].link + '" target="_blank">' +
'<div class="pic"><img src="' + relatedPost[i].cover + '" alt="" /></div>' +
'<div class="post-title"><h4>' + relatedPost[i].title + '</h4><p>' + relatedPost[i].subtitle + '</p></div>' +
'</a>' +
'</li>';
}
$(".postslist").append(relatedPostItem);
//新品播报根据行数截取字符
var citems = $(".related-posts li");
var totalLineNum = 3;
if (citems.length > 0) {
citems.each(function(index, obj) {
var self = $(obj);
var titleLineNum = self.find("h4").getTextLineNumber("title");
var subTitleLineNum = self.find("p").getTextLineNumber("subtitle");
if (titleLineNum > 2) {
self.find("h4").mlellipsis(2);
titleLineNum = 2;
}
if (subTitleLineNum > totalLineNum - titleLineNum) {
self.find("p").mlellipsis(totalLineNum - titleLineNum, "detail");
}
});
}
};
//上一篇下一篇
if (prevnext.prev.title) {
$(".news-next-prev .prev").show();
$(".news-next-prev .prev").find("a").attr("href", prevnext.prev.link).attr("title", prevnext.prev.title).attr("onclick", "prevOrNextClickEvent();");
}
if (prevnext.next.title) {
$(".news-next-prev .next").show();
$(".news-next-prev .next").find("a").attr("href", prevnext.next.link).attr("title", prevnext.next.title).attr("onclick", "prevOrNextClickEvent();");
}
//态度
if (attitude.userWow > 0) {
$(".stats-btn .wow").addClass("current");
};
if (attitude.userWtf > 0) {
$(".stats-btn .wtf").addClass("current");
};
if (attitude.userZzz > 0) {
$(".stats-btn .zzz").addClass("current");
};
setattitude(attitude.wowCount, attitude.zzzCount, attitude.wtfCount);
if (commentnum > 0) {
$(".comment-num").text(commentnum);
} else {
$(".comment-num").html('<img src="' + YohoConfig.resUrl + '/res/new/boys/images/mobile/comment-mobile.png">');
}
}
});
}
\ No newline at end of file
... ...
... ... @@ -9,8 +9,8 @@ var $ = require('jquery'),
swiper = require('yoho-idangerous.swiper');
require('lazyload');
require('../plugin/imgslider');
require('../plugin/imgzoom');
require('../plugin/imgSlider');
require('../plugin/imgZoom');
exports.init = function() {
var shareUrl = $('.share').attr('data-link'),
... ...
... ... @@ -2,137 +2,137 @@
* 评论及登录插件
* author:liuyue
* date:2015-01-07
*/
*/
var $ = require("jquery"),
validate = require("./validate"),
box = require("./box"),
tools = require("yoho-tools"),
tips = require("./tips");
mustache = require("mustache");
validate = require("./validate"),
box = require("./box"),
tools = require("yoho-tools"),
tips = require("./tips");
mustache = require("mustache");
require("./login");
(function(global, undefined) {
var Comment = function(element, options) {
this.options = options;
this.$element = $(element);
//this.$loginBox = $(this.options.loginbox).appendTo("body");
this.init();
};
Comment.DEFAULTS = {
cid: '',
commentPageUrl: '/writer/default/comment',
publishUrl: '/writer/default/publish',
deleteUrl: '/writer/default/delete',
commentNum: $(".comment-num"),
commentItemTpl: '<li class="clearfix">'+
'<div class="userimg">'+
'<img src="\{{userimg}}" alt="">'+
'<i class="\{{partnerType}}"></i>'+
'</div>'+
'<div class="userinfo">'+
'<h6>\{{username}}</h6> '+
'<p class="comment-text">\{{content}}</p>'+
'\{{# isSelf}}'+
'<a class="delete-comment" href="javascript:;" pid="{{id}}"></a>'+
'\{{/ isSelf}} '+
'</div>'+
'</li>',
thirdLogin: false,
isEdit: false,
isMobile: false,
login: ''
};
Comment.prototype = {
constructor: Comment,
init:function() {
// 组件的创建主函数。
this._creat();
},
// 主函数,主要是创建节点,绑定事件。
_creat: function() {
if ($(".comments-list").size() > 0 || $(".comment-textarea").size() > 0) return;
// 创建节点
this._creatCommentDom();
this._creatThirdLogin();
// 绑定事件
this._bindEvent();
},
_creatCommentDom:function() {
var that = this;
//var id = {id:this.options.cid};
$.ajax({
type:'GET',
url:YohoConfig.mainUrl + this.options.commentPageUrl,
var Comment = function(element, options) {
this.options = options;
this.$element = $(element);
//this.$loginBox = $(this.options.loginbox).appendTo("body");
this.init();
};
Comment.DEFAULTS = {
cid: '',
commentPageUrl: '/writer/default/comment',
publishUrl: '/writer/default/publish',
deleteUrl: '/writer/default/delete',
commentNum: $(".comment-num"),
commentItemTpl: '<li class="clearfix">' +
'<div class="userimg">' +
'<img src="\{{userimg}}" alt="">' +
'<i class="\{{partnerType}}"></i>' +
'</div>' +
'<div class="userinfo">' +
'<h6>\{{username}}</h6> ' +
'<p class="comment-text">\{{content}}</p>' +
'\{{# isSelf}}' +
'<a class="delete-comment" href="javascript:;" pid="{{id}}"></a>' +
'\{{/ isSelf}} ' +
'</div>' +
'</li>',
thirdLogin: false,
isEdit: false,
isMobile: false,
login: ''
};
Comment.prototype = {
constructor: Comment,
init: function() {
// 组件的创建主函数。
this._creat();
},
// 主函数,主要是创建节点,绑定事件。
_creat: function() {
if ($(".comments-list").size() > 0 || $(".comment-textarea").size() > 0) return;
// 创建节点
this._creatCommentDom();
this._creatThirdLogin();
// 绑定事件
this._bindEvent();
},
_creatCommentDom: function() {
var that = this;
//var id = {id:this.options.cid};
$.ajax({
type: 'GET',
url: YohoConfig.mainUrl + this.options.commentPageUrl,
/*data: id,
dataType:'json',*/
success:function(response) {
var data = response.data, //返回数据的data
viewMoreNum = data.total - 5, //评论总数-5,除显示评论剩下的评论数量
moreString = viewMoreNum + '', //剩余评论数量转为字符串
moreFirstnum = moreString.slice(0,1), //评论数量的首数字
commentTpl = $('#comment-tpl').html(), //引入评论html模板
commentPage, //分页数据
commentHtml, //用数据渲染后的html
commentData; //评论数据
if(data.length === 0) return;
commentData = {
comment: data.comment
};
//评论多于五条,渲染more节点
if (viewMoreNum > 0) {
commentData = {
comment: data.comment,
more: {
moreNum : viewMoreNum
}
}
}
//如果分页数据不为空和undefined,渲染分页
if ($.trim(data.page) !== '' || typeof(data.page) === 'undefined' || !!data.page) {
success: function(response) {
var data = response.data, //返回数据的data
viewMoreNum = data.total - 5, //评论总数-5,除显示评论剩下的评论数量
moreString = viewMoreNum + '', //剩余评论数量转为字符串
moreFirstnum = moreString.slice(0, 1), //评论数量的首数字
commentTpl = $('#comment-tpl').html(), //引入评论html模板
commentPage, //分页数据
commentHtml, //用数据渲染后的html
commentData; //评论数据
if (data.length === 0) return;
commentData = {
comment: data.comment
};
//评论多于五条,渲染more节点
if (viewMoreNum > 0) {
commentData = {
comment: data.comment,
more: {
moreNum: viewMoreNum
}
}
}
//如果分页数据不为空和undefined,渲染分页
if ($.trim(data.page) !== '' || typeof(data.page) === 'undefined' || !!data.page) {
commentPage = data.page;
commentData = {
comment: data.comment,
more: {
moreNum : viewMoreNum
},
page: commentPage
}
}
commentData = {
comment: data.comment,
more: {
moreNum: viewMoreNum
},
page: commentPage
}
}
commentHtml = mustache.render(commentTpl, commentData, {
html: commentPage
});
that.$element.prepend($(commentHtml));
//5条后的评论隐藏
that.$element.find("li").eq(4).nextAll().hide(); //5条后的评论隐藏
//评论总数上千显示k+,上万显示w+
if (moreString.length === 4) {
$(".view-more").find("span").text(moreFirstnum + 'k+');
} else if (moreString.length === 5) {
$(".view-more").find("span").text(moreFirstnum + 'w+');
}
that.$element.prepend($(commentHtml));
//5条后的评论隐藏
that.$element.find("li").eq(4).nextAll().hide(); //5条后的评论隐藏
//评论总数上千显示k+,上万显示w+
if (moreString.length === 4) {
$(".view-more").find("span").text(moreFirstnum + 'k+');
} else if (moreString.length === 5) {
$(".view-more").find("span").text(moreFirstnum + 'w+');
}
}
});
},
});
},
//创建评论文本域
/*_creatTextareaDom:function(){
//创建评论文本域
/*_creatTextareaDom:function(){
data = this.options.login;
var textarea = $('<div class="comment-textarea"><textarea placeholder="'+tips.getTips("textareaPlaceholder")+'" cid='+this.options.cid+'></textarea></div>'),
loginarea = $('<div class="login-status clearfix">\n\
... ... @@ -160,51 +160,51 @@ require("./login");
},*/
//创建第三方登录
_creatThirdLogin:function(){
var thirdLoginTpl = $("#third-login-tpl").html();
//创建第三方登录
_creatThirdLogin: function() {
var thirdLoginTpl = $("#third-login-tpl").html();
if (this.options.thirdLogin === true) {
$(thirdLoginTpl).appendTo(this.$element);
//this.$element.html(thirdLoginTpl);
}
},
//事件绑定
_bindEvent: function() {
var that = this;
//查看更多评论
this.$element.on("click.comment", ".view-more", function() {
that.$element.find("li").show(); //显示第一页后五条
that.$element.find(".comment-pager-content").show(); //显示分页按钮
that.$element.find(".view-more").remove(); //移除view more
});
if (this.options.thirdLogin === true) {
$(thirdLoginTpl).appendTo(this.$element);
//this.$element.html(thirdLoginTpl);
}
},
//事件绑定
_bindEvent: function(){
var that = this;
//查看更多评论
this.$element.on("click.comment",".view-more",function() {
that.$element.find("li").show(); //显示第一页后五条
that.$element.find(".comment-pager-content").show(); //显示分页按钮
that.$element.find(".view-more").remove(); //移除view more
});
//弹出登录框
/*$(this).login();
//弹出登录框
/*$(this).login();
this.$element.on("click.login",".publish-btn",function() {
if(that.options.isFeedback) return;
$(this).login("loginBoxAnimate");
});*/
//显示删除按钮
if (this.options.isMobile) {
this.$element.find(".delete-comment").show();
} else {
this.$element.on("mouseenter","li",function() {
$(this).find(".delete-comment").show();
}).on("mouseleave","li",function(){
$(this).find(".delete-comment").hide();
});
}
//发表评论
this.$element.on("click.publish",".publish-btn",function() {
var $textarea = that.$element.find("textarea"),
nameInput = that.$element.find(".name-input"),
//显示删除按钮
if (this.options.isMobile) {
this.$element.find(".delete-comment").show();
} else {
this.$element.on("mouseenter", "li", function() {
$(this).find(".delete-comment").show();
}).on("mouseleave", "li", function() {
$(this).find(".delete-comment").hide();
});
}
//发表评论
this.$element.on("click.publish", ".publish-btn", function() {
var $textarea = that.$element.find("textarea"),
nameInput = that.$element.find(".name-input"),
emailInput = that.$element.find(".email-input"),
comment = $textarea.val(),
comment = $textarea.val(),
cid,
data,
commentsNum,
... ... @@ -216,7 +216,7 @@ require("./login");
if (!tools.IYOHO_isUserName(nameInput.val())) {
box.alert(tips.getTips("commentUncompleted"), 5, function() {
nameInput.focus();
});
});
return false;
};
... ... @@ -224,7 +224,7 @@ require("./login");
if (emailInput.val() !== '' && !tools.IYOHO_isEmail(emailInput.val())) {
box.alert(tips.getTips("commentUncompleted"), 5, function() {
emailInput.focus();
});
});
return false;
};
... ... @@ -232,61 +232,66 @@ require("./login");
if (typeof(comment) === 'undefined' || $.trim(comment) === '') {
box.alert(tips.getTips("commentUncompleted"), 5, function() {
$textarea.focus();
});
});
return false;
};
if (comment.length > 100) {
box.alert(tips.getTips("commentToMuch"), 5);
return false;
};
cid = that.$element.attr('cid');
if (!cid) {
return false;
};
if (comment.length > 100) {
box.alert(tips.getTips("commentToMuch"), 5);
return false;
};
data = {id:cid,comment:comment,sync:'222',title:'111'};
cid = that.$element.attr('cid');
if (!cid) {
return false;
};
$.ajax({
type: 'GET',
url: YohoConfig.mainUrl + that.options.publishUrl,
success: function(response) {
if (response.code === '800000') {
box.alert(tips.getTips("relogin"), 5);
that.$element.login("setLogout");
return false;
};
data = {
id: cid,
comment: comment,
sync: '222',
title: '111'
};
if (response.status && response.data) {
var $commentsList = $(".comments-list");
publishHtml = mustache.render(that.options.commentItemTpl, response.data);
$.ajax({
type: 'GET',
url: YohoConfig.mainUrl + that.options.publishUrl,
success: function(response) {
if (response.code === '800000') {
box.alert(tips.getTips("relogin"), 5);
that.$element.login("setLogout");
return false;
};
if ($commentsList .find("li").size() === 0){
$commentsList.html(publishHtml);
if (response.status && response.data) {
var $commentsList = $(".comments-list");
publishHtml = mustache.render(that.options.commentItemTpl, response.data);
if ($commentsList.find("li").size() === 0) {
$commentsList.html(publishHtml);
} else {
$commentsList.find("li").eq(0).before(publishHtml);
}
box.alert(tips.getTips("publishSuccess"), 5);
$(".comment-textarea textarea").val('');
commentsNum = 1;
if (!!parseInt(that.options.commentNum.eq(0).text())) {
commentsNum = parseInt(that.options.commentNum.eq(0).text()) + 1;
};
that.options.commentNum.text(commentsNum);
} else if (900000 === response.code) {
box.alert(tips.getTips("notSameContent"), 5);
} else {
$commentsList.find("li").eq(0).before(publishHtml);
box.alert(tips.getTips("systemBus"), 5);
}
box.alert(tips.getTips("publishSuccess"), 5);
$(".comment-textarea textarea").val('');
commentsNum = 1;
if(!!parseInt(that.options.commentNum.eq(0).text())){
commentsNum = parseInt(that.options.commentNum.eq(0).text())+1;
};
that.options.commentNum.text(commentsNum);
} else if (900000 === response.code) {
box.alert(tips.getTips("notSameContent"), 5);
} else {
box.alert(tips.getTips("systemBus"), 5);
publishHtml = mustache.render(that.options.commentItemTpl, response.data);
that.$element.find(".comments-list").prepend(publishHtml);
}
publishHtml = mustache.render(that.options.commentItemTpl, response.data);
that.$element.find(".comments-list").prepend(publishHtml);
}
})
/*$.ajax({
})
/*$.ajax({
type:'POST',
url:YohoConfig.mainUrl + that.options.publishUrl,
data: data,
... ... @@ -351,109 +356,105 @@ require("./login");
}
}
}); */
});
});
//评论翻页
this.$element.on("click.commentPage",".pager-item",function(){
var url = $(this).attr("href"),
this.$element.on("click.commentPage", ".pager-item", function() {
var url = $(this).attr("href"),
pageHtml,
pageIcon,
commentListTop;
$.ajax({
type: 'GET',
$.ajax({
type: 'GET',
url: url,
success: function(response) {
$(".comments-list").empty();
pageHtml = mustache.render(that.options.commentItemTpl, response.data.comment);
$(".comments-list").empty();
pageHtml = mustache.render(that.options.commentItemTpl, response.data.comment);
$(".comments-list").html(pageHtml);
pageIcon = $('<div class="channel-index-pager">'+response.data.page+'</div>');
$(".comment-pager-content").html(pageIcon);
pageIcon = $('<div class="channel-index-pager">' + response.data.page + '</div>');
$(".comment-pager-content").html(pageIcon);
commentListTop = $(".comments-list").offset().top - $("#minEnterprise").outerHeight();
$(window).scrollTop(commentListTop);
commentListTop = $(".comments-list").offset().top - $("#minEnterprise").outerHeight();
$(window).scrollTop(commentListTop);
}
});
return false;
});
//删除评论
this.$element.on("click.deleteComment",".delete-comment",function(){
var _this = $(this);
var id = _this.attr('pid');
var deleteTip = tips.getTips("deleteComment");
if(that.options.isFeedback){
deleteTip = tips.getTips("deleteFeedback");
}else if(that.options.isEdit){
deleteTip = tips.getTips("deleteEdit");
}
box.confirm(deleteTip, function()
{
$.ajax
({
type:'POST',
url:YohoConfig.mainUrl+that.options.deleteUrl,
data:'id='+id,
dataType:'json',
success:function(response)
{
if (response.status)
{
_this.parents("li").remove();
var comments = parseInt($(".comment-num").eq(0).text())-1;
if(comments > 0){
that.options.commentNum.text(comments);
}else{
that.options.commentNum.html('<img src="'+YohoConfig.resUrl+'boysweb/assets/images/mobile/comment-mobile.png">');
$(".comment-num.zero").text(0);
$(".comment-num.edit-comment").text('留言');
}
}
}
});
});
});
});
$(".third-login-box").on("click","a",function(){
var _this = $(this);
if (!_this.attr('ref')) return;
window.open(_this.attr('ref'), "","width=760,height=650,top=300,left=300");
return false;
})
$(".third-login-box").on("click","a.yoho",function(){
$(this).login("loginBoxAnimate");
})
},
publishComment:function(){
var textareaVal = $(".comment-textarea").find("textarea").val();
if (!!!textareaVal || $.trim(textareaVal) === '') return;
if(this.options.isFeedback) return;
$(".publish-btn").trigger("click.publish");
}
};
});
function Plugin(option, _relatedTarget) {
return this.each(function() {
var $this = $(this);
var data = $this.data('yoho.Comment');
var options = $.extend({}, Comment.DEFAULTS, $this.data(), typeof option == 'object' && option);
// 如果没有初始化,则初始化该对象,并且把该对象绑定到此元素的yoho.PicSilder属性下。
if (!data) $this.data('yoho.Comment', (data = new Comment(this, options)));
// 如果传递的options是一个字符串,则表示调用改对象的原型方法。
if (typeof option == 'string') data[option](_relatedTarget);
});
};
//删除评论
this.$element.on("click.deleteComment", ".delete-comment", function() {
var _this = $(this);
var id = _this.attr('pid');
var deleteTip = tips.getTips("deleteComment");
if (that.options.isFeedback) {
deleteTip = tips.getTips("deleteFeedback");
} else if (that.options.isEdit) {
deleteTip = tips.getTips("deleteEdit");
}
box.confirm(deleteTip, function() {
$.ajax({
type: 'POST',
url: YohoConfig.mainUrl + that.options.deleteUrl,
data: 'id=' + id,
dataType: 'json',
success: function(response) {
if (response.status) {
_this.parents("li").remove();
var comments = parseInt($(".comment-num").eq(0).text()) - 1;
if (comments > 0) {
that.options.commentNum.text(comments);
} else {
that.options.commentNum.html('<img src="' + YohoConfig.resUrl + 'boysweb/assets/images/mobile/comment-mobile.png">');
$(".comment-num.zero").text(0);
$(".comment-num.edit-comment").text('留言');
}
}
}
});
});
});
$.fn.comment = Plugin;
$.fn.comment.Constructor = Comment;
$(".third-login-box").on("click", "a", function() {
var _this = $(this);
if (!_this.attr('ref')) return;
window.open(_this.attr('ref'), "", "width=760,height=650,top=300,left=300");
return false;
})
$(".third-login-box").on("click", "a.yoho", function() {
$(this).login("loginBoxAnimate");
})
},
publishComment: function() {
var textareaVal = $(".comment-textarea").find("textarea").val();
if (!!!textareaVal || $.trim(textareaVal) === '') return;
if (this.options.isFeedback) return;
$(".publish-btn").trigger("click.publish");
}
};
function Plugin(option, _relatedTarget) {
return this.each(function() {
var $this = $(this);
var data = $this.data('yoho.Comment');
var options = $.extend({}, Comment.DEFAULTS, $this.data(), typeof option == 'object' && option);
// 如果没有初始化,则初始化该对象,并且把该对象绑定到此元素的yoho.PicSilder属性下。
if (!data) $this.data('yoho.Comment', (data = new Comment(this, options)));
// 如果传递的options是一个字符串,则表示调用改对象的原型方法。
if (typeof option == 'string') data[option](_relatedTarget);
});
};
$.fn.comment = Plugin;
$.fn.comment.Constructor = Comment;
})(this);
\ No newline at end of file
... ...
... ... @@ -25,7 +25,11 @@
"yoho-tools": "~0.0.4",
"yoho-tips": "~0.0.1",
"jquery-ui": "~1.11.1",
"mustache": "~2.0.0",
"mustache": "2.0.0",
"yoho-idangerous.swiper": "0.0.2",
"jquery.autocomplete": "0.0.2",
"mlellipsis": "0.0.2",
"jquery.autocomplete": "~0.0.2"
},
"devDependencies": {
... ...
... ... @@ -329,7 +329,7 @@
height: 41px;
}
}
.postslist{
.related-posts .postslist{
margin: 14px 0 0 0;
width: 794px;
li{
... ... @@ -531,44 +531,45 @@
padding-bottom: 7px;
background: url("../assets/images/detail/side-line.png") no-repeat left bottom;
}
}
.side-postslist{
li{
margin: 18px 0 0 0;
.pic{
position: relative;
float: left;
width: 89px;
height: 59px;
img{
width: 100%;
height: 100%;
display: block;
}
.play-icon{
position: absolute;
width: 20px;
height: 19px;
background: url("../assets/images/detail/play-icon-s.png");
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
}
}
.post-title{
float: left;
width: 180px;
margin: 0 0 0 18px;
h4{
font-weight: bold;
font-size: 15px;
line-height: 16px;
.postslist{
li{
margin: 18px 0 0 0;
.pic{
position: relative;
float: left;
width: 89px;
height: 59px;
img{
width: 100%;
height: 100%;
display: block;
}
.play-icon{
position: absolute;
width: 20px;
height: 19px;
background: url("../assets/images/detail/play-icon-s.png");
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
}
}
p{
font-weight: bold;
color: #333;
line-height: 20px;
font-size: 15px;
.post-title{
float: left;
width: 180px;
margin: 0 0 0 18px;
h4{
font-weight: bold;
font-size: 15px;
line-height: 16px;
}
p{
font-weight: bold;
color: #333;
line-height: 20px;
font-size: 15px;
}
}
}
}
... ...
@media screen and (min-width:1190px){
.mags-container{
width: 1080px;
margin: 0 auto;
}
.newest-mags{
margin: 43px 0 0 0;
}
.mags-info{
width: 640px;
h2{
margin: 26px 0 0 0;
height: 83px;
background-size: 36% 100%;
}
.mags-text{
margin: 38px auto 0;
width: 430px;
line-height: 24px;
font-size: 15px;
}
.date-price{
margin: 42px 0 0 0;
p{
font-size: 20px;
color: #333333;
text-align: center;
}
.price{
color: #666666;
font-size: 16px;
}
}
.mags-buy{
margin: 22px 0 0 0;
.buy-btn{
width: 160px;
height: 34px;
line-height: 34px;
font-size: 20px;
background: url("../assets/images/magazine/buy-btn.png") no-repeat center center;
}
}
}
.mags-slide{
width: 340px;
.slide-box{
height:426px;
li{
width: 340px;
height: 426px;
}
}
.slide-ctrl{
margin: 20px 0 0 0;
li{
margin: 0 0 0 15px;
a{
display: block;
width: 12px;
height: 12px;
background: url("../assets/images/magazine/slide-ctrl.png");
}
}
li.on{
a{
background: url("../assets/images/magazine/slide-ctrl-current.png");
}
}
}
}
.column-slide{
margin: 50px 0 0 0;
.slide-box{
height: 361px;
width: 1080px;
.slide-piclist{
width:1100px;
}
li{
width: 255px;
margin: 0 20px 0 0;
float: left;
img{
width: 100%;
height: 321px;
display: block;
}
span{
display: block;
margin: 18px 0 0 0;
line-height: 22px;
text-align: center;
font-size: 18px;
color: #000;
font-weight: bold;
}
}
}
}
.column-slide.magazine-list{
.slide-box{
width: 1100px;
li{
width:275px;
a{
width: 255px;
}
}
}
}
.mags-column{
margin: 43px 0 0 0;
h2{
line-height: 48px;
font-size: 28px;
text-align: center;
color: #000;
font-weight: bold;
}
.column-slide{
margin: 0 0 20px 0;
h4{
line-height: 45px;
font-size: 20px;
font-weight: bold;
}
.slide-box{
margin: 5px 0 0 0;
height: 424px;
line-height: 424px;
.slide-piclist{
float: left;
width: 1096px;
height: 424px;
}
li{
margin: 0 17px 0 0;
width: 120px;
height: 212px;
.img-wrap{
width: 120px;
height: 180px;
}
img{
width: 120px;
height: 180px;
}
span{
margin: 0;
line-height: 32px;
font-size: 14px;
}
}
}
}
}
.column-slide.mags-app-download{
margin: 37px 0 0 0;
.slide-box{
height: auto;
li{
height: 172px;
img{
width: auto;
margin: 0 auto;
}
span{
margin: 0;
display: block;
font-weight: normal;
font-size: 18px;
line-height: 22px;
text-align: center;
}
h6{
margin: 15px 0 0 12px;
font-size: 25px;
}
p{
margin: 0 0 0 12px;
line-height: 20px;
color: #666666;
font-size: 18px;
}
strong{
display: block;
margin: 22px 0 0 12px;
line-height: 18px;
font-size: 16px;
color: #000;
}
}
li.column-slide02{
img{
margin:11px 0 0 88px;
width: 170px;
height: 130px;
}
}
}
}
.column-slide.rule{
margin: 40px 0 0 0;
h2{
line-height: 48px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
.slide-box{
margin: 15px 0 0 0;
height: 381px;
}
}
@media screen and (min-width: 1190px) {
.mags-container {
width: 1080px;
margin: 0 auto;
}
.newest-mags {
margin: 43px 0 0 0;
}
.mags-info {
width: 640px;
h2 {
margin: 26px 0 0 0;
height: 83px;
background-size: 36% 100%;
}
.mags-text {
margin: 38px auto 0;
width: 430px;
line-height: 24px;
font-size: 15px;
}
.date-price {
margin: 42px 0 0 0;
p {
font-size: 20px;
color: #333333;
text-align: center;
}
.price {
color: #666666;
font-size: 16px;
}
}
.mags-buy {
margin: 22px 0 0 0;
.buy-btn {
width: 160px;
height: 34px;
line-height: 34px;
font-size: 20px;
background: url("../assets/images/magazine/buy-btn.png") no-repeat center center;
}
}
}
.mags-slide {
width: 340px;
.slide-box {
height: 426px;
li {
width: 340px;
height: 426px;
}
}
.slide-ctrl {
margin: 20px 0 0 0;
li {
margin: 0 0 0 15px;
a {
display: block;
width: 12px;
height: 12px;
background: url("../assets/images/magazine/slide-ctrl.png");
}
}
li.on {
a {
background: url("../assets/images/magazine/slide-ctrl-current.png");
}
}
}
}
.column-slide {
margin: 50px 0 0 0;
.slide-box {
height: 361px;
width: 1080px;
.slide-piclist {
width: 1100px;
}
li {
width: 255px;
margin: 0 20px 0 0;
float: left;
img {
width: 100%;
height: 321px;
display: block;
}
span {
display: block;
margin: 18px 0 0 0;
line-height: 22px;
text-align: center;
font-size: 18px;
color: #000;
font-weight: bold;
}
}
}
}
.column-slide.magazine-list {
.slide-box {
width: 1100px;
li {
width: 275px;
a {
width: 255px;
}
}
}
}
.mags-column {
margin: 43px 0 0 0;
h2 {
line-height: 48px;
font-size: 28px;
text-align: center;
color: #000;
font-weight: bold;
}
.column-slide {
margin: 0 0 20px 0;
h4 {
line-height: 45px;
font-size: 20px;
font-weight: bold;
}
.slide-box {
margin: 5px 0 0 0;
height: 424px;
line-height: 424px;
.slide-piclist {
float: left;
width: 1096px;
height: 424px;
}
li {
margin: 0 17px 0 0;
width: 120px;
height: 212px;
.img-wrap {
width: 120px;
height: 180px;
}
img {
width: 120px;
height: 180px;
}
span {
margin: 0;
line-height: 32px;
font-size: 14px;
}
}
}
}
}
.column-slide.mags-app-download {
margin: 37px 0 0 0;
.slide-box {
height: auto;
li {
height: 172px;
img {
width: auto;
margin: 0 auto;
}
span {
margin: 0;
display: block;
font-weight: normal;
font-size: 18px;
line-height: 22px;
text-align: center;
}
h6 {
margin: 15px 0 0 12px;
font-size: 25px;
}
p {
margin: 0 0 0 12px;
line-height: 20px;
color: #666666;
font-size: 18px;
}
strong {
display: block;
margin: 22px 0 0 12px;
line-height: 18px;
font-size: 16px;
color: #000;
}
}
li.column-slide02 {
img {
margin: 11px 0 0 88px;
width: 170px;
height: 130px;
}
}
}
}
.column-slide.rule {
margin: 40px 0 0 0;
h2 {
line-height: 48px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
.slide-box {
margin: 15px 0 0 0;
height: 381px;
}
}
}
\ No newline at end of file
... ...
@media screen and (max-width:768px){
.about-container{
width: 668px;
margin: 20px auto 0;
@media screen and (max-width: 768px) {
.about-container {
width: 668px;
margin: 20px auto 0;
}
.about-nav {
margin: 0 0 0 40px;
li {
line-height: 22px;
font-size: 14px;
margin-bottom: 15px;
}
}
.about-body {
margin: 0 0 0 200px;
max-width: 370px;
h2 {
line-height: 22px;
font-size: 14px;
}
p {
line-height: 18px;
font-size: 12px;
}
.about-section {
margin: 15px 0 0 0;
}
.about-section.contact-us {
img {
margin: 8px 0 0 -5px;
display: block;
width: 95px;
height: 95px;
}
}
}
.about-us-qr {
width: 230px;
margin: 34px 0 0 3px;
.product {
margin-bottom: 30px;
background-image: url("../assets/images/about/line.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 2% 76%;
}
.product-wrap {
float: left;
img {
display: block;
width: 87px;
height: 87px;
}
img.qr-img {
width: 91px;
height: 91px;
}
span {
display: block;
text-align: center;
line-height: 30px;
font-size: 12px;
}
em {
font-size: 12px;
}
}
.product-wrap.product-wrap-right {
float: right;
}
}
.links-list {
margin: 10px 0 0 0;
width: 414px;
li {
float: left;
line-height: 34px;
width: 110px;
margin: 0 28px 0 0;
a {
font-size: 12px;
color: #333333;
}
}
}
.feedback .comment-textarea {
width: 370px;
textarea {
width: 354px;
}
.login-status {
width: 100%;
}
}
}
.about-nav{
margin: 0 0 0 40px;
li{
line-height: 22px;
font-size: 14px;
margin-bottom: 15px;
}
}
.about-body{
margin: 0 0 0 200px;
max-width: 370px;
h2{
line-height: 22px;
font-size: 14px;
}
p{
line-height: 18px;
font-size: 12px;
}
.about-section{
margin: 15px 0 0 0;
}
.about-section.contact-us{
img{
margin: 8px 0 0 -5px;
display: block;
width: 95px;
height: 95px;
}
}
}
.about-us-qr{
width: 230px;
margin: 34px 0 0 3px;
.product{
margin-bottom: 30px;
background-image: url("../assets/images/about/line.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 2% 76%;
}
.product-wrap{
float: left;
img{
display: block;
width: 87px;
height: 87px;
}
img.qr-img{
width: 91px;
height: 91px;
}
span{
display: block;
text-align: center;
line-height: 30px;
font-size: 12px;
}
em{
font-size: 12px;
}
}
.product-wrap.product-wrap-right{
float: right;
}
}
.links-list{
margin: 10px 0 0 0;
width: 414px;
li{
float: left;
line-height: 34px;
width: 110px;
margin: 0 28px 0 0;
a{
font-size: 12px;
color: #333333;
}
}
}
.feedback .comment-textarea{
width: 370px;
textarea{
width: 354px;
}
.login-status{
width: 100%;
}
}
}
\ No newline at end of file
... ...
@media screen and (max-width:768px){
.detail-container{
width: 668px;
margin: 14px auto 0;
}
/*detail标题*/
.detail-title{
width: 100%;
margin: 0 0 8px 0;
h1{
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
h2{
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.detail-category{
font-size: 12px;
color: #666666;
line-height: 30px;
a{
color: #666666;
}
}
}
/*detail主体*/
.detail-body{
float: left;
width: 460px;
object{
width: 460px;
height: 259px;
}
embed{
width: 460px;
height: 259px;
}
video{
width: 460px;
height: 259px;
}
}
.video-wrap.current{
width: 182px;
object{
width: 182px;
height: 103px;
}
embed{
width: 182px;
height: 103px;
}
video{
width: 182px;
height: 103px;
}
}
/*slide图片*/
.detail-slide-body{
width: 100%;
height: 266px;
overflow: hidden;
}
.detail-slide-piclist{
li{
float: left;
width:460px;
height: 266px;
line-height: 266px;
}
}
.detail-slide-ctrl{
padding: 15px 0 0 0;
width: 100%;
height: 44px;
position: relative;
.detail-slide-ctrl-prev,.detail-slide-ctrl-next{
position:relative;
margin: -44px 0 0 0;
width: 20px;
height: 44px;
line-height: 44px;
background-size: 50% 50%;
}
.detail-slide-ctrl-prev{
margin-right: -20px;
}
.detail-slide-ctrl-next{
margin-left: -20px;
}
}
.detail-slide-ctrl-tabs{
li{
position: relative;
float: left;
margin: 0 0 0 4px;
img{
display: block;
width: 77px;
height: 44px;
}
}
li:first-child{
margin: 0;
}
li.current{
.border{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border: 1px solid #000;
}
.arrow{
position: absolute;
width: 11px;
height: 6px;
top: -5px;
left: 50%;
margin: 0 0 0 -5px;
background-image: url("../assets/images/detail/slide-arrow.png");
background-size: 100% 100%;
}
}
}
/*资讯主体*/
.text-body{
line-height: 20px;
p{
margin: 16px 0;
line-height: 20px;
font-size: 12px;
}
}
/*标签*/
.tag-box{
margin: 26px 0 0 0;
padding: 0 0 11px 0;
background-size: 100%;
.taglist{
padding: 0 0 0 18px;
background: url("../assets/images/detail/tag-icon.png") no-repeat 1px 6px;
}
li{
float: left;
line-height: 24px;
height: 24px;
a{
padding: 0 10px 0 10px;
font-size: 14px;
color: #1c1c1b;
font-weight: bold;
}
}
li:last-child{
background: none;
}
li.last-child{
background: none;
}
}
/*统计栏*/
.stats-btn{
margin: 16px 0 0 0;
.statslist{
float: right;
}
li{
float: left;
width: 52px;
img{
display: block;
margin: 1px 0 0 1px;
}
strong{
float: left;
width: 20px;
height: 20px;
img{
display: block;
width: 18px;
height: 18px;
}
}
span{
float: left;
margin: -6px 0 0 -2px;
font-size: 10px;
color: #000;
}
}
li.comments{
margin: 0;
padding: 0;
border-left: 1px solid #000;
img,span{
float: right;
}
span{
margin: 10px 0 0 0;
img{
width: 17px;
height: 8px;
}
line-height:8px;
}
img{
width: 18px;
height: 17px;
}
}
li.current{
strong{
background-image: url("../assets/images/detail/stats-cur-bg.png");
background-size: 100% 100%;
}
}
}
/*评论*/
.comments-box{
margin: 5px 0 0 0;
}
.comments-list{
li{
padding:6px 0 10 0;
border-bottom: 1px solid #dbdbdb;
position: relative;
.userimg{
float: left;
margin: 5px 0 0 3px;
width: 28px;
height: 28px;
img{
width: 100%;
height:100%;
}
i{
width: 11px;
height: 11px;
left: 20px;
bottom: 4px;
background-size: 100% 100%;
}
}
.userinfo{
float: left;
margin: 0 0 0 10px;
h6{
line-height: 20px;
font-size: 13px;
font-weight: bold;
}
p{
margin: 2px 0 0 0;
line-height: 16px;
font-size: 12px;
}
}
}
}
.view-more{
margin: 18px 0 23px 0;
font-weight: bold;
text-align: center;
font-size: 14px;
line-height: 16px;
a{
color: #000;
}
}
.comment-textarea{
.anonymous-info {
margin-bottom: 6px;
input {
padding: 0 6px;
width: 217px;
height: 23px;
line-height: 23px;
&:first-child {
width: 216px;
}
}
}
textarea{
width: 447px;
height: 35px;
border: 1px solid #000;
resize:none;
margin: 0;
padding: 6px;
}
.login-status{
width: 455px;
height: 24px;
padding: 2px;
border: 1px solid #000;
border-top: none;
.userimg{
float: left;
margin: 3px 0 0 10px;
width: 20px;
height: 20px;
i{
width: 7px;
height: 7px;
left: 15px;
background-size: 100% 100%;
}
}
.userinfo{
margin: 0 0 0 18px;
font-size: 12px;
line-height: 24px;
}
.anonymous{
line-height: 20px;
}
.publish{
margin: 0px 16px 0 0;
.publish-btn{
width: 55px;
height: 22px;
line-height: 22px;
background-image: url("../assets/images/detail/publish-btn.png");
background-size: 100% 100%;
font-size: 12px;
}
}
}
}
/*上一篇下一篇*/
.news-next-prev{
margin: 30px 0 0 0;
height: 16px;
.prev{
float: left;
a{
margin: 0 0 0 12px;
padding: 0 0 0 22px;
background: url("../assets/images/detail/prev-arrow-1024.png") no-repeat left center;
}
}
.next{
float: right;
a{
margin: 0 12px 0 0;
padding: 0 22px 0 0;
background: url("../assets/images/detail/next-arrow-1024.png") no-repeat right center;
}
}
a{
display: block;
line-height: 16px;
font-size: 14px;
color: #999999;
}
}
/*related posts*/
.related-posts{
margin: 25px 0 0 0;
h2{
padding: 0 0 6px 0;
line-height: 22px;
font-size: 14px;
color: #000;
font-weight: bold;
background-image: url("../assets/images/detail/detail-line-1024.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100%;
}
.load-more {
width: 119px;
height: 25px;
}
}
.postslist{
margin: 14px 0 0 0;
width: 488px;
li{
float: left;
margin: 0 32px 0 0;
width: 212px;
height: 198px;
.pic{
position: relative;
img{
display: block;
width: 100%;
height: 135px;
}
.play-icon{
position: absolute;
width: 47px;
height: 43px;
background: url("../assets/images/detail/play-icon-1024.png");
background-size: 100% 100%;
left: 50%;
top: 50%;
margin: -22px 0 0 -23px;
}
.arrow-bottom {
border-width: 28px;
border-right-width: 0;
}
}
h4{
margin: 6px 0 0 0;
font-size: 12px;
color: #000;
line-height: 14px;
font-weight: bold;
}
p{
font-weight:bold;
margin: 5px 0 0 0;
line-height: 14px;
font-size: 12px;
color: #333;
}
}
}
/*分享*/
.share{
top: 256px;
left: 50%;
margin-left: -370px;
h4{
line-height: 23px;
font-size: 13px;
color: #000;
margin-bottom: 4px;
}
li{
width: 30px;
height: 30px;
margin-bottom: 10px;
img{
display: block;
width: 100%;
height: 100%;
}
}
}
/*detail侧边栏*/
.detail-side{
float: left;
margin: 0 0 0 26px;
width: 182px;
}
.detail-ad{
img{
display: block;
width: 100%;
}
}
.app-download{
margin: 17px 0 0 0;
padding: 6px 0 6px 6px;
width: 176px;
height: 62px;
background-size: 100% 100%;
.qr{
float: left;
width: 66px;
height: 62px;
img{
display: block;
width: 100%;
height: 100%;
}
}
.app-main{
float: left;
margin: 0 0 0 5px;
h6{
margin: 0;
line-height: 20px;
font-size: 13px;
color: #000;
}
p{
width: 90px;
line-height: 12px;
font-size: 10px;
color: #989898;
}
.download-btn{
margin: 2px 0 0 0;
a{
float: left;
margin: 0 0 0 10px;
width: 33px;
height: 13px;
img{
display: block;
width: 100%;
height: 100%;
}
}
a:first-child{
width: 46px;
height: 13px;
margin: 0;
}
}
}
}
.focus-us{
margin: 19px 0 0 0;
padding: 12px 15px 17px;
width: 152px;
height: 66px;
background-size: 100% 100%;
h4{
line-height: 20px;
font-size: 18px;
color: #000;
text-align: center;
}
.focuslist{
margin:7px auto 0;
li{
float: left;
width: 15px;
height: 15px;
margin: 0 0px 0 16px;
img{
display: block;
height: 100%;
margin: 0 auto;
}
}
li.focus-wx{
position: relative;
.pop{
display: none;
z-index: 999;
position: absolute;
width: 85px;
height: 76px;
left: -34px;
top: 18px;
line-height: 76px;
vertical-align: middle;
background-size: 310%;
img{
display: inline;
vertical-align: middle;
width: 65px;
height: 65px;
margin: 7px 0 0 0;
}
}
}
li:first-child{
margin: 0 0 0 4px;
}
}
.textbox{
margin: 8px 0 0 0;
input{
float: left;
padding: 0 0 0 4px;
width: 108px;
height: 14px;
border: 1px solid #000;
outline: none;
font-size: 12px;
}
a{
float: left;
display: inline-block;
width: 38px;
height: 16px;
line-height: 16px;
background: #000;
color: #fff;
font-size: 12px;
text-align: center;
}
}
}
.side-map{
.map-section{
h2{
font-size: 16px;
background-size: 100%;
}
h6{
margin: 8px 0 0 6px;
font-size: 13px;
line-height: 16px;
color: #000;
}
p{
font-size: 12px;
}
}
}
.side-video{
margin: 17px 0 0 0;
.video-area{
object{
height: 98px;
embed{
height: 98px;
}
}
video{
height: 98px;
}
img{
width: 100%;
display: block;
}
}
h3{
margin: 3px 0 0 0;
line-height: 18px;
font-size: 12px;
font-weight: bold;
color: #000;
}
p{
margin: 5px 0 0 0;
line-height: 14px;
font-size: 12px;
color: #000;
}
}
.side-related-posts{
margin: 24px 0 0 0;
h2{
line-height: 21px;
font-size: 14px;
padding-bottom: 3px;
background-size: 100%;
}
}
.side-postslist{
li{
margin: 11px 0 0 0;
max-height: 37px;
overflow: hidden;
.pic{
width: 57px;
height: 38px;
.play-icon{
width: 17px;
height: 16px;
background-size: 100% 100%;
left: 50%;
top: 50%;
margin: -8px 0 0 -9px;
}
}
.post-title{
float: left;
width: 115px;
margin: 0 0 0 10px;
h4{
font-weight: bold;
font-size: 12px;
line-height: 16px;
}
p{
margin: 5px 0 0 0;
color: #333;
font-weight: bold;
line-height: 16px;
font-size: 12px;
}
}
}
}
.detail-zoom {
width: 500px;
margin-left: -250px;
text-align: center;
img {
max-width: 500px;
}
.guide-btn {
&.prev {
left: -70px;
}
&.next {
right: -70px;
}
}
}
@media screen and (max-width: 768px) {
.detail-container {
width: 668px;
margin: 14px auto 0;
}
/*detail标题*/
.detail-title {
width: 100%;
margin: 0 0 8px 0;
h1 {
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
h2 {
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.detail-category {
font-size: 12px;
color: #666666;
line-height: 30px;
a {
color: #666666;
}
}
}
/*detail主体*/
.detail-body {
float: left;
width: 460px;
object {
width: 460px;
height: 259px;
}
embed {
width: 460px;
height: 259px;
}
video {
width: 460px;
height: 259px;
}
}
.video-wrap.current {
width: 182px;
object {
width: 182px;
height: 103px;
}
embed {
width: 182px;
height: 103px;
}
video {
width: 182px;
height: 103px;
}
}
/*slide图片*/
.detail-slide-body {
width: 100%;
height: 266px;
overflow: hidden;
}
.detail-slide-piclist {
li {
float: left;
width: 460px;
height: 266px;
line-height: 266px;
}
}
.detail-slide-ctrl {
padding: 15px 0 0 0;
width: 100%;
height: 44px;
position: relative;
.detail-slide-ctrl-prev, .detail-slide-ctrl-next {
position: relative;
margin: -44px 0 0 0;
width: 20px;
height: 44px;
line-height: 44px;
background-size: 50% 50%;
}
.detail-slide-ctrl-prev {
margin-right: -20px;
}
.detail-slide-ctrl-next {
margin-left: -20px;
}
}
.detail-slide-ctrl-tabs {
li {
position: relative;
float: left;
margin: 0 0 0 4px;
img {
display: block;
width: 77px;
height: 44px;
}
}
li:first-child {
margin: 0;
}
li.current {
.border {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border: 1px solid #000;
}
.arrow {
position: absolute;
width: 11px;
height: 6px;
top: -5px;
left: 50%;
margin: 0 0 0 -5px;
background-image: url("../assets/images/detail/slide-arrow.png");
background-size: 100% 100%;
}
}
}
/*资讯主体*/
.text-body {
line-height: 20px;
p {
margin: 16px 0;
line-height: 20px;
font-size: 12px;
}
}
/*标签*/
.tag-box {
margin: 26px 0 0 0;
padding: 0 0 11px 0;
background-size: 100%;
.taglist {
padding: 0 0 0 18px;
background: url("../assets/images/detail/tag-icon.png") no-repeat 1px 6px;
}
li {
float: left;
line-height: 24px;
height: 24px;
a {
padding: 0 10px 0 10px;
font-size: 14px;
color: #1c1c1b;
font-weight: bold;
}
}
li:last-child {
background: none;
}
li.last-child {
background: none;
}
}
/*统计栏*/
.stats-btn {
margin: 16px 0 0 0;
.statslist {
float: right;
}
li {
float: left;
width: 52px;
img {
display: block;
margin: 1px 0 0 1px;
}
strong {
float: left;
width: 20px;
height: 20px;
img {
display: block;
width: 18px;
height: 18px;
}
}
span {
float: left;
margin: -6px 0 0 -2px;
font-size: 10px;
color: #000;
}
}
li.comments {
margin: 0;
padding: 0;
border-left: 1px solid #000;
img, span {
float: right;
}
span {
margin: 10px 0 0 0;
img {
width: 17px;
height: 8px;
}
line-height:8px;
}
img {
width: 18px;
height: 17px;
}
}
li.current {
strong {
background-image: url("../assets/images/detail/stats-cur-bg.png");
background-size: 100% 100%;
}
}
}
/*评论*/
.comments-box {
margin: 5px 0 0 0;
}
.comments-list {
li {
padding: 6px 0 10 0;
border-bottom: 1px solid #dbdbdb;
position: relative;
.userimg {
float: left;
margin: 5px 0 0 3px;
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
i {
width: 11px;
height: 11px;
left: 20px;
bottom: 4px;
background-size: 100% 100%;
}
}
.userinfo {
float: left;
margin: 0 0 0 10px;
h6 {
line-height: 20px;
font-size: 13px;
font-weight: bold;
}
p {
margin: 2px 0 0 0;
line-height: 16px;
font-size: 12px;
}
}
}
}
.view-more {
margin: 18px 0 23px 0;
font-weight: bold;
text-align: center;
font-size: 14px;
line-height: 16px;
a {
color: #000;
}
}
.comment-textarea {
.anonymous-info {
margin-bottom: 6px;
input {
padding: 0 6px;
width: 217px;
height: 23px;
line-height: 23px;
&:first-child {
width: 216px;
}
}
}
textarea {
width: 447px;
height: 35px;
border: 1px solid #000;
resize: none;
margin: 0;
padding: 6px;
}
.login-status {
width: 455px;
height: 24px;
padding: 2px;
border: 1px solid #000;
border-top: none;
.userimg {
float: left;
margin: 3px 0 0 10px;
width: 20px;
height: 20px;
i {
width: 7px;
height: 7px;
left: 15px;
background-size: 100% 100%;
}
}
.userinfo {
margin: 0 0 0 18px;
font-size: 12px;
line-height: 24px;
}
.anonymous {
line-height: 20px;
}
.publish {
margin: 0px 16px 0 0;
.publish-btn {
width: 55px;
height: 22px;
line-height: 22px;
background-image: url("../assets/images/detail/publish-btn.png");
background-size: 100% 100%;
font-size: 12px;
}
}
}
}
/*上一篇下一篇*/
.news-next-prev {
margin: 30px 0 0 0;
height: 16px;
.prev {
float: left;
a {
margin: 0 0 0 12px;
padding: 0 0 0 22px;
background: url("../assets/images/detail/prev-arrow-1024.png") no-repeat left center;
}
}
.next {
float: right;
a {
margin: 0 12px 0 0;
padding: 0 22px 0 0;
background: url("../assets/images/detail/next-arrow-1024.png") no-repeat right center;
}
}
a {
display: block;
line-height: 16px;
font-size: 14px;
color: #999999;
}
}
/*related posts*/
.related-posts {
margin: 25px 0 0 0;
h2 {
padding: 0 0 6px 0;
line-height: 22px;
font-size: 14px;
color: #000;
font-weight: bold;
background-image: url("../assets/images/detail/detail-line-1024.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100%;
}
.load-more {
width: 119px;
height: 25px;
}
}
.related-posts .postslist {
margin: 14px 0 0 0;
width: 488px;
li {
float: left;
margin: 0 32px 0 0;
width: 212px;
height: 198px;
.pic {
position: relative;
img {
display: block;
width: 100%;
height: 135px;
}
.play-icon {
position: absolute;
width: 47px;
height: 43px;
background: url("../assets/images/detail/play-icon-1024.png");
background-size: 100% 100%;
left: 50%;
top: 50%;
margin: -22px 0 0 -23px;
}
.arrow-bottom {
border-width: 28px;
border-right-width: 0;
}
}
h4 {
margin: 6px 0 0 0;
font-size: 12px;
color: #000;
line-height: 14px;
font-weight: bold;
}
p {
font-weight: bold;
margin: 5px 0 0 0;
line-height: 14px;
font-size: 12px;
color: #333;
}
}
}
/*分享*/
.share {
top: 256px;
left: 50%;
margin-left: -370px;
h4 {
line-height: 23px;
font-size: 13px;
color: #000;
margin-bottom: 4px;
}
li {
width: 30px;
height: 30px;
margin-bottom: 10px;
img {
display: block;
width: 100%;
height: 100%;
}
}
}
/*detail侧边栏*/
.detail-side {
float: left;
margin: 0 0 0 26px;
width: 182px;
}
.detail-ad {
img {
display: block;
width: 100%;
}
}
.app-download {
margin: 17px 0 0 0;
padding: 6px 0 6px 6px;
width: 176px;
height: 62px;
background-size: 100% 100%;
.qr {
float: left;
width: 66px;
height: 62px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.app-main {
float: left;
margin: 0 0 0 5px;
h6 {
margin: 0;
line-height: 20px;
font-size: 13px;
color: #000;
}
p {
width: 90px;
line-height: 12px;
font-size: 10px;
color: #989898;
}
.download-btn {
margin: 2px 0 0 0;
a {
float: left;
margin: 0 0 0 10px;
width: 33px;
height: 13px;
img {
display: block;
width: 100%;
height: 100%;
}
}
a:first-child {
width: 46px;
height: 13px;
margin: 0;
}
}
}
}
.focus-us {
margin: 19px 0 0 0;
padding: 12px 15px 17px;
width: 152px;
height: 66px;
background-size: 100% 100%;
h4 {
line-height: 20px;
font-size: 18px;
color: #000;
text-align: center;
}
.focuslist {
margin: 7px auto 0;
li {
float: left;
width: 15px;
height: 15px;
margin: 0 0px 0 16px;
img {
display: block;
height: 100%;
margin: 0 auto;
}
}
li.focus-wx {
position: relative;
.pop {
display: none;
z-index: 999;
position: absolute;
width: 85px;
height: 76px;
left: -34px;
top: 18px;
line-height: 76px;
vertical-align: middle;
background-size: 310%;
img {
display: inline;
vertical-align: middle;
width: 65px;
height: 65px;
margin: 7px 0 0 0;
}
}
}
li:first-child {
margin: 0 0 0 4px;
}
}
.textbox {
margin: 8px 0 0 0;
input {
float: left;
padding: 0 0 0 4px;
width: 108px;
height: 14px;
border: 1px solid #000;
outline: none;
font-size: 12px;
}
a {
float: left;
display: inline-block;
width: 38px;
height: 16px;
line-height: 16px;
background: #000;
color: #fff;
font-size: 12px;
text-align: center;
}
}
}
.side-map {
.map-section {
h2 {
font-size: 16px;
background-size: 100%;
}
h6 {
margin: 8px 0 0 6px;
font-size: 13px;
line-height: 16px;
color: #000;
}
p {
font-size: 12px;
}
}
}
.side-video {
margin: 17px 0 0 0;
.video-area {
object {
height: 98px;
embed {
height: 98px;
}
}
video {
height: 98px;
}
img {
width: 100%;
display: block;
}
}
h3 {
margin: 3px 0 0 0;
line-height: 18px;
font-size: 12px;
font-weight: bold;
color: #000;
}
p {
margin: 5px 0 0 0;
line-height: 14px;
font-size: 12px;
color: #000;
}
}
.side-related-posts {
margin: 24px 0 0 0;
h2 {
line-height: 21px;
font-size: 14px;
padding-bottom: 3px;
background-size: 100%;
}
.postslist {
li {
margin: 11px 0 0 0;
max-height: 37px;
overflow: hidden;
.pic {
width: 57px;
height: 38px;
.play-icon {
width: 17px;
height: 16px;
background-size: 100% 100%;
left: 50%;
top: 50%;
margin: -8px 0 0 -9px;
}
}
.post-title {
float: left;
width: 115px;
margin: 0 0 0 10px;
h4 {
font-weight: bold;
font-size: 12px;
line-height: 16px;
}
p {
margin: 5px 0 0 0;
color: #333;
font-weight: bold;
line-height: 16px;
font-size: 12px;
}
}
}
}
}
.detail-zoom {
width: 500px;
margin-left: -250px;
text-align: center;
img {
max-width: 500px;
}
.guide-btn {
&.prev {
left: -70px;
}
&.next {
right: -70px;
}
}
}
}
... ...
@media screen and (max-width:768px){
.mags-container{
width: 668px;
margin: 0 auto;
}
.newest-mags{
margin: 25px 0 0 0;
}
.mags-info{
width: 395px;
h2{
margin: 17px 0 0 0;
height: 51px;
background-size: 36% 100%;
}
.mags-text{
margin: 24px auto 0;
width: 258px;
line-height: 18px;
font-size: 12px;
}
.date-price{
margin: 20px 0 0 0;
p{
font-size: 14px;
}
.price{
font-size: 12px;
}
}
.mags-buy{
margin: 20px 0 0 0;
.buy-btn{
width: 99px;
height: 21px;
line-height: 21px;
font-size: 14px;
background-size: 100% 100%;
}
}
}
.mags-slide{
width: 210px;
.slide-box{
height:264px;
li{
width: 210px;
height: 264px;
}
}
.slide-ctrl{
margin: 8px 0 0 0;
li{
margin: 0 0 0 9px;
a{
display: block;
width: 8px;
height: 8px;
background-size: 100% 100%;
}
}
li.on{
a{
background-size: 100% 100%;
}
}
}
}
.column-slide{
margin: 27px 0 0 0;
.slide-box{
height: 221px;
.slide-piclist{
width: 680px;
}
li{
width: 158px;
margin: 0 12px 0 0;
img{
width: 100%;
height: 198px;
display: block;
}
span{
margin: 7px 0 0 0;
line-height: 16px;
font-size: 12px;
}
}
}
.slide-ctrl{
a.slide-ctrl-prev{
left: -30px;
}
a.slide-ctrl-next{
right: -40px;
}
}
}
.column-slide.magazine-list{
.slide-box{
width: 680px;
li{
width:170px;
a{
width: 158px;
}
}
}
}
.mags-column{
margin: 28px 0 0 0;
h2{
line-height: 23px;
font-size: 20px;
}
.column-slide{
margin: 0 0 20px 0;
h4{
line-height: 35px;
font-size: 14px;
}
.slide-box{
margin: 0px 0 0 0;
.slide-piclist{
width: 688px;
}
li{
margin: 0 22px 0 0;
width: 150px;
}
}
.slide-box{
margin: 0;
height: 268px;
.slide-piclist{
float: left;
width: 680px;
height: 268px;
}
li{
margin: 0 8px 0 0;
width: 76px;
height: 134px;
.img-wrap{
width: 76px;
height: 114px;
}
img{
width: 76px;
height: 114px;
}
span{
margin: 0;
line-height: 20px;
font-size: 12px;
}
}
}
.slide-ctrl{
a.slide-ctrl-prev{
left: -30px;
}
a.slide-ctrl-next{
right: -30px;
}
}
}
}
.column-slide.mags-app-download{
margin: 20px 0 0 0;
.slide-box{
height: auto;
li{
img{
width: auto;
margin: 0 auto;
}
span{
font-size: 12px;
line-height: 14px;
}
h6{
margin: 8px 0 0 12px;
line-height: 20px;
font-size: 18px;
}
p{
margin: 0 0 0 12px;
line-height: 14px;
color: #666666;
font-size: 13px;
}
strong{
display: block;
margin: 12px 0 0 12px;
line-height: 18px;
font-size: 12px;
color: #000;
}
}
li.column-slide01{
img{
width: 120px;
height: 110px;
}
}
li.column-slide02{
img{
margin: 11px 0 0 38px;
width: 123px;
height: 94px;
}
}
li.column-slide03{
img{
width: 94px;
height: 90px;
}
}
}
}
.column-slide.rule{
margin: 40px 0 0 0;
h2{
line-height: 48px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
.slide-box{
margin: 15px 0 0 0;
height: 237px;
}
}
.magazine-zoom {
width: 400px;
margin-left: -200px;
text-align: center;
img {
max-width: 400px;
}
.guide-btn {
&.prev {
left: -90px;
}
&.next {
right: -90px;
}
}
}
@media screen and (max-width: 768px) {
.mags-container {
width: 668px;
margin: 0 auto;
}
.newest-mags {
margin: 25px 0 0 0;
}
.mags-info {
width: 395px;
h2 {
margin: 17px 0 0 0;
height: 51px;
background-size: 36% 100%;
}
.mags-text {
margin: 24px auto 0;
width: 258px;
line-height: 18px;
font-size: 12px;
}
.date-price {
margin: 20px 0 0 0;
p {
font-size: 14px;
}
.price {
font-size: 12px;
}
}
.mags-buy {
margin: 20px 0 0 0;
.buy-btn {
width: 99px;
height: 21px;
line-height: 21px;
font-size: 14px;
background-size: 100% 100%;
}
}
}
.mags-slide {
width: 210px;
.slide-box {
height: 264px;
li {
width: 210px;
height: 264px;
}
}
.slide-ctrl {
margin: 8px 0 0 0;
li {
margin: 0 0 0 9px;
a {
display: block;
width: 8px;
height: 8px;
background-size: 100% 100%;
}
}
li.on {
a {
background-size: 100% 100%;
}
}
}
}
.column-slide {
margin: 27px 0 0 0;
.slide-box {
height: 221px;
.slide-piclist {
width: 680px;
}
li {
width: 158px;
margin: 0 12px 0 0;
img {
width: 100%;
height: 198px;
display: block;
}
span {
margin: 7px 0 0 0;
line-height: 16px;
font-size: 12px;
}
}
}
.slide-ctrl {
a.slide-ctrl-prev {
left: -30px;
}
a.slide-ctrl-next {
right: -40px;
}
}
}
.column-slide.magazine-list {
.slide-box {
width: 680px;
li {
width: 170px;
a {
width: 158px;
}
}
}
}
.mags-column {
margin: 28px 0 0 0;
h2 {
line-height: 23px;
font-size: 20px;
}
.column-slide {
margin: 0 0 20px 0;
h4 {
line-height: 35px;
font-size: 14px;
}
.slide-box {
margin: 0px 0 0 0;
.slide-piclist {
width: 688px;
}
li {
margin: 0 22px 0 0;
width: 150px;
}
}
.slide-box {
margin: 0;
height: 268px;
.slide-piclist {
float: left;
width: 680px;
height: 268px;
}
li {
margin: 0 8px 0 0;
width: 76px;
height: 134px;
.img-wrap {
width: 76px;
height: 114px;
}
img {
width: 76px;
height: 114px;
}
span {
margin: 0;
line-height: 20px;
font-size: 12px;
}
}
}
.slide-ctrl {
a.slide-ctrl-prev {
left: -30px;
}
a.slide-ctrl-next {
right: -30px;
}
}
}
}
.column-slide.mags-app-download {
margin: 20px 0 0 0;
.slide-box {
height: auto;
li {
img {
width: auto;
margin: 0 auto;
}
span {
font-size: 12px;
line-height: 14px;
}
h6 {
margin: 8px 0 0 12px;
line-height: 20px;
font-size: 18px;
}
p {
margin: 0 0 0 12px;
line-height: 14px;
color: #666666;
font-size: 13px;
}
strong {
display: block;
margin: 12px 0 0 12px;
line-height: 18px;
font-size: 12px;
color: #000;
}
}
li.column-slide01 {
img {
width: 120px;
height: 110px;
}
}
li.column-slide02 {
img {
margin: 11px 0 0 38px;
width: 123px;
height: 94px;
}
}
li.column-slide03 {
img {
width: 94px;
height: 90px;
}
}
}
}
.column-slide.rule {
margin: 40px 0 0 0;
h2 {
line-height: 48px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
.slide-box {
margin: 15px 0 0 0;
height: 237px;
}
}
.magazine-zoom {
width: 400px;
margin-left: -200px;
text-align: center;
img {
max-width: 400px;
}
.guide-btn {
&.prev {
left: -90px;
}
&.next {
right: -90px;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -4,7 +4,6 @@
}
/*detail标题*/
.detail-title{
width: 100%;
margin: 0 0 5px 0;
... ... @@ -29,10 +28,10 @@
text-decoration: underline;
}
}
}
}
/*detail主体*/
.detail-body{
.detail-body{
float: left;
width: 630px;
font-size:14px;
... ... @@ -609,7 +608,7 @@
background-size: 100% 100%;
}
}
.postslist{
.related-posts .postslist{
margin: 14px 0 0 0;
width: 672px;
li{
... ... @@ -866,7 +865,6 @@
}
}
.side-video{
display: none;
margin: 29px 0 0 0;
.video-area{
position: relative;
... ... @@ -910,7 +908,6 @@
}
}
.side-related-posts{
display: none;
margin: 35px 0 0 0;
background: #fff;
h2{
... ... @@ -921,55 +918,56 @@
background-repeat: no-repeat;
background-position: left bottom;
}
}
.side-postslist{
li{
margin: 18px 0 0 0;
a{
display: block;
}
.pic{
position: relative;
float: left;
margin: 3px 0 0 0;
width: 77px;
height: 51px;
img{
width: 100%;
height: 100%;
display: block;
}
.play-icon{
position: absolute;
width: 20px;
height: 19px;
background-image: url("../assets/images/detail/play-icon-s.png");
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
.postslist{
li{
margin: 18px 0 0 0;
a{
display: block;
}
}
.post-title{
float: left;
width: 155px;
margin: 0 0 0 14px;
h4{
font-weight: bold;
font-size: 14px;
line-height: 14px;
.pic{
position: relative;
float: left;
margin: 3px 0 0 0;
width: 77px;
height: 51px;
img{
width: 100%;
height: 100%;
display: block;
}
.play-icon{
position: absolute;
width: 20px;
height: 19px;
background-image: url("../assets/images/detail/play-icon-s.png");
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
}
}
p{
font-weight: bold;
margin: 5px 0 0 0;
color: #333;
line-height: 16px;
font-size: 14px;
width: 100%;
.post-title{
float: left;
width: 155px;
margin: 0 0 0 14px;
h4{
font-weight: bold;
font-size: 14px;
line-height: 14px;
}
p{
font-weight: bold;
margin: 5px 0 0 0;
color: #333;
line-height: 16px;
font-size: 14px;
width: 100%;
}
}
}
}
}
.login-box{
position: fixed;
width: 400px;
... ...
.mags-container{
width: 924px;
margin: 0 auto;
}
.newest-mags{
margin: 46px 0 0 0;
}
.mags-info{
float: left;
width: 546px;
h2{
margin: 23px 0 0 0;
height: 70px;
background: url("../assets/images/magazine/mags-title.png") no-repeat center center;
}
.mags-text{
margin: 24px auto 0;
width: 360px;
line-height: 20px;
font-size: 14px;
text-align: center;
color: #444444;
}
.date-price{
margin: 35px 0 0 0;
p{
font-size: 17px;
color: #333333;
text-align: center;
}
.price{
color: #666666;
font-size: 14px;
}
}
.mags-buy{
margin: 18px 0 0 0;
.buy-btn{
display: block;
margin: 0 auto;
width: 137px;
height: 29px;
line-height: 29px;
font-size: 17px;
color: #fff;
text-align: center;
background-image: url("../assets/images/magazine/buy-btn-1024.png");
background-position: center center;
background-repeat: no-repeat;
}
}
.mags-container {
width: 924px;
margin: 0 auto;
}
.mags-slide{
float: left;
width: 292px;
.slide-box{
width: 100%;
height:366px;
overflow: hidden;
li{
float: left;
width: 292px;
height: 366px;
img{
display: block;
width: 100%;
height: 100%;
}
}
}
.slide-ctrl{
margin: 10px 0 0 0;
text-align: center;
.slide-ctrl-tabs{
display: inline-block;
}
a{
float: left;
margin: 0 0 0 14px;
width: 10px;
height: 10px;
background-image: url("../assets/images/magazine/slide-ctrl-1024.png");
text-indent: -50px;
overflow: hidden;
}
a:first-child{
margin: 0;
}
a.activeSlide{
background-image: url("../assets/images/magazine/slide-ctrl-current-1024.png");
}
a:focus{
outline:none;
}
}
.newest-mags {
margin: 46px 0 0 0;
}
.column-slide{
margin: 41px 0 0 0;
position: relative;
.slide-box{
width: 100%;
height: auto;
overflow: hidden;
position:relative;
height: 312px;
.loading-img{
position: absolute;
top: 50%;
left: 50%;
margin: -23px 0 0 -23px;
}
.slide-piclist{
position: relative;
width:940px;
top: 0;
left: 0;
}
li{
position: relative;
width: 218px;
float: left;
margin: 0 17px 0 0;
.img-wrap{
position: relative;
.border{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #ccc;
}
.special-icon{
position: absolute;
left: 0;
top: 0;
width: 36px;
height: 15px;
background: url("../assets/images/magazine/special.png");
}
}
img{
width: 100%;
height: 274px;
display: block;
}
span{
display: block;
margin: 18px 0 0 0;
line-height: 20px;
text-align: center;
font-size: 16px;
color: #000;
font-weight: bold;
}
}
}
.slide-ctrl{
display: none;
a{
position: absolute;
width: 35px;
height: 50px;
top: 38%;
margin-top: -18px;
background-image: url("../assets/images/magazine/slide-ctrl-btn-1024.png");
z-index: 1;
}
a.slide-ctrl-prev{
background-position: 0 0;
left: -46px;
}
a.slide-ctrl-next{
background-position: -35px 0;
right: -50px;
}
}
.mags-info {
float: left;
width: 546px;
h2 {
margin: 23px 0 0 0;
height: 70px;
background: url("../assets/images/magazine/mags-title.png") no-repeat center center;
}
.mags-text {
margin: 24px auto 0;
width: 360px;
line-height: 20px;
font-size: 14px;
text-align: center;
color: #444444;
}
.date-price {
margin: 35px 0 0 0;
p {
font-size: 17px;
color: #333333;
text-align: center;
}
.price {
color: #666666;
font-size: 14px;
}
}
.mags-buy {
margin: 18px 0 0 0;
.buy-btn {
display: block;
margin: 0 auto;
width: 137px;
height: 29px;
line-height: 29px;
font-size: 17px;
color: #fff;
text-align: center;
background-image: url("../assets/images/magazine/buy-btn-1024.png");
background-position: center center;
background-repeat: no-repeat;
}
}
}
.column-slide.magazine-list{
.slide-box{
width: 940px;
li{
width:235px;
margin: 0;
a{
display: block;
width: 218px;
}
}
}
.mags-slide {
float: left;
width: 292px;
.slide-box {
width: 100%;
height: 366px;
overflow: hidden;
li {
float: left;
width: 292px;
height: 366px;
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.slide-ctrl {
margin: 10px 0 0 0;
text-align: center;
.slide-ctrl-tabs {
display: inline-block;
}
a {
float: left;
margin: 0 0 0 14px;
width: 10px;
height: 10px;
background-image: url("../assets/images/magazine/slide-ctrl-1024.png");
text-indent: -50px;
overflow: hidden;
}
a:first-child {
margin: 0;
}
a.activeSlide {
background-image: url("../assets/images/magazine/slide-ctrl-current-1024.png");
}
a:focus {
outline: none;
}
}
}
.mags-column{
margin: 43px 0 0 0;
h2{
line-height: 25px;
font-size: 24px;
text-align: center;
color: #000;
font-weight: bold;
}
.column-slide{
margin: 4px 0 20px 0;
h4{
line-height: 47px;
font-size: 17px;
font-weight: bold;
}
.slide-box{
margin: 0;
height: 362px;
line-height: 362px;
text-align: center;
.slide-piclist{
float: left;
width: 928px;
height: 362px;
}
li{
margin: 0 14px 0 0;
width: 102px;
height: 181px;
.img-wrap{
width: 102px;
height: 153px;
}
img{
width: 102px;
height: 153px;
}
span{
margin: 0;
line-height: 28px;
font-size: 14px;
}
}
}
.slide-ctrl{
a{
top: 50%;
margin-top: -25px;
}
a.slide-ctrl-prev{
background-position: 0 0;
left: -46px;
}
a.slide-ctrl-next{
background-position: -35px 0;
right: -46px;
}
}
}
}
.column-slide.mags-app-download{
margin: 20px 0 0 0;
.slide-box{
height: auto;
li{
img{
width: auto;
margin: 0 auto;
}
span{
margin: 0;
display: block;
font-weight: bold;
font-size: 15px;
line-height: 20px;
text-align: center;
}
h6{
margin: 15px 0 0 12px;
font-size: 22px;
}
p{
margin: 0 0 0 12px;
line-height: 20px;
color: #666666;
font-size: 16px;
}
strong{
display: block;
margin: 22px 0 0 12px;
line-height: 18px;
font-size: 14px;
color: #000;
}
}
li.column-slide01{
img{
width: 170px;
height: 150px;
}
}
li.column-slide02{
img{
margin: 11px 0 0 55px;
width: 170px;
height: 130px;
}
}
li.column-slide03{
img{
width: 129px;
height: 124px;
}
}
}
.column-slide {
margin: 41px 0 0 0;
position: relative;
.slide-box {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
height: 312px;
.loading-img {
position: absolute;
top: 50%;
left: 50%;
margin: -23px 0 0 -23px;
}
.slide-piclist {
position: relative;
width: 940px;
top: 0;
left: 0;
}
li {
position: relative;
width: 218px;
float: left;
margin: 0 17px 0 0;
.img-wrap {
position: relative;
.border {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #ccc;
}
.special-icon {
position: absolute;
left: 0;
top: 0;
width: 36px;
height: 15px;
background: url("../assets/images/magazine/special.png");
}
}
img {
width: 100%;
height: 274px;
display: block;
}
span {
display: block;
margin: 18px 0 0 0;
line-height: 20px;
text-align: center;
font-size: 16px;
color: #000;
font-weight: bold;
}
}
}
.slide-ctrl {
display: none;
a {
position: absolute;
width: 35px;
height: 50px;
top: 38%;
margin-top: -18px;
background-image: url("../assets/images/magazine/slide-ctrl-btn-1024.png");
z-index: 1;
}
a.slide-ctrl-prev {
background-position: 0 0;
left: -46px;
}
a.slide-ctrl-next {
background-position: -35px 0;
right: -50px;
}
}
}
.column-slide.rule{
margin: 33px 0 0 0;
h2{
line-height: 48px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.slide-box{
margin: 11px 0 0 0;
height: 332px;
}
.slide-ctrl{
a{
margin-top: 0;
}
}
.column-slide.magazine-list {
.slide-box {
width: 940px;
li {
width: 235px;
margin: 0;
a {
display: block;
width: 218px;
}
}
}
}
/*大图弹层样式*/
.img-zoom {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
.mags-column {
margin: 43px 0 0 0;
h2 {
line-height: 25px;
font-size: 24px;
text-align: center;
color: #000;
font-weight: bold;
}
.column-slide {
margin: 4px 0 20px 0;
h4 {
line-height: 47px;
font-size: 17px;
font-weight: bold;
}
.slide-box {
margin: 0;
height: 362px;
line-height: 362px;
text-align: center;
.slide-piclist {
float: left;
width: 928px;
height: 362px;
}
li {
margin: 0 14px 0 0;
width: 102px;
height: 181px;
.img-wrap {
width: 102px;
height: 153px;
}
img {
width: 102px;
height: 153px;
}
span {
margin: 0;
line-height: 28px;
font-size: 14px;
}
}
}
.slide-ctrl {
a {
top: 50%;
margin-top: -25px;
}
a.slide-ctrl-prev {
background-position: 0 0;
left: -46px;
}
a.slide-ctrl-next {
background-position: -35px 0;
right: -46px;
}
}
}
}
&.show {
display: block;
}
.column-slide.mags-app-download {
margin: 20px 0 0 0;
.slide-box {
height: auto;
li {
img {
width: auto;
margin: 0 auto;
}
span {
margin: 0;
display: block;
font-weight: bold;
font-size: 15px;
line-height: 20px;
text-align: center;
}
h6 {
margin: 15px 0 0 12px;
font-size: 22px;
}
p {
margin: 0 0 0 12px;
line-height: 20px;
color: #666666;
font-size: 16px;
}
strong {
display: block;
margin: 22px 0 0 12px;
line-height: 18px;
font-size: 14px;
color: #000;
}
}
li.column-slide01 {
img {
width: 170px;
height: 150px;
}
}
li.column-slide02 {
img {
margin: 11px 0 0 55px;
width: 170px;
height: 130px;
}
}
li.column-slide03 {
img {
width: 129px;
height: 124px;
}
}
}
}
.guide-btn {
position: absolute;
width: 20px;
height: 34px;
background-image: url("../assets/images/arrow-girl.png");
background-repeat: no-repeat;
top: 50%;
margin-top: -17px;
.column-slide.rule {
margin: 33px 0 0 0;
h2 {
line-height: 48px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.slide-box {
margin: 11px 0 0 0;
height: 332px;
}
.slide-ctrl {
a {
margin-top: 0;
}
}
}
&.prev {
left: -112px;
}
/*澶у浘寮瑰眰鏍峰紡*/
&.next {
right: -112px;
background-position: -20px 0;
}
}
.img-zoom {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
&.show {
display: block;
}
.guide-btn {
position: absolute;
width: 20px;
height: 34px;
background-image: url("../assets/images/arrow-girl.png");
background-repeat: no-repeat;
top: 50%;
margin-top: -17px;
&.prev {
left: -112px;
}
&.next {
right: -112px;
background-position: -20px 0;
}
}
}
.magazine-zoom {
width: 600px;
margin-left: -300px;
text-align: center;
img {
max-width: 600px;
}
width: 600px;
margin-left: -300px;
text-align: center;
img {
max-width: 600px;
}
}
.overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left:0;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 999;
&.show {
display: block;
}
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #000;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index: 999;
&.show {
display: block;
}
}
\ No newline at end of file
... ...