Skip to content

R
risk-monitor
提交 367c86e4 authored 作者: liujq23's avatar liujq23
浏览文件
操作

门户页面

上级 08b76029
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 294 行增加 和 103 行删除
src/router/index.js
浏览文件 @ 367c86e4
......@@ -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
浏览文件 @ 367c86e4
<template>
<el-card class="card">
<div class="wrap">
<div class="line" :style="{ backgroundColor: lineColor }"></div>
<div class="header">
<div class="iconWrap">
<slot name="icon">
<el-icon :size="20">
<Edit />
</el-icon>
</slot>
</div>
<div
class="titleWrap"
:style="{ backgroundColor: titleBackgroundColor }"
>
{{ title }}
</div>
<div class="rightWrap">
<slot name="right">
<div class="moreWrap">
<el-button text @click="moreClick">
<span class="moreText">更多</span>
<el-icon :size="14"> <Plus /> </el-icon>
</el-button>
</div>
</slot>
</div>
</div>
<div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
<el-card class="card">
<div class="wrap">
<div class="line" :style="{ backgroundColor: lineColor }"></div>
<div class="header" :style="{ height: headerHeight }">
<div class="iconWrap" :style="{ width: iconWidth }">
<slot name="icon">
<el-icon :size="20">
<Edit />
</el-icon>
</slot>
</div>
<div
class="titleWrap"
:style="{
backgroundColor: titleBackgroundColor,
color: titleColor,
paddingLeft: titleTextAlign === 'left' ? '0px' : '20px'
}"
>
{{ title }}
</div>
<div class="rightWrap">
<slot name="right">
<div class="moreWrap">
<el-button text @click="moreClick">
<span class="moreText">更多</span>
<el-icon :size="14"> <Plus /> </el-icon>
</el-button>
</div>
</slot>
</div>
</div>
<div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
</template>
<script setup>
import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]);
defineProps({
titleBackgroundColor: {
type: String,
default: "red",
},
lineColor: {
type: String,
default: "transparent",
},
title: {
type: String,
default: "风险信号",
},
titleBackgroundColor: {
type: String,
default: "red"
},
titleColor: {
type: String,
default: "#fff"
},
titleTextAlign: {
type: String,
default: "center"
},
lineColor: {
type: String,
default: "transparent"
},
title: {
type: String,
default: "风险信号"
},
iconWidth: {
type: String,
default: "60px"
},
headerHeight: {
type: String,
default: "48px"
}
});
function moreClick() {
emit("moreClick");
emit("moreClick");
}
</script>
<style lang="scss" scoped>
.card {
position: relative;
:deep(.el-card__body) {
padding: 0;
height: 100%;
}
position: relative;
:deep(.el-card__body) {
padding: 0;
height: 100%;
}
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
}
.line {
left: 1px;
right: 1px;
background-color: transparent;
height: 1px;
top: 0;
position: absolute;
left: 1px;
right: 1px;
background-color: transparent;
height: 1px;
top: 0;
position: absolute;
}
.header {
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
flex-direction: row;
align-items: stretch;
z-index: 1;
position: relative;
flex-shrink: 0;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
flex-direction: row;
align-items: stretch;
z-index: 1;
position: relative;
flex-shrink: 0;
}
.iconWrap {
width: 60px;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.titleWrap {
display: flex;
justify-content: center;
align-items: center;
padding-left: 20px;
padding-right: 20px;
background-color: red;
color: #fff;
font-size: 20px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
padding-left: 20px;
padding-right: 20px;
background-color: red;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.rightWrap {
display: flex;
justify-content: end;
align-items: center;
flex: 1;
display: flex;
justify-content: end;
align-items: center;
flex: 1;
}
.moreWrap {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
.moreText {
margin-right: 3px;
}
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
.moreText {
margin-right: 3px;
}
}
.body {
flex: 1;
padding: 14px 20px;
flex: 1;
padding: 14px 20px;
}
</style>
src/views/portals/index.vue deleted 100644 → 0
浏览文件 @ 08b76029
差异被折叠。
src/views/portals/portal1/index.vue 0 → 100644
浏览文件 @ 367c86e4
差异被折叠。
src/views/portals/portal2/index.vue 0 → 100644
浏览文件 @ 367c86e4
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论