Showing
10 changed files
with
975 additions
and
2 deletions
No preview for this file type
static/img/sprite.guang.png
0 → 100644
21.5 KB
static/sass/guang/_detail.css
0 → 100644
| 1 | +@define-mixin relatedTitle { | ||
| 2 | + margin: 0 29px; | ||
| 3 | + background: #fff; | ||
| 4 | + border: 1px solid #e0e0e0; | ||
| 5 | + border-bottom: none; | ||
| 6 | + line-height: 72px; | ||
| 7 | + font-size: 30px; | ||
| 8 | + color: #b0b0b0; | ||
| 9 | + text-align: center; | ||
| 10 | +} | ||
| 11 | + | ||
| 12 | +.guang-detail-page { | ||
| 13 | + #wrapper { | ||
| 14 | + background: #f0f0f0; | ||
| 15 | + } | ||
| 16 | + | ||
| 17 | + #wrapper.ios { | ||
| 18 | + position: absolute; | ||
| 19 | + top: 0; | ||
| 20 | + bottom: 0; | ||
| 21 | + left: 0; | ||
| 22 | + right: 0; | ||
| 23 | + overflow: hidden; | ||
| 24 | + | ||
| 25 | + &.has-head { | ||
| 26 | + top: 90px; | ||
| 27 | + | ||
| 28 | + + .fixed-top { | ||
| 29 | + top: 90px; | ||
| 30 | + } | ||
| 31 | + } | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + .author { | ||
| 35 | + border-bottom: 1px solid #e0e0e0; | ||
| 36 | + background: #fff; | ||
| 37 | + | ||
| 38 | + > a { | ||
| 39 | + display: block; | ||
| 40 | + height: 100%; | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + .avatar { | ||
| 44 | + float: left; | ||
| 45 | + margin-top: 20px; | ||
| 46 | + margin-left: 30px; | ||
| 47 | + width: 50px; | ||
| 48 | + height: 50px; | ||
| 49 | + border-radius: 50%; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + .name { | ||
| 53 | + float: left; | ||
| 54 | + font-size: 28px; | ||
| 55 | + color: #000; | ||
| 56 | + padding: 30px 0; | ||
| 57 | + margin-left: 30px; | ||
| 58 | + } | ||
| 59 | + | ||
| 60 | + .intro { | ||
| 61 | + float: left; | ||
| 62 | + font-size: 28px; | ||
| 63 | + color: #b0b0b0; | ||
| 64 | + padding: 30px 0; | ||
| 65 | + margin-left: 30px; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + | ||
| 69 | + .post-title { | ||
| 70 | + padding: 16px 0 26px 30px; | ||
| 71 | + background: #fff; | ||
| 72 | + | ||
| 73 | + .title { | ||
| 74 | + line-height: 60px; | ||
| 75 | + font-size: 40px; | ||
| 76 | + color: #000; | ||
| 77 | + font-weight: bold; | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + .text-block { | ||
| 82 | + padding: 20px 30px; | ||
| 83 | + line-height: 46px; | ||
| 84 | + font-size: 28px; | ||
| 85 | + background: #fff; | ||
| 86 | + color: #444; | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + .big-img-block { | ||
| 90 | + padding-bottom: 5px; | ||
| 91 | + background: #fff; | ||
| 92 | + | ||
| 93 | + img { | ||
| 94 | + width: 100%; | ||
| 95 | + height: 640px; | ||
| 96 | + } | ||
| 97 | + } | ||
| 98 | + | ||
| 99 | + .small-img-block { | ||
| 100 | + padding-bottom: 8px; | ||
| 101 | + background: #fff; | ||
| 102 | + | ||
| 103 | + img { | ||
| 104 | + float: right; | ||
| 105 | + width: 315px; | ||
| 106 | + height: 420px; | ||
| 107 | + | ||
| 108 | + &:first-child { | ||
| 109 | + float: left; | ||
| 110 | + } | ||
| 111 | + } | ||
| 112 | + } | ||
| 113 | + | ||
| 114 | + .collocation-block { | ||
| 115 | + background: #fff; | ||
| 116 | + | ||
| 117 | + .good-list { | ||
| 118 | + padding-left:15px; | ||
| 119 | + } | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + .thumb-container { | ||
| 123 | + padding-top: 30px; | ||
| 124 | + padding-left: 20px; | ||
| 125 | + background: transparent resolve('guang/thumb-container-bg.png') no-repeat; | ||
| 126 | + background-size: 200% 100%; | ||
| 127 | + | ||
| 128 | + &.fixed-top { | ||
| 129 | + position: fixed; | ||
| 130 | + left: 0; | ||
| 131 | + right: 0; | ||
| 132 | + top: 0; | ||
| 133 | + } | ||
| 134 | + | ||
| 135 | + &.fixed-bottom { | ||
| 136 | + position: fixed; | ||
| 137 | + left: 0; | ||
| 138 | + right: 0; | ||
| 139 | + bottom: 0; | ||
| 140 | + background: rgba(255,255,255,0.9); | ||
| 141 | + } | ||
| 142 | + | ||
| 143 | + &.absolute { | ||
| 144 | + position: absolute; | ||
| 145 | + left: 0; | ||
| 146 | + right: 0; | ||
| 147 | + } | ||
| 148 | + | ||
| 149 | + &.static { | ||
| 150 | + position: static; | ||
| 151 | + } | ||
| 152 | + | ||
| 153 | + &.hide { | ||
| 154 | + display: none; | ||
| 155 | + } | ||
| 156 | + } | ||
| 157 | + | ||
| 158 | + .clothe-type { | ||
| 159 | + position: absolute; | ||
| 160 | + right: 6px; | ||
| 161 | + bottom: 34px; | ||
| 162 | + width: 20px; | ||
| 163 | + height: 20px; | ||
| 164 | + border-radius: 50%; | ||
| 165 | + | ||
| 166 | + &.bag { | ||
| 167 | + background: url("/guang/clothes/bag.png"); | ||
| 168 | + background-color: #fff; | ||
| 169 | + background-size: 100%; | ||
| 170 | + } | ||
| 171 | + | ||
| 172 | + &.cloth { | ||
| 173 | + background: url("/guang/clothes/cloth.png"); | ||
| 174 | + background-color: #fff; | ||
| 175 | + background-size: 100%; | ||
| 176 | + } | ||
| 177 | + | ||
| 178 | + &.dress { | ||
| 179 | + background: url("/guang/clothes/dress.png"); | ||
| 180 | + background-color: #fff; | ||
| 181 | + background-size: 100%; | ||
| 182 | + } | ||
| 183 | + | ||
| 184 | + &.headset { | ||
| 185 | + background: url("/guang/clothes/headset.png"); | ||
| 186 | + background-color: #fff; | ||
| 187 | + background-size: 100%; | ||
| 188 | + } | ||
| 189 | + | ||
| 190 | + &.lamp { | ||
| 191 | + background: url("/guang/clothes/lamp.png"); | ||
| 192 | + background-color: #fff; | ||
| 193 | + background-size: 100%; | ||
| 194 | + } | ||
| 195 | + | ||
| 196 | + &.pants { | ||
| 197 | + background: url("/guang/clothes/pants.png"); | ||
| 198 | + background-color: #fff; | ||
| 199 | + background-size: 100%; | ||
| 200 | + } | ||
| 201 | + | ||
| 202 | + &.shoe { | ||
| 203 | + background: url("/guang/clothes/shoe.png"); | ||
| 204 | + background-color: #fff; | ||
| 205 | + background-size: 100%; | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + &.swim-suit { | ||
| 209 | + background: url("/guang/clothes/swim-suit.png"); | ||
| 210 | + background-color: #fff; | ||
| 211 | + background-size: 100%; | ||
| 212 | + } | ||
| 213 | + | ||
| 214 | + &.under { | ||
| 215 | + background: url("/guang/clothes/under.png"); | ||
| 216 | + background-color: #fff; | ||
| 217 | + background-size: 100%; | ||
| 218 | + } | ||
| 219 | + | ||
| 220 | + &.watch { | ||
| 221 | + background: url("/guang/clothes/watch.png"); | ||
| 222 | + background-color: #fff; | ||
| 223 | + background-size: 100%; | ||
| 224 | + } | ||
| 225 | + } | ||
| 226 | + | ||
| 227 | + .thumb { | ||
| 228 | + display: inline-block; | ||
| 229 | + position: relative; | ||
| 230 | + margin-right: 22px; | ||
| 231 | + padding-bottom: 30px; | ||
| 232 | + | ||
| 233 | + &:last-child { | ||
| 234 | + margin-right: 0; | ||
| 235 | + } | ||
| 236 | + | ||
| 237 | + &.focus .thumb-img { | ||
| 238 | + border-color: #000; | ||
| 239 | + } | ||
| 240 | + } | ||
| 241 | + | ||
| 242 | + .thumb-img { | ||
| 243 | + height: 134px; | ||
| 244 | + width: 96px; | ||
| 245 | + border: 1px solid transparent; | ||
| 246 | + } | ||
| 247 | + | ||
| 248 | + .related-reco-block { | ||
| 249 | + background: #fff; | ||
| 250 | + padding-left: 15px; | ||
| 251 | + border-top: 1px solid #e0e0e0; | ||
| 252 | + | ||
| 253 | + h2 { | ||
| 254 | + margin-left: -15px; | ||
| 255 | + line-height: 104px; | ||
| 256 | + font-size: 30px; | ||
| 257 | + color: #b0b0b0; | ||
| 258 | + text-align: center; | ||
| 259 | + } | ||
| 260 | + | ||
| 261 | + .one-good { | ||
| 262 | + padding-left: 15px; | ||
| 263 | + padding-right: 30px; | ||
| 264 | + margin-bottom: 20px; | ||
| 265 | + | ||
| 266 | + .thumb { | ||
| 267 | + float: left; | ||
| 268 | + height: 134px; | ||
| 269 | + width: 96px; | ||
| 270 | + } | ||
| 271 | + | ||
| 272 | + .content-container { | ||
| 273 | + padding-left: 120px; | ||
| 274 | + height: 134px; | ||
| 275 | + line-height: 1; | ||
| 276 | + font-size: 24px; | ||
| 277 | + | ||
| 278 | + > p { | ||
| 279 | + height: 50%; | ||
| 280 | + line-height: 94px; | ||
| 281 | + } | ||
| 282 | + | ||
| 283 | + span { | ||
| 284 | + display: inline-block; | ||
| 285 | + line-height: 24px; | ||
| 286 | + } | ||
| 287 | + | ||
| 288 | + .price { | ||
| 289 | + line-height: 47px; | ||
| 290 | + } | ||
| 291 | + } | ||
| 292 | + | ||
| 293 | + .sale-price { | ||
| 294 | + color: #d62927; | ||
| 295 | + line-height: 1.5; | ||
| 296 | + } | ||
| 297 | + | ||
| 298 | + .sale-price.no-price { | ||
| 299 | + color: #000; | ||
| 300 | + } | ||
| 301 | + | ||
| 302 | + .market-price { | ||
| 303 | + margin-left: 5px; | ||
| 304 | + color: #b0b0b0; | ||
| 305 | + text-decoration: line-through; | ||
| 306 | + line-height: 1.5; | ||
| 307 | + } | ||
| 308 | + | ||
| 309 | + .check-detail { | ||
| 310 | + display: inline-block; | ||
| 311 | + color: #000; | ||
| 312 | + border: 1px solid; | ||
| 313 | + border-radius: 2px; | ||
| 314 | + float: right; | ||
| 315 | + padding: 0 5px; | ||
| 316 | + line-height: 1.5; | ||
| 317 | + } | ||
| 318 | + } | ||
| 319 | + } | ||
| 320 | + | ||
| 321 | + .link-block { | ||
| 322 | + display: block; | ||
| 323 | + height: 80px; | ||
| 324 | + line-height: 80px; | ||
| 325 | + padding: 0 30px; | ||
| 326 | + font-size: 16px; | ||
| 327 | + background: #fff; | ||
| 328 | + border-top: 1px solid #e0e0e0; | ||
| 329 | + border-bottom: 1px solid #e0e0e0; | ||
| 330 | + | ||
| 331 | + .iconfont { | ||
| 332 | + float: right; | ||
| 333 | + color: #ccc; | ||
| 334 | + } | ||
| 335 | + } | ||
| 336 | + | ||
| 337 | + .related-brand { | ||
| 338 | + margin-top: 30px; | ||
| 339 | + | ||
| 340 | + h2 { | ||
| 341 | + @mixin relatedTitle; | ||
| 342 | + } | ||
| 343 | + | ||
| 344 | + .brand-list { | ||
| 345 | + border-top: 1px solid #e0e0e0; | ||
| 346 | + border-bottom: 1px solid #e0e0e0; | ||
| 347 | + padding: 30px 0 30px; | ||
| 348 | + background: #fff; | ||
| 349 | + } | ||
| 350 | + | ||
| 351 | + .brand { | ||
| 352 | + float: left; | ||
| 353 | + width: 158px; | ||
| 354 | + height: 128px; | ||
| 355 | + border-right: 1px solid #e0e0e0; | ||
| 356 | + margin-bottom: 10px; | ||
| 357 | + | ||
| 358 | + a { | ||
| 359 | + display: block; | ||
| 360 | + } | ||
| 361 | + | ||
| 362 | + &:nth-child(4n) { | ||
| 363 | + border-right: none; | ||
| 364 | + } | ||
| 365 | + } | ||
| 366 | + | ||
| 367 | + .brand-logo { | ||
| 368 | + display: table-cell; | ||
| 369 | + width: 158px; | ||
| 370 | + height: 94px; | ||
| 371 | + vertical-align: middle; | ||
| 372 | + | ||
| 373 | + img { | ||
| 374 | + display: block; | ||
| 375 | + max-width: 158px; | ||
| 376 | + max-height: 94px; | ||
| 377 | + vertical-align: middle; | ||
| 378 | + margin: 0 auto; | ||
| 379 | + } | ||
| 380 | + } | ||
| 381 | + | ||
| 382 | + .brand-name { | ||
| 383 | + margin: 10px 0 0 0; | ||
| 384 | + line-height: 24px; | ||
| 385 | + font-size: 18px; | ||
| 386 | + color: #babac2; | ||
| 387 | + text-align: center; | ||
| 388 | + text-decoration: none; | ||
| 389 | + border-bottom: none; | ||
| 390 | + overflow: hidden; | ||
| 391 | + text-overflow: ellipsis; | ||
| 392 | + white-space: nowrap; | ||
| 393 | + } | ||
| 394 | + } | ||
| 395 | + | ||
| 396 | + .related-tag { | ||
| 397 | + position: relative; | ||
| 398 | + padding-bottom: 30px; | ||
| 399 | + border-bottom: 1px solid #e0e0e0; | ||
| 400 | + background: #fff; | ||
| 401 | + | ||
| 402 | + .tag-bg { | ||
| 403 | + position: absolute; | ||
| 404 | + height: 40px; | ||
| 405 | + width: 40px; | ||
| 406 | + background: resolve('guang/tag.png') no-repeat; | ||
| 407 | + background-size: 100% 100%; | ||
| 408 | + top: 35px; | ||
| 409 | + left: 20px; | ||
| 410 | + } | ||
| 411 | + | ||
| 412 | + .tag-list { | ||
| 413 | + margin-left: 50px; | ||
| 414 | + } | ||
| 415 | + | ||
| 416 | + li { | ||
| 417 | + float: left; | ||
| 418 | + margin-top: 31px; | ||
| 419 | + margin-left: 31px; | ||
| 420 | + } | ||
| 421 | + | ||
| 422 | + a { | ||
| 423 | + height: 50px; | ||
| 424 | + line-height: 50px; | ||
| 425 | + font-size: 30px; | ||
| 426 | + color: #000; | ||
| 427 | + text-decoration: underline; | ||
| 428 | + white-space: nowrap; | ||
| 429 | + } | ||
| 430 | + } | ||
| 431 | + | ||
| 432 | + .related-info { | ||
| 433 | + margin-top: 30px; | ||
| 434 | + | ||
| 435 | + h2 { | ||
| 436 | + @mixin relatedTitle; | ||
| 437 | + } | ||
| 438 | + | ||
| 439 | + .info-list { | ||
| 440 | + background: #fff; | ||
| 441 | + padding-bottom: 30px; | ||
| 442 | + border-top: 1px solid #e0e0e0; | ||
| 443 | + } | ||
| 444 | + | ||
| 445 | + li { | ||
| 446 | + padding-top: 30px; | ||
| 447 | + margin-bottom: 10px; | ||
| 448 | + | ||
| 449 | + a { | ||
| 450 | + display: block; | ||
| 451 | + } | ||
| 452 | + | ||
| 453 | + img { | ||
| 454 | + float: left; | ||
| 455 | + margin-left: 30px; | ||
| 456 | + width: 182px; | ||
| 457 | + height: 114px; | ||
| 458 | + | ||
| 459 | + &.square { | ||
| 460 | + height: 182px; | ||
| 461 | + } | ||
| 462 | + } | ||
| 463 | + } | ||
| 464 | + | ||
| 465 | + .title, .publish-time { | ||
| 466 | + float: left; | ||
| 467 | + width: 360px; | ||
| 468 | + margin-left: 30px; | ||
| 469 | + line-height: 40px; | ||
| 470 | + color: #444; | ||
| 471 | + font-size: 28px; | ||
| 472 | + | ||
| 473 | + } | ||
| 474 | + | ||
| 475 | + .publish-time { | ||
| 476 | + font-size: 18px; | ||
| 477 | + margin-top: 0; | ||
| 478 | + color: #b0b0b0; | ||
| 479 | + | ||
| 480 | + .iconfont { | ||
| 481 | + font-size: 18px; | ||
| 482 | + } | ||
| 483 | + } | ||
| 484 | + } | ||
| 485 | +} |
static/sass/guang/_index.css
0 → 100644
static/sass/guang/_info-list.css
0 → 100644
| 1 | +.guang-list-page { | ||
| 2 | + .editor-header { | ||
| 3 | + margin-bottom: 30px; | ||
| 4 | + padding-top: 36px; | ||
| 5 | + padding-bottom: 40px; | ||
| 6 | + background: #fff; | ||
| 7 | + border-bottom: 1px solid #e0e0e0; | ||
| 8 | + } | ||
| 9 | + | ||
| 10 | + .avatar { | ||
| 11 | + float: left; | ||
| 12 | + margin-left: 30px; | ||
| 13 | + img { | ||
| 14 | + width: 100px; | ||
| 15 | + height: 100px; | ||
| 16 | + border-radius: 50%; | ||
| 17 | + } | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + .text { | ||
| 21 | + float: left; | ||
| 22 | + margin-left: 32px; | ||
| 23 | + width: 475px; | ||
| 24 | + .name { | ||
| 25 | + font-size: 32px; | ||
| 26 | + line-height: 40px; | ||
| 27 | + } | ||
| 28 | + .info { | ||
| 29 | + margin-top: 6px; | ||
| 30 | + color: #bdbdbf; | ||
| 31 | + font-size: 24px; | ||
| 32 | + line-height: 32px; | ||
| 33 | + } | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + .swiper-container { | ||
| 37 | + width: 100%; | ||
| 38 | + height: 310px; | ||
| 39 | + | ||
| 40 | + img { | ||
| 41 | + height: 100%; | ||
| 42 | + width: 100%; | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + .swiper-pagination { | ||
| 46 | + bottom: 0; | ||
| 47 | + left: 0; | ||
| 48 | + width: 100%; | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + .swiper-pagination-bullet-active { | ||
| 52 | + background: #fff; | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + .guang-nav { | ||
| 57 | + background-color: #fff; | ||
| 58 | + overflow: hidden; | ||
| 59 | + height: 80px; | ||
| 60 | + } | ||
| 61 | + | ||
| 62 | + | ||
| 63 | + .guang-nav-item { | ||
| 64 | + float: left; | ||
| 65 | + color: #ccc; | ||
| 66 | + font-size: 28px; | ||
| 67 | + padding: 0 22px; | ||
| 68 | + line-height: 80px; | ||
| 69 | + | ||
| 70 | + &.focus { | ||
| 71 | + color: #000; | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + .bytouch{ | ||
| 76 | + background:#eee; | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + .info-list-container { | ||
| 80 | + overflow-x: hidden; | ||
| 81 | + background: #f0f0f0; | ||
| 82 | + } | ||
| 83 | + | ||
| 84 | + .info-list.hide { | ||
| 85 | + display: none; | ||
| 86 | + } | ||
| 87 | +} |
static/sass/guang/_info.css
0 → 100644
| 1 | +.guang-info { | ||
| 2 | + margin-bottom: 30px; | ||
| 3 | + padding: 0 0 24px 0; | ||
| 4 | + border-top: 1px solid #e0e0e0; | ||
| 5 | + border-bottom: 1px solid #e0e0e0; | ||
| 6 | + background: #fff; | ||
| 7 | + | ||
| 8 | + .info-author { | ||
| 9 | + display: block; | ||
| 10 | + width: 100%; | ||
| 11 | + | ||
| 12 | + .avatar { | ||
| 13 | + float: left; | ||
| 14 | + margin-top: 20px; | ||
| 15 | + width: 50px; | ||
| 16 | + height: 50px; | ||
| 17 | + margin-left: 30px; | ||
| 18 | + border-radius: 50%; | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + .name { | ||
| 22 | + float: left; | ||
| 23 | + margin-left: 30px; | ||
| 24 | + padding: 30px 0; | ||
| 25 | + font-size: 28px; | ||
| 26 | + color: #000; | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + &:last-child { | ||
| 31 | + margin-bottom: 0; | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + .info-img { | ||
| 35 | + position: relative; | ||
| 36 | + width: 100%; | ||
| 37 | + | ||
| 38 | + img { | ||
| 39 | + display: block; | ||
| 40 | + width: 100%; | ||
| 41 | + } | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | + .info-match { | ||
| 45 | + position: absolute; | ||
| 46 | + top: 0; | ||
| 47 | + left: 0; | ||
| 48 | + width: 130px; | ||
| 49 | + height: 50px; | ||
| 50 | + line-height: 50px; | ||
| 51 | + font-size: 28px; | ||
| 52 | + color: #fff; | ||
| 53 | + background: #000; | ||
| 54 | + text-align: center; | ||
| 55 | + text-decoration: none; | ||
| 56 | + z-index: 1; | ||
| 57 | + } | ||
| 58 | + | ||
| 59 | + .info-tag { | ||
| 60 | + position: absolute; | ||
| 61 | + top: 0; | ||
| 62 | + left: 105px; | ||
| 63 | + height: 50px; | ||
| 64 | + width: 50px; | ||
| 65 | + | ||
| 66 | + &.collocation { | ||
| 67 | + background-image: url('/guang/info/collocation.png'); | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + &.fashion-good { | ||
| 71 | + background-image: url('/guang/info/fashion-good.png'); | ||
| 72 | + } | ||
| 73 | + | ||
| 74 | + &.fashion-man { | ||
| 75 | + background-image: url('/guang/info/fashion-man.png'); | ||
| 76 | + } | ||
| 77 | + | ||
| 78 | + &.tip { | ||
| 79 | + background-image: url('/guang/info/tip.png'); | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + &.topic { | ||
| 83 | + background-image: url('/guang/info/topic.png'); | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + | ||
| 87 | + .info-deps { | ||
| 88 | + margin: 32px 0 0 0; | ||
| 89 | + padding: 0 40px 0 30px; | ||
| 90 | + | ||
| 91 | + .info-title-container { | ||
| 92 | + text-decoration: none; | ||
| 93 | + color: #000; | ||
| 94 | + } | ||
| 95 | + | ||
| 96 | + .info-title{ | ||
| 97 | + line-height: 44px; | ||
| 98 | + color: #000; | ||
| 99 | + font-size: 40px; | ||
| 100 | + font-weight:bold; | ||
| 101 | + | ||
| 102 | + } | ||
| 103 | + | ||
| 104 | + .info-text { | ||
| 105 | + margin: 16px 0 0 0; | ||
| 106 | + line-height: 46px; | ||
| 107 | + font-size: 28px; | ||
| 108 | + color: #444; | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + .time-view-like-share { | ||
| 112 | + margin-top: 16px; | ||
| 113 | + } | ||
| 114 | + } | ||
| 115 | +} |
static/sass/guang/_plus-star.css
0 → 100644
| 1 | +.ps-list-page { | ||
| 2 | + background-color: #f0f0f0; | ||
| 3 | + | ||
| 4 | + .nav-tab, .ps-content { | ||
| 5 | + width: 100%; | ||
| 6 | + } | ||
| 7 | + | ||
| 8 | + .nav-tab { | ||
| 9 | + height: 60px; | ||
| 10 | + padding: 10px 0; | ||
| 11 | + background-color: #fff; | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + .star-nav, .plus-nav { | ||
| 15 | + box-sizing: border-box; | ||
| 16 | + float: left; | ||
| 17 | + width: 50%; | ||
| 18 | + height: 60px; | ||
| 19 | + line-height: 60px; | ||
| 20 | + font-size: 16px; | ||
| 21 | + text-align: center; | ||
| 22 | + color: #ccc; | ||
| 23 | + | ||
| 24 | + &.focus { | ||
| 25 | + color: #000; | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + .bytouch{ | ||
| 29 | + background:#eee; | ||
| 30 | + } | ||
| 31 | + .star-nav { | ||
| 32 | + border-right: 1px solid #ccc; | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .plus-star-row { | ||
| 36 | + margin-bottom: 30px; | ||
| 37 | + | ||
| 38 | + &:last-child { | ||
| 39 | + margin-bottom: 0; | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + > a { | ||
| 43 | + display: block; | ||
| 44 | + height: 310px; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + .content.hide { | ||
| 49 | + display: none; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + .swiper-container { | ||
| 53 | + height: 310px; | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + .swiper-pagination-bullet-active { | ||
| 57 | + background: #fff; | ||
| 58 | + } | ||
| 59 | + | ||
| 60 | + .brand-deps { | ||
| 61 | + height: 40px; | ||
| 62 | + line-height: 40px; | ||
| 63 | + padding-left: 10px; | ||
| 64 | + font-size: 14px; | ||
| 65 | + background: #fff; | ||
| 66 | + max-width: 100%; | ||
| 67 | + overflow: hidden; | ||
| 68 | + white-space: nowrap; | ||
| 69 | + text-overflow: ellipsis; | ||
| 70 | + } | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +.ps-detail-page { | ||
| 74 | + background-color: #f0f0f0; | ||
| 75 | + | ||
| 76 | + .ps-block { | ||
| 77 | + margin-bottom: 30px; | ||
| 78 | + border-bottom: 1px solid #e0e0e0; | ||
| 79 | + border-top: 1px solid #e0e0e0; | ||
| 80 | + background-color: #fff; | ||
| 81 | + | ||
| 82 | + &.header, &.related-infos { | ||
| 83 | + border-top: none; | ||
| 84 | + } | ||
| 85 | + | ||
| 86 | + &.related-infos { | ||
| 87 | + margin-bottom: 0; | ||
| 88 | + background-color: #f0f0f0; | ||
| 89 | + } | ||
| 90 | + } | ||
| 91 | + | ||
| 92 | + .header { | ||
| 93 | + position: relative; | ||
| 94 | + | ||
| 95 | + .banner { | ||
| 96 | + width: 100%; | ||
| 97 | + height: 310px; | ||
| 98 | + } | ||
| 99 | + | ||
| 100 | + .logo { | ||
| 101 | + position: absolute; | ||
| 102 | + border: 1px solid #b5b5b5; | ||
| 103 | + height: 168px; | ||
| 104 | + width: 168px; | ||
| 105 | + top: 226px; | ||
| 106 | + left: 50px; | ||
| 107 | + } | ||
| 108 | + | ||
| 109 | + .header-content { | ||
| 110 | + padding: 0 30px; | ||
| 111 | + } | ||
| 112 | + | ||
| 113 | + .name-islike-container { | ||
| 114 | + padding-left: 248px; | ||
| 115 | + margin-top: 24px; | ||
| 116 | + font-size: 34px; | ||
| 117 | + } | ||
| 118 | + | ||
| 119 | + .name { | ||
| 120 | + color: #000; | ||
| 121 | + height: 41px; | ||
| 122 | + width: 295px; | ||
| 123 | + } | ||
| 124 | + | ||
| 125 | + .brand-islike { | ||
| 126 | + position: relative; | ||
| 127 | + float: right; | ||
| 128 | + color: #b0b0b0; | ||
| 129 | + height: 1.5rem; | ||
| 130 | + width: 1.5rem; | ||
| 131 | + line-height: 1.5rem; | ||
| 132 | + text-align: center; | ||
| 133 | + top: -0.25rem; | ||
| 134 | + left: -0.25rem; | ||
| 135 | + | ||
| 136 | + &.like { | ||
| 137 | + color: #f00; | ||
| 138 | + } | ||
| 139 | + } | ||
| 140 | + } | ||
| 141 | + | ||
| 142 | + .intro { | ||
| 143 | + margin-top: 49px; | ||
| 144 | + font-size: 24px; | ||
| 145 | + color: #444; | ||
| 146 | + line-height: 150%; | ||
| 147 | + } | ||
| 148 | + | ||
| 149 | + .more-intro { | ||
| 150 | + padding: 30px 0; | ||
| 151 | + font-size: 28px; | ||
| 152 | + line-height: 104%; | ||
| 153 | + color: #bbb; | ||
| 154 | + float: right; | ||
| 155 | + | ||
| 156 | + .icon { | ||
| 157 | + display: inline-block; | ||
| 158 | + height: 100%; | ||
| 159 | + width: 40px; | ||
| 160 | + transition: transform .1s ease-in; | ||
| 161 | + } | ||
| 162 | + | ||
| 163 | + &.spread .icon { | ||
| 164 | + transform: rotate(-180deg); | ||
| 165 | + } | ||
| 166 | + } | ||
| 167 | + | ||
| 168 | + .new-arrival { | ||
| 169 | + padding-left: 0 30px; | ||
| 170 | + | ||
| 171 | + .new-arrival-content { | ||
| 172 | + padding: 20px 14px; | ||
| 173 | + } | ||
| 174 | + | ||
| 175 | + .more-goods-container { | ||
| 176 | + height: 90px; | ||
| 177 | + padding: 0 30px; | ||
| 178 | + border-top: 1px solid #e0e0e0; | ||
| 179 | + color: #000; | ||
| 180 | + } | ||
| 181 | + | ||
| 182 | + .mg-text { | ||
| 183 | + height: 100%; | ||
| 184 | + line-height: 90px; | ||
| 185 | + color: #000; | ||
| 186 | + text-decoration: none; | ||
| 187 | + display: block; | ||
| 188 | + font-size: 16px; | ||
| 189 | + } | ||
| 190 | + | ||
| 191 | + .more-prods { | ||
| 192 | + float: right; | ||
| 193 | + color: #b0b0b0; | ||
| 194 | + } | ||
| 195 | + | ||
| 196 | + .new-arrival-header .more-prods { | ||
| 197 | + margin-right: 30px; | ||
| 198 | + margin-top: 10px; | ||
| 199 | + } | ||
| 200 | + | ||
| 201 | + } | ||
| 202 | + | ||
| 203 | + .new-arrival-header { | ||
| 204 | + padding-left: 222px; | ||
| 205 | + padding-top: 33px; | ||
| 206 | + | ||
| 207 | + .header-text { | ||
| 208 | + font-size: 28px; | ||
| 209 | + color: #000; | ||
| 210 | + line-height: 122%; | ||
| 211 | + font-weight: bold; | ||
| 212 | + } | ||
| 213 | + } | ||
| 214 | + | ||
| 215 | + | ||
| 216 | + .related-info-title { | ||
| 217 | + margin: 0 29px; | ||
| 218 | + border: 1px solid #e0e0e0; | ||
| 219 | + border-bottom: none; | ||
| 220 | + line-height: 72px; | ||
| 221 | + font-size: 30px; | ||
| 222 | + color: #b0b0b0; | ||
| 223 | + text-align: center; | ||
| 224 | + background-color: #fff; | ||
| 225 | + } | ||
| 226 | + | ||
| 227 | + .related-infos-container .guang-info:first-child { | ||
| 228 | + margin-top: 0; | ||
| 229 | + } | ||
| 230 | +} |
static/sass/guang/_tvls.css
0 → 100644
| 1 | +.time-view-like-share { | ||
| 2 | + color: #b0b0b0; | ||
| 3 | + line-height: 38px; | ||
| 4 | + height: 38px; | ||
| 5 | + font-size: 24px; | ||
| 6 | + | ||
| 7 | + .iconfont { | ||
| 8 | + vertical-align: 9%; | ||
| 9 | + margin-right: 4px; | ||
| 10 | + font-size: 24px; | ||
| 11 | + } | ||
| 12 | + | ||
| 13 | + .like-share-container { | ||
| 14 | + display: inline-block; | ||
| 15 | + float: right; | ||
| 16 | + | ||
| 17 | + > * { | ||
| 18 | + float: left; | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + .iconfont { | ||
| 22 | + position: relative; | ||
| 23 | + height: 60px; | ||
| 24 | + line-height: 60px; | ||
| 25 | + display: inline-block; | ||
| 26 | + | ||
| 27 | + color: #b0b0b0; | ||
| 28 | + width: 60px; | ||
| 29 | + top: -14px; | ||
| 30 | + font-size: 34px; | ||
| 31 | + text-align: center; | ||
| 32 | + margin-right: 0; | ||
| 33 | + outline: none; | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + .share-btn { | ||
| 37 | + margin-left: 20px; | ||
| 38 | + } | ||
| 39 | + | ||
| 40 | + .like-btn.like { | ||
| 41 | + color: #444; | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | + .collect-btn { | ||
| 45 | + margin-left: 20px; | ||
| 46 | + &.collected { | ||
| 47 | + color: #D62927; | ||
| 48 | + } | ||
| 49 | + } | ||
| 50 | + } | ||
| 51 | +} |
| @@ -181,8 +181,8 @@ a { | @@ -181,8 +181,8 @@ a { | ||
| 181 | @import "loading"; | 181 | @import "loading"; |
| 182 | @import "index/index"; | 182 | @import "index/index"; |
| 183 | @import "passport/index"; | 183 | @import "passport/index"; |
| 184 | -/* | ||
| 185 | @import "guang/index"; | 184 | @import "guang/index"; |
| 185 | +/* | ||
| 186 | @import "home/index"; | 186 | @import "home/index"; |
| 187 | @import "category/index"; | 187 | @import "category/index"; |
| 188 | @import "me/index"; | 188 | @import "me/index"; |
| @@ -50,7 +50,7 @@ | @@ -50,7 +50,7 @@ | ||
| 50 | width: 88px; | 50 | width: 88px; |
| 51 | height: 88px; | 51 | height: 88px; |
| 52 | margin: 0 14px; | 52 | margin: 0 14px; |
| 53 | - @include border-radius(50%); | 53 | + border-radius: 50%; |
| 54 | background-color: #333; | 54 | background-color: #333; |
| 55 | background-repeat: no-repeat; | 55 | background-repeat: no-repeat; |
| 56 | background-size: 100% 100%; | 56 | background-size: 100% 100%; |
-
Please register or login to post a comment