Skip to content

R
risk-monitor
提交 95101793 authored 作者: 付康's avatar 付康
浏览文件
操作

合并分支 'lzl-dev' 到 'master'

Lzl dev 查看合并请求 !92
上级 7fdbd598 3b469cee
隐藏空白字符变更
内嵌 并排
正在显示 包含 813 行增加 和 10 行删除
src/router/modules/ZMOverView.js 0 → 100644
浏览文件 @ 95101793
//ZM博弈概览
import ZMOverview from "@/views/ZMOverView/index.vue";
const ZMOverviewRoutes = [
//创新主体
{
path: "/ZMOerView",
name: "ZMOerView",
component: ZMOverview,
meta: {
title: "ZM博弈概览"
}
}
]
export default ZMOverviewRoutes
src/views/ZMGame/component/scienceNews/index.vue
浏览文件 @ 95101793
<!--科技要闻--> <!--科技要闻-->
<template> <template>
<div class="content-wrapper"> <div class="content-wrapper">
科技要闻 <img :src="titlebg" alt="" class="title-bg" />
<img :src="background" alt="" class="background" />
</div> <!-- 搜索框 -->
<div class="search-wrapper">
<input type="text" v-model="searchText" placeholder="搜索新闻" class="search-input" />
<button class="search-btn">
<img :src="search" alt="" />
搜索
</button>
</div>
<!-- 模块选择 -->
<div class="module-wrapper">
<div
v-for="(item, index) in moduleList"
:key="index"
class="module-item"
:class="{ active: activeModule === item.name }"
@click="activeModule = item.name"
>
<span>{{ item.name }}</span>
<img :src="activeModule === item.name ? rightActive : right" alt="" />
</div>
<div class="adjustment-btn">
<img :src="adjustment" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main-content">
<div class="left">
<div class="title">
<div class="title-left">
<img :src="icon1" alt="" class="icon1" />
<span>今日要闻</span>
<img :src="right" alt="" class="right-icon" />
</div>
<div class="title-right">
<img :src="refresh" alt="" class="refresh-icon" />
<span>换一批</span>
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import search from "./assets/Search.png";
import right from "./assets/right.png";
import rightActive from "./assets/right_active.png";
import adjustment from "./assets/adjustment.png";
import titlebg from "./assets/titlebg.png";
import icon1 from "./assets/icon1.png";
import icon2 from "./assets/icon2.png";
import refresh from "./assets/refresh.png";
import background from "../../../../assets/images/background.png";
const searchText = ref("");
// 模块选择数据
const activeModule = ref("新闻纵览");
const moduleList = ref([
{ name: "新闻纵览" },
{ name: "科技法案" },
{ name: "科技政令" },
{ name: "科技智库" },
{ name: "出口管制" },
{ name: "投融资限制" },
{ name: "市场准入限制" },
{ name: "合作限制" },
{ name: "规则限制" },
{ name: "创新主体" },
{ name: "科技人物" },
{ name: "资助体系" }
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 100%; width: 1600px;
height: 100%; height: 908px;
margin-bottom: 50px;
border-radius: 10px;
border: 1px solid #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding-top: 48px;
position: relative;
background: linear-gradient(180deg, #e7f3ff 0%, #ffffff 20%);
.title-bg {
width: 100%;
height: 56px;
position: absolute;
top: 0;
left: 0;
}
.background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
}
// 搜索框
.search-wrapper {
position: relative;
z-index: 2;
width: 800px;
height: 48px;
margin: 0 auto;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 3px;
margin-bottom: 38px;
.search-input {
width: 650px;
height: 48px;
border: none;
outline: none;
background-color: transparent;
padding-left: 16px;
font-size: 16px;
color: rgb(0, 0, 0);
::placeholder {
color: rgb(132, 136, 142);
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: Microsoft YaHei;
}
}
.search-btn {
width: 120px;
height: 42px;
border: none;
outline: none;
background-color: rgb(5, 95, 194);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 22px;
height: 22px;
margin-right: 8px;
}
font-size: 18px;
color: rgb(255, 255, 255);
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
// 模块选择
.module-wrapper {
position: relative;
z-index: 2;
width: 1262px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 0 19px;
justify-content: center;
margin-bottom: 26px;
.module-item {
height: 40px;
padding: 0 20px;
background: rgba(255, 255, 255, 1);
border-radius: 32px;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
cursor: pointer;
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(95, 101, 108);
margin-right: 10px;
white-space: nowrap;
}
img {
width: 6px;
height: 12px;
}
&.active {
background: rgba(231, 243, 255, 1);
border: 1px solid rgba(174, 214, 255, 1);
span {
color: rgb(5, 95, 194);
}
}
}
.adjustment-btn {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);
img {
width: 16px;
height: 16px;
}
}
}
// 主要内容
.main-content {
position: relative;
z-index: 2;
width: 100%;
height: 656px;
margin: 0 auto;
padding: 0 22px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
gap: 21px;
.left {
width: 50%;
height: 100%;
padding: 0 24px;
}
.right {
width: 50%;
height: 100%;
padding: 0 24px;
}
}
// 通用标题
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid rgb(234, 236, 238);
.title-left {
display: flex;
align-items: center;
justify-content: center;
.icon1 {
width: 20px;
height: 20px;
margin-right: 10px;
}
span {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 700;
color: rgb(5, 95, 194);
line-height: 24px;
margin-right: 10px;
}
.right-icon {
width: 6px;
height: 12px;
}
}
.title-right {
padding: 2px 12px;
border-radius: 20px;
background-color: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 12px;
height: 12px;
margin-right: 9px;
}
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(5, 95, 194);
line-height: 24px;
}
}
}
} }
</style> </style>
\ No newline at end of file
src/views/ZMGame/index.vue
浏览文件 @ 95101793
...@@ -41,7 +41,7 @@ const aciveBtn = ref('最新风险动态') ...@@ -41,7 +41,7 @@ const aciveBtn = ref('最新风险动态')
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow-y: hidden; overflow-y: auto;
.home-header { .home-header {
height: 64px; height: 64px;
......
src/views/ZMOverView/commonPrompt/index.vue 0 → 100644
浏览文件 @ 95101793
<template>
<el-tooltip
effect="dark"
:content="content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="text-ellipsis">
<slot>{{ content }}</slot>
</div>
</el-tooltip>
</template>
<script setup>
defineProps({
content: {
type: String,
default: ""
}
});
</script>
<style scoped>
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
cursor: pointer;
}
</style>
<style>
.common-prompt-popper.el-popper {
padding: 8px 16px !important;
border-radius: 10px !important;
background-color: rgb(59, 65, 75) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Microsoft YaHei" !important;
line-height: 30px !important;
color: #fff !important;
border: none !important;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
}
</style>
src/views/ZMOverView/commonTitle/comTitle.vue 0 → 100644
浏览文件 @ 95101793
<template>
<div class="com-title">
<div class="cl1"></div>
<div class="cl2"></div>
<div class="title">{{ title }}</div>
<div class="cl3"></div>
</div>
</template>
<script setup>
import { ref } from "vue";
// 传入的title数据
const props = defineProps({
title: {
type: String,
default: ""
}
});
</script>
<style scoped lang="scss">
.com-title {
width: 100%;
height: 42px;
display: flex;
align-items: center;
margin-bottom: 36px;
.cl1 {
width: 24px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
flex-shrink: 0;
}
.cl2 {
width: 8px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
flex-shrink: 0;
}
.title {
height: 42px;
white-space: nowrap;
font-size: 32px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 42px;
margin-right: 16px;
flex-shrink: 0;
}
.cl3 {
flex: 1;
height: 1px;
background-color: rgba(174, 214, 255, 1);
box-sizing: border-box;
}
}
</style>
src/views/ZMOverView/components/fourSuppress/index.vue 0 → 100644
浏览文件 @ 95101793
<!--科技要闻-->
<template>
<div class="content-wrapper">
美对华四全打压
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
height: 2203px;
}
</style>
src/views/ZMOverView/components/gameProfile/index.vue 0 → 100644
浏览文件 @ 95101793
<!--科技要闻-->
<template>
<div class="content-wrapper">
中美博弈概况
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
height: 1416px;
}
</style>
src/views/ZMOverView/components/newRisk/index.vue 0 → 100644
浏览文件 @ 95101793
<!--科技要闻-->
<template>
<div class="content-wrapper">
最新风险动态
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
height: 904px;
}
</style>
src/views/ZMOverView/index.vue 0 → 100644
浏览文件 @ 95101793
<!--ZM博弈概览页-->
<template>
<div class="home-wrapper">
<img :src="background" alt="" class="background-img">
<div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
<div class="header-right">
<div class="header-search-box">
<div class="header-search-left">
<div class="input-box">
<el-input v-model="searchText" @keyup.enter="handleSearch" />
</div>
<div class="icon" @click="handleSearch">
<img src="./assets/images/search-icon.png" alt="" />
</div>
</div>
<div class="header-search-right" @click="handleToSearch">
<div class="header-img-box"><img src="./assets/images/search-btn.png" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<div class="content-box">
<!-- 导航栏 -->
<div class="content-nav">
<div class="nav-title">中美科技博弈概览</div>
<div class="nav-btn">
<div v-for="item in navList" :key="item.name" class="btn-item" @click="handleScrollTo(item.id)">
<span>{{ item.name }}</span>
<img :src="right" alt="" />
</div>
</div>
</div>
<!-- 最新风险动态 -->
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle>
<newRisk></newRisk>
<!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
<!-- 美对华“四全”打压 -->
<commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle>
<fourSuppress></fourSuppress>
<!-- 中美博弈概况 -->
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle>
<gameProfile></gameProfile>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
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 newRisk from "./components/newRisk/index.vue"
import fourSuppress from "./components/fourSuppress/index.vue"
import gameProfile from "./components/gameProfile/index.vue"
const router = useRouter();
const navList = ref([
{ name: "最新风险动态", id: "risk-dynamic" },
{ name: "最新科技要闻", id: "tech-news" },
{ name: "美对华“四全”打压", id: "us-pressure" },
{ name: "中美博弈概况", id: "zm-overview" }
]);
const handleScrollTo = (id) => {
const element = document.getElementById(id);
const container = document.querySelector('.content-box');
if (element && container) {
const targetOffsetTop = element.offsetTop - container.offsetTop;
container.scrollTo({
top: targetOffsetTop,
behavior: "smooth"
});
}
};
const searchText = ref("");
const handleSearch = () => {
if (!searchText.value.trim()) {
ElMessage.warning("请输入搜索关键词");
return;
}
const curRoute = router.resolve({
path: "/searchResults",
query: {
searchText: searchText.value.trim()
}
});
window.open(curRoute.href, "_blank");
};
// 跳转到综合检索页面
const handleToSearch = () => {
const route = router.resolve("/comprehensiveSearch");
window.open(route.href, "_blank");
};
const dateList = ref([
{ name: "本周", type: "week", icon: week, activeIcon: weekActive },
{ name: "本月", type: "month", icon: month, activeIcon: monthActive },
{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
]);
const activeDate = ref("week");
const handleDateClick = (type) => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
.home-wrapper {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 291px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
// transition: all 0.3s;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
.background-img {
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;
.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);
}
}
}
}
.icon {
width: 36px;
height: 36px;
border-radius: 4px;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
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-img-box {
width: 19px;
height: 24px;
margin: 5px auto;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
.content-box {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 48px 160px;
.content-nav {
.nav-title {
font-size: 48px;
font-weight: 400;
line-height: 62px;
letter-spacing: 0px;
text-align: center;
color: rgb(5, 95, 194);
font-family: YouSheBiaoTiHei;
margin-bottom: 14px;
}
.nav-btn {
display: flex;
justify-content: center;
gap: 16px;
.btn-item {
display: flex;
align-items: center;
padding: 10px 24px 10px 32px;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 50px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
cursor: pointer;
transition: all 0.3s;
// &:hover {
// background: rgba(255, 255, 255, 0.8);
// transform: translateY(-2px);
// }
span {
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 26px;
color: rgb(5, 95, 194);
margin-right: 16px;
}
img {
width: 6px;
height: 12px;
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论