<template>
	<div class="wrap">
		<el-row>
			<CardCustom
				title="热门数据"
				title-text-align="left"
				title-color="rgba(10, 87, 166, 1)"
				:style="{ width: '520px', height: '459px' }"
				title-background-color="rgba(255, 255, 255, 1)"
				header-height="53px"
			>
				<template #icon>
					<div class="icon icon5"></div>
				</template>
				<template #right>
					<div></div>
				</template>
				<div class="item" v-for="(item, index) in List" :key="index">
					<span class="itemNumber" :style="{ color: getColor(index) }">
						{{ index + 1 }}
					</span>
					<div class="itemText">{{ item.title }}</div>
					<span class="itemClass">{{ item.class }}</span>
				</div>
			</CardCustom>
			<CardCustom
				title="数据分布"
				title-text-align="left"
				title-color="rgba(10, 87, 166, 1)"
				:style="{ width: '1064px', height: '459px', marginLeft: '16px' }"
				title-background-color="rgba(255, 255, 255, 1)"
				header-height="53px"
			>
				<template #icon>
					<div class="icon icon3"></div>
				</template>
				<template #right>
					<div></div>
				</template>
			</CardCustom>
		</el-row>
       		<div class="gap">
			<el-row class="cardContainer">
				<div class="itemCard">
					<div class="itemCardTitle">科研学术</div>
					<div class="itemCardNumber">2465</div>
				</div>
			</el-row>
		</div>
	</div>
</template>

<script setup>
import CardCustom from "../components/CardCustom.vue";
import { ref } from "vue";
function getColor(index) {
	const mapColor = ["rgba(206, 79, 81, 1)", "rgba(255, 169, 64, 1)", "rgba(255, 197, 61, 1)"];
	let color = mapColor[index];
	return color || "transparent";
}
const List = ref([
	{
		title: "H.R.1-119th-大而美法案",
		class: "科技法案"
	},
	{
		title: "欧盟单方面宣布对中国电动汽车加征反补贴...",
		class: "媒体报道"
	},
	{
		title: "禁止在中国建设半导体产能",
		class: "总统政令"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	},
	{
		title: "2025年实体清单",
		class: "实体清单"
	}
]);
</script>

<style lang="scss" scoped>
.wrap {
	width: 1600px;
	margin: 30px auto;
}
.gap {
	margin-top: 24px;
}
.icon {
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
}
.icon3 {
	background-image: url("../assets/img/icon3.png");
}
.icon5 {
	background-image: url("../assets/img/icon5.png");
}
.item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 7px;

}
.itemNumber {
	width: 40px;
}
.itemText {
	flex: 1;
}
.itemClass {
	color: rgba(132, 136, 142, 1);
}
.cardContainer {
	justify-content: space-between;
}
.itemCard{
   /* 容器 245 */
width: 186px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.itemCardTitle{
    font-size: 20px;
    font-weight: 700;
}
.itemCardNumber{
    margin-top: 5px;
    font-size: 16px;
}
</style>
