|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <Container title="VIP充值">
|
|
|
+ <Container title="VIP充值" bgColor="#f8f8f8" headerColor="#fff">
|
|
|
<view class="recharge-main">
|
|
|
<!-- 内容区 -->
|
|
|
<view class="content">
|
|
@@ -25,10 +25,13 @@
|
|
|
<div class="title">权益展示</div>
|
|
|
<view class="benefit">
|
|
|
<view
|
|
|
- v-for="item in data[activeCurrent]?.binding_rights_info"
|
|
|
+ v-for="(item, i) in data[activeCurrent]?.binding_rights_info"
|
|
|
:key="item.id"
|
|
|
- >{{ item.authority_title }}</view
|
|
|
+ class="benefit-item"
|
|
|
>
|
|
|
+ <view class="t">权益{{ i + 1 }}</view>
|
|
|
+ {{ item.authority_title }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 底部按钮 -->
|
|
@@ -141,7 +144,6 @@ onMounted(async () => {
|
|
|
.recharge-main {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background: #fff;
|
|
|
position: relative;
|
|
|
padding-bottom: 120rpx; // 预留底部按钮高度
|
|
|
}
|
|
@@ -233,10 +235,34 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
.benefit {
|
|
|
- border: 2rpx solid $default;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.benefit-item {
|
|
|
border-radius: 12rpx;
|
|
|
- padding: 24rpx;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
font-weight: bold;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 24rpx;
|
|
|
+
|
|
|
+ .t {
|
|
|
+ width: 105rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #000000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
view {
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
@@ -282,8 +308,8 @@ onMounted(async () => {
|
|
|
|
|
|
.open-btn {
|
|
|
width: 100%;
|
|
|
- background: linear-gradient( 90deg, #F0DFCD 0%, #E7C8AC 100%);
|
|
|
- color: #fff;
|
|
|
+ background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
|
|
|
+ color: #000;
|
|
|
font-size: 32rpx;
|
|
|
border-radius: 12rpx;
|
|
|
height: 88rpx;
|
|
@@ -293,7 +319,7 @@ onMounted(async () => {
|
|
|
border: none;
|
|
|
margin-top: 0;
|
|
|
&:active {
|
|
|
- background: linear-gradient( 90deg, #F0DFCD 0%, #E7C8AC 100%);
|
|
|
+ background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
|
|
|
}
|
|
|
}
|
|
|
</style>
|