JP-ChargeTeam51/pages/newPage/chargeMoney/chargeMoney.vue

<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>
	<!-- 模态框 -->
	<u-modal title="昨日收益"  v-model="show"
	:title-style="{color: '#101010'}"   confirm-color="#333333">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				show: true,
				content:`昨日收益=充电金账户余额*(年化率/365)
若资金已转出，或转入资金还未生效则不会产生昨日收益`
			}
		},
		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;
		::v-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;
		   }
	   }
   }
.slot-content {
			font-size: 28rpx;
			color: #111111;
			padding:0 30rpx;
			margin: 32rpx 0 ;
			line-height: 40rpx;
			
			
		}


</style>