fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by zhangwenxue
Commit 99f52e5af06d042e5539a659d7bc84487fe05fe7 1 parent acbd4c8d

feat: adjust UI

Inline Side-by-side
Showing 2 changed files with 108 additions and 76 deletions
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 </div> 6 </div>
7 <div class="product-item" v-for="(product, idx) in list" :key="idx" @click="onItemClick(product)"> 7 <div class="product-item" v-for="(product, idx) in list" :key="idx" @click="onItemClick(product)">
8 <square-img :src="product.default_images" :width="300" :height="300" /> 8 <square-img :src="product.default_images" :width="300" :height="300" />
9 - <div class="name">{{product.product_name}}</div>  
10 - <div class="price">¥{{product.price}}</div> 9 + <div class="name"><span>{{product.product_name}}</span></div>
  10 + <div class="price"><i>¥</i>{{product.price}}</div>
11 </div> 11 </div>
12 </div> 12 </div>
13 </template> 13 </template>
@@ -38,21 +38,27 @@ export default { @@ -38,21 +38,27 @@ export default {
38 </script> 38 </script>
39 39
40 <style lang="scss" scoped> 40 <style lang="scss" scoped>
41 -@import "../product-detail"; 41 + @import "../product-detail";
  42 +
42 .associated-products { 43 .associated-products {
43 - display: flex;  
44 - flex-flow: wrap;  
45 - justify-content: space-between; 44 + margin-top: 30px;
  45 + display: flex;
  46 + flex-flow: wrap;
  47 + justify-content: space-between;
46 48
47 .header { 49 .header {
  50 + padding: 20px 0;
48 display: flex; 51 display: flex;
49 justify-content: space-between; 52 justify-content: space-between;
50 width: 100%; 53 width: 100%;
51 - font-size: 28px; 54 + font-size: 24px;
  55 + color: #999;
  56 + line-height: 50px;
52 } 57 }
53 58
54 .title { 59 .title {
55 - 60 + font-size: 36px;
  61 + color: #000;
56 } 62 }
57 63
58 .product-item { 64 .product-item {
@@ -63,14 +69,32 @@ export default { @@ -63,14 +69,32 @@ export default {
63 } 69 }
64 70
65 .name { 71 .name {
66 - white-space: nowrap;  
67 - overflow: hidden;  
68 - display: inline-block;  
69 - max-width: 100%; 72 + height: 64px;
  73 + display: flex;
  74 + flex-direction: column;
  75 + justify-content: center;
  76 + text-align: center;
  77 +
  78 + span {
  79 + display: block;
  80 + font-size: 20px;
  81 + line-height: 32px;
  82 + max-height: 64px;
  83 + word-break: break-all;
  84 + overflow: hidden;
  85 + }
70 } 86 }
71 87
72 .price { 88 .price {
73 font-weight: bold; 89 font-weight: bold;
  90 + font-size: 24px;
  91 + color: #d0021b;
  92 +
  93 + i {
  94 + font-style: normal;
  95 + font-size: 0.9em;
  96 + vertical-align: baseline;
  97 + }
74 } 98 }
75 } 99 }
76 </style> 100 </style>
1 <template> 1 <template>
2 <div class="layout"> 2 <div class="layout">
3 <LayoutHeader class="layout-header" :show-back="true"> 3 <LayoutHeader class="layout-header" :show-back="true">
4 - <template>  
5 - <transition name="fade">  
6 - <img-size v-show="headThumbnailVisible" class="title-thumbnail" :src="imageList && imageList[0] && imageList[0].image_url" :width="300" :height="300"/>  
7 - </transition>  
8 - </template>  
9 -  
10 - <template #opts>  
11 - <cube-button class="icon-fav" :light="true" v-if="productDetail.isFav" @click="_toggleFav(false)">  
12 - <svg id="icon-heart" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">  
13 - <title>heart</title>  
14 - <path d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313 0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281z"></path>  
15 - </svg>  
16 - </cube-button>  
17 - <cube-button class="icon-fav" :light="true" v-else @click="_toggleFav(true)">  
18 - <svg id="icon-heart-o" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">  
19 - <title>heart-o</title>  
20 - <path d="M26 9.312c0-4.391-2.969-5.313-5.469-5.313-2.328 0-4.953 2.516-5.766 3.484-0.375 0.453-1.156 0.453-1.531 0-0.812-0.969-3.437-3.484-5.766-3.484-2.5 0-5.469 0.922-5.469 5.313 0 2.859 2.891 5.516 2.922 5.547l9.078 8.75 9.063-8.734c0.047-0.047 2.938-2.703 2.938-5.563zM28 9.312c0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281s-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313z"></path>  
21 - </svg>  
22 - </cube-button>  
23 - </template> 4 + <transition name="fade">
  5 + <img-size v-show="headThumbnailVisible" class="title-thumbnail" :src="imageList && imageList[0] && imageList[0].image_url" :width="300" :height="300"/>
  6 + </transition>
24 </LayoutHeader> 7 </LayoutHeader>
25 <div class="layout-context fixscroll"> 8 <div class="layout-context fixscroll">
26 <cube-scroll 9 <cube-scroll
@@ -43,9 +26,11 @@ @@ -43,9 +26,11 @@
43 <div class="info"> 26 <div class="info">
44 <div class="info-price">¥{{productDetail.least_price||''}}</div> 27 <div class="info-price">¥{{productDetail.least_price||''}}</div>
45 <div class="info-name">{{productDetail.product_name}}</div> 28 <div class="info-name">{{productDetail.product_name}}</div>
  29 + </div>
46 <a class="banner" v-if="resource" :href="resource.url"> 30 <a class="banner" v-if="resource" :href="resource.url">
47 <img-size :src="sizeImg(resource.src)" :width="300" :height="60"/> 31 <img-size :src="sizeImg(resource.src)" :width="300" :height="60"/>
48 </a> 32 </a>
  33 + <div class="info">
49 <div class="info-list"> 34 <div class="info-list">
50 <div class="info-list-item" v-if="activity && activity.length !== 0" @click="showActivity"> 35 <div class="info-list-item" v-if="activity && activity.length !== 0" @click="showActivity">
51 <div class="info-list-name">促销</div> 36 <div class="info-list-name">促销</div>
@@ -71,8 +56,23 @@ @@ -71,8 +56,23 @@
71 </cube-scroll> 56 </cube-scroll>
72 </div> 57 </div>
73 <div class="footer"> 58 <div class="footer">
  59 + <div class="heart">
  60 + <div class="icon-fav" v-if="productDetail.isFav" @click="_toggleFav(false)">
  61 + <svg id="icon-heart" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">
  62 + <title>heart</title>
  63 + <path d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313 0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281z"></path>
  64 + </svg>
  65 + </div>
  66 + <div class="icon-fav" v-else @click="_toggleFav(true)">
  67 + <svg id="icon-heart-o" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">
  68 + <title>heart-o</title>
  69 + <path d="M26 9.312c0-4.391-2.969-5.313-5.469-5.313-2.328 0-4.953 2.516-5.766 3.484-0.375 0.453-1.156 0.453-1.531 0-0.812-0.969-3.437-3.484-5.766-3.484-2.5 0-5.469 0.922-5.469 5.313 0 2.859 2.891 5.516 2.922 5.547l9.078 8.75 9.063-8.734c0.047-0.047 2.938-2.703 2.938-5.563zM28 9.312c0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281s-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313z"></path>
  70 + </svg>
  71 + </div>
  72 + 收藏
  73 + </div>
74 <cube-button class="sell" @click="sell">出售</cube-button> 74 <cube-button class="sell" @click="sell">出售</cube-button>
75 - <cube-button class="buy" @click="buy">购买 <span>¥{{ productDetail.least_price || '-' }}</span></cube-button> 75 + <cube-button class="buy active" @click="buy">购买</cube-button>
76 </div> 76 </div>
77 <activity-list-sheet v-if="showActivitySheet" :list="activity" @hidden="onActivitySheetHidden"/> 77 <activity-list-sheet v-if="showActivitySheet" :list="activity" @hidden="onActivitySheetHidden"/>
78 <size-select-sheet v-if="showSizeSelectSheet" 78 <size-select-sheet v-if="showSizeSelectSheet"
@@ -334,6 +334,7 @@ export default { @@ -334,6 +334,7 @@ export default {
334 margin: 0 auto; 334 margin: 0 auto;
335 } 335 }
336 } 336 }
  337 +
337 .banner { 338 .banner {
338 padding: 20px 0 0; 339 padding: 20px 0 0;
339 display: block; 340 display: block;
@@ -372,17 +373,26 @@ export default { @@ -372,17 +373,26 @@ export default {
372 } 373 }
373 374
374 .info { 375 .info {
375 - padding: 0 40px; 376 + padding: 14px 40px;
376 377
377 &-price { 378 &-price {
378 - color: #08304b;  
379 - font-size: 40px; 379 + color: #d0021b;
  380 + font-size: 48px;
380 font-weight: bold; 381 font-weight: bold;
  382 + text-align: center;
  383 +
  384 + i {
  385 + font-style: normal;
  386 + font-size: 36px;
  387 + vertical-align: text-bottom;
  388 + }
381 } 389 }
382 390
383 &-name { 391 &-name {
384 - font-size: 30px;  
385 - line-height: 1.4; 392 + font-size: 28px;
  393 + color: #999;
  394 + text-align: center;
  395 + line-height: 32px;
386 } 396 }
387 397
388 &-list { 398 &-list {
@@ -393,34 +403,43 @@ export default { @@ -393,34 +403,43 @@ export default {
393 display: flex; 403 display: flex;
394 justify-content: space-between; 404 justify-content: space-between;
395 border-bottom: 1px solid #eee; 405 border-bottom: 1px solid #eee;
396 -  
397 - &:last-child {  
398 - border-bottom: 0;  
399 - } 406 + font-size: 28px;
  407 + box-sizing: border-box;
400 } 408 }
401 409
402 &-name { 410 &-name {
403 /* font-family: PingFang-SC-Regular; */ 411 /* font-family: PingFang-SC-Regular; */
404 - font-size: 28px;  
405 color: #999; 412 color: #999;
406 - letter-spacing: 0;  
407 } 413 }
408 414
409 &-value { 415 &-value {
410 /* font-family: SFProText-Medium; */ 416 /* font-family: SFProText-Medium; */
411 - font-size: 28px;  
412 color: #000; 417 color: #000;
413 letter-spacing: 0; 418 letter-spacing: 0;
414 - text-align: right;  
415 font-weight: bold; 419 font-weight: bold;
416 } 420 }
417 } 421 }
  422 +
  423 + .ref-img {
  424 + margin-top: 40px;
  425 + }
418 } 426 }
419 427
420 .ref-img { 428 .ref-img {
421 width: 100%; 429 width: 100%;
422 } 430 }
423 431
  432 + .recommend {
  433 + margin-top: 20px;
  434 +
  435 + h2 {
  436 + font-size: 36px;
  437 + line-height: 50px;
  438 + padding: 20px 0;
  439 + margin: 0 40px;
  440 + }
  441 + }
  442 +
424 .title-thumbnail { 443 .title-thumbnail {
425 height: 100%; 444 height: 100%;
426 } 445 }
@@ -428,42 +447,31 @@ export default { @@ -428,42 +447,31 @@ export default {
428 .footer { 447 .footer {
429 display: flex; 448 display: flex;
430 text-align: center; 449 text-align: center;
  450 + padding: 16px 30px;
431 451
432 - .sell,  
433 - .buy {  
434 - flex-basis: auto;  
435 - border-top: 1px solid $primary-color;  
436 - line-height: 60px;  
437 - font-size: 28px;  
438 - } 452 + @include cube-ufo-btn;
439 453
440 - .sell {  
441 - flex: 1;  
442 - color: $primary-color;  
443 - background: #fff; 454 + .heart {
  455 + margin-right: auto;
  456 + text-align: center;
  457 + width: 3em;
  458 + color: #888;
  459 + font-size: 22px;
  460 + line-height: 32px;
  461 +
  462 + svg {
  463 + width: 48px;
  464 + height: 48px;
  465 + color: #888;
  466 + fill: currentColor;
  467 + stroke: currentColor;
  468 + }
444 } 469 }
445 470
  471 + .sell,
446 .buy { 472 .buy {
447 - border-left: 1px solid $primary-color;  
448 - color: #fff;  
449 - flex: 2;  
450 - background-color: $primary-color;  
451 -  
452 - span {  
453 - color: $sub-color;  
454 - } 473 + flex: 0 0 6em;
455 } 474 }
456 } 475 }
457 476
458 - .associated-products {  
459 - margin: 40px 0;  
460 - }  
461 - .recommend {  
462 - h2 {  
463 - font-size: 40px;  
464 - line-height: 56px;  
465 - padding: 32px 0;  
466 - text-align: center;  
467 - }  
468 - }  
469 </style> 477 </style>