新增【包月卡分润详情】，展示每次包月卡分润结算的详细内容；

pages.json

@@ -316,6 +316,15 @@
             }
             
         }
+        ,{
+            "path" : "pagesFinance/share/monthlyCardDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pagesFinance/share/monthlyCardDetails.vue

@@ -0,0 +1,196 @@
+<template>
+	<view>
+		<u-navbar>分润详情</u-navbar>
+		<view class="details">
+		
+			<view class="details-main">
+				<view class="details-price">
+					<h3>18.60元</h3>
+				</view>
+				<p>分润金额</p>
+				<img class="withdraw" src="../..//assets/img/withdraw.png" alt="">
+			</view>
+		</view>
+		<view class="details">
+			<view class="details-title">
+				<h4>订单明细</h4>
+			</view>
+			<view class="details-row">
+				<p>包月卡分润金额
+
+				</p>
+				<span>20元</span>
+			</view>
+			<view class="details-row">
+				<p>分润比例</p>
+				<span>90%</span>
+			</view>
+			<view class="details-row">
+				<p>周期内充电次数</p>
+				<span>1次</span>
+			</view>
+		</view>
+
+<view class="details">
+			<view class="details-title">
+				<h4>更多信息</h4>
+			</view>
+			<view class="details-row">
+				<p>来源站点
+
+				</p>
+				<span>荆鹏软件园充电站</span>
+			</view>
+			<view class="details-row">
+				<p>用户ID</p>
+				<span>38193818%</span>
+			</view>
+			<view class="details-row">
+				<p>包月卡卡号</p>
+				<span>a1491849184914</span>
+			</view>
+<view class="details-row">
+				<p>卡有效期</p>
+				<span>2022年7月1日至2022年7月30日</span>
+			</view>
+<view class="details-row">
+				<p>结算时间</p>
+				<span>2022年7月1日</span>
+			</view>
+
+
+		</view>
+
+
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	page {
+		background-color: #F7F7F7;
+	}
+</style>
+<style lang="scss" scoped>
+	.detailsBtn {
+		margin: 16px;
+
+		.detailsBtn-btn {
+			border-color: #185AC6 !important;
+			border-radius: 8px !important;
+			background: none !important;
+			color: #185AC6 !important;
+		}
+	}
+
+	.details-title {
+		margin-bottom: 20px;
+
+		h4 {
+			font-weight: normal;
+			font-size: 16px;
+			position: relative;
+			padding-left: 10px;
+
+			&::after {
+				content: '';
+				position: absolute;
+				height: 12px;
+				width: 4px;
+				background-color: #185ac6;
+				left: 0;
+				top: 5px;
+			}
+		}
+	}
+
+	.details-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 15px;
+
+		p {
+			color: #86898C;
+			
+		}
+
+	}
+
+	.details-row-sum {
+		float: right;
+		color: #101010;
+		font-size: 14px;
+
+	}
+
+	.details {
+		margin: 16px;
+		padding: 20px;
+		background-color: #fff;
+		border-radius: 8px;
+        position: relative;
+		.details-head {
+			text-align: center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			h4 {
+				font-size: 18px;
+				font-weight: normal;
+				margin-left: 4px;
+			}
+		}
+
+		.details-price {
+			margin-top: 12px;
+			margin-bottom: 4px;
+			display: flex;
+			align-items: flex-end;
+			justify-content: center;
+
+			h3 {
+				font-size: 36px;
+				color: #27B148;
+				line-height: 36px;
+				margin: 0 4px;
+				font-weight: normal;
+			}
+
+			span {
+				font-size: 20px;
+				color: #27B148;
+			}
+		}
+
+		.details-main {
+			text-align: center;
+             
+           .withdraw{
+			   width: 21.3%vw;
+			   height: 21.3vw;
+			   position: absolute;
+			   top: 2vw;
+			   right: 2.5vw;
+		   }
+			p {
+				color: #777;
+				margin-top: 4px;
+			}
+		}
+	}
+</style>