Authored by happyhour7

页面头尾部简繁体区分,矮导航样式追加以及作者页显示

24.9 KB | W: | H:

25.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -123,7 +123,7 @@ gulp.task('build', function() {
gulp.task('build-debug', function() {
gulp.src(['js/util/seajs.js', 'dist/yohogirls-frontend-web/0.0.1/index-debug.js'])
.pipe(concat('all-debug.js'))
.pipe(gulp.dest('dist/yohogirls-frontend-web/0.0.1'))
.pipe(gulp.dest('dist/yohogirls-frontend-web/0.0.1'));
});
//generate all.js for production ENV
... ...
var yohogirlsFrontendWeb;
require('./js/public');
require('./js/home');
require('./js/channel');
module.exports = yohogirlsFrontendWeb;
... ...
... ... @@ -6,9 +6,6 @@ var $=require("jquery");
var tips=require("yoho-tips");
var box=require("yoho-box");
//首页碎片交互=================================================================================================
function dealItems() {
var citems = $(".content-item,.content-item-without-border");
if (!citems.length) {
... ... @@ -20,15 +17,21 @@ function dealItems() {
// 15个字
var maxDetailStrNum = 24;
// 22个字
if (document.body.clientWidth < 1190) {
if (document.body.clientWidth < 1190&&document.body.clientWidth>768) {
totalLineNum = 6;
// 6 行
maxTitleStrNum = 39;
maxTitleStrNum = 15;
// 13个字
maxDetailStrNum = 54;
maxDetailStrNum = 20;
// 18个字
}
else if(document.body.clientWidth<=768){
totalLineNum = 5;
// 6 行
maxTitleStrNum = 10;
// 13个字
maxDetailStrNum = 15;
}
var titleLineNum = 0;
var subTitleLineNum = 0;
... ... @@ -56,13 +59,14 @@ function dealItems() {
// 摘要内容行数
detailLineNum = totalLineNum - titleLineNum - subTitleLineNum;
if ((maxDetailStrNum * detailLineNum) < self.find(".content-item-detail-detail").attr("_title").length) {
detailStr = self.find(".content-item-detail-detail").attr("_title").substring(0, maxDetailStrNum * detailLineNum ) + " ...";
self.find(".content-item-detail-detail").text(detailStr.replace(/[a-zA-Z]+?\s{1}\.\.\.\$/, " ..."));
if ((maxDetailStrNum * detailLineNum) < self.find(".content-item-detail").attr("_title").length) {
detailStr = self.find(".content-item-detail").attr("_title").substring(0, (maxDetailStrNum-1) * detailLineNum ) + " ...";
self.find(".content-item-detail").html(detailStr.replace(/[a-zA-Z]+?\s{1}\.\.\.\$/, " ..."));
console.log(detailStr);
}
else
{
self.find(".content-item-detail-detail").text(self.find(".content-item-detail-detail").attr("_title"));
self.find(".content-item-detail").text(self.find(".content-item-detail-detail").attr("_title"));
}
});
citems = null;
... ...
... ... @@ -99,13 +99,19 @@ function dealItems() {
var maxDetailStrNum = 22;
// 22个字
if (document.body.clientWidth < 1190) {
if (document.body.clientWidth < 1190 &&document.body.clientWidth>768) {
totalLineNum = 6;
// 6 行
maxTitleStrNum = 39;
// 13个字
maxDetailStrNum = 20;
// 18个字
}else if(document.body.clientWidth <= 768){
totalLineNum = 5;
// 6 行
maxTitleStrNum = 12;
// 13个字
maxDetailStrNum = 15;
}
var titleLineNum = 0;
... ... @@ -122,12 +128,15 @@ function dealItems() {
titleLineNum = 1;
if (maxTitleStrNum < itemTitleObj.attr("_title").length) {
titleLineNum = 2;
itemTitleObj.text(itemTitleObj.attr('_title').substring(0,(maxTitleStrNum-1)*2)+'...');
}
// 副标题行数
subTitleLineNum = 1;
var subTitle=itemTitleObj.next();
if (maxTitleStrNum < itemTitleObj.next().attr("_title").length) {
subTitleLineNum = 2;
subTitle.text(subTitle.attr('_title').substring(0,(maxTitleStrNum-1)*2)+'...');
}
// 摘要内容行数
... ...
... ... @@ -5,7 +5,7 @@
*/
window.tmp$ = null;
var $ = require('jquery');
$(".lazy").lazyload();
require("lazyload");
$.fn.top = function() {
if (arguments.length > 0) {
$(this).css("top", arguments[0]);
... ... @@ -24,7 +24,6 @@ $.fn.left = function() {
}
};
require("lazyload");
var Swiper = require("yoho-idangerous.swiper");
$(".lazy").lazyload();
... ... @@ -62,12 +61,12 @@ if ($(".swiper-container").find(".swiper-slide").length > 1) {
//centerbanner=============================================================================
var bannerSwiper = new Swiper('.swiper-container2', {
pagination: '.pagination-adv',
loop: true,
autoplay: 2000,
autoStopPlay: false,
paginationClickable: true,
onSlideChangeEnd: function() {
pagination : '.pagination-adv',
loop : true,
autoplay : 2000,
autoStopPlay : false,
paginationClickable : true,
onSlideChangeEnd : function() {
bannerSwiper.startAutoplay();
$(".swiper-container2 .lazy").lazyload();
}
... ... @@ -104,12 +103,14 @@ $(".content").click(function() {
//企业滚动效果======================================================================================================
var minMenuHasShow = false;
var minMenuHasDropDown=false;
//小导航是否显示
var isTop = true;
var bigMenuHeight = 220;
//滚动条是否在顶部
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= 177 && minMenuHasShow === false) {
if (scrollTop >= bigMenuHeight && minMenuHasShow === false) {
$(".search-input-box").trigger("blur");
$("#maxEnterprise").css({
visibility : "hidden"
... ... @@ -123,11 +124,12 @@ $(window).scroll(function() {
"z-index" : 99999
}).show();
minMenuHasShow = true;
$(".enterprise-header-fixed").show();
$(".search-input-box").hide();
$(".home-search-button").hide();
window.isSearching = false;
$(".search-text").width(73);
//$(".search-text").width(73);
$(".search-text").find(".search-text-content").html("Search...");
$(".search-input-box").val("").hide().trigger("blur");
$(".search-area").find(".icons").show();
... ... @@ -138,13 +140,13 @@ $(window).scroll(function() {
$("#maxEnterprise").css({
visibility : "visible"
});
$(".enterprise-header-fixed").hide();
$("#minEnterprise").hide();
$(".search-input-box").hide();
$(".home-search-button").hide();
window.isSearching = false;
minMenuHasShow = false;
//搜索归位
$(".search-text").width(73);
$(".search-text").find(".search-text-content").html("Search...");
$(".search-input-box").val("").hide().trigger("blur");
$(".search-area").find(".icons").show();
... ... @@ -170,6 +172,24 @@ $(window).scroll(function() {
$(".search-suggest").hide();
});
$(document).bind({
mousemove : function(event) {
var scrollTop = $(this).scrollTop();
var mouseY=event.pageY-scrollTop;
if(mouseY<=200&&minMenuHasDropDown===false&&minMenuHasShow===true){
minMenuHasDropDown=true;
$("#minEnterprise").animate({top:37},500);
}
else if(minMenuHasDropDown===true&&minMenuHasShow===true&&mouseY>200)
{
minMenuHasDropDown=false;
$("#minEnterprise").animate({top:0},500);
}
}
});
//===============================================================================================================
if (document.body.scrollTop > 0 && isTop === true) {
$(".return-to-top").animate({
... ... @@ -190,18 +210,17 @@ if (document.body.scrollTop > 0 && isTop === true) {
//回到顶部按钮======================================================================================================
$(".return-to-top").click(function() {
$("html,body").animate({
scrollTop: 0
scrollTop : 0
}, 300, function() {
$(".return-to-top").animate({
"filter": "alpha(opacity=0)",
"-moz-opacity": "0",
opacity: "0"
"filter" : "alpha(opacity=0)",
"-moz-opacity" : "0",
opacity : "0"
}, 200);
});
});
//===============================================================================================================
//子菜单交互========================================================================================================
function createSubMenu(info) {
var data = {};
... ... @@ -224,71 +243,6 @@ function createSubMenu(info) {
//================================================================================================================
//频道页、首页碎片交互=================================================================================================
//mulLine.init();
function dealItems() {
var citems = $(".content-item,.content-item-without-border");
if (!citems.length) {
return;
}
var totalLineNum = 7;
// 7 行
var maxTitleStrNum = 45;
// 15个字
var maxDetailStrNum = 22;
// 22个字
if (document.body.clientWidth < 1190) {
totalLineNum = 6;
// 6 行
maxTitleStrNum = 39;
// 13个字
maxDetailStrNum = 54;
// 18个字
}
var titleLineNum = 0;
var subTitleLineNum = 0;
var detailLineNum = 0;
var detailStr = "";
var self = null;
citems.each(function() {
self = $(this);
// 主标题行数
titleLineNum = 1;
if (maxTitleStrNum < parseInt(self.find(".a-title").attr('len'), 10)) {
titleLineNum = 2;
}
// 副标题行数
subTitleLineNum = 1;
if (maxTitleStrNum < parseInt(self.find(".a-subtitle").attr('len'), 10)) {
subTitleLineNum = 2;
}
// 摘要内容行数
detailLineNum = totalLineNum - titleLineNum - subTitleLineNum;
if ((maxDetailStrNum * detailLineNum) < parseInt(self.find(".a-detail").attr('len'), 10)) {
//self.find(".a-detail").mlellipsis(detailLineNum, "detail");
detailStr = self.find(".a-detail").attr("_title").substring(0, (maxDetailStrNum-1) * detailLineNum / 3) + " ...";
self.find(".a-detail").text(detailStr.replace(/[a-zA-Z]+?\s{1}\.\.\.\B/, " ..."));
} else {
self.find(".content-item-detail").text(self.find(".content-item-detail").attr("_title"));
}
});
citems = null;
}
$(function() {
dealItems();
});
window.currentWidth = document.body.clientWidth;
//================================================================================================================
//=================================================================================================================
/*$(window).bind("resize",function(){
fillDetail();
... ... @@ -297,10 +251,6 @@ fillDetail();
var isIpad = getBrowType().bIsIpad;
$(function() {
dealItems();
});
window.currentWidth = document.body.clientWidth;
//================================================================================================================
... ... @@ -343,13 +293,13 @@ if (!isIpad && $(".share").size() > 0) {
scrollTop = $(window).scrollTop();
if (shareOffsetTop - scrollTop - navHeight <= 0) {
$(".share").css({
"position": "fixed",
"top": navHeight
"position" : "fixed",
"top" : navHeight
});
} else {
$(".share").css({
"position": "absolute",
"top": shareOffsetTop
"position" : "absolute",
"top" : shareOffsetTop
});
}
});
... ... @@ -368,7 +318,7 @@ window.scrollWindow = function() {
}
};
//搜索按钮===========================================================================
var clientWidth=$(window).width();
var clientWidth = $(window).width();
$(".search-input-box").keypress(function(event) {
var keyCode = event.keyCode;
if (keyCode === 13) {
... ... @@ -383,51 +333,62 @@ $("#search-button").click(function() {
return false;
});
var searchWidth=$(".search-text").width();
var searchWidth = $(".search-text").width();
$(document.body).click(function() {
var target = $(".search-text");
target.find(".search-input-box").hide();
target.find(".home-search-button").hide();
target.find(".search-text-content").show();
$(".search-text").click(function() {
return false;
});
$(".search-text").click(function() {
return false;
});
if(clientWidth<=768){
if (clientWidth <= 768) {
target.parent().removeAttr("style");
target.css({width:"auto"});
}
else{
target.css({
width : "auto"
});
} else {
target.animate({
width : searchWidth
}, 500);
}
});
$(".search-text").click(function() {
return false;
});
$(".search-text").click(function() {
$(this).find(".search-text-content").hide();
$(this).parent().width(131);
$(this).find(".search-input-box").width(80).val("").show();
if(clientWidth<=768){
if (clientWidth <= 768) {
$(this).parent().width(131);
$(this).find(".home-search-button").show();
$(this).find(".search-input-box").width(80).val("").show();
$(this).find(".search-input-box").focus();
$(this).width(120);
}else{
$(this).animate({
} else if (clientWidth >= 924 && clientWidth < 1080) {
$(this).parent().width(198);
$(this).find(".search-input-box").width(150).val("").show();
$(this).animate({
width : 190
}, 500, function() {
$(this).find(".home-search-button").show();
$(this).find(".search-input-box").focus();
});
} else {
$(this).parent().width(218);
$(this).find(".search-input-box").width(150).val("").show();
$(this).animate({
width : 190
}, 500, function() {
$(this).find(".home-search-button").show();
$(this).find(".search-input-box").focus();
});
});
}
});
//=================================================================================
... ...
... ... @@ -19,15 +19,15 @@
"jquery": "~1.8.3",
"lazyload": "~1.9.6",
"yoho.swiper": "2.7.0",
"yoho-idangerous.swiper": "0.0.2",
"yoho-idangerous.swiper": "~0.0.3",
"box": "0.0.0",
"yoho-box": "0.0.1",
"yoho-box": "~0.0.5",
"yoho-tools": "~0.0.4",
"yoho-tips": "0.0.1",
"mustache": "2.0.0",
"jquery.autocomplete": "~0.0.2",
"mlellipsis": "0.0.2",
"jquery.rotate2d": "0.0.3"
"jquery.rotate2d": "~0.0.3"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
/*屏幕宽度小于1190,自动适配1024设计分辨率*/
@media screen and (min-width:1190px){
#minEnterprise{
height:55px;
.minEnterprise{
height:134px;
.logo{
width:163px;
height:70px;
margin: 8px auto 8px auto;
background:url(../assets/images/little_logo.png) no-repeat;
a{
@include blockwh(100%,100%);
}
}
}
.enterprise{
height:152px;
.logo{
width:190px;
height:81px;
margin: 31px auto 0 auto;
background:url(../assets/images/logo.png) no-repeat;
margin-bottom:27px;
a{
@include blockwh(100%,100%);
}
}
}
.enterprise,.minEnterprise{
width:100%;
height:152px;
/*overflow:hidden;*/
margin:0 auto 6px;
background:#fff;
.icons{background:url(../assets/images/phone.png) center no-repeat;}
.logo{
width:190px;
height:81px;
margin: 31px auto 0 auto;
background:url(../assets/images/logo.png) no-repeat;
margin-bottom:27px;
a{
@include blockwh(100%,100%);
}
}
.black_logo {
background-position: left bottom;
... ... @@ -765,7 +780,7 @@
}
.menu-link-channel{
font-size:24px;
position:relative;
... ... @@ -777,19 +792,32 @@
&:hover {
color:#fff;
background:url(../assets/images/menu_hover.png) center bottom no-repeat;
.text{color:#fff;display:none;}
.hover-text{color:#fff;display:block;}
}
.menu{@include blockwh(100%,100%);position:absolute;top:0;left:0;z-index:10;}
.text{
text-align:center;
@include blockwh(100%,100%);position:absolute;top:0;left:0;z-index:9;
color:#000;
}
.hover-text{
text-align:center;
@include blockwh(100%,100%);position:absolute;top:0;left:0;z-index:9;
color:#000;
display:none;
}
}
.menu-link-magazine {
background:url(../assets/images/magazine_icon.png) top right no-repeat;
padding-right:18px;
margin-left:22px;
width:147px;
&:hover {
background:url(../assets/images/magazine_icon.png) -50px right no-repeat;
.hover-text{background:url(../assets/images/magazine_icon.png) right -55px no-repeat;}
}
}
.menu-link-fashion {width:100px;}
... ... @@ -797,7 +825,7 @@
width:100px;
margin-left:41px;
&:hover{
background-position:22px bottom;
background-position:42px bottom;
}
}
.menu-link-lifestyle {
... ... @@ -805,20 +833,20 @@
margin-left:31px;
&:hover{
background-position:31px bottom;
background-position:41px bottom;
}
}
.menu-link-beauty {
width:100px;
margin-left:46px;
&:hover{
background-position:30px bottom;
background-position:40px bottom;
}
}
.menu-link-video {width:100px;margin-left:49px;
&:hover{
background-position:30px bottom;
background-position:40px bottom;
}
}
... ... @@ -1351,7 +1379,6 @@
.content-fashion {
.follow-us {
background-position:-400px 0;
input {
border:1px solid #9693ff;
}
... ...
... ... @@ -2,15 +2,9 @@
@media screen and (max-width:768px){
/*屏幕宽度小于1190,自动适配1024设计分辨率*/
#minEnterprise{
height:55px;
}
.enterprise{
width:100%;
height:152px;
margin:0 auto 6px;
background:#fff;
.icons{background:url(../assets/images/phone.png) center no-repeat;}
.logo{
width:190px;
height:81px;
... ... @@ -21,6 +15,27 @@
@include blockwh(100%,100%);
}
}
}
.minEnterprise{
height:118px;
.logo{
width:163px;
height:70px;
margin: 8px auto 8px auto;
background:url(../assets/images/little_logo.png) no-repeat;
a{
@include blockwh(100%,100%);
}
}
}
.enterprise,.minEnterprise{
width:100%;
margin:0 auto 6px;
background:#fff;
.icons{background:url(../assets/images/phone.png) center no-repeat;}
.black_logo {
background-position: left bottom;
... ... @@ -41,8 +56,6 @@
margin:0 auto;
margin:0 auto;
position:relative;
.submenu{
width:668px;
height:395px;
... ... @@ -410,8 +423,8 @@
}
.advert-without-border{
width:342px;
height:495px;
width:212px;
height:308px;
float:right;
padding-bottom:0;
margin-top:27px;
... ... @@ -448,11 +461,12 @@
}
}
.content-item-without-border{
width:342px;
height:495px;
width:212px;
height:308px;
margin-top:27px;
float:left;
position:relative;
overflow:hidden;
.week-top{
width:100%;
text-align:center;
... ... @@ -461,34 +475,34 @@
margin: 0 0 10px 0;
}
.follow-us{
width:345px;
height:175px;
width:216px;
height:135px;
.title{
@include blockwh(100%,70px);
line-height:90px;
@include blockwh(100%,44px);
line-height:54px;
text-align:center;
font-size:20px;
font-size:18px;
}
.icons-content{
list-style:none;
padding:0;
margin:0 auto;
width:300px;
height:50px;
width:181px;
height:22px;
li{
width:50px;
height:50px;
width:30px;
height:40px;
line-height:50px;
float:left;
margin: 0 5px;
margin: 0 3px;
}
.icons{
cursor:pointer;
@include blockwh(100%,100%);
background:url(../assets/images/followus.png);
}
.show{background-position:0 0}
.show{background-position:-110px -10px}
.li-weixin{position:relative;
.pop{
@include blockwh(150px,150px);
... ... @@ -508,24 +522,24 @@
}
}
.weixin{
background-position:0 -100px;
background-position:-110px -110px;
}
.li-weixin:hover{
.pop{display:block;}
}
.sina{background-position:0 -50px}
.facebook{background-position:0 -154px}
.inst{background-position:0 -200px}
.rss{background-position:0 -250px}
.sina{background-position:-110px -60px}
.facebook{background-position:-110px -164px}
.inst{background-position:-110px -210px}
.rss{background-position:-110px -260px}
}
.follow-us-input-content{
width:300px;
width:181px;
height:26px;
margin:0 auto;
input
{
width:182px;
width:120px;
padding-left:5px;
height:26px;
line-height:26px;
... ... @@ -533,7 +547,7 @@
outline:none;
}
.button{
@include blockwh(106px,30px);
@include blockwh(54px,30px);
color:#fff;
@include fontstyle;
font-size:17px;
... ... @@ -581,11 +595,11 @@
.a-img:hover .pic{-webkit-transform: scale(1.1);transform:scale(1.1);-o-transform:scale(1.1);-moz-transform:scale(1.1);}
}
.content-item{
width:342px;
height:464px;
width:212px;
height:277px;
padding-bottom:30px;
margin-top:27px;
overflow:hidden;
border-bottom:1px solid #000;
float:left;
... ... @@ -598,93 +612,6 @@
line-height:25px;
margin: 0 0 10px 0;
}
.follow-us{
width:345px;
height:175px;
background:url(../assets/images/followusbackground.png) left top;
background-size:394px 522px;
.title{
@include blockwh(100%,70px);
line-height:90px;
text-align:center;
font-size:20px;
}
.icons-content{
list-style:none;
padding:0;
margin:0 auto;
width:300px;
height:50px;
li{
width:50px;
height:50px;
line-height:50px;
float:left;
margin: 0 5px;
}
.icons{
cursor:pointer;
@include blockwh(100%,100%);
background:url(../assets/images/followus.png);
}
.show{background-position:0 0}
.li-weixin{position:relative;
.pop{
@include blockwh(150px,150px);
cursor:pointer;
position:absolute;
top:37px;
left:-45px;
z-index:10;
display:none;
background:url(../assets/images/weixinbackground.png)left top;
.bitmap{
@include blockwh(97px,97px);
margin: 25px auto 0 auto;
cursor:pointer;
}
}
}
.weixin{background-position:0 -100px;
}
.li-weixin:hover{
.pop{display:block;}
}
.sina{background-position:0 -50px}
.facebook{background-position:0 -150px}
.inst{background-position:0 -200px}
.rss{background-position:0 -250px}
}
.follow-us-input-content{
width:300px;
height:26px;
margin:0 auto;
input
{
width:182px;
padding-left:5px;
height:26px;
line-height:30px;
float:left;
outline:none;
}
.button{
@include blockwh(106px,30px);
color:#fff;
@include fontstyle;
font-size:18px;
text-align:center;
float:left;
cursor:pointer;
border:0;
}
}
}
.a-img{
display:block;
width:342px;
... ... @@ -746,39 +673,49 @@
width:107px;
&:hover {
background:url(../assets/images/magazine_icon.png) right -263px no-repeat;
.hover-text{
background:url(../assets/images/magazine_icon.png) right -263px no-repeat;
}
}
}
.menu-link-fashion {width:80px;
.menu-link-fashion {
width:80px;
&:hover{
background-position:13px bottom;
background-position:29px bottom;
}
}
.menu-link-sports {
width:80px;
margin-left:9px;
&:hover{
background-position:13px bottom;
background-position:30px bottom;
}
}
.menu-link-lifestyle {
width:80px;
margin-left:-3px;
&:hover{
background-position:14px bottom;
background-position:30px bottom;
}
}
.menu-link-beauty {
width:80px;
margin-left:8px;
&:hover{
background-position:14px bottom;
background-position:30px bottom;
}
}
.menu-link-video {width:80px;margin-left:14px;
.menu-link-video {
width:80px;
margin-right:14px;
margin-left:-5px;
&:hover{
background-position:8px bottom;
background-position: 30px bottom;
}
}
... ... @@ -824,7 +761,7 @@
}
.item-title {
display: block;
line-height: 15px;
line-height: 20px;
font-size: 15px;
color: #000;
}
... ... @@ -903,7 +840,7 @@
@include blockwh(100%,100%);
background:url(../assets/images/followus.png);
}
.show{background-position:0 -14px}
.show{background-position:-100px -14px}
.li-weixin{position:relative;
.pop{
@include blockwh(150px,150px);
... ... @@ -1210,35 +1147,35 @@
.submenu-fashion {
left:-1px;
left:0px;
}
.submenu-sports {
left:-288px;
left:--213px;
}
.submenu-lifestyle {
left:-419px;
left:--286px;
}
.submenu-video {
left:-568px;
left:-369px;
}
.submenu-beauty {
left:-147px;
}
left:-124px;
}
.content-item-detail-a-img{
display:block;
width:342px;
height:218px;
width:212px;
height:135px;
margin-bottom:15px;
position:relative;
.pic{
width:342px;
height:218px;
width:212px;
height:135px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
... ... @@ -1265,7 +1202,7 @@
.content-item-detail-title-style {
display: block;
width: 342px;
width: 212px;
font-size: 20px;
cursor: pointer;
line-height: 30px;
... ... @@ -1279,7 +1216,7 @@
line-height: 30px;
text-align: center;
font-weight: bold;
width: 342px;
width: 212px;
}
.content-item-detail-subchannle {
text-align: center;
... ... @@ -1295,12 +1232,12 @@
}
.content-item-mid {
margin-left:27px;
margin-right:27px;
margin-left:16px;
margin-right:16px;
}
.content-item-detail-detail {
display: block;
width: 342px;
width: 212px;
font-size: 14px;
color: #000;
line-height: 24px;
... ... @@ -1312,7 +1249,7 @@
.content-fashion {
.follow-us {
background-position:-400px 0;
background-position:-400px -381px;
input {
border:1px solid #9693ff;
... ... @@ -1336,7 +1273,7 @@
}
.content-sports {
.follow-us {
background-position:-1200px 0;
background-position:-1200px -380px;
input {
border:1px solid #84e3ca;
... ... @@ -1348,7 +1285,7 @@
}
.content-beauty {
.follow-us {
background-position:-800px 0;
background-position:-800px -380px;
input {
border:1px solid #ffcaca;
... ... @@ -1360,7 +1297,7 @@
}
.content-lifestyle {
.follow-us {
background-position:-1600px 0;
background-position:-1600px -380px;
input {
border:1px solid #ffca79;
... ... @@ -1372,7 +1309,7 @@
}
.content-video {
.follow-us {
background-position:-2000px 0;
background-position:-2000px -381px;
input {
border:1px solid #c5c5c5;
... ...
/*屏幕宽度小于1190,自动适配1024设计分辨率*/
#minEnterprise{
height:55px;
.minEnterprise{
height:134px;
.logo{
width:163px;
height:70px;
margin: 8px auto 8px auto;
background:url(../assets/images/little_logo.png) no-repeat;
a{
@include blockwh(100%,100%);
}
}
}
.enterprise{
width:100%;
height:152px;
.logo{
width:190px;
height:81px;
margin: 31px auto 0 auto;
background:url(../assets/images/logo.png) no-repeat;
margin-bottom:27px;
a{
@include blockwh(100%,100%);
}
}
}
.enterprise,.minEnterprise{
width:100%;
margin:0 auto 6px;
background:#fff;
.icons{background:url(../assets/images/phone.png) center no-repeat;}
.logo{
width:190px;
height:81px;
margin: 31px auto 0 auto;
background:url(../assets/images/logo.png) no-repeat;
margin-bottom:27px;
a{
@include blockwh(100%,100%);
}
}
.black_logo {
background-position: left bottom;
... ... @@ -186,7 +202,7 @@
padding:0 3px;
color:#000;
letter-spacing: 4px;
width:90px;
width:117px;
display:none;
}
... ... @@ -236,7 +252,12 @@
}
}
.enterprise-header-fixed {
position: fixed;
display: none;
top:0;
z-index:9999;
}
.scrollPic-content{
width:924px;
height:537px;
... ... @@ -406,8 +427,8 @@
}
.advert-without-border{
width:342px;
height:495px;
width:294px;
height:425px;
float:right;
padding-bottom:0;
margin-top:27px;
... ... @@ -444,8 +465,8 @@
}
}
.content-item-without-border{
width:342px;
height:495px;
width:294px;
height:427px;
margin-top:27px;
float:left;
position:relative;
... ... @@ -457,8 +478,8 @@
margin: 0 0 10px 0;
}
.follow-us{
width:345px;
height:175px;
width:295px;
height:179px;
.title{
@include blockwh(100%,70px);
... ... @@ -470,14 +491,13 @@
list-style:none;
padding:0;
margin:0 auto;
width:300px;
width:250px;
height:50px;
li{
width:50px;
height:50px;
line-height:50px;
float:left;
margin: 0 5px;
}
.icons{
cursor:pointer;
... ... @@ -516,12 +536,12 @@
}
.follow-us-input-content{
width:300px;
width:241px;
height:26px;
margin:0 auto;
input
{
width:182px;
width:157px;
padding-left:5px;
height:26px;
line-height:26px;
... ... @@ -529,7 +549,7 @@
outline:none;
}
.button{
@include blockwh(106px,30px);
@include blockwh(75px,30px);
color:#fff;
@include fontstyle;
font-size:17px;
... ... @@ -577,8 +597,8 @@
.a-img:hover .pic{-webkit-transform: scale(1.1);transform:scale(1.1);-o-transform:scale(1.1);-moz-transform:scale(1.1);}
}
.content-item{
width:342px;
height:464px;
width:294px;
height:394px;
padding-bottom:30px;
margin-top:27px;
... ... @@ -594,93 +614,7 @@
line-height:25px;
margin: 0 0 10px 0;
}
.follow-us{
width:345px;
height:175px;
background:url(../assets/images/followusbackground.png) left top;
background-size:394px 522px;
.title{
@include blockwh(100%,70px);
line-height:90px;
text-align:center;
font-size:20px;
}
.icons-content{
list-style:none;
padding:0;
margin:0 auto;
width:300px;
height:50px;
li{
width:50px;
height:50px;
line-height:50px;
float:left;
margin: 0 5px;
}
.icons{
cursor:pointer;
@include blockwh(100%,100%);
background:url(../assets/images/followus.png);
}
.show{background-position:0 0}
.li-weixin{position:relative;
.pop{
@include blockwh(150px,150px);
cursor:pointer;
position:absolute;
top:37px;
left:-45px;
z-index:10;
display:none;
background:url(../assets/images/weixinbackground.png)left top;
.bitmap{
@include blockwh(97px,97px);
margin: 25px auto 0 auto;
cursor:pointer;
}
}
}
.weixin{background-position:0 -100px;
}
.li-weixin:hover{
.pop{display:block;}
}
.sina{background-position:0 -50px}
.facebook{background-position:0 -150px}
.inst{background-position:0 -200px}
.rss{background-position:0 -250px}
}
.follow-us-input-content{
width:300px;
height:26px;
margin:0 auto;
input
{
width:182px;
padding-left:5px;
height:26px;
line-height:30px;
float:left;
outline:none;
}
.button{
@include blockwh(106px,30px);
color:#fff;
@include fontstyle;
font-size:18px;
text-align:center;
float:left;
cursor:pointer;
border:0;
}
}
}
.a-img{
display:block;
width:342px;
... ... @@ -730,19 +664,34 @@
&:hover {
color:#fff;
background:url(../assets/images/menu_hover.png) center bottom no-repeat;
.text{color:#fff;display:none;}
.hover-text{color:#fff;display:block;}
}
.menu{@include blockwh(100%,100%);position:absolute;top:0;left:0;z-index:10;}
.text{
text-align:center;
@include blockwh(100%,100%);position:absolute;top:0;left:0;z-index:9;
color:#000;
}
.hover-text{
text-align:center;
@include blockwh(100%,100%);position:absolute;top:0;left:0;z-index:9;
color:#000;
display:none;
}
}
.menu-link-magazine {
background:url(../assets/images/magazine_icon.png) right -100px no-repeat;
padding-right:18px;
width:132px;
&:hover {
background:url(../assets/images/magazine_icon.png) right -150px no-repeat;
}
}
.menu-link-fashion {width:100px;}
.menu-link-sports {
... ... @@ -816,7 +765,7 @@
}
.item-title {
display: block;
height: 22px;
overflow:hidden;
line-height: 22px;
font-size: 20px;
color: #000;
... ... @@ -862,9 +811,9 @@
.follow-us-default{
width:294px;
width:295px;
height:176px;
background:url(../assets/images/followusbackground.png) 0 -175px;
background:url(../assets/images/followusbackground.png) 0 -190px;
margin-top:32px;
.title{
@include blockwh(100%,70px);
... ... @@ -1205,35 +1154,35 @@
.submenu-fashion {
left:-1px;
left:0px;
}
.submenu-sports {
left:-288px;
left:-245px;
}
.submenu-lifestyle {
left:-419px;
left:-355px;
}
.submenu-video {
left:-568px;
left:-469px;
}
.submenu-beauty {
left:-147px;
left:-124px;
}
.content-item-detail-a-img{
display:block;
width:342px;
height:218px;
width:294px;
height:187px;
margin-bottom:15px;
position:relative;
.pic{
width:342px;
height:218px;
width:294px;
height:187px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
... ... @@ -1260,7 +1209,7 @@
.content-item-detail-title-style {
display: block;
width: 342px;
width: 294px;
font-size: 20px;
cursor: pointer;
line-height: 30px;
... ... @@ -1274,7 +1223,7 @@
line-height: 30px;
text-align: center;
font-weight: bold;
width: 342px;
width: 294px;
}
.content-item-detail-subchannle {
text-align: center;
... ... @@ -1290,12 +1239,13 @@
}
.content-item-mid {
margin-left:27px;
margin-right:27px;
margin-left:21px;
margin-right:21px;
}
.content-item-detail-detail {
display: block;
width: 342px;
width: 294px;
height:120px;
font-size: 14px;
color: #000;
line-height: 24px;
... ... @@ -1303,11 +1253,13 @@
overflow: hidden;
}
.follow-us{
background:url(../assets/images/followusbackground.png);
}
.content-fashion {
.follow-us {
background-position:-400px 0;
background-position:-400px -188px;
input {
border:1px solid #9693ff;
... ... @@ -1331,7 +1283,7 @@
}
.content-sports {
.follow-us {
background-position:-1200px 0;
background-position:-1202px -190px;
input {
border:1px solid #84e3ca;
... ... @@ -1343,7 +1295,7 @@
}
.content-beauty {
.follow-us {
background-position:-800px 0;
background-position:-800px -190px;
input {
border:1px solid #ffcaca;
... ... @@ -1355,7 +1307,7 @@
}
.content-lifestyle {
.follow-us {
background-position:-1600px 0;
background-position:-1600px -190px;
input {
border:1px solid #ffca79;
... ... @@ -1367,7 +1319,7 @@
}
.content-video {
.follow-us {
background-position:-2000px 0;
background-position:-2000px -190px;
input {
border:1px solid #c5c5c5;
... ...