提交 7aabe200 authored 作者: 李智林's avatar 李智林

update

上级 29532a44
......@@ -8,7 +8,7 @@
</div>
<div style="display: flex; height: 650px; width: 100%">
<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">
数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
......@@ -263,9 +263,9 @@ const btnList = ref([
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
width: 1601px;
height: 1600px;
margin: 0 auto;
.card-box {
width: 1600px;
height: 700px;
......
<!--ZM博弈概览页-->
<template>
<div class="home-wrapper">
<img :src="background" alt="" class="background-img">
<img :src="background" alt="" class="background-img" />
<div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
......@@ -34,7 +34,7 @@
</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>
<!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
......@@ -52,12 +52,28 @@
<span>{{ item.name }}</span>
</div>
</div>
<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px;"></commonTitle>
<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px"></commonTitle>
</div>
<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>
<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>
</template>
......@@ -66,22 +82,23 @@
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
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 right from "./assets/icons/right.png"
import commonTitle from "./commonTitle/comTitle.vue"
import week from "./assets/icons/week.png"
import weekActive from "./assets/icons/week-active.png"
import month from "./assets/icons/month.png"
import monthActive from "./assets/icons/month-active.png"
import year from "./assets/icons/year.png"
import yearActive from "./assets/icons/year-active.png"
import right from "./assets/icons/right.png";
import commonTitle from "./commonTitle/comTitle.vue";
import week from "./assets/icons/week.png";
import weekActive from "./assets/icons/week-active.png";
import month from "./assets/icons/month.png";
import monthActive from "./assets/icons/month-active.png";
import year from "./assets/icons/year.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 fourSuppress from "./components/fourSuppress/index.vue"
import gameProfile from "./components/gameProfile/index.vue"
import newRisk from "./components/newRisk/index.vue";
import fourSuppress from "./components/fourSuppress/index.vue";
import gameProfile from "./components/gameProfile/index.vue";
const router = useRouter();
......@@ -92,9 +109,9 @@ const navList = ref([
{ name: "中美博弈概况", id: "zm-overview" }
]);
const handleScrollTo = (id) => {
const handleScrollTo = id => {
const element = document.getElementById(id);
const container = document.querySelector('.content-box');
const container = document.querySelector(".content-box");
if (element && container) {
const targetOffsetTop = element.offsetTop - container.offsetTop;
container.scrollTo({
......@@ -130,12 +147,16 @@ const dateList = ref([
{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
]);
const activeDate = ref("week");
const handleDateClick = (type) => {
const handleDateClick = type => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.home-wrapper {
width: 100%;
height: 100vh;
......@@ -238,7 +259,7 @@ const handleDateClick = (type) => {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 48px 160px;
padding-top: 48px;
.us-pressure-section {
position: relative;
margin-top: 64px;
......@@ -340,6 +361,49 @@ const handleDateClick = (type) => {
}
}
}
.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>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论