diff --git a/api/shengchan.js b/api/shengchan.js
index ee98ee2..f401953 100644
--- a/api/shengchan.js
+++ b/api/shengchan.js
@@ -2,7 +2,7 @@ import {
 	https
 } from '@/utils/http.js';
 
-export function queryJinriShengchansj(params) { // 获取今日生产数据
+export function queryJinriShengchansj(params) { // 获取今日天然气生产数据
 	return https({
 		url: '/scdt.CxcScdtChart/cxcScdtChart/list',
 		method: 'get',
@@ -10,10 +10,18 @@ export function queryJinriShengchansj(params) { // 获取今日生产数据
 	})
 }
 
-export function queryYearShengchansj(params) { // 获取今年以来的生产数据
+export function queryYearShengchansj(params) { // 获取今年以来天然气的生产数据
 	return https({
 		url: '/scdt.CxcScdtChart/cxcScdtChart/getYearStatis',
 		method: 'get',
 		data: params
 	})
+}
+
+export function queryJinriYuanyouShengchansj(params) { // 获取今日原油 污油产量
+	return https({
+		url: '/scdt.cxcscdtwyrb/cxcScdtWyRb/list',
+		method: 'get',
+		data: params
+	})
 }
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 9eb8931..a9290f3 100644
--- a/pages.json
+++ b/pages.json
@@ -168,7 +168,7 @@
 			}
 		},
 		{
-			"path": "pages/product/index",
+			"path": "pages/views/shengchan/index",
 			"style": {
 				"navigationStyle": "custom"
 				// "navigationBarTitleText": "生产数据",
diff --git a/pages/tab/product.vue b/pages/tab/product.vue
index 9e5ffc4..9abd31e 100644
--- a/pages/tab/product.vue
+++ b/pages/tab/product.vue
@@ -6,27 +6,27 @@
 </template>
 
 <script setup>
-const res = wx.getSystemInfoSync();
-const statusHeight = res.statusBarHeight; //状态栏高度
-const cusnavbarheight = statusHeight + 44 + 'px';
+	const res = wx.getSystemInfoSync();
+	const statusHeight = res.statusBarHeight; //状态栏高度
+	const cusnavbarheight = statusHeight + 44 + 'px';
 
-import productData from '@/pages/product/index.vue';
+	import productData from '@/pages/views/shengchan/index.vue';
 </script>
 
 <style lang="scss" scoped>
-.nav {
-	width: calc(100% - 60rpx);
-	padding: 0 30rpx;
-	height: v-bind(cusnavbarheight);
+	.nav {
+		width: calc(100% - 60rpx);
+		padding: 0 30rpx;
+		height: v-bind(cusnavbarheight);
 
-	font-size: 24rpx;
-	color: #ffffff;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 99;
-	background-image: url('../../static/my/navbg.png');
-	background-repeat: no-repeat;
-	background-size: 750rpx 458rpx;
-}
-</style>
+		font-size: 24rpx;
+		color: #ffffff;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 99;
+		background-image: url('../../static/my/navbg.png');
+		background-repeat: no-repeat;
+		background-size: 750rpx 458rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/views/shengchan/index.vue b/pages/views/shengchan/index.vue
new file mode 100644
index 0000000..16a5d57
--- /dev/null
+++ b/pages/views/shengchan/index.vue
@@ -0,0 +1,52 @@
+<template>
+	<view>
+		<!-- <view class="nav">生产经营数据</view> -->
+		<view class="placeholder">生产经营数据</view>
+		<trq-data></trq-data>
+		<yy-data></yy-data>
+	</view>
+</template>
+
+<script setup>
+	import {
+		formatDate,
+		getDateAfterDays
+	} from '@/utils/dateTime.js';
+	const res = wx.getSystemInfoSync();
+	const statusHeight = res.statusBarHeight; //状态栏高度
+	const cusnavbarheight = statusHeight + 44 + 'px';
+
+	import trqData from './ribaoshuju/trqRbsj.vue';
+	import yyData from './ribaoshuju/yyRbsj.vue';
+
+	const strDate = (() => {
+		const now = new Date();
+		if (now.getHours() < 11) {
+			return formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
+		} else {
+			return formatDate(now).toString();
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.nav {
+		width: calc(100% - 60rpx);
+		padding: 0 30rpx;
+		height: v-bind(cusnavbarheight);
+
+		font-size: 24rpx;
+		color: #ffffff;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 99;
+		background-image: url('../../static/my/navbg.png');
+		background-repeat: no-repeat;
+		background-size: 750rpx 458rpx;
+	}
+
+	.placeholder {
+		height: v-bind(cusnavbarheight);
+	}
+</style>
\ No newline at end of file
diff --git a/pages/views/shengchan/ribaoshuju/trqRbsj.vue b/pages/views/shengchan/ribaoshuju/trqRbsj.vue
new file mode 100644
index 0000000..345c1e9
--- /dev/null
+++ b/pages/views/shengchan/ribaoshuju/trqRbsj.vue
@@ -0,0 +1,448 @@
+<template>
+	<view :class="{ gray: store.isgray == 1 }">
+		<view style="margin-left: 20rpx;"> <uni-title :title="strDate + '：生产数据'" type="h1" color="red" />
+		</view>
+		<view class="container">
+			<view v-for="(item, index) in shishiArr" :key="index" class="card-item" @click="handleCardClick(item.gas)">
+				<view class="card">
+					<text class="title">{{ item.gas }}</text>
+					<view class="content">
+						<text class="label">日气量</text>
+						<text class="value">{{ item.dailyVolume || '-' }}</text>
+					</view>
+					<view class="content">
+						<text class="label">年累计</text>
+						<text class="value">{{ item.yearVolume || '-' }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 数据弹窗 -->
+		<uni-popup ref="popup" type="bottom" background-color="#fff">
+			<view class="popup-content">
+				<view class="popup-header">
+					<text class="title">{{ selectedGas }}数据详情 单位(万立方米)</text>
+					<uni-icons type="closeempty" size="24" color="#666" @click="closePopup"></uni-icons>
+				</view>
+
+				<scroll-view scroll-X="true" scroll-Y="true" class="table-container">
+					<view class="table">
+						<!-- 表头 -->
+						<view class="tr header">
+							<view class="th1">序号</view>
+							<view class="th">名称</view>
+							<view class="th">日气量</view>
+							<view class="th">总气量 </view>
+							<view class="th">年累计 </view>
+						</view>
+
+						<!-- 表格内容 -->
+						<view class="tr" v-for="(item, index) in filteredData" :key="index"
+							:class="{ even: index % 2 === 0 }">
+							<view class="td1">{{ index }}</view>
+							<view class="td">{{ item.unit }}</view>
+							<view class="td" :class="{ negative: item.rq < 0 }">
+								{{ formatNumber(item.rq) }}
+							</view>
+
+							<view class="td">{{ formatNumber(item.totalGas) }}</view>
+							<view class="td" :class="{ negative: item.yearVolume < 0 }">
+								{{ formatNumber(item.yearVolume) }}
+							</view>
+						</view>
+
+						<!-- 空数据提示 -->
+						<view v-if="!filteredData.length" class="empty">
+							暂无相关数据
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</uni-popup>
+
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed,
+		nextTick,
+		watchEffect
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		queryJinriShengchansj,
+		queryYearShengchansj
+	} from '@/api/shengchan.js';
+	import {
+		formatDate,
+		getDateAfterDays
+	} from '@/utils/dateTime.js';
+	import {
+		beforeJump
+	} from '@/utils/index.js';
+	import {
+		useStore
+	} from '@/store';
+
+	const store = useStore();
+
+	const shishiArr = ref([{
+			gas: '气井气',
+			dailyVolume: '',
+			yearVolume: ''
+		},
+		{
+			gas: '伴生气',
+			dailyVolume: '',
+			yearVolume: ''
+		},
+		{
+			gas: '外部气',
+			dailyVolume: '',
+			yearVolume: ''
+		},
+		{
+			gas: '站输差',
+			dailyVolume: '',
+			yearVolume: ''
+		},
+		{
+			gas: '线输差',
+			dailyVolume: '',
+			yearVolume: ''
+		},
+		{
+			gas: '综合输差',
+			dailyVolume: '',
+			yearVolume: ''
+		}
+	]);
+
+	const dataJinri = ref([]);
+	const dataJinriSum = ref([]);
+	const dataJinriSumUnit = ref([]);
+	const selectedGas = ref('');
+	const filteredData = ref([]);
+	const popup = ref(null);
+	// 点击卡片处理
+	const handleCardClick = (gas) => {
+		selectedGas.value = gas;
+		filteredData.value = dataJinriSumUnit.value.filter(item => item.gas === gas);
+		popup.value.open();
+	};
+
+	// 关闭弹窗
+	const closePopup = () => {
+		popup.value.close();
+	};
+	onMounted(() => {
+		getJinriShengchansj();
+		getYearShengchansj();
+	});
+
+	const strDate = ref('');
+	// 数字格式化
+	const formatNumber = (num) => {
+		if (typeof num !== 'number') return '-';
+		return num.toFixed(4).replace(/\.?0+$/, '');
+	};
+
+	// 计算属性自动分组
+	const groupedData = computed(() => {
+		const groups = [];
+		for (let i = 0; i < shishiArr.value.length; i += 3) {
+			groups.push(shishiArr.value.slice(i, i + 3));
+		}
+		return groups;
+	});
+
+	// 自动计算综合输差
+	watchEffect(() => {
+		const station = shishiArr.value[3] // 站输差
+		const line = shishiArr.value[4] // 线输差
+		const composite = shishiArr.value[5] // 综合输差
+
+		// 日输气量计算
+		const dailyStation = parseFloat(station.dailyVolume) || 0
+		const dailyLine = parseFloat(line.dailyVolume) || 0
+		composite.dailyVolume = (dailyStation + dailyLine).toFixed(4)
+
+		// 年输气量计算
+		const yearStation = parseFloat(station.yearVolume) || 0
+		const yearLine = parseFloat(line.yearVolume) || 0
+		composite.yearVolume = (yearStation + yearLine).toFixed(4)
+	})
+
+
+	const getJinriShengchansj = () => {
+		const now = new Date();
+		if (now.getHours() < 11) {
+			strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
+		} else {
+			strDate.value = formatDate(now).toString();
+		}
+		let queryParms = {};
+		dataJinri.value = [];
+		dataJinriSum.value = [];
+		dataJinriSumUnit.value = [];
+		queryParms.rqDate = strDate.value;
+		queryParms.pageSize = 100;
+		// console.log(queryParms);
+		queryJinriShengchansj(queryParms).then((res) => {
+			if (res.success) {
+				// console.log(res);
+				dataJinri.value = res.result.records;
+				dataJinriSumUnit.value = sumByUnit(dataJinri.value); //包含gas  unit  rq  cq  totalGas
+				// console.log(dataJinriSumUnit.value);
+				// 使用 nextTick 等待 DOM 更新
+				nextTick();
+				getYearShengchansj(); //再获取今年以来的数据
+			}
+		});
+	};
+	const getYearShengchansj = () => {
+		const now = new Date();
+		let year = formatDate(now).split('-')[0];
+		let queryParms = {};
+		queryParms.yearStart = year;
+		queryParms.yearEnd = year;
+
+		// // console.log(2, queryParms.value);
+		queryYearShengchansj(queryParms).then((res) => {
+			if (res.success) {
+				try {
+					// // console.log(res.result);
+					let yearData = res.result[year];
+					// console.log(dataJinriSumUnit.value.length, dataJinriSumUnit.value, yearData.length,
+					// yearData);
+					dataJinriSumUnit.value.forEach((item) => {
+						yearData.forEach((itemYear) => {
+							// // console.log(item, itemYear);
+							if (item.unit === itemYear.unit) {
+								item.yearVolume = itemYear.yearSum || 0;
+							}
+						});
+					});
+					dataJinriSum.value = sumByGas(dataJinriSumUnit.value);
+					// console.log(dataJinriSum.value);
+					shishiArr.value.forEach((item) => {
+						dataJinriSum.value.forEach((itemjinri) => {
+							if (item.gas === itemjinri.gas) {
+								item.dailyVolume = itemjinri.rq.toFixed(4);
+								item.yearVolume = itemjinri.yearVolume.toFixed(4);
+							}
+						});
+					});
+				} catch (error) {
+					// console.log(error);
+				}
+			}
+		});
+	};
+
+	function sumByGas(records) {
+		// console.log(records);
+		const summaryMap = {};
+		try {
+			records.forEach((record) => {
+				const gas = record.gas;
+				if (!summaryMap[gas]) {
+					// 初始化该 gas 类型的汇总对象
+					summaryMap[gas] = {
+						gas: gas,
+						rq: 0,
+						sq: 0,
+						totalGas: 0,
+						yearVolume: 0
+					};
+				}
+				// 无论是否是第一次遇到该 gas 类型，都进行累加操作
+				summaryMap[gas].rq += record.rq || 0;
+				summaryMap[gas].sq += record.sq || 0;
+				summaryMap[gas].totalGas += record.totalGas || 0;
+				summaryMap[gas].yearVolume += record.yearVolume || 0;
+			});
+			return Object.values(summaryMap);
+		} catch (error) {
+			//TODO handle the exception
+			// console.log(error);
+		}
+	}
+
+	function sumByUnit(records) {
+		// console.log(records);
+		const summaryMap = {};
+		try {
+			records.forEach((record) => {
+				const unit = record.unit;
+				if (!unit.includes('区')) {
+					if (!summaryMap[unit]) {
+						// 初始化该 gas 类型的汇总对象
+						summaryMap[unit] = {
+							unit: unit,
+							gas: record.gas,
+							rq: 0,
+							sq: 0,
+							totalGas: 0,
+							yearVolume: 0
+						};
+					}
+					// 无论是否是第一次遇到该 unit 类型，都进行累加操作
+					summaryMap[unit].rq += record.rq || 0;
+					summaryMap[unit].sq += record.sq || 0;
+					summaryMap[unit].totalGas += record.totalGas || 0;
+					summaryMap[unit].yearVolume += record.yearVolume || 0;
+				}
+			});
+
+			return Object.values(summaryMap);
+		} catch (error) {
+			//TODO handle the exception
+			// console.log(error);
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 20rpx;
+		gap: 20rpx;
+	}
+
+	.popup-content {
+		padding: 30rpx;
+		max-height: 70vh;
+	}
+
+	.popup-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+		padding-bottom: 20rpx;
+		border-bottom: 2rpx solid #eee;
+
+		.title {
+			font-size: 32rpx;
+			font-weight: 600;
+			color: #333;
+		}
+	}
+
+	.table-container {
+		width: 100%;
+		height: 30vh;
+		overflow: hidden;
+	}
+
+	.table {
+		min-width: 100%;
+		border: 2rpx solid #e8e8e8;
+
+		.tr {
+			display: flex;
+			border-bottom: 2rpx solid #e8e8e8;
+
+			&.header {
+				background-color: #fafafa;
+				font-weight: 600;
+			}
+
+			&.even {
+				background-color: #f8f8f8;
+			}
+		}
+
+		.th,
+		.td {
+			flex: 1;
+			min-width: 80rpx;
+			padding: 10rpx;
+			font-size: 20rpx;
+			color: #333;
+			text-align: center;
+			white-space: nowrap;
+		}
+
+		.th1,
+		.td1 {
+			flex: 1;
+			max-width: 40rpx;
+			padding: 10rpx;
+			font-size: 20rpx;
+			color: #333;
+			text-align: center;
+			white-space: nowrap;
+		}
+
+		.th {
+			background-color: #f0f0f0;
+		}
+
+		.td.negative {
+			color: #ff4444;
+			font-weight: 500;
+		}
+	}
+
+	.empty {
+		padding: 40rpx;
+		text-align: center;
+		color: #888;
+		font-size: 16rpx;
+	}
+
+	.card-item {
+		flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩   selectedGas  formatNumber
+		min-width: 240rpx;
+		max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
+
+		@media (min-width: 768px) {
+			max-width: calc(33.33% - 14rpx); // 大屏显示3列
+		}
+	}
+
+	.card {
+		background: #ffffff;
+		border-radius: 16rpx;
+		padding: 10rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+		.title {
+			display: block;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 16rpx;
+		}
+
+		.content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 10rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.label {
+				font-size: 24rpx;
+				color: #666;
+			}
+
+			.value {
+				font-size: 28rpx;
+				color: #0000ff;
+				font-weight: 500;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/views/shengchan/ribaoshuju/yyRbsj.vue b/pages/views/shengchan/ribaoshuju/yyRbsj.vue
new file mode 100644
index 0000000..eea775c
--- /dev/null
+++ b/pages/views/shengchan/ribaoshuju/yyRbsj.vue
@@ -0,0 +1,326 @@
+<template>
+	<view :class="{ gray: store.isgray == 1 }">
+		<!-- <view style="margin-left: 20rpx;"> <uni-title :title="strDate + '：生产数据'" type="h1" color="red" /> -->
+		<!-- </view> -->
+		<view class="container">
+			<view v-for="(item, index) in shishiArr" :key="index" class="card-item" @click="handleCardClick(item.gas)">
+				<view class="card">
+					<text class="title">{{ item.gas }}</text>
+					<view class="content">
+						<text class="label">日油量</text>
+						<text class="value">{{ item.rcwy || '-' }}</text>
+					</view>
+					<view class="content">
+						<text class="label">月累计</text>
+						<text class="value">{{ item.yl || '-' }}</text>
+					</view>
+					<view class="content">
+						<text class="label">年累计</text>
+						<text class="value">{{ item.nl || '-' }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 数据弹窗 -->
+		<uni-popup ref="popup" type="bottom" background-color="#fff">
+			<view class="popup-content">
+				<view class="popup-header">
+					<text class="title">原油数据详情 单位(吨)</text>
+					<uni-icons type="closeempty" size="24" color="#666" @click="closePopup"></uni-icons>
+				</view>
+
+				<scroll-view scroll-X="true" scroll-Y="true" class="table-container">
+					<view class="table">
+						<!-- 表头 -->
+						<view class="tr header">
+							<view class="th">序号</view>
+							<view class="th">名称</view>
+							<view class="th">日油量</view>
+							<view class="th">月累计 </view>
+							<view class="th">年累计 </view>
+						</view>
+
+						<!-- 表格内容 -->
+						<view class="tr" v-for="(item, index) in dataJinri" :key="index"
+							:class="{ even: index % 2 === 0 }">
+							<view class="td">{{ index }}</view>
+							<view class="td">{{ item.dw }}</view>
+							<view class="td">
+								{{ formatNumber(item.rcwy) }}
+							</view>
+							<view class="td">{{ formatNumber(item.yl) }}</view>
+							<view class="td">
+								{{ formatNumber(item.nl) }}
+							</view>
+						</view>
+
+						<!-- 空数据提示 -->
+						<view v-if="!dataJinri.length" class="empty">
+							暂无相关数据
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</uni-popup>
+
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed,
+		nextTick,
+		watchEffect
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		queryJinriYuanyouShengchansj
+	} from '@/api/shengchan.js';
+	import {
+		formatDate,
+		getDateAfterDays
+	} from '@/utils/dateTime.js';
+	import {
+		beforeJump
+	} from '@/utils/index.js';
+	import {
+		useStore
+	} from '@/store';
+
+	const store = useStore();
+	import dataCom from '@/bpm/dataCom.vue';
+
+	const shishiArr = ref([{
+			gas: '原油产量',
+			rcwy: '',
+			yl: '',
+			nl: ''
+		},
+
+	]);
+
+	const dataJinri = ref([]);
+	const dataJinriSum = ref([]);
+	const popup = ref(null);
+	// 点击卡片处理
+	const handleCardClick = () => {
+		popup.value.open();
+	};
+
+	// 关闭弹窗
+	const closePopup = () => {
+		popup.value.close();
+	};
+	onMounted(() => {
+		getJinriYuanyouShengchansj();
+		// getYearShengchansj();
+	});
+
+	const strDate = ref('');
+	// 数字格式化
+	const formatNumber = (num) => {
+		if (typeof num !== 'number') return '-';
+		return num.toFixed(4).replace(/\.?0+$/, '');
+	};
+
+
+
+
+
+	const getJinriYuanyouShengchansj = () => {
+		const now = new Date();
+		if (now.getHours() < 11) {
+			strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
+		} else {
+			strDate.value = formatDate(now).toString();
+		}
+		let queryParms = {};
+		dataJinri.value = [];
+		dataJinriSum.value = [];
+		queryParms.scrq = strDate.value;
+		queryParms.pageSize = 100;
+		console.log(queryParms);
+		queryJinriYuanyouShengchansj(queryParms).then((res) => {
+			if (res.success) {
+				console.log(res);
+				dataJinri.value = res.result.records;
+				dataJinriSum.value = sumByOil(dataJinri.value); //包含gas  unit  rq  cq  totalGas
+
+
+				console.log(dataJinriSum.value);
+
+				nextTick();
+				shishiArr.value.forEach((item) => {
+					dataJinriSum.value.forEach((itemjinri) => {
+
+						item.rcwy = itemjinri.rcwy.toFixed(4);
+						item.nl = itemjinri.nl.toFixed(4);
+						item.yl = itemjinri.yl.toFixed(4);
+
+					});
+				});
+				// getYearShengchansj(); //再获取今年以来的数据
+			}
+		});
+	};
+
+
+	function sumByOil(records) {
+		console.log(records);
+		const summaryMap = {};
+		try {
+			records.forEach((record) => {
+				const gas = record.gas;
+				if (!summaryMap[gas]) {
+					// 初始化该 gas 类型的汇总对象
+					summaryMap[gas] = {
+						rcwy: 0,
+						yl: 0,
+						nl: 0
+					};
+				}
+				// 无论是否是第一次遇到该 gas 类型，都进行累加操作
+				summaryMap[gas].rcwy += record.rcwy || 0;
+				summaryMap[gas].yl += record.yl || 0;
+				summaryMap[gas].nl += record.nl || 0
+			});
+			return Object.values(summaryMap);
+		} catch (error) {
+			//TODO handle the exception
+			console.log(error);
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 20rpx;
+		gap: 20rpx;
+	}
+
+	.popup-content {
+		padding: 30rpx;
+		max-height: 70vh;
+	}
+
+	.popup-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+		padding-bottom: 20rpx;
+		border-bottom: 2rpx solid #eee;
+
+		.title {
+			font-size: 32rpx;
+			font-weight: 600;
+			color: #333;
+		}
+	}
+
+	.table-container {
+		width: 100%;
+		height: 30vh;
+		overflow: hidden;
+	}
+
+	.table {
+		min-width: 100%;
+		border: 2rpx solid #e8e8e8;
+
+		.tr {
+			display: flex;
+			border-bottom: 2rpx solid #e8e8e8;
+
+			&.header {
+				background-color: #fafafa;
+				font-weight: 600;
+			}
+
+			&.even {
+				background-color: #f8f8f8;
+			}
+		}
+
+		.th,
+		.td {
+			flex: 1;
+			min-width: 80rpx;
+			padding: 10rpx;
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #333;
+			text-align: center;
+			white-space: nowrap;
+		}
+
+		.th {
+			background-color: #f0f0f0;
+		}
+
+		.td.negative {
+			color: #ff4444;
+			font-weight: 500;
+		}
+	}
+
+	.empty {
+		padding: 40rpx;
+		text-align: center;
+		color: #888;
+		font-size: 16rpx;
+	}
+
+	.card-item {
+		flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩   selectedGas  formatNumber
+		min-width: 200rpx;
+		max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
+
+		@media (min-width: 768px) {
+			max-width: calc(33.33% - 14rpx); // 大屏显示3列
+		}
+	}
+
+	.card {
+		background: #ffffff;
+		border-radius: 16rpx;
+		padding: 10rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+		.title {
+			display: block;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 16rpx;
+		}
+
+		.content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 10rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.label {
+				font-size: 24rpx;
+				color: #666;
+			}
+
+			.value {
+				font-size: 28rpx;
+				color: #0000ff;
+				font-weight: 500;
+			}
+		}
+	}
+</style>
\ No newline at end of file