Authored by 郝肖肖

会员等级 进度条

... ... @@ -3,100 +3,68 @@
{{> navigation}}
<div class="me-main">
<div class="my-vip block">
<h2 class="title"></h2>
{{#unless commonVip}}
<div class="member-progress block">
<h2 class="title"><a class="ident right cursor-p">查看成长值记录></a></h2>
<div class="vip-level">
<span class="level">您的会员级别:</span>
<div class="vipimg{{level}}"></div>
</div>
<div class="vip-level">
<span class="level">当前可享优惠:</span>
<div class="favimg">
{{#each list}}
<div class="list">
<img src="{{image2 imgType}}" class="imgsrc"/>
<div class="fav-font">{{favTxt}}</div>
<div class="user">
<div class="group">
<span class="name">拉拉</span>
<span class="vip-img"></span>
<span class="info">
我的成长值:<span class="adolesce-val">2250</span>&nbsp;&nbsp;
下次升级还需:<span class="adolesce-val">2750</span>
</span>
</div>
{{/each}}
</div>
</div>
{{/unless}}
<div class="vip-level">
<span class="level">年度累计金额:</span>
<div class="year-amount">
<div class="amount">{{yearCost}}</div>
<span class="ps">VIP金额累计需要订单成功签收且无退换货</span>
{{#if platinum}}
<div class="plalevel"></div>
{{else}}
<div class="amount-length">
<div class="img-length">
<div class="amount-left">
<div class="img-left" style="width:{{proportion}}"></div>
<div class="img-right"></div>
</div>
<div class="letter">
{{yearCost}}/<span class="sum">{{nextCost}}</span>
</div>
<div class="progress-f">
<div class="progress-center">
<ul class="progress">
<li>
<div class="p-footer">
<p>普通会员</p>
<p>0</p>
</div>
</li>
<li>
<div class="p-footer">
<p>银卡会员</p>
<p>800</p>
</div>
</li>
<li>
<div class="p-footer">
<p>金卡会员</p>
<p>3000</p>
</div>
</li>
<li class="last">
<div class="p-footer">
<p>白金会员</p>
<p>7000</p>
</div>
</li>
</ul>
</div>
</div>
<div class="change-img{{level}}"></div>
<div class="balance">
<p>还差¥<span class="balan">{{balan}}</span>元就可以升级为{{vipLevel}}</p>
<a href="{{morePreferences}}">更多优惠</a>
</div>
{{/if}}
</div>
</div>
<div class="info">
<div class="history">
<div class="level">历史消费总额:
<span class="hisamout">{{totalCost}}</span>
</div>
</div>
</div>
<div class="line"></div>
{{#unless commonVip}}
<div class="valid">
<div class="level">当前有效期:</div>
<div class="valid-time">
<div class="time-line"></div>
<div class="time1">
<div class="time1-img"></div>
</div>
<div class="time2">
<div class="time-top">
<span>{{reach}}</span><br>条件达成日期
</div>
<div class="time2-img"></div>
</div>
<div class="time3">
<div class="time-left">
<span>{{valid}}</span><br>生效日期
</div>
<div class="time-right">
<span>{{end}}</span><br>优惠截止日期
</div>
<div class="time3-img">VIP有效期{{remainDays}}天(数字年)</div>
</div>
<div class="time4">
<div class="time-top">
<a href="{{morePreferences}}">延长有效期></a>
</div>
<div class="time4-img"></div>
</div>
</div>
<div class="member-info block">
<h2 class="title"></h2>
<div class="vip-level">
99999999999999999999999999999
</div>
<div class="line"></div>
{{/unless}}
<div class="doubt">
</div>
<div class="member-legal block">
<h2 class="title"></h2>
<div class="vip-level">
99999999999999999999999999999
</div>
</div>
</div>
</div>
... ...

5.67 KB | W: | H:

5.55 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
.vip-me-page {
.title {
background-image: resolve(home/vip-img/vip-title.png);
}
.vip-level {
clear: both;
overflow: hidden;
}
.level {
margin: 20px 15px 0 40px;
line-height: 31px;
float: left;
clear: both;
font-size: 14px;
color: #000;
}
.vipimg1 {
margin-top: 20px;
width: 138px;
height: 31px;
float: left;
background-image: resolve(home/vip-img/silver-vip.png);
}
.vipimg2 {
margin-top: 20px;
width: 138px;
height: 31px;
float: left;
background-image: resolve(home/vip-img/gold-vip.png);
}
.vipimg3 {
margin-top: 20px;
width: 138px;
height: 31px;
float: left;
background-image: resolve(home/vip-img/platinum-vip.png);
}
.favimg {
float: left;
width: 645px;
margin-top: 20px;
overflow: hidden;
}
.list {
width: 145px;
float: left;
margin: 0 10px 8px 0;
}
.imgsrc {
width: 25px;
float: left;
margin-top: 5px;
}
.fav-font {
line-height: 31px;
font-size: 12px;
margin-left: 30px;
color: #000;
}
.year-amount {
float: left;
width: 600px;
margin-top: 20px;
}
.amount {
font-size: 14px;
font-weight: bold;
float: left;
line-height: 31px;
}
.ps {
margin-left: 30px;
font-size: 14px;
font-weight: bold;
line-height: 31px;
}
.plalevel {
margin-top: 7px;
width: 160px;
height: 21px;
background-image: resolve(home/vip-img/platinum.png);
}
.amount-length {
width: 400px;
height: 15px;
margin-bottom: 5px;
}
.img-length {
width: 293px;
height: 12px;
background-color: #e0e0e0;
}
.amount-left {
width: 298px;
height: 12px;
overflow: hidden;
float: left;
}
.img-left {
height: 12px;
background-color: #cda16c;
z-index: 10;
float: left;
}
.img-right {
width: 5px;
height: 12px;
float: left;
z-index: 10;
background-image: url("/home/vip-img/vip-length-left.png");
margin-left: -5px;
}
.letter {
width: 100px;
font-size: 12px;
margin-left: 303px;
line-height: 10px;
margin-bottom: 2px;
}
.change-img0 {
width: 293px;
height: 18px;
background-image: resolve(home/vip-img/vip-change1.png);
}
.change-img1 {
width: 293px;
height: 18px;
background-image: resolve(home/vip-img/vip-change2.png);
}
.change-img2 {
width: 293px;
height: 18px;
background-image: resolve(home/vip-img/vip-change3.png);
.member-progress {
.title {
background-image: resolve(home/vip-img/member-progress.png);
}
}
.balance {
margin-top: 7px;
font-size: 13px;
font-weight: bold;
margin-bottom: 10px;
p {
float: left;
.member-info {
.title {
background-image: resolve(home/vip-img/member-info.png);
}
}
a {
color: red;
margin-left: 10px;
float: left;
.member-legal {
.title {
background-image: resolve(home/vip-img/member-legal.png);
}
}
.history {
margin-top: 10px;
clear: both;
overflow: hidden;
.ident {
color: #d0021b;
font-size: 14px;
}
.hisamout {
margin-left: 10px;
.cursor-p {
cursor: pointer;
}
.line {
.vip-level {
clear: both;
width: 703px;
height: 1px;
margin-bottom: 5px;
margin-left: 40px;
margin-top: 25px;
background-color: #e8e8e8;
overflow: hidden;
padding: 10px;
}
.valid {
overflow: hidden;
}
.valid-time {
clear: both;
width: 720px;
height: 175px;
margin-left: 40px;
position: relative;
.vip-level .user {
font-size: 14px;
}
.time1 {
float: left;
width: 135px;
height: 135px;
border-right: 2px dashed black;
}
.time1-img {
margin-top: 95px;
width: 130px;
height: 33px;
background-image: resolve(home/vip-img/time1.png);
}
.time2 {
float: left;
width: 129px;
height: 175px;
border-right: 2px dashed black;
}
.time3 {
float: left;
width: 354px;
height: 175px;
border-right: 2px dashed black;
}
.time4 {
float: left;
width: 90px;
height: 155px;
}
.time-top {
display: block;
font-size: 13px;
margin-top: 10px;
margin-left: 10px;
line-height: 18px;
span {
font-weight: bold;
.vip-img {
background: resolve(home/vip-img/vip-3.png) no-repeat;
background-size: 100%;
width: 42px;
height: 18px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
a {
color: red;
.adolesce-val {
font-size: 16px;
color: #000;
}
}
.time2-img {
margin-top: 47px;
width: 131px;
height: 33px;
background-color: #ecdbca;
}
.time-left {
float: left;
display: block;
font-size: 13px;
margin-top: 10px;
margin-left: 10px;
line-height: 18px;
span {
font-weight: bold;
.progress-f {
text-align: center;
}
}
.time-right {
float: right;
display: block;
font-size: 13px;
margin-top: 10px;
margin-right: 10px;
line-height: 18px;
span {
font-weight: bold;
.progress {
width: 690px;
height: 60px;
border-top: 2px solid #999;
margin-top: 20px;
display: inline-block;
&:before {
content: "";
width: 85%;
height: 2px;
position: relative;
background-color: #000;
margin-top: -2px;
display: block;
}
li {
float: left;
width: 33.33%;
text-align: left;
&:before {
content: "";
width: 14px;
height: 14px;
position: relative;
display: inline-block;
top: -8px;
background: resolve(home/vip-img/vip-member.png) no-repeat;
background-size: 100%;
left: -4px;
}
&.last {
width: 0;
}
.p-footer {
position: absolute;
margin-left: -20px;
text-align: center;
}
.p-footer p {
margin-top: 3px;
}
}
}
}
.time3-img {
color: #fff;
line-height: 33px;
margin-top: 93px;
width: 356px;
height: 33px;
background-color: #cda16d;
text-align: center;
}
.time4-img {
margin-top: 65px;
width: 62px;
height: 33px;
border-color: #ecdbca #fff transparent transparent;
border-style: solid solid dashed dashed;
border-width: 33px 20px 0 0;
}
.doubt {
margin-left: 40px;
margin-bottom: 25px;
margin-top: 20px;
font-size: 14px;
a {
float: right;
margin-right: 55px;
}
}
.tell {
color: red;
}
.time-line {
position: absolute;
width: 703px;
height: 2px;
background-color: #e8e8e8;
margin-top: 65px;
}
}
... ...