<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">{{currencySymbol}}</span> <span>{{currentBalance}}</span> 
				 </view>	 
				     <view class="index-a1" @click="sendMegToIndex">
						 Recharge
						 </view>
				 </view>
				 	
			</view>
</template>
<script>
	const COMPONENT_NAME = 'balance'
	export default {
		name: COMPONENT_NAME,
	    props:["currencySymbol","currentBalance"],
		data() {
			return {
		
			}
		},
		computed: {
		
		},
		mounted() {
		
		},
		methods: {


	  sendMegToIndex: function(){
	         // 向父组件传值  第一个参数是方法名：send   第二个参数是传递的值：我是来自子组件的值
	                this.$emit("send", '')
	         }
	},
	}
</script>


<style>

	.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';
	display: flex;
	    align-items: center;
	}
	.category-sigh{
		font-size: 36rpx;
	}
	.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>
