提交 a516b90f authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 18829f75
...@@ -3,42 +3,44 @@ ...@@ -3,42 +3,44 @@
<div class="pro-wrapper"> <div class="pro-wrapper">
<div class="home-page"> <div class="home-page">
<div class="navbar"> <div class="navbar">
<div class="nav-left"> <div class="nav-content">
<div class="icon"> <div class="nav-left">
<img src="@/assets/icons/overview/logo.png" alt="" /> <div class="icon">
</div> <img src="@/assets/icons/overview/logo.png" alt="" />
<div class="title-box"> </div>
<div <div class="title-box">
class="title" <div
:aria-disabled="item.disabled" class="title"
v-for="(item, index) in homeTitleList" v-for="(item, index) in homeTitleList"
:key="index" :key="index"
@mouseenter="handleShowMenu(index, true)" @mouseenter="handleShowMenu(index, true)"
@mouseleave="handleShowMenu(index, false)" @mouseleave="handleShowMenu(index, false)"
> @click="handleClickTitle(item)"
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }"> >
{{ item.name }} <div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
{{ item.name }}
</div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div> </div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div> </div>
</div> </div>
</div> <div class="nav-right">
<div class="nav-right"> <div class="search-box">
<div class="search-box"> <div class="input"><el-input type="text" v-model="searchText" @keyup.enter="handleSearch" /></div>
<div class="input"><el-input type="text" v-model="searchText" @keyup.enter="handleSearch" /></div>
<div class="icon" @click="handleSearch"> <div class="icon" @click="handleSearch">
<img src="@/assets/icons/overview/search.png" alt="" /> <img src="@/assets/icons/overview/search.png" alt="" />
</div> </div>
</div>
<div class="info-box" aria-disabled="true">
<div class="mail">
<img src="@/assets/icons/overview/mail.png" alt="" />
</div> </div>
<div class="user"> <div class="info-box" @click="handleClickToolBox">
<img src="@/assets/icons/overview/user.png" alt="" /> <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 class="name">{{ "管理员" }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -81,7 +83,7 @@ ...@@ -81,7 +83,7 @@
</div> </div>
</div> --> </div> -->
<div class="right-btn" aria-disabled="true"> <div class="right-btn" @click="handleClickToolBox">
<div class="item"> <div class="item">
<div class="icon"> <div class="icon">
<img src="@/assets/icons/overview/domain.png" alt="" /> <img src="@/assets/icons/overview/domain.png" alt="" />
...@@ -96,7 +98,7 @@ ...@@ -96,7 +98,7 @@
</div> </div>
</div> </div>
<div class="tool-box" aria-disabled="true"> <div class="tool-box" @click="handleClickToolBox">
<div class="tool-item"> <div class="tool-item">
<img src="@/assets/icons/tool-item-icon1.png" alt="" /> <img src="@/assets/icons/tool-item-icon1.png" alt="" />
</div> </div>
...@@ -147,6 +149,7 @@ import Menu9 from "@/assets/icons/overview/menu9.png"; ...@@ -147,6 +149,7 @@ import Menu9 from "@/assets/icons/overview/menu9.png";
import Menu10 from "@/assets/icons/overview/menu10.png"; import Menu10 from "@/assets/icons/overview/menu10.png";
import Menu11 from "@/assets/icons/overview/menu11.png"; import Menu11 from "@/assets/icons/overview/menu11.png";
import Menu12 from "@/assets/icons/overview/menu12.png"; import Menu12 from "@/assets/icons/overview/menu12.png";
import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
...@@ -321,6 +324,16 @@ const handleSearch = () => { ...@@ -321,6 +324,16 @@ const handleSearch = () => {
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
const handleClickTitle = item => {
if (item.name === "主要国家科技动向感知" || item.name === "主要国家竞争科技安全") {
ElMessage.warning("当前功能正在开发中,敬请期待!");
}
};
const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中,敬请期待!");
};
onMounted(() => { onMounted(() => {
handleGetPersonType(); handleGetPersonType();
}); });
...@@ -376,123 +389,130 @@ body { ...@@ -376,123 +389,130 @@ body {
height: 100%; height: 100%;
position: relative; position: relative;
.navbar { .navbar {
width: 100%;
height: 64px; height: 64px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); 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%); background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
display: flex;
justify-content: space-between; .nav-content {
.nav-left { width: 1600px;
height: 64px; height: 64px;
margin-left: 161px; margin: 0 auto;
display: flex; display: flex;
.icon { justify-content: space-between;
margin-top: 17px; .nav-left {
width: 29px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.title-box {
display: flex;
height: 64px; 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 {
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; display: flex;
.input {
width: 264px;
height: 36px;
}
.icon { .icon {
width: 18px; margin-top: 17px;
height: 18px; width: 29px;
margin-left: 9px; height: 30px;
margin-top: 9px;
img { img {
width: 100%; width: 100%;
height: 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);
}
}
}
} }
.info-box { .nav-right {
height: 64px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; gap: 21px;
.mail { .search-box {
width: 32px; margin-top: 16px;
height: 32px; width: 300px;
margin-right: 14px; height: 36px;
img { box-sizing: border-box;
width: 100%; border: 1px solid rgba(231, 243, 255, 1);
height: 100%; border-radius: 10px;
background: rgba(231, 243, 255, 1);
display: flex;
.input {
width: 264px;
height: 36px;
} }
} .icon {
.user { width: 18px;
width: 32px; height: 18px;
height: 32px; margin-left: 9px;
margin-right: 11px; margin-top: 9px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
} }
.name { .info-box {
width: 48px; height: 64px;
height: 30px; display: flex;
color: rgba(59, 65, 75, 1); justify-content: flex-end;
font-family: Microsoft YaHei; align-items: center;
font-style: Regular; .mail {
font-size: 16px; width: 32px;
font-weight: 400; height: 32px;
line-height: 30px; margin-right: 14px;
letter-spacing: 0px; cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.user {
width: 32px;
height: 32px;
margin-right: 11px;
cursor: pointer;
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;
}
} }
} }
} }
...@@ -508,6 +528,7 @@ body { ...@@ -508,6 +528,7 @@ body {
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px; border-radius: 10px;
backdrop-filter: blur(30px); backdrop-filter: blur(30px);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
.menu-content { .menu-content {
width: 562px; width: 562px;
...@@ -717,6 +738,7 @@ body { ...@@ -717,6 +738,7 @@ body {
.tool-item { .tool-item {
width: 24px; width: 24px;
height: 24px; height: 24px;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<div class="title">{{ "最新动态" }}</div> <div class="title">{{ "最新动态" }}</div>
</div> </div>
<div class="box1-main"> <div class="box1-main">
<div class="box1-item" v-for="(item, index) in box1DataList" :key="index"> <div class="box1-item" v-for="(item, index) in box1DataList" :key="index" @click="handleToDecreeDetail(item)">
<div class="box1-item-left">{{ index + 1 }}</div> <div class="box1-item-left">{{ index + 1 }}</div>
<div class="box1-item-right"> <div class="box1-item-right">
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
<div class="text">{{ item.name }}</div> <div class="text">{{ item.name }}</div>
</div> </div>
</div> </div>
<div class="left-footer" v-if="box3DataList.length"> <div class="left-footer">
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next"
...@@ -217,6 +217,7 @@ ...@@ -217,6 +217,7 @@
<script setup> <script setup>
import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue"; import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
import router from "@/router";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart"; import getWordCloudChart from "./uitls/worldCloudChart";
import { import {
...@@ -497,6 +498,17 @@ const prev = () => { ...@@ -497,6 +498,17 @@ const prev = () => {
} }
}; };
const handleToDecreeDetail = (item) => {
window.sessionStorage.setItem("curTabName", item.title);
const route = router.resolve({
path: "/decreeLayout",
query: {
id: item.id
}
});
window.open(route.href, "_blank");
}
watch(activeDate, async () => { watch(activeDate, async () => {
handleGetBox2DataList(); // 美对我要素打压情况 handleGetBox2DataList(); // 美对我要素打压情况
handleGetBox3DataList(); // 美自身要素发展情况 handleGetBox3DataList(); // 美自身要素发展情况
...@@ -692,6 +704,7 @@ onUnmounted(() => { ...@@ -692,6 +704,7 @@ onUnmounted(() => {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
cursor: pointer;
.box1-item-left { .box1-item-left {
width: 30px; width: 30px;
height: 30px; height: 30px;
......
No preview for this file type
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论