lcoco/pages/wallet/model/income.vue

<template>
	<view>
		<view class="index">
			<image class="index-bg" src="@/static/img/perfect/img2.png" mode="scaleToFill"></image>
			<view class="head-money">
				<view class="sys-color-794B06 sys-size-28">我的波点（个）</view>
				<view class="head-mongy-1">
					<view class="sys-size-52 sys-color-362100 sys-weight-600">138</view>
				</view>
			</view>
		</view>
		<view class="t-box sys-background-FFDFC3">
			<view class="sys-background-gray-f"></view>
		</view>
		<view class="box-sizing-border box-card">
			<view class="card-echrecs box-sizing-border">
				<view class="sys-size-32 sys-color-gray-3 sys-weight-600">每日波点</view>
				<view class="card-echrecs-box">
					<ColumnEcharts ref="columnEcharts"></ColumnEcharts>
				</view>
			</view>
			<image class="crad-f" src="@/static/img/perfect/img2.png" mode="scaleToFill" @click="selectFun(1)"></image>
			<view class="card-b">
				<view class="sys-background-FE6915 sys-radius-16 sys-size-32 sys-color-white sys-weight-600" @click="selectFun(2)">兑换JM币</view>
				<view class="sys-radius-16 tx-view sys-size-32 sys-color-FE6915 sys-weight-600" @click="selectFun(3)">提现</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ColumnEcharts from './column-echarts.vue';
	export default {
		components:{ColumnEcharts},
		data(){
			return{
				
			}
		},
		methods:{
			selectFun(type){
				if(type === 1){
					// 波点兑换
				}else if(type === 2){
					// 兑换JM币
				}else if(type === 3){
					// 提现
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.index{
		width: 100%;
		height: 436rpx;
		position: relative;
		
		.index-bg{
			width: 100%;
			height: 436rpx;
		}
		.head-money{
			position: absolute;
			left: 54rpx;
			bottom: 76rpx;
			.head-mongy-1{
				display: flex;
				align-items: center;
				margin-top: 26rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
			}
		}
	}
	.t-box{
		height: 30rpx;
		view{
			height: 30rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
		}
	}
	.box-card{
		min-height: 100rpx;
		padding: 0 32rpx 10rpx 32rpx;
		.card-echrecs{
			width: 100%;
			height: 516rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1);
			margin-bottom: 30rpx;
			padding: 32rpx 36rpx;
			.card-echrecs-box{
				width: 100%;
				height: 400rpx;
				margin-top: 20rpx;
			}
		}
		.crad-f{
			width: 100%;
			height: 160rpx;
			border-radius: 20rpx;
		}
		.card-b{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			view{
				width: 332rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
			}
			.tx-view{
				box-sizing: border-box;
				border: 2rpx solid #FE6915;
			}
		}
	}
</style>