<template>
	<view class="fee-appeal-page">
		<view class="bike-fee-card">
			<view class="fee-row flex justify-between">
				<view class="fee-label">
					单车费用
				</view>
				<view class="fee-amount">
					2025-04-14 19:26:15
				</view>
			</view>
			<view class="fee-row flex justify-between">
				<view class="fee-label">
					骑行费用
				</view>
				<view class="fee-amount">
					1.5元
				</view>
			</view>
		</view>
		<view class="bike-fee2-card">
			<view class="header flex">
				<image src="/static/QQ截图20250417160833.png"></image>
				<span>HI~遇到了什么问题?</span>
			</view>
			<view class="content">
				<view class="issue-title">
					骑行费问题
				</view>
				<view class="button-group flex justify-between">
					<view class="button-with-border">
						调度费申诉
					</view>
					<view class="button-with-border">
						已关锁仍计费
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
</script>

<style scoped>
	.fee-appeal-page {
		padding: 20px;
	}

	.bike-fee-card {
		background-color: #fff;
		padding: 16px 16px 0px 16px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.fee-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid #f0f0f0;
		/* Add a light separator line */
	}

	.fee-label {

		font-size: 14px;
		font-weight: 500;
		color: #000;
	}

	.fee-amount {
		font-size: 14px;
		/* Slightly smaller text */
		color: #000;
	}

	.bike-fee2-card {
		background: linear-gradient(129deg, rgb(195, 236, 233), rgb(226, 246, 244));
		padding: 5px;
		height: 160px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	/* 标题部分 */
	.header {
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		color: #333333;
		height: 60px;
		line-height: 60px;  
    letter-spacing: 2px;
	}

	.header image {
		width: 80px;
		height: 60px;
	}

	/* 内容部分 */
	.content {
		display: flex;
		flex-direction: column;
		gap: 12px;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
	}

	/* 问题标题样式 */
	.issue-title {
		font-size: 14px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗 */
		color: #444444;
		/* 字体颜色 */
	}

	/* 按钮组样式 */
	.button-group {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		/* 按钮之间的间距 */
	}

	/* 按钮样式 */
	.button-with-border {
		border: 1px solid #d0d0d0;
		/* 按钮边框颜色 */
		border-radius: 4px;
		padding: 5px 30px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
		font-weight: 500;
	}
</style>