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 ...@@ -42,7 +42,8 @@ import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCas
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue"; 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 = [ const routes = [
// 智库系统的主要路由 // 智库系统的主要路由
...@@ -382,11 +383,19 @@ const routes = [ ...@@ -382,11 +383,19 @@ const routes = [
} }
}, },
{ {
path: "/Portals", path: "/portal1",
name: "Portals", name: "portal1",
component: Portals, component: Portal1,
meta: { meta: {
title: "门户" title: "门户1"
}
},
{
path: "/portal2",
name: "portal2",
component: Portal2,
meta: {
title: "门户2"
} }
} }
]; ];
......
src/views/portals/components/CardCustom.vue
浏览文件 @ 367c86e4
<template> <template>
<el-card class="card"> <el-card class="card">
<div class="wrap"> <div class="wrap">
<div class="line" :style="{ backgroundColor: lineColor }"></div> <div class="line" :style="{ backgroundColor: lineColor }"></div>
<div class="header"> <div class="header" :style="{ height: headerHeight }">
<div class="iconWrap"> <div class="iconWrap" :style="{ width: iconWidth }">
<slot name="icon"> <slot name="icon">
<el-icon :size="20"> <el-icon :size="20">
<Edit /> <Edit />
</el-icon> </el-icon>
</slot> </slot>
</div> </div>
<div <div
class="titleWrap" class="titleWrap"
:style="{ backgroundColor: titleBackgroundColor }" :style="{
> backgroundColor: titleBackgroundColor,
{{ title }} color: titleColor,
</div> paddingLeft: titleTextAlign === 'left' ? '0px' : '20px'
<div class="rightWrap"> }"
<slot name="right"> >
<div class="moreWrap"> {{ title }}
<el-button text @click="moreClick"> </div>
<span class="moreText">更多</span> <div class="rightWrap">
<el-icon :size="14"> <Plus /> </el-icon> <slot name="right">
</el-button> <div class="moreWrap">
</div> <el-button text @click="moreClick">
</slot> <span class="moreText">更多</span>
</div> <el-icon :size="14"> <Plus /> </el-icon>
</div> </el-button>
<div class="body"> </div>
<slot name="default"> </slot> </slot>
</div> </div>
</div> </div>
</el-card> <div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
</template> </template>
<script setup> <script setup>
import { Edit, Plus } from "@element-plus/icons-vue"; import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]); const emit = defineEmits(["moreClick"]);
defineProps({ defineProps({
titleBackgroundColor: { titleBackgroundColor: {
type: String, type: String,
default: "red", default: "red"
}, },
lineColor: { titleColor: {
type: String, type: String,
default: "transparent", default: "#fff"
}, },
title: { titleTextAlign: {
type: String, type: String,
default: "风险信号", default: "center"
}, },
lineColor: {
type: String,
default: "transparent"
},
title: {
type: String,
default: "风险信号"
},
iconWidth: {
type: String,
default: "60px"
},
headerHeight: {
type: String,
default: "48px"
}
}); });
function moreClick() { function moreClick() {
emit("moreClick"); emit("moreClick");
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .card {
position: relative; position: relative;
:deep(.el-card__body) { :deep(.el-card__body) {
padding: 0; padding: 0;
height: 100%; height: 100%;
} }
} }
.wrap { .wrap {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.line { .line {
left: 1px; left: 1px;
right: 1px; right: 1px;
background-color: transparent; background-color: transparent;
height: 1px; height: 1px;
top: 0; top: 0;
position: absolute; position: absolute;
} }
.header { .header {
height: 48px; height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
z-index: 1; z-index: 1;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
} }
.iconWrap { .iconWrap {
width: 60px; width: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.titleWrap { .titleWrap {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
background-color: red; background-color: red;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
.rightWrap { .rightWrap {
display: flex; display: flex;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
flex: 1; flex: 1;
} }
.moreWrap { .moreWrap {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
height: 100%; height: 100%;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
cursor: pointer; cursor: pointer;
.moreText { .moreText {
margin-right: 3px; margin-right: 3px;
} }
} }
.body { .body {
flex: 1; flex: 1;
padding: 14px 20px; padding: 14px 20px;
} }
</style> </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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论