Showing
8 changed files
with
111 additions
and
370 deletions
| @@ -3,100 +3,68 @@ | @@ -3,100 +3,68 @@ | ||
| 3 | {{> navigation}} | 3 | {{> navigation}} |
| 4 | 4 | ||
| 5 | <div class="me-main"> | 5 | <div class="me-main"> |
| 6 | - <div class="my-vip block"> | ||
| 7 | - <h2 class="title"></h2> | ||
| 8 | - {{#unless commonVip}} | 6 | + <div class="member-progress block"> |
| 7 | + <h2 class="title"><a class="ident right cursor-p">查看成长值记录></a></h2> | ||
| 9 | <div class="vip-level"> | 8 | <div class="vip-level"> |
| 10 | - <span class="level">您的会员级别：</span> | ||
| 11 | - <div class="vipimg{{level}}"></div> | ||
| 12 | - </div> | 9 | + <div class="user"> |
| 10 | + <div class="group"> | ||
| 11 | + <span class="name">拉拉</span> | ||
| 12 | + <span class="vip-img"></span> | ||
| 13 | + <span class="info"> | ||
| 14 | + 我的成长值:<span class="adolesce-val">2250</span> | ||
| 15 | + 下次升级还需:<span class="adolesce-val">2750</span> | ||
| 16 | + </span> | ||
| 17 | + </div> | ||
| 18 | + <div class="progress-f"> | ||
| 19 | + <div class="progress-center"> | ||
| 20 | + <ul class="progress"> | ||
| 21 | + <li> | ||
| 22 | + <div class="p-footer"> | ||
| 23 | + <p>普通会员</p> | ||
| 24 | + <p>0</p> | ||
| 25 | + </div> | ||
| 26 | + </li> | ||
| 27 | + <li> | ||
| 28 | + <div class="p-footer"> | ||
| 29 | + <p>银卡会员</p> | ||
| 30 | + <p>800</p> | ||
| 31 | + </div> | ||
| 32 | + </li> | ||
| 33 | + <li> | ||
| 34 | + <div class="p-footer"> | ||
| 35 | + <p>金卡会员</p> | ||
| 36 | + <p>3000</p> | ||
| 37 | + </div> | ||
| 38 | + </li> | ||
| 39 | + <li class="last"> | ||
| 40 | + <div class="p-footer"> | ||
| 41 | + <p>白金会员</p> | ||
| 42 | + <p>7000</p> | ||
| 43 | + </div> | ||
| 44 | + </li> | ||
| 45 | + </ul> | ||
| 46 | + </div> | ||
| 47 | + </div> | ||
| 48 | + </div> | ||
| 49 | + <div class="info"> | ||
| 13 | 50 | ||
| 14 | - <div class="vip-level"> | ||
| 15 | - <span class="level">当前可享优惠：</span> | ||
| 16 | - <div class="favimg"> | ||
| 17 | - {{#each list}} | ||
| 18 | - <div class="list"> | ||
| 19 | - <img src="{{image2 imgType}}" class="imgsrc"/> | ||
| 20 | - <div class="fav-font">{{favTxt}}</div> | ||
| 21 | </div> | 51 | </div> |
| 22 | - {{/each}} | ||
| 23 | </div> | 52 | </div> |
| 24 | </div> | 53 | </div> |
| 25 | - {{/unless}} | ||
| 26 | - | ||
| 27 | 54 | ||
| 55 | + <div class="member-info block"> | ||
| 56 | + <h2 class="title"></h2> | ||
| 28 | <div class="vip-level"> | 57 | <div class="vip-level"> |
| 29 | - <span class="level">年度累计金额：</span> | ||
| 30 | - <div class="year-amount"> | ||
| 31 | - <div class="amount">￥{{yearCost}}</div> | ||
| 32 | - <span class="ps">VIP金额累计需要订单成功签收且无退换货</span> | ||
| 33 | - {{#if platinum}} | ||
| 34 | - <div class="plalevel"></div> | ||
| 35 | - {{else}} | ||
| 36 | - <div class="amount-length"> | ||
| 37 | - <div class="img-length"> | ||
| 38 | - <div class="amount-left"> | ||
| 39 | - <div class="img-left" style="width:{{proportion}}"></div> | ||
| 40 | - <div class="img-right"></div> | ||
| 41 | - </div> | ||
| 42 | - <div class="letter"> | ||
| 43 | - {{yearCost}}/<span class="sum">{{nextCost}}</span> | ||
| 44 | - </div> | ||
| 45 | - </div> | ||
| 46 | - </div> | ||
| 47 | - <div class="change-img{{level}}"></div> | ||
| 48 | - <div class="balance"> | ||
| 49 | - <p>还差￥<span class="balan">{{balan}}</span>元就可以升级为{{vipLevel}}！</p> | ||
| 50 | - <a href="{{morePreferences}}">更多优惠</a> | ||
| 51 | - </div> | ||
| 52 | - {{/if}} | ||
| 53 | - </div> | ||
| 54 | - </div> | ||
| 55 | - | ||
| 56 | - <div class="history"> | ||
| 57 | - <div class="level">历史消费总额： | ||
| 58 | - <span class="hisamout">￥{{totalCost}}</span> | 58 | + 99999999999999999999999999999 |
| 59 | </div> | 59 | </div> |
| 60 | </div> | 60 | </div> |
| 61 | 61 | ||
| 62 | - <div class="line"></div> | ||
| 63 | - {{#unless commonVip}} | ||
| 64 | - <div class="valid"> | ||
| 65 | - <div class="level">当前有效期：</div> | ||
| 66 | - <div class="valid-time"> | ||
| 67 | - <div class="time-line"></div> | ||
| 68 | - <div class="time1"> | ||
| 69 | - <div class="time1-img"></div> | ||
| 70 | - </div> | ||
| 71 | - <div class="time2"> | ||
| 72 | - <div class="time-top"> | ||
| 73 | - <span>{{reach}}</span><br>条件达成日期 | ||
| 74 | - </div> | ||
| 75 | - <div class="time2-img"></div> | ||
| 76 | - </div> | ||
| 77 | - <div class="time3"> | ||
| 78 | - <div class="time-left"> | ||
| 79 | - <span>{{valid}}</span><br>生效日期 | ||
| 80 | - </div> | ||
| 81 | - <div class="time-right"> | ||
| 82 | - <span>{{end}}</span><br>优惠截止日期 | ||
| 83 | - </div> | ||
| 84 | - <div class="time3-img">VIP有效期{{remainDays}}天（数字年）</div> | ||
| 85 | - </div> | ||
| 86 | - <div class="time4"> | ||
| 87 | - <div class="time-top"> | ||
| 88 | - <a href="{{morePreferences}}">延长有效期></a> | ||
| 89 | - </div> | ||
| 90 | - <div class="time4-img"></div> | ||
| 91 | - </div> | 62 | + <div class="member-legal block"> |
| 63 | + <h2 class="title"></h2> | ||
| 64 | + <div class="vip-level"> | ||
| 65 | + 99999999999999999999999999999 | ||
| 92 | </div> | 66 | </div> |
| 93 | </div> | 67 | </div> |
| 94 | - <div class="line"></div> | ||
| 95 | - {{/unless}} | ||
| 96 | 68 | ||
| 97 | - <div class="doubt"> | ||
| 98 | - | ||
| 99 | - </div> | ||
| 100 | - </div> | ||
| 101 | </div> | 69 | </div> |
| 102 | </div> | 70 | </div> |
public/img/home/vip-img/member-info.png
0 → 100644
1.96 KB
public/img/home/vip-img/member-legal.png
0 → 100644
1.71 KB
public/img/home/vip-img/member-progress.png
0 → 100644
2.04 KB
public/img/home/vip-img/vip-3.png
0 → 100644
1.67 KB
public/img/home/vip-img/vip-member.png
0 → 100644
3.07 KB
| 1 | .vip-me-page { | 1 | .vip-me-page { |
| 2 | + .member-progress { | ||
| 2 | .title { | 3 | .title { |
| 3 | - background-image: resolve(home/vip-img/vip-title.png); | 4 | + background-image: resolve(home/vip-img/member-progress.png); |
| 4 | } | 5 | } |
| 5 | - | ||
| 6 | - .vip-level { | ||
| 7 | - clear: both; | ||
| 8 | - overflow: hidden; | ||
| 9 | - } | ||
| 10 | - | ||
| 11 | - .level { | ||
| 12 | - margin: 20px 15px 0 40px; | ||
| 13 | - line-height: 31px; | ||
| 14 | - float: left; | ||
| 15 | - clear: both; | ||
| 16 | - font-size: 14px; | ||
| 17 | - color: #000; | ||
| 18 | - } | ||
| 19 | - | ||
| 20 | - .vipimg1 { | ||
| 21 | - margin-top: 20px; | ||
| 22 | - width: 138px; | ||
| 23 | - height: 31px; | ||
| 24 | - float: left; | ||
| 25 | - background-image: resolve(home/vip-img/silver-vip.png); | ||
| 26 | } | 6 | } |
| 27 | 7 | ||
| 28 | - .vipimg2 { | ||
| 29 | - margin-top: 20px; | ||
| 30 | - width: 138px; | ||
| 31 | - height: 31px; | ||
| 32 | - float: left; | ||
| 33 | - background-image: resolve(home/vip-img/gold-vip.png); | ||
| 34 | - } | ||
| 35 | - | ||
| 36 | - .vipimg3 { | ||
| 37 | - margin-top: 20px; | ||
| 38 | - width: 138px; | ||
| 39 | - height: 31px; | ||
| 40 | - float: left; | ||
| 41 | - background-image: resolve(home/vip-img/platinum-vip.png); | ||
| 42 | - } | ||
| 43 | - | ||
| 44 | - .favimg { | ||
| 45 | - float: left; | ||
| 46 | - width: 645px; | ||
| 47 | - margin-top: 20px; | ||
| 48 | - overflow: hidden; | ||
| 49 | - } | ||
| 50 | - | ||
| 51 | - .list { | ||
| 52 | - width: 145px; | ||
| 53 | - float: left; | ||
| 54 | - margin: 0 10px 8px 0; | ||
| 55 | - } | ||
| 56 | - | ||
| 57 | - .imgsrc { | ||
| 58 | - width: 25px; | ||
| 59 | - float: left; | ||
| 60 | - margin-top: 5px; | 8 | + .member-info { |
| 9 | + .title { | ||
| 10 | + background-image: resolve(home/vip-img/member-info.png); | ||
| 61 | } | 11 | } |
| 62 | - | ||
| 63 | - .fav-font { | ||
| 64 | - line-height: 31px; | ||
| 65 | - font-size: 12px; | ||
| 66 | - margin-left: 30px; | ||
| 67 | - color: #000; | ||
| 68 | } | 12 | } |
| 69 | 13 | ||
| 70 | - .year-amount { | ||
| 71 | - float: left; | ||
| 72 | - width: 600px; | ||
| 73 | - margin-top: 20px; | 14 | + .member-legal { |
| 15 | + .title { | ||
| 16 | + background-image: resolve(home/vip-img/member-legal.png); | ||
| 74 | } | 17 | } |
| 75 | - | ||
| 76 | - .amount { | ||
| 77 | - font-size: 14px; | ||
| 78 | - font-weight: bold; | ||
| 79 | - float: left; | ||
| 80 | - line-height: 31px; | ||
| 81 | } | 18 | } |
| 82 | 19 | ||
| 83 | - .ps { | ||
| 84 | - margin-left: 30px; | 20 | + .ident { |
| 21 | + color: #d0021b; | ||
| 85 | font-size: 14px; | 22 | font-size: 14px; |
| 86 | - font-weight: bold; | ||
| 87 | - line-height: 31px; | ||
| 88 | - } | ||
| 89 | - | ||
| 90 | - .plalevel { | ||
| 91 | - margin-top: 7px; | ||
| 92 | - width: 160px; | ||
| 93 | - height: 21px; | ||
| 94 | - background-image: resolve(home/vip-img/platinum.png); | ||
| 95 | - } | ||
| 96 | - | ||
| 97 | - .amount-length { | ||
| 98 | - width: 400px; | ||
| 99 | - height: 15px; | ||
| 100 | - margin-bottom: 5px; | ||
| 101 | - } | ||
| 102 | - | ||
| 103 | - .img-length { | ||
| 104 | - width: 293px; | ||
| 105 | - height: 12px; | ||
| 106 | - background-color: #e0e0e0; | ||
| 107 | } | 23 | } |
| 108 | 24 | ||
| 109 | - .amount-left { | ||
| 110 | - width: 298px; | ||
| 111 | - height: 12px; | ||
| 112 | - overflow: hidden; | ||
| 113 | - float: left; | ||
| 114 | - } | ||
| 115 | - | ||
| 116 | - .img-left { | ||
| 117 | - height: 12px; | ||
| 118 | - background-color: #cda16c; | ||
| 119 | - z-index: 10; | ||
| 120 | - float: left; | ||
| 121 | - } | ||
| 122 | - | ||
| 123 | - .img-right { | ||
| 124 | - width: 5px; | ||
| 125 | - height: 12px; | ||
| 126 | - float: left; | ||
| 127 | - z-index: 10; | ||
| 128 | - background-image: url("/home/vip-img/vip-length-left.png"); | ||
| 129 | - margin-left: -5px; | 25 | + .cursor-p { |
| 26 | + cursor: pointer; | ||
| 130 | } | 27 | } |
| 131 | 28 | ||
| 132 | - .letter { | ||
| 133 | - width: 100px; | ||
| 134 | - font-size: 12px; | ||
| 135 | - margin-left: 303px; | ||
| 136 | - line-height: 10px; | ||
| 137 | - margin-bottom: 2px; | ||
| 138 | - } | ||
| 139 | - | ||
| 140 | - .change-img0 { | ||
| 141 | - width: 293px; | ||
| 142 | - height: 18px; | ||
| 143 | - background-image: resolve(home/vip-img/vip-change1.png); | ||
| 144 | - } | ||
| 145 | - | ||
| 146 | - .change-img1 { | ||
| 147 | - width: 293px; | ||
| 148 | - height: 18px; | ||
| 149 | - background-image: resolve(home/vip-img/vip-change2.png); | ||
| 150 | - } | ||
| 151 | - | ||
| 152 | - .change-img2 { | ||
| 153 | - width: 293px; | ||
| 154 | - height: 18px; | ||
| 155 | - background-image: resolve(home/vip-img/vip-change3.png); | ||
| 156 | - } | ||
| 157 | - | ||
| 158 | - .balance { | ||
| 159 | - margin-top: 7px; | ||
| 160 | - font-size: 13px; | ||
| 161 | - font-weight: bold; | ||
| 162 | - margin-bottom: 10px; | ||
| 163 | - | ||
| 164 | - p { | ||
| 165 | - float: left; | ||
| 166 | - } | ||
| 167 | - | ||
| 168 | - a { | ||
| 169 | - color: red; | ||
| 170 | - margin-left: 10px; | ||
| 171 | - float: left; | ||
| 172 | - } | ||
| 173 | - } | ||
| 174 | - | ||
| 175 | - .history { | ||
| 176 | - margin-top: 10px; | ||
| 177 | - clear: both; | ||
| 178 | - overflow: hidden; | ||
| 179 | - } | ||
| 180 | - | ||
| 181 | - .hisamout { | ||
| 182 | - margin-left: 10px; | ||
| 183 | - } | ||
| 184 | - | ||
| 185 | - .line { | 29 | + .vip-level { |
| 186 | clear: both; | 30 | clear: both; |
| 187 | - width: 703px; | ||
| 188 | - height: 1px; | ||
| 189 | - margin-bottom: 5px; | ||
| 190 | - margin-left: 40px; | ||
| 191 | - margin-top: 25px; | ||
| 192 | - background-color: #e8e8e8; | ||
| 193 | overflow: hidden; | 31 | overflow: hidden; |
| 32 | + padding: 10px; | ||
| 194 | } | 33 | } |
| 195 | 34 | ||
| 196 | - .valid { | ||
| 197 | - overflow: hidden; | ||
| 198 | - } | ||
| 199 | - | ||
| 200 | - .valid-time { | ||
| 201 | - clear: both; | ||
| 202 | - width: 720px; | ||
| 203 | - height: 175px; | ||
| 204 | - margin-left: 40px; | ||
| 205 | - position: relative; | 35 | + .vip-level .user { |
| 206 | font-size: 14px; | 36 | font-size: 14px; |
| 207 | - } | ||
| 208 | 37 | ||
| 209 | - .time1 { | ||
| 210 | - float: left; | ||
| 211 | - width: 135px; | ||
| 212 | - height: 135px; | ||
| 213 | - border-right: 2px dashed black; | ||
| 214 | - } | ||
| 215 | - | ||
| 216 | - .time1-img { | ||
| 217 | - margin-top: 95px; | ||
| 218 | - width: 130px; | ||
| 219 | - height: 33px; | ||
| 220 | - background-image: resolve(home/vip-img/time1.png); | 38 | + .vip-img { |
| 39 | + background: resolve(home/vip-img/vip-3.png) no-repeat; | ||
| 40 | + background-size: 100%; | ||
| 41 | + width: 42px; | ||
| 42 | + height: 18px; | ||
| 43 | + display: inline-block; | ||
| 44 | + vertical-align: middle; | ||
| 45 | + margin-right: 50px; | ||
| 221 | } | 46 | } |
| 222 | 47 | ||
| 223 | - .time2 { | ||
| 224 | - float: left; | ||
| 225 | - width: 129px; | ||
| 226 | - height: 175px; | ||
| 227 | - border-right: 2px dashed black; | 48 | + .adolesce-val { |
| 49 | + font-size: 16px; | ||
| 50 | + color: #000; | ||
| 228 | } | 51 | } |
| 229 | 52 | ||
| 230 | - .time3 { | ||
| 231 | - float: left; | ||
| 232 | - width: 354px; | ||
| 233 | - height: 175px; | ||
| 234 | - border-right: 2px dashed black; | 53 | + .progress-f { |
| 54 | + text-align: center; | ||
| 235 | } | 55 | } |
| 236 | 56 | ||
| 237 | - .time4 { | ||
| 238 | - float: left; | ||
| 239 | - width: 90px; | ||
| 240 | - height: 155px; | ||
| 241 | - } | 57 | + .progress { |
| 58 | + width: 690px; | ||
| 59 | + height: 60px; | ||
| 60 | + border-top: 2px solid #999; | ||
| 61 | + margin-top: 20px; | ||
| 62 | + display: inline-block; | ||
| 242 | 63 | ||
| 243 | - .time-top { | 64 | + &:before { |
| 65 | + content: ""; | ||
| 66 | + width: 85%; | ||
| 67 | + height: 2px; | ||
| 68 | + position: relative; | ||
| 69 | + background-color: #000; | ||
| 70 | + margin-top: -2px; | ||
| 244 | display: block; | 71 | display: block; |
| 245 | - font-size: 13px; | ||
| 246 | - margin-top: 10px; | ||
| 247 | - margin-left: 10px; | ||
| 248 | - line-height: 18px; | ||
| 249 | - | ||
| 250 | - span { | ||
| 251 | - font-weight: bold; | ||
| 252 | - } | ||
| 253 | - | ||
| 254 | - a { | ||
| 255 | - color: red; | ||
| 256 | - } | ||
| 257 | } | 72 | } |
| 258 | 73 | ||
| 259 | - .time2-img { | ||
| 260 | - margin-top: 47px; | ||
| 261 | - width: 131px; | ||
| 262 | - height: 33px; | ||
| 263 | - background-color: #ecdbca; | ||
| 264 | - } | ||
| 265 | - | ||
| 266 | - .time-left { | 74 | + li { |
| 267 | float: left; | 75 | float: left; |
| 268 | - display: block; | ||
| 269 | - font-size: 13px; | ||
| 270 | - margin-top: 10px; | ||
| 271 | - margin-left: 10px; | ||
| 272 | - line-height: 18px; | 76 | + width: 33.33%; |
| 77 | + text-align: left; | ||
| 273 | 78 | ||
| 274 | - span { | ||
| 275 | - font-weight: bold; | ||
| 276 | - } | 79 | + &:before { |
| 80 | + content: ""; | ||
| 81 | + width: 14px; | ||
| 82 | + height: 14px; | ||
| 83 | + position: relative; | ||
| 84 | + display: inline-block; | ||
| 85 | + top: -8px; | ||
| 86 | + background: resolve(home/vip-img/vip-member.png) no-repeat; | ||
| 87 | + background-size: 100%; | ||
| 88 | + left: -4px; | ||
| 277 | } | 89 | } |
| 278 | 90 | ||
| 279 | - .time-right { | ||
| 280 | - float: right; | ||
| 281 | - display: block; | ||
| 282 | - font-size: 13px; | ||
| 283 | - margin-top: 10px; | ||
| 284 | - margin-right: 10px; | ||
| 285 | - line-height: 18px; | ||
| 286 | - | ||
| 287 | - span { | ||
| 288 | - font-weight: bold; | ||
| 289 | - } | 91 | + &.last { |
| 92 | + width: 0; | ||
| 290 | } | 93 | } |
| 291 | 94 | ||
| 292 | - .time3-img { | ||
| 293 | - color: #fff; | ||
| 294 | - line-height: 33px; | ||
| 295 | - margin-top: 93px; | ||
| 296 | - width: 356px; | ||
| 297 | - height: 33px; | ||
| 298 | - background-color: #cda16d; | 95 | + .p-footer { |
| 96 | + position: absolute; | ||
| 97 | + margin-left: -20px; | ||
| 299 | text-align: center; | 98 | text-align: center; |
| 300 | } | 99 | } |
| 301 | 100 | ||
| 302 | - .time4-img { | ||
| 303 | - margin-top: 65px; | ||
| 304 | - width: 62px; | ||
| 305 | - height: 33px; | ||
| 306 | - border-color: #ecdbca #fff transparent transparent; | ||
| 307 | - border-style: solid solid dashed dashed; | ||
| 308 | - border-width: 33px 20px 0 0; | 101 | + .p-footer p { |
| 102 | + margin-top: 3px; | ||
| 309 | } | 103 | } |
| 310 | - | ||
| 311 | - .doubt { | ||
| 312 | - margin-left: 40px; | ||
| 313 | - margin-bottom: 25px; | ||
| 314 | - margin-top: 20px; | ||
| 315 | - font-size: 14px; | ||
| 316 | - | ||
| 317 | - a { | ||
| 318 | - float: right; | ||
| 319 | - margin-right: 55px; | ||
| 320 | } | 104 | } |
| 321 | } | 105 | } |
| 322 | - | ||
| 323 | - .tell { | ||
| 324 | - color: red; | ||
| 325 | - } | ||
| 326 | - | ||
| 327 | - .time-line { | ||
| 328 | - position: absolute; | ||
| 329 | - width: 703px; | ||
| 330 | - height: 2px; | ||
| 331 | - background-color: #e8e8e8; | ||
| 332 | - margin-top: 65px; | ||
| 333 | } | 106 | } |
| 334 | } | 107 | } |
-
Please register or login to post a comment