|
@@ -2,22 +2,36 @@
|
|
|
<div class="account">
|
|
|
<m-header v-if="headerStatus" />
|
|
|
|
|
|
- <div class="accountHeader">
|
|
|
+ <!-- <div class="accountHeader">
|
|
|
<div class="bgColor"></div>
|
|
|
<van-row class="content" type="flex" justify="center" align="center">
|
|
|
<van-col span="24">
|
|
|
- <i class="icon icon_times"></i>剩余时间<span>{{ availableMinutes }}</span>
|
|
|
+ 剩余时间<span>{{ availableMinutes }}</span>
|
|
|
</van-col>
|
|
|
- <!-- <van-col span="12">
|
|
|
+ <van-col span="12">
|
|
|
<i class="icon icon_lock"></i>冻结时间<span class="lock">{{ frozenMinutes }}</span>
|
|
|
- </van-col> -->
|
|
|
+ </van-col>
|
|
|
</van-row>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div> -->
|
|
|
+ <van-cell-group style="margin-bottom: .15rem;">
|
|
|
+ <van-cell title="剩余时间" >
|
|
|
+ <i class="icon icon_times" slot="icon"></i>
|
|
|
+ <div slot="default" class="available">
|
|
|
+ {{ availableMinutes | calcMinute }}
|
|
|
+ </div>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
<van-cell-group>
|
|
|
- <van-cell title="课时兑换" is-link to="periodExchange" />
|
|
|
- <van-cell title="兑换记录" is-link to="exchangeRecord" />
|
|
|
- <van-cell title="课时使用记录" is-link to="periodRecord" />
|
|
|
+ <van-cell title="课时兑换" is-link to="periodExchange" >
|
|
|
+ <i class="icon icon_change" slot="icon"></i>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell title="兑换记录" is-link to="exchangeRecord" >
|
|
|
+ <i class="icon icon_record" slot="icon"></i>
|
|
|
+ </van-cell>
|
|
|
+
|
|
|
+ <van-cell title="课时使用记录" is-link to="periodRecord" >
|
|
|
+ <i class="icon icon_use" slot="icon"></i>
|
|
|
+ </van-cell>
|
|
|
</van-cell-group>
|
|
|
|
|
|
</div>
|
|
@@ -65,8 +79,7 @@ export default {
|
|
|
if(result.code == 200) {
|
|
|
let tempResult = result.data
|
|
|
if(tempResult) {
|
|
|
- this.availableMinutes = calcMinute(tempResult.availableMinutes ? tempResult.availableMinutes : 0)
|
|
|
- this.frozenMinutes = calcMinute(tempResult.frozenMinutes ? tempResult.frozenMinutes : 0)
|
|
|
+ this.availableMinutes = (tempResult.availableMinutes ? tempResult.availableMinutes : 0)
|
|
|
}
|
|
|
} else {
|
|
|
this.$toast(result.msg)
|
|
@@ -82,62 +95,79 @@ export default {
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
-.accountHeader {
|
|
|
- background: #fff;
|
|
|
- padding-bottom: .2rem;
|
|
|
- .bgColor {
|
|
|
- margin-top: -1px;
|
|
|
- height: .9rem;
|
|
|
- background: #14928A;
|
|
|
- }
|
|
|
- .content {
|
|
|
- height:74px;
|
|
|
- background: rgba(255,255,255,1);
|
|
|
- box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.19);
|
|
|
- border-radius: .08rem;
|
|
|
- margin: -.5rem .16rem 0;
|
|
|
- text-align: center;
|
|
|
- .van-col {
|
|
|
- color: #1A1A1A;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- // justify-content: center;
|
|
|
- padding-left: .2rem;
|
|
|
- // &:first-child {
|
|
|
- // border-right: 1px solid #CCCCCC;
|
|
|
- // }
|
|
|
- span {
|
|
|
- padding-left: .1rem;
|
|
|
- color: #FF0909;
|
|
|
- &.lock {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .icon {
|
|
|
- display: inline-block;
|
|
|
- width: .16rem;
|
|
|
- height: .18rem;
|
|
|
- margin-right: .05rem;
|
|
|
- margin-top: -0.02rem;
|
|
|
- }
|
|
|
- .icon_times {
|
|
|
- background: url('../../assets/images/app/icon_times.png') no-repeat center center;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- .icon_lock {
|
|
|
- background: url('../../assets/images/app/icon_lock.png') no-repeat center center;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- }
|
|
|
+// .accountHeader {
|
|
|
+// background: #fff;
|
|
|
+// padding-bottom: .2rem;
|
|
|
+// .bgColor {
|
|
|
+// margin-top: -1px;
|
|
|
+// height: .9rem;
|
|
|
+// background: #14928A;
|
|
|
+// }
|
|
|
+// .content {
|
|
|
+// height:74px;
|
|
|
+// background: rgba(255,255,255,1);
|
|
|
+// box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.19);
|
|
|
+// border-radius: .08rem;
|
|
|
+// margin: -.5rem .16rem 0;
|
|
|
+// text-align: center;
|
|
|
+// .van-col {
|
|
|
+// color: #1A1A1A;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// // justify-content: center;
|
|
|
+// padding-left: .2rem;
|
|
|
+// // &:first-child {
|
|
|
+// // border-right: 1px solid #CCCCCC;
|
|
|
+// // }
|
|
|
+// span {
|
|
|
+// padding-left: .1rem;
|
|
|
+// color: #FF0909;
|
|
|
+// &.lock {
|
|
|
+// color: #999999;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// }
|
|
|
+// }
|
|
|
+.icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.2rem;
|
|
|
+ height: 0.22rem;
|
|
|
+ margin-right: .05rem;
|
|
|
+ margin-top: -0.02rem;
|
|
|
+}
|
|
|
+.icon_times {
|
|
|
+ background: url('../../assets/images/app/icon_times.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.icon_lock {
|
|
|
+ background: url('../../assets/images/app/icon_lock.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.icon_change {
|
|
|
+ background: url('../../assets/images/app/icon_change.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.icon_record {
|
|
|
+ background: url('../../assets/images/app/icon_record.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.icon_use {
|
|
|
+ background: url('../../assets/images/app/icon_use.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
}
|
|
|
-
|
|
|
/deep/.van-cell-group {
|
|
|
&::after {
|
|
|
border-width: 0;;
|
|
|
}
|
|
|
/deep/.van-cell {
|
|
|
padding: .16rem;
|
|
|
+ align-items: center;
|
|
|
+ .available {
|
|
|
+ color: #FF0909;
|
|
|
+ font-size: .17rem;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|