discounts-minapp/trip/expense/index.vue

<template>
	<view class="expense">
		<view class="block">
			<view class="item title">
				<view class="label">
					起步价
				</view>
				<view class="value">
					30元
				</view>
			</view>
			<view class="item title">
				<view class="label">
					里程费（共30公里）
				</view>
				<view class="value">
					42元
				</view>
			</view>
			<view class="item">
				<view class="label">
					起步里程（含5.0公里）
				</view>
				<view class="value">
					0元
				</view>
			</view>
			<view class="item">
				<view class="label">
					收费里程（含6.0公里）
				</view>
				<view class="value">
					10.05元
				</view>
			</view>
			<view class="item title border">
				<view class="label">
					远途费
				</view>
				<view class="value">
					10.05元
				</view>
			</view>
			<view class="item">
				<view class="label">
					合计
				</view>
				<view class="value">
					72.05元
				</view>
			</view>
			
			
			<view class="total">
				预估金额 <text class="num">72.15</text>   元
			</view>
			<view class="notice">
				预付费用是根据实时交通情况、预估行驶里程、时间等因素计算
				得出，存在波动，仅供参考。（行程调整、路线修改、高速费等
				将影响最终价格）
			</view>
			
			
			
		</view>
		
		<view class="block">
			<view class="item title">
				<view class="label">
					计费规则
				</view>
				<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
			</view>
			
			<view class="item title">
				<view class="label">
					常见问题
				</view>
				<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss" scoped>
	.expense {
		background: #f5f5f5;
		height: 100vh;
		padding-top: 20rpx;
		.block {
			margin-bottom: 20rpx;
			background: #fff;
			padding: 28rpx 34rpx;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #AAAAAA;
			font-size: 28rpx;
			line-height: 70rpx;
			position: relative;
			.jiantou{
				position: absolute;
				top: 50%;
				right: 0%;
				transform: translateY(-50%);
				width: 20rpx;
				height: 20rpx;
			}
		}

		.item.title {
			color: #222222;
		}
		.item.border {
			border-bottom: 2rpx solid #F0F0F0;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
		}
		
		.total{
			text-align: right;
			color: #222222;
			font-size: 28rpx;
			margin: 28rpx 0;
			.num{
				font-weight: bold;
				font-size: 36rpx;
			}
		}
		.notice{
			color: #AAAAAA;
			font-size: 24rpx;
		}
		
	}
</style>