Showing
5 changed files
with
386 additions
and
4 deletions
| @@ -179,11 +179,13 @@ a { | @@ -179,11 +179,13 @@ a { | ||
| 179 | @import "lazy-failure"; | 179 | @import "lazy-failure"; |
| 180 | @import "filter"; | 180 | @import "filter"; |
| 181 | @import "loading"; | 181 | @import "loading"; |
| 182 | -/*@import "passport/index"; | 182 | +@import "index/index"; |
| 183 | +/* | ||
| 184 | +@import "passport/index"; | ||
| 183 | @import "guang/index"; | 185 | @import "guang/index"; |
| 184 | @import "home/index"; | 186 | @import "home/index"; |
| 185 | @import "category/index"; | 187 | @import "category/index"; |
| 188 | +@import "me/index"; | ||
| 189 | + | ||
| 186 | @import "product/index"; | 190 | @import "product/index"; |
| 187 | -@import "index/index"; | ||
| 188 | -@import "cart/index"; | ||
| 189 | -@import "me/index";*/ | 191 | +@import "cart/index";*/ |
static/sass/index/_error.css
0 → 100644
static/sass/index/_footer.css
0 → 100644
| 1 | +.float-layer { | ||
| 2 | + height: 44px; | ||
| 3 | + background: rgba(68, 68, 68, 0.95); | ||
| 4 | + position: fixed; | ||
| 5 | + width: 100%; | ||
| 6 | + bottom: 0; | ||
| 7 | + left: 0; | ||
| 8 | + z-index: 9999; | ||
| 9 | + padding: 10px 0; | ||
| 10 | + | ||
| 11 | + .float-layer-left { | ||
| 12 | + padding-left: 22px; | ||
| 13 | + overflow: hidden; | ||
| 14 | + float: left; | ||
| 15 | + | ||
| 16 | + img { | ||
| 17 | + height: 44px; | ||
| 18 | + float: left; | ||
| 19 | + margin-right: 10px; | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + p { | ||
| 23 | + float: left; | ||
| 24 | + font-size: 16px; | ||
| 25 | + height: 44px; | ||
| 26 | + line-height: 44px; | ||
| 27 | + color: white; | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + .yoho-icon { | ||
| 31 | + float: left; | ||
| 32 | + margin-right: 10px; | ||
| 33 | + font-size: 22px; | ||
| 34 | + line-height: 44px; | ||
| 35 | + width: 44px; | ||
| 36 | + height: 44px; | ||
| 37 | + text-align: center; | ||
| 38 | + color: #fff; | ||
| 39 | + border-radius: 10px; | ||
| 40 | + background-image: linear-gradient(#323232, #0f0f0f); | ||
| 41 | + } | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +#float-layer-close { | ||
| 47 | + position: absolute; | ||
| 48 | + left: 0; | ||
| 49 | + top: 0; | ||
| 50 | + width: 50px; | ||
| 51 | + height: 50px; | ||
| 52 | + | ||
| 53 | + .close-icon { | ||
| 54 | + position: absolute; | ||
| 55 | + left: 0; | ||
| 56 | + top: 0; | ||
| 57 | + color: #C0C0C0; | ||
| 58 | + z-index: 2; | ||
| 59 | + } | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +#float-layer-btn { | ||
| 63 | + position: absolute; | ||
| 64 | + top: 50%; | ||
| 65 | + right: 15px; | ||
| 66 | + font-size: 16px; | ||
| 67 | + padding: 0 10px; | ||
| 68 | + height: 27px; | ||
| 69 | + line-height: 27px; | ||
| 70 | + background: white; | ||
| 71 | + border-radius: 5px; | ||
| 72 | + margin-top: -13px; | ||
| 73 | + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); | ||
| 74 | + &:link, | ||
| 75 | + &:visited, | ||
| 76 | + &:hover, | ||
| 77 | + &:actived { | ||
| 78 | + color: #000; | ||
| 79 | + } | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | +.circle-rightbottom { | ||
| 83 | + position: absolute; | ||
| 84 | + | ||
| 85 | + width: 25px; | ||
| 86 | + height: 0px; | ||
| 87 | + border:0 solid #323232; | ||
| 88 | + border-bottom:25px solid #323232; | ||
| 89 | + -moz-border-radius:0 0 25px 0; | ||
| 90 | + -webkit-border-radius:0 0 25px 0; | ||
| 91 | + border-radius:0 0 25px 0; | ||
| 92 | +} |
static/sass/index/_index.css
0 → 100644
| 1 | +.index-page { | ||
| 2 | + width: 100%; | ||
| 3 | + overflow: hidden; | ||
| 4 | + margin: 0 auto; | ||
| 5 | + #yohood { | ||
| 6 | + background-color: transparent; | ||
| 7 | + background-image: resolve('yohood.png'); | ||
| 8 | + background-size: 40%; | ||
| 9 | + background-repeat: no-repeat; | ||
| 10 | + background-position-x: 26%; | ||
| 11 | + background-position-y: 36%; | ||
| 12 | + border: none; | ||
| 13 | + border-bottom: 4px solid #fff; | ||
| 14 | + } | ||
| 15 | + | ||
| 16 | + #yohood:active { | ||
| 17 | + background-image: resolve('yohood-tapped.png'); | ||
| 18 | + background-color: rgba(255,255,255,.4); | ||
| 19 | + border-bottom-color: #000; | ||
| 20 | + .right-icon { | ||
| 21 | + color: #000; | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | + | ||
| 25 | + .index-header { | ||
| 26 | + box-sizing: border-box; | ||
| 27 | + padding: 0 20px; | ||
| 28 | + width: 100%; | ||
| 29 | + height: 96px; | ||
| 30 | + line-height: 96px; | ||
| 31 | + | ||
| 32 | + .index-logo { | ||
| 33 | + float: left; | ||
| 34 | + width: 216px; | ||
| 35 | + height: 96px; | ||
| 36 | + background: resolve("yohologo.png") left center no-repeat; | ||
| 37 | + background-size: 104px 25px; | ||
| 38 | + opacity: 1; | ||
| 39 | + transition: all 400ms; | ||
| 40 | + | ||
| 41 | + img { | ||
| 42 | + display: inline; | ||
| 43 | + vertical-align: middle; | ||
| 44 | + width: 207px; | ||
| 45 | + height: 49px; | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + &.action { | ||
| 49 | + opacity: 0; | ||
| 50 | + width: 0; | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | + .box { | ||
| 55 | + position: relative; | ||
| 56 | + overflow: hidden; | ||
| 57 | + z-index: 1; | ||
| 58 | + | ||
| 59 | + &.action { | ||
| 60 | + .no-search, .clear-text { | ||
| 61 | + display: block; | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + .search-box { | ||
| 65 | + /* margin-left: 80px;*/ | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + .index-search { | ||
| 71 | + height: 96px; | ||
| 72 | + background: #fff; | ||
| 73 | + overflow: hidden; | ||
| 74 | + transition: width .4s; | ||
| 75 | + | ||
| 76 | + .search-box { | ||
| 77 | + position: relative; | ||
| 78 | + top: 20px; | ||
| 79 | + height: 56px; | ||
| 80 | + padding-right: 80px; | ||
| 81 | + transition: width 400ms; | ||
| 82 | + box-sizing: border-box; | ||
| 83 | + border: 1px solid #ccc; | ||
| 84 | + overflow: hidden; | ||
| 85 | + transition: margin-left 0.4s; | ||
| 86 | + } | ||
| 87 | + input { | ||
| 88 | + float: left; | ||
| 89 | + width: 96%; | ||
| 90 | + font-size: 28px; | ||
| 91 | + padding: 10px; | ||
| 92 | + color: #999; | ||
| 93 | + overflow: hidden; | ||
| 94 | + border: none; | ||
| 95 | + -webkit-appearance: none; | ||
| 96 | + } | ||
| 97 | + .iconfont { | ||
| 98 | + position: absolute; | ||
| 99 | + top: 8px; | ||
| 100 | + width: 40px; | ||
| 101 | + font-size: 28px; | ||
| 102 | + z-index: 1; | ||
| 103 | + line-height: 40px; | ||
| 104 | + } | ||
| 105 | + .clear-text { | ||
| 106 | + display: none; | ||
| 107 | + right: 50px; | ||
| 108 | + color: #ccc; | ||
| 109 | + } | ||
| 110 | + .search-icon { | ||
| 111 | + right: 10px; | ||
| 112 | + color: #666; | ||
| 113 | + | ||
| 114 | + &.empty { | ||
| 115 | + color: #e6e6e6; | ||
| 116 | + } | ||
| 117 | + } | ||
| 118 | + } | ||
| 119 | + | ||
| 120 | + .no-search { | ||
| 121 | + display: none; | ||
| 122 | + float: left; | ||
| 123 | + margin-right: 10px; | ||
| 124 | + color: #999; | ||
| 125 | + font-size: 28px; | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + .index-container { | ||
| 129 | + position: relative; | ||
| 130 | + transition: transform 0.5s; | ||
| 131 | + background-color: white; | ||
| 132 | + | ||
| 133 | + .index_header { | ||
| 134 | + height: 80px; | ||
| 135 | + line-height: 80px; | ||
| 136 | + overflow: hidden; | ||
| 137 | + padding: 0 10px;; | ||
| 138 | + | ||
| 139 | + | ||
| 140 | + } | ||
| 141 | + | ||
| 142 | + .index-channel { | ||
| 143 | + color: #FFF; | ||
| 144 | + text-align: center; | ||
| 145 | + position:relative; | ||
| 146 | + background-color: #000000; | ||
| 147 | + min-height: 800px; | ||
| 148 | + | ||
| 149 | + .index-channel-list { | ||
| 150 | + margin-top: -300px; | ||
| 151 | + width: 100%; | ||
| 152 | + position: absolute; | ||
| 153 | + top: 50%; | ||
| 154 | + | ||
| 155 | + .list-item { | ||
| 156 | + display: block; | ||
| 157 | + position: relative; | ||
| 158 | + margin: 0 auto 40px; | ||
| 159 | + width: 432px; | ||
| 160 | + height: 104px; | ||
| 161 | + text-align: center; | ||
| 162 | + font-size: 32px; | ||
| 163 | + line-height: 104px; | ||
| 164 | + color: #fff; | ||
| 165 | + background-color: #000; | ||
| 166 | + border: 4px solid #fff; | ||
| 167 | + font-weight: bold; | ||
| 168 | + &:last-child { | ||
| 169 | + margin-bottom: 0; | ||
| 170 | + } | ||
| 171 | + } | ||
| 172 | + .lighter { | ||
| 173 | + font-weight: lighter; | ||
| 174 | + } | ||
| 175 | + .right-icon { | ||
| 176 | + position: absolute; | ||
| 177 | + right: 10px; | ||
| 178 | + top: 0; | ||
| 179 | + font-weight: bold; | ||
| 180 | + } | ||
| 181 | + .homestyle { | ||
| 182 | + margin-bottom: 50px; | ||
| 183 | + width: 287.3px; | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | + } | ||
| 187 | + } | ||
| 188 | + | ||
| 189 | +} | ||
| 190 | + | ||
| 191 | +@import "search"; | ||
| 192 | +@import "footer"; | ||
| 193 | +@import "error"; |
static/sass/index/_search.css
0 → 100644
| 1 | +.search-page { | ||
| 2 | + .search-input { | ||
| 3 | + position: relative; | ||
| 4 | + padding: 14px 22px; | ||
| 5 | + background: #f8f8f8; | ||
| 6 | + form { | ||
| 7 | + width: 100%; | ||
| 8 | + } | ||
| 9 | + .search-icon { | ||
| 10 | + position: absolute; | ||
| 11 | + font-size: 24px; | ||
| 12 | + top: 26px; | ||
| 13 | + left: 36px; | ||
| 14 | + color: #b2b2b2; | ||
| 15 | + } | ||
| 16 | + | ||
| 17 | + input { | ||
| 18 | + height: 56px; | ||
| 19 | + width: 378px; | ||
| 20 | + border-radius: 28px; | ||
| 21 | + padding: 0 52px; | ||
| 22 | + font-size: 24px; | ||
| 23 | + background: #fff; | ||
| 24 | + border: none; | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + .clear-input { | ||
| 28 | + position: absolute; | ||
| 29 | + top: 20px; | ||
| 30 | + right: 145px; | ||
| 31 | + font-size: 32px; | ||
| 32 | + color: #666; | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .search { | ||
| 36 | + position: absolute; | ||
| 37 | + top: 18px; | ||
| 38 | + right: 40px; | ||
| 39 | + border: none; | ||
| 40 | + background: transparent; | ||
| 41 | + color: #666; | ||
| 42 | + font-size: 30px; | ||
| 43 | + line-height: 56px; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + .search-items { | ||
| 48 | + padding: 40px 20px; | ||
| 49 | + | ||
| 50 | + h3 { | ||
| 51 | + font-size: 24px; | ||
| 52 | + margin-bottom: 20px; | ||
| 53 | + } | ||
| 54 | + | ||
| 55 | + li { | ||
| 56 | + float: left; | ||
| 57 | + margin-right: 20px; | ||
| 58 | + margin-bottom: 20px; | ||
| 59 | + max-width: 100%; | ||
| 60 | + overflow: hidden; | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + a { | ||
| 64 | + display: block; | ||
| 65 | + height: 68px; | ||
| 66 | + line-height: 68px; | ||
| 67 | + padding: 0 20px; | ||
| 68 | + font-size: 28px; | ||
| 69 | + background: #f8f8f8; | ||
| 70 | + color: #000; | ||
| 71 | + overflow: hidden; | ||
| 72 | + text-overflow: ellipsis; | ||
| 73 | + white-space: nowrap; | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .clear-history { | ||
| 77 | + height: 64px; | ||
| 78 | + line-height: 64px; | ||
| 79 | + border: 1px solid #e6e6e6; | ||
| 80 | + background: #fff; | ||
| 81 | + font-size: 28px; | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | +} |
-
Please register or login to post a comment