refactor 新增数据卡片组件，新增查询列表组件

.cursor/rules/g2.mdc

+---
+alwaysApply: true
+---
+# Overview
+
+Insert overview text here. The agent will only see this should they choose to apply the rule.
+```markdown
+---
+alwaysApply: true
+---
+# 前端开发（Cursor 专用执行要点）
+
+## 1. HTML / 模板
+- 属性命名：统一用小写-中线分割。动态 class 也用这种格式，使用单引号：`:class="{ 'xxx-xxx': isXxx }"`
+- v-for 必须有唯一 key，`v-for + :key`（如`:key="item.id"`），禁止仅凭索引。示例：`<li v-for="item in list" :key="item.id"></li>`
+- 禁止 v-if 与 v-for 同时在同一节点；如需筛选请用计算属性/方法过滤后再 v-for
+- 无内容组件或标签必须自闭合，如 `<MyComp />` `<img />` `<input />`
+- HTML 属性用双引号，动态属性外已双引号则用单引号
+- 模板表达式保持极简，只写取值或很简单的显示；任何有数据处理（如数组/字符串操作、三元、函数执行等）必须抽到方法或计算属性完成
+
+## 2. CSS
+- 样式模块优先通用组件，确需定制严格按设计来写
+- 全部样式变量统一来源于全局（如 `:root { --color-main-primary: #055fC2; ... }`） 
+- `<style scoped>` 默认加 scoped
+- 修改子组件样式用 `:deep()`（Vue3 推荐写法），如：`.xxx :deep(.el-xxx) { ... }`
+- 严禁页面大量内联 style，样式尽量写到 class 或 :style 绑定表达式
+
+## 3. 文件系统
+- 文件夹采用小驼峰，无数字/无关字符
+- 每个业务模块 API 独立放模块对应文件夹
+- 静态资源分全局 assets 与模块 assets：全局图片 assets/images，icon 建议 SVG，模块区分子文件夹
+
+## 4. 组件
+- 组件名大驼峰（PascalCase）。组件类型目录小驼峰，具体组件目录（如 AreaTag）大驼峰
+- 单文件组件名 index.vue，多组件文件按具体功能如 LeftBtn.vue
+- 优先用通用组件，业务组件只能放业务模块，不得放全局
+
+## 5. JS/TS
+- 命名统一规范
+  - 变量：小驼峰 userName、isVisible
+  - 常量：大写+下划线，如 MAX_COUNT
+  - 枚举：枚举名大驼峰，枚举值全大写+下划线 enum Status { SUCCESS = 'SUCCESS' }
+  - 普通函数：小驼峰+动词前缀 getUser/formatTime
+  - 事件函数：小驼峰+handle/on handleSubmit/onClose
+  - 布尔型函数：is/has/should + 大驼峰，如 isValid()
+- 异步强制 async/await，catch 错误。禁止 Promise.then 链式嵌套（如遇回调 hell 必须拆分/抽象重写）
+- 一律用 const/let 替换 var，优先 const
+- 注释：
+  - 单行注释：后加空格，如 `// 注释内容`
+  - 方法/复杂模块加 /** JSDoc 注释 */
+
+## 6. 其它
+- 所有复杂渲染逻辑逻辑一律抽到计算属性或方法，模板结构保持简洁

src/views/bill/billHome/OverviewCard.vue

+<template>
+	<div class="overview-card">
+		<div class="overview-card-header">
+			<div class="overview-card-header-left">
+				<div class="overview-card-header-icon">
+					<img :src="icon" alt="" />
+				</div>
+				<div class="overview-card-header-title">{{ title }}</div>
+			</div>
+			<div v-if="$slots.right" class="overview-card-header-right">
+				<slot name="right" />
+			</div>
+		</div>
+		<div class="overview-card-main">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	title: {
+		type: String,
+		default: ""
+	},
+	icon: {
+		type: String,
+		default: ""
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.overview-card {
+	height: 450px;
+	box-sizing: border-box;
+	border: 1px solid rgba(234, 236, 238, 1);
+	border-radius: 10px;
+	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+	background: rgba(255, 255, 255, 1);
+	overflow: hidden;
+
+	.overview-card-header {
+		height: 53px;
+		border-bottom: 1px solid rgba(240, 242, 244, 1);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 27px 0 22px;
+
+		.overview-card-header-left {
+			display: flex;
+			align-items: center;
+
+			.overview-card-header-icon {
+				width: 19px;
+				height: 19px;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.overview-card-header-title {
+				margin-left: 19px;
+				height: 26px;
+				color: rgba(20, 89, 187, 1);
+				font-family: Microsoft YaHei;
+				font-size: 20px;
+				font-weight: 700;
+				line-height: 26px;
+			}
+		}
+
+		.overview-card-header-right {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			height: 100%;
+		}
+	}
+
+	.overview-card-main {
+		height: calc(100% - 53px);
+	}
+}
+</style>