Showing
23 changed files
with
1388 additions
and
1 deletions
static/sass/home/_banner-bottom.css
0 → 100644
static/sass/home/_banner-center.css
0 → 100644
static/sass/home/_banner-top.css
0 → 100644
| 1 | +.banner-top { | ||
| 2 | + position: relative; | ||
| 3 | + | ||
| 4 | + .swiper-pagination { | ||
| 5 | + position: absolute; | ||
| 6 | + left: 0; | ||
| 7 | + right: 0; | ||
| 8 | + bottom: 20px; | ||
| 9 | + text-align: center; | ||
| 10 | + z-index: 1; | ||
| 11 | + .pagination-inner { | ||
| 12 | + display: inline-block; | ||
| 13 | + span { | ||
| 14 | + display: inline-block; | ||
| 15 | + width: 14px; | ||
| 16 | + height: 14px; | ||
| 17 | + background: #fff; | ||
| 18 | + opacity: 0.5; | ||
| 19 | + margin: 0 9px; | ||
| 20 | + border-radius: 50%; | ||
| 21 | + &.swiper-pagination-bullet-active { | ||
| 22 | + background: #fff; | ||
| 23 | + opacity: 1; | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.banner-swiper { | ||
| 31 | + position: relative; | ||
| 32 | + height: 310.303px; | ||
| 33 | + overflow: hidden; | ||
| 34 | + | ||
| 35 | + ul { | ||
| 36 | + position: relative; | ||
| 37 | + height: 310.303px; | ||
| 38 | + | ||
| 39 | + li { | ||
| 40 | + float: left; | ||
| 41 | + width: 100%; | ||
| 42 | + height: 100%; | ||
| 43 | + img { | ||
| 44 | + width: 100%; | ||
| 45 | + height: 100%; | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | +} |
static/sass/home/_creative-life.css
0 → 100644
| 1 | +.creative-life { | ||
| 2 | + background: #fff; | ||
| 3 | + | ||
| 4 | + .banner { | ||
| 5 | + display: block; | ||
| 6 | + height: 400px; | ||
| 7 | + overflow: hidden; | ||
| 8 | + img { | ||
| 9 | + width: 100%; | ||
| 10 | + height: 100%; | ||
| 11 | + } | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + .classify-list { | ||
| 15 | + border-top: 1px solid #e0e0e0; | ||
| 16 | + border-bottom: 1px solid #e0e0e0; | ||
| 17 | + } | ||
| 18 | + | ||
| 19 | + .classify-list > li { | ||
| 20 | + float: left; | ||
| 21 | + width: 212px; | ||
| 22 | + height: 192px; | ||
| 23 | + border-top: 1px solid #e0e0e0; | ||
| 24 | + border-right: 1px solid #e0e0e0; | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + .classify-logo { | ||
| 28 | + width: 212px; | ||
| 29 | + height: 192px; | ||
| 30 | + | ||
| 31 | + img { | ||
| 32 | + display: block; | ||
| 33 | + width: 100%; | ||
| 34 | + height: 100%; | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + | ||
| 38 | + .classify-name { | ||
| 39 | + line-height: 52px; | ||
| 40 | + font-size: 26px; | ||
| 41 | + color: #000; | ||
| 42 | + text-align: center; | ||
| 43 | + text-decoration: none; | ||
| 44 | + border-bottom: none; | ||
| 45 | + overflow: hidden; | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + .classify:nth-child(3n) { | ||
| 49 | + border-right: 0; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | +} |
static/sass/home/_fine-brands.css
0 → 100644
| 1 | +.fine-brands { | ||
| 2 | + background: #fff; | ||
| 3 | + border-top: 1px solid #e0e0e0; | ||
| 4 | + | ||
| 5 | + a { | ||
| 6 | + display: block; | ||
| 7 | + text-decoration: none; | ||
| 8 | + } | ||
| 9 | + | ||
| 10 | + .brand { | ||
| 11 | + float: left; | ||
| 12 | + width: 158px; | ||
| 13 | + height: 174px; | ||
| 14 | + border-right: 1px solid #e0e0e0; | ||
| 15 | + border-bottom: 1px solid #e0e0e0; | ||
| 16 | + overflow: hidden; | ||
| 17 | + | ||
| 18 | + .brand-logo { | ||
| 19 | + display: table-cell; | ||
| 20 | + width: 158px; | ||
| 21 | + height: 130px; | ||
| 22 | + vertical-align: middle; | ||
| 23 | + | ||
| 24 | + img { | ||
| 25 | + display: block; | ||
| 26 | + max-width: 158px; | ||
| 27 | + max-height: 130px; | ||
| 28 | + vertical-align: middle; | ||
| 29 | + margin: 0 auto; | ||
| 30 | + } | ||
| 31 | + } | ||
| 32 | + | ||
| 33 | + .brand-name { | ||
| 34 | + line-height: 44px; | ||
| 35 | + font-size: 18px; | ||
| 36 | + color: #babac2; | ||
| 37 | + text-align: center; | ||
| 38 | + text-decoration: none; | ||
| 39 | + border-bottom: none; | ||
| 40 | + overflow: hidden; | ||
| 41 | + text-overflow: ellipsis; | ||
| 42 | + white-space: nowrap; | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + .brand:nth-child(4n) { | ||
| 48 | + border-right: none; | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + .more { | ||
| 52 | + .brand-logo { | ||
| 53 | + display: block; | ||
| 54 | + text-align: center; | ||
| 55 | + line-height: 150px; | ||
| 56 | + | ||
| 57 | + .iconfont { | ||
| 58 | + font-size: 48px; | ||
| 59 | + color: #333; | ||
| 60 | + } | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | +} |
static/sass/home/_floor-header.css
0 → 100644
| 1 | +.floor-header { | ||
| 2 | + margin: 29px 30px 0; | ||
| 3 | + background: #fff; | ||
| 4 | + border: 1px solid #e0e0e0; | ||
| 5 | + border-bottom: none; | ||
| 6 | + height: 70px; | ||
| 7 | + line-height: 70px; | ||
| 8 | + text-align: center; | ||
| 9 | + font-size: 30px; | ||
| 10 | + color: #b1b1b1; | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +.floor-header-more { | ||
| 14 | + position: relative; | ||
| 15 | + height: 99px; | ||
| 16 | + line-height: 99px; | ||
| 17 | + margin: 29px 0 0; | ||
| 18 | + background: #fff; | ||
| 19 | + border-top: 1px solid #e0e0e0; | ||
| 20 | + text-align: center; | ||
| 21 | + font-size: 32px; | ||
| 22 | + color: #444; | ||
| 23 | + | ||
| 24 | + .more-btn { | ||
| 25 | + position: absolute; | ||
| 26 | + right: 30px; | ||
| 27 | + top: 0; | ||
| 28 | + bottom: 0; | ||
| 29 | + color: #b0b0b0; | ||
| 30 | + font-size: 50px; | ||
| 31 | + } | ||
| 32 | +} |
static/sass/home/_goods-category.css
0 → 100644
| 1 | +.category-swiper { | ||
| 2 | + position: relative; | ||
| 3 | + height: 400px; | ||
| 4 | + overflow: hidden; | ||
| 5 | + ul { | ||
| 6 | + li { | ||
| 7 | + float: left; | ||
| 8 | + width: 100%; | ||
| 9 | + a, img { | ||
| 10 | + display: block; | ||
| 11 | + width: 100%; | ||
| 12 | + height: 100%; | ||
| 13 | + } | ||
| 14 | + } | ||
| 15 | + } | ||
| 16 | + .swiper-pagination { | ||
| 17 | + position: absolute; | ||
| 18 | + left: 0; | ||
| 19 | + right: 0; | ||
| 20 | + bottom: 20px; | ||
| 21 | + text-align: center; | ||
| 22 | + .pagination-inner { | ||
| 23 | + display: inline-block; | ||
| 24 | + span { | ||
| 25 | + display: inline-block; | ||
| 26 | + width: 14px; | ||
| 27 | + height: 14px; | ||
| 28 | + background: #fff; | ||
| 29 | + opacity: 0.5; | ||
| 30 | + margin: 0 (9px); | ||
| 31 | + border-radius: 50%; | ||
| 32 | + } | ||
| 33 | + span.swiper-active-switch { | ||
| 34 | + opacity: 1; | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + } | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +.goods-category { | ||
| 41 | + background: #fff; | ||
| 42 | +} | ||
| 43 | +.goods-category .category-list { | ||
| 44 | + height: 382px; | ||
| 45 | + border-bottom: 1px solid #e0e0e0; | ||
| 46 | + border-top: 1px solid #e0e0e0; | ||
| 47 | + overflow: hidden; | ||
| 48 | + li { | ||
| 49 | + float: left; | ||
| 50 | + width: 191px; | ||
| 51 | + height: 191px; | ||
| 52 | + border-left: 1px solid #e0e0e0; | ||
| 53 | + .first-show { | ||
| 54 | + display: none; | ||
| 55 | + } | ||
| 56 | + .img-box { | ||
| 57 | + height: 100%; | ||
| 58 | + line-height: 100%; | ||
| 59 | + text-align: center; | ||
| 60 | + img { | ||
| 61 | + width: 100%; | ||
| 62 | + height: 100%; | ||
| 63 | + vertical-align: middle; | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | + .category-name { | ||
| 67 | + line-height: 32px; | ||
| 68 | + font-size: 20px; | ||
| 69 | + color: #444; | ||
| 70 | + text-align: center; | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + li:first-child { | ||
| 74 | + width: 253px; | ||
| 75 | + height: 382px; | ||
| 76 | + border-left: none; | ||
| 77 | + .img-box { | ||
| 78 | + height: 100%; | ||
| 79 | + line-height: 100%; | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + .category-name { | ||
| 83 | + line-height: 40px; | ||
| 84 | + font-size: 22px; | ||
| 85 | + } | ||
| 86 | + } | ||
| 87 | + li:nth-child(4), li:nth-child(5) { | ||
| 88 | + border-top: 1px solid #e0e0e0; | ||
| 89 | + } | ||
| 90 | +} |
static/sass/home/_header-download.css
0 → 100644
| 1 | +.header-download { | ||
| 2 | + position: relative; | ||
| 3 | + height: 212px; | ||
| 4 | + padding: 48px 0 0; | ||
| 5 | + overflow: hidden; | ||
| 6 | + .download-bg { | ||
| 7 | + position: absolute; | ||
| 8 | + left: 0; | ||
| 9 | + top: 0; | ||
| 10 | + width: 100%; | ||
| 11 | + z-index: -1; | ||
| 12 | + } | ||
| 13 | + .yoho-logo { | ||
| 14 | + height: 57px; | ||
| 15 | + background: resolve("app-logo.png") no-repeat center center; | ||
| 16 | + background-size: auto 100%; | ||
| 17 | + } | ||
| 18 | + p { | ||
| 19 | + line-height: 48px; | ||
| 20 | + font-size: 28px; | ||
| 21 | + color: #fff; | ||
| 22 | + text-align: center; | ||
| 23 | + } | ||
| 24 | + .download-btn { | ||
| 25 | + display: block; | ||
| 26 | + margin: (18px) auto 0; | ||
| 27 | + width: 294px; | ||
| 28 | + height: 64px; | ||
| 29 | + line-height: 64px; | ||
| 30 | + border: (3px) solid #fff; | ||
| 31 | + font-size: 36px; | ||
| 32 | + text-align: center; | ||
| 33 | + color: #fff; | ||
| 34 | + } | ||
| 35 | + .close-btn { | ||
| 36 | + position: absolute; | ||
| 37 | + top: 17px; | ||
| 38 | + right: 13px; | ||
| 39 | + width: 50px; | ||
| 40 | + height: 50px; | ||
| 41 | + background: resolve("close-icon.png"); | ||
| 42 | + background-size: 100% 100%; | ||
| 43 | + } | ||
| 44 | +} |
static/sass/home/_home-header.css
0 → 100644
| 1 | +.home-header { | ||
| 2 | + height: 90px; | ||
| 3 | + line-height: 90px; | ||
| 4 | + background-image: linear-gradient(#323232, #414141); | ||
| 5 | + position: relative; | ||
| 6 | + .iconfont { | ||
| 7 | + color: #fff; | ||
| 8 | + } | ||
| 9 | + | ||
| 10 | + .nav-btn { | ||
| 11 | + position: absolute; | ||
| 12 | + left: 0; | ||
| 13 | + top: 0; | ||
| 14 | + bottom: 0; | ||
| 15 | + z-index: 2; | ||
| 16 | + padding: 0 32px; | ||
| 17 | + } | ||
| 18 | + | ||
| 19 | + .logo { | ||
| 20 | + display: block; | ||
| 21 | + margin: 0 auto; | ||
| 22 | + width: 208px; | ||
| 23 | + height: 87px; | ||
| 24 | + background: resolve("yohologo02.png") no-repeat center center; | ||
| 25 | + background-size: 100%; | ||
| 26 | + | ||
| 27 | + &.animate{ | ||
| 28 | + background: resolve("yohologo01.png") no-repeat center center; | ||
| 29 | + background-size: 100%; | ||
| 30 | + } | ||
| 31 | + } | ||
| 32 | + | ||
| 33 | + .search-btn { | ||
| 34 | + position: absolute; | ||
| 35 | + right: 0; | ||
| 36 | + top: 0; | ||
| 37 | + width: 90px; | ||
| 38 | + height: 90px; | ||
| 39 | + text-align: center; | ||
| 40 | + | ||
| 41 | + a { | ||
| 42 | + display: block; | ||
| 43 | + color: #fff; | ||
| 44 | + font-size: 20px; | ||
| 45 | + line-height: 90px; | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + | ||
| 49 | + .iconfont.highlight { | ||
| 50 | + background: rgba(200,200,200,.4); | ||
| 51 | + } | ||
| 52 | +} | ||
| 53 | + | ||
| 54 | +.girls-wrap .home-header { | ||
| 55 | + background: #FF88AE; | ||
| 56 | +} | ||
| 57 | + | ||
| 58 | +.kids-wrap .home-header { | ||
| 59 | + background: #7ad9f9; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +.lifestyle-wrap .home-header { | ||
| 63 | + background: #4f4138; | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +.kids-wrap .logo { | ||
| 67 | + font-style: italic; | ||
| 68 | + font-family: "helvetica","Arial","榛戜綋"; | ||
| 69 | + font-weight: bold; | ||
| 70 | + color: #fff; | ||
| 71 | +} |
static/sass/home/_hot-brands.css
0 → 100644
| 1 | +.hot-brands { | ||
| 2 | + border-bottom: 1px solid #e0e0e0; | ||
| 3 | + background: #fff; | ||
| 4 | + | ||
| 5 | + .floor-header { | ||
| 6 | + background: #f0f0f0; | ||
| 7 | + margin: 0; | ||
| 8 | + padding: 29px 30px 0; | ||
| 9 | + border: 0; | ||
| 10 | + | ||
| 11 | + h2 { | ||
| 12 | + border: 1px solid #e0e0e0; | ||
| 13 | + background: #fff; | ||
| 14 | + border-bottom: 0; | ||
| 15 | + } | ||
| 16 | + } | ||
| 17 | + | ||
| 18 | + a { | ||
| 19 | + display: block; | ||
| 20 | + text-decoration: none; | ||
| 21 | + height: 100%; | ||
| 22 | + } | ||
| 23 | + | ||
| 24 | + .brand { | ||
| 25 | + float: left; | ||
| 26 | + width: 158px; | ||
| 27 | + height: 174px; | ||
| 28 | + border-right: 1px solid #e0e0e0; | ||
| 29 | + border-top: 1px solid #e0e0e0; | ||
| 30 | + overflow: hidden; | ||
| 31 | + | ||
| 32 | + .brand-logo { | ||
| 33 | + display: table-cell; | ||
| 34 | + width: 158px; | ||
| 35 | + height: 128px; | ||
| 36 | + line-height: 128px; | ||
| 37 | + text-align: center; | ||
| 38 | + font-size: 0; | ||
| 39 | + vertical-align: middle; | ||
| 40 | + | ||
| 41 | + img { | ||
| 42 | + max-width: 100%; | ||
| 43 | + max-height: 100%; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + .brand-name { | ||
| 48 | + line-height: 44px; | ||
| 49 | + font-size: 18px; | ||
| 50 | + color: #babac2; | ||
| 51 | + text-align: center; | ||
| 52 | + text-decoration: none; | ||
| 53 | + border-bottom: none; | ||
| 54 | + overflow: hidden; | ||
| 55 | + text-overflow: ellipsis; | ||
| 56 | + -o-text-overflow: ellipsis; | ||
| 57 | + white-space: nowrap; | ||
| 58 | + } | ||
| 59 | + } | ||
| 60 | + | ||
| 61 | + .brand:nth-child(5n) { | ||
| 62 | + border-right: none; | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + .more { | ||
| 66 | + float: left; | ||
| 67 | + width: 317px; | ||
| 68 | + height: 174px; | ||
| 69 | + border-top: 1px solid #e0e0e0; | ||
| 70 | + | ||
| 71 | + | ||
| 72 | + a { | ||
| 73 | + display: block; | ||
| 74 | + width: 100%; | ||
| 75 | + height: 100%; | ||
| 76 | + background: resolve("more-brand.png") no-repeat; | ||
| 77 | + background-size: 100% 100%; | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | + | ||
| 83 | +.brands-swiper { | ||
| 84 | + background: #fff; | ||
| 85 | + width: 100%; | ||
| 86 | + height: 160px; | ||
| 87 | + padding-top: 20px; | ||
| 88 | + border-top: 1px solid #e0e0e0; | ||
| 89 | + overflow: hidden; | ||
| 90 | + | ||
| 91 | + .brands-list { | ||
| 92 | + position: relative; | ||
| 93 | + height: 160px; | ||
| 94 | + | ||
| 95 | + li { | ||
| 96 | + float: left; | ||
| 97 | + padding-left: 5%; | ||
| 98 | + width: 21.875%; | ||
| 99 | + height: 140px; | ||
| 100 | + | ||
| 101 | + a { | ||
| 102 | + position: relative; | ||
| 103 | + display: block; | ||
| 104 | + width: 100%; | ||
| 105 | + height: 100%; | ||
| 106 | + line-height: 140px; | ||
| 107 | + font-size: 0; | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + img { | ||
| 111 | + display: inline-block; | ||
| 112 | + max-width: 100%; | ||
| 113 | + max-height: 100%; | ||
| 114 | + vertical-align: middle; | ||
| 115 | + } | ||
| 116 | + | ||
| 117 | + .brands-title { | ||
| 118 | + position: absolute; | ||
| 119 | + left: 8px; | ||
| 120 | + right: 8px; | ||
| 121 | + bottom: 8px; | ||
| 122 | + height: 28px; | ||
| 123 | + line-height: 28px; | ||
| 124 | + text-align: center; | ||
| 125 | + font-size: 18px; | ||
| 126 | + color: #444; | ||
| 127 | + background: rgba(255, 255, 255, 0.5); | ||
| 128 | + overflow: hidden; | ||
| 129 | + text-overflow: ellipsis; | ||
| 130 | + -o-text-overflow: ellipsis; | ||
| 131 | + white-space: nowrap; | ||
| 132 | + } | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | +} |
static/sass/home/_hot-category.css
0 → 100644
| 1 | +.hot-category { | ||
| 2 | + margin: 30px 0 0; | ||
| 3 | + border-bottom: 1px solid #e0e0e0; | ||
| 4 | + | ||
| 5 | + .category-banner { | ||
| 6 | + height: 198px; | ||
| 7 | + img { | ||
| 8 | + display: block; | ||
| 9 | + width: 100%; | ||
| 10 | + height: 198px; | ||
| 11 | + } | ||
| 12 | + } | ||
| 13 | + .category-list { | ||
| 14 | + background: #fff; | ||
| 15 | + | ||
| 16 | + li { | ||
| 17 | + float: left; | ||
| 18 | + width: 158px; | ||
| 19 | + height: 174px; | ||
| 20 | + border-top: 1px solid #e0e0e0; | ||
| 21 | + border-left: 1px solid #e0e0e0; | ||
| 22 | + overflow: hidden; | ||
| 23 | + | ||
| 24 | + .img-box { | ||
| 25 | + width: 100%; | ||
| 26 | + height: 100%; | ||
| 27 | + line-height: 154px; | ||
| 28 | + text-align: center; | ||
| 29 | + overflow: hidden; | ||
| 30 | + font-size: 0; | ||
| 31 | + | ||
| 32 | + img { | ||
| 33 | + vertical-align: middle; | ||
| 34 | + width: 100%; | ||
| 35 | + height: 100%; | ||
| 36 | + max-width: 100%; | ||
| 37 | + max-height: 100%; | ||
| 38 | + } | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + .category-title { | ||
| 42 | + line-height: 22px; | ||
| 43 | + color: #aaa; | ||
| 44 | + font-size: 18px; | ||
| 45 | + text-align: center; | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | +} |
static/sass/home/_icons-enter.css
0 → 100644
| 1 | +.icons-wrapper { | ||
| 2 | + box-sizing: border-box; | ||
| 3 | + padding: 30px 0 16px; | ||
| 4 | + background: #fff; | ||
| 5 | + border-bottom: 1px solid #e0e0e0; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +.icons-item { | ||
| 9 | + float: left; | ||
| 10 | + margin-bottom: 10px; | ||
| 11 | + width: 25%; | ||
| 12 | + height: 146px; | ||
| 13 | + text-align: center; | ||
| 14 | +} | ||
| 15 | + | ||
| 16 | +.imagebar { | ||
| 17 | + display: block; | ||
| 18 | + margin: 0 auto; | ||
| 19 | + text-align: center; | ||
| 20 | + width: 98px; | ||
| 21 | + height: 98px; | ||
| 22 | + line-height: 98px; | ||
| 23 | + box-sizing: border-box; | ||
| 24 | + overflow: hidden; | ||
| 25 | + | ||
| 26 | + img { | ||
| 27 | + width: 100%; | ||
| 28 | + height: 100%; | ||
| 29 | + } | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +.linkbar { | ||
| 33 | + display: block; | ||
| 34 | + line-height: 44px; | ||
| 35 | + font-size: 24px; | ||
| 36 | + color: #444; | ||
| 37 | + | ||
| 38 | + &:visited, &:link, &:active, &:hover { | ||
| 39 | + color: #444; | ||
| 40 | + } | ||
| 41 | +} |
static/sass/home/_index.css
0 → 100644
| 1 | +@import "header-download"; | ||
| 2 | +@import "banner-top"; | ||
| 3 | +@import "banner-center"; | ||
| 4 | +@import "banner-bottom"; | ||
| 5 | +@import "side-nav"; | ||
| 6 | +@import "floor-header"; | ||
| 7 | +@import "hot-brands"; | ||
| 8 | +@import "fine-brands"; | ||
| 9 | +@import "creative-life"; | ||
| 10 | +@import "plus-star"; | ||
| 11 | +@import "maybe-like"; | ||
| 12 | +@import "icons-enter"; | ||
| 13 | +@import "trendsetter-collocation"; | ||
| 14 | +@import "trend-topics"; | ||
| 15 | +@import "goods-category"; | ||
| 16 | +@import "hot-brands"; | ||
| 17 | +@import "hot-category"; | ||
| 18 | +@import "home-header"; | ||
| 19 | +@import "thumb-row"; | ||
| 20 | + | ||
| 21 | +.mobile-container{ | ||
| 22 | + width: 100%; | ||
| 23 | + overflow: hidden; | ||
| 24 | +} | ||
| 25 | +.mobile-wrap { | ||
| 26 | + position: relative; | ||
| 27 | + z-index: 2; | ||
| 28 | + background: #f0f0f0; | ||
| 29 | + transition: transform .3s; | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +.mobile-wrap.menu-open { | ||
| 33 | + transform: translateX(540px); | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | + | ||
| 37 | +.overlay { | ||
| 38 | + display: none; | ||
| 39 | + position: absolute; | ||
| 40 | + top: 0; | ||
| 41 | + left: 0; | ||
| 42 | + right: 0; | ||
| 43 | + bottom: 0; | ||
| 44 | + background: #000; | ||
| 45 | + z-index: 4; | ||
| 46 | + transition: opacity 1s; | ||
| 47 | +} | ||
| 48 | + | ||
| 49 | +.overlay.show { | ||
| 50 | + display: block; | ||
| 51 | + opacity: 0.3; | ||
| 52 | +} |
static/sass/home/_maybe-like.css
0 → 100644
| 1 | +.maybe-like { | ||
| 2 | + position: relative; | ||
| 3 | + background: #fff; | ||
| 4 | + padding-left: 15px; | ||
| 5 | + border-top: 1px solid #ccc; | ||
| 6 | + margin-top: 30px; | ||
| 7 | + | ||
| 8 | + .title { | ||
| 9 | + height: 104px; | ||
| 10 | + font-size: 38px; | ||
| 11 | + line-height: 104px; | ||
| 12 | + text-align: center; | ||
| 13 | + color: #dadada; | ||
| 14 | + } | ||
| 15 | + .icon { | ||
| 16 | + display: inline-block; | ||
| 17 | + height: 31px; | ||
| 18 | + width: 31px; | ||
| 19 | + background: resolve("up-icon.png") no-repeat; | ||
| 20 | + background-size: 100% 100%; | ||
| 21 | + } | ||
| 22 | + | ||
| 23 | + .maybe-like-nav { | ||
| 24 | + width: 100%; | ||
| 25 | + height: 60px; | ||
| 26 | + padding: 10px 0; | ||
| 27 | + background-color: #fff; | ||
| 28 | + &:before { | ||
| 29 | + content: ''; | ||
| 30 | + position: absolute; | ||
| 31 | + border-top: 1px solid #ccc; | ||
| 32 | + left: 0; | ||
| 33 | + top: 80px; | ||
| 34 | + width: 640px; | ||
| 35 | + height: 0; | ||
| 36 | + } | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + .maybe-like-nav-item { | ||
| 40 | + box-sizing: border-box; | ||
| 41 | + float: left; | ||
| 42 | + width: 50%; | ||
| 43 | + height: 60px; | ||
| 44 | + line-height: 60px; | ||
| 45 | + text-align: center; | ||
| 46 | + color: #ccc; | ||
| 47 | + border-right: 1px solid #ccc; | ||
| 48 | + | ||
| 49 | + &.focus { | ||
| 50 | + color: #000; | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | +} | ||
| 54 | + | ||
| 55 | +.load-more-img { | ||
| 56 | + padding-left: 0; | ||
| 57 | + height: 200px; | ||
| 58 | + border-top: 1px solid #ccc; | ||
| 59 | + overflow: hidden; | ||
| 60 | + img { | ||
| 61 | + display: block; | ||
| 62 | + width: 100%; | ||
| 63 | + height: 100%; | ||
| 64 | + } | ||
| 65 | +} |
static/sass/home/_plus-star.css
0 → 100644
static/sass/home/_search-input.css
0 → 100644
| 1 | +.search-input{ | ||
| 2 | + position: relative; | ||
| 3 | + padding:13px 20px; | ||
| 4 | + input{ | ||
| 5 | + display: block; | ||
| 6 | + width: 547px; | ||
| 7 | + height: 60px; | ||
| 8 | + line-height: 60px; | ||
| 9 | + border: none; | ||
| 10 | + padding: 0 0 0 53px; | ||
| 11 | + margin: 0; | ||
| 12 | + outline: none; | ||
| 13 | + font-family: helvetica,Arial,"黑体"; | ||
| 14 | + border-radius: 50px; | ||
| 15 | + font-size: 30px; | ||
| 16 | + } | ||
| 17 | + .search-icon{ | ||
| 18 | + position: absolute; | ||
| 19 | + top: 0; | ||
| 20 | + bottom: 0; | ||
| 21 | + color: #999; | ||
| 22 | + line-height: 86px; | ||
| 23 | + left: 43px; | ||
| 24 | + } | ||
| 25 | +} |
static/sass/home/_side-nav.css
0 → 100644
| 1 | +.side-nav { | ||
| 2 | + display: none; | ||
| 3 | + background: #fff; | ||
| 4 | + position: fixed; | ||
| 5 | + top: 0; | ||
| 6 | + bottom: 0; | ||
| 7 | + left: 0; | ||
| 8 | + right: 100px; | ||
| 9 | + width: 540px; | ||
| 10 | + background: #f0f0f0; | ||
| 11 | + z-index: 4; | ||
| 12 | + overflow: hidden; | ||
| 13 | + overflow-y: auto; | ||
| 14 | + transition: all .3s; | ||
| 15 | + | ||
| 16 | + > ul { | ||
| 17 | + margin-bottom: 20px; | ||
| 18 | + background: #fff; | ||
| 19 | + border-top: 1px solid #e0e0e0; | ||
| 20 | + border-bottom: 1px solid #e0e0e0; | ||
| 21 | + } | ||
| 22 | + | ||
| 23 | + li { | ||
| 24 | + position: relative; | ||
| 25 | + height: 80px; | ||
| 26 | + line-height: 80px; | ||
| 27 | + background: #fff; | ||
| 28 | + | ||
| 29 | + &:after { | ||
| 30 | + content: ''; | ||
| 31 | + position: absolute; | ||
| 32 | + right: 0; | ||
| 33 | + bottom: 0; | ||
| 34 | + width: 430px; | ||
| 35 | + height: 0; | ||
| 36 | + border-top: 1px solid #e0e0e0; | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + &:last-child { | ||
| 40 | + &:after { | ||
| 41 | + content: none; | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + a { | ||
| 46 | + display: block; | ||
| 47 | + height: 100%; | ||
| 48 | + padding-left: 110px; | ||
| 49 | + color: #444; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + em { | ||
| 53 | + font-weight: bold; | ||
| 54 | + font-size: 26px; | ||
| 55 | + } | ||
| 56 | + | ||
| 57 | + .title { | ||
| 58 | + display: inline-block; | ||
| 59 | + font-size: 36px; | ||
| 60 | + vertical-align: bottom; | ||
| 61 | + padding-left: 20px; | ||
| 62 | + /*此处字体小于 12px， 先扩大，再scale缩小*/ | ||
| 63 | + transform: scale(0.5); | ||
| 64 | + transform-origin: 0 50% 0; | ||
| 65 | + } | ||
| 66 | + | ||
| 67 | + .nav-icon, .nav-img { | ||
| 68 | + position: absolute; | ||
| 69 | + width: 38px; | ||
| 70 | + height: 38px; | ||
| 71 | + top: 50%; | ||
| 72 | + margin-top: -19px; | ||
| 73 | + left: 35px; | ||
| 74 | + background: no-repeat left center; | ||
| 75 | + background-size: 100% 100%; | ||
| 76 | + } | ||
| 77 | + | ||
| 78 | + .enter-subnav { | ||
| 79 | + position: absolute; | ||
| 80 | + right: 30px; | ||
| 81 | + top: 0; | ||
| 82 | + bottom: 0; | ||
| 83 | + font-size: 36px; | ||
| 84 | + color: #b0b0b0; | ||
| 85 | + font-weight: lighter; | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + &.highlight { | ||
| 89 | + background: #eee; | ||
| 90 | + } | ||
| 91 | + | ||
| 92 | + } | ||
| 93 | + | ||
| 94 | + .first { | ||
| 95 | + | ||
| 96 | + li { | ||
| 97 | + height: 100px; | ||
| 98 | + line-height: 100px; | ||
| 99 | + border-bottom: 1px solid #e0e0e0; | ||
| 100 | + | ||
| 101 | + &:last-child { | ||
| 102 | + border-bottom: none; | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + &:after { | ||
| 106 | + content: none; | ||
| 107 | + } | ||
| 108 | + | ||
| 109 | + em { | ||
| 110 | + font-size: 36px; | ||
| 111 | + } | ||
| 112 | + | ||
| 113 | + .nav-img, .nav-icon { | ||
| 114 | + width: 48px; | ||
| 115 | + height: 48px; | ||
| 116 | + margin-top: -24px; | ||
| 117 | + left: 30px; | ||
| 118 | + } | ||
| 119 | + | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + .sub-nav { | ||
| 123 | + li { | ||
| 124 | + border-bottom: 1px solid #e0e0e0; | ||
| 125 | + } | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + | ||
| 129 | + li.boys { | ||
| 130 | + i { | ||
| 131 | + background: resolve("side-nav/boys.png") no-repeat left center; | ||
| 132 | + background-size: 100% 100%; | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | + | ||
| 136 | + li.girls { | ||
| 137 | + i { | ||
| 138 | + background: resolve("side-nav/girls.png") no-repeat left center; | ||
| 139 | + background-size: 100% 100%; | ||
| 140 | + } | ||
| 141 | + } | ||
| 142 | + | ||
| 143 | + li.kids { | ||
| 144 | + i { | ||
| 145 | + background: resolve("side-nav/kids.png") no-repeat left center; | ||
| 146 | + background-size: 100% 100%; | ||
| 147 | + } | ||
| 148 | + } | ||
| 149 | + | ||
| 150 | + li.life { | ||
| 151 | + i { | ||
| 152 | + background: resolve("side-nav/life.png") no-repeat left center; | ||
| 153 | + background-size: 100% 100%; | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + | ||
| 157 | + li.guang, li.trendfinder { | ||
| 158 | + .nav-icon { | ||
| 159 | + background: resolve("side-nav/guang.png") no-repeat left center; | ||
| 160 | + background-size: 100% 100%; | ||
| 161 | + } | ||
| 162 | + } | ||
| 163 | +} | ||
| 164 | + | ||
| 165 | +.side-nav.on { | ||
| 166 | + display: block; | ||
| 167 | +} | ||
| 168 | + | ||
| 169 | +.sub-nav { | ||
| 170 | + display: none; | ||
| 171 | + position: fixed; | ||
| 172 | + bottom: 0; | ||
| 173 | + top: 0; | ||
| 174 | + left: 0; | ||
| 175 | + width: 540px; | ||
| 176 | + background: #fff !important; | ||
| 177 | + overflow: hidden; | ||
| 178 | + | ||
| 179 | + transform: translateX(540px); | ||
| 180 | + transition: transform 0.3s | ||
| 181 | + | ||
| 182 | + li { | ||
| 183 | + height: 80px !important; | ||
| 184 | + line-height: 80px !important; | ||
| 185 | + border: none; | ||
| 186 | + border-bottom: 1px solid #e0e0e0; | ||
| 187 | + | ||
| 188 | + &:after { | ||
| 189 | + content: none; | ||
| 190 | + } | ||
| 191 | + | ||
| 192 | + a { | ||
| 193 | + position: relative; | ||
| 194 | + display: block; | ||
| 195 | + margin: 0 0 0 (30px); | ||
| 196 | + padding-left: 10px; | ||
| 197 | + font-size: 36px; | ||
| 198 | + z-index: 2; | ||
| 199 | + } | ||
| 200 | + | ||
| 201 | + .nav-point { | ||
| 202 | + position: absolute; | ||
| 203 | + left: 0px; | ||
| 204 | + font-size: 16px; | ||
| 205 | + color: #f0f0f0; | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + &.highlight { | ||
| 209 | + background: #eee; | ||
| 210 | + } | ||
| 211 | + | ||
| 212 | + em { | ||
| 213 | + font-weight: normal; | ||
| 214 | + font-size: 30px !important; | ||
| 215 | + } | ||
| 216 | + } | ||
| 217 | + | ||
| 218 | + li:hover, li.current { | ||
| 219 | + .nav-point { | ||
| 220 | + color: #3e3e3e; | ||
| 221 | + } | ||
| 222 | + } | ||
| 223 | + | ||
| 224 | + li:first-child { | ||
| 225 | + height: 90px !important; | ||
| 226 | + line-height: 90px !important; | ||
| 227 | + background: #3e3e3e; | ||
| 228 | + | ||
| 229 | + a { | ||
| 230 | + color: #fff; | ||
| 231 | + border-bottom: none; | ||
| 232 | + padding-left: 70px; | ||
| 233 | + } | ||
| 234 | + | ||
| 235 | + .nav-back { | ||
| 236 | + position: absolute; | ||
| 237 | + left: 0; | ||
| 238 | + } | ||
| 239 | + } | ||
| 240 | +} | ||
| 241 | + | ||
| 242 | +.sub-nav.show { | ||
| 243 | + display: block; | ||
| 244 | + z-index: 1; | ||
| 245 | + transform: translateX(0); | ||
| 246 | + transition: transform 0.3s; | ||
| 247 | +} |
static/sass/home/_thumb-row.css
0 → 100644
| 1 | +#thumb-row { | ||
| 2 | + background-color: #f0f0f0; | ||
| 3 | + text-align: center; | ||
| 4 | + padding: 32px 0 0; | ||
| 5 | + .thumb-row-box { | ||
| 6 | + display: inline-block; | ||
| 7 | + width: 275px; | ||
| 8 | + height: 160px; | ||
| 9 | + border-radius: 4px; | ||
| 10 | + background-size: 100%; | ||
| 11 | + background-repeat: no-repeat; | ||
| 12 | + background-position: center; | ||
| 13 | + margin: 0 14.4px; | ||
| 14 | + } | ||
| 15 | +} |
static/sass/home/_trend-topics.css
0 → 100644
| 1 | +.trend-topic-wrapper { | ||
| 2 | + background: #fff; | ||
| 3 | +} | ||
| 4 | + | ||
| 5 | +.trend-topic-content { | ||
| 6 | + position: relative; | ||
| 7 | + width: 100%; | ||
| 8 | + border-bottom: 1px solid #e0e0e0; | ||
| 9 | + | ||
| 10 | + .swiper-pagination { | ||
| 11 | + position: absolute; | ||
| 12 | + left: 0; | ||
| 13 | + right: 0; | ||
| 14 | + bottom: 22px; | ||
| 15 | + text-align: center; | ||
| 16 | + z-index: 0; | ||
| 17 | + | ||
| 18 | + .pagination-inner { | ||
| 19 | + display: inline-block; | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + span { | ||
| 23 | + float: left; | ||
| 24 | + width: 16px; | ||
| 25 | + height: 16px; | ||
| 26 | + margin: 0 8px; | ||
| 27 | + background: #f0f0f0; | ||
| 28 | + border-radius: 50%; | ||
| 29 | + opacity: 1; | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + span.swiper-pagination-bullet-active { | ||
| 33 | + background: #b0b0b0; | ||
| 34 | + } | ||
| 35 | + } | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +.trend-topic-swiper { | ||
| 39 | + height: 534px; | ||
| 40 | + overflow: hidden; | ||
| 41 | + | ||
| 42 | + ul { | ||
| 43 | + position: relative; | ||
| 44 | + | ||
| 45 | + li { | ||
| 46 | + float: left; | ||
| 47 | + height: 534px; | ||
| 48 | + | ||
| 49 | + .img-box { | ||
| 50 | + margin: 0 auto; | ||
| 51 | + width: 580px; | ||
| 52 | + height: 360px; | ||
| 53 | + line-height: 360px; | ||
| 54 | + text-align: center; | ||
| 55 | + | ||
| 56 | + img { | ||
| 57 | + vertical-align: middle; | ||
| 58 | + width: 100%; | ||
| 59 | + height: 100%; | ||
| 60 | + } | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + .item-content { | ||
| 64 | + margin: 20px 30px 0; | ||
| 65 | + | ||
| 66 | + .title { | ||
| 67 | + line-height: 52px; | ||
| 68 | + font-size: 30px; | ||
| 69 | + color: #000; | ||
| 70 | + overflow: hidden; | ||
| 71 | + text-overflow: ellipsis; | ||
| 72 | + -o-text-overflow: ellipsis; | ||
| 73 | + white-space: nowrap; | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .time { | ||
| 77 | + margin: 16px 0 0; | ||
| 78 | + line-height: 24px; | ||
| 79 | + color: #afafaf; | ||
| 80 | + font-size: 18px; | ||
| 81 | + | ||
| 82 | + .time-icon { | ||
| 83 | + margin-right: 8px; | ||
| 84 | + font-size: 14px; | ||
| 85 | + } | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | +} |
static/sass/home/_trend-tops.css
0 → 100644
| 1 | +.trend-tops-wrapper { | ||
| 2 | + width: 100%; | ||
| 3 | + height: 645px; | ||
| 4 | +} | ||
| 5 | + | ||
| 6 | +.trend-tops-header { | ||
| 7 | + position: relative; | ||
| 8 | + width: 100%; | ||
| 9 | + .trend-tops-title { | ||
| 10 | + width: 100%; | ||
| 11 | + height: 100px; | ||
| 12 | + line-height: 100px; | ||
| 13 | + text-align: center; | ||
| 14 | + font-size: 34px; | ||
| 15 | + color: #747474; | ||
| 16 | + } | ||
| 17 | + .more { | ||
| 18 | + position: absolute; | ||
| 19 | + right: 24px; | ||
| 20 | + top: 20px; | ||
| 21 | + } | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +.trend-tops-content { | ||
| 25 | + width: 100%; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +.main-tops-show { | ||
| 29 | + display: block; | ||
| 30 | + box-sizing: border-box; | ||
| 31 | + width: 100%; | ||
| 32 | + height: 404px; | ||
| 33 | + border: 1px solid #000; | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +.tops-list { | ||
| 37 | + width: 100%; | ||
| 38 | + height: 385px; | ||
| 39 | + .tops-left { | ||
| 40 | + box-sizing: border-box; | ||
| 41 | + float: left; | ||
| 42 | + width: 252px; | ||
| 43 | + height: 100%; | ||
| 44 | + border-right: 1px solid #000; | ||
| 45 | + } | ||
| 46 | + .tops-right { | ||
| 47 | + float: left; | ||
| 48 | + width: 385px; | ||
| 49 | + height: 100%; | ||
| 50 | + } | ||
| 51 | +} | ||
| 52 | + | ||
| 53 | +.tops-right-toslist { | ||
| 54 | + width: 100%; | ||
| 55 | + .tops-right-tositem { | ||
| 56 | + box-sizing: border-box; | ||
| 57 | + float: left; | ||
| 58 | + width: 50%; | ||
| 59 | + height: 196px; | ||
| 60 | + border: 1px solid #000; | ||
| 61 | + } | ||
| 62 | +} | ||
| 63 | + | ||
| 64 | +.recommed-title { | ||
| 65 | + margin-top: 55px; | ||
| 66 | + width: 100%; | ||
| 67 | + height: 35px; | ||
| 68 | + line-height: 35px; | ||
| 69 | + text-align: center; | ||
| 70 | + font-size: 35px; | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +.recommed-imgwrapper { | ||
| 74 | + display: block; | ||
| 75 | + margin-top: 24px; | ||
| 76 | + width: 100%; | ||
| 77 | + height: 184px; | ||
| 78 | + text-align: center; | ||
| 79 | + img { | ||
| 80 | + width: 169px; | ||
| 81 | + height: 100%; | ||
| 82 | + border: 1px solid #000; | ||
| 83 | + } | ||
| 84 | +} | ||
| 85 | + | ||
| 86 | +.recommed-productname { | ||
| 87 | + display: block; | ||
| 88 | + margin-top: 20px; | ||
| 89 | + width: 100%; | ||
| 90 | + height: 20px; | ||
| 91 | + line-height: (20px) auto; | ||
| 92 | + text-align: center; | ||
| 93 | +} | ||
| 94 | + | ||
| 95 | +.tops-right-imgwrapper { | ||
| 96 | + display: block; | ||
| 97 | + width: 100%; | ||
| 98 | + height: 145px; | ||
| 99 | + text-align: center; | ||
| 100 | + img { | ||
| 101 | + width: 130px; | ||
| 102 | + height: 100%; | ||
| 103 | + border: 1px solid #000; | ||
| 104 | + } | ||
| 105 | +} | ||
| 106 | + | ||
| 107 | +.tops-right-productname { | ||
| 108 | + display: block; | ||
| 109 | + width: 100%; | ||
| 110 | + height: 45px; | ||
| 111 | + line-height: 45px; | ||
| 112 | + text-align: center; | ||
| 113 | +} |
| 1 | +.trend-coll-wrapper { | ||
| 2 | + background: #fff; | ||
| 3 | + height: 645px; | ||
| 4 | + border-bottom: 1px solid #e0e0e0; | ||
| 5 | +} | ||
| 6 | + | ||
| 7 | +.trend-coll-header { | ||
| 8 | + position: relative; | ||
| 9 | + widows: 100%; | ||
| 10 | + | ||
| 11 | + .trend-coll-title { | ||
| 12 | + width: 100%; | ||
| 13 | + height: 100px; | ||
| 14 | + line-height: 100px; | ||
| 15 | + text-align: center; | ||
| 16 | + font-size: 34px; | ||
| 17 | + color: #747474; | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + .more { | ||
| 21 | + position: absolute; | ||
| 22 | + right: 24px; | ||
| 23 | + top: 20px; | ||
| 24 | + } | ||
| 25 | +} | ||
| 26 | + | ||
| 27 | +.trend-coll-content { | ||
| 28 | + padding: 0 0 0 15px; | ||
| 29 | + | ||
| 30 | + .lspan { | ||
| 31 | + float: left; | ||
| 32 | + margin: 0 15px; | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .rspan { | ||
| 36 | + float: left; | ||
| 37 | + margin: 0 15px; | ||
| 38 | + } | ||
| 39 | +} | ||
| 40 | + | ||
| 41 | +.lspanimg { | ||
| 42 | + display: block; | ||
| 43 | + float: right; | ||
| 44 | + width: 275px; | ||
| 45 | + height: 275px; | ||
| 46 | +} | ||
| 47 | + | ||
| 48 | +.rspanimg { | ||
| 49 | + display: block; | ||
| 50 | + float: right; | ||
| 51 | + width: 275px; | ||
| 52 | + height: 275px; | ||
| 53 | +} | ||
| 54 | + | ||
| 55 | +.trend-coll-tail { | ||
| 56 | + box-sizing: border-box; | ||
| 57 | + width: 100%; | ||
| 58 | + height: 267px; | ||
| 59 | + clear: both; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +.recommend-title { | ||
| 63 | + widows: 100%; | ||
| 64 | + height: 100px; | ||
| 65 | + line-height: 100px; | ||
| 66 | + text-align: center; | ||
| 67 | + font-size: 34px; | ||
| 68 | +} | ||
| 69 | + | ||
| 70 | +.recommend-swiper { | ||
| 71 | + width: 100%; | ||
| 72 | + height: 140px; | ||
| 73 | + overflow: hidden; | ||
| 74 | +} | ||
| 75 | + | ||
| 76 | +.recommend-list { | ||
| 77 | + position: relative; | ||
| 78 | + height: 100%; | ||
| 79 | +} | ||
| 80 | + | ||
| 81 | +.recommend-list .recommend-item { | ||
| 82 | + float: left; | ||
| 83 | + padding-left: 5%; | ||
| 84 | + width: 21.875%; | ||
| 85 | + height: 140px; | ||
| 86 | + | ||
| 87 | + a { | ||
| 88 | + display: block; | ||
| 89 | + width: 100%; | ||
| 90 | + height: 100%; | ||
| 91 | + | ||
| 92 | + img { | ||
| 93 | + width: 100%; | ||
| 94 | + height: 100%; | ||
| 95 | + } | ||
| 96 | + } | ||
| 97 | +} |
static/sass/home/_two-column-goods.css
0 → 100644
| 1 | +.two-column-goods { | ||
| 2 | + margin: 30px 0 0; | ||
| 3 | + padding: 36px 0 0; | ||
| 4 | + background: #fff; | ||
| 5 | + border-top: 1px solid #e0e0e0; | ||
| 6 | + | ||
| 7 | + .column-nav { | ||
| 8 | + padding: 0 0 30px; | ||
| 9 | + line-height: 32px; | ||
| 10 | + font-size: 28px; | ||
| 11 | + border-bottom: 1px solid #f1f1f1; | ||
| 12 | + | ||
| 13 | + li { | ||
| 14 | + float: left; | ||
| 15 | + width: 319px; | ||
| 16 | + text-align: center; | ||
| 17 | + color: #aaa; | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + li.current { | ||
| 21 | + color: #000; | ||
| 22 | + } | ||
| 23 | + | ||
| 24 | + li:first-child { | ||
| 25 | + border-right: 1px solid #e6e6e6; | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + .goods-list { | ||
| 30 | + padding-left: 15px; | ||
| 31 | + } | ||
| 32 | +} |
| @@ -182,8 +182,8 @@ a { | @@ -182,8 +182,8 @@ a { | ||
| 182 | @import "index/index"; | 182 | @import "index/index"; |
| 183 | @import "passport/index"; | 183 | @import "passport/index"; |
| 184 | @import "guang/index"; | 184 | @import "guang/index"; |
| 185 | -/* | ||
| 186 | @import "home/index"; | 185 | @import "home/index"; |
| 186 | +/* | ||
| 187 | @import "category/index"; | 187 | @import "category/index"; |
| 188 | @import "me/index"; | 188 | @import "me/index"; |
| 189 | 189 |
-
Please register or login to post a comment