hldy_xcx/pages/oldmanindex/daypay.vue

<template>
	<view>
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="uni.navigateBack();">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 40}px`}"></view>
		<image class="bacimg" src="https://www.focusnu.com/media/directive/bgyg.png" mode="aspectFill"></image>
		<view class="xmname">
			<image src="https://www.focusnu.com/media/directive/hts.png" mode="aspectFill" class="bgt"></image>
			<image src="https://www.focusnu.com/media/directive/index/nan.png" mode="aspectFill" class="ava"></image>
			<view class="name">李富贵</view>
			<view class="xbjs">
				女 &nbsp;&nbsp;|&nbsp; <text style="font-weight: bold;"> 80</text>岁&nbsp; |&nbsp; 2025.01.01
			</view>
		</view>
		<view class="box" v-for="f in 4" :key='f'>
			<image src="https://www.focusnu.com/media/directive/kcrd.png" mode="aspectFill" class="bgig"></image>
			<view class="top">
				<view class="lefts">
					<image src="https://www.focusnu.com/media/directive/sj.png" mode="aspectFill" ></image>
					2026.03.12
				</view>
				<view class="rort">
					<text>总金额&nbsp;&nbsp;<text>￥</text></text> 77.43
				</view>
			</view>
			<view class="boxcon" >
				<view class="tbox" v-for="v in 4" :key='v' @click="navquyu">
					<view class="tso">
						<text>护理类</text>
						<text>20</text>
					</view>
					<view class="tso" style="justify-content: flex-start;align-items: flex-end;">
						<text style="line-height: 44rpx;">￥</text>
						<view style="font-weight: bold;">13.41</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted, onUnmounted } from 'vue';
	import exit from "@/compontent/public/exit.vue"
	import downMenu from '@/compontent/public/oldmandownmenu.vue'
	import {
		getMessageList
	} from '@/pages/addstaff/api/addjigou.js'
	const navquyu =()=>{
		uni.navigateTo({
			url:'/pages/oldmanindex/region'
		})
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 703rpx;
		height: 417rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 20rpx auto;
		position: relative;
		padding: 30rpx;
		.boxcon{
			width: 106%;
			display: flex;
			flex-wrap: wrap;
			.tbox{
				width: 210rpx;
				height: 145rpx;
				background: #F6F9FF;
				border-radius: 30rpx;
				margin: 15rpx 15rpx 0 -2px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 10rpx;
				.tso{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 10rpx;
					view{
						font-weight: 400;
						font-size: 40rpx;
						color: #333333;
						text{
							font-size: 30;
						}
					}
					text{
						&:nth-child(1){
							font-weight: 400;
							font-size: 24rpx;
							color: #888888;
						}
						&:nth-child(2){
							font-weight: 400;
							font-size: 24rpx;
							color: #4F5259;
						}
					}
				}
			}
		}
		.top{
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.rort{
				font-weight: bold;
				font-size: 35rpx;
				color: #333333;
				display: flex;
				align-items: center;
				text{
					font-weight: 400;
					font-size: 23rpx;
					color: #888888;
					text{
						color: #333333;
					}
				}
			}
			.lefts{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
					    margin-top: 5rpx;
				}
			}
			
		}
		
		.bgig{
			width: 350rpx;
			height: 135rpx;
			position: absolute;
			right: 26rpx;
			top: 0;
			z-index: 0;
		}
	}

.xmname {
		width: 705rpx;
		height: 155rpx;
		margin: 20rpx auto 0;
		position: relative;
		z-index: 2;

		.xbjs {
			position: absolute;
			top: 95rpx;
			left: 143rpx;
			z-index: 2;
			font-weight: 400;
			font-size: 23rpx;
			color: #212327;
			display: flex;
			align-items: center;
		}

		.name {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			position: absolute;
			top: 47rpx;
			left: 143rpx;
			z-index: 2;
		}

		.ava {
			position: absolute;
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
			top: 34rpx;
			left: 30rpx;
			z-index: 2;
		}

		.bgt {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}

	.bacimg {
		width: 100%;
		height: 780rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.title-back {
		background: rgba(255, 255, 255, 0);
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.left-father {
		width: 150rpx;
		height: 100%;
		display: flex;
		align-items: flex-end;

		.back-img {
			width: 45rpx;
			height: 40rpx;
			margin-left: 40rpx;
			margin-right: 15rpx;
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>