From 6fb7036bb0e0ecb72111d8d21ba2dcbf81cb6627 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@qq.com>
Date: Tue, 27 Oct 2015 17:21:16 +0800
Subject: [PATCH] 品牌列表页面美化
---
static/js/category/brand.js | 2 +-
static/sass/category/_brand.scss | 22 +++++++++++++++++-----
static/sass/home/_banner-top.scss | 1 +
static/sass/layout/_header.scss | 22 +++++++++++-----------
template/m.yohobuy.com/actions/category/brand/index.phtml | 6 ++----
5 files changed, 32 insertions(+), 21 deletions(-)
diff --git a/static/js/category/brand.js b/static/js/category/brand.js
index 7a4bd01..36bc550 100644
--- a/static/js/category/brand.js
+++ b/static/js/category/brand.js
@@ -14,7 +14,7 @@ swiper = new Swiper('.swiper-container', {
lazyLoading: true,
loop: true,
autoplay: 3000,
- pagination: '.swiper-pagination'
+ pagination: '.swiper-pagination .pagination-inner'
});
lazyLoad($('img.lazy'));
diff --git a/static/sass/category/_brand.scss b/static/sass/category/_brand.scss
index 1d55e4e..d36cdf9 100644
--- a/static/sass/category/_brand.scss
+++ b/static/sass/category/_brand.scss
@@ -61,7 +61,7 @@
background: #eeeeee;
color: #999999;
- font-weight: bold;
+ // font-weight: bold;
position: relative;
h2 {
// width: 100%;
@@ -87,10 +87,22 @@
border-bottom: 1px solid #f3f3f3;
border-top: 1px solid #f9f9f9;
i {
- position: relative;
- top: 1px;
- color: #ff0000;
- padding-left: 32rem / $pxConvertRem;
+ display: inline-block;
+ margin-left: 24rem / $pxConvertRem;
+ width: 40rem / $pxConvertRem;
+ height: 40rem / $pxConvertRem;
+ text-align: center;
+ vertical-align: middle;
+ font-size: 28rem / $pxConvertRem;
+ line-height: 40rem / $pxConvertRem;
+ color: #fff;
+ border-radius: 50%;
+ }
+ .icon-hot {
+ background: #ff0000;
+ }
+ .icon-new {
+ background: #86c048;
}
}
}
diff --git a/static/sass/home/_banner-top.scss b/static/sass/home/_banner-top.scss
index 1d675c8..7e83ee9 100644
--- a/static/sass/home/_banner-top.scss
+++ b/static/sass/home/_banner-top.scss
@@ -6,6 +6,7 @@
right: 0;
bottom: 20rem / $pxConvertRem;
text-align: center;
+ z-index: 1;
.pagination-inner {
display: inline-block;
span {
diff --git a/static/sass/layout/_header.scss b/static/sass/layout/_header.scss
index efa51fc..0e94ffa 100644
--- a/static/sass/layout/_header.scss
+++ b/static/sass/layout/_header.scss
@@ -4,15 +4,15 @@
color: #fff;
width: 100%;
overflow: hidden;
- height: 44px;
- line-height: 44px;
+ height: 88rem / $pxConvertRem;
+ line-height: 88rem / $pxConvertRem;
.nav-back {
position: absolute;
- left: 17px;
- top: 14px;
- width: 9px;
- height: 16px;
+ left: 34rem / $pxConvertRem;
+ top: 28rem / $pxConvertRem;
+ width: 18rem / $pxConvertRem;
+ height: 32rem / $pxConvertRem;
background: image-url('layout/back.png') no-repeat;
background-size: 100% 100%;
outline: none;
@@ -20,8 +20,8 @@
.nav-home {
position: absolute;
- top: 14px;
- right: 17px;
+ top: 28rem / $pxConvertRem;
+ right: 34rem / $pxConvertRem;
width: 20px;
height: 20px;
background: image-url('layout/home.png') no-repeat;
@@ -31,10 +31,10 @@
.nav-title {
position: absolute;
- margin-left: 26px;
- margin-right: 32px;
+ margin-left: 52rem / $pxConvertRem;
+ margin-right: 64rem / $pxConvertRem;
height: 100%;
- font-size: 18px;
+ font-size: 36rem / $pxConvertRem;
color: #fff;
font-weight: bold;
top: 0;
diff --git a/template/m.yohobuy.com/actions/category/brand/index.phtml b/template/m.yohobuy.com/actions/category/brand/index.phtml
index 44e12cd..3c3a85a 100644
--- a/template/m.yohobuy.com/actions/category/brand/index.phtml
+++ b/template/m.yohobuy.com/actions/category/brand/index.phtml
@@ -39,13 +39,11 @@
{{# list}}
<p>
<a href="{{url}}">{{name}}
- <i class="icon-hot">
- </i>
{{# isHot}}
- <i class="icon-hot"></i>
+ <i class="icon-hot">H</i>
{{/ isHot}}
{{# isNew}}
- <i class="icon-new"></i>
+ <i class="icon-new">N</i>
{{/ isNew}}
</a>
</p>
--
libgit2 0.24.0