.brands { /* 路径导航样式重置 */ .path-nav { border-bottom: none; margin-bottom: 0; padding-top: 10px; padding-bottom: 20px; } .brands-tabs { 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 { opacity: 0.4; } &:hover .g-mask, .g-mask-on { opacity: 0; } } .hover-contain { position: relative; border-bottom: 1px solid #dfdfdf; .hoverarr { background-color: #3d3d3d; position: absolute; bottom: 0; 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; } } } } .header-navs { margin-right: -15px; } .category-nav { border: 2px solid #222; padding-left: 16px; height: 44px; line-height: 44px; font-size: 12px; font-weight: bold; position: relative; 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 { position: relative; border-top: 1px dotted #999; padding: 20px 0; } dt { position: absolute; width: 130px; text-align: center; font-weight: bold; font-size: 16px; text-align: center; top: 50%; margin-top: -9px; } dd { margin-left: 130px; li { float: left; display: block; width: 170px; height: 18px; } a { color: #666; line-height: 18px; font-size: 12px; position: relative; } span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; &:hover { text-decoration: underline; } } .brands-dialog { display: inline; position: relative; } .hot { font-weight: bold; color: #222; } i { position: relative; top: -4px; color: #e01; font-size: 14px; } } } .brands-category { width: 1150px; } .brands-tabs { width: 100%; li { margin-left: 10px; a { position: relative; width: 222px; height: 180px; } } li:first-child { margin-left: 0; } .hover-contain { height: 30px; .hoverarr { height: 5px; width: 222px; } } } .brands-ad, .brands-logo { margin: 20px 0; } .brands-ad li { float: left; margin-left: 10px; img { display: block; width: 280px; height: 280px; } &:first-child { margin-left: 0; img { width: 570px; } } } .brands-logo a { float: left; margin-left: 26px; &:first-child { margin-left: 0; } img { display: block; width: 91px; height: 38px; } } .list-floor { width: 1160px; } .brandfloor { .g-list { margin-top: -32px; } li { margin-right: 8px; margin-top: 32px; a { width: 378px; height: 250px; } } } .singlegoods { .g-list { margin-top: -10px; } li { margin-right: 10px; margin-top: 10px; a { width: 280px; height: 374px; } } .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 { .g-list { margin-top: -10px; } li { margin-right: 8px; margin-top: 10px; a { width: 378px; height: 242px; } } .video-play { display: block; position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -28px; width: 60px; height: 56px; background-image: resolve(img/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: 40px; .news-pic { position: relative; float: left; width: 764px; height: 436px; .slide-container { height: 100%; li a { height: 100%; width: 764px; } .slide-wrapper { height: 100%; } .slide-switch { display: none; } .prev { left: 0; margin-left: 0; } .next { right: 0; margin-right: 0; } .slide-switch.show { display: block; } } .slide-tips { position: absolute; left: 0; bottom: 0; height: 30px; width: 100%; background: #000; opacity: 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: auto; bottom: 0; .slide-shade { opacity: 0; background: none; } span { margin-top: 3px; } } } .news-txt { float: right; padding: 20px 16px; float: right; border: 1px solid #000; overflow: hidden; ul { height: 100%; } li { position: relative; display: block; margin-bottom: 10px; margin-left: 20px; } a { font-size: 14px; line-height: 27px; cursor: pointer; color: #010101; display: block; &:hover { color: #fff; background: #000; padding-left: 12px; transition: padding 0.4s; } } i { position: absolute; top: 0; left: -26px; font-size: 22px; } } .news-txt { width: 342px; height: 394px; } } .ads { margin: 40px 0; li { margin-right: 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; @mixin ellipsis ; } .brand-desc { padding: 12px 0; height: 92px; font-size: 14px; line-height: 22px; overflow: hidden; } } } .pagination { margin: 40px 0 80px; 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; transform: scale(0.8); } } a.cur { background: #222; color: #fff; } } } .min-screen .brands { .header-navs { margin-right: -10px; } .sit-nav { padding-top: 10px; font-size: 12px; .sep { margin: 0 6px; } } .brands-category { width: 990px; } .brands-tabs { li { a { width: 190px; height: 154px; } } .hover-contain { height: 25px; .hoverarr { height: 4px; width: 190px; } } } .brands-ad li { img { width: 240px; height: 240px; } &:first-child img { width: 490px; } } .brands-logo a { margin-left: 10px; &:first-child { margin-left: 0; } img { width: 90px; height: 37px; } } .list-floor { width: 1000px; } .brandfloor { .g-list { margin-top: -26px; } li { margin-right: 9px; margin-top: 26px; a { width: 324px; height: 214px; } } } .singlegoods { .g-list { margin-top: -10px; } li { margin-right: 10px; margin-top: 10px; a { width: 240px; height: 324px; } } .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 { .g-list { margin-top: -10px; } li { margin-right: 9px; margin-top: 10px; a { width: 324px; height: 206px; } } .video-play { display: block; position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -28px; width: 60px; height: 56px; background-image: resolve(img/index/play.png); } .video-title { position: absolute; left: 0; bottom: 0; height: 30px; width: 100%; p { position: absolute; z-index: 2; top: 0; left: 0; display: block; width: 100%; height: 100%; font-size: 14px; line-height: 30px; 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; li { margin-bottom: 13px; } } } .ads { margin-bottom: 30px; li { margin-right: 10px; margin-bottom: 10px; a { width: 240px; img { height: 138px; } } .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: resolve(img/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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desc { margin: 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%; max-height: 80px; } } .featured { font-size: 16px; margin-right: -15px; img { height: 100px; width: 80px; float: left; margin: 15px 15px 0 0; } } } } .brands-layer-right { background: resolve(img/index/brands-layer.png) no-repeat 0 -287px; left: -325px; top: -83px; .layer-content { padding: 20px 35px 20px 20px; } }