feat 法案首页新增委员会卡片

src/views/bill/billHome/index.vue

@@ -10,6 +10,32 @@
 						defaultBillSearchType="federal" />
 				</div>
 
+				<div class="committee-cards-section">
+					<div class="committee-cards-filter">
+						<span class="committee-cards-desc">近期美国国会各委员会涉华提案数量汇总</span>
+						<el-radio-group v-model="committeeTimeRange" class="committee-time-switch" size="default">
+							<el-radio-button v-for="item in committeeTimeOptions" :key="item.value" :label="item.value">
+								<span class="committee-time-switch-inner">
+									<el-icon v-if="committeeTimeRange === item.value" class="committee-time-switch-icon">
+										<Calendar />
+									</el-icon>
+									{{ item.label }}
+								</span>
+							</el-radio-button>
+						</el-radio-group>
+					</div>
+					<div class="committee-cards-row">
+						<div v-for="item in committeeCardList" :key="item.id" class="committee-card">
+							<div class="committee-card-icon"></div>
+							<div class="committee-card-content">
+								<div class="committee-card-name">{{ item.name }}</div>
+								<div class="committee-card-chamber">{{ item.chamber }}</div>
+							</div>
+							<div class="committee-card-count">{{ item.count }}项 &gt;</div>
+						</div>
+					</div>
+				</div>
+
 				<DivideHeader id="position1" class="divide1" :titleText="'最新动态'"></DivideHeader>
 				<div class="home-content-center">
 					<div class="center-top">
@@ -284,6 +310,7 @@ import box7HeaderIcon from "./assets/images/box7-header-icon.png";
 
 
 import { ElMessage } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
 
 // 跳转人物主页
 const handleClickToCharacter = async (id, name) => {
@@ -343,6 +370,19 @@ const handleClickToCharacter = async (id, name) => {
 const containerRef = ref(null);
 const { isShow } = useContainerScroll(containerRef);
 
+// 委员会卡片占位数据
+const committeeTimeRange = ref("近一月");
+const committeeTimeOptions = [
+	{ label: "近一周", value: "近一周" },
+	{ label: "近一月", value: "近一月" },
+	{ label: "近一年", value: "近一年" }
+];
+const committeeCardList = ref([
+	{ id: 1, name: "众议院外交委员会", chamber: "众议院", count: 42 },
+	{ id: 2, name: "参议院军事委员会", chamber: "参议院", count: 28 },
+	{ id: 3, name: "众议院情报委员会", chamber: "众议院", count: 19 }
+]);
+
 const hotBillList = ref([]); // 热门法案列表
 const carouselRef = ref(null);
 
@@ -1504,6 +1544,150 @@ onUnmounted(() => {
 				}
 			}
 
+			.committee-cards-section {
+				width: 100%;
+				margin-top: 64px;
+				margin-bottom: 0;
+
+				.committee-cards-filter {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 16px;
+
+					.committee-cards-desc {
+						color: var(--text-primary-65-color);
+						font-family: Microsoft YaHei;
+						font-size: var(--font-size-base);
+						font-weight: 400;
+						line-height: 22px;
+					}
+
+					.committee-time-switch {
+						:deep(.el-radio-group) {
+							display: inline-flex;
+							align-items: stretch;
+							padding: 4px;
+							border-radius: 50px;
+							background: var(--bg-black-10);
+							gap: 0;
+							flex-wrap: nowrap;
+						}
+
+						:deep(.el-radio-button) {
+							margin: 0;
+
+							.el-radio-button__inner {
+								display: inline-flex;
+								align-items: center;
+								justify-content: center;
+								gap: 6px;
+								height: 100%;
+								padding: 8px 20px;
+								border: none;
+								border-radius: 50px;
+								background: transparent;
+								box-shadow: none;
+								color: var(--text-primary-50-color);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 22px;
+							}
+
+							&:first-child .el-radio-button__inner {
+								border-radius: 50px;
+							}
+
+							&:last-child .el-radio-button__inner {
+								border-radius: 50px;
+							}
+						}
+
+						:deep(.el-radio-button.is-active) {
+							.el-radio-button__inner {
+								background: rgba(255, 255, 255, 0.65);
+								color: var(--text-primary-80-color);
+								box-shadow: 0 2px 8px rgba(22, 119, 255, 0.12);
+							}
+						}
+
+						.committee-time-switch-inner {
+							display: inline-flex;
+							align-items: center;
+							gap: 6px;
+						}
+
+						.committee-time-switch-icon {
+							font-size: 16px;
+						}
+					}
+				}
+
+				.committee-cards-row {
+					display: flex;
+					gap: 16px;
+					width: 100%;
+
+					.committee-card {
+						flex: 1;
+						min-height: 100px;
+						display: flex;
+						align-items: center;
+						gap: 16px;
+						padding: 21px 23px;
+						border-radius: 10px;
+						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+						background: var(--bg-white-100);
+						box-sizing: border-box;
+
+						.committee-card-icon {
+							width: 54px;
+							height: 54px;
+							min-width: 54px;
+							border-radius: 50%;
+							background: var(--color-primary-10);
+							flex-shrink: 0;
+						}
+
+						.committee-card-content {
+							flex: 1;
+							min-width: 0;
+							text-align: left;
+
+							.committee-card-name {
+								color: var(--text-primary-80-color);
+								font-family: Microsoft YaHei;
+								font-size: 20px;
+								font-weight: 700;
+								line-height: 26px;
+								margin-bottom: 4px;
+							}
+
+							.committee-card-chamber {
+								color: var(--text-primary-50-color);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 22px;
+							}
+						}
+
+						.committee-card-count {
+							flex-shrink: 0;
+							align-self: center;
+							text-align: right;
+							color: var(--color-primary-100);
+							font-family: Microsoft YaHei;
+							font-size: 20px;
+							font-weight: 700;
+							line-height: 26px;
+							white-space: nowrap;
+						}
+					}
+				}
+			}
+
 			.divide1 {
 				margin-top: 64px;
 				margin-bottom: 36px;