fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit efcbed6e6a9394f84f275f98bd54e14c2c554bc0 2 parents 9e197b22 68c45d0d

Merge branch 'hotfix/delScss'

Inline Side-by-side
Showing 16 changed files with 0 additions and 4881 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 16 of 16+ files are displayed.

.guang-detail-page {
width: 1150px;
margin: 0 auto 95px;
b {
font-weight: bold;
}
i {
font-style: italic;
}
.block {
margin: 15px 0;
}
.excellent-recommendation-title {
margin-top: 4px;
}
.block-header {
position: relative;
border-bottom: 1px solid #c1c1c1;
font-size: 18px;
height: 38px;
line-height: 38px;
text-align: center;
margin-bottom: 24px;
color: #333;
.more-reco {
position: absolute;
right: 0;
color: #000;
font-size: 14px;
text-decoration: none;
}
}
// 830+22:兼容IE8不认识:nth-child导致brand换行的问题
.related-brand .brands {
width:852px;
}
.related-reco .recos {
width: 850px;
}
.detail-title {
font-size: 28px;
line-height: 64px;
border-bottom: 1px dotted #c1c1c1;
word-wrap:break-word;
}
.article-author {
float: left;
line-height: 64px;
.author-avatar {
clear: both;
width: 38px;
height: 64px;
img {
width: 38px;
height: 38px;
border-radius: 50%;
vertical-align: middle;
}
}
}
.author-info {
float: left;
margin-left: 10px;
font-size: 14px;
max-width: 447px;
.author-name {
display: block;
height: 64px;
line-height: 64px;
cursor: pointer;
color: #000;
&:hover {
color: #cc3300;
}
}
.author-introduce {
color: #999;
}
}
.article-status {
float: right;
height: 64px;
line-height: 64px;
color: #999;
font-size: 13px;
.article-click {
margin: 0 25px;
}
.article-comment {
color: #cc3300;
cursor: pointer;
}
}
.article-main {
img {
display: block;
max-width: 100%;
margin:0 auto;
}
.article-text {
margin: 2px 0 20px;
line-height: 28px;
font-size: 14px;
}
.article-small-pic {
text-align: center;
font-size: 0;
img {
display: inline-block;
*display: inline;
*zoom: 1;
max-width: 412px;
&:first-child {
margin: 0 6px 0 0;
}
}
}
.block:first-child {
margin-top: 10px;
}
}
/*user handle*/
.user-handle {
margin: 30px 0 0 0;
text-align: center;
ul {
display: inline-block;
li {
float: left;
margin: 0 15px;
cursor: pointer;
a {
position: relative;
display: block;
padding: 0 10px;
height: 36px;
line-height: 36px;
color: #535353;
font-size: 0;
background: #efefef;
text-align: left;
i, span{
@include inline-block;
font-style: normal;
font-size: 14px;
}
i {
margin: 0 5px 0 0;
@include opacity(0.5);
font-size: 18px;
}
.cancel-collect {
display: none;
}
}
}
.like-status.liked i,
.like-status.hover i{
@include opacity(1);
}
.like-statis.hover .like-num {
color: #000;
}
.sort-collect a {
i {
width: 21px;
}
}
.sort-collect.collected a {
i {
@include opacity(1);
}
span {
display: none;
}
.cancel-collect {
display: inline;
}
}
.sort-collect.hover i {
@include opacity(1);
}
.sort-collect.hover span {
color: #000;
}
}
}
.article-bottom-info {
margin: 44px 0 0 0;
padding: 0 0 10px;
border-bottom: 1px dotted #c1c1c1;
}
.article-tag {
float: left;
width: 588px;
.tag-icon {
float: left;
margin: 0 12px 0 0;
font-size: 20px;
font-style: normal;
}
ul {
float: left;
max-width: 555px;
li {
float: left;
margin: 0 10px 10px 0;
a {
display: block;
padding: 0 15px;
height: 20px;
line-height: 20px;
font-size: 12px;
color: #fff;
font-weight: bold;
background: #c1c1c1;
}
&:hover a {
background:#333;
}
}
li:first-child {
margin-left: 0;
}
}
}
.article-share {
float: right;
.share-to {
position: relative;
font-size: 12px;
}
}
.detail-related-posts {
margin: 14px 0 0 0;
li {
float: left;
width: 264px;
margin-left: 19px;
a {
display: block;
}
.bg-img {
display: block;
width: 100%;
height: 173px;
line-height: 173px;
text-align: center;
font-size: 0;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.post-title {
margin: 8px 0 0 0;
h2 {
line-height: 16px;
font-size: 14px;
color: #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.post-title:hover h2 {
color: #cc3300 !important;
}
}
li:first-child {
margin-left: 0;
}
}
.comment-area {
margin: 58px 0 0 0;
.comment-publish {
height: 48px;
}
}
.comment-textarea {
textarea {
display: block;
width: 812px;
height: 86px;
padding: 12px 12px;
resize: none;
outline: none;
font-size: 14px;
line-height: 18px;
color: #535353;
font-family: "arial","helvetica","微软雅黑";
border: 1px solid #e7e7e7;
}
}
.word-count-tip {
display: inline-block;
height: 48px;
line-height: 48px;
font-size: 12px;
color: #c8c8c8;
.exceed-count {
color: #f00;
}
}
.publish-btn {
margin: 10px 0 0 0;
float: right;
width: 90px;
height: 33px;
line-height: 33px;
text-align: center;
color: #fff;
font-size: 14px;
background: #cb3a3e;
cursor: pointer;
&:hover {
background: #c03234;
}
&.disable {
background-color: #e79c9e;
}
}
.comments-wrap{
h4{
position: relative;
line-height: 32px;
border-bottom: 1px solid #e7e7e7;
.comment-num{
margin-right: 5px;
color: #c11e00;
}
i{
position: absolute;
width: 13px;
height: 7px;
left: 30px;
bottom: -7px;
background: image-url('guang/detail/comment-icon.png') no-repeat;
}
}
.comment-pager {
float: right;
margin: 20px 0;
}
}
.comments-empty {
display: none;
color: #ccc;
margin: 20px 0;
font-size: 12px;
line-height: 12px;
text-align: center;
}
.commnets-resultwrapper {
display: none;
}
.comments-list{
li{
margin: 14px 0 0;
padding: 0 0 15px;
border-bottom: 1px dotted #e7e7e7;
.avatar{
float: left;
width: 40px;
height: 40px;
overflow: hidden;
img{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.comment-info{
float: left;
width: 774px;
margin: 0 0 0 16px;
.comment-user-name{
color: #c11e00;
font-size: 15px;
line-height: 15px;
}
.comment-content{
margin-top: 10px;
line-height: 16px;
font-size: 12px;
word-wrap:break-word;
}
.comment-time{
margin: 10px 0 0 0;
color: #c8c8c8;
font-size: 12px;
line-height: 12px;
clear: both;
}
}
}
}
.brand {
margin-right: 22px;
margin-bottom: 20px;
float: left;
.thumb {
display: table-cell;
border: 1px solid #f5f5f5;
height: 120px;
width: 120px;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
img {
display: block;
max-width: 120px;
max-height: 120px;
margin: 0 auto;
}
}
.brand-name {
width: 120px;
font-size: 13px;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
color: #333;
}
}
$commodityWidth: 192px;
.good-info {
width: $commodityWidth;
height: 325px;
margin-right: 20px;
margin-bottom: 20px;
}
.share-to .share-a {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: top;
margin: 0 2px 0 3px;
cursor: pointer;
}
.share-to .share-sina {
background: image-url('guang/detail/icon-share.png') no-repeat 0 0;
}
.share-to .share-weixin {
background: image-url('guang/detail/icon-share.png') no-repeat 0 -96px;
}
.share-to .share-tencent {
background: image-url('guang/detail/icon-share.png') no-repeat 0 -16px;
}
.share-to .share-renren {
background: image-url('guang/detail/icon-share.png') no-repeat 0 -32px;
}
.share-to .share-qzone {
background: image-url('guang/detail/icon-share.png') no-repeat 0 -48px;
}
.share-to .share-qq {
background: image-url('guang/detail/icon-share.png') no-repeat 0 -64px;
}
.share-to .share-douban {
background: image-url('guang/detail/icon-share.png') no-repeat 0 -80px;
}
/* weixin share start */
.shareWeixin{width:282px;height:302px;position:absolute;padding-top:9px;text-align: center;font-family: Microsoft Yahei, Arial, Verdana;top: 22px;right: -3px;display:none;z-index:2;}
.shareWeixin em, .shareWeixin em i{width: 0;height: 0;font-size: 0;position: absolute;border-width:0 10px 9px;border-style:dashed dashed solid;}
.shareWeixin em{border-color:transparent transparent #d6d6d6;top: 0px;left: 50%;margin-left: -10px;}
.shareWeixin em i{border-color:transparent transparent #e8e8e8;overflow:hidden;top: 1px;left: -10px;}
.shareWeixin .con{width:280px;height:300px;overflow:hidden;background-color: #FFFFFF;border:1px solid #d6d6d6;box-shadow: 0px 2px 4px #d1d1d1;position:relative;}
.shareWeixin h2{height:46px;line-height: 46px;background-color: #e8e8e8;color:#000000;font-size: 18px;display: block;}
.shareWeixin p.pic, .shareWeixin p.pic img{width:168px;height:168px;}
.shareWeixin p.pic{overflow:hidden;margin:16px auto;}
.shareWeixin p.w{font-size: 13px;color:#9f9f9f;line-height: 20px;}
.shareWeixin a.close{width:45px;height:45px;line-height:45px;overflow:hidden;position: absolute;top: 9px;right: 0;font-size: 16px;color: #999999;}
/* weixin share end */
}
.guang-index-page {
.msg-nav {
border-bottom: 1px solid #000;
margin-top: 24px;
height: 30px;
li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
padding: 0 28px;
a {
display: block;
height: 100%;
width: 100%;
color: #333;
}
&.actived {
background-color: #111;
a {
color: #fff;
}
}
}
}
.msg-pager {
float: right;
margin: 20px 0;
}
}
\ No newline at end of file
.guang-page {
width: 1150px;
margin: 0 auto;
.left-side {
float: left;
width: 830px;
}
.right-side {
float: left;
width: 290px;
margin-left: 30px;
}
img.blink,
.bg-img.blink {
opacity: 0.8;
filter: alpha(opacity=80);
}
/*精彩推荐*/
.ex-reco-title {
color: #333;
line-height: 24px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
font-size: 20px;
font-weight: bold;
}
.ex-reco-list {
margin-top: 14px;
}
.ex-reco-item {
box-sizing: border-box;
height: 60px;
margin-bottom: 14px;
&:last-child {
margin-bottom: 0;
}
}
.ex-reco-img {
display: block;
float: left;
width: 90px;
height: 60px;
span {
display: block;
height: 100%;
width: 100%;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
background-position: center;
img {
width: 100%;
height: 100%;
}
}
margin-right: 5px;
}
.ex-reco-context {
float: left;
max-width: 195px;
height: 40px;
line-height: 20px;
font-size: 13px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: #cc3300;
}
}
/*热门标签*/
.hot {
margin-top: 40px;
.hot-title {
color: #333;
line-height: 24px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 20px;
}
.hot-tag-list {
margin-top: 14px;
max-height: 150px;
overflow: hidden;
}
.hot-tag {
display: inline-block;
float: left;
padding: 5px;
font-size: 12px;
background-color: #ccc;
border: none;
margin-right: 10px;
margin-bottom: 10px;
color: white;
font-weight: bold;
&:hover {
background-color: #333;
}
}
}
/*广告位*/
.ads {
margin-top: 30px;
.ad {
display: block;
box-sizing: border-box;
margin-bottom: 24px;
width: 290px;
img {
display: block;
width: 100%;
}
}
}
/*资讯*/
.msg-content {
padding: 24px 0;
border-bottom: 1px solid #ccc;
position: relative;
.content {
height: 80px;
line-height: 24px;
}
.iconfont {
color: #ccc;
}
.msg-img {
position: relative;
float: left;
margin-right: 26px;
img {
display: block;
width: 360px;
height: 240px;
}
img.square {
height: 360px;
}
}
.classification {
position: absolute;
background-color: #000;
color: #fff;
text-align: center;
width: 80px;
height: 32px;
line-height: 32px;
font-size: 13px;
opacity: 0.9;
filter: Alpha(opacity=90);
z-index: 99;
}
.reco {
position: absolute;
top: 0;
left: 66px;
height: 32px;
width: 32px;
background: image-url("guang/msg-reco.png");
background-size: 100% 100%;
z-index: 100;
}
.msg-info {
float: left;
width: 440px;
}
.msg-title {
display: block;
font-size: 22px;
color: #333;
line-height: 30px;
max-height: 64px;
&:hover {
color: #CC3300;
}
}
.content {
font-size: 14px;
color: #666;
}
.msg-app {
line-height: 34px;
color: #999;
font-size: 13px;
}
.author {
display: block;
float: left;
color: #333;
margin-right: 22px;
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: #CC3300;
}
}
.publish-time, .page-view {
color: #999;
}
.tags, .like-comment {
position: absolute;
bottom: 24px;
font-size: 12px;
&.tags {
left: 386px;
max-width: 350px;
height: 20px;
overflow: hidden;
}
&.like-comment {
right: 0;
color: #999;
}
.like {
margin-right: 10px;
&:hover * {
color: #000;
}
}
.like-icon {
cursor: pointer;
}
}
.msg-tag {
display: inline-block;
text-align: center;
height: 20px;
line-height: 20px;
padding: 0 10px;
margin-right: 10px;
background-color: #ccc;
color: #fff;
&:last-child {
margin-right: 0;
}
&:hover {
background-color: #333;
}
}
}
.pager {
font-size: 12px;
a {
height: 24px;
padding: 0 9px;
line-height: 24px;
display: inline-block;
text-align: center;
margin-right: 8px;
color: #222;
&.cur {
background-color: #222;
color: #fff;
}
}
}
}
@import "home", "detail", "list";
.guang-editor-page,
.guang-list-page {
.tag-header {
height: 45px;
line-height: 45px;
color: #333;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #ccc;
> span {
font-size: 20px;
}
}
.msg-pager {
float: right;
margin: 20px 0;
}
}
.guang-editor-page .right-side {
margin-top: 20px;
}
.guang-list-page .right-side {
margin-top: 11px;
}
.guang-editor-page .editor-info {
padding: 10px 10px;
background: #fafafa;
.author-avatar {
float: left;
width: 80px;
height: 100%;
img {
width: 80px;
height: 80px;
vertical-align: middle;
border-radius: 50%;
}
}
.author-info {
float: left;
margin: 0 0 0 10px;
max-width: 1060px;
}
.author-name {
margin-top: 11px;
font-size: 20px;
height: 30px !important;
line-height: 30px !important;
}
.author-introduce {
line-height: 24px;
font-size: 14px;
color: #999;
}
.intro-content {
margin: 15px 0 0 0;
line-height: 18px;
font-size: 14px;
color: #999;
}
}
\ No newline at end of file
/**
* 热门推荐模板样式
*/
.g-list {
li {
float: left;
a {
position: relative;
display: block;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
}
}
.g-mask {
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
background: #000;
@include opacity(0.5);
overflow: hidden;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.g-title {
display: block;
text-align: center;
font-weight: bold;
line-height: 2;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
word-break: keep-all;
white-space: normal;
}
.home-page {
.tpl-recommend {
width: 100%;
position: relative;
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
.tpl-body {
margin-bottom: 8px;
}
.tpl-nav {
float: left;
overflow: hidden;
.tpl-keywords {
margin-bottom: 8px;
}
.tpl-category {
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a {
float: left;
width: 50%;
text-align: center;
color: #000;
overflow: hidden;
}
}
}
.tpl-brands {
float: left;
overflow: hidden;
margin-left: 8px;
li {
margin-top: 8px;
}
}
.tpl-types {
float: left;
overflow: hidden;
margin-top: -8px;
li {
float: left;
margin-left: 8px;
margin-top: 8px;
}
}
.tpl-products {
overflow: hidden;
margin-left: -10px;
li {
float: left;
margin-left: 10px;
}
}
.tpl-nav {
width: 185px;
.keywords0, .keywords1, .keywords2 {
margin-bottom: 10px;
height: 76px;
}
.keywords2 {
margin-bottom: 0px;
}
.tpl-category {
height: 228px;
a {
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands {
width: 378px;
height: 512px;
li a {
height: 248px;
}
}
.tpl-types {
width: 579px;
li a {
width: 185px;
height: 248px;
}
}
.tpl-products {
li a {
width: 222px;
height: 298px;
}
}
}
}
.min-screen .home-page .tpl-recommend {
.tpl-nav {
width: 158px;
.keywords0, .keywords1, .keywords2 {
margin-bottom: 8px;
height: 65px;
}
.keywords2 {
margin-bottom: 0px;
}
.tpl-category {
height: 192px;
a {
height: 32px;
line-height: 32px;
font-size: 12px;
&:hover {
text-decoration: underline;
}
}
}
}
.tpl-brands {
width: 324px;
height: 432px;
li a {
height: 212px;
}
}
.tpl-types {
width: 498px;
li a {
width: 158px;
height: 212px;
}
}
.tpl-products {
li a {
width: 190px;
height: 254px;
}
}
}
.home-page {
.singlehot {
overflow: hidden;
margin-left: -8px;
li {
margin-left: 8px;
margin-bottom: 8px;
}
}
.floor-ad {
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
a {
height: 129px;
}
}
.goods-container {
margin-right: -10px;
width: inherit;
padding-top: 0;
.good-info {
margin-bottom: 0px;
}
.good-detail-text {
text-align: center;
}
}
.singlehot {
li a {
width: 185px;
height: 248px;
}
.impo1, .impo9 {
width: 378px;
}
}
.goods-container {
.good-info {
width: 280px;
height: 485px;
.good-detail-img {
height: 374px;
}
}
}
.adbanner {
margin-top: 12px;
a {
height: 150px;
}
}
}
.min-screen .home-page {
.singlehot {
li a {
width: 158px;
height: 212px;
}
.impo1, .impo9 {
width: 323px;
}
}
.goods-container {
.good-info {
width: 240px;
height: 412px;
.good-detail-img {
height: 320px;
}
}
}
}
/*
* 娴滅儤鐨甸崡鏇炴惂
*/
.home-page {
.commodity {
.commodity-list {
margin-left: -10px;
li {
margin-left: 10px;
}
i {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #ffac5b;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px;
}
i.top {
position: absolute;
top: 10px;
right: 10px;
background-color: rgb(255, 87, 92);
color: #fff;
border-radius: 30px;
z-index: 2;
}
.commodity-img {
position: relative;
}
p.commodity-name {
font-size: 12px;
color: #000;
text-align: center;
margin-top: 14px;
line-height: 18px;
}
p.commodity-price {
position: relative;
margin: 3px 0 0 0;
text-align: center;
line-height: 20px;
color: #000;
span {
display: inline-block;
font-size: 12px;
}
}
}
.commodity-brands {
margin-left: -8px;
a {
float: left;
margin-left: 8px;
display: block;
img {
width: 100%;
height: 100%;
}
}
}
.loading {
position: relative;
width: 100%;
text-align: center;
padding-top: 40px;
a {
display: block;
height: 35px;
width: 120px;
margin: 0 auto 40px;
background-color: #000;
color: #fff;
font-size: 14px;
line-height: 35px;
text-align: center;
}
}
}
//1150
.commodity {
.commodity-list {
a {
height: 465px;
width: 280px;
}
.commodity-img {
height: 374px;
}
i.top {
height: 60px;
width: 60px;
line-height: 60px;
font-size: 20px;
}
}
.commodity-brands {
a {
width: 185px;
height: 86px;
}
}
}
}
//990
.min-screen .home-page {
.commodity {
.commodity-list {
a {
height: 400px;
width: 240px;
}
.commodity-img {
height: 320px;
}
i.top {
height: 52px;
width: 52px;
line-height: 52px;
font-size: 14px;
}
}
.commodity-brands {
a {
width: 158px;
height: 74px;
}
}
}
}
.home-page {
.slide-accordion {
overflow: hidden;
position: relative;
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
position: relative;
}
ul {
position: absolute;
left: -5px;
}
li {
position: absolute;
border-left: 5px solid #fff;
a {
width: 558px;
height: 342px;
}
}
.g-mask {
@include opacity(0.2);
&:hover {
@include opacity(0);
}
}
}
//1150
.slide-accordion {
height: 400px;
li {
a {
width: 650px;
height: 400px;
}
}
}
}
.min-screen .home-page {
.slide-accordion {
height: 342px;
li {
a {
width: 558px;
height: 342px;
}
}
}
}
.boys {
.tpl-nav {
.keywords0 {
margin-bottom: 10px !important;
height: 152px !important;
}
.keywords1 {
height: 86px !important;
}
.tpl-category {
a {
height: 38px !important;
line-height: 38px !important;
font-size: 14px !important;
}
}
}
.tpl-brands {
margin-top: (-8px) !important;
}
}
.boys, .lifestyle {
.goods-container {
.good-info {
width: 222px !important;
height: 408px !important;
.good-detail-img {
height: 298px !important;
}
}
}
}
.min-screen {
.boys {
.tpl-nav {
.keywords0 {
margin-bottom: 8px !important;
height: 130px !important;
}
.keywords1 {
margin-bottom: 0px !important;
height: 74px !important;
}
}
.tpl-brands {
margin-top: (-8px) !important;
}
}
.boys, .lifestyle {
.goods-container {
.good-info {
width: 188px;
height: 360px;
.good-detail-img {
height: 255px;
}
}
}
}
}
.brands {
.brands-tabs {
margin: 20px auto;
position: relative;
a {
display: block;
img {
width: 100%;
height: 100%;
display: block;
}
}
li {
float: left;
p {
display: block;
font-size: 30px;
text-align: center;
color: #dedede;
position: absolute;
top: 50%;
width: 100%;
margin-top: -15px;
z-index: 3;
}
.g-mask {
@include opacity(0.4);
}
&:hover .g-mask, .g-mask-on {
@include opacity(0);
}
}
.brands-content {
position: absolute;
left: 0;
.brands-icon {
a {
float: left;
width: 90px;
height: 38px;
}
}
}
.hover-contain {
position: relative;
border-bottom: 1px solid #dfdfdf;
.hoverarr {
background-color: #3d3d3d;
position: absolute;
bottom: 0px;
z-index: 10;
i {
width: 0;
height: 0;
position: absolute;
left: 50%;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3d3d3d;
top: -6px;
margin-left: -3px;
}
}
}
}
.category-nav {
border: 2px solid #222;
padding-left: 16px;
height: 44px;
line-height: 44px;
font-size: 12px;
font-weight: bold;
position: relative;
top: 1px;
z-index: 100;
background-color: #fff;
span {
display: inline-block;
margin-right: 15px;
}
a {
display: inline-block;
padding: 0 7px;
text-align: center;
color: #222;
cursor: pointer;
}
}
.category-fix {
position: fixed;
top: 0;
z-index: 100;
margin-top: 0 !important;
}
.brands-list {
dl {
border-top: 1px dotted #999;
padding: 20px 0;
position: relative;
}
dt {
width: 130px;
text-align: center;
font-weight: bold;
font-size: 16px;
text-align: center;
top: 50%;
margin-top: -9px;
position: absolute;
}
dd {
margin-left: 130px;
li {
float: left;
display: block;
width: 170px;
height: 18px;
}
a {
color: #666;
line-height: 18px;
font-size: 12px;
position: relative;
&:hover {
text-decoration: underline;
}
}
.brands-dialog {
display: inline;
position: relative;
}
.hot {
font-weight: bold;
color: #222;
}
i {
position: relative;
top: -4px;
color: #ee0011;
font-size: 10px;
line-height: 10px;
-webkit-transform: scale(0.9);
}
}
}
//990
.sit-nav {
padding-top: 10px;
font-size: 12px;
.sep {
margin: 0 8px;
}
}
.brands-category {
width: 1150px;
}
.brands-tabs {
padding-bottom: 60px;
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
a {
width: 222px;
height: 180px;
position: relative;
}
}
.brands-content {
width: 1150px;
top: 230px;
.brands-icon {
margin-left: -20px;
a {
float: left;
width: 90px;
height: 38px;
margin-left: 26px;
}
}
}
.hover-contain {
height: 30px;
.hoverarr {
height: 5px;
width: 222px;
}
}
}
.brandfloor {
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 32px;
a {
width: 376px;
height: 206px;
}
}
}
.singlegoods {
//990
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 10px;
a {
width: 280px;
height: 376px;
}
}
.singlegoods-title {
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 18px;
text-align: center;
color: #fff;
}
}
}
.video {
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 10px;
a {
width: 376px;
height: 240px;
}
}
.video-play {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -28px;
width: 60px;
height: 56px;
background-image: image-url("index/play.png");
}
.video-title {
position: absolute;
left: 0;
bottom: 0;
height: 32px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 32px;
text-align: center;
color: #fff;
}
}
}
.news {
margin-bottom: 30px;
.news-pic {
position: relative;
float: left;
width: 764px;
height: 436px;
.slide-container {
height: 100%;
.slide-wrapper {
height: 100% !important;
}
li a {
height: 100%;
width: 764px;
}
&:hover {
.slide-switch.show {
display: none;
}
}
}
.slide-tips {
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
background: rgba(0,0,0,.8);
p {
position: absolute;
left: 18px;
z-index: 2;
height: 30px;
font-size: 14px;
line-height: 30px;
color: #fff;
}
}
.slide-pagination {
right: 0;
left: initial;
bottom: 0;
.slide-pagination-inner {
height: 30px;
box-sizing: border-box;
}
.slide-shade {
@include opacity(0);
background: none;
}
span {
margin-top: 3px;
}
}
.slide-switch {
position: relative;
width: 100%;
margin-top: -214px;
.prev {
left: 0;
top: 0;
margin-left: 0;
}
.next {
right: 0;
top: 0;
margin-right: 0;
}
}
}
.news-txt {
float: right;
padding: 20px 16px;
float: right;
border: 1px solid #000;
overflow: auto;
li {
position: relative;
display: block;
margin-top: 12px;
margin-left: 20px;
}
a {
font-size: 14px;
line-height: 24px;
cursor: pointer;
color: #010101;
display: block;
&:hover {
color: #fff;
background: #000;
padding-left: 12px;
-webkit-transition: padding 0.4s;
transition: padding 0.4s;
}
}
i {
position: absolute;
top: -6px;
left: -26px;
font-size: 30px;
}
}
.news-txt {
width: 342px;
height: 394px;
}
}
.ads {
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 10px;
a {
width: 280px;
img {
height: 160px;
}
}
.name {
font-size: 14px;
}
.des {
font-size: 12px;
}
}
}
.brands-items {
margin: 25px auto;
.brands-item {
float: left;
padding: 15px 0;
width: 50%;
}
a.brands-pic {
float: left;
width: 280px;
height: 136px;
display: block;
img {
width: 100%;
height: 100%;
}
}
.brand-info {
float: right;
padding: 0 20px;
width: 255px;
color: #000;
h3 {
width: 100%;
font-size: 20px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand-desc {
padding: 12px 0;
height: 92px;
font-size: 14px;
line-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
}
}
.pagination {
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
a {
height: 24px;
padding: 0 9px;
line-height: 24px;
display: inline-block;
text-align: center;
margin-right: 8px;
color: #222;
font-size: 12px;
i {
position: relative;
top: -1px;
font-size: 10px;
-webkit-transform: scale(0.8);
}
}
a.cur {
background: #222;
color: #fff;
}
}
}
.min-screen .brands {
.sit-nav {
padding-top: 10px;
font-size: 12px;
.sep {
margin: 0 6px;
}
}
.brands-category {
width: 990px;
}
.brands-tabs {
ul {
margin-left: -9px;
}
li {
margin-left: 9px;
a {
width: 190px;
height: 154px;
}
}
.brands-content {
width: 990px;
top: 200px;
.brands-icon {
margin-left: -16px;
a {
float: left;
width: 80px;
height: 34px;
margin-left: 20px;
}
}
}
.hover-contain {
height: 25px;
.hoverarr {
height: 4px;
width: 190px;
}
}
}
.brandfloor {
//990
ul {
margin-left: -12px;
}
li {
margin-left: 12px;
margin-bottom: 26px;
a {
width: 322px;
height: 206px;
}
}
}
.singlegoods {
//990
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 10px;
a {
width: 240px;
height: 322px;
}
}
.singlegoods-title {
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 18px;
text-align: center;
color: #fff;
}
}
}
.video {
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 10px;
a {
width: 323px;
height: 208px;
}
}
.video-play {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -28px;
width: 60px;
height: 56px;
background-image: image-url("index/play.png");
}
.video-title {
position: absolute;
left: 0;
bottom: 0;
height: 32px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 32px;
text-align: center;
color: #fff;
}
}
}
.news {
.news-pic {
width: 660px;
height: 376px;
.slide-container {
height: 376px;
img {
height: 376px;
}
}
}
.news-txt {
width: 284px;
height: 334px;
}
}
.ads {
margin-bottom: 30px;
ul {
margin-left: -10px;
}
li {
margin-left: 10px;
margin-bottom: 10px;
a {
width: 240px;
img {
height: 140px;
}
}
.name {
font-size: 14px;
}
.des {
font-size: 12px;
}
}
}
.brands-items {
a.brands-pic {
width: 240px;
height: 116px;
}
.brand-info {
width: 212px;
.brand-desc {
height: 72px;
}
}
}
}
.brands-layer {
position: absolute;
z-index: 100;
top: -83px;
left: 15px;
width: 325px;
height: 287px;
background: image-url("index/brands-layer.png") no-repeat;
font-weight: normal;
.layer-content {
padding: 20px 20px 20px 35px;
.title {
font-size: 24px;
line-height: 24px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
.desc {
margin: 5px 0 5px 0;
height: 72px;
overflow: hidden;
img {
width: 80px;
height: 50px;
margin: 3px 5px 0 0;
float: left;
}
.right {
width: 180px;
float: right;
font-size: 12px;
line-height: 150%;
}
}
.featured {
font-size: 16px;
margin-right: -15px;
img {
height: 100px;
width: 80px;
float: left;
margin: 15px 15px 0 0;
}
}
}
}
.brands-layer-right {
background: image-url("index/brands-layer.png") no-repeat 0 -287px;
left: -325px;
top: -83px;
.layer-content {
padding: 20px 35px 20px 20px;
}
}
/*首页990*/
.min-screen {
.home-page {
width: 990px;
/*大banner*/
.slide-container {
height: 387px;
&.slide-thumb-container {
height: 440px;
}
img {
display: block;
}
}
.slide-container-placeholder {
height: 387px;
&.slide-thumb-container-placeholder {
height: 440px;
}
}
/*大banner大图*/
.slide-wrapper {
height: 387px;
li {
a {
width: 990px;
}
}
}
/*大图上的左右切换按钮*/
.slide-switch {
display: block;
/* @include opacity(0);
@include transition-property(opacity);
@include transition-duration(.2s);
@include transition-timing-function(ease-in); */
a {
&.prev {
margin-left: -495px;
}
&.next {
margin-right: -495px;
}
&:hover{
@include opacity(0.9);
}
}
}
/*大banner缩略图*/
.thumb-pagination {
width: 990px;
margin: 7px auto 0;
padding: 0;
li {
width: 118px;
height: 46px;
}
}
/*女首碎片banner*/
.debris-slider {
height: 440px;
.left-col {
margin-right: 9px;
a {
width: 240px;
height: 103px;
}
a:first-child {
height: 214px;
}
}
.center-col {
width: 492px;
margin-right: 9px;
}
.right-col a {
width: 240px;
height: 103px;
}
.right-col a:first-child {
height: 326px;
margin-bottom: 10px;
}
}
/*男首最新速报*/
.new-report {
.report-list {
width: 748px;
li {
width: 158px;
height: 212px;
&:first-child {
width: 242px;
height: 432px;
}
}
}
.last-item {
width: 242px;
height: 432px;
}
}
/*优选品牌*/
.preference-brand-list {
width: 998px;
}
.preference-brand-item {
margin-right: 7px;
a {
width: 159px;
height: 74px;
}
}
.preference-more {
width: 159px;
height: 74px;
line-height: 90px;
}
.img-slider-wrapper {
height: 480px;
}
.img-container-landscape {
margin: 73px auto 0;
width: 844px;
height: 370px;
.img-item {
width: 275px;
height: 100%;
margin-right: 9px;
}
}
/*男首优选品牌 图片品牌*/
.img-brand {
height: 150px;
ul {
width: 998px;
}
li {
width: 325px;
height: 150px;
line-height: 150px;
}
.logo-brand-switch {
.iconfont {
font-size: 24px;
&.prev {
top: -12px;
}
&.bottom {
bottom: -12px;
}
}
}
}
/*男首优选品牌 logo品牌*/
.logo-brand {
height: 246px;
&.logos-10 {
height: 164px;
}
ul {
width: 998px;
}
li {
margin: 8px 8px 0 0;
width: 158px;
height: 74px;
line-height: 74px;
}
}
/*创意生活商品分类*/
.categorys-list {
ul {
width: 1004px;
}
li {
margin: 0 7px 7px 0;
width: 161px;
height: 214px;
&.cate-item0 {
width: 160px;
height: 435px;
}
&.cate-item1 {
width: 326px;
height: 435px;
}
}
}
.floor-header {
margin: 50px 0 30px;
.header-navs {
li {
padding: 1px 10px;
}
}
}
}
}
@import "index1150","_index-pliffy";
.home-page {
width: 1150px;
margin: 10px auto 0;
.slide-container{
position: absolute;
left: 0;
right: 0;
height: 450px;
&.slide-thumb-container {
height: 510px;
}
}
.slide-wrapper {
position: relative;
height: 450px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover {
.slide-switch.show {
display: block;
}
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
a {
display: block;
height: 100%;
width: 1150px;
margin: 0 auto;
}
&:first-child {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
}
.slide-container-placeholder {
height: 450px;
width: 100%;
&.slide-thumb-container-placeholder {
height: 510px;
}
}
.slide-switch {
display: block;
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 50%;
margin-left: -575px;
}
&.next {
right: 50%;
margin-right: -575px;
}
&:hover{
@include opacity(0.9);
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
.thumb-pagination {
width: 1148px;
margin: 6px auto 0;
padding: 0 0 0 2px;
li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 138px;
height: 54px;
&:first-child {
margin: 0;
}
&.focus {
a {
@include opacity(0);
}
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
@include opacity(0.3);
}
img {
width: 100%;
height: 100%;
}
}
}
/*大banner圆点*/
.slide-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 0;
.slide-pagination-inner {
position: relative;
padding: 7px;
@include inline-block;
}
.slide-shade {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
@include opacity(0.3);
@include border-radius(13px);
}
span {
position: relative;
@include inline-block;
margin: 0 7px;
width: 12px;
height: 12px;
background: #fff;
cursor: pointer;
@include opacity(0.6);
@include border-radius(6px);
z-index: 2;
&.focus {
@include opacity(1);
}
}
}
.debris-slider {
height: 510px;
width: 100%;
.col {
float: left;
a {
display: block;
}
}
.left-col a,
.right-col a {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.right-col img,
.left-col img {
height: 100%;
width: 100%;
}
.left-col {
margin-right: 10px;
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 250px;
}
}
.center-col {
position: relative;
width: 570px;
height: 100%;
margin-right: 10px;
font-size: 0;
&:hover {
.slide-switch.show {
display: block;
}
}
.slide-wrapper {
height: 100%;
li {
a {
width: 100%;
}
}
}
.slide-switch {
a.prev {
left: 0;
margin-left: 0;
}
a.next {
right: 0;
margin-right: 0;
}
}
img {
max-width: 100%;
max-height: 100%;
}
}
.right-col a {
width: 280px;
height: 120px;
}
.right-col a:first-child {
height: 380px;
margin-bottom: 11px;
}
}
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
}
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
/*优选品牌*/
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 1158px;
}
.preference-brand-item {
float: left;
margin-right: 8px;
margin-bottom: 8px;
a {
display: table-cell;
width: 185px;
height: 86px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 185px;
height: 86px;
line-height: 100px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 558px;
background: #8ae6e0;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
box-sizing: border-box;
margin: 86px auto 0;
width: 982px;
height: 433px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 320px;
height: 100%;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
}
/*男首优选品牌 图片品牌*/
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 378px;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
/*图片品牌左右切换按钮*/
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
@include opacity(0.9);
}
}
}
}
/*男首优选品牌 logo品牌*/
.logo-brand {
width: 100%;
height: 282px;
overflow: hidden;
&.logos-10 {
height: 188px;
}
ul {
width: 1158px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 185px;
height: 86px;
line-height: 86px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: image-url('index/logo-brand-line.png') no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin: 0 0 0 -48px;
}
&.next {
bottom: 12px;
margin: 0 0 0 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
/*创意生活商品分类*/
.categorys-list {
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
&.cate-item0 {
width: 185px;
height: 504px;
}
&.cate-item1 {
width: 377px;
height: 504px;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.floor-header {
position: relative;
margin: 80px 0 40px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 15px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
}
\ No newline at end of file
.default-me-page {
margin-bottom: 20px;
.message-tip {
box-sizing: border-box;
width: 800px;
height: 40px;
line-height: 40px;
padding: 0 10px;
margin-bottom: 10px;
background: #faf6d9;
border: 1px solid #f5e8c5;
@include border-radius(2px);
font-weight: bold;
font-size: 12px;
.message-title {
}
a {
color: #468fa2;
font-weight: normal;
}
b {
color: #e8044f;
margin-right: 5px;
}
.close {
float: right;
cursor: pointer;
font-weight: normal;
}
}
.more {
display: block;
float: right;
height: 22px;
line-height: 22px;
margin-top: 8px;
padding: 0 6px;
font-size: 12px;
color: #fff;
background: #646464;
text-align: center;
@include border-radius(2px);
.iconfont {
font-size: 12px;
}
}
.brands ul {
padding: 10px 0 10px 10px;
li {
float: left;
width: 122px;
height: 103px;
border: 1px solid #f6f6f6;
margin-right: 7px;
overflow: hidden;
}
img {
width: 80px;
height: 50px;
display: block;
vertical-align: middle;
margin: 15px auto;
}
.brand-name {
display: block;
width: 114px;
height: 18px;
line-height: 18px;
color: #333;
background: #f4f4f4;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 auto;
}
}
.new-arrival .pager {
float: right;
.pre, .next {
display: inline-block;
height: 22px;
line-height: 22px;
margin-top: 8px;
padding: 0 6px;
font-size: 12px;
color: #fff;
background: #646464;
text-align: center;
@include border-radius(2px);
.iconfont {
font-size: 12px;
}
}
}
.new-arrival li {
float: left;
width: 101px;
height: 160px;
padding: 29px;
border-right: 1px solid #e3e3e3;
text-align: center;
font-size: 12px;
overflow: hidden;
.thumb {
width: 100px;
height: 100px;
}
.name {
margin: 10px 0;
text-decoration: underline;
color: #666;
}
.price {
color: #000;
}
}
.banner {
display: block;
width: 800px;
}
.help-us {
height: 20px;
line-height: 20px;
background: image-url('me/suggest-icon.png') no-repeat 2px 3px;
padding-left: 20px;
font-size: 12px;
a {
color: #468fa2;
}
}
}
\ No newline at end of file
.me-page {
width: 990px;
margin-left: auto;
margin-right: auto;
.home-path {
height: 40px;
line-height: 40px;
padding-left: 20px;
color: #ccc;
background: image-url('me/home-icon.png') no-repeat 0 12px;
font-size: 12px;
a, span {
color: #666;
}
span {
font-weight: bold;
}
}
.block {
border: 1px solid #dedede;
@include border-radius(2px);
}
.me-main .block {
margin-bottom: 10px;
}
.title {
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
padding: 0 8px;
background: #e3e3e3;
.en {
font-size: 12px;
font-weight: normal;
}
}
.user-thumb {
text-align: center;
padding: 20px 0;
background: #f8f8f8;
img {
width: 100px;
height: 100px;
}
}
.home-navigation {
float: left;
width: 180px;
margin-right: 8px;
}
.nav-group .row {
height: 38px;
line-height: 38px;
border-top: 1px solid #e2e2e2;
padding-left: 35px;
color: #666;
background: #f8f8f8;
font-size: 12px;
a {
display: block;
color: #666;
}
&:hover {
background: #fff;
color: #000;
}
&.active {
background: #636363;
a {
color: #fff;
}
}
&.first {
border-top: none;
}
}
.nav-group .nav-title {
font-size: 14px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #333;
background: #e6e6e6;
}
.me-main {
float: left;
width: 800px;
}
}
@import "default", "order-block";
\ No newline at end of file
.me-orders {
font-size: 12px;
.right {
float: right;
}
.order-table-header {
height: 30px;
line-height: 30px;
background: #efefef;
border-bottom: 1px solid #e6e6e6;
padding: 0 10px;
> span {
display: block;
float: left;
text-align: center;
}
.info {
width: 330px;
text-align: left;
padding-left: 10px;
}
.price {
width: 75px;
}
.count {
width: 60px;
}
.pay, .order-status, .operation {
width: 100px;
}
}
.order-title {
height: 28px;
line-height: 28px;
background: #efefef;
padding: 0 5px;
border-bottom: 1px solid #e6e6e6;
}
.order {
margin: 10px;
border: 1px solid #e6e6e6;
@include border-radius(2px);
li {
display: table;
> div {
display: table-cell;
color: #666;
text-align: center;
vertical-align: middle;
}
}
.info {
width: 313px;
text-align: left;
padding: 10px 0 10px 10px;
> * {
float: left;
}
.color-size {
color: #999;
}
}
.price {
width: 90px;
font-weight: bold;
}
.count {
width: 50px;
}
.pay, .order-status, .operation {
width: 100px;
border-left: 1px solid #e6e6e6;
}
.name {
display: block;
color: #468fa2;
line-height: 18px;
}
.color-size {
display: block;
line-height: 18px;
}
.pay {
font-weight: bold;
}
.pay-tip {
font-weight: normal;
display: block;
line-height: 18px;
color: #999;
}
.op-item {
display: block;
color: #468fa2;
line-height: 18px;
}
.complete {
color: #999;
}
.cancel {
color: #e8044f;
}
}
}
\ No newline at end of file
$order: sprite-map("order/save/*.png", $spacing: 10px);
@import "save";
@import "pay";
.order-pay{
font-size: 12px;
line-height: 150%;
.pay-wapper{
border: 1px solid #ccc;
}
table{
width: 100%;
td{
border: 1px solid #ccc;
border-left: 0 none;
padding: 10px;
text-align: center;
}
}
thead{
background: #000;
th{
height: 32px;
line-height: 32px;
color: #fff;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.clo1{
width: 10%;
}
.clo2{
width: 20%;
}
.clo4{
width: 40%;
}
}
.pay-pro{
.pay-pro-icon{
float: left;
display: inline;
width: 60px;
height: 60px;
display: block;
}
.pay-pro-info{
color: #999;
margin-left:70px;
padding-top: 15px;
text-align: left;
a{
color: #468fa2;
text-decoration: none;
display: block;
&:hover{
text-decoration: underline;
}
}
}
}
.play-content{
padding: 10px;
.red{
color: #e8044f!important;
}
.orange{
color: #f60!important;
}
.strong{
font-weight: bold;
color: #000;
}
.pan{
dt{
width: 105px;
height: 30px;
padding: 0px 0px 0px 30px;
line-height: 30px;
text-align: left;
border: 0px;
color: #fff;
display: inline-block;
cursor: pointer;
background: url(http://static.yohobuy.com/images/btn_openclose.png) no-repeat 0px -60px;
margin-bottom:5px;
}
dd{
display: none;
border: 1px #ccc solid;
padding: 10px 15px;
margin-bottom: 10px;
}
}
.textbox{
height: 20px;
line-height: 20px;
color: #333;
border: 1px #c9c9c9 solid;
vertical-align: top;
}
.dropdown{
height: 20px;
line-height: 20px;
color: #333;
border: 1px #c9c9c9 solid;
vertical-align: top;
}
.btn-group{
text-align: right;
input{
display: inline-block;
background: none;
border: 1px solid #ccc;
border-radius: 2px;
height: 20px;
}
.ok{
background-color: #000;
color:#fff;
}
}
.play-left{
float: left;
width: 405px;
.pan{
text-align: left;
dt{
color: #000;
background: url(http://static.yohobuy.com/images/btn_openclose.png) no-repeat 0px 0px;
}
}
}
.play-piao-pan{
li{
height: 25px;
padding: 10px 0px;
line-height: 22px;
label{
width: 65px;
display: inline-block;
}
.textbox{
width: 200px;
}
}
}
.play-remark-pan{
.textbox{
width: 369px;
height: 70px;
}
.note{
padding: 5px 0;
color: #999;
}
}
.play-right{
float: right;
width: 50%;
width: 405px;
.play-total{
text-align: right;
padding-bottom: 20px;
label{
padding-right: 10px;
}
em{
width: 80px;
text-align: left;
display: inline-block;
}
a{
color: #468fa2;
text-decoration: underline;
}
}
.pan{
text-align: right;
}
}
.play-juan-pan{
dd{
text-align: left;
}
.play-juan{
padding: 10px 0;
.textbox{
width: 70px;
}
}
}
.play-bi-pan{
dd{
text-align: right;
}
.textbox{
width: 70px;
}
p{
padding: 10px 0;
}
}
}
.to-play{
p{
padding: 10px 0px;
font-size: 14px;
text-align: right;
color: #000;
em{
color: #e8044f;
font-size: 24px;
}
}
.btn-group{
padding: 10px 0px 40px 0px;
.submit{
float: right;
width: 133px;
height: 33px;
padding: 0px;
text-align: center;
border: 0px;
line-height: 33px;
font-size: 14px;
color: #fff;
font-weight: bold;
background: url(http://static.yohobuy.com/images/btns.png) no-repeat 0px -33px;
display: inline-block;
cursor: pointer;
}
}
}
}
\ No newline at end of file
.order-ensure-page {
width: 990px;
margin: 40px auto;
// 填写订单
.order-edit {
width: 100%;
position: relative;
margin-bottom: 35px;
&:before {
content: '';
display: block;
background: sprite($order, cart_logo) no-repeat;
width: image-width(sprite-file($order, cart_logo));
height: image-height(sprite-file($order, cart_logo));
}
.order-title {
ul {
display: block;
background: sprite($order, cartnew_flow) no-repeat;
width: image-width(sprite-file($order, cartnew_flow));
height: image-height(sprite-file($order, cartnew_flow));
position: absolute;
right: 0;
top: 0;
li {
display: block;
width: 33.33333333%;
float: left;
font-size: 12px;
color: #999;
height: 50px;
line-height: 50px;
&.active {
color: #333;
text-align: center;
&:after {
display: block;
content: '';
background: sprite($order, cart_flow_black) no-repeat;
width: image-width(sprite-file($order, cart_flow_black));
height: image-height(sprite-file($order, cart_flow_black));
position: absolute;
left: 50%;
margin-left: image-width(sprite-file($order, cart_flow_black))/(-2);
top: 0;
}
}
&.end {
text-align: right;
}
}
}
}
.order-edit-main {
border: 1px solid #ccc;
margin-top: 30px;
h2.title {
height: 30px;
line-height: 30px;
background: #000000;
color: #fff;
font-size: 12px;
text-indent: 15px;
}
.order-content {
padding: 5px 30px;
font-size: 12px;
color: #333;
//public
.order-selection {
border-bottom: 1px dashed #ccc;
padding: 15px 0;
h2 {
font-size: 14px;
color: #000;
span {
color: #e8044f;
text-decoration: underline;
cursor: pointer;
}
}
}
//end
.address-list {
ul {
padding: 15px 0;
li {
padding: 10px 0;
strong {
font-weight: bold;
margin-right: 15px;
}
input.radio {
margin: 0;
vertical-align: middle;
}
}
.order-modify-btn {
display: inline-block;
float: right;
color: #e8044f;
width: 80px;
padding-right: 20px;
height: auto;
overflow: hidden;
span {
text-decoration: underline;
cursor: pointer;
float: right;
&.address-modify {
float: left;
}
}
}
&.exist-address-list {
li {
border: 1px solid #fff;
padding-left: 15px;
&.active {
background: #dbedf7;
border: 1px solid #8fb8e0;
}
&.has-exist-address {
.default-address {
color: #468fa2;
text-decoration: underline;
cursor: pointer;
}
}
}
}
}
}
.address-manage {
border-top: 1px dashed #ccc;
li {
height: 25px;
line-height: 25px;
.address-legend {
width: 80px;
text-align: right;
display: inline-block;
color: #333;
i {
color: #e8044f;
}
}
.text-input {
height: 25px;
line-height: 25px;
width: 180px;
padding: 0;
border: 1px solid #ccc;
@include box-sizing();
}
select.text-input {
width: 100px;
}
.address-tel-input {
width: 180px;
text-align: center;
display: inline-block;
height: 25px;
line-height: 25px;
input {
text-align: left;
float: right;
width: 120px;
&.tel-lengend {
float: left;
width: 40px;
}
}
}
}
}
@each $class in save-btn, pay-btn {
.#{$class} {
background: sprite($order, $class) no-repeat;
width: image-width(sprite-file($order, $class));
height: image-height(sprite-file($order, $class));
line-height: image-height(sprite-file($order, $class));
display: block;
font-size: 14px;
color: #fff;
font-weight: bold;
text-indent: 25px;
cursor: pointer;
}
}
.pay-time {
ul {
padding: 15px;
li {
margin: 10px 0;
input.radio {
margin: 0;
vertical-align: middle;
}
}
}
.pay-time-modify {
h3 {
height: 25px;
line-height: 25px;
border: 1px solid #e6e6e6;
background: #efefef;
text-indent: 25px;
position: relative;
&:after {
content: '';
display: block;
width: 11px;
height: 11px;
background: image_url('order/roundgreybtn.gif');
position: absolute;
top: 7px;
left: 8px;
}
}
.pay-dashed-hr {
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}
.pay-type-tips {
color: #999;
}
div.pay-type-legend {
width: 130px;
display: inline-block;
padding: 0;
text-indent: 0;
}
span.pay-type-legend {
margin: 0;
color: #468fa2;
cursor: pointer;
&:after {
content: '';
width: 12px;
height: 12px;
background: image_url('order/icon_arrow.png');
display: inline-block;
@include transition(transform .3s);
}
&.active {
&:after {
@include rotate(180deg);
}
}
}
.support-type {
display: block;
margin-left: 130px;
border-left: 1px dashed #ccc;
font-size: 12px;
h4 {
padding: 10px 0 10px 15px;
}
ul {
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
li {
display: block;
float: left;
width: 105px;
height: 30px;
border: 1px solid #ccc;
margin: 0 0 10px 15px;
img {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
}
}
}
.pay-recommend {
font-size: 0;
.pay-type-legend, .support-type {
font-size: 12px;
}
}
}
}
.select-express {
border-bottom: none;
.express-list {
padding-left: 15px;
margin: 10px 0;
input.radio {
margin: 0;
vertical-align: middle;
}
}
.express-tips {
color: #999;
}
}
}
}
}
//
.order-pay {
width: 100%;
}
}
\ No newline at end of file
.back-page {
font-size: 14px;
.content {
margin: 175px 0 0 !important;
}
.back-header {
position: relative;
width: 268px;
line-height: 40px;
margin-bottom: 5px;
.country-code {
float: right;
cursor: pointer;
color: #b9b9b9;
.iconfont {
font-size: 14px;
vertical-align: middle;
}
}
}
.title {
float: left;
margin: 0px;
font-size: 22px;
line-height: 40px;
color: #000;
font-weight: normal;
}
.title2 {
margin: 0 0 5px;
font-size: 22px;
line-height: 40px;
color: #000;
font-weight: normal;
}
.err-tip.captcha-err {
top: 10px;
left: 326px;
}
.country-code-list {
display: none;
position: absolute;
padding: 0 10px;
color: #000;
background-color: #fff;
border: 1px solid #000;
margin-top: 5px;
cursor: pointer;
z-index: 100;
top: 30px;
right: 0;
@include border-radius(5px);
li {
height: 20px;
line-height: 20px;
}
}
input {
padding: 0;
outline: none;
font-family: Regular, arial, 'Microsoft YaHei';
}
.input-container-li {
position: relative;
margin-bottom: 22px;
.btn {
width: 270px;
height: 45px;
line-height: 45px;
cursor: pointer;
font-size: 20px;
border: none;
letter-spacing: 0;
}
.captcha {
width: 160px;
}
.captcha-img {
height: 37px;
width: 90px;
border: 0;
margin-left: 10px;
vertical-align: middle;
outline: none;
cursor: pointer;
}
.change-captcha {
color: #ff1901;
font-size: 12px;
text-decoration: underline;
margin-left: 10px;
cursor: pointer;
}
}
}
.send-email-page {
font-size: 14px;
.content {
margin: 216px 0 0 !important;
}
.send-tips {
line-height: 28px;
color: #4c4c4c;
text-align: center;
font-size: 15px;
.iconfont {
margin: 0 8px 0 0;
}
}
.no-find {
margin: 10px 0 0 0;
line-height: 20px;
color: #a5a4a4;
text-align: center;
}
.to-my-email {
a {
display: block;
margin: 53px auto 0;
width: 270px;
height: 45px;
line-height: 45px;
background: #ff1901;
text-align: center;
color: #fff;
letter-spacing: 2px;
}
}
}
.verification-page .content{
li {
position: relative;
margin-bottom: 43px;
}
.btn {
@include inline-block;
border: none;
}
.head-title {
font-size: 24px;
color: #000;
}
.pn-label {
color: #828282;
font-size: 16px;
}
.country-code {
margin: 0 10px;
}
.country-code, .phone-num {
color: #000;
font-size: 16px;
}
.captcha {
width: 160px !important;
}
.send-captcha {
width: 133px;
font-size: 12px;
position: relative;
top: -1px;
letter-spacing: 0;
}
.err-tip {
left: 310px;
}
.captcha-tips {
position: absolute;
top: 50px;
color: #a5a4a4;
.iconfont {
color: #0F9ACD;
font-size: 14px;
margin: 0 8px 0 0;
vertical-align: 12%;
}
}
}
.reset-success-page {
.content {
margin: 255px 0 0 !important;
}
.success-text {
line-height: 35px;
.iconfont {
font-size: 30px;
color: #ee3f14;
}
span {
font-size: 24px;
margin: 0 18px;
}
#count-down {
color: #ee3f14;
}
}
.success-btn {
display: block;
margin: 43px auto 0;
width: 269px;
line-height: 269px;
height: 45px;
line-height: 45px;
font-size: 14px;
color: #fff;
text-align: center;
background-color: #ff1901;
}
}
\ No newline at end of file
$tip: sprite-map("passport/tip/*.png", $spacing: 10px);
.passport-page {
width: 1150px;
margin-left: auto;
margin-right: auto;
.content {
float: left;
margin-top: 107px;
padding-left: 85px;
}
.input {
height: 43px;
font-size: 16px;
line-height: 1.2;
line-height: 43px\9;
width: 268px;
border: 1px solid #dbdbdb;
text-indent: 10px;
color: #9a9a9a;
color: rgba(0,0,0,.5);
}
.error {
border-color: #f00 !important;
}
.btn {
display: block;
height: 46px;
line-height: 46px;
width: 100%;
text-align: center;
color: #fff;
background-color: #ff1901;
letter-spacing: 10px;
font-size: 20px;
cursor: pointer;
&.disable {
background-color: #555;
cursor: default;
}
}
.pwd-intensity-container {
width: 270px;
text-align: right;
padding-top: 5px;
&.red {
.pwd-intensity {
color: #ee0011;
}
.color {
background: #ee0011;
color: #fff;
}
}
&.yellow {
.pwd-intensity {
color: #f6da1e;
}
.color {
background: #f6da1e;
color: #fff;
}
}
&.green {
.pwd-intensity {
color: #3ee392;
}
.color {
background: #3ee392;
color: #fff;
}
}
.pwd-intensity {
height: 15px;
font-size: 12px;
background-color: #e8e8e8;
padding: 0px 10px;
text-align: center;
color: #b9b9b9;
}
}
.pwd-tips {
position: absolute;
top: -10px;
left: 285px;
width: 160px !important;
height: 72px;
padding-top: 7px;
font-size: 12px;
background: sprite($tip, block) no-repeat;
>div {
position: relative;
height: 22px;
line-height: 22px;
margin-left: 15px;
padding-left: 15px;
font-size: 12px;
color: #b9b9b9;
i {
position: absolute;
width: 14px;
height: 14px;
left: -2px;
top: 50%;
margin: -7px 0 0;
background: sprite($tip, info);
}
&.no {
color: red;
i {
background: sprite($tip, error);
}
}
&.yes {
i {
background: sprite($tip, success);
}
}
}
}
.tip-panel {
position: absolute;
display: none;
width: 248px;
padding: 0 10px;
z-index: 100;
background-color: #161616;
border: 1px solid rgba(255, 255, 255, 0.7);
margin-top: 5px;
cursor: pointer;
@include border-radius(5px);
li {
height: 20px;
line-height: 20px;
color: #b9b9b9;
}
}
.err-tip {
position: absolute;
font-size: 14px;
white-space: nowrap;
top: 8px;
left: 285px;
padding: 6px 0;
color: #f00;
i {
display: block;
float: left;
height: 14px;
width: 14px;
background: sprite($tip, error) no-repeat;
margin-right: 5px;
}
a {
text-decoration: underline;
color: #f00;
}
}
/*完善信息提示框*/
.page-tip {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #ccc;
clear: both;
margin-bottom: 15px;
}
}
.passport-cover {
float: left;
margin: 107px 0;
width: 575px;
.cover-content {
width: 100%;
height: 318px;
padding: 50px 0;
border-right: 1px solid #dfdfdf;
}
.cover-img {
display: block;
width: 252px;
height: 190px;
margin: 0 auto;
margin-top: 50px;
}
}
@import "login", "register", "back", "welcome", "third";
\ No newline at end of file
$third: sprite-map("passport/third/*.png");
.login-page {
.relative {
position: relative;
}
.right {
float: right;
}
.login-ul > li {
margin-bottom: 25px;
}
.title {
float: left;
font-size: 20px;
}
.country-code {
cursor: pointer;
color: #b9b9b9;
}
.country-list {
display: none;
position: absolute;
padding: 0 10px;
background: #fff;
border: 1px solid #000;
top: 20px;
right: 0;
z-index: 1;
@include border-radius(5px);
li {
height: 20px;
line-height: 20px;
color: #000;
}
}
.email-autocomplete {
position: absolute;
width: 248px;
padding: 0 10px;
z-index: 1;
margin-top: 5px;
border-radius: 5px;
cursor: pointer;
border: 1px solid #fefefe;
background-color: #161616;
color: #fff;
li {
height: 24px;
line-height: 24px;
}
}
.captcha-wrap {
position: relative;
.err-tip {
left: 335px;
}
}
/* 验证码 */
.captcha{
width: 160px;
float: left;
}
.captcha-img {
height: 37px;
width: 90px;
border: 0;
vertical-align: middle;
outline: none;
margin-left: 10px;
margin-top: 4px;
float: left;
}
.change-captcha {
position: absolute;
top: 0;
right: -50px;
cursor: pointer;
float: left;
height: 43px;
font-size: 14px;
line-height: 43px;
color: #ff1901;
}
.remember-me {
cursor: pointer;
}
.other-opts {
color: #b9b9b9;
font-size: 14px;
.iconfont {
font-size: 14px;
}
.fast-reg {
color: #ff1901;
}
}
.forget-password {
color: #b9b9b9;
}
.third-party-login {
display: table;
a {
display: table-cell;
width: 45px;
background-size: 100% 100%;
}
.icon {
display: block;
width: 30px;
height: 30px;
margin: 0 auto;
}
.weixin {
background: sprite($third, weixin) no-repeat;
}
.qq {
background: sprite($third, qq) no-repeat;
}
.weibo {
background: sprite($third, weibo) no-repeat;
}
.alipay {
background: sprite($third, alipay) no-repeat;
}
.douban {
background: sprite($third, douban) no-repeat;
}
.renren {
background: sprite($third, renren) no-repeat;
}
}
.caps-lock {
position: absolute;
color: #666;
border: #ffe57d;
background: #fff6d2;
white-space: nowrap;
top: 8px;
left: 278px;
padding: 0 20px;
height: 27px;
line-height: 30px;
}
}