diff --git a/pages.json b/pages.json
index c5018f0..46bb2de 100644
--- a/pages.json
+++ b/pages.json
@@ -9,25 +9,30 @@
 			}
 		}
 	],
-	"subPackages": [{
+	"subPackages": [
+		{
 			"root": "pages/call-log",
-			"pages": [{
-				"path": "call",
-				"style": {
-					"navigationBarTitleText": "通话记录页面",
-					"navigationStyle": "custom"
+			"pages": [
+				{
+					"path": "call",
+					"style": {
+						"navigationBarTitleText": "通话记录页面",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "detail/callDetail",
+					"style": {
+						"navigationBarTitleText": "通话记录详情",
+						"navigationStyle": "custom"
+					}
 				}
-			}, {
-				"path": "detail/callDetail",
-				"style": {
-					"navigationBarTitleText": "通话记录详情",
-					"navigationStyle": "custom"
-				}
-			}]
+			]
 		},
 		{
 			"root": "pages/message",
-			"pages": [{
+			"pages": [
+				{
 					"path": "list-index",
 					"style": {
 						"navigationBarTitleText": "短信列表首页",
@@ -48,7 +53,8 @@
 		},
 		{
 			"root": "pages/shopping",
-			"pages": [{
+			"pages": [
+				{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "购物app首页",
@@ -150,7 +156,8 @@
 		},
 		{
 			"root": "pages/balance",
-			"pages": [{
+			"pages": [
+				{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "余额页面",
@@ -171,12 +178,27 @@
 						"navigationBarTitleText": "转账模拟",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "pay-successful/pay-successful",
+					"style": {
+						"navigationBarTitleText": "支付成功",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "pay-successful/edit",
+					"style": {
+						"navigationBarTitleText": "修改支付成功",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},
 		{
 			"root": "pages/bill",
-			"pages": [{
+			"pages": [
+				{
 					"path": "bill-list/bill-list",
 					"style": {
 						"navigationBarTitleText": "账单列表页面",
@@ -201,7 +223,8 @@
 		},
 		{
 			"root": "pages/ant-credit-pay",
-			"pages": [{
+			"pages": [
+				{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "花呗首页",
@@ -219,7 +242,8 @@
 		},
 		{
 			"root": "pages/finance-management",
-			"pages": [{
+			"pages": [
+				{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "理财首页",
@@ -244,7 +268,8 @@
 		},
 		{
 			"root": "pages/other",
-			"pages": [{
+			"pages": [
+				{
 					"path": "/video-group-chat/video-group-chat",
 					"style": {
 						"navigationBarTitleText": "视频群聊",
@@ -382,122 +407,107 @@
 					}
 				},
 				{
-					"path" : "bank/zsyh",
-					"style" : 
-					{
-						"navigationBarTitleText" : "招商银行",
+					"path": "bank/zsyh",
+					"style": {
+						"navigationBarTitleText": "招商银行",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "bank/index",
-					"style" : 
-					{
-						"navigationBarTitleText" : "选择银行卡",
+					"path": "bank/index",
+					"style": {
+						"navigationBarTitleText": "选择银行卡",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "bank/gsyh",
-					"style" : 
-					{
-						"navigationBarTitleText" : "工商银行",
+					"path": "bank/gsyh",
+					"style": {
+						"navigationBarTitleText": "工商银行",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "bank/nyyh",
-					"style" : 
-					{
-						"navigationBarTitleText" : "农业银行",
+					"path": "bank/nyyh",
+					"style": {
+						"navigationBarTitleText": "农业银行",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "bank/jsyh",
-					"style" : 
-					{
-						"navigationBarTitleText" : "建设银行",
+					"path": "bank/jsyh",
+					"style": {
+						"navigationBarTitleText": "建设银行",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "game/honor-of-kings",
-					"style" : 
-					{
-						"navigationBarTitleText" : "王者荣耀",
+					"path": "game/honor-of-kings",
+					"style": {
+						"navigationBarTitleText": "王者荣耀",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "game/sanjiaozhou",
-					"style" : 
-					{
-						"navigationBarTitleText" : "三角洲",
+					"path": "game/sanjiaozhou",
+					"style": {
+						"navigationBarTitleText": "三角洲",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "game/index",
-					"style" : 
-					{
-						"navigationBarTitleText" : "游戏首页",
+					"path": "game/index",
+					"style": {
+						"navigationBarTitleText": "游戏首页",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "wx-payment-success/wx-payment-success",
-					"style" : 
-					{
-						"navigationBarTitleText" : "微信支付成功",
+					"path": "wx-payment-success/wx-payment-success",
+					"style": {
+						"navigationBarTitleText": "微信支付成功",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "score/index",
-					"style" : 
-					{
-						"navigationBarTitleText" : "高考分数",
+					"path": "score/index",
+					"style": {
+						"navigationBarTitleText": "高考分数",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "score/center",
-					"style" : 
-					{
-						"navigationBarTitleText" : "查询中心",
+					"path": "score/center",
+					"style": {
+						"navigationBarTitleText": "查询中心",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "score/chongqing",
-					"style" : 
-					{
-						"navigationBarTitleText" : "重庆",
+					"path": "score/chongqing",
+					"style": {
+						"navigationBarTitleText": "重庆",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "score/hebei",
-					"style" : 
-					{
-						"navigationBarTitleText" : "河北",
+					"path": "score/hebei",
+					"style": {
+						"navigationBarTitleText": "河北",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "score/guandong",
-					"style" : 
-					{
-						"navigationBarTitleText" : "广东",
+					"path": "score/guandong",
+					"style": {
+						"navigationBarTitleText": "广东",
 						"navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "video-chat/video-chat",
-					"style" : 
-					{
-						"navigationBarTitleText" : "视频单聊",
+					"path": "video-chat/video-chat",
+					"style": {
+						"navigationBarTitleText": "视频单聊",
 						"navigationStyle": "custom"
 					}
 				}
@@ -505,7 +515,8 @@
 		},
 		{
 			"root": "pages/common",
-			"pages": [{
+			"pages": [
+				{
 					"path": "hot-icon/hot-icon",
 					"style": {
 						"navigationBarTitleText": "热门图标",
@@ -541,10 +552,9 @@
 					}
 				},
 				{
-					"path" : "shipinjiaocheng/shipinjiaocheng",
-					"style" : 
-					{
-						"navigationBarTitleText" : "视频教程",
+					"path": "shipinjiaocheng/shipinjiaocheng",
+					"style": {
+						"navigationBarTitleText": "视频教程",
 						"navigationStyle": "custom"
 					}
 				}
diff --git a/pages/balance/pay-successful/data.json b/pages/balance/pay-successful/data.json
new file mode 100644
index 0000000..4ddb287
--- /dev/null
+++ b/pages/balance/pay-successful/data.json
@@ -0,0 +1,153 @@
+{
+    "randomData": [
+        {
+            "title": "充值满减券",
+            "tag": "特惠充",
+            "desc": "满50元可用",
+            "price": "1",
+            "butText": "去看看",
+            "imgUrl": "/static/image/balance/pay-successful/chongzhi.png"
+        },
+        {
+            "title": "芭芭农场肥料",
+            "tag": "芭芭农场",
+            "desc": "现实翻倍",
+            "price": "",
+            "butText": "去看看",
+            "imgUrl": "/static/image/balance/pay-successful/88nongchang.png"
+        },
+        {
+            "title": "心相印抽纸优惠券",
+            "tag": "分期生活",
+            "desc": "满一元可用",
+            "price": "1",
+            "butText": "免费领",
+            "imgUrl": "/static/image/balance/pay-successful/xinxiangyin.png"
+        },
+        {
+            "title": "蜜雪冰城全场券",
+            "tag": "外卖福利",
+            "desc": "满10元可用",
+            "price": "3",
+            "butText": "去领取",
+            "imgUrl": "/static/image/balance/pay-successful/mixue.png"
+        },
+        {
+            "title": "充值满减券",
+            "tag": "中国石化",
+            "desc": "满50元可用",
+            "price": "3",
+            "butText": "免费领",
+            "imgUrl": "/static/image/balance/pay-successful/shiyou.png"
+        },
+        {
+            "title": "零售购物券",
+            "tag": "淘宝闪购",
+            "desc": "满29元可用",
+            "price": "8",
+            "butText": "去领取",
+            "imgUrl": "/static/image/balance/pay-successful/shangou.png"
+        },
+        {
+            "title": "公交乘车券",
+            "tag": "公交地铁",
+            "desc": "享3笔0.3乘车优惠",
+            "price": "0.8",
+            "butText": "去看看",
+            "imgUrl": "/static/image/balance/pay-successful/chengche.png"
+        },
+        {
+            "title": "电燃费优惠红包",
+            "tag": "生活缴费",
+            "desc": "缴电燃气费立减",
+            "price": "0.5",
+            "butText": "免费领",
+            "imgUrl": "/static/image/balance/pay-successful/shuidian.png"
+        }
+    ],
+    "defaultData": {
+        "user": "小王",
+        "money": "88888.88",
+        "payMethod": "招商银行卡(8888)",
+        "bannerTime": "07月12日12:22",
+        "styleType": "style3",
+        "style1": {
+            "couponlist": [
+                {
+                    "title": "充值满减券",
+                    "tag": "中国石化",
+                    "desc": "满50元可用",
+                    "price": "3",
+                    "butText": "免费领",
+                    "imgUrl": "/static/image/balance/pay-successful/shiyou.png"
+                }
+            ],
+            "bannerUrl": "/static/image/balance/transfer/bottom-banner-1.png"
+        },
+        "style2": {
+            "couponlist": [
+                {
+                    "title": "蜜雪冰城全场券",
+                    "tag": "外卖福利",
+                    "desc": "满10元可用",
+                    "price": "3",
+                    "butText": "去领取",
+                    "imgUrl": "/static/image/balance/pay-successful/mixue.png"
+                },
+                {
+                    "title": "充值满减券",
+                    "tag": "中国石化",
+                    "desc": "满50元可用",
+                    "price": "3",
+                    "butText": "免费领",
+                    "imgUrl": "/static/image/balance/pay-successful/shiyou.png"
+                },
+                {
+                    "title": "零售购物券",
+                    "tag": "淘宝闪购",
+                    "desc": "满29元可用",
+                    "price": "8",
+                    "butText": "去领取",
+                    "imgUrl": "/static/image/balance/pay-successful/shangou.png"
+                },
+                {
+                    "title": "公交乘车券",
+                    "tag": "公交地铁",
+                    "desc": "享3笔0.3乘车优惠",
+                    "price": "0.8",
+                    "butText": "去看看",
+                    "imgUrl": "/static/image/balance/pay-successful/chengche.png"
+                }
+            ]
+        },
+        "style3": {
+            "couponlist": [
+                {
+                    "title": "充值满减券",
+                    "tag": "中国石化",
+                    "desc": "满50元可用",
+                    "price": "3",
+                    "butText": "免费领",
+                    "imgUrl": "/static/image/balance/pay-successful/shiyou.png"
+                },
+                {
+                    "title": "心相印抽纸优惠券",
+                    "tag": "分期生活",
+                    "desc": "满一元可用",
+                    "price": "1",
+                    "butText": "免费领",
+                    "imgUrl": "/static/image/balance/pay-successful/xinxiangyin.png"
+                },
+                {
+                    "title": "蜜雪冰城全场券",
+                    "tag": "外卖福利",
+                    "desc": "满10元可用",
+                    "price": "3",
+                    "butText": "去领取",
+                    "imgUrl": "/static/image/balance/pay-successful/mixue.png"
+                }
+            ],
+            "bannerTime": "07月12日12:22"
+        }
+    }
+}
\ No newline at end of file
diff --git a/pages/balance/pay-successful/edit.vue b/pages/balance/pay-successful/edit.vue
new file mode 100644
index 0000000..7c787d8
--- /dev/null
+++ b/pages/balance/pay-successful/edit.vue
@@ -0,0 +1,691 @@
+<template>
+    <view class="container">
+        <nav-bar bgColor="#F5F5F5" :isBack="true" title="编辑账单详情" isRightButton @right-click="saveData"></nav-bar>
+
+        <view class="tabs">
+            <view class="tab-item" :class="{ active: payData.styleType == 'style1' }"
+                @click="payData.styleType = 'style1'">样式1
+            </view>
+            <view class="tab-item" :class="{ active: payData.styleType == 'style2' }"
+                @click="payData.styleType = 'style2'">样式2
+            </view>
+            <view class="tab-item" :class="{ active: payData.styleType == 'style3' }"
+                @click="payData.styleType = 'style3'">样式3
+            </view>
+        </view>
+
+        <view class="main-content">
+            <!-- 基础信息卡片 -->
+            <view class="card basic-card">
+                <view class="amount-wrap">
+                    <text class="symbol">¥</text>
+                    <auto-width-input class="alipay-font" type="digit" v-model="payData.money" fontSize="88rpx"
+                        fontWeight="500" color="#1A1A1A" :showEdit="true"></auto-width-input>
+                </view>
+
+                <view class="info-row">
+                    <view class="info-item">
+                        <auto-width-input v-model="payData.user" fontSize="28rpx" color="#333"
+                            :showEdit="true"></auto-width-input>
+                    </view>
+                    <view class="info-item" style="justify-content: flex-end;">
+                        <text class="value-symbol">¥ </text>
+                        <auto-width-input type="digit" v-model="payData.money" fontSize="28rpx" color="#333"
+                            :showEdit="true"></auto-width-input>
+                    </view>
+                </view>
+
+                <view class="info-row" style="margin-top: 16rpx;">
+                    <view class="info-item">
+                        <text class="label">付款方式</text>
+                    </view>
+                    <view class="info-item" style="justify-content: flex-end;">
+                        <auto-width-input v-model="payData.payMethod" fontSize="28rpx" color="#333"
+                            :showEdit="true"></auto-width-input>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 样式1 -->
+            <template v-if="payData.styleType == 'style1'">
+                <view class="card list-card">
+                    <view class="card-title" style="display: flex; justify-content: space-between;">
+                        支付有礼
+                        <image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
+                            mode="widthFix" @click="randomCoupon('style1')"></image>
+                    </view>
+                    <!-- 券1 -->
+                    <view class="list-item" v-if="payData.style1.couponlist && payData.style1.couponlist[0]">
+                        <view class="left-icon-wrap" @click="chooseImage('style1_coupon_0')">
+                            <image v-if="payData.style1.couponlist[0].imgUrl" class="item-img"
+                                :src="payData.style1.couponlist[0].imgUrl" mode="aspectFill"></image>
+                            <image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
+                        </view>
+                        <view class="item-content">
+                            <view class="row-flex" style="flex-wrap: wrap;">
+                                <view class="row-flex" style="margin-right: 12rpx;"
+                                    v-if="payData.style1.couponlist[0].price !== undefined">
+                                    <auto-width-input v-model="payData.style1.couponlist[0].price" fontSize="28rpx"
+                                        color="#E6372D" fontWeight="500"></auto-width-input>
+                                    <text class="main-title" style="color: #E6372D; width: auto;">元</text>
+                                    <image class="edit-icon" src="/static/image/common/edit.png"
+                                        style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
+                                </view>
+                                <view class="row-flex">
+                                    <auto-width-input v-model="payData.style1.couponlist[0].title" fontSize="28rpx"
+                                        color="#333" fontWeight="500" :showEdit="true"></auto-width-input>
+                                </view>
+                            </view>
+                            <view class="row-flex mt">
+                                <view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
+                                    v-if="payData.style1.couponlist[0].tag !== undefined">
+                                    <auto-width-input v-model="payData.style1.couponlist[0].tag" fontSize="20rpx"
+                                        color="#E6372D" :showEdit="true"></auto-width-input>
+                                </view>
+                                <view class="row-flex" v-if="payData.style1.couponlist[0].desc !== undefined">
+                                    <auto-width-input v-model="payData.style1.couponlist[0].desc" fontSize="24rpx"
+                                        color="#999" :showEdit="true"></auto-width-input>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="right-btn btn-get"
+                            style="display: flex; align-items: center; justify-content: center;"
+                            @click="toggleBtnText(payData.style1.couponlist[0])">
+                            <text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{
+                                payData.style1.couponlist[0].butText || '免费领' }}</text>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 飞猪广告 -->
+                <view class="card fliggy-card">
+                    <view class="banner-wrap" @click="toggleBanner">
+                        <image class="banner-img"
+                            :src="payData.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png'"
+                            mode="widthFix"></image>
+                        <view class="guanggao-tag">
+                            <image style="width: 70rpx;height: 32rpx;"
+                                src="/static/image/balance/transfer/guanggao.png"></image>
+                        </view>
+                        <view class="yaoyiyao-container">
+                            <view class="yaoyiyao-box">
+                                <image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
+                                </image>
+                                <text class="text">摇动或点击查看详情</text>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="fliggy-footer"
+                        v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
+                        <view class="logo-box">
+                            <image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
+                            </image>
+                        </view>
+                        <view class="banner-info">
+                            <view class="text-content">
+                                <text class="b-title">飞猪旅行</text>
+                                <text class="b-desc">飞猪出行 超多折扣</text>
+                            </view>
+                            <view class="b-btn">领优惠</view>
+                        </view>
+                    </view>
+                    <view class="fliggy-footer"
+                        v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
+                        <view class="logo-box">
+                            <image class="logo" src="/static/image/balance/transfer/taobaoshangou.png" mode="aspectFit">
+                            </image>
+                        </view>
+                        <view class="banner-info" style="padding: 0;">
+                            <view class="text-content">
+                                <text class="b-title">淘宝闪购</text>
+                                <text class="b-desc">每天领大额外面红包</text>
+                            </view>
+                            <view class="b-btn">去领取</view>
+                        </view>
+                    </view>
+                </view>
+            </template>
+
+            <!-- 样式2 -->
+            <template v-if="payData.styleType == 'style2'">
+                <view class="card list-card">
+                    <view class="card-title" style="display: flex; justify-content: space-between;">支付有礼
+                        <image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
+                            mode="widthFix" @click="randomCoupon('style2')"></image>
+                    </view>
+
+                    <view class="list-item" v-for="(item, index) in payData.style2.couponlist" :key="index">
+                        <view class="left-icon-wrap" @click="chooseImage('style2_coupon_' + index)">
+                            <image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
+                            <image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
+                        </view>
+                        <view class="item-content">
+                            <view class="row-flex" style="flex-wrap: wrap;">
+                                <view class="row-flex" style="margin-right: 12rpx;" v-if="item.price !== undefined">
+                                    <auto-width-input v-model="item.price" fontSize="28rpx"
+                                        :color="item.price.includes('g') ? '#333' : '#E6372D'"
+                                        fontWeight="500"></auto-width-input>
+                                    <text class="main-title"
+                                        :style="{ color: item.price.includes('g') ? '#333' : '#E6372D', width: 'auto' }">{{
+                                            item.price.includes('g') ? '' : '元' }}</text>
+                                    <image class="edit-icon" src="/static/image/common/edit.png"
+                                        style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
+                                </view>
+                                <view class="row-flex">
+                                    <auto-width-input v-model="item.title" fontSize="28rpx" color="#333"
+                                        fontWeight="500" :showEdit="true"></auto-width-input>
+                                </view>
+                            </view>
+                            <view class="row-flex mt">
+                                <view class="tag-red" :class="{ 'tag-orange': item.tag == '芭芭农场' }"
+                                    style="margin-right: 12rpx; display: flex; align-items: center;"
+                                    v-if="item.tag !== undefined">
+                                    <auto-width-input v-model="item.tag" fontSize="20rpx"
+                                        :color="item.tag == '芭芭农场' ? '#EF673C' : '#E6372D'"
+                                        :showEdit="true"></auto-width-input>
+                                </view>
+                                <view class="row-flex" v-if="item.desc !== undefined">
+                                    <auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
+                                        :showEdit="true"></auto-width-input>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="right-btn btn-get" :class="{ 'btn-look': item.butText == '去看看' }"
+                            style="display: flex; align-items: center; justify-content: center;"
+                            @click="toggleBtnText(item)">
+                            <text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{ item.butText || '免费领'
+                            }}</text>
+                        </view>
+                    </view>
+                </view>
+            </template>
+
+            <!-- 样式3 -->
+            <template v-if="payData.styleType == 'style3'">
+                <view class="card list-card" style="padding-bottom: 24rpx;">
+                    <view class="flex-between" style="margin-bottom: 24rpx;">
+                        <text class="card-title" style="margin-bottom: 0;">碰一下立减</text>
+                        <view class="row-flex">
+                            <auto-width-input v-model="payData.style3.bannerTime" fontSize="24rpx"
+                                color="#666"></auto-width-input>
+                            <text class="time-text" style="width: auto;">后过期</text>
+                            <image class="edit-icon" src="/static/image/common/edit.png"
+                                style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
+                        </view>
+                    </view>
+                    <view class="banner-box">
+                        <text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
+                        <image src="/static/image/balance/pay-successful/pengyipengbanner.png"
+                            style="width: 100%; border-radius: 12rpx; display: block;" mode="widthFix"></image>
+                    </view>
+                </view>
+                <view class="card-title" style="display: flex; justify-content: flex-end;padding: 0 16px;">
+                    <image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png" mode="widthFix"
+                        @click="randomCoupon('style3')">
+                    </image>
+                </view>
+
+                <view class="card list-card" style="margin-top: 24rpx;">
+                    <view class="list-item" v-for="(item, index) in payData.style3.couponlist" :key="index">
+                        <view class="left-icon-wrap" @click="chooseImage('style3_coupon_' + index)">
+                            <image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
+                            <image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
+                        </view>
+                        <view class="item-content" style="flex: 1;">
+                            <view class="row-flex">
+                                <auto-width-input v-model="item.title" fontSize="28rpx" color="#333" fontWeight="500"
+                                    :showEdit="true"></auto-width-input>
+                            </view>
+                            <view class="row-flex mt">
+                                <view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
+                                    v-if="item.tag !== undefined">
+                                    <auto-width-input v-model="item.tag" fontSize="20rpx" color="#E6372D"
+                                        :showEdit="true"></auto-width-input>
+                                </view>
+                                <view class="row-flex" v-if="item.desc !== undefined">
+                                    <auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
+                                        :showEdit="true"></auto-width-input>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="row-flex" style="align-items: baseline;" v-if="item.price !== undefined">
+                            <auto-width-input v-model="item.price" fontSize="40rpx" color="#E6372D" fontWeight="500"
+                                :showEdit="true"></auto-width-input>
+                        </view>
+                    </view>
+                </view>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { defaultData, randomData } from './data.json';
+import { util } from '@/utils/common.js';
+import autoWidthInput from '@/components/common/auto-width-input.vue';
+
+const payData = ref(JSON.parse(JSON.stringify(defaultData)));
+
+const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
+
+const randomCoupon = (styleName) => {
+    // #ifdef APP-PLUS
+    const oldList = payData.value[styleName].couponlist || [];
+    oldList.forEach(item => {
+        if (item.imgUrl && !item.imgUrl.startsWith('/static') && !item.imgUrl.startsWith('http')) {
+            uni.removeSavedFile({ filePath: item.imgUrl });
+        }
+    });
+    // #endif
+
+    const count = payData.value[styleName].couponlist.length;
+    const shuffled = [...randomData].sort(() => 0.5 - Math.random());
+    const selected = shuffled.slice(0, count);
+    payData.value[styleName].couponlist = JSON.parse(JSON.stringify(selected));
+};
+const loadStorageData = () => {
+    const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
+    if (savedData) {
+        payData.value = Object.assign({}, payData.value, savedData);
+    }
+};
+
+onLoad(() => {
+    loadStorageData();
+});
+
+const saveData = () => {
+    uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
+    uni.navigateBack();
+};
+
+const chooseImage = (type) => {
+    uni.chooseImage({
+        count: 1,
+        success: (res) => {
+            const tempPath = res.tempFilePaths[0];
+
+            let oldPath = '';
+            if (type === 'style1_coupon_0') {
+                oldPath = payData.value.style1.couponlist[0].imgUrl;
+            } else if (type.startsWith('style2_coupon_')) {
+                const idx = parseInt(type.split('_')[2]);
+                oldPath = payData.value.style2.couponlist[idx].imgUrl;
+            } else if (type.startsWith('style3_coupon_')) {
+                const idx = parseInt(type.split('_')[2]);
+                oldPath = payData.value.style3.couponlist[idx].imgUrl;
+            }
+
+            const updateImgUrl = (path) => {
+                if (type === 'style1_coupon_0') {
+                    payData.value.style1.couponlist[0].imgUrl = path;
+                } else if (type.startsWith('style2_coupon_')) {
+                    const idx = parseInt(type.split('_')[2]);
+                    payData.value.style2.couponlist[idx].imgUrl = path;
+                } else if (type.startsWith('style3_coupon_')) {
+                    const idx = parseInt(type.split('_')[2]);
+                    payData.value.style3.couponlist[idx].imgUrl = path;
+                }
+            };
+
+            // #ifdef APP-PLUS
+            if (oldPath && !oldPath.startsWith('/static') && !oldPath.startsWith('http')) {
+                // 尝试删除旧的本地文件，避免存储空间堆积
+                uni.removeSavedFile({ filePath: oldPath });
+            }
+            uni.saveFile({
+                tempFilePath: tempPath,
+                success: (saveRes) => {
+                    updateImgUrl(saveRes.savedFilePath);
+                }
+            });
+            // #endif
+
+            // #ifndef APP-PLUS
+            updateImgUrl(tempPath);
+            // #endif
+        }
+    });
+};
+
+const toggleBtnText = (item) => {
+    const textList = ['免费领', '去看看', '去领取'];
+    const currentIndex = textList.indexOf(item.butText);
+    if (currentIndex > -1) {
+        item.butText = textList[(currentIndex + 1) % textList.length];
+    } else {
+        item.butText = '免费领';
+    }
+};
+
+const toggleBanner = () => {
+    const current = payData.value.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png';
+    if (current.includes('bottom-banner-1.png')) {
+        payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-2.png';
+    } else {
+        payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-1.png';
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@import "@/common/main.css";
+
+.container {
+    min-height: 100vh;
+    background-color: #F5F5F5;
+    padding-bottom: 60rpx;
+}
+
+.confirm-btn {
+    background-color: #3884FD;
+    color: #fff;
+    font-size: 26rpx;
+    padding: 10rpx 32rpx;
+    border-radius: 30rpx;
+}
+
+.tabs {
+    display: flex;
+    justify-content: center;
+    gap: 20rpx;
+    margin: 24rpx 0;
+}
+
+.tab-item {
+    padding: 12rpx 40rpx;
+    background-color: #fff;
+    color: #333;
+    font-size: 28rpx;
+    border-radius: 8rpx;
+    border: 1px solid #fff;
+}
+
+.tab-item.active {
+    color: #3884FD;
+    border-color: #3884FD;
+}
+
+.main-content {
+    padding: 0 0;
+}
+
+.card {
+    background: #fff;
+    border-radius: 16rpx;
+    margin: 24rpx;
+    padding: 32rpx;
+}
+
+.basic-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.amount-wrap {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    color: #1A1A1A;
+    margin-top: 10rpx;
+    margin-bottom: 50rpx;
+
+    .symbol {
+        font-size: 60rpx;
+        margin-right: 8rpx;
+    }
+}
+
+.info-row {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.info-item {
+    display: flex;
+    align-items: center;
+
+    .label {
+        font-size: 28rpx;
+        color: #333;
+        width: 200rpx;
+    }
+
+    .value-symbol {
+        font-size: 28rpx;
+        color: #333;
+    }
+}
+
+.edit-icon {
+    width: 24rpx;
+    height: 24rpx;
+    margin-left: 10rpx;
+}
+
+.edit-icon-center {
+    width: 28rpx;
+    height: 28rpx;
+}
+
+.item-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.left-icon-wrap {
+    width: 70rpx;
+    height: 70rpx;
+    border-radius: 50%;
+    background-color: #F5F5F5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 20rpx;
+}
+
+.list-card {
+    .card-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #1A1A1A;
+        margin-bottom: 32rpx;
+    }
+
+    .list-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 40rpx;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.item-content {
+    flex: 1;
+}
+
+.row-flex {
+    display: flex;
+    align-items: center;
+}
+
+.mt {
+    margin-top: 8rpx;
+}
+
+.main-title {
+    font-size: 28rpx;
+    color: #333;
+    font-weight: 500;
+}
+
+.sub-title {
+    font-size: 24rpx;
+    color: #999;
+}
+
+.tag-red {
+    font-size: 20rpx;
+    color: #E6372D;
+    background: #FFF1F0;
+    padding: 4rpx 10rpx;
+    border-radius: 6rpx;
+}
+
+.tag-orange {
+    color: #EF673C;
+    background: #FFF2F1;
+}
+
+.right-btn {
+    padding: 10rpx 28rpx;
+    border-radius: 26rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+}
+
+.btn-get {
+    background-color: #E6372D;
+    color: #fff;
+}
+
+.btn-look {
+    background-color: #E6372D;
+    color: #fff;
+}
+
+.fliggy-card {
+    padding: 0;
+    overflow: hidden;
+
+    .banner-wrap {
+        position: relative;
+
+        .banner-img {
+            width: 100%;
+            display: block;
+        }
+
+        .guanggao-tag {
+            position: absolute;
+            top: 16rpx;
+            right: 16rpx;
+        }
+
+        .yaoyiyao-container {
+            position: absolute;
+            bottom: 20rpx;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+
+            .yaoyiyao-box {
+                background: rgba(0, 0, 0, 0.4);
+                padding: 10rpx 24rpx;
+                border-radius: 30rpx;
+                display: flex;
+                align-items: center;
+
+                .img {
+                    width: 24rpx;
+                    margin-right: 10rpx;
+                }
+
+                .text {
+                    color: #fff;
+                    font-size: 24rpx;
+                }
+            }
+        }
+    }
+
+    .fliggy-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24rpx;
+
+        .logo-box {
+            width: 76rpx;
+            height: 76rpx;
+            margin-right: 20rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #fff;
+            border-radius: 50%;
+
+            .logo {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .banner-info {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .text-content {
+                display: flex;
+                flex-direction: column;
+
+                .b-title {
+                    font-size: 28rpx;
+                    color: #333;
+                    font-weight: bold;
+                }
+
+                .b-desc {
+                    font-size: 24rpx;
+                    color: #999;
+                    margin-top: 6rpx;
+                }
+            }
+
+            .b-btn {
+                background-color: #E6372D;
+                color: #fff;
+                padding: 10rpx 28rpx;
+                border-radius: 26rpx;
+                font-size: 24rpx;
+            }
+        }
+    }
+}
+
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.time-text {
+    font-size: 24rpx;
+    color: #666;
+}
+
+.banner-box {
+    position: relative;
+    width: 100%;
+
+    .banner-time {
+        position: absolute;
+        z-index: 10;
+        left: 170rpx;
+        top: 68rpx;
+        font-size: 20rpx;
+        color: #C70B0C;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/balance/pay-successful/pay-successful.vue b/pages/balance/pay-successful/pay-successful.vue
new file mode 100644
index 0000000..d5e9985
--- /dev/null
+++ b/pages/balance/pay-successful/pay-successful.vue
@@ -0,0 +1,753 @@
+<template>
+	<!-- 水印 -->
+	<view v-if="$isVip()">
+		<watermark dark="light" source="uni_alipay_transfer" />
+		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_transfer')">
+			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+		</liu-drag-button>
+	</view>
+	<view class="container">
+		<!-- 蓝色背景区域 -->
+		<view class="header-section">
+			<nav-bar ref="navBarRef" bgColor="transparent" :isBack="false" :buttonGroup="buttonGroup"
+				@button-click="handleButtonClick">
+				<template v-slot:right>
+					<view class="nav-link w100"
+						style="display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; padding: 0;">
+						<text @click="util.goBack()" style="margin-right: 20rpx;">回首页</text>
+					</view>
+				</template>
+				<template v-slot:center>
+					<view class="status-box">
+						<image class="image" src="/static/image/balance/transfer/success.png"></image>
+						<text class="status-text">支付成功</text>
+					</view>
+				</template>
+			</nav-bar>
+
+			<!-- 转账状态信息 -->
+			<view class="success-info">
+				<view class="amount-box">
+					<text class="symbol">¥</text>
+					<text class="amount alipay-font">{{ Number(payData.money).toFixed(2) }}</text>
+				</view>
+
+				<!-- 收款方/付款方式 -->
+				<view class="details-box">
+					<view class="detail-item">
+						<text class="label">{{ payData.user }}</text>
+						<text class="value">{{ Number(payData.money).toFixed(2) }}</text>
+					</view>
+					<view class="detail-item">
+						<text class="label">付款方式</text>
+						<text class="value">{{ payData.payMethod }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+
+		<view class="main-content" :style="{ top: `${190 + statusBarHeight}px` }">
+			<!-- 样式1 -->
+			<template v-if="payData.styleType == 'style1'">
+				<view class="pay-success-card">
+					<image class="title-img" style="width: 106rpx;height: 28rpx;"
+						src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
+					<view class="banner-footer" style="padding: 0 16rpx;">
+						<view class="logo-box">
+							<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
+								mode="aspectFit">
+							</image>
+						</view>
+						<view class="banner-info" style="border-top: none;">
+							<view class="text-content">
+								<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
+								<text class="b-desc">领优惠，支付更省钱</text>
+							</view>
+							<view class="b-btn">去看看</view>
+						</view>
+					</view>
+					<view class="banner-footer" style="padding: 0 16rpx;">
+						<view class="logo-box">
+							<image class="logo" :src="payData.style1.couponlist[0].imgUrl" mode="aspectFit">
+							</image>
+						</view>
+						<view class="banner-info">
+							<view class="text-content">
+								<text class="b-title">
+									<text v-if="payData.style1.couponlist[0].price && payData.style1.couponlist[0].price > 0" style="color: #EA4833;">{{ payData.style1.couponlist[0].price }}元</text>
+									{{ payData.style1.couponlist[0].title }}
+								</text>
+								<text class="b-desc">
+									<text class="b-desc-tag">{{ payData.style1.couponlist[0].tag }}</text>
+									{{ payData.style1.couponlist[0].desc }}
+								</text>
+							</view>
+							<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
+						</view>
+
+					</view>
+				</view>
+				<view class="content-section">
+					<!-- 飞猪广告 -->
+					<view class="card fliggy-card">
+						<image class="banner-img" :src="payData.style1.bannerUrl" mode="widthFix" @click="toggleBanner">
+						</image>
+						<view class="guanggao-tag">
+							<image style="width: 70rpx;height: 32rpx;"
+								src="/static/image/balance/transfer/guanggao.png">
+							</image>
+						</view>
+						<view class="yaoyiyao-container">
+							<view class="yaoyiyao-box">
+								<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
+								</image>
+								<text class="text">摇动或点击查看详情</text>
+							</view>
+						</view>
+						<view class="banner-footer"
+							v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
+							<view class="logo-box">
+								<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
+								</image>
+							</view>
+							<view class="banner-info" style="padding: 0;">
+								<view class="text-content">
+									<text class="b-title">飞猪旅行</text>
+									<text class="b-desc">飞猪出行 超多折扣</text>
+								</view>
+								<view class="b-btn">领优惠</view>
+							</view>
+
+						</view>
+						<view class="banner-footer"
+							v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
+							<view class="logo-box">
+								<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png"
+									mode="aspectFit">
+								</image>
+							</view>
+							<view class="banner-info" style="padding: 0;">
+								<view class="text-content">
+									<text class="b-title">淘宝闪购</text>
+									<text class="b-desc">每天领大额外面红包</text>
+								</view>
+								<view class="b-btn">去领取</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+			<!-- 样式2 -->
+			<template v-if="payData.styleType == 'style2'">
+				<view class="pay-success-card">
+					<image class="title-img" style="width: 106rpx;height: 28rpx;"
+						src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
+					<view class="banner-footer" style="padding: 0 16rpx;">
+						<view class="logo-box">
+							<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
+								mode="aspectFit">
+							</image>
+						</view>
+						<view class="banner-info" style="border-top: none;">
+							<view class="text-content">
+								<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
+								<text class="b-desc">领优惠，支付更省钱</text>
+							</view>
+							<view class="b-btn">去看看</view>
+						</view>
+					</view>
+					<view class="banner-footer" style="padding: 0 16rpx;"
+						v-for="item, index in payData.style2.couponlist" :key="index">
+						<view class="logo-box">
+							<image class="logo" :src="item.imgUrl" mode="aspectFit">
+							</image>
+						</view>
+						<view class="banner-info">
+							<view class="text-content">
+								<text class="b-title">
+									<text v-if="item.price" style="color: #EA4833;">{{ item.price }}元</text>{{
+										item.title
+									}}</text>
+								<text class="b-desc">
+									<text class="b-desc-tag">{{ item.tag }}</text>
+									{{ item.desc }}</text>
+							</view>
+							<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
+						</view>
+
+					</view>
+				</view>
+			</template>
+			<template v-if="payData.styleType == 'style3'">
+				<view style="padding: 24rpx 20rpx;margin-bottom: 24rpx;" class="pay-success-card">
+					<text class="title">支付有礼</text>
+					<view class="banner-box">
+						<text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
+						<image src="/static/image/balance/pay-successful/pengyipengbanner.png" style="width: 100%;"
+							mode="widthFix"></image>
+					</view>
+				</view>
+
+				<view class="promo-card" v-for="item, index in payData.style3.couponlist" :key="index">
+					<view class="promo-left-box">
+						<image class="img" :src="item.imgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="promo-right">
+						<view class="promo-content">
+							<text class="promo-title">{{ item.title }}</text>
+							<view class="promo-tags">
+								<text class="tag">{{ item.tag }}</text>
+								<text class="tag-desc">{{ item.desc }}</text>
+							</view>
+						</view>
+						<view class="promo-right-box">
+
+							<view class="price-box">
+								<text class="p-num alipay-font">{{ item.price }}</text>
+								<text class="p-unit">元</text>
+							</view>
+							<view class="free-btn">{{ item.butText }}</view>
+						</view>
+					</view>
+				</view>
+			</template>
+		</view>
+
+
+		<!-- 底部操作区 -->
+		<view class="footer-section">
+			<view class="finish-btn" @click="goBack">完成</view>
+		</view>
+	</view>
+
+</template>
+
+<script setup>
+import {
+	ref,
+	onMounted,
+	reactive,
+	getCurrentInstance
+} from 'vue';
+import {
+	onShow,
+	onLoad
+} from '@dcloudio/uni-app';
+import {
+	util
+} from '@/utils/common.js';
+import { defaultData } from './data.json';
+const {
+	appContext,
+	proxy
+} = getCurrentInstance();
+
+const statusBarHeight = ref(0);
+const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
+const payData = ref(defaultData);
+
+const bannerImages = [
+	'/static/image/balance/transfer/bottom-banner-1.png',
+	'/static/image/balance/transfer/bottom-banner-2.png'
+];
+
+// 从缓存加载数据
+const loadStorageData = () => {
+	const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
+	if (savedData) {
+		payData.value = savedData;
+	}
+};
+loadStorageData();
+
+const navBarRef = ref(null);
+const buttonGroup = ref([
+	{ name: '编辑支付数据', action: 'edit' }
+]);
+const handleButtonClick = (button) => {
+	if (button.action === 'edit') {
+		uni.navigateTo({
+			url: '/pages/balance/pay-successful/edit'
+		});
+	}
+};
+
+const toggleBanner = () => {
+	const currentIndex = bannerImages.indexOf(payData.value.style1.bannerUrl);
+	const nextIndex = (currentIndex + 1) % bannerImages.length;
+	payData.value.style1.bannerUrl = bannerImages[nextIndex];
+	uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
+};
+
+onLoad(() => {
+	// 进入转账页面埋点
+	proxy.$apiUserEvent('all', {
+		type: 'click',
+		key: 'transfer',
+		value: "转账"
+	})
+})
+
+onMounted(() => {
+	const systemInfo = uni.getSystemInfoSync();
+	if (systemInfo.statusBarHeight) {
+		statusBarHeight.value = systemInfo.statusBarHeight;
+	}
+});
+
+onShow(() => {
+	loadStorageData();
+	// #ifdef APP-PLUS
+	util.setAndroidSystemBarColor('#F5F5F5')
+	uni.setNavigationBarColor({
+		animation: { // 动画效果
+			duration: 100,
+			timingFunc: 'easeIn'
+		}
+	})
+	setTimeout(() => {
+		plus.navigator.setStatusBarStyle("light");
+	}, 500);
+	// #endif
+})
+
+const goBack = () => {
+	uni.navigateBack();
+};
+</script>
+
+<style lang="less" scoped>
+@import "@/common/main.css";
+
+.container {
+	min-height: 100vh;
+	background-color: #F5F5F5;
+}
+
+.header-section {
+	height: 860rpx;
+	background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);
+
+	::v-deep .nav-bar-container {
+		position: relative !important;
+	}
+
+	::v-deep .placeholder-box {
+		display: none !important;
+		background: transparent;
+	}
+
+	::v-deep .tipLayer {
+		position: absolute;
+	}
+}
+
+.status-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 40rpx;
+}
+
+
+.nav-link {
+	padding: 0 30rpx;
+	text-align: right;
+	font-size: 28rpx;
+	line-height: 28rpx;
+	color: #fff;
+}
+
+.success-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.pay-success-card {
+	margin: 24rpx;
+	margin-top: 16rpx;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	margin-bottom: 0;
+
+	.title-img {
+		width: 106rpx;
+		height: 28rpx;
+		margin-top: 22rpx;
+		margin-left: 16rpx;
+	}
+
+	.title {
+		font-weight: 700;
+		font-size: 24rpx;
+		color: #252525;
+		line-height: 24rpx;
+	}
+
+	.banner-box {
+		position: relative;
+		width: 660rpx;
+		height: 166rpx;
+		margin-top: 18rpx;
+
+		.banner-time {
+			position: absolute;
+			z-index: 10;
+			left: 156rpx;
+			top: 68rpx;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #C70B0C;
+			line-height: 20rpx;
+		}
+	}
+}
+
+.status-box {
+	display: flex;
+	align-items: center;
+	margin-top: 10rpx;
+	height: 34rpx;
+
+	.image {
+		width: 34rpx;
+		height: 34rpx;
+		margin-right: 12rpx;
+	}
+
+	.status-text {
+		font-size: 34rpx;
+		color: #FFFFFF;
+		font-weight: 500;
+		line-height: 34rpx;
+	}
+}
+
+.amount-box {
+	display: flex;
+	align-items: baseline;
+	color: #fff;
+	margin-top: 20rpx;
+	margin-bottom: 60rpx;
+
+	.symbol {
+		font-size: 68rpx;
+		margin-right: 4rpx;
+	}
+
+	.amount {
+		font-size: 92rpx;
+		line-height: 92rpx;
+		font-weight: 500;
+	}
+}
+
+.details-box {
+	width: 100%;
+	padding: 0 46rpx;
+
+	.detail-item {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 20rpx;
+		height: 26rpx;
+		font-size: 26rpx;
+		color: rgba(255, 255, 255, 0.9);
+
+		text {
+			font-size: 26rpx;
+			color: rgba(255, 255, 255, 0.9);
+			line-height: 26rpx;
+		}
+
+	}
+}
+
+.content-section {
+	padding: 24rpx;
+	padding-bottom: 16rpx;
+	// background-color: #F5F5F5;
+	border-radius: 30rpx 30rpx 0 0;
+}
+
+.card {
+	background-color: #fff;
+	border-radius: 20rpx;
+	margin-bottom: 24rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
+}
+
+.fliggy-card {
+	overflow: hidden;
+	position: relative;
+
+	.banner-img {
+		width: 100%;
+	}
+
+	.guanggao-tag {
+		position: absolute;
+		top: 16rpx;
+		right: 16rpx;
+	}
+
+	.yaoyiyao-container {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		margin-top: -80rpx;
+		padding-bottom: 16rpx;
+
+		.yaoyiyao-box {
+			padding: 12rpx 18rpx;
+			display: flex;
+			align-items: center;
+			background-color: #000000;
+			border-radius: 28rpx;
+			opacity: 0.5;
+
+			.img {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 14rpx;
+			}
+
+			.text {
+				color: #FFFFFF;
+				font-size: 24rpx;
+				line-height: 24rpx;
+			}
+
+		}
+	}
+
+}
+
+.banner-footer {
+	padding: 24rpx;
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.logo-box {
+		width: 76rpx;
+		height: 76rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 20rpx;
+
+		.logo {
+			width: 76rpx;
+			height: 76rpx;
+		}
+	}
+
+
+	.banner-info {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-top: 1rpx solid #F6F6F6;
+		padding: 30rpx 0;
+
+
+		.text-content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.b-title {
+			font-size: 28rpx;
+			line-height: 28rpx;
+			color: #1A1A1A;
+			font-weight: 500;
+		}
+
+		.b-desc {
+			margin-top: 12rpx;
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: #969696;
+
+			.b-desc-tag {
+				font-size: 24rpx;
+				color: #E4711F;
+				background-color: #FDF6F3;
+				line-height: 24rpx;
+				padding: 2px 4px;
+
+			}
+		}
+	}
+
+	.b-btn {
+		padding: 0 20rpx;
+		background-color: #FF3A31;
+		color: #fff;
+		font-size: 26rpx;
+		height: 52rpx;
+		line-height: 52rpx;
+		border-radius: 8rpx;
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		background: url('/static/image/balance/pay-successful/more.png');
+		top: 16rpx;
+		right: 20rpx;
+		width: 24rpx;
+		height: 12rpx;
+		background-size: contain;
+		background-repeat: no-repeat;
+	}
+}
+
+.footer-section {
+	padding: 0px 40rpx 0;
+	margin-top: 50rpx;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	padding-bottom: 24rpx;
+	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+	padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+
+	.finish-btn {
+		height: 84rpx;
+		width: 390rpx;
+		line-height: 84rpx;
+		text-align: center;
+		border: 1px solid #2172CA;
+		border-radius: 42rpx;
+		color: #2172CA;
+		font-size: 32rpx;
+		background-color: transparent;
+	}
+}
+
+.main-content {
+	position: absolute;
+	left: 0;
+	top: 190px;
+	width: 100%;
+}
+
+.promo-card {
+	// padding: 30rpx;
+	margin: 16rpx;
+	margin-bottom: 10rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+
+
+	.promo-left-box {
+		display: flex;
+		align-items: center;
+		padding: 34rpx;
+		background-image: url("/static/image/balance/transfer/card-bg-2-left.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		background-position: center;
+		height: 144rpx;
+		margin-right: -1px;
+
+
+		.img {
+			width: 70rpx;
+			height: 70rpx;
+			border-radius: 50%;
+		}
+
+	}
+
+
+
+	.promo-right {
+		height: 144rpx;
+		background-image: url("/static/image/balance/transfer/card-bg-2-right.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		background-position: center;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 32rpx 32rpx 24rpx;
+
+		.promo-title {
+			font-size: 28rpx;
+			line-height: 28rpx;
+			font-weight: 500;
+			color: #1A1A1A;
+		}
+
+		.promo-tags {
+			display: flex;
+			align-items: center;
+			margin-top: 8rpx;
+
+			.tag {
+				font-size: 24rpx;
+				line-height: 34rpx;
+				height: 34rpx;
+				color: #EF673C;
+				background-color: #FFF2F1;
+				border-radius: 4rpx;
+				margin-right: 12rpx;
+				padding: 0 12rpx;
+			}
+
+			.tag-desc {
+				font-size: 24rpx;
+				line-height: 24rpx;
+				color: #969696;
+			}
+		}
+
+
+	}
+
+	.promo-right-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.price-box {
+			color: #F93950;
+
+			.p-num {
+				font-size: 34rpx;
+				line-height: 24rpx;
+				font-weight: 500;
+			}
+
+			.p-unit {
+				font-size: 24rpx;
+				line-height: 24rpx;
+				margin-left: 2rpx;
+			}
+		}
+
+		.free-btn {
+			height: 52rpx;
+			line-height: 52rpx;
+			padding: 0 24rpx;
+			background-color: #FA3A49;
+			color: #fff;
+			font-size: 24rpx;
+			border-radius: 26rpx;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index 130a889..dee93a4 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -232,6 +232,11 @@ const menuList = [{
 	name: "转账模拟",
 	isHot: false,
 	path: "/pages/balance/transfer/transfer"
+}, {
+	icon: "zhifuchenggong",
+	name: "支付成功",
+	isHot: false,
+	path: "/pages/balance/pay-successful/pay-successful"
 }, {
 	icon: "nianduzhangdan",
 	name: "年度账单",
diff --git a/static/image/balance/pay-successful/88nongchang.png b/static/image/balance/pay-successful/88nongchang.png
new file mode 100644
index 0000000..9558a23
Binary files /dev/null and b/static/image/balance/pay-successful/88nongchang.png differ
diff --git a/static/image/balance/pay-successful/chengche.png b/static/image/balance/pay-successful/chengche.png
new file mode 100644
index 0000000..d60120e
Binary files /dev/null and b/static/image/balance/pay-successful/chengche.png differ
diff --git a/static/image/balance/pay-successful/chongzhi.png b/static/image/balance/pay-successful/chongzhi.png
new file mode 100644
index 0000000..5e2fb4d
Binary files /dev/null and b/static/image/balance/pay-successful/chongzhi.png differ
diff --git a/static/image/balance/pay-successful/mixue.png b/static/image/balance/pay-successful/mixue.png
new file mode 100644
index 0000000..6c1a4d4
Binary files /dev/null and b/static/image/balance/pay-successful/mixue.png differ
diff --git a/static/image/balance/pay-successful/more.png b/static/image/balance/pay-successful/more.png
new file mode 100644
index 0000000..ce46bae
Binary files /dev/null and b/static/image/balance/pay-successful/more.png differ
diff --git a/static/image/balance/pay-successful/pengyipengbanner.png b/static/image/balance/pay-successful/pengyipengbanner.png
new file mode 100644
index 0000000..2b9861b
Binary files /dev/null and b/static/image/balance/pay-successful/pengyipengbanner.png differ
diff --git a/static/image/balance/pay-successful/shangou.png b/static/image/balance/pay-successful/shangou.png
new file mode 100644
index 0000000..2302593
Binary files /dev/null and b/static/image/balance/pay-successful/shangou.png differ
diff --git a/static/image/balance/pay-successful/shiyou.png b/static/image/balance/pay-successful/shiyou.png
new file mode 100644
index 0000000..01791e0
Binary files /dev/null and b/static/image/balance/pay-successful/shiyou.png differ
diff --git a/static/image/balance/pay-successful/shuidian.png b/static/image/balance/pay-successful/shuidian.png
new file mode 100644
index 0000000..d59e63a
Binary files /dev/null and b/static/image/balance/pay-successful/shuidian.png differ
diff --git a/static/image/balance/pay-successful/xinxiangyin.png b/static/image/balance/pay-successful/xinxiangyin.png
new file mode 100644
index 0000000..187dc24
Binary files /dev/null and b/static/image/balance/pay-successful/xinxiangyin.png differ
diff --git a/static/image/balance/pay-successful/zhifufuli.png b/static/image/balance/pay-successful/zhifufuli.png
new file mode 100644
index 0000000..d15e67b
Binary files /dev/null and b/static/image/balance/pay-successful/zhifufuli.png differ
diff --git a/static/image/balance/pay-successful/zhifuyouli.png b/static/image/balance/pay-successful/zhifuyouli.png
new file mode 100644
index 0000000..25e22c0
Binary files /dev/null and b/static/image/balance/pay-successful/zhifuyouli.png differ
diff --git a/static/image/index/menu-icon/zhifuchenggong.png b/static/image/index/menu-icon/zhifuchenggong.png
new file mode 100644
index 0000000..c24273a
Binary files /dev/null and b/static/image/index/menu-icon/zhifuchenggong.png differ
diff --git a/static/image/index/menu-name/zhifuchenggong.png b/static/image/index/menu-name/zhifuchenggong.png
new file mode 100644
index 0000000..2e4215d
Binary files /dev/null and b/static/image/index/menu-name/zhifuchenggong.png differ