<template>
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					账单结算
				</view>
			</view>
		</view>
		<view style="margin: -60px auto 0;">
			<view class="">
				<view class="content11">
					2026
				</view>
				<view class="box1">
					<view class="content22">
						<view class="">
							10/25-10/25账单
						</view>
						<view class="">
							共<text>0</text>单
							<uni-icons type="right" size="12"></uni-icons>
						</view>
					</view>
					<view style="border-bottom: 1px solid #eee;">
						<view class="content33">
							<view class="content44">
								商品金额
							</view>
							<view class="">
								$0.00
							</view>
						</view>
						<view class="content33">
							<view class="content44">
								餐盒费
							</view>
							<view class="">
								$0.00
							</view>
						</view>
						<view class="content33">
							<view class="content44">
								活动成本
							</view>
							<view class="">
								$0.00
							</view>
						</view>
						<view class="content33">
							<view class="content44">
								平台服务费
							</view>
							<view class="">
								$0.00
							</view>
						</view>
					</view>
					<view class="">
						<view class="content33">
							<view class="content44">
								结算金额
							</view>
							<view class="">
								$0.00
							</view>
						</view>
						<view class="content33">
							<view class="content44">
								本期期初
							</view>
							<view class="">
								$0.00
							</view>
						</view>
						<view class="content33">
							<view class="content44">
								实际打款金额
							</view>
							<view class="">
								$0.00
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {}
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad(option) {
			
		},
		methods: {
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}
	
	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.title-name {
		padding-top: 55px;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.box1 {
		width: 95%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.content11{
		height: 35px;
		line-height: 35px;
		padding-left: 20px;
		font-size: 14px;
		font-weight: 700;
	}
	.content22{
		display: flex;
		height: 30px;
		line-height: 22px;
		border-bottom: 1px solid #eee;
		font-size: 13px;
		font-weight: 600;
	}
	.content33{
		height: 25px;
		line-height: 25px;
		display: flex;
	}
	.content44{
		flex: 1;
	}
</style>