property/user_ui/work/pages/manage/moneydetail.vue

<template>
	<view class="mdetail">
		<image :src="mbg" class="mbg"></image>
		<view class="mdbox">
			<view class="mdtop">
				<view class="mdttit">2024/01 - 2024/12  应缴总额/元</view>
				<view class="mdttxt">4307.20</view>
			</view>
			<view class="mdmain">
				<view class="mdmit">业主信息</view>
				<view class="mdlist">
					<view class="mdltit">户主姓名</view>
					<view>王宇宁</view>
				</view>
				<view class="mdlist">
					<view class="mdltit">房号</view>
					<view>1号楼3单元1204</view>
				</view>
				
				<view class="mdmit">缴费详情</view>
				<view class="mdlist">
					<view class="mdltit">物业费用(元)</view>
					<view>3247.20</view>
				</view>
				<view class="mdlist">
					<view class="mdltit">车位费用(元)</view>
					<view>960.00</view>
				</view>
				<view class="mdlist">
					<view class="mdltit">能耗费用(元)</view>
					<view>100.00</view>
				</view>
			</view>
		</view>
		<view class="pdlr12">
			<view class="mdfbox" @click="getBillFn">
				<view>历史账单</view>
				<image :src="rimg"></image>
			</view>
		</view>
		
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				mbg:require('@/work/static/manage/mbg.png'),
				rimg:require('@/static/images/rimg.png'),
			}
		},
		onLoad: function() {
		
		},
		methods:{
			checkPermi, checkRole,
			getBillFn(){
				this.$tab.navigateTo("/work/pages/manage/moneybill")
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.mdetail{background: linear-gradient(180deg, #4882EC 0%, #F3F3F0 100%) no-repeat;min-height: 100vh;background-position: top;background-size: 100% 548rpx;padding: 32rpx 18rpx;position: relative;}
.mbg{width: 100%;height: 702rpx;margin-bottom: 20rpx;}
.mdbox{position: absolute;left: 18rpx;height:702rpx;right: 18rpx;top: 32rpx;box-sizing: border-box;display: flex;flex-direction: column;
	.mdtop{padding: 76rpx 52rpx 0;height: 208rpx;flex: 0 0 auto;position: relative;box-sizing: border-box;
	&::after{content: '';position: absolute;left: 96rpx;right: 78rpx;height: 2rpx;border-bottom: 2rpx dashed #A7A7A7;bottom: 0;}
		.mdttit{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 26rpx;}
		.mdttxt{font-weight: bold;font-size: 40rpx;color: #272727;}
	}
	.mdmain{flex: 1;overflow: auto;padding: 24rpx 50rpx 0 52rpx;
		.mdmit{font-weight: bold;font-size: 26rpx;color: #272727;margin-bottom: 26rpx;padding-top: 10rpx;}
		.mdlist{display: flex;justify-content: space-between;margin-bottom: 24rpx;
			.mdltit{min-width: 100rpx;flex: 0 0 auto;text-align-last: justify;margin-right: 12rpx;}
			view{font-weight: 500;font-size: 26rpx;color: #666666;}
		}
	}
}
.mdfbox{height: 96rpx;background: #FFFFFF;border-radius: 20rpx;padding: 0 26rpx;box-sizing: border-box;display: flex;align-items: center;
	image{width: 13rpx;height: 24rpx;}
	view{font-weight: 500;font-size: 26rpx;color: #272727;flex: 1;margin-right: 4rpx;}
}
</style>