newyqg/pages/money/money.vue

<template>
	<view class="center">
		<view class="top">
			<image class="top-bg" src="../../static/img/money-bg.png" mode=""></image>
			<view class="top-font">现金余额（元）</view>
			<view class="num">0.00</view>
		</view>
		<view class="navbar">
			<view class="navbar-item">
				<view class="navbar-font">
					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
					<view class="font">趣豆</view>
				</view>
				<view class="navbar-num">200</view>
			</view>
			<view class="navbar-item">
				<view class="navbar-font">
					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
					<view class="font">趣豆</view>
				</view>
				<view class="navbar-num">200</view>
			</view>
			<view class="navbar-item">
				<view class="navbar-font">
					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
					<view class="font">趣豆</view>
				</view>
				<view class="navbar-num">200</view>
			</view>
		</view>
		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
export default {
	data() {
		return {
			tabbar: tabbar,
			current: 3
		};
	}
};
</script>

<style lang="less">
.center {
	height: auto;
	min-height: 100%;
	background: #ffffff;
}
.top {
	margin: 20rpx auto 0;
	position: relative;
	width: 700rpx;
	height: 200rpx;
	padding: 54rpx 40rpx;
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 700rpx;
		height: 200rpx;
	}
	.top-font {
		position: relative;
		z-index: 2;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 1;
	}
	.num {
		line-height: 1;
		position: relative;
		z-index: 2;
		margin-top: 24rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}
.navbar {
	width: 700rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 40rpx auto 0;
	padding: 40rpx 0 50rpx;
}
</style>