Skip to content

R
risk-monitor
提交 7aabe200 authored 作者: 李智林's avatar 李智林
浏览文件
操作

update

上级 29532a44
隐藏空白字符变更
内嵌 并排
正在显示 包含 216 行增加 和 152 行删除
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 7aabe200
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
<div style="display: flex; height: 650px; width: 100%"> <div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%"> <div style="width: 50%">
<div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px"> <div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px;align-items: center;" >
<div style="display: flex; margin-left: 50px"> <div style="display: flex; margin-left: 50px">
数据来源: 数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"> <el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
...@@ -263,9 +263,9 @@ const btnList = ref([ ...@@ -263,9 +263,9 @@ const btnList = ref([
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 100%; width: 1601px;
height: 1600px; height: 1600px;
margin: 0 auto;
.card-box { .card-box {
width: 1600px; width: 1600px;
height: 700px; height: 700px;
......
src/views/ZMOverView/index.vue
浏览文件 @ 7aabe200
<!--ZM博弈概览页--> <!--ZM博弈概览页-->
<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>
...@@ -23,42 +23,58 @@ ...@@ -23,42 +23,58 @@
</div> </div>
</div> </div>
<div class="content-box"> <div class="content-box">
<!-- 导航栏 --> <!-- 导航栏 -->
<div class="content-nav"> <div class="content-nav">
<div class="nav-title">中美科技博弈概览</div> <div class="nav-title">中美科技博弈概览</div>
<div class="nav-btn"> <div class="nav-btn">
<div v-for="item in navList" :key="item.name" class="btn-item" @click="handleScrollTo(item.id)"> <div v-for="item in navList" :key="item.name" class="btn-item" @click="handleScrollTo(item.id)">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<img :src="right" alt="" /> <img :src="right" alt="" />
</div> </div>
</div> </div>
</div> </div>
<!-- 最新风险动态 --> <!-- 最新风险动态 -->
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;margin-bottom: 36px;"></commonTitle> <commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px; margin-bottom: 36px"></commonTitle>
<newRisk></newRisk> <newRisk></newRisk>
<!-- 最新科技要闻 --> <!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> --> <!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
<!-- 美对华“四全”打压 --> <!-- 美对华“四全”打压 -->
<div id="us-pressure" class="us-pressure-section"> <div id="us-pressure" class="us-pressure-section">
<div class="data-select"> <div class="data-select">
<div <div
v-for="item in dateList" v-for="item in dateList"
:key="item.type" :key="item.type"
class="date-item" class="date-item"
:class="{ active: activeDate === item.type }" :class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)" @click="handleDateClick(item.type)"
> >
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" /> <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
</div> </div>
<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px;"></commonTitle> <commonTitle title="美对华“四全”打压" style="margin-bottom: 36px"></commonTitle>
</div> </div>
<fourSuppress></fourSuppress> <fourSuppress></fourSuppress>
<!-- 中美博弈概况 --> <!-- 中美博弈概况 -->
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;margin-bottom: 36px;"></commonTitle> <commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px; margin-bottom: 36px"></commonTitle>
<gameProfile></gameProfile> <gameProfile></gameProfile>
</div> <div class="bottom-info">
<div class="info-item">
<div class="info-item-left">
<img :src="logo1" alt="" />
<div class="info-item-left-content">
<p>地址：北京市海淀区复兴路15号 邮编：100038</p>
<p>办公电话：010-58882033 办公传真：010-58882590</p>
<p>中国科学技术信息研究所 版权所有 京ICP备10027328号</p>
</div>
</div>
<div class="info-item-right">
<img :src="logo2" alt="" />
<img :src="logo3" alt="" />
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -66,22 +82,23 @@ ...@@ -66,22 +82,23 @@
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import background from "./assets/images/backgroundBT.png" import background from "./assets/images/backgroundBT.png";
import HeaderMenu from "@/components/headerMenu.vue"; import HeaderMenu from "@/components/headerMenu.vue";
import right from "./assets/icons/right.png" import right from "./assets/icons/right.png";
import commonTitle from "./commonTitle/comTitle.vue" import commonTitle from "./commonTitle/comTitle.vue";
import week from "./assets/icons/week.png" import week from "./assets/icons/week.png";
import weekActive from "./assets/icons/week-active.png" import weekActive from "./assets/icons/week-active.png";
import month from "./assets/icons/month.png" import month from "./assets/icons/month.png";
import monthActive from "./assets/icons/month-active.png" import monthActive from "./assets/icons/month-active.png";
import year from "./assets/icons/year.png" import year from "./assets/icons/year.png";
import yearActive from "./assets/icons/year-active.png" import yearActive from "./assets/icons/year-active.png";
import logo1 from "./assets/images/logo1.png";
import logo2 from "./assets/images/logo2.png";
import logo3 from "./assets/images/logo3.png";
// 组件引入 // 组件引入
import newRisk from "./components/newRisk/index.vue" import newRisk from "./components/newRisk/index.vue";
import fourSuppress from "./components/fourSuppress/index.vue" import fourSuppress from "./components/fourSuppress/index.vue";
import gameProfile from "./components/gameProfile/index.vue" import gameProfile from "./components/gameProfile/index.vue";
const router = useRouter(); const router = useRouter();
...@@ -92,13 +109,13 @@ const navList = ref([ ...@@ -92,13 +109,13 @@ const navList = ref([
{ name: "中美博弈概况", id: "zm-overview" } { name: "中美博弈概况", id: "zm-overview" }
]); ]);
const handleScrollTo = (id) => { const handleScrollTo = id => {
const element = document.getElementById(id); const element = document.getElementById(id);
const container = document.querySelector('.content-box'); const container = document.querySelector(".content-box");
if (element && container) { if (element && container) {
const targetOffsetTop = element.offsetTop - container.offsetTop; const targetOffsetTop = element.offsetTop - container.offsetTop;
container.scrollTo({ container.scrollTo({
top: targetOffsetTop, top: targetOffsetTop,
behavior: "smooth" behavior: "smooth"
}); });
} }
...@@ -130,27 +147,31 @@ const dateList = ref([ ...@@ -130,27 +147,31 @@ const dateList = ref([
{ name: "今年", type: "year", icon: year, activeIcon: yearActive } { name: "今年", type: "year", icon: year, activeIcon: yearActive }
]); ]);
const activeDate = ref("week"); const activeDate = ref("week");
const handleDateClick = (type) => { const handleDateClick = type => {
activeDate.value = type; activeDate.value = type;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.home-wrapper { .home-wrapper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.background-img { .background-img {
width: 100%; width: 100%;
height: 700px; height: 700px;
position: absolute; position: absolute;
top: 64px; 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;
...@@ -238,108 +259,151 @@ const handleDateClick = (type) => { ...@@ -238,108 +259,151 @@ const handleDateClick = (type) => {
flex: 1; flex: 1;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
padding: 48px 160px; 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;
position: absolute; position: absolute;
top: 80px; top: 80px;
left: -160px; left: -160px;
background-color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px; padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
z-index: 10; z-index: 10;
.date-item { .date-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 18px; padding-left: 18px;
height: 46px; height: 46px;
cursor: pointer; cursor: pointer;
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 18px; margin-right: 18px;
} }
span { span {
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;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
&.active { &.active {
background-color: rgba(231, 243, 255, 1); background-color: rgba(231, 243, 255, 1);
span { span {
font-weight: 700; font-weight: 700;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
} }
} }
} }
} }
.content-nav { .content-nav {
.nav-title { .nav-title {
font-size: 48px; font-size: 48px;
font-weight: 400; font-weight: 400;
line-height: 62px; line-height: 62px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
margin-bottom: 14px; margin-bottom: 14px;
} }
.nav-btn { .nav-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
.btn-item { .btn-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 24px 10px 32px; padding: 10px 24px 10px 32px;
background: #ffffff; background: #ffffff;
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
// &:hover { // &:hover {
// background: rgba(255, 255, 255, 0.8); // background: rgba(255, 255, 255, 0.8);
// transform: translateY(-2px); // transform: translateY(-2px);
// } // }
span { span {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
margin-right: 16px; margin-right: 16px;
} }
img { img {
width: 6px; width: 6px;
height: 12px; height: 12px;
} }
} }
} }
} }
.bottom-info {
width: 100%;
height: 176px;
margin-bottom: 80px;
background-color: rgb(247, 248, 249);
.info-item {
width: 1601px;
height: 176px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.info-item-left {
display: flex;
align-items: center;
img {
width: 134px;
height: 91px;
margin-right: 27px;
}
.info-item-left-content {
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: rgb(59, 65, 75);
font-family: Microsoft YaHei;
}
}
.info-item-right {
display: flex;
align-items: center;
img:first-child {
width: 300px;
height: 48.8px;
margin-right: 24px;
}
img:last-child {
width: 300px;
height: 43.5px;
}
}
}
}
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论