<template>
	<view class="index-header ">
		<view class="flex">
		 <p class="p">Available Balance</p>
		 <slot name="rules"></slot>
		 		</view>
		 <view class="rq flex">
		 <view class="index-p1">
		 	<span class="category-sigh">₦</span>387400.50
		 </view>	 
		     <view class="index-a1" @click="goRecharge">
				 Recharge
				 </view>
		 </view>
	</view>
</template>

<script>
	const COMPONENT_NAME = 'balance'
	export default {
		name: COMPONENT_NAME,
	
		data() {
			return {
		
			}
		},
		computed: {
		
		},
		mounted() {
		
		},
		methods: {
		goRecharge(){
			uni.navigateTo({
				url:'../../pages/recharge/index'
			})
		}
	},
	}
</script>


<style>
	@font-face {
			font-family: 'din';
			font-weight: normal;
			font-style: normal;
			src: url("~@/static/fonts/DIN-Bold.otf") format("truetype");
		}
	
	.index-header{
		background-color:#34026B ;
		padding: 48rpx 36rpx;
	    padding-bottom: 80rpx;
	}
	.index-header .p{
		color: #9A80B5;
		font-size: 36rpx;
		text-transform: capitalize;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-flow: row wrap; 
	}
	.index-header  .rq{
		margin-top: 32rpx;
	}
	.index-p1{
		font-size: 60rpx;
		color: #fff;
		text-transform: capitalize;
		font-family: 'din';
		position: relative;
		padding-left: 30rpx;
	}
	.category-sigh{
		font-size: 36rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.index-a1{
		width: 176rpx;
		line-height: 60rpx;
		border-radius: 16rpx;
		background-color: #491C7A;
		padding-left: 26rpx;
	    color: #fff;
		font-size: 24rpx;
		position: relative;
	}
	.index-a1::before{
		content: '';
		width: 24rpx;
		height: 24rpx;
		background: url(../../static/home/top_icon_ins.png)no-repeat;
		position: absolute;
		right: 8rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	
</style>
