sxg/pages/money/money.vue

<template>
	<view class="center">
		<view class="top">
			<image class="top-bg" src="../../static/img/order99.png" mode=""></image>
			<view class="top-font">现金余额（元）</view>
			<view class="num">0.00</view>
		</view>
		<view class="navbar">
			<view class="navbar-item" @click="navTo('/pages/money/qudou')">
				<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="vvv"></view>
			<view class="navbar-item">
				<view class="navbar-font" @click="navTo('/pages/user/scoreAccumulate')">
					<image class="navbar-image" src="../../static/money/m03.png" mode=""></image>
					<view class="font">积分</view>
				</view>
				<view class="navbar-num">200</view>
			</view>
			<view class="vvv"></view>
			<view class="navbar-item">
				<view class="navbar-font">
					<image class="navbar-image" src="../../static/money/m04.png" mode=""></image>
					<view class="font">置换券</view>
				</view>
				<view class="navbar-num">200</view>
			</view>
		</view>
		<view class="content-box">
			<view class="content-title">
				<view class="title-left">
					<image src="../../static/money/m02.png" mode=""></image>
					<text>现金余额明细</text>
				</view>
				<view class="title-right">
					全部
					<image src="../../static/money/m01.png" mode=""></image>
				</view>
			</view>
			<view class="list" v-for="(item, index) in list" :style="{ background: index % 2 == 0 ? '#fff' : '#F9F9F9' }">
				<view class="list-box">
					<view class="list-left">
						<view class="top1">{{ item.title }}</view>
						<view class="bottom">{{ item.time }}</view>
					</view>
					<view class="list-right" :style="{ color: index % 2 == 0 ? '#ff0000' : '#000000' }">{{ item.money }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
export default {
	data() {
		return {
			currentIndex: 0,
			tabbar: tabbar,
			current: 3,
			list: [
				{
					title: '释放保证金',
					time: '2022-01-21 14:12',
					money: '200'
				},
				{
					title: '预约入场',
					time: '2220-01-21 14:12',
					money: '-200'
				},
				{
					title: '释放保证金',
					time: '2022-01-21 14:12',
					money: '200'
				},
				{
					title: '预约入场',
					time: '2220-01-21 14:12',
					money: '-200'
				}
			]
		};
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="less">
.center {
	height: 100%;
	width: 100%;
	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;
		border-radius: 25rpx;
	}

	.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 {
	display: flex;
	justify-content: space-around;
	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;

	.vvv {
		width: 2rpx;
		height: 74rpx;
		background: #dcdcdc;
	}

	.navbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.navbar-font {
			margin-bottom: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.font {
				font-size: 30rpx;
				font-weight: bold;
				color: #0c1732;
			}
		}

		.navbar-num {
			font-size: 34rpx;
			font-weight: bold;
			color: #0c1732;
		}
	}
}

.content-box {
	margin: 0 30rpx;

	.content-title {
		margin: 50rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-left {
			image {
				width: 8rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 34rpx;
				font-weight: bold;
				color: #0c1732;
			}
		}

		.title-right {
			font-size: 30rpx;
			font-weight: 500;
			color: #0c1732;

			image {
				margin-left: 10rpx;
				width: 17rpx;
				height: 12rpx;
			}
		}
	}
}

.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.list-box {
		width: 700rpx;
		height: 143rpx;
		width: 100%;
		display: flex;

		border-radius: 10rpx;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;

		.list-left {
			height: 143rpx;
			display: flex;
			flex-direction: column;

			justify-content: space-around;

			.top1 {
				font-size: 30rpx;
				font-weight: bold;
				color: #0c1732;
			}

			.bottom {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.list-right {
			font-size: 36rpx;
			font-weight: bold;
			color: #ea453c;
		}
	}
}
</style>