<template>
	<div class="wrapper">
		<div class="box1 box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">行业背景</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box1-main">
				<div class="box1-main-item" v-for="(bg, index) in bgList" :key="index">
					<div class="id">{{ index + 1 + "." }}</div>
					<div class="title">{{ bg.title }}</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box2 box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">市场需求</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box2-main">
				<div class="box2-main-item" v-for="(demand, index) in demandList" :key="index">
					<div class="box2-main-item-header">
						<div class="header-left">
							{{ demand.title }}
						</div>
						<div class="header-right">
							<div class="icon">
								<img src="@/assets/images/icon-open.png" alt="" />
							</div>
							<div class="text">{{ "跳转原文" }}</div>
						</div>
					</div>
					<div class="box2-main-item-content">
						<div class="content-item" v-for="(val, idx) in demand.data" :key="idx">
							<div class="id">{{ idx + 1 + "." }}</div>
							<div class="title">{{ val.title }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box3 box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">国内外供应情况</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box3-main">
				<div class="box3-main-item" v-for="(supply, index) in supplyList" :key="index">
					<div class="box3-main-item-header">
						<div class="header-left">
							{{ supply.title }}
						</div>
						<div class="header-right">
							<div class="icon">
								<img src="@/assets/images/icon-open.png" alt="" />
							</div>
							<div class="text">{{ "跳转原文" }}</div>
						</div>
					</div>
					<div class="box3-main-item-content">
						<div class="content-item" v-for="(val, idx) in supply.data" :key="idx">
							<div class="id">{{ idx + 1 + "." }}</div>
							<div class="title">{{ val.title }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box4 box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">未来产业格局</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box4-main">
				<div class="box4-main-item" v-for="(item, index) in box4List" :key="index">
					<div class="box4-main-item-header">
						<div class="header-left">
							{{ item.title }}
						</div>
						<div class="header-right">
							<div class="icon">
								<img src="@/assets/images/icon-open.png" alt="" />
							</div>
							<div class="text">{{ "跳转原文" }}</div>
						</div>
					</div>
					<div class="box4-main-item-content">
						<div class="content-item" v-for="(val, idx) in item.data" :key="idx">
							<div class="id">{{ idx + 1 + "." }}</div>
							<div class="title">{{ val.title }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box5 box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">调查建议</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box5-main">
				<div class="box5-main-item" v-for="(suggestion, index) in suggestionList" :key="index">
					<div class="box5-main-item-header">{{ suggestion.title }}</div>
					<div class="box5-main-item-content">
						<div class="content-item" v-for="(val, idx) in suggestion.data" :key="idx">
							<div class="content-item-title">{{ idx + 1 + "." + val.title }}</div>
							<div class="content-item-info">
								<div class="desc">{{ val.info.desc }}</div>
								<div class="info-bill" v-if="val.info.bill">
									<div class="info-bill-box">
										<div class="info-bill-left">{{ "法案" }}</div>
										<div class="info-bill-center">{{ val.info.bill }}</div>
										<div class="info-bill-right">
											<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const bgList = ref([
	{
		title: "钒被美国内政部列入《2018 年关键矿产清单》（依据第 13817 号行政命令），需满足 “对经济与国家安全至关重要、供应链易受中断、无供应将致重大后果” 三大标准，是国防（军事装备钛合金）、关键基础设施（高强度低合金钢材）及化工、储能领域的必需物资（P1-411 至 P1-423、P1-441 至 P1-451）。"
	},
	{
		title: "全球钒生产分三类：原生生产（采矿）、联合生产（炼钢副产品，占全球 2019 年总产量 71%）、二次生产（废料回收）；美国以二次生产为主（占全球二次产量 1/3，约全球总产 4%），原生生产仅能源燃料公司（Energy Fuels）1 家，2019 年复产但产量不足全球 1%（P1-206 至 P1-208、P1-224 至 P1-227）。"
	},
	{
		title: "美国钒产业高度集中，2019 年仅 3 家企业（AMG Vanadium、U.S. Vanadium、Energy Fuels）从事生产，AMG Vanadium 是国内最大钒铁生产商，U.S. Vanadium 专注高纯度五氧化二钒，Gladieux Metals Recycling 因设施改造处于闲置状态（P1-230 至 P1-232、P1-246 至 P1-248、P1-252 至 P1-254）。"
	},
	{
		title: "美国对钒进口实施贸易管控：自 1995 年起对中国、南非、俄罗斯等国钒铁征收反倾销税（中国全国统一税率 66.71%、南非 116%），2018 年后对华加征 301 条款关税（10%-25%）；同时通过《确保关键矿产安全可靠供应的联邦战略》，与加拿大、澳大利亚签订关键矿产合作协议（P1-369 至 P1-371、P1-401 至 P1-406、P1-693 至 P1-712）。"
	},
	{
		title: "美国钒生产依赖进口原料：二次生产所需废催化剂、灰渣等 80% 来自海外（2019 年含钒废料进口 90% 来自加拿大），仅 Energy Fuels 使用 100% 本土原料，2016 年以来其产量占国内需求的 1.4%（P1-493 至 P1-495、P1-503、P1-682 至 P1-683）。"
	}
]);

const demandList = ref([
	{
		title: "（一）美国市场需求",
		data: [
			{
				title: "2016-2019 年美国钒表观消费量年均 8590 吨（含钒量），国内产量仅 340 万千克 / 年，进口依赖度超 80%（年均进口 780 万千克）（P1-481、P1-661）。"
			},
			{
				title: "钢铁产业是最大需求领域，占总需求 90%（2019 年约 7731 吨含钒量），用于高强度低合金（HSLA）钢（抗震钢筋、桥梁）、工具钢（机械加工），其中国防用钢占钢铁需求 3%，对应钒需求 230 吨 / 年（P1-279 至 P1-283、P1-438、P1-443）。"
			},
			{
				title: "钛产业占总需求 5%（约 430 吨 / 年），90% 用于航空航天领域（商用 55%、军用 10%），是 Ti-6Al-4V 合金核心成分（成本占比 12%-14%），2020 年受新冠疫情冲击，航空航天需求下滑致钛产业钒需求骤减（P1-291 至 P1-293、P1-437、P1-738 至 P1-739）。"
			},
			{
				title: "非冶金领域占总需求 5%（约 430 吨 / 年），包括化工催化剂（硫酸生产，硫酸为工业基础原料）、储能（钒液流电池，当前占比不足 1%，2027 年增速预计 13%-42%）（P1-299 至 P1-306、P1-450、P1-746）。"
			},
			{
				title: "2020 年新冠疫情对美国钒需求冲击显著：钢铁产量同比降 18%，航空航天领域钛需求锐减，钒液流电池等新兴需求未形成规模支撑（P1-732 至 P1-733、P1-738 至 P1-739）。"
			}
		]
	},
	{
		title: "（二）国际市场需求",
		data: [
			{
				title: "全球钒需求以钢铁产业为主（占比 90%-93%），中国是最大消费国（占全球需求 50%-60%），其钢铁产业（尤其是钢筋）钒用量直接影响全球市场（P1-279、P1-321、P1-716 至 P1-717）。"
			},
			{
				title: "国际航空航天领域钛合金用钒需求稳定，占全球钒总需求 3%-5%，集中于波音、空客供应链，2020 年受疫情冲击需求下滑，长期随航空业复苏有望恢复年均 2%-3% 增长（P1-291 至 P1-293、P1-738 至 P1-739）。"
			},
			{
				title: "钒液流电池是全球钒需求新增长点：当前占比不足 1%，Roskill 预测 2027 年增速 13%/ 年，Bushveld Minerals 预测 42%/ 年，若成本降至 100 美元 /kWh，2030 年或占全球消费 10%-15%（P1-305 至 P1-306、P1-746）。"
			},
			{
				title: "化工领域（硫酸生产催化剂）是全球钒需求的稳定补充，硫酸消费量被视为 “国家工业发展指标”，支撑钒在非冶金领域的基础需求（P1-299 至 P1-302）。"
			}
		]
	}
]);

const supplyList = ref([
	{
		title: "（一）美国供应情况",
		data: [
			{
				title: "原生供应：仅 Energy Fuels 具备产能，2019 年生产 460 吨含钒量（五氧化二钒）后因价格低迷停产；矿山资源含 660 万千克可采钒量，需价格回升至 10 美元 / 磅以上才具备复产动力（P1-208 至 P1-210、P1-213、P1-588 至 P1-589）。"
			},
			{
				title: "二次供应：AMG Vanadium（俄亥俄州）2016-2019 年钒铁年均产量 [数据缺失]，2021 年新工厂投产后产能翻倍至 5500 吨 / 年（含钒量）；U.S. Vanadium（阿肯色州）是国内唯一高纯度五氧化二钒生产商；Gladieux（得克萨斯州）改造完成后将恢复普通级五氧化二钒生产，预计 2021 年后投产（P1-230 至 P1-232、P1-238 至 P1-240、P1-246 至 P1-248、P1-252 至 P1-254）。"
			},
			{
				title: "潜在产能：内华达州 Gibellini 项目（2023 年投产，年产能 2400 吨含钒量）、Carlin 项目（16 年周期总产能 4600 万千克含钒量），需钒价达 7.76 美元 / 磅盈亏平衡线才具备经济性（P1-214 至 P1-217、P1-218 至 P1-219、P1-751 至 P1-752）。"
			},
			{
				title: "原料依赖：二次生产所需废催化剂、五氧化二钒等原料 80% 进口，2019 年含钒废料进口 90% 来自加拿大，仅 Energy Fuels 使用 100% 本土原料，供应链自主性不足（P1-493 至 P1-495、P1-503、P1-682 至 P1-683）。"
			}
		]
	},
	{
		title: "（二）国际供应情况",
		data: [
			{
				title: "全球产能集中：2019 年全球钒产量 10.3 万吨（矿山 7.3 万吨 + 二次 3 万吨），生产集中于 4 国 —— 中国（55%，约 5.6 万吨）、俄罗斯（18%，约 1.8 万吨）、南非（8%，约 0.8 万吨）、巴西（7%，约 0.7 万吨），中国通过钢铁联合生产（占全球联合产量 71%）主导供应（P1-208、P1-224、P1-321、P1-724）。"
			},
			{
				title: "贸易流向特征：中国虽产量高，但国内钢铁需求大，出口仅占全球 15%；欧盟（占全球出口 27%）、南非（13%）、巴西（13%）是主要出口方；美国进口来源前三位为加拿大（钒铁 43%）、奥地利（25%）、南非（钒氧化物 10%），2019 年进口额 4.78 亿美元（P1-346、P1-350、P1-354、P1-481）。"
			},
			{
				title: "成本竞争格局：中国、俄罗斯联合生产现金成本低于 8 美元 / 磅，哈萨克斯坦新项目宣称 “全球最低成本”；美国原生生产需 10-13 美元 / 磅才盈利，二次生产依赖回收费用（AMG Vanadium 回收收益覆盖 80% 运营成本），整体竞争力弱于新兴市场（P1-588 至 P1-589、P1-724、P1-729）。"
			},
			{
				title: "新增产能规划：加拿大（BlackRock Metals 项目 2021 年投产，年产能 4000 吨）、澳大利亚（Windimurra mine 等 5 个项目处于后期勘探，预计 2021 年后投产）、哈萨克斯坦（Balasausqandiq 项目计划 2023 年产能 1.3 万吨），若全部投产可使全球矿山产量接近翻倍（P1-322 至 P1-323、P1-324 至 P1-331、P1-338 至 P1-339、P1-724）。"
			}
		]
	}
]);

const box4List = ref([
	{
		title: "（一）美国未来产业格局",
		data: [
			{
				title: "短期（2021-2023 年）：AMG Vanadium 新工厂、Gladieux 改造项目投产后，钒铁自给率预计从 [数据缺失] 提升至 50% 以上，普通级五氧化二钒进口依赖度从 100% 降至 60% 以下；Gibellini 项目 2023 年投产将新增原生产能，进口依赖度进一步降低（P1-238 至 P1-240、P1-252 至 P1-254、P1-218 至 P1-219、P1-664 至 P1-669）。"
			},
			{
				title: "中长期（2024-2030 年）：若 Gibellini、Carlin 项目满产，美国原生钒产能可达 4800 吨 / 年（占国内需求 50% 以上），叠加二次产能扩张，进口依赖度或降至 50% 以下，供应链自主性显著提升（P1-214 至 P1-217、P1-218 至 P1-219、P1-774）。"
			},
			{
				title: "政策驱动方向：美国或推进 “国防储备扩大”（建议储备 4800 吨含钒量五氧化二钒）、“回收促进”（回收税收优惠、EPA 监管优化），同时深化与加拿大、澳大利亚的关键矿产合作，分散供应风险（P1-780 至 P1-793、P1-794 至 P1-800、P1-693 至 P1-712）。"
			},
			{
				title: "产业风险挑战：全球新增产能（哈萨克斯坦、加拿大、澳大利亚）或压低价格至 5-7 美元 / 磅，抑制美国原生产能投产；二次生产仍依赖进口原料，供应链风险未完全消除；若钒价长期低迷，部分规划产能可能推迟或取消（P1-724、P1-751 至 P1-755、P1-776）。"
			}
		]
	},
	{
		title: "（二）国际产业格局",
		data: [
			{
				title: "需求趋势：全球钢铁需求增速趋缓（预计年增 1.4% 至 2035 年），但高强度钢、工具钢占比提升支撑钒用量；储能需求成核心增长点，若钒液流电池成本达标，2030 年或占全球消费 10%-15%；国防、化工需求保持稳定（P1-734、P1-746、P1-299 至 P1-302）。"
			},
			{
				title: "供应格局：中国仍将主导全球钒供应，但加拿大、澳大利亚、哈萨克斯坦新增产能将分流市场份额，全球供应集中度或从 2019 年的 88%（中、俄、南非、巴西）降至 2030 年的 75% 左右（P1-321、P1-322 至 P1-331、P1-338 至 P1-339、P1-724）。"
			},
			{
				title: "价格影响因素：短期受全球新增产能释放影响，钒价或维持 5-8 美元 / 磅低位；中长期若储能需求爆发，或推动价格回升至 10-12 美元 / 磅，触发美国、澳大利亚等国原生产能投产（P1-588 至 P1-589、P1-724、P1-746）。"
			},
			{
				title: "贸易与政策：全球关键矿产竞争加剧，美国、欧盟等或进一步强化对钒等关键矿产的供应链管控，推动与盟友的合作协议；中国政策（如钢铁标准、环保管控）仍将是影响全球钒市场的重要变量（P1-693 至 P1-712、P1-716 至 P1-717）。"
			}
		]
	}
]);

const suggestionList = ref([
	{
		title: "（一）与盟友及合作伙伴合作",
		data: [
			{
				title: "美国盟友的脆弱性",
				info: {
					desc: "美国盟友和合作伙伴的国家安全对美国国家安全至关重要，而两者都因盟友在钕铁硼磁体价值链对中国的依赖而受到削弱。"
				}
			},
			{
				title: "关键矿物多边合作",
				info: {
					desc: "共同的脆弱性凸显了当前关于关键矿物的多边及双边合作的价值，这些合作有助于推动美国及其盟友摆脱对潜在对手和国家安全威胁来源的依赖。"
				}
			}
		]
	},
	{
		title: "（二）强化国内供应",
		data: [
			{
				title: "设立稀土税收抵免",
				info: {
					desc: "商务部建议政府支持《稀土磁体制造生产税收抵免法案》（H.R. 5033）或类似立法的通过。除稀土磁体税收抵免外，商务部还建议政府支持为可替代钕铁硼磁体的非稀土磁体，以及碳酸稀土、氧化物、金属、合金等上游稀土产品设立税收抵免。",
					bill: "2024《稀土磁体制造生产税收抵免法案》"
				}
			},
			{
				title: "为国内制造提供额外支持",
				info: {
					desc: "商务部建议政府支持通过立法行动（如 “供应链韧性计划”）分配额外资金，以发展有韧性的供应链。此类计划的额外资金应支持对钕铁硼磁体价值链所有环节国内制造的投资。",
					bill: "2024《两党基础设施法》"
				}
			}
		]
	}
]);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: rgba(10, 87, 166, 1);
		}
		.title {
			margin-left: 14px;
			margin-top: 16px;
			height: 24px;
			line-height: 24px;
			color: rgba(10, 87, 166, 1);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 116px;
			display: flex;
			.btn {
				margin-left: 8px;
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 28px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid rgba(10, 87, 166, 1);
				background: rgba(246, 250, 255, 1);
				color: rgba(10, 87, 166, 1);
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.box-footer {
		margin: 24px auto 0;
		width: 1568px;
		height: 64px;
		box-sizing: border-box;
		border: 1px solid rgba(231, 243, 255, 1);
		border-radius: 4px;
		background: rgba(246, 250, 255, 1);
		display: flex;
		align-items: center;
		gap: 13px;
		padding: 0 12px;
		.box-footer-left {
			width: 19px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.box-footer-center {
			width: 939px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: justify;
		}
		.box-footer-right {
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.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);
		margin: 16px auto;
	}
	.box1 {
		width: 1600px;
		height: 588px;
		.box1-main {
			height: 425px;
			margin-top: 2px;
			overflow: hidden;
			overflow-y: auto;
		}
		.box1-main-item {
			margin: 0 auto;
			width: 1552px;
			padding: 12px 23px 12px 44px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: justify;
			display: flex;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			.id {
				width: 18px;
			}
			.title {
				flex: 1;
			}
		}
	}
	.box2 {
		width: 1600px;
		height: 921px;
		.box2-main {
			height: 760px;
			width: 1552px;
			margin: 2px auto 0;
			.box2-main-item {
				width: 1552px;
				.box2-main-item-header {
					height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					.header-left {
						margin-left: 12px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.header-right {
						margin-right: 22px;
						display: flex;
						gap: 5px;
						justify-content: flex-end;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 14px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
				.box2-main-item-content {
					.content-item {
						box-sizing: border-box;
						padding: 12px 23px 12px 44px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						display: flex;
						.id {
							width: 18px;
						}
						.text {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.box3 {
		width: 1600px;
		height: 957px;
		.box3-main {
			height: 795px;
			width: 1552px;
			margin: 2px auto 0;
			.box3-main-item {
				width: 1552px;
				.box3-main-item-header {
					height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					.header-left {
						margin-left: 12px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.header-right {
						margin-right: 22px;
						display: flex;
						gap: 5px;
						justify-content: flex-end;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 14px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
				.box3-main-item-content {
					.content-item {
						box-sizing: border-box;
						padding: 12px 23px 12px 44px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						display: flex;
						.id {
							width: 18px;
						}
						.text {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.box4 {
		width: 1600px;
		height: 954px;
		.box4-main {
			height: 795px;
			width: 1552px;
			margin: 2px auto 0;
			.box4-main-item {
				width: 1552px;
				.box4-main-item-header {
					height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					.header-left {
						margin-left: 12px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.header-right {
						margin-right: 22px;
						display: flex;
						gap: 5px;
						justify-content: flex-end;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 14px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
				.box4-main-item-content {
					.content-item {
						box-sizing: border-box;
						padding: 12px 23px 12px 44px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						display: flex;
						.id {
							width: 18px;
						}
						.text {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.box5 {
		width: 1600px;
		height: 813px;
		.box5-main {
			height: 650px;
			width: 1552px;
			margin: 0 auto;
			margin-top: 2px;
			.box5-main-item {
				.box5-main-item-header {
					width: 1552px;
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					line-height: 48px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 700;
					letter-spacing: 0px;
					text-align: justify;
					padding-left: 12px;
				}
				.box5-main-item-content {
					margin-bottom: 10px;
					.content-item {
						.content-item-title {
							padding: 12px 23px 12px 44px;
							box-sizing: border-box;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
						}
						.content-item-info {
							padding: 12px 23px 12px 44px;
							box-sizing: border-box;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							.desc {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								padding-left: 15px;
							}
							.info-bill {
								border-radius: 4px;
								display: inline-block;
								background: rgba(246, 250, 255, 1);
								.info-bill-box {
									display: flex;
									margin-top: 4px;
									height: 32px;
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
									gap: 16px;
									align-items: center;
									padding: 0 8px;
									.info-bill-left {
										height: 22px;
										padding: 0 4px;
										border-radius: 4px;
										background: rgba(231, 243, 255, 1);
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
										letter-spacing: 0px;
										text-align: left;
									}
									.info-bill-center {
										height: 24px;
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: left;
									}
									.info-bill-right {
										width: 20px;
										height: 20px;
                    cursor: pointer;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>