ued / yohogirls-frontend · Commits

Go to a project

Authored by 2586703@qq.com
Commit d41e381c407cac3a0fdaf080bf58b4acec07600f 1 parent c113cdd6

detail 图片及样式修改 img改为背景

Inline Side-by-side
Showing 36 changed files with 238 additions and 153 deletions

648 Bytes | W: | H:

9.67 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -3,17 +3,17 @@
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "./dist/css"
css_dir = "dist/yohogirls-frontend-web/0.0.1"
sass_dir = "sass/scss"
images_dir = "./assets/images"
javascripts_dir = "./js"
images_dir = "assets/images"
javascripts_dir = "../js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
... ...
... ... @@ -130,36 +130,6 @@ require("./login");
});
},
//创建评论文本域
/*_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\
<div class="userimg">\n\
<img src="'+YohoConfig.resUrl+'boysweb/assets/images/detail/user-img.png" alt="">\n\
<i></i>\n\
</div>\n\
<div class="userinfo">\n\
<span></span>\n\
<a class="exit-btn" href="javascript:;">退出</a>\n\
</div>\n\
<div class="publish">\n\
<a class="publish-btn" href="javascript:;">Publish</a>\n\
</div>\n\
</div>');
textarea.appendTo(this.$element);
loginarea.appendTo(textarea);
if(this.options.isFeedback){
var anonymous = $('<div class="anonymous">YohoBoy</div>');
$(".login-status .userimg").after(anonymous);
}
if(!data){
$(".login-status .userinfo").hide();
}
},*/
//创建第三方登录
_creatThirdLogin: function() {
var thirdLoginTpl = $("#third-login-tpl").html();
... ...
... ... @@ -3,9 +3,9 @@
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../dist/css"
sass_dir = "scss"
images_dir = "../assets/images"
css_dir = "aaa"
sass_dir = "sass/scss"
images_dir = "assets/images"
javascripts_dir = "../js"
# You can select your preferred output style here (can be overridden via the command line):
... ... @@ -13,7 +13,7 @@ javascripts_dir = "../js"
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
... ...
@charset "utf-8";
/**
* 引用自定义字体
* @param string $name 字体名称
... ... @@ -12,6 +13,7 @@
-webkit-text-stroke-width: 0;
-moz-font-smoothing: grayscale;
}
/**
* 自定义字体
* @param string $name 字体名称
... ... @@ -21,12 +23,24 @@
@mixin font-face($name, $path) {
@font-face {
font-family: $name;
src: url('#{$path}#{$name}.eot');
src: url('#{$path}#{$name}.eot?#iefix') format('embedded-opentype'), url('#{$path}#{$name}.woff') format('woff'), url('#{$path}#{$name}.ttf') format('truetype'), url('#{$path}#{$name}.svg#') format('svg');
src: url("#{$path}#{$name}.eot");
src: url("#{$path}#{$name}.eot?#iefix") format("embedded-opentype"), url("#{$path}#{$name}.woff") format("woff"), url("#{$path}#{$name}.ttf") format("truetype"), url("#{$path}#{$name}.svg#") format("svg");
font-weight: normal;
font-style: normal;
}
.#{$name} {
@include font-family($name);
}
}
@mixin retina-sprite($map, $sprite, $scale) {
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
$offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);
background: sprite-url($map) 0 $offsetY no-repeat;
$zoomX: ceil(image_width(sprite-path($map)) / $scale);
$zoomY: auto;
@include background-size($zoomX $zoomY);
display: block;
}
\ No newline at end of file
... ...
@charset "utf-8";
@import "_variables","_mixins","_iconfont","_common","media/whatever_home","media/_whatever_editor","media/_whatever_map","media/_whatever_search","media/_whatever_tag";
@import "media/_1620_home","media/_1620_search","media/_1620_tag","media/_1620_editor","media/_1620_map","media/_1620_search","media/_768_home","media/_768_editor","media/_768_map","media/_768_search","media/_768_tag";
@import "media/_whatever_detail","media/_whatever_magazine","media/_whatever_about","media/_whatever_other","media/_1620_detail","media/_768_detail","media/_1620_magazine","media/_768_magazine","media/_1620_about.scss","media/_768_about";
@import "plugin/idangerous.swiper";
@import "plugin/emoji","plugin/flip","plugin/photoslider";
@import "compass";
@import "_variables";
@import "_mixins";
@import "_iconfont";
@import "_common";
@import "media/whatever_home";
@import "media/_whatever_editor";
@import "media/_whatever_map";
@import "media/_whatever_search";
@import "media/_whatever_tag";
@import "media/_1620_home";
@import "media/_1620_search";
@import "media/_1620_tag";
@import "media/_1620_editor";
@import "media/_1620_map";
@import "media/_1620_search";
@import "media/_768_home";
@import "media/_768_editor";
@import "media/_768_map";
@import "media/_768_search";
@import "media/_768_tag";
@import "media/_whatever_detail";
@import "media/_whatever_magazine";
@import "media/_whatever_about";
@import "media/_whatever_other";
@import "media/_1620_detail";
@import "media/_768_detail";
@import "media/_1620_magazine";
@import "media/_768_magazine";
@import "media/_1620_about.scss";
@import "media/_768_about";
@import "plugin/idangerous.swiper";
@import "plugin/emoji";
@import "plugin/flip";
@import "plugin/photoslider";
\ No newline at end of file
... ...
... ... @@ -352,7 +352,7 @@
}
}
}
$shareicons: sprite-map('share/*.png', $spacing:5px);
/*分享*/
.share{
top: 318px;
... ... @@ -365,11 +365,24 @@
margin-bottom: 4px;
}
li{
img{
width: 32px;
height: 32px;
display: block;
}
width: 32px;
height: 32px;
}
li.yohoo-share-button-sina {
@include retina-sprite ($shareicons, share-sina-btn, 28/32);
}
li.yohoo-share-button-fb {
@include retina-sprite ($shareicons, share-fb-btn, 28/32);
}
li.yohoo-share-button-wx {
@include retina-sprite ($shareicons, share-wx-btn, 28/32);
}
li.yohoo-share-button-qq {
@include retina-sprite ($shareicons, share-qq-btn, 28/32);
}
li.yohoo-share-button-tt {
@include retina-sprite ($shareicons, share-tt-btn, 28/32);
}
}
... ... @@ -432,7 +445,7 @@
padding: 26px 29px 27px 30px;
width: 230px;
height: 99px;
background: url("../assets/images/detail/focus-us-bg.png");
background: image-url("detail/focus-us-bg.png");
h4{
line-height: 22px;
font-size: 20px;
... ... @@ -443,25 +456,12 @@
margin: 19px auto 0;
li{
float: left;
margin: 0 13px 0 13px;
margin: 0 13px 0 9px;
height: 22px;
a{
display: block;
height: 22px;
line-height: 22px;
}
img{
display: inline;
vertical-align: middle;
}
width: 24px;
}
.focus-wx{
.pop{
img{
width: 114px;
margin: 11px 0 0 0;
}
}
height: 19px;
}
}
.textbox{
... ...
... ... @@ -202,21 +202,17 @@
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 {
strong {
margin-left: 8px;
width: 18px;
height: 17px;
background-size: 100% 100%;
}
span {
position: absolute;
top: 9px;
right: 10px;
background: image-url("detail/comments-icon2.png") no-repeat center center;
}
}
li.current {
... ... @@ -445,16 +441,6 @@
color: #000;
margin-bottom: 4px;
}
li {
width: 30px;
height: 30px;
margin-bottom: 10px;
img {
display: block;
width: 100%;
height: 100%;
}
}
}
/*detail侧边栏*/
... ... @@ -521,6 +507,9 @@
}
}
}
$icons: sprite-map('detail-icon/*.png', $spacing:5px);
/*focus-us*/
.focus-us {
margin: 19px 0 0 0;
padding: 12px 15px 17px;
... ... @@ -537,16 +526,29 @@
margin: 7px auto 0;
li {
float: left;
width: 15px;
height: 15px;
margin: 0 0px 0 16px;
img {
display: block;
height: 100%;
margin: 0 auto;
width: 17px;
height: 18px;
margin: 0 0px 0 14px;
a{
height: 18px;
}
}
li.show{
@include retina-sprite ($icons,show-icon,22/15);
}
li.weibo{
@include retina-sprite ($icons,sina-icon,22/15);
}
li.fb{
@include retina-sprite ($icons,fb-icon,22/15);
}
li.instagram{
@include retina-sprite ($icons,ins-icon,22/15);
}
li.focus-wx {
@include retina-sprite ($icons,wx-icon,22/15);
position: relative;
.pop {
display: none;
... ... @@ -559,12 +561,11 @@
line-height: 76px;
vertical-align: middle;
background-size: 310%;
img {
display: inline;
vertical-align: middle;
em {
margin:8px auto 0;
width: 65px;
height: 65px;
margin: 7px 0 0 0;
background-size: 100% 100%;
}
}
}
... ...
... ... @@ -238,7 +238,7 @@
border-left: none;
}
}
$statusicon: sprite-map('status/*.png', $spacing:5px);
/*统计栏*/
.stats-btn{
margin: 33px 0 0 0;
... ... @@ -246,12 +246,9 @@
float: right;
}
li{
position: relative;
float: left;
width: 52px;
img{
display: block;
margin: 2px 0 0 2px;
}
strong{
float: left;
width: 27px;
... ... @@ -259,39 +256,50 @@
}
span{
float: left;
margin: 0 0 0 -2px;
margin: 0;
font-size: 10px;
color: #000;
line-height: 40px;
width: 20px;
height: 24px;
font-weight: bold;
i{
display: none;
margin: 0 0 0 2px;
}
img{
width: 20px;
}
}
}
li.wow strong{
background: url("../assets/images/detail/wow-icon.png") no-repeat center center;
background-size: 100% 100%;
li.wow {
strong {
background: url("../assets/images/detail/wow-icon.png") no-repeat center center;
background-size: 100% 100%;
}
span {
background: sprite($statusicon, wow-icon);
}
}
li.wow.current strong{
background: url("../assets/images/detail/wow-icon-curr.png") no-repeat center center;
background-size: 100% 100%;
}
li.zzz strong{
background: url("../assets/images/detail/zzz-icon.png") no-repeat center center;
background-size: 100% 100%;
li.zzz {
strong {
background: url("../assets/images/detail/zzz-icon.png") no-repeat center center;
background-size: 100% 100%;
}
span {
background: sprite($statusicon, zzz-icon);
}
}
li.zzz.current strong{
background: url("../assets/images/detail/zzz-icon-curr.png") no-repeat center center;
background-size: 100% 100%;
}
li.wtf strong{
background: url("../assets/images/detail/wtf-icon.png") no-repeat center center;
background-size: 100% 100%;
li.wtf {
strong {
background: url("../assets/images/detail/wtf-icon.png") no-repeat center center;
background-size: 100% 100%;
}
span {
background: sprite($statusicon, wtf-icon);
}
}
li.wtf.current strong{
background: url("../assets/images/detail/wtf-icon-curr.png") no-repeat center center;
... ... @@ -301,19 +309,14 @@
margin: 0 0 0 8px;
padding: 0 0 0 6px;
border-left: 1px solid #000;
img,span{
float: right;
}
span{
position: relative;
z-index: 2;
margin: 15px 0 0 0;
line-height: 10px;
strong {
background: image-url("detail/comments-icon.png") no-repeat center center;
}
.comment-num{
img{
width: 16px;
}
span {
position: absolute;
top: 9px;
right: 10px;
background: image-url("detail/comments-icon2.png") no-repeat center center;
}
}
}
... ... @@ -651,6 +654,7 @@
}
}
$shareicons: sprite-map('share/*.png', $spacing:5px);
/*分享*/
.share{
position: absolute;
... ... @@ -666,12 +670,25 @@
}
li{
position: relative;
width: 28px;
height: 28px;
margin-bottom: 10px;
img{
width: 28px;
height: 28px;
display: block;
}
background-repeat: no-repeat;
}
li.yohoo-share-button-sina {
background: sprite($shareicons, share-sina-btn);
}
li.yohoo-share-button-fb {
background: sprite($shareicons, share-fb-btn);
}
li.yohoo-share-button-wx {
background: sprite($shareicons, share-wx-btn);
}
li.yohoo-share-button-qq {
background: sprite($shareicons, share-qq-btn);
}
li.yohoo-share-button-tt {
background: sprite($shareicons, share-tt-btn);
}
.wx-qrcode-dialog{
position: absolute;
... ... @@ -699,14 +716,11 @@
}
.wx-popup-bd{
margin: 8px 0 0 0;
margin: 8px auto 0;
min-height:150px;
_height:150px;
img{
width: 140px;
height: 140px;
margin: 0 auto;
}
width: 140px;
background: image-url("detail/qrcode.png") no-repeat center center;
}
.wx-popup-ft{
line-height:22px;
... ... @@ -764,28 +778,51 @@
}
}
}
$icons: sprite-map('detail-icon/*.png', $spacing:5px);
/*focus-us*/
.focus-us{
margin: 28px 0 0 0;
padding: 20px 26px 23px 25px;
width: 195px;
height: 86px;
background-image: url("../assets/images/detail/focus-us-bg-1024.png");
background-image: image-url("detail/focus-us-bg-1024.png");
h4{
line-height: 20px;
font-size: 18px;
color: #000;
text-align: center;
}
.focuslist{
.focuslist{
margin: 19px auto 0;
li{
width: 24px;
height: 22px;
float: left;
margin: 0 9px 0 10px;
img{
margin: 0 9px 0 6px;
background-repeat: no-repeat;
a {
display: block;
}
height: 22px;
line-height: 22px;
}
}
li.show{
background: sprite($icons, show-icon);
}
li.weibo{
background: sprite($icons, sina-icon);
}
li.fb{
background: sprite($icons, fb-icon);
}
li.instagram{
background: sprite($icons, ins-icon);
}
li.focus-wx{
height: 19px;
background: sprite($icons, wx-icon);
position: relative;
.pop{
display: none;
... ... @@ -798,9 +835,12 @@
line-height: 129px;
background-image: url("./assets/images/weixinbackground.png");
text-align: center;
img{
em{
display: block;
height: 114px;
width: 114px;
margin: 11px auto 0;
background:image-url("detail/boys-qr.png");
}
}
}
... ...