Skip to content

R
risk-monitor
提交 15dee61f authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 d5af7461
隐藏空白字符变更
内嵌 并排
正在显示 包含 553 行增加 和 167 行删除
src/App.vue
浏览文件 @ 15dee61f
<template>
<div id="app">
<div class="pro-wrapper">
<div class="navbar">
<div class="nav-brand">
<div class="brand-icon">
<img src="@/assets/icons/header-logo.png" alt="" />
<div class="home-page">
<div class="navbar">
<div class="nav-left">
<div class="icon">
<img src="@/assets/icons/overview/logo.png" alt="" />
</div>
<div class="title-box">
<div
class="title"
v-for="(item, index) in homeTitleList"
:key="index"
@mouseenter="handleShowMenu(index, true)"
@mouseleave="handleShowMenu(index, false)"
>
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">{{ item.name }}</div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div>
</div>
</div>
<div class="brand-text" @click="handleToHome">
<div class="text-ch">某方向风险监测预警系统</div>
<div class="nav-right">
<div class="search-box">
<div class="input"><el-input type="text" v-model="searchText" @keyup.enter="handleSearch" /></div>
<div class="icon" @click="handleSearch">
<img src="@/assets/icons/overview/search.png" alt="" />
</div>
</div>
<div class="info-box">
<div class="mail">
<img src="@/assets/icons/overview/mail.png" alt="" />
</div>
<div class="user">
<img src="@/assets/icons/overview/user.png" alt="" />
</div>
<div class="name">{{ "管理员" }}</div>
</div>
</div>
</div>
<div class="user-info">
<div class="email">
<img src="@/assets/icons/header-icon.png" alt="" />
<div class="menu-box" v-if="isShowMenu" @mouseenter="handleHoverMenu(true)" @mouseleave="handleHoverMenu(false)">
<div class="menu-content">
<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)">
<div class="icon">
<img :src="item.icon" alt="" />
</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
<div class="avator">
<img src="@/assets/icons/header-avator.png" alt="" />
</div>
<span class="user">管理员</span>
</div>
<div class="main-container">
<router-view />
</div>
</div>
<div class="main-container">
<router-view />
<div class="content-page">
<div class="navbar">
<div class="nav-brand">
<div class="brand-icon">
<img src="@/assets/icons/header-logo.png" alt="" />
</div>
<div class="brand-text" @click="handleToHome">
<div class="text-ch">某方向风险监测预警系统</div>
</div>
</div>
<div class="user-info">
<div class="email">
<img src="@/assets/icons/header-icon.png" alt="" />
</div>
<div class="avator">
<img src="@/assets/icons/header-avator.png" alt="" />
</div>
<span class="user">管理员</span>
</div>
</div>
<div class="main-container">
<router-view />
</div>
</div>
<div class="ai-btn" @click="openAiBox">
<div class="icon">
<img src="@/assets/icons/ai-icon.png" alt="" />
......@@ -46,6 +101,19 @@ import AiBox from "./components/AiBox.vue";
import { getPersonType } from "@/api/common/index";
// import { useDraggable } from "@vueuse/core";
import Menu1 from "@/assets/icons/overview/menu1.png";
import Menu2 from "@/assets/icons/overview/menu2.png";
import Menu3 from "@/assets/icons/overview/menu3.png";
import Menu4 from "@/assets/icons/overview/menu4.png";
import Menu5 from "@/assets/icons/overview/menu5.png";
import Menu6 from "@/assets/icons/overview/menu6.png";
import Menu7 from "@/assets/icons/overview/menu7.png";
import Menu8 from "@/assets/icons/overview/menu8.png";
import Menu9 from "@/assets/icons/overview/menu9.png";
import Menu10 from "@/assets/icons/overview/menu10.png";
import Menu11 from "@/assets/icons/overview/menu11.png";
import Menu12 from "@/assets/icons/overview/menu12.png";
const router = useRouter();
// const target = ref(null);
......@@ -100,6 +168,118 @@ const handleGetPersonType = async () => {
} catch (error) {}
};
// 概览页标题列表
const homeTitleList = ref([
{
name: "中美科技博弈",
path: "/ZMOverView"
},
{
name: "主要国家科技动向感知",
path: ""
},
{
name: "主要国家竞争科技安全",
path: ""
}
]);
const homeActiveTitleIndex = ref(0);
const isShowMenu = ref(false);
const handleShowMenu = (index, isShow) => {
if (index === 0) {
isShowMenu.value = isShow;
}
};
const handleHoverMenu = isShow => {
isShowMenu.value = isShow;
};
const menuList = ref([
{
title: "中美科技博弈概览",
icon: Menu1,
path: "/ZMOverView"
},
{
title: "科技法案",
icon: Menu2,
path: "/billHome"
},
{
title: "科技政令",
icon: Menu3,
path: "/decree"
},
{
title: "美国科技智库",
icon: Menu4,
path: "/thinkTank"
},
{
title: "出口管制",
icon: Menu5,
path: "/exportControl"
},
{
title: "科研合作限制",
icon: Menu6,
path: "/cooperationRestrictions"
},
{
title: "投融资限制",
icon: Menu7,
path: "/finance"
},
{
title: "市场准入限制",
icon: Menu8,
path: "/marketAccessRestrictions"
},
{
title: "规则限制",
icon: Menu9,
path: "/ruleRestrictions"
},
{
title: "美国科技人物观点",
icon: Menu10,
path: "/technologyFigures"
},
{
title: "美国主要创新主体动向",
icon: Menu11,
path: "/innovationSubject"
},
{
title: "美国科研资助体系",
icon: Menu12,
path: "/scientificFunding"
}
]);
const handleToModule = item => {
const curRoute = router.resolve({
path: item.path
});
window.open(curRoute.href, "_blank");
};
const searchText = ref('')
const handleSearch = () => {
const curRoute = router.resolve({
path: "/searchResults",
query: {
searchText: searchText.value,
}
});
window.open(curRoute.href, "_blank");
}
onMounted(() => {
handleGetPersonType();
});
......@@ -150,99 +330,291 @@ body {
height: 100vh;
position: relative;
overflow: hidden;
.navbar {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
color: rgba(10, 18, 30, 1);
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.home-page {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
height: 72px;
.nav-brand {
.navbar {
height: 64px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
display: flex;
align-items: center;
gap: 12px;
position: absolute;
left: 160px;
.brand-icon {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
justify-content: space-between;
.nav-left {
height: 64px;
margin-left: 161px;
display: flex;
.icon {
margin-top: 17px;
width: 29px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.title-box {
display: flex;
height: 64px;
margin-left: 21px;
gap: 33px;
.title {
height: 64px;
cursor: pointer;
&:hover {
.text {
color: var(--color-main-active);
}
}
.text {
height: 39px;
margin-top: 12px;
color: rgba(59, 65, 75, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
}
.textActive {
color: var(--color-main-active);
}
.bottom-line {
width: 50px;
height: 4px;
margin: 0 auto;
margin-top: 9px;
background: var(--color-main-active);
}
}
}
}
.brand-text {
cursor: pointer;
.text-ch {
height: 37px;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
line-height: 37px;
.nav-right {
display: flex;
justify-content: flex-end;
margin-right: 159px;
gap: 21px;
.search-box {
margin-top: 16px;
width: 300px;
height: 36px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 10px;
background: rgba(231, 243, 255, 1);
display: flex;
.input {
width: 264px;
height: 36px;
}
.icon {
width: 18px;
height: 18px;
margin-left: 9px;
margin-top: 9px;
img {
width: 100%;
height: 100%;
}
}
}
.text-en {
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 10px;
font-weight: 400;
line-height: 13px;
.info-box {
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
.mail {
width: 32px;
height: 32px;
margin-right: 14px;
img {
width: 100%;
height: 100%;
}
}
.user {
width: 32px;
height: 32px;
margin-right: 11px;
img {
width: 100%;
height: 100%;
}
}
.name {
width: 48px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
}
}
}
}
.user-info {
.menu-box {
position: absolute;
z-index: 9999;
width: 713px;
height: 413px;
top: 65px;
left: 140px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.8);
.menu-content {
width: 562px;
height: 348px;
margin-top: 20px;
margin-left: 72px;
display: flex;
flex-wrap: wrap;
.menu-item {
margin-top: 36px;
width: 280px;
height: 24px;
display: flex;
cursor: pointer;
&:hover {
.title {
color: var(--color-main-active);
font-size: 20px;
}
}
.icon {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-left: 16px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
.main-container {
width: 100%;
height: calc(100vh - 64px);
position: relative;
overflow: hidden;
}
}
.content-page {
width: 100%;
height: 100%;
.navbar {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 8px 12px;
border-radius: 6px;
color: #333;
position: absolute;
right: 160px;
.email {
width: 20px;
height: 20px;
background: #fff;
color: rgba(10, 18, 30, 1);
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
box-sizing: border-box;
height: 72px;
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
position: absolute;
left: 160px;
.brand-icon {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
img {
width: 100%;
height: 100%;
.brand-text {
cursor: pointer;
.text-ch {
height: 37px;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
line-height: 37px;
}
.text-en {
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 10px;
font-weight: 400;
line-height: 13px;
}
}
}
.avator {
width: 32px;
height: 32px;
.user-info {
display: flex;
align-items: center;
gap: 20px;
padding: 8px 12px;
border-radius: 6px;
color: #333;
position: absolute;
right: 160px;
.email {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.avator {
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.user {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
.user {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
.main-container {
width: 100%;
height: calc(100vh - 72px);
position: relative;
overflow: hidden;
}
}
.main-container {
width: 100%;
height: calc(100vh - 72px);
position: relative;
overflow: hidden;
}
.ai-btn {
position: absolute;
bottom: 240px;
......@@ -278,4 +650,19 @@ body {
z-index: 9999;
}
}
:deep(.el-input__wrapper) {
height: 34px;
box-shadow: none;
border-radius: 10px;
background: transparent;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
</style>
src/views/ZMOverView/index.vue
浏览文件 @ 15dee61f
......@@ -2,7 +2,7 @@
<template>
<div class="home-wrapper">
<img :src="background" alt="" class="background-img" />
<div class="home-header">
<!-- <div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
......@@ -21,7 +21,7 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="content-box">
<!-- 导航栏 -->
<div class="content-nav">
......@@ -168,92 +168,91 @@ const handleDateClick = type => {
width: 100%;
height: 700px;
position: absolute;
top: 64px;
left: 0;
z-index: -1;
}
.home-header {
height: 64px;
flex-shrink: 0;
z-index: 100;
background: url("./assets/images/header-bg.png") no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 160px;
display: flex;
justify-content: space-between;
align-items: center;
.header-right {
.header-search-box {
display: flex;
gap: 12px;
justify-content: flex-end;
// .home-header {
// height: 64px;
// flex-shrink: 0;
// z-index: 100;
// background: url("./assets/images/header-bg.png") no-repeat center center;
// background-size: 100% 100%;
// box-sizing: border-box;
// padding: 0 160px;
// display: flex;
// justify-content: space-between;
// align-items: center;
// .header-right {
// .header-search-box {
// display: flex;
// gap: 12px;
// justify-content: flex-end;
.header-search-left {
width: 360px;
height: 36px;
line-height: 36px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
display: flex;
// .header-search-left {
// width: 360px;
// height: 36px;
// line-height: 36px;
// border-radius: 4px;
// background: rgba(255, 255, 255, 0.3);
// display: flex;
.input-box {
width: 324px;
:deep(.el-input) {
.el-input__wrapper {
background-color: transparent !important;
box-shadow: none !important;
padding: 0 12px;
}
.el-input__inner {
color: #fff;
height: 36px;
line-height: 36px;
&::placeholder {
color: rgba(255, 255, 255, 0.6);
}
}
}
}
// .input-box {
// width: 324px;
// :deep(.el-input) {
// .el-input__wrapper {
// background-color: transparent !important;
// box-shadow: none !important;
// padding: 0 12px;
// }
// .el-input__inner {
// color: #fff;
// height: 36px;
// line-height: 36px;
// &::placeholder {
// color: rgba(255, 255, 255, 0.6);
// }
// }
// }
// }
.icon {
width: 36px;
height: 36px;
border-radius: 4px;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
// .icon {
// width: 36px;
// height: 36px;
// border-radius: 4px;
// cursor: pointer;
// &:hover {
// background: rgba(255, 255, 255, 0.5);
// }
img {
width: 100%;
height: 100%;
}
}
}
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
.header-search-right {
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
// .header-search-right {
// width: 36px;
// height: 36px;
// line-height: 36px;
// border-radius: 4px;
// background: rgba(255, 255, 255, 0.3);
// cursor: pointer;
.header-img-box {
width: 19px;
height: 24px;
margin: 5px auto;
// .header-img-box {
// width: 19px;
// height: 24px;
// margin: 5px auto;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
// }
// }
// }
.content-box {
flex: 1;
......@@ -262,7 +261,7 @@ const handleDateClick = type => {
padding-top: 48px;
.us-pressure-section {
position: relative;
margin-top: 64px;
// margin-top: 64px;
.data-select {
width: 120px;
height: 144px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论