门户页面

src/router/index.js

@@ -42,7 +42,8 @@ import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCas
 import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
 
 // 门户
-import Portals from '@/views/portals/index.vue'
+import Portal1 from '@/views/portals/portal1/index.vue';
+import Portal2 from '@/views/portals/portal2/index.vue';
 
 const routes = [
 	// 智库系统的主要路由
@@ -382,11 +383,19 @@ const routes = [
 		}
 	},
 	{
-		path: "/Portals",
-		name: "Portals",
-		component: Portals,
+		path: "/portal1",
+		name: "portal1",
+		component: Portal1,
 		meta: {
-			title: "门户"
+			title: "门户1"
+		}
+	},
+	{
+		path: "/portal2",
+		name: "portal2",
+		component: Portal2,
+		meta: {
+			title: "门户2"
 		}
 	}
 ];

src/views/portals/components/CardCustom.vue

@@ -2,8 +2,8 @@
 	<el-card class="card">
 		<div class="wrap">
 			<div class="line" :style="{ backgroundColor: lineColor }"></div>
-      <div class="header">
-        <div class="iconWrap">
+			<div class="header" :style="{ height: headerHeight }">
+				<div class="iconWrap" :style="{ width: iconWidth }">
 					<slot name="icon">
 						<el-icon :size="20">
 							<Edit />
@@ -12,7 +12,11 @@
 				</div>
 				<div
 					class="titleWrap"
-          :style="{ backgroundColor: titleBackgroundColor }"
+					:style="{
+						backgroundColor: titleBackgroundColor,
+						color: titleColor,
+						paddingLeft: titleTextAlign === 'left' ? '0px' : '20px'
+					}"
 				>
 					{{ title }}
 				</div>
@@ -40,16 +44,32 @@ const emit = defineEmits(["moreClick"]);
 defineProps({
 	titleBackgroundColor: {
 		type: String,
-    default: "red",
+		default: "red"
+	},
+	titleColor: {
+		type: String,
+		default: "#fff"
+	},
+	titleTextAlign: {
+		type: String,
+		default: "center"
 	},
 	lineColor: {
 		type: String,
-    default: "transparent",
+		default: "transparent"
 	},
 	title: {
 		type: String,
-    default: "风险信号",
+		default: "风险信号"
 	},
+	iconWidth: {
+		type: String,
+		default: "60px"
+	},
+	headerHeight: {
+		type: String,
+		default: "48px"
+	}
 });
 function moreClick() {
 	emit("moreClick");

src/views/portals/portal2/index.vue

+<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>