Showing
6 changed files
with
294 additions
and
291 deletions
public/scss/channel/_home-main.css
0 → 100644
| 1 | +.mobile-container { | ||
| 2 | + margin-left: auto; | ||
| 3 | + margin-right: auto; | ||
| 4 | + width: 100%; | ||
| 5 | + max-width: 640px; | ||
| 6 | + overflow: hidden; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.mobile-wrap { | ||
| 10 | + position: relative; | ||
| 11 | + z-index: 2; | ||
| 12 | + background: #f0f0f0; | ||
| 13 | + transition: transform 0.3s; | ||
| 14 | + | ||
| 15 | + .creative-life .classify-name { | ||
| 16 | + display: none; | ||
| 17 | + } | ||
| 18 | + | ||
| 19 | + .banner-top .banner-swiper:first-child { | ||
| 20 | + height: 312px; | ||
| 21 | + } | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +.mobile-wrap.menu-open { | ||
| 25 | + transform: translateX(540px); | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +.overlay { | ||
| 29 | + display: none; | ||
| 30 | + position: absolute; | ||
| 31 | + top: 0; | ||
| 32 | + left: 0; | ||
| 33 | + right: 0; | ||
| 34 | + bottom: 0; | ||
| 35 | + background: #000; | ||
| 36 | + z-index: 4; | ||
| 37 | + transition: opacity 1s; | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +.overlay.show { | ||
| 41 | + display: block; | ||
| 42 | + opacity: 0.3; | ||
| 43 | +} |
| @@ -33,47 +33,5 @@ | @@ -33,47 +33,5 @@ | ||
| 33 | @import "shop-recommand"; | 33 | @import "shop-recommand"; |
| 34 | @import "sale-floor"; | 34 | @import "sale-floor"; |
| 35 | @import "divide-image"; | 35 | @import "divide-image"; |
| 36 | +@import "home-main"; | ||
| 36 | 37 | ||
| 37 | -.mobile-container { | ||
| 38 | - margin-left: auto; | ||
| 39 | - margin-right: auto; | ||
| 40 | - width: 100%; | ||
| 41 | - max-width: 640px; | ||
| 42 | - overflow: hidden; | ||
| 43 | -} | ||
| 44 | - | ||
| 45 | -.mobile-wrap { | ||
| 46 | - position: relative; | ||
| 47 | - z-index: 2; | ||
| 48 | - background: #f0f0f0; | ||
| 49 | - transition: transform 0.3s; | ||
| 50 | - | ||
| 51 | - .creative-life .classify-name { | ||
| 52 | - display: none; | ||
| 53 | - } | ||
| 54 | - | ||
| 55 | - .banner-top .banner-swiper:first-child { | ||
| 56 | - height: 312px; | ||
| 57 | - } | ||
| 58 | -} | ||
| 59 | - | ||
| 60 | -.mobile-wrap.menu-open { | ||
| 61 | - transform: translateX(540px); | ||
| 62 | -} | ||
| 63 | - | ||
| 64 | -.overlay { | ||
| 65 | - display: none; | ||
| 66 | - position: absolute; | ||
| 67 | - top: 0; | ||
| 68 | - left: 0; | ||
| 69 | - right: 0; | ||
| 70 | - bottom: 0; | ||
| 71 | - background: #000; | ||
| 72 | - z-index: 4; | ||
| 73 | - transition: opacity 1s; | ||
| 74 | -} | ||
| 75 | - | ||
| 76 | -.overlay.show { | ||
| 77 | - display: block; | ||
| 78 | - opacity: 0.3; | ||
| 79 | -} |
public/scss/channel/_index-main.css
0 → 100644
| 1 | +.index-page { | ||
| 2 | + overflow: hidden; | ||
| 3 | + margin: 0 auto; | ||
| 4 | + width: 100%; | ||
| 5 | + | ||
| 6 | + #double11 { | ||
| 7 | + display: block; | ||
| 8 | + width: 432px; | ||
| 9 | + height: 100px; | ||
| 10 | + margin: 0 auto; | ||
| 11 | + background-color: transparent; | ||
| 12 | + background-image: resolve("channel/11.11.png"); | ||
| 13 | + background-size: 100%; | ||
| 14 | + | ||
| 15 | + &:active { | ||
| 16 | + background-image: resolve("channel/11.11-touch.png"); | ||
| 17 | + } | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + #yohood { | ||
| 21 | + border: none; | ||
| 22 | + border-bottom: 8px solid #fff; | ||
| 23 | + background-color: transparent; | ||
| 24 | + background-image: resolve("channel/yohood.png"); | ||
| 25 | + background-position-x: 26%; | ||
| 26 | + background-position-y: 36%; | ||
| 27 | + background-size: 40%; | ||
| 28 | + background-repeat: no-repeat; | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + #yohood:active { | ||
| 32 | + border-bottom-color: #000; | ||
| 33 | + background-color: rgba(255, 255, 255, 0.4); | ||
| 34 | + background-image: resolve("channel/yohood-tapped.png"); | ||
| 35 | + | ||
| 36 | + .right-icon { | ||
| 37 | + color: #000; | ||
| 38 | + } | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + .index-header { | ||
| 42 | + box-sizing: border-box; | ||
| 43 | + padding: 0 20px; | ||
| 44 | + width: 100%; | ||
| 45 | + height: 96px; | ||
| 46 | + line-height: 96px; | ||
| 47 | + | ||
| 48 | + .index-logo { | ||
| 49 | + float: left; | ||
| 50 | + width: 288px; | ||
| 51 | + height: 96px; | ||
| 52 | + background: resolve("channel/yohologo.png") left center no-repeat; | ||
| 53 | + background-size: 280px 60px; | ||
| 54 | + opacity: 1; | ||
| 55 | + transition: all 400ms; | ||
| 56 | + | ||
| 57 | + img { | ||
| 58 | + width: 207px; | ||
| 59 | + height: 49px; | ||
| 60 | + vertical-align: middle; | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + &.action { | ||
| 64 | + width: 0; | ||
| 65 | + opacity: 0; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + | ||
| 69 | + .box { | ||
| 70 | + position: relative; | ||
| 71 | + z-index: 1; | ||
| 72 | + overflow: hidden; | ||
| 73 | + | ||
| 74 | + &.action { | ||
| 75 | + .no-search, | ||
| 76 | + .clear-text { | ||
| 77 | + display: block; | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + .index-search { | ||
| 83 | + overflow: hidden; | ||
| 84 | + height: 96px; | ||
| 85 | + background: #fff; | ||
| 86 | + transition: width 0.4s; | ||
| 87 | + | ||
| 88 | + .search-box { | ||
| 89 | + position: relative; | ||
| 90 | + top: 20px; | ||
| 91 | + overflow: hidden; | ||
| 92 | + box-sizing: border-box; | ||
| 93 | + padding-right: 80px; | ||
| 94 | + height: 56px; | ||
| 95 | + border: 1px solid #ccc; | ||
| 96 | + transition: width 400ms; | ||
| 97 | + transition: margin-left 0.4s; | ||
| 98 | + } | ||
| 99 | + | ||
| 100 | + input { | ||
| 101 | + float: left; | ||
| 102 | + overflow: hidden; | ||
| 103 | + padding: 10px; | ||
| 104 | + width: 96%; | ||
| 105 | + border: none; | ||
| 106 | + color: #999; | ||
| 107 | + font-size: 28px; | ||
| 108 | + -webkit-appearance: none; | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + .iconfont { | ||
| 112 | + position: absolute; | ||
| 113 | + top: 8px; | ||
| 114 | + z-index: 1; | ||
| 115 | + width: 40px; | ||
| 116 | + font-size: 28px; | ||
| 117 | + line-height: 40px; | ||
| 118 | + } | ||
| 119 | + | ||
| 120 | + .clear-text { | ||
| 121 | + right: 50px; | ||
| 122 | + display: none; | ||
| 123 | + color: #ccc; | ||
| 124 | + } | ||
| 125 | + | ||
| 126 | + .search-icon { | ||
| 127 | + right: 10px; | ||
| 128 | + color: #666; | ||
| 129 | + | ||
| 130 | + &.empty { | ||
| 131 | + color: #e6e6e6; | ||
| 132 | + } | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | + | ||
| 136 | + .no-search { | ||
| 137 | + display: none; | ||
| 138 | + float: left; | ||
| 139 | + margin-right: 10px; | ||
| 140 | + color: #999; | ||
| 141 | + font-size: 28px; | ||
| 142 | + } | ||
| 143 | + } | ||
| 144 | + | ||
| 145 | + .index-container { | ||
| 146 | + position: relative; | ||
| 147 | + background-color: white; | ||
| 148 | + transition: transform 0.5s; | ||
| 149 | + | ||
| 150 | + .index-channel { | ||
| 151 | + position: relative; | ||
| 152 | + min-height: 800px; | ||
| 153 | + background-color: #000; | ||
| 154 | + color: #fff; | ||
| 155 | + text-align: center; | ||
| 156 | + | ||
| 157 | + img { | ||
| 158 | + width: 100%; | ||
| 159 | + } | ||
| 160 | + | ||
| 161 | + .index-channel-list { | ||
| 162 | + position: absolute; | ||
| 163 | + top: 50%; | ||
| 164 | + margin-top: -300px; | ||
| 165 | + width: 100%; | ||
| 166 | + | ||
| 167 | + .list-item { | ||
| 168 | + position: relative; | ||
| 169 | + display: block; | ||
| 170 | + margin: 0 auto 40px; | ||
| 171 | + width: 432px; | ||
| 172 | + height: 100px; | ||
| 173 | + border: 8px solid #fff; | ||
| 174 | + background-color: #000; | ||
| 175 | + color: #fff; | ||
| 176 | + text-align: center; | ||
| 177 | + font-weight: bold; | ||
| 178 | + font-size: 32px; | ||
| 179 | + line-height: 82px; | ||
| 180 | + } | ||
| 181 | + | ||
| 182 | + .list-item:last-child { | ||
| 183 | + margin-bottom: 0; | ||
| 184 | + } | ||
| 185 | + | ||
| 186 | + .lighter { | ||
| 187 | + font-weight: lighter; | ||
| 188 | + } | ||
| 189 | + | ||
| 190 | + .right-icon { | ||
| 191 | + position: absolute; | ||
| 192 | + top: 0; | ||
| 193 | + right: 10px; | ||
| 194 | + font-weight: bold; | ||
| 195 | + } | ||
| 196 | + | ||
| 197 | + .homestyle { | ||
| 198 | + margin-bottom: 50px; | ||
| 199 | + width: 287.3px; | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + } | ||
| 203 | + } | ||
| 204 | +} |
| 1 | -.index-page { | ||
| 2 | - overflow: hidden; | ||
| 3 | - margin: 0 auto; | ||
| 4 | - width: 100%; | ||
| 5 | 1 | ||
| 6 | - #double11 { | ||
| 7 | - display: block; | ||
| 8 | - width: 432px; | ||
| 9 | - height: 100px; | ||
| 10 | - margin: 0 auto; | ||
| 11 | - background-color: transparent; | ||
| 12 | - background-image: resolve("channel/11.11.png"); | ||
| 13 | - background-size: 100%; | ||
| 14 | - | ||
| 15 | - &:active { | ||
| 16 | - background-image: resolve("channel/11.11-touch.png"); | ||
| 17 | - } | ||
| 18 | - } | ||
| 19 | - | ||
| 20 | - #yohood { | ||
| 21 | - border: none; | ||
| 22 | - border-bottom: 8px solid #fff; | ||
| 23 | - background-color: transparent; | ||
| 24 | - background-image: resolve("channel/yohood.png"); | ||
| 25 | - background-position-x: 26%; | ||
| 26 | - background-position-y: 36%; | ||
| 27 | - background-size: 40%; | ||
| 28 | - background-repeat: no-repeat; | ||
| 29 | - } | ||
| 30 | - | ||
| 31 | - #yohood:active { | ||
| 32 | - border-bottom-color: #000; | ||
| 33 | - background-color: rgba(255, 255, 255, 0.4); | ||
| 34 | - background-image: resolve("channel/yohood-tapped.png"); | ||
| 35 | - | ||
| 36 | - .right-icon { | ||
| 37 | - color: #000; | ||
| 38 | - } | ||
| 39 | - } | ||
| 40 | - | ||
| 41 | - .index-header { | ||
| 42 | - box-sizing: border-box; | ||
| 43 | - padding: 0 20px; | ||
| 44 | - width: 100%; | ||
| 45 | - height: 96px; | ||
| 46 | - line-height: 96px; | ||
| 47 | - | ||
| 48 | - .index-logo { | ||
| 49 | - float: left; | ||
| 50 | - width: 288px; | ||
| 51 | - height: 96px; | ||
| 52 | - background: resolve("channel/yohologo.png") left center no-repeat; | ||
| 53 | - background-size: 280px 60px; | ||
| 54 | - opacity: 1; | ||
| 55 | - transition: all 400ms; | ||
| 56 | - | ||
| 57 | - img { | ||
| 58 | - width: 207px; | ||
| 59 | - height: 49px; | ||
| 60 | - vertical-align: middle; | ||
| 61 | - } | ||
| 62 | - | ||
| 63 | - &.action { | ||
| 64 | - width: 0; | ||
| 65 | - opacity: 0; | ||
| 66 | - } | ||
| 67 | - } | ||
| 68 | - | ||
| 69 | - .box { | ||
| 70 | - position: relative; | ||
| 71 | - z-index: 1; | ||
| 72 | - overflow: hidden; | ||
| 73 | - | ||
| 74 | - &.action { | ||
| 75 | - .no-search, | ||
| 76 | - .clear-text { | ||
| 77 | - display: block; | ||
| 78 | - } | ||
| 79 | - } | ||
| 80 | - } | ||
| 81 | - | ||
| 82 | - .index-search { | ||
| 83 | - overflow: hidden; | ||
| 84 | - height: 96px; | ||
| 85 | - background: #fff; | ||
| 86 | - transition: width 0.4s; | ||
| 87 | - | ||
| 88 | - .search-box { | ||
| 89 | - position: relative; | ||
| 90 | - top: 20px; | ||
| 91 | - overflow: hidden; | ||
| 92 | - box-sizing: border-box; | ||
| 93 | - padding-right: 80px; | ||
| 94 | - height: 56px; | ||
| 95 | - border: 1px solid #ccc; | ||
| 96 | - transition: width 400ms; | ||
| 97 | - transition: margin-left 0.4s; | ||
| 98 | - } | ||
| 99 | - | ||
| 100 | - input { | ||
| 101 | - float: left; | ||
| 102 | - overflow: hidden; | ||
| 103 | - padding: 10px; | ||
| 104 | - width: 96%; | ||
| 105 | - border: none; | ||
| 106 | - color: #999; | ||
| 107 | - font-size: 28px; | ||
| 108 | - -webkit-appearance: none; | ||
| 109 | - } | ||
| 110 | - | ||
| 111 | - .iconfont { | ||
| 112 | - position: absolute; | ||
| 113 | - top: 8px; | ||
| 114 | - z-index: 1; | ||
| 115 | - width: 40px; | ||
| 116 | - font-size: 28px; | ||
| 117 | - line-height: 40px; | ||
| 118 | - } | ||
| 119 | - | ||
| 120 | - .clear-text { | ||
| 121 | - right: 50px; | ||
| 122 | - display: none; | ||
| 123 | - color: #ccc; | ||
| 124 | - } | ||
| 125 | - | ||
| 126 | - .search-icon { | ||
| 127 | - right: 10px; | ||
| 128 | - color: #666; | ||
| 129 | - | ||
| 130 | - &.empty { | ||
| 131 | - color: #e6e6e6; | ||
| 132 | - } | ||
| 133 | - } | ||
| 134 | - } | ||
| 135 | - | ||
| 136 | - .no-search { | ||
| 137 | - display: none; | ||
| 138 | - float: left; | ||
| 139 | - margin-right: 10px; | ||
| 140 | - color: #999; | ||
| 141 | - font-size: 28px; | ||
| 142 | - } | ||
| 143 | - } | ||
| 144 | - | ||
| 145 | - .index-container { | ||
| 146 | - position: relative; | ||
| 147 | - background-color: white; | ||
| 148 | - transition: transform 0.5s; | ||
| 149 | - | ||
| 150 | - .index-channel { | ||
| 151 | - position: relative; | ||
| 152 | - min-height: 800px; | ||
| 153 | - background-color: #000; | ||
| 154 | - color: #fff; | ||
| 155 | - text-align: center; | ||
| 156 | - | ||
| 157 | - img { | ||
| 158 | - width: 100%; | ||
| 159 | - } | ||
| 160 | - | ||
| 161 | - .index-channel-list { | ||
| 162 | - position: absolute; | ||
| 163 | - top: 50%; | ||
| 164 | - margin-top: -300px; | ||
| 165 | - width: 100%; | ||
| 166 | - | ||
| 167 | - .list-item { | ||
| 168 | - position: relative; | ||
| 169 | - display: block; | ||
| 170 | - margin: 0 auto 40px; | ||
| 171 | - width: 432px; | ||
| 172 | - height: 100px; | ||
| 173 | - border: 8px solid #fff; | ||
| 174 | - background-color: #000; | ||
| 175 | - color: #fff; | ||
| 176 | - text-align: center; | ||
| 177 | - font-weight: bold; | ||
| 178 | - font-size: 32px; | ||
| 179 | - line-height: 82px; | ||
| 180 | - } | ||
| 181 | - | ||
| 182 | - .list-item:last-child { | ||
| 183 | - margin-bottom: 0; | ||
| 184 | - } | ||
| 185 | - | ||
| 186 | - .lighter { | ||
| 187 | - font-weight: lighter; | ||
| 188 | - } | ||
| 189 | - | ||
| 190 | - .right-icon { | ||
| 191 | - position: absolute; | ||
| 192 | - top: 0; | ||
| 193 | - right: 10px; | ||
| 194 | - font-weight: bold; | ||
| 195 | - } | ||
| 196 | - | ||
| 197 | - .homestyle { | ||
| 198 | - margin-bottom: 50px; | ||
| 199 | - width: 287.3px; | ||
| 200 | - } | ||
| 201 | - } | ||
| 202 | - } | ||
| 203 | - } | ||
| 204 | -} | 2 | +@import "index-main"; |
| 205 | @import "brand"; | 3 | @import "brand"; |
| 206 | @import "home"; | 4 | @import "home"; |
| 1 | - @import "../layout/_loading.css"; | ||
| 2 | - @import "../layout/_swiper.css"; | 1 | +@import "../layout/_loading.css"; |
| 2 | +@import "../layout/_swiper.css"; | ||
| 3 | 3 | ||
| 4 | - @import "../common/_filter.css"; | ||
| 5 | - @import "../common/_good.css"; | ||
| 6 | - @import "../common/_loading.css"; | ||
| 7 | - @import "../common/_suspend-home.css"; | 4 | +@import "../common/_filter.css"; |
| 5 | +@import "../common/_good.css"; | ||
| 6 | +@import "../common/_loading.css"; | ||
| 7 | +@import "../common/_suspend-home.css"; | ||
| 8 | 8 | ||
| 9 | - @import "_banner-bottom.css"; | ||
| 10 | - @import "_banner-center.css"; | ||
| 11 | - @import "_banner-top.css"; | ||
| 12 | - @import "_brand.css"; | ||
| 13 | - @import "_cate.css"; | ||
| 14 | - @import "_creative-life.css"; | ||
| 15 | - @import "_divide-image.css"; | ||
| 16 | - @import "_fine-brands.css"; | ||
| 17 | - @import "_floor-header.css"; | ||
| 18 | - @import "_footer-tab.css"; | ||
| 19 | - @import "_fresh-only.css"; | ||
| 20 | - @import "_goods-category.css"; | ||
| 21 | - @import "_home-header.css"; | ||
| 22 | - @import "_home.css"; | ||
| 23 | - @import "_hot-brands.css"; | ||
| 24 | - @import "_hot-category.css"; | ||
| 25 | - @import "_hot-single.css"; | ||
| 26 | - @import "_icons-enter.css"; | ||
| 27 | - @import "_index.css"; | ||
| 28 | - @import "_left-right.css"; | ||
| 29 | - @import "_maybe-like.css"; | ||
| 30 | - @import "_new-first.css"; | ||
| 31 | - @import "_new-user-floor.css"; | ||
| 32 | - @import "_notice.css"; | ||
| 33 | - @import "_plus-star.css"; | ||
| 34 | - @import "_sale-floor.css"; | ||
| 35 | - @import "_search-input.css"; | ||
| 36 | - @import "_search.css"; | ||
| 37 | - @import "_seckill.css"; | ||
| 38 | - @import "_shop-recommand.css"; | ||
| 39 | - @import "_side-nav.css"; | ||
| 40 | - @import "_six-lines-floor.css"; | ||
| 41 | - @import "_three-picture.css"; | ||
| 42 | - @import "_thumb-row.css"; | ||
| 43 | - @import "_trend-topics.css"; | ||
| 44 | - @import "_trend-tops.css"; | ||
| 45 | - @import "_trendsetter-collocation.css"; | ||
| 46 | - @import "_two-column-goods.css"; | ||
| 47 | - @import "_vip-only.css"; | 9 | +@import "_index-main.css"; |
| 10 | +@import "_brand.css"; | ||
| 11 | +@import "_banner-bottom.css"; | ||
| 12 | +@import "_banner-center.css"; | ||
| 13 | +@import "_banner-top.css"; | ||
| 14 | +@import "_cate.css"; | ||
| 15 | +@import "_creative-life.css"; | ||
| 16 | +@import "_divide-image.css"; | ||
| 17 | +@import "_fine-brands.css"; | ||
| 18 | +@import "_floor-header.css"; | ||
| 19 | +@import "_footer-tab.css"; | ||
| 20 | +@import "_fresh-only.css"; | ||
| 21 | +@import "_goods-category.css"; | ||
| 22 | +@import "_hot-brands.css"; | ||
| 23 | +@import "_hot-category.css"; | ||
| 24 | +@import "_home-header.css"; | ||
| 25 | +@import "_hot-single.css"; | ||
| 26 | +@import "_icons-enter.css"; | ||
| 27 | +@import "_left-right.css"; | ||
| 28 | +@import "_maybe-like.css"; | ||
| 29 | +@import "_new-first.css"; | ||
| 30 | +@import "_new-user-floor.css"; | ||
| 31 | +@import "_notice.css"; | ||
| 32 | +@import "_plus-star.css"; | ||
| 33 | +@import "_sale-floor.css"; | ||
| 34 | +@import "_search.css"; | ||
| 35 | +@import "_seckill.css"; | ||
| 36 | +@import "_shop-recommand.css"; | ||
| 37 | +@import "_side-nav.css"; | ||
| 38 | +@import "_six-lines-floor.css"; | ||
| 39 | +@import "_three-picture.css"; | ||
| 40 | +@import "_thumb-row.css"; | ||
| 41 | +@import "_trend-topics.css"; | ||
| 42 | +@import "_trend-tops.css"; | ||
| 43 | +@import "_trendsetter-collocation.css"; | ||
| 44 | +@import "_two-column-goods.css"; | ||
| 45 | +@import "_vip-only.css"; | ||
| 46 | +@import "_home-main.css"; |
| 1 | @import "../../channel/banner-top"; | 1 | @import "../../channel/banner-top"; |
| 2 | @import "../../common/good"; | 2 | @import "../../common/good"; |
| 3 | @import "../../common/filter"; | 3 | @import "../../common/filter"; |
| 4 | +@import "../../common/_suspend-home.css"; | ||
| 4 | @import "search"; | 5 | @import "search"; |
| 5 | @import "list"; | 6 | @import "list"; |
| 6 | @import "search-index"; | 7 | @import "search-index"; |
-
Please register or login to post a comment