Commit d446d5e3fd6682cd72f884386cf6294c10dd3862
1 parent
58bd5992
收礼页面
Showing
7 changed files
with
88 additions
and
35 deletions
mall20200422.zip
0 → 100644
No preview for this file type
newDaren20200420.zip
0 → 100644
No preview for this file type
newDaren20200421.zip
0 → 100644
No preview for this file type
src/components/giftItem/giftItem.less
| @@ -17,11 +17,11 @@ | @@ -17,11 +17,11 @@ | ||
| 17 | border-radius: 50px; | 17 | border-radius: 50px; |
| 18 | } | 18 | } |
| 19 | .name{ | 19 | .name{ |
| 20 | - height:40px; | 20 | + height:50px; |
| 21 | font-size:28px; | 21 | font-size:28px; |
| 22 | font-weight:400; | 22 | font-weight:400; |
| 23 | color:rgba(51,51,51,1); | 23 | color:rgba(51,51,51,1); |
| 24 | - line-height:40px; | 24 | + line-height:50px; |
| 25 | margin-left: 20px; | 25 | margin-left: 20px; |
| 26 | } | 26 | } |
| 27 | .btn{ | 27 | .btn{ |
| @@ -108,40 +108,49 @@ | @@ -108,40 +108,49 @@ | ||
| 108 | } | 108 | } |
| 109 | .steps_box{ | 109 | .steps_box{ |
| 110 | margin-top: 58px; | 110 | margin-top: 58px; |
| 111 | - .box{ | 111 | + .line_box { |
| 112 | display: flex; | 112 | display: flex; |
| 113 | - .item{ | ||
| 114 | - .img{ | ||
| 115 | - width:16px; | ||
| 116 | - height:16px; | ||
| 117 | - border-radius: 16px; | ||
| 118 | - border:3px solid rgba(202,202,202,1); | ||
| 119 | - margin: auto; | ||
| 120 | - } | ||
| 121 | - .desc{ | ||
| 122 | - height:30px; | ||
| 123 | - font-size:22px; | ||
| 124 | - font-weight:400; | ||
| 125 | - color:rgba(202,202,202,1); | ||
| 126 | - line-height:30px; | ||
| 127 | - margin-top: 20px; | 113 | + .box { |
| 114 | + height: 16px; | ||
| 115 | + .item { | ||
| 116 | + display: flex; | ||
| 117 | + .img { | ||
| 118 | + width: 16px; | ||
| 119 | + height: 16px; | ||
| 120 | + background: url("/static/img/spot.png") no-repeat top; | ||
| 121 | + background-size: 100%; | ||
| 122 | + } | ||
| 123 | + .line_box { | ||
| 124 | + height: 19px; | ||
| 125 | + display: flex; | ||
| 126 | + align-items: center; | ||
| 127 | + margin: 0 13px; | ||
| 128 | + .line { | ||
| 129 | + width: 130px; | ||
| 130 | + height: 1px; | ||
| 131 | + background: rgba(240, 240, 240, 1); | ||
| 132 | + } | ||
| 133 | + } | ||
| 128 | } | 134 | } |
| 129 | } | 135 | } |
| 130 | - .line_box { | ||
| 131 | - height: 19px; | ||
| 132 | - display: flex; | ||
| 133 | - align-items: center; | ||
| 134 | - .line { | ||
| 135 | - width: 130px; | ||
| 136 | - height: 1px; | ||
| 137 | - background: rgba(240, 240, 240, 1); | ||
| 138 | - margin: auto 16px; | ||
| 139 | - } | 136 | + } |
| 137 | + .desc_box{ | ||
| 138 | + display: flex; | ||
| 139 | + justify-content: space-between; | ||
| 140 | + margin-top: 17px; | ||
| 141 | + .desc{ | ||
| 142 | + width: 88px; | ||
| 143 | + height:30px; | ||
| 144 | + font-size:22px; | ||
| 145 | + font-weight:400; | ||
| 146 | + color:rgba(202,202,202,1); | ||
| 147 | + line-height:30px; | ||
| 148 | + margin-top: 20px; | ||
| 140 | } | 149 | } |
| 141 | } | 150 | } |
| 142 | .box:last-child{ | 151 | .box:last-child{ |
| 143 | - .line_box{ | ||
| 144 | - display: flex; | 152 | + .item .line_box{ |
| 153 | + display: none; | ||
| 145 | } | 154 | } |
| 146 | } | 155 | } |
| 147 | } | 156 | } |
src/components/giftItem/giftItem.vue
| @@ -28,21 +28,65 @@ | @@ -28,21 +28,65 @@ | ||
| 28 | </div> | 28 | </div> |
| 29 | <!--步骤条--> | 29 | <!--步骤条--> |
| 30 | <div class="steps_box"> | 30 | <div class="steps_box"> |
| 31 | + <div class="line_box"> | ||
| 31 | <div class="box"> | 32 | <div class="box"> |
| 32 | <div class="item"> | 33 | <div class="item"> |
| 33 | <div class="img"> | 34 | <div class="img"> |
| 35 | + </div> | ||
| 36 | + <div class="line_box"> | ||
| 37 | + <div class="line"> | ||
| 34 | 38 | ||
| 39 | + </div> | ||
| 35 | </div> | 40 | </div> |
| 36 | - <!--<img src="/static/img/1.png"/>--> | ||
| 37 | - <div class="desc"> | ||
| 38 | - 点击送礼 | 41 | + </div> |
| 42 | + </div> | ||
| 43 | + <div class="box"> | ||
| 44 | + <div class="item"> | ||
| 45 | + <div class="img"> | ||
| 46 | + </div> | ||
| 47 | + <div class="line_box"> | ||
| 48 | + <div class="line"> | ||
| 49 | + | ||
| 50 | + </div> | ||
| 51 | + </div> | ||
| 39 | </div> | 52 | </div> |
| 40 | </div> | 53 | </div> |
| 41 | - <div class="line_box"> | ||
| 42 | - <div class="line"> | 54 | + <div class="box"> |
| 55 | + <div class="item"> | ||
| 56 | + <div class="img"> | ||
| 57 | + </div> | ||
| 58 | + <div class="line_box"> | ||
| 59 | + <div class="line"> | ||
| 60 | + | ||
| 61 | + </div> | ||
| 62 | + </div> | ||
| 63 | + </div> | ||
| 64 | + </div> | ||
| 65 | + <div class="box"> | ||
| 66 | + <div class="item"> | ||
| 67 | + <div class="img"> | ||
| 68 | + </div> | ||
| 69 | + <div class="line_box"> | ||
| 70 | + <div class="line"> | ||
| 43 | 71 | ||
| 72 | + </div> | ||
| 73 | + </div> | ||
| 74 | + </div> | ||
| 44 | </div> | 75 | </div> |
| 45 | </div> | 76 | </div> |
| 77 | + <div class="desc_box"> | ||
| 78 | + <div class="desc"> | ||
| 79 | + 点击送礼 | ||
| 80 | + </div> | ||
| 81 | + <div class="desc"> | ||
| 82 | + 填写地址 | ||
| 83 | + </div> | ||
| 84 | + <div class="desc"> | ||
| 85 | + 商家发货 | ||
| 86 | + </div> | ||
| 87 | + <div class="desc"> | ||
| 88 | + 确认收货 | ||
| 89 | + </div> | ||
| 46 | </div> | 90 | </div> |
| 47 | </div> | 91 | </div> |
| 48 | </div> | 92 | </div> |
static/img/spot.png
0 → 100644
568 Bytes
static/img/spot_active.png
0 → 100644
912 Bytes