138 lines
2.5 KiB
Vue
138 lines
2.5 KiB
Vue
<template>
|
|
<view class="rechargeVip_detail">
|
|
<view class="rechargeSucImg">
|
|
<image :src="rechargeSuc" class="rechargeSuc"></image>
|
|
</view>
|
|
<view class="rechargeList">
|
|
<u-gap height="26rpx"></u-gap>
|
|
<view class="rechargeItem" v-for="(item,index) in rechargeVip" :key="index">
|
|
<text>{{item.type}}</text><text>{{item.value}}</text></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
rechargeVip: [{
|
|
type: "充值方式",
|
|
value: "微信支付"
|
|
},
|
|
{
|
|
type: "充值时间",
|
|
value: "2021/01/01 18:00"
|
|
},
|
|
{
|
|
type: "充值金额",
|
|
value: "￥60000"
|
|
},
|
|
{
|
|
type: "实到余额",
|
|
value: "￥600000"
|
|
},
|
|
],
|
|
rechargeSuc: 'https://img.agrimedia.cn/rechargeSuc.png',
|
|
};
|
|
},
|
|
methods: {
|
|
|
|
|
|
},
|
|
onLoad(parameters) {
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
.rechargeVip_detail {
|
|
padding: 20rpx 24rpx;
|
|
border-radius: 10rpx;
|
|
|
|
.rechargeSucImg {
|
|
border-bottom: 2rpx dashed #EDEDED;
|
|
padding: 76rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
position: relative;
|
|
|
|
.rechargeSuc {
|
|
height: 254rpx;
|
|
width: 50%;
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 22rpx;
|
|
height: 44rpx;
|
|
background: #F5F5F5;
|
|
left: 0;
|
|
bottom: -24rpx;
|
|
border-radius: 0 22rpx 22rpx 0;
|
|
/* 左上、右上、右下、左下 */
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 22rpx;
|
|
height: 44rpx;
|
|
background: #F5F5F5;
|
|
right: 0;
|
|
bottom: -24rpx;
|
|
border-radius: 22rpx 0 0 22rpx;
|
|
/* 左上、右上、右下、左下 */
|
|
}
|
|
}
|
|
|
|
.rechargeList {
|
|
background: #fff;
|
|
|
|
.rechargeItem {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-bottom: 2rpx dashed #EDEDED;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
|
|
text:nth-child(1) {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
color: #333333
|
|
}
|
|
}
|
|
|
|
//3
|
|
.rechargeItem:nth-child(4),
|
|
.rechargeItem:nth-child(5) {
|
|
text:nth-child(2) {
|
|
color: #EE3232;
|
|
}
|
|
}
|
|
|
|
.rechargeItem:nth-last-child(1) {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|