ydd_front/mer_uniapp/pages/rider_index/components/rider_me/index.vue

<template>
	<view class="container">
		<view class="item-me-bg"></view>
		<view class="item-me">
			<view class="item-row">
				<view>
					<view class="row-je">2031.7</view>
					<view class="row-jf">累计小费</view>
				</view>
				<view style="width: 2rpx;height: 96rpx;border: 2rpx solid #D6D7DC;margin: 0 80rpx"></view>
				<view>
					<view class="row-je">68</view>
					<view class="row-jf">跑腿订单</view>
				</view>
			</view>
			<view class="item-column">
				<view v-for="(item, index) in riderInfo" :key="index" class="column-box" :style="{paddingTop: index !== 0 ? '27rpx' : ''}"
				 @tap="onRiderClick(item.id)">
					<view class="column-name">
						<image :src="item.img"></image>{{item.name}}
					</view>
					<view class='iconfont icon-jiantou ' style="font-size: 30rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				riderInfo: [{
					id: 1,
					name: '跑腿记录',
					img: '/static/img/run-errands.png',
					pagePath: ''
				}, {
					id: 2,
					name: '提现',
					img: '/static/img/withdrawal.png',
					pagePath: ''
				}, {
					id: 3,
					name: '返回用户端',
					img: '/static/img/run-errands.png',
					pagePath: ''
				}],
			}
		},
		methods: {
			onRiderClick(id) {
				if (id === 3) {
					uni.switchTab({
						url: '/pages/user/index'
					})
				}
			}
		},
		onLoad(options) {},
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		flex: 1;
		width: 100%;
	}

	.item-me-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 80rpx;
		background-color: $bg-color-primary;
		z-index: 1;
	}

	.item-me {
		position: relative;
		top: 0;
		z-index: 9999;
		padding: 0 19rpx;

		.item-row {
			width: 100%;
			height: 304rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.row-je {
				font-weight: 500;
				font-size: 46rpx;
				color: #141414;
			}

			.row-jf {
				font-weight: 400;
				font-size: 27rpx;
				color: #999999;
			}
		}

		.item-column {
			width: 100%;
			background-color: #fff;
			border-radius: 23rpx;
			padding: 20rpx 0 96rpx 39rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.column-box {
				width: 100%;
				padding: 0 39rpx 27rpx 0;
				border-bottom: 2rpx solid #D6D7DC;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.column-name {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 27rpx;
				color: #141414;

				image {
					width: 38.5rpx;
					height: 38.5rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>