Skip to content

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

update

上级 d5af7461
隐藏空白字符变更
内嵌 并排
正在显示 包含 553 行增加 和 167 行删除
src/App.vue
浏览文件 @ 15dee61f
<template> <template>
<div id="app"> <div id="app">
<div class="pro-wrapper"> <div class="pro-wrapper">
<div class="navbar"> <div class="home-page">
<div class="nav-brand"> <div class="navbar">
<div class="brand-icon"> <div class="nav-left">
<img src="@/assets/icons/header-logo.png" alt="" /> <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>
<div class="brand-text" @click="handleToHome"> <div class="nav-right">
<div class="text-ch">某方向风险监测预警系统</div> <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> </div>
<div class="user-info"> <div class="menu-box" v-if="isShowMenu" @mouseenter="handleHoverMenu(true)" @mouseleave="handleHoverMenu(false)">
<div class="email"> <div class="menu-content">
<img src="@/assets/icons/header-icon.png" alt="" /> <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>
<div class="avator"> </div>
<img src="@/assets/icons/header-avator.png" alt="" /> <div class="main-container">
</div> <router-view />
<span class="user">管理员</span>
</div> </div>
</div> </div>
<div class="main-container"> <div class="content-page">
<router-view /> <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>
<div class="ai-btn" @click="openAiBox"> <div class="ai-btn" @click="openAiBox">
<div class="icon"> <div class="icon">
<img src="@/assets/icons/ai-icon.png" alt="" /> <img src="@/assets/icons/ai-icon.png" alt="" />
...@@ -46,6 +101,19 @@ import AiBox from "./components/AiBox.vue"; ...@@ -46,6 +101,19 @@ import AiBox from "./components/AiBox.vue";
import { getPersonType } from "@/api/common/index"; import { getPersonType } from "@/api/common/index";
// import { useDraggable } from "@vueuse/core"; // 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 router = useRouter();
// const target = ref(null); // const target = ref(null);
...@@ -100,6 +168,118 @@ const handleGetPersonType = async () => { ...@@ -100,6 +168,118 @@ const handleGetPersonType = async () => {
} catch (error) {} } 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(() => { onMounted(() => {
handleGetPersonType(); handleGetPersonType();
}); });
...@@ -150,99 +330,291 @@ body { ...@@ -150,99 +330,291 @@ body {
height: 100vh; height: 100vh;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.navbar { .home-page {
display: flex; width: 100%;
justify-content: center; height: 100%;
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);
position: relative; position: relative;
box-sizing: border-box; .navbar {
height: 72px; height: 64px;
.nav-brand { 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; display: flex;
align-items: center; justify-content: space-between;
gap: 12px; .nav-left {
position: absolute; height: 64px;
left: 160px; margin-left: 161px;
display: flex;
.brand-icon { .icon {
width: 48px; margin-top: 17px;
height: 48px; width: 29px;
img { height: 30px;
width: 100%; img {
height: 100%; 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);
}
}
} }
} }
.nav-right {
.brand-text { display: flex;
cursor: pointer; justify-content: flex-end;
.text-ch { margin-right: 159px;
height: 37px; gap: 21px;
color: rgba(10, 18, 30, 1); .search-box {
font-family: Microsoft YaHei; margin-top: 16px;
font-size: 32px; width: 300px;
font-weight: 700; height: 36px;
line-height: 37px; 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%;
}
}
} }
.info-box {
.text-en { height: 64px;
color: rgba(10, 18, 30, 1); display: flex;
font-family: Microsoft YaHei; justify-content: flex-end;
font-size: 10px; align-items: center;
font-weight: 400; .mail {
line-height: 13px; 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;
}
} }
} }
} }
.menu-box {
.user-info { 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; display: flex;
justify-content: center;
align-items: center; align-items: center;
gap: 20px; background: #fff;
padding: 8px 12px; color: rgba(10, 18, 30, 1);
border-radius: 6px; border-bottom: 1px solid #e5e7eb;
color: #333; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: absolute; position: relative;
right: 160px; box-sizing: border-box;
height: 72px;
.email { .nav-brand {
width: 20px; display: flex;
height: 20px; align-items: center;
gap: 12px;
position: absolute;
left: 160px;
.brand-icon {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
img { .brand-text {
width: 100%; cursor: pointer;
height: 100%; .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 { .user-info {
width: 32px; display: flex;
height: 32px; 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 { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
}
.user { .user {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; 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 { .ai-btn {
position: absolute; position: absolute;
bottom: 240px; bottom: 240px;
...@@ -278,4 +650,19 @@ body { ...@@ -278,4 +650,19 @@ body {
z-index: 9999; 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> </style>
src/views/ZMOverView/index.vue
浏览文件 @ 15dee61f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<img :src="background" alt="" class="background-img" /> <img :src="background" alt="" class="background-img" />
<div class="home-header"> <!-- <div class="home-header">
<div class="header-left"> <div class="header-left">
<HeaderMenu></HeaderMenu> <HeaderMenu></HeaderMenu>
</div> </div>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="content-box"> <div class="content-box">
<!-- 导航栏 --> <!-- 导航栏 -->
<div class="content-nav"> <div class="content-nav">
...@@ -168,92 +168,91 @@ const handleDateClick = type => { ...@@ -168,92 +168,91 @@ const handleDateClick = type => {
width: 100%; width: 100%;
height: 700px; height: 700px;
position: absolute; position: absolute;
top: 64px;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.home-header { // .home-header {
height: 64px; // height: 64px;
flex-shrink: 0; // flex-shrink: 0;
z-index: 100; // z-index: 100;
background: url("./assets/images/header-bg.png") no-repeat center center; // background: url("./assets/images/header-bg.png") no-repeat center center;
background-size: 100% 100%; // background-size: 100% 100%;
box-sizing: border-box; // box-sizing: border-box;
padding: 0 160px; // padding: 0 160px;
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
align-items: center; // align-items: center;
.header-right { // .header-right {
.header-search-box { // .header-search-box {
display: flex; // display: flex;
gap: 12px; // gap: 12px;
justify-content: flex-end; // justify-content: flex-end;
.header-search-left { // .header-search-left {
width: 360px; // width: 360px;
height: 36px; // height: 36px;
line-height: 36px; // line-height: 36px;
border-radius: 4px; // border-radius: 4px;
background: rgba(255, 255, 255, 0.3); // background: rgba(255, 255, 255, 0.3);
display: flex; // display: flex;
.input-box { // .input-box {
width: 324px; // width: 324px;
:deep(.el-input) { // :deep(.el-input) {
.el-input__wrapper { // .el-input__wrapper {
background-color: transparent !important; // background-color: transparent !important;
box-shadow: none !important; // box-shadow: none !important;
padding: 0 12px; // padding: 0 12px;
} // }
.el-input__inner { // .el-input__inner {
color: #fff; // color: #fff;
height: 36px; // height: 36px;
line-height: 36px; // line-height: 36px;
&::placeholder { // &::placeholder {
color: rgba(255, 255, 255, 0.6); // color: rgba(255, 255, 255, 0.6);
} // }
} // }
} // }
} // }
.icon { // .icon {
width: 36px; // width: 36px;
height: 36px; // height: 36px;
border-radius: 4px; // border-radius: 4px;
cursor: pointer; // cursor: pointer;
&:hover { // &:hover {
background: rgba(255, 255, 255, 0.5); // background: rgba(255, 255, 255, 0.5);
} // }
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
} // }
} // }
} // }
.header-search-right { // .header-search-right {
width: 36px; // width: 36px;
height: 36px; // height: 36px;
line-height: 36px; // line-height: 36px;
border-radius: 4px; // border-radius: 4px;
background: rgba(255, 255, 255, 0.3); // background: rgba(255, 255, 255, 0.3);
cursor: pointer; // cursor: pointer;
.header-img-box { // .header-img-box {
width: 19px; // width: 19px;
height: 24px; // height: 24px;
margin: 5px auto; // margin: 5px auto;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
} // }
} // }
} // }
} // }
} // }
} // }
.content-box { .content-box {
flex: 1; flex: 1;
...@@ -262,7 +261,7 @@ const handleDateClick = type => { ...@@ -262,7 +261,7 @@ const handleDateClick = type => {
padding-top: 48px; padding-top: 48px;
.us-pressure-section { .us-pressure-section {
position: relative; position: relative;
margin-top: 64px; // margin-top: 64px;
.data-select { .data-select {
width: 120px; width: 120px;
height: 144px; height: 144px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论