充电金

pages.json

@@ -750,6 +750,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/newPage/chargeMoney/chargeMoney",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/newPage/chargeMoney/chargeMoney.vue

@@ -0,0 +1,234 @@
+<template>
+	<view>
+		<view class="header">
+			<ujp-navbar title="充电金" title-color="#fff" :border-bottom="false" back-icon-color="#fff">
+				<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
+			
+					<view class="iconfont qr-code">
+						&#xe60d;
+					</view>
+				</view>
+			</ujp-navbar>
+			
+			<!-- 宣传语 -->
+			<view class="slogan">
+				<view class="img">
+					<img src="../../../assets/img/slogan1.png" alt="">
+				</view>
+				<view class="img">
+					<img src="../../../assets/img/chargeMoney.png" alt="">
+				</view>
+				
+			</view>
+			<!-- 金额 -->
+			<view class="amount">
+				<view class="headline">
+					总金额(元)
+					<view class="tag">
+						年化率最高6% <u-icon name="arrow-right" size="10"></u-icon>
+					</view>
+				</view>
+				<view class="number">
+					<text>2000.88</text>
+					<u-icon name="arrow-right" color="#d3d3d3" size="36"></u-icon>
+				</view>
+				<!-- 收益 -->
+				<view class="earnings">
+					<view class="yesterday">
+						<view class="title">
+							昨日收益(元)<u-icon name="info-circle" color="#999999"></u-icon>
+						</view>
+						<view class="total-number">
+							0.88
+						</view>
+					</view>
+					<view class="total ">
+						<view class="title">
+							累计收益(元)
+						</view>
+						<view class="total-number">
+							160.88
+						</view>
+					</view>
+					
+				</view>
+				<!-- 按钮 -->
+				<view class="btn">
+					<view class="withdraw">
+						提现
+					</view>
+					<view class="top-up">
+						充值
+					</view>
+				</view>
+			</view>
+			
+			
+		</view>
+		
+		
+		
+		<view class="options">
+			<view class="item">
+				<view class="text">
+					余额不足时自动扣除充电金
+				</view>
+				<view class="icon">
+					<u-switch v-model="checked" size="40" active-color="#FBB94A"></u-switch>
+				</view>
+			</view>
+			<view class="item">
+				<view class="text">
+					合作协议
+				</view>
+				<view class="icon">
+					<u-icon name="arrow-right" color="#999999"></u-icon>
+				</view>
+			</view>
+			<view class="item">
+				<view class="text">
+					联系客服
+				</view>
+				<view class="icon">
+					<u-icon name="arrow-right" color="#999999"></u-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				checked: false,
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.header{
+		background: linear-gradient(180deg, rgba(0,148,79,1) 25%,rgba(0,185,98,1) 79%,rgba(246,246,246,1) 100%);
+		height: 830rpx;
+		margin-bottom: 200rpx;
+		/deep/.u-navbar{
+			z-index: 1 !important;
+			background: none !important;
+			
+		}
+		
+			.qr-code {
+				
+				color: #fff;
+			}
+		
+		// 宣传语
+		.slogan{
+			padding: 40rpx 42rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		// 金额
+		.amount{
+			border-radius: 12px;
+			background-color: rgba(255, 255, 255, 1);
+			margin: 0 32rpx;
+			padding: 56rpx 40rpx;
+			position: relative;
+			.tag{
+				width: 226rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				border-radius: 50px 0px 0px 50px;
+				background: linear-gradient(153.73deg, rgba(247,233,171,1) -36.35%,rgba(252,241,190,1) -16.47%,rgba(254,201,105,1) 9.59%,rgba(253,243,145,1) 72.54%,rgba(251,185,74,1) 100.1%);
+				color: rgba(165, 87, 0, 1);
+				font-size: 24rpx;
+				text-align: center;
+				position: absolute;
+				top: 44rpx;
+				right: 0;
+			}
+		}
+		.number{
+			color: rgba(16, 16, 16, 1);
+			font-size: 88rpx;
+			display: flex;
+			align-items: center;
+			text{
+				margin-right: 8rpx;
+			}
+		}
+		// 收益
+		.earnings{
+			margin-top: 72rpx;
+			display: flex;
+			.yesterday,.total{
+				.title{
+					color: rgba(119, 119, 119, 1);
+					font-size: 12px;
+				}
+				.total-number{
+					color: rgba(51, 51, 51, 1);
+					font-size: 40rpx;
+					margin-top: 8rpx;
+				}
+			}
+			.total{
+				margin-left: 148rpx;
+			}
+			
+		}
+		// 按钮
+		.btn{
+			margin-top: 40rpx;
+			display: flex;
+			justify-content: space-between;
+			.withdraw{
+				width: 145px;
+				height: 96rpx;
+				line-height: 96rpx;
+				border-radius: 4px;
+				background-color: rgba(230, 245, 230, 1);
+				color: rgba(0, 185, 98, 1);
+				font-size: 32rpx;
+				text-align: center;
+			}
+			.top-up{
+				width: 145px;
+				height: 96rpx;
+				line-height: 96rpx;
+				border-radius: 4px;
+				background-color: rgba(0, 185, 98, 1);
+				color: rgba(255, 255, 255, 1);
+				font-size: 32rpx;
+				text-align: center;
+			}
+		}
+		
+	}
+
+
+
+   .options{
+	   background-color: #fff;
+	   border-radius: 12px;
+	   margin:0 32rpx;
+	   .item{
+		   display: flex;
+		   justify-content: space-between;
+		   align-items: center;
+		   border-bottom:1px solid #F0F0F2;
+		   padding: 24rpx 0;
+		   margin: 0 32rpx;
+		   .text{
+			   color: rgba(51, 51, 51, 1);
+			   font-size: 32rpx;
+		   }
+	   }
+   }
+</style>