From eef3a209594b6e57081aecf85049e20d18db1d91 Mon Sep 17 00:00:00 2001
From: wangyuxin <2695255229ww>
Date: Thu, 30 Apr 2026 09:00:47 +0800
Subject: [PATCH] 1

---
 .../payment-list/addHydropower.vue            | 522 ++++++++++++++++++
 .../pageSubPack/payment-list/paymentIndex.vue | 519 +++++++++++++++++
 2 files changed, 1041 insertions(+)
 create mode 100644 property-uniapp-project/pageSubPack/payment-list/addHydropower.vue
 create mode 100644 property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue

diff --git a/property-uniapp-project/pageSubPack/payment-list/addHydropower.vue b/property-uniapp-project/pageSubPack/payment-list/addHydropower.vue
new file mode 100644
index 0000000..6400321
--- /dev/null
+++ b/property-uniapp-project/pageSubPack/payment-list/addHydropower.vue
@@ -0,0 +1,522 @@
+<template>
+	<view class="contentStyle" style="">
+		<view class="status-bar"></view>
+		<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
+			:border="false">
+		</uni-nav-bar>
+		<!-- 表单区域 -->
+		<scroll-view class="page" scroll-y="true">
+			<view class="card-box">
+				<!-- 头部水费标题+水滴图标 -->
+				<view class="card-header">
+					<image class="iconStyle"
+						:src="paymentType=='水'?'http://47.104.199.163:9090/images/propertyImgs/water.png':'http://47.104.199.163:9090/images/propertyImgs/electric.png'">
+					</image>
+					<text class="card-title">{{paymentType+'费'}}</text>
+				</view>
+				<!-- 分割线 -->
+				<view class="line"></view>
+				<view class="input-item">
+					<view class="input-label">缴费单位</view>
+					<text class="company-name">XXXXXXXX燃气有限公司</text>
+				</view>
+				<!-- 分割线 -->
+				<view class="line"></view>
+				<!-- 设备号输入项 -->
+				<view class="input-item">
+					<view class="input-label">缴费设备号</view>
+					<view class="input-wrap">
+						<!-- 输入框 -->
+						<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder"
+							v-model="deviceNo" />
+						<!-- 右边扫码图标 text标签直接用 双端不乱码 -->
+						<image class="scanTheCodeIconStyle"
+							src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
+						</image>
+					</view>
+				</view>
+
+				<!-- 底部分割线 -->
+				<view class="line"></view>
+			</view>
+
+
+			<!-- 底部协议和提交按钮 -->
+			<view class="bottom-area">
+				<!-- <view class="agreement">
+					<checkbox-group @change="handleAgreeChange">
+						<checkbox :checked="isAgree" />
+					</checkbox-group>
+					<text class="agreement-text">我已阅并同意</text>
+					<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
+				</view> -->
+
+
+				<button class="submit-btn" @click="goPay">
+					提交
+				</button>
+			</view>
+
+
+
+
+
+
+
+
+		</scroll-view>
+
+
+	</view>
+
+
+
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed
+
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+
+	// 响应式数据
+	const paymentType = ref(uni.getStorageSync('addPaymentType'))
+	const deviceNo = ref('')
+	const isAgree = ref(false)
+	const scanResult = ref('')
+
+	// 生命周期
+	onMounted(() => {})
+
+	// 协议勾选
+	const handleAgreeChange = (e) => {
+		isAgree.value = e.detail.value.length > 0
+	}
+
+	// 扫码
+	const scanCode = async () => {
+		try {
+			uni.showLoading({
+				title: '扫码中...',
+				mask: true
+			})
+
+			const res = await uni.scanCode({
+				onlyFromCamera: false,
+				scanType: ['qrCode', 'barCode']
+			})
+
+			// 扫码成功，赋值
+			deviceNo.value = res.result
+			scanResult.value = res.result
+			uni.hideLoading()
+			uni.showToast({
+				title: '扫码成功',
+				icon: 'success'
+			})
+		} catch (err) {
+			uni.hideLoading()
+			console.log('扫码失败', err)
+			uni.showToast({
+				title: '扫码取消/失败',
+				icon: 'none'
+			})
+		}
+	}
+
+	// 提交缴费
+	const goPay = () => {
+		if (!deviceNo.value) {
+			uni.showToast({
+				title: '请输入设备号',
+				icon: 'none'
+			})
+			return
+		}
+		// if (!isAgree.value) {
+		// 	uni.showToast({
+		// 		title: '请同意协议',
+		// 		icon: 'none'
+		// 	})
+		// 	return
+		// }
+
+		uni.showModal({
+			title: '确认提交',
+			content: '确认要提交吗?',
+			success: (res) => {
+				if (res.confirm) {
+					uni.showLoading({
+						title: '提交中...',
+						mask: true
+					})
+
+					setTimeout(() => {
+						uni.showToast({
+							title: '提交成功',
+							icon: 'success'
+						})
+					}, 1000)
+
+					setTimeout(() => {
+						uni.hideLoading()
+						goNext()
+					}, 2500)
+				}
+			}
+		})
+	}
+	const handleProtocol = () => {
+
+	}
+	// 跳转成功页
+	const goNext = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/addPaymentSuccess'
+		})
+	}
+
+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
+	}
+</script>
+<style lang="scss">
+	page {
+		background: #f2f1f6;
+	}
+</style>
+
+<style scoped>
+	.contentStyle {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		/* 关键：占满屏幕高度 */
+		background-color: #f9f9f9;
+	}
+
+	.page {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0px 40rpx;
+		box-sizing: border-box;
+	}
+
+
+	/* 白色卡片容器 */
+	.card-box {
+		background: #ffffff;
+		border-radius: 24rpx;
+		padding: 32rpx;
+	}
+
+	/* 头部水费标题 */
+	.card-header {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-bottom: 32rpx;
+	}
+
+	.iconStyle {
+		width: 88rpx;
+		height: 88rpx;
+	}
+
+	.scanTheCodeIconStyle {
+		width: 48rpx;
+		height: 48rpx;
+		padding-left: 20rpx;
+	}
+
+	.water-icon {
+		font-size: 32rpx;
+	}
+
+	.card-title {
+		font-size: 32rpx;
+		color: #333;
+		font-weight: 500;
+	}
+
+	/* 分割线 */
+	.line {
+		width: 100%;
+		height: 1rpx;
+		background: #eeeeee;
+	}
+
+	/* 输入项整体 */
+	.input-item {
+		padding: 32rpx 0;
+	}
+
+	.input-label {
+		font-size: 28rpx;
+		color: #333;
+		margin-bottom: 24rpx;
+	}
+
+	/* 输入框+扫码图标横向布局 */
+	.input-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.input {
+		flex: 1;
+		font-size: 32rpx;
+		color: #333;
+	}
+
+	/* 占位符样式 */
+	.input-placeholder {
+		color: #cccccc;
+	}
+
+
+
+	/* 底部协议+按钮区域 */
+	.bottom-area {
+		margin-top: 60rpx;
+		padding: 0 10rpx;
+	}
+
+	/* 协议勾选 */
+	.agree-item {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-bottom: 40rpx;
+	}
+
+	.radio-box {
+		width: 36rpx;
+		height: 36rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.radio-icon {
+		font-size: 32rpx;
+		color: #999;
+	}
+
+	.agree-text {
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.agree-link {
+		font-size: 28rpx;
+		color: #007aff;
+	}
+
+	/* 立即缴费按钮 */
+	.pay-btn {
+		width: 100%;
+		height: 96rpx;
+		background: #007aff;
+		border-radius: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pay-text {
+		font-size: 36rpx;
+		color: #ffffff;
+	}
+
+	/* 白色卡片容器 */
+	.card-box {
+		background: #ffffff;
+		border-radius: 24rpx;
+		padding: 32rpx;
+	}
+
+	/* 头部水费标题 */
+	.card-header {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-bottom: 32rpx;
+	}
+
+	.water-icon {
+		font-size: 48rpx;
+	}
+
+	.card-title {
+		font-size: 36rpx;
+		color: #333;
+		font-weight: 500;
+	}
+
+	/* 分割线 */
+	.line {
+		width: 100%;
+		height: 1rpx;
+		background: #eeeeee;
+	}
+
+	/* 输入项整体 */
+	.input-item {
+		padding: 32rpx 0;
+	}
+
+	.input-label {
+		font-size: 32rpx;
+		color: #333;
+		margin-bottom: 24rpx;
+	}
+
+	/* 输入框+扫码图标横向布局 */
+	.input-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.input {
+		flex: 1;
+		font-size: 32rpx;
+		color: #333;
+	}
+
+	/* 占位符样式 */
+	.input-placeholder {
+		color: #cccccc;
+	}
+
+	/* 右边扫码图标 text标签直接用 双端不乱码 */
+	.scan-icon {
+		font-size: 40rpx;
+		color: #999;
+		padding-left: 20rpx;
+	}
+
+	/* 底部协议+按钮区域 */
+	.bottom-area {
+		margin-top: 60rpx;
+		padding: 0 10rpx;
+	}
+
+	/* 协议勾选 */
+	.agree-item {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-bottom: 40rpx;
+	}
+
+	.radio-box {
+		width: 36rpx;
+		height: 36rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.radio-icon {
+		font-size: 32rpx;
+		color: #999;
+	}
+
+	.agree-text {
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.agree-link {
+		font-size: 28rpx;
+		color: #007aff;
+	}
+
+	/* 立即缴费按钮 */
+	.pay-btn {
+		width: 100%;
+		height: 96rpx;
+		background: #007aff;
+		border-radius: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pay-text {
+		font-size: 36rpx;
+		color: #ffffff;
+	}
+
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+
+	/* 底部区域 */
+	.bottom-area {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 30rpx;
+		box-sizing: border-box;
+	}
+
+	.agreement {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+	}
+
+	.agreement checkbox {
+		transform: scale(0.8);
+		margin-right: 10rpx;
+	}
+
+	.agreement-text {
+		font-size: 24rpx;
+		color: #333;
+	}
+
+	.agreement-link {
+		font-size: 28rpx;
+		color: #4080ff;
+		margin-left: 10rpx;
+	}
+
+	.submit-btn {
+		width: 100%;
+		height: 90rpx;
+		line-height: 90rpx;
+		background-color: #4080ff;
+		color: #fff;
+		border-radius: 10rpx;
+		font-size: 36rpx;
+		font-weight: 500;
+		border: none;
+		outline: none;
+	}
+
+	.submit-btn[disabled] {
+		background-color: #a0c4ff;
+		color: #fff;
+		opacity: 0.7;
+	}
+</style>
\ No newline at end of file
diff --git a/property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue b/property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue
new file mode 100644
index 0000000..0cceb90
--- /dev/null
+++ b/property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue
@@ -0,0 +1,519 @@
+<template>
+	<view class="contentStyle" style="">
+		<view class="status-bar"></view>
+
+		<uni-nav-bar title="生活缴费" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
+		</uni-nav-bar>
+		<view class="topbox">
+			<image class="titleImg" src="http://47.104.199.163:9090/images/propertyImgs/payTitle.png"></image>
+			<image class="payImg" src="http://47.104.199.163:9090/images/propertyImgs/payImg.png"></image>
+		</view>
+		<scroll-view class="page" scroll-y="true">
+			<view class="container">
+				<!-- 已缴费/欠费列表 -->
+				<view class="bill-list" v-if="paymentList.length != 0">
+					<!-- <view v-if="paymentList.length === 0" class="empty-state">
+						<uni-icons type="info" size="60" color="#ccc"></uni-icons>
+						<text class="empty-text">
+							{{ '暂无数据'}}
+						</text>
+					</view> -->
+					<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
+						<image class="billIcon" :src="item.icon"></image>
+						<view class="bill-info">
+							<view class="bill-title">{{item.name}}
+								<view class="bill-status debt" v-if="item.status=='已欠费'">已欠费</view>
+							</view>
+							<view class="bill-desc">{{item.address}}</view>
+						</view>
+
+						<view class="arrow"></view>
+					</view>
+				</view>
+
+				<!-- 新增缴费区域 -->
+				<view class="add-section">
+					<view class="section-header">
+						<text class="section-title">新增缴费</text>
+						<text class="record-link" @click="goToRecord">缴费记录</text>
+					</view>
+
+					<view class="grid-list">
+<<<<<<< HEAD
+=======
+
+>>>>>>> de6e6ebfc1fe0b87a29728bd9d5d2cddae9f726f
+						<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
+							<view class="icon-box" :class="item.iconClass">
+								<image class="iconStyle" :src="item.icon"></image>
+							</view>
+							<text class="item-name">{{ item.name +'费'}}</text>
+						</view>
+					</view>
+				</view>
+				<view style="width: 100%;height: 30rpx;"></view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed
+	
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	// 响应式数据
+	const statusBarHeight = ref(20)
+
+	const paymentList = ref([{
+			id: 1,
+			name: '物业费',
+			status: '已欠费',
+			address: '桂花园（别墅）2号楼2层',
+			icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
+		},
+		{
+			id: 2,
+			name: '暖气费',
+			status: '',
+			address: '山东省日照市东港区桂花园（别墅）2号楼2层',
+			icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
+		},
+		{
+			id: 3,
+			name: '电费',
+			status: '已欠费',
+			address: '山东省日照市东港区桂花园（别墅）2号楼2层',
+			icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
+		}
+	])
+
+	const addList = ref([{
+			name: "燃气",
+			type: "gas",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
+			iconClass: "gas"
+		},
+		{
+			name: "水",
+			type: "water",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
+			iconClass: "water"
+		},
+		{
+			name: "物业",
+			type: "property",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
+			iconClass: "property"
+		},
+		{
+			name: "电",
+			type: "electric",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
+			iconClass: "electric"
+		},
+<<<<<<< HEAD
+		{
+			name: "暖气",
+			type: "heating",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
+			iconClass: "heating"
+=======
+		mounted() {},
+		data() {
+			return {
+				/* 设定状态栏默认高度 */
+				statusBarHeight: 20,
+				paymentList: [{
+						id: 1,
+						name: '物业费',
+						status: '已欠费',
+						address: '桂花园（别墅）2号楼2层',
+						icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
+
+					},
+					{
+						id: 2,
+						// name: '暖气费',
+						name: '物业费',
+
+						status: '',
+						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
+						icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
+
+					},
+					{
+						id: 3,
+						// name: '电费',
+						name: '物业费',
+						status: '已欠费',
+						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
+						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
+
+					}
+				],
+				// 新增缴费列表数据
+				addList: [{
+						// name: "燃气",
+						name: '物业',
+						type: "gas",
+						icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
+						iconClass: "gas"
+					},
+					{
+						// name: "水",
+						name: '物业',
+						type: "water",
+						icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
+						iconClass: "water"
+					},
+					{
+						// name: "物业",
+						name: '物业',
+						type: "property",
+						icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
+						iconClass: "property"
+					},
+					{
+						// name: "电",
+						name: '物业',
+						type: "electric",
+						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
+						iconClass: "electric"
+					},
+					{
+						// name: "暖气",
+						name: '物业',
+						type: "heating",
+						icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
+						iconClass: "heating"
+					},
+					{
+						// name: "车位",
+						name: '物业',
+						type: "parking",
+						icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
+						iconClass: "parking"
+					}
+				]
+
+			}
+>>>>>>> de6e6ebfc1fe0b87a29728bd9d5d2cddae9f726f
+		},
+		{
+			name: "车位",
+			type: "parking",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
+			iconClass: "parking"
+		}
+	])
+
+	// 生命周期
+	onReady(() => {})
+	onShow(() => {})
+	onLoad(() => {})
+
+<<<<<<< HEAD
+	// 方法
+	const goToBill = (item) => {
+		uni.setStorageSync('arrearsPayment', item.name)
+		if (item.status == '已欠费') {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/arrearsPayment'
+			})
+		} else {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/noArrearsPayment'
+			})
+		}
+	}
+=======
+		methods: {
+			// 跳转到缴费
+			goToBill(item) {
+				uni.setStorageSync('arrearsPayment', item.name)
+				if (item.status == '已欠费') {
+					uni.redirectTo({
+						url: '/pageSubPack/payment-list/arrearsPayment',
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				} else {
+					uni.redirectTo({
+						url: '/pageSubPack/payment-list/noArrearsPayment',
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				}
+			},
+			// 跳转到缴费记录
+			goToRecord() {
+				uni.redirectTo({
+					url: '/pageSubPack/payment-list/paymentRecord',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+			// 跳转到新增缴费
+			goToAdd(type) {
+				// else if (type.name == '水' || type.name == '电')
+				if (type.name == '燃气' || type.name == '暖气') {
+					uni.redirectTo({
+						url: '/pageSubPack/payment-list/selectPaymentEntity',
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				} else if (type.name == '物业' || type.name == '物业') {
+					uni.redirectTo({
+						url: '/pageSubPack/payment-list/addHydropower',
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				}
+				uni.setStorageSync('addPaymentType', type.name)
+>>>>>>> de6e6ebfc1fe0b87a29728bd9d5d2cddae9f726f
+
+	const goToRecord = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentRecord'
+		})
+	}
+
+	const goToAdd = (type) => {
+		if (type.name == '燃气' || type.name == '暖气') {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/selectPaymentEntity'
+			})
+		} else if (type.name == '水' || type.name == '电') {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/addHydropower'
+			})
+		}
+		uni.setStorageSync('addPaymentType', type.name)
+	}
+
+	const goBack = () => {
+		console.log(uni.getStorageSync('sourcePage'))
+		if (uni.getStorageSync('sourcePage') == 'serviceIndex') {
+			uni.switchTab({
+				url: '/pages/serviceIndex/serviceIndex'
+			})
+		} else if (uni.getStorageSync('sourcePage') == 'index') {
+			uni.switchTab({
+				url: '/pages/index/index'
+			})
+		}
+		uni.removeStorageSync('sourcePage')
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: linear-gradient(180deg, #dfedfd, #F6FAFF);
+	}
+</style>
+
+<style scoped>
+	.contentStyle {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background: linear-gradient(180deg, #dfedfd, #F6FAFF);
+	}
+
+	.page {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0px 40rpx;
+		box-sizing: border-box;
+	}
+
+	.topbox {
+		height: 150rpx;
+		width: 100%;
+		position: relative;
+	}
+
+	.titleImg {
+		width: 262rpx;
+		height: 74rpx;
+		position: absolute;
+		left: 40rpx;
+		bottom: 20rpx;
+	}
+
+	.payImg {
+		width: 349.97rpx;
+		height: 313.57rpx;
+		position: absolute;
+		right: -80rpx;
+		bottom: -140rpx;
+	}
+
+	.container {}
+
+	.bill-list {
+		margin-bottom: 40rpx;
+		background-color: #fff;
+		padding: 30rpx;
+		border-radius: 10rpx;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 100rpx 0;
+		color: #ccc;
+	}
+
+	.empty-text {
+		font-size: 32rpx;
+		color: #999;
+		margin-top: 20rpx;
+		margin-bottom: 10rpx;
+	}
+
+	.bill-item {
+		display: flex;
+		align-items: center;
+		background-color: #F6F9FE;
+		border-radius: 12rpx;
+		padding: 20rpx 20rpx 20rpx 0px;
+		margin-bottom: 20rpx;
+	}
+
+	.bill-item:last-child {
+		margin-bottom: 0rpx;
+	}
+
+	.bill-info {
+		width: calc(90% - 100rpx);
+		flex: 1;
+	}
+
+	.billIcon {
+		width: 64rpx;
+		height: 64rpx;
+		margin: 20rpx;
+	}
+
+	.bill-title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #333;
+		margin-bottom: 10rpx;
+		display: flex;
+	}
+
+	.bill-desc {
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #999;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.bill-status {
+		padding: 2rpx 16rpx;
+		border-radius: 30rpx;
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #fff;
+		background-color: #E34D59;
+		margin-left: 10rpx;
+	}
+
+	.arrow {
+		width: 12rpx;
+		height: 12rpx;
+		border-right: 4rpx solid #ccc;
+		border-bottom: 4rpx solid #ccc;
+		transform: rotate(-45deg);
+	}
+
+	.add-section {
+		background-color: #fff;
+		padding: 30rpx;
+		border-radius: 10rpx;
+	}
+
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+
+	.section-title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #333;
+	}
+
+	.record-link {
+		font-size: 28rpx;
+		color: #1677ff;
+	}
+
+	.grid-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		gap: 26rpx;
+	}
+
+	.grid-item {
+		width: calc(25% - 60rpx);
+		background-color: #F6F9FE;
+		border-radius: 12rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	.icon-box {
+		width: 88rpx;
+		height: 88rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 40rpx;
+	}
+
+	.iconStyle {
+		width: 100%;
+		height: 100%;
+	}
+
+	.item-name {
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #333;
+	}
+
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+</style>
\ No newline at end of file